- 세상의 모든 계산기 자유(질문) 게시판 일반 ()
수식 입력기(ckeditor - wiris) 설치 테스트
1. MathJax 문제 발생
기존에 MathJax 를 스크립트로 헤더에 추가하여 수식을 표시하도록 하였습니다. 일반 유저의 경우 문제가 없었던 것으로 파악이 되는데...(아무도 사용을 안했으니까... -_-) 관리자 ID로 로그인하면 MathJax 수식 로딩시 엄청 버벅거리면서 20초가량 사이트 이용이 거의 불가능한 상태가 되곤 하였습니다.
그 문제가 해결될 기미가 없어(=문제를 해결할 수 없어) 기존 방식을 과감하게 포기하였습니다.
대신 ckeditor 에 플러그인으로 수식 편집기를 추가하였습니다. 이 플러그인은 네이버 지식인처럼 수식을 그림으로 넣어줍니다. 기존 방식의 라텍스 문법 입력도 가능합니다.
※ 간혹 (아래처럼) 수식 변환이 되지 않는 경우가 있습니다.
동영상 로딩등으로 페이지 인코딩이 길어질 때인데, 수식을 확인하시려면 F5 (refresh) 제대로 표시될 수 있습니다.
⇒ 
2. 수식 편집기 사용 방법
- ckeditor 입력창의 오른쪽 위에 있는 툴바 확장 단추
클릭
└ 툴바가 이미 펼쳐진 상태면 클릭할 필요가 없습니다.
- 툴바 마지막 줄에 있는 노란 루트기호
클릭
- wiris 수식 편집기에서 수식 입력후 【승인】 클릭

- 수식이 ckeditor에 잘 삽입 되었으면 글을 완성하고 【등록】. 끝.
3. 수식 입력 예제
* Wiris 수식
// 2차방정식 근의 공식
// 기존 MathJax는 수식과 게시판 text 를 한 줄에 넣을 수 없었는데 이젠 가능.
* MathJax 수식
// 에디터에서 쓸 때는 MathJax 수식이지만 뷰어에서 보여줄 때는 Wiris 에서 이미지로 처리하도록 바뀜
혹시 위의 수식이 제대로 표시되지 않는다면 【F5】 로 페이지를 새로고침 해보세요.
댓글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 하다고 나오는 상황...

활용도가 떨어지고, 개발자도 버린 듯 하니... 일단 사용 안하는 걸로 변경!
하려고 했는데, 아이콘 하나만 빼는 것은 안되는 듯.

세상의모든계산기 님의 최근 댓글
1. 왜 검은색이 아닌 다른 색으로 보일까? (제공된 LUT 필터) 제가 제공해 드린 magenta_lens.cube LUT 필터는 540~560nm(녹색-노란색) 파장대의 색상을 '완전히 제거(검은색으로 만듦)'하는 대신, '다른 색상으로 왜곡/변환'하도록 설계되었습니다. * 원리: LUT(Look-Up Table)는 특정 입력 색상(Input RGB)을 미리 정해진 다른 출력 색상(Output RGB)으로 매핑하는 테이블입니다. 이 LUT는 540~560nm에 해당하는 RGB 값들이 들어오면, 검은색(0, 0, 0)이 아닌, 매우 어둡거나 채도가 낮은 특정 색(예: 어두운 올리브색, 갈색 등)으로 변환하라고 지시합니다. * 의도: * 현실적인 물리 필터 시뮬레이션: 실제 고가의 색약 보정 안경도 특정 파장을 100% 완벽하게 차단하지는 못합니다. 빛의 일부를 흡수하고 일부는 통과시키거나 변환하는데, 이 LUT는 그러한 현실 세계의 필터 효과를 더 비슷하게 흉내 냈을 수 있습니다. * 시각적 정보 유지: 특정 색을 완전히 검게 만들면 그 부분의 형태나 질감 정보가 완전히 사라집니다. 하지만 다른 어두운 색으로 대체하면, 색상 정보는 왜곡되더라도 밝기나 형태 정보는 어느 정도 유지되어 전체적인 이미지가 덜 어색하게 보일 수 있습니다. 결론적으로, 스펙트럼 그림에서 해당 대역의 색이 갑자기 '다른 색으로 툭 바뀌는' 현상은, LUT 필터가 "이 파장대의 색은 앞으로 이 색으로 표시해!"라고 강제적으로 지시한 결과이며, 이것이 바로 이 필터가 작동하는 방식 그 자체입니다. 2. 왜 'Color Vision Helper' 앱은 검은색으로 보일까? 비교하신 'Color Vision Helper' 앱은 노치 필터의 원리를 더 이상적(Ideal)이고 교과서적으로 구현했을 가능성이 높습니다. * 원리: "L-콘과 M-콘의 신호가 겹치는 540~560nm 파장의 빛은 '완전히 차단'되어야 한다"는 개념에 매우 충실한 방식입니다. * 구현: 따라서 해당 파장에 해당하는 색상 정보가 들어오면, 어떠한 타협도 없이 그냥 '검은색(RGB 0, 0, 0)'으로 처리해 버립니다. 이는 "이 파장의 빛은 존재하지 않는 것으로 처리하겠다"는 가장 강력하고 직접적인 표현입니다. 2025 11.06 적용사례 4 - 파장 스펙트럼 https://news.samsungdisplay.com/26683 ㄴ (좌) 연속되는 그라데이션 ➡️ (우) 540 이하 | 구분되는 층(색) | 560 이상 - 겹치는 부분, 즉 540~560 nm 에서 색상이 차단? 변형? 된 것을 확인할 수 있음. 그럼 폰에서 Color Vision Helper 앱으로 보면? ㄴ 540~560 nm 대역이 검은 띠로 표시됨. 완전 차단됨을 의미 2025 11.05 빨간 셀로판지로도 이시하라 테스트 같은 숫자 구분에서는 유사한 효과를 낼 수 있다고 합니다. 색상이 다양하다면 빨강이나, 노랑, 주황 등도 테스트해보면 재밌겠네요. 2025 11.05 안드로이드 앱 - "Color Vision Helper" 다운받아 본문 내용을 카메라로 찍어 보니, 본문 프로그램에서는 애매하게 보이던 부분에서도 구분이 완전 확실하게 되네요. 숫자 구분 능력 & 편의성 면에서 압도적이라고 할 수 있겠습니다. 2025 11.05 적용 사례 3 - 색상표 https://namu.wiki/w/%ED%97%A5%EC%8A%A4%20%EC%BD%94%EB%93%9C 적녹 색약 기준에서 필터 후 색깔을 느낌으로 표현하면 녹색 계열이 좀 차분? 묵직? 해지는 느낌 적색 계열이 전반적으로 조화를 이루지 못하고 튀는? 느낌 노랑이가 사라지는 느낌. * 적색 계열에서 글씨가 살짝 안보이는 것은 계조 문제(프로그램 문제)일 수 있겠다는 생각 2025 11.04