- 세상의 모든 계산기 자유(질문) 게시판 일반 ()
수식 입력기(ckeditor - wiris) 설치 테스트
-
- 2024.06.18 - 13:11 2015.12.12 - 12:16 6220 11
1. MathJax 문제 발생
기존에 MathJax 를 스크립트로 헤더에 추가하여 수식을 표시하도록 하였습니다. 일반 유저의 경우 문제가 없었던 것으로 파악이 되는데...(아무도 사용을 안했으니까... -_-) 관리자 ID로 로그인하면 MathJax 수식 로딩시 엄청 버벅거리면서 20초가량 사이트 이용이 거의 불가능한 상태가 되곤 하였습니다.
그 문제가 해결될 기미가 없어(=문제를 해결할 수 없어) 기존 방식을 과감하게 포기하였습니다.
대신 ckeditor 에 플러그인으로 수식 편집기를 추가하였습니다. 이 플러그인은 네이버 지식인처럼 수식을 그림으로 넣어줍니다. 기존 방식의 라텍스 문법 입력도 가능합니다.
※ 간혹 (아래처럼) 수식 변환이 되지 않는 경우가 있습니다.
동영상 로딩등으로 페이지 인코딩이 길어질 때인데, 수식을 확인하시려면 F5 (refresh) 제대로 표시될 수 있습니다.
⇒ 
2. 수식 편집기 사용 방법
- ckeditor 입력창의 오른쪽 위에 있는 툴바 확장 단추
클릭
└ 툴바가 이미 펼쳐진 상태면 클릭할 필요가 없습니다.
- 툴바 마지막 줄에 있는 노란 루트기호
클릭
- wiris 수식 편집기에서 수식 입력후 【승인】 클릭
- 수식이 ckeditor에 잘 삽입 되었으면 글을 완성하고 【등록】. 끝.
3. 수식 입력 예제
* Wiris 수식
// 2차방정식 근의 공식
// 기존 MathJax는 수식과 게시판 text 를 한 줄에 넣을 수 없었는데 이젠 가능.
* MathJax 수식
// 에디터에서 쓸 때는 MathJax 수식이지만 뷰어에서 보여줄 때는 Wiris 에서 이미지로 처리하도록 바뀜
혹시 위의 수식이 제대로 표시되지 않는다면 【F5】 로 페이지를 새로고침 해보세요.
-
25
댓글11
-
세상의모든계산기
댓글 수식 test (실제):
1. Wiris 를 통한 입력 ▶▶▶
2. 기존 MathJax 방식 입력 ▶▶▶
위(↑)의 수식 표시 화면이
아래와 같이 표시(브라우저 Rendering)되면 성공
아래와 같이 표시(브라우저 Rendering)되면 실패
-
세상의모든계산기
브라우저별 수식 표시 가능성 비교
본문 댓글 Wiris MathJax Wiris MathJax 크롬47(PC) O O O O 크롬(모바일) O O O O 오페라34(PC) O O O O FireFox43* O O O O Safari5* O O O O EDGE(Win10) O X⇒ OX⇒ OX⇒ OIE11(Win10) O X⇒ OX⇒ OX⇒ O
* 표시된 브라우저는 https://spoon.net/ 을 통해서 간접 측정하였습니다.
EDGE 와 IE11 은 약간의 문제가 있었지만 script sync 방식을 defer로 변경하여 문제를 해결하였습니다. -
세상의모든계산기
CAS계산기
√ 버튼 옆에 있는 = 버튼은 CAS계산기입니다.
JAVA 프로그램이므로 크롬과 오페라(NPAPI 지원중단)에서는 사용이 불가능합니다.
(IE, 파이어폭스에서는 사용 가능합니다)잠깐 써 봤는데, 생각보다는 꽤 괜찮지만, 로딩이 매우 느리고, 안정성도 조금 부족한 것 같습니다.
(회원 등급에 따라 붙여넣기 해도 안보일 수 있으니 가급적 사용을 자제하여 주시기 바랍니다.)버튼을 누르면 이렇게 계산기 창이 뜹니다.
계산식을 모두 입력 완료하고 OK 버튼을 누르면 사이즈에 맞는 계산기가 입력이 됩니다.
이미지 파일이 링크됩니다. 그런데 alt 형식으로 계산식 (애플릿 스크립트) 자체가 로딩될 수도 있습니다.
글 입력한 사람 뿐 아니라, 다른 사람도 해당 계산기를 이용할 수 있긴한데...
크롬 유저는 (현 상황으로는) 그림도/계산기도 볼 수 없으니...
계산기를 그대로 입력하는 방식은 가급적 사용을 자제해 주셨으면 합니다. -
세상의모든계산기
계산기를 넣은 다음 소스보기를 하면 굉장히 긴 이미지 링크가 나오는데,
중간을 삭제하면 계산기 애플릿은 로딩되지 않고 이미지만 링크가 되어서 모든 브라우저에서 볼 수가 있습니다.
이렇게요.
-
세상의모든계산기
지금 보니까 CAS 계산기가 안열리네요. (크롬, IE 모두)
PC에 JAVA 는 설치되어 있는데 JAVA 가 필요need 하다고 나오는 상황...
활용도가 떨어지고, 개발자도 버린 듯 하니... 일단 사용 안하는 걸로 변경!
하려고 했는데, 아이콘 하나만 빼는 것은 안되는 듯.
세상의모든계산기 님의 최근 댓글
아 그렇네요. 감사합니다. ^^ 2026 04.28 정적분 구간에 미지수가 있고, solve 를 사용할 수 없을 때 그 값을 확인하려면? https://allcalc.org/57087 `SOLVE` 기능 내에 `∫(적분)` 기호를 사용할 수 없을 때 뉴튼-랩슨법을 직접 사용하는 방법 2026 04.15 뉴턴-랩슨 적분 방정식 시각화 v1.0 body { font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; display: flex; flex-direction: column; align-items: center; background: #f8f9fa; padding: 40px 20px; margin: 0; color: #333; } .container { background: white; padding: 40px; border-radius: 20px; box-shadow: 0 15px 35px rgba(0,0,0,0.08); max-width: 900px; width: 100%; } header { border-bottom: 2px solid #f1f3f4; margin-bottom: 30px; padding-bottom: 20px; } h1 { color: #1a73e8; margin: 0 0 10px 0; font-size: 1.8em; } p.subtitle { color: #5f6368; margin: 0; font-size: 1.1em; } .equation-box { background: #f1f3f4; padding: 15px; border-radius: 10px; text-align: center; margin-bottom: 30px; font-size: 1.3em; } canvas { border: 1px solid #e0e0e0; border-radius: 12px; background: #fff; width: 100%; height: auto; display: block; } .controls { margin-top: 30px; display: flex; gap: 15px; align-items: center; justify-content: center; flex-wrap: wrap; } button { padding: 12px 25px; border: none; border-radius: 8px; background: #1a73e8; color: white; cursor: pointer; font-weight: 600; font-size: 1em; transition: all 0.2s; box-shadow: 0 2px 5px rgba(26,115,232,0.3); } button:hover { background: #1557b0; transform: translateY(-1px); box-shadow: 0 4px 8px rgba(26,115,232,0.4); } button:active { transform: translateY(0); } button.secondary { background: #5f6368; box-shadow: 0 2px 5px rgba(0,0,0,0.2); } button.secondary:hover { background: #4a4e52; } .status-badge { background: #e8f0fe; color: #1967d2; padding: 8px 15px; border-radius: 20px; font-weight: bold; font-size: 0.9em; } .explanation { margin-top: 40px; padding: 25px; background: #fff8e1; border-left: 5px solid #ffc107; border-radius: 8px; line-height: 1.8; } .explanation h3 { margin-top: 0; color: #856404; } .math-symbol { font-family: 'Times New Roman', serif; font-style: italic; font-weight: bold; color: #d93025; } .code-snippet { background: #202124; color: #e8eaed; padding: 2px 6px; border-radius: 4px; font-family: monospace; } 📊 Newton-Raphson 적분 방정식 시뮬레이터 미분적분학의 기본 정리(FTC)를 이용한 수치해석 시각화 목표 방정식: ∫₀ᴬ (2√x) dx = 20 을 만족하는 A를 찾아라! 계산 시작 (A 추적) 초기화 현재 반복: 0회 💡 시각적 동작 원리 (Newton-Raphson & FTC) Step 1 (오차 측정): 현재 A까지 쌓인 파란색 면적이 목표치(20)와 얼마나 차이나는지 계산합니다. Step 2 (FTC의 마법): 면적의 변화율(미분)은 그 지점의 그래프 높이 f(A)와 같습니다. Step 3 (보정): 다음 A = 현재 A - (면적 오차 / 현재 높이) 공식을 사용하여 A를 이동시킵니다. 결론: 오차를 현재 높이로 나누면, 오차를 메우기 위해 필요한 가로 길이(ΔA)가 나옵니다. 이 과정을 반복하면 정답에 도달합니다! const canvas = document.getElementById('graphCanvas'); const ctx = canvas.getContext('2d'); const iterText = document.getElementById('iterText'); // 수학 설정 const targetArea = 20; const f = (x) => Math.sqrt(x) * 2; // 피적분 함수 f(x) = 2√x const F = (x) => (4/3) * Math.pow(x, 1.5); // 정적분 결과 F(x) = ∫ 2√x dx = 4/3 * x^(3/2) let A = 1.5; // 초기값 let iteration = 0; let animating = false; // 그래프 드로잉 설정 const scale = 50; const offsetX = 60; const offsetY = 380; function drawGrid() { ctx.strokeStyle = '#f1f3f4'; ctx.lineWidth = 1; ctx.beginPath(); for(let i=0; i 2026 04.11 참값 : A = ±2√5 근사값 : A≈±4.472135954999579392818347 2026 04.10 fx-570 ES 입력 결과 초기값 입력 반복 수식 입력 반복 결과 2026 04.10