Dump Cookie

자바스크립트로 만들어진 한글 입력기가 몇가지 있습니다.

가장 유명한 것이 alee님이 만든 OHI 자바스크립트 한글 입력기이며, 이것 이외에도 몇가지가 더 있습니다.

alee님의 OHI 한글 입력기는 전체 소스 라인이 200줄도 안되는 극한의 크기로 두벌식/세벌식을 모두 지원하고 있으며, 심지어 영문은 QWERTY뿐만 아니라 QWERTZ/AZERTY 자판도 지원하고 있습니다.

그런데 이렇게 극한의 크기로 최적화된 소스이기때문에 그 기능을 추가하는 것이 쉽지 않고, 자판을 다른 조합으로 쉽게 확장하기가 어려운 단점이 있습니다.

그래서 자바스크립트로 구현된 한글 입력기를 새로 작성해보았으며, 오토마타는 새나루 한글입력기를 거의 그대로 가져오고 개선시켰습니다. 그러한 이유로 이 자바스크립트 한글 입력기의 이름을 가칭 새나루(saenaru.js)라고 지었습니다. (alee님의 OHI한글 입력기 소스도 같이 참고하였습니다.)

자바스크립트 새나루 한글입력기의 특징은 다음과 같습니다.

• 자판을 손쉽게 확장/추가 가능 (외부 자바스크립트 파일 형태로 확장)
• 현재 두벌식 오토마타만 지원 (종성 조합을 지원하는 두벌식 오토마타)
• 세벌식 오토마타는 추가 지원 예정입니다.
• 글자 조합 방식을 확장/추가 가능
  
• 단어단위 편집 기능 지원
• 새나루 혹은 나비 한글 입력기처럼 모음+자음 입력시 교정 기능 (단, 느리게 입력하면 입력 순서대로 입력됨)
• 예) ㅏ + ㄴ => 나
• 그밖에 새나루 한글 입력기와 같이 ㅂ+ㄹ을 빠르게 입력하면 ㄼ으로 자동 교정됨
• 새나루 한글 입력기보다 더 영리하게 입력 키 조합의 시간 간격을 체크하여 교정할 것인지 말것인지를 판별합니다.

그밖에 다음과 같은 재밌는 기능을 추가/개선해보았습니다.

• 영문 입력 오류시 => F2키 입력하면 한글로 자동 변환
• 쉬프트-백스페이스를 누르면 이미 한글로 입력된 음절을 자소단위로 지워줌
• Firefox 최신 / 크롬 및 IE9에서 테스트 (크롬에서도 Ctrl-Z 잘 지원)

이렇게 만든 새나루 자바스크립트 입력기는 "사용자 조합 방식"을 지원하기때문에 다음과 같은 확장이 가능합니다.

• ㅏ+ㅏ=>ㅑ 조합 및 ㅑ+ㅏ=>ㅏ 등으로 순환 조합 지원 가능 - 즉, ㅏ 연타가 ㅑ로 입력되고, 한번 더 ㅏ를 입력하면 ㅏ
• 한손 자판 지원 가능

그밖에 필기인식 기능을 조합해서 한글 필기인식기능을 테스트해볼 생각입니다.

자바스크립트 새나루 한글입력기 소스받기

https://gist.github.com/wkpark/5310769

JSBin에서 테스트해보기

http://jsbin.com/ewizox/6/ (한영 전환키는 Ctrl-space입니다)

리눅스 머신의 파워를 교체하다가 갑자기 웽~ 하는 팬소리 나더니 멈추고 타는 냄새가 순간적으로 나서 급히 전원을 내리기는 했습니다만, 메인보드가 완전히 맛이 가고 급기야 하드디스크도 인식이 안되게 되버렸습니다 ㅠㅠ

마우스로 영문 글자를 써보세요. (스마트폰의 경우는 터치스크린에 손가락으로)

Zinna를 이용한 영문 필기 인식

Zinna(http://zinnia.sourceforge.net/)는 일본어/한자와 같은 획이 많은 문자를 인식하는데 매우 좋은 필기인식기입니다.

이를 영문 인식에도 써먹기 위해서 Zinnia를 조금 변경하였고, 영문+숫자 입력 모델만 지원합니다.
여기까지가 제가 몇달 전에 PHP School의 Tip&Tech에 올렸던 내용입니다.

참고 http://phpschool.com/link/tipntech/76573

ShortStraw 알고리즘

그리고 난 후에 ShortStraw 알고리즘을 우연히 찾게 되어서 이를 이용하면 필기인식률을 높일 수 있을 것 같아서 테스트중에 있습니다.

ShortStraw 알고리즘은 고안된지 얼마되지 않지만 상당히 단순하고도 명쾌하여 최근에 널리 퍼지게 된 알고리즘이라고 합니다. ShortStarw를 사용하여 제스쳐 인식에 응용하거나 필기인식 알고리즘에 응용할 수 있습니다. 특히 ShortStraw는 직선에 가까운 선은 잘 인식을 하는데, 곡선을 제대로 인식하지 못하는 문제점이 있습니다. 이를 보완한 IStraw도 있는데 이와 관련된 정보는 다음의 문서에서 참고하실 수 있습니다.

• [1] http://srl.cs.tamu.edu/srlng_media/content/objects/object-1272989388-12d592076e5dcfd14fdd2781dcb57d34/Wolin_Thesis_Final.pdf (Wolin et. al. 2008 논문. 논문 뒷편에 IStraw에 관한 설명이 상세하게 있습니다.)
• [2] http://www.lab4games.net/zz85/blog/2010/01/21/geeknotes-shortstrawjs-fast-and-simple-corner-detection/ ShortStraw 자바스크립트 출처 (이 본문에 사용된 자바스크립트 원출처 by Joshua Koo) - (본문에 실제로 쓰인 자바스크립트는 이를 고친 것입니다)

IStraw를 참고한 ShortStraw 자바스크립트 개선

그래서 IStarw는 아쉽게 자세한 소스가 공개되어있지 않기때문에 IStraw에 대한 알고리즘을 분석하여 ShortStraw자바스크립트를 약간 개선해보았습니다. [1]번 논문에 있는 다음과 같은 그림이 IStraw에 적용된 곡선 인식 보완책을 설명하고 있습니다.

이 방식을 ShortStraw 자바스크립트에 적용시키니 다음과 같은 식으로 개선이 됩니다.

(아래 이미지는 위의 필기인식 캔버스의 스크린샷)

여기서 붉은 선은 ShortStraw 알고리즘으로 얻어진 선분이며, 검은 점은 IStraw 방식으로 제거되는 점들입니다. 고친 소스에는 몇번의 반복 실험을 통해 얻어진 경험적인 값들이 사용되어졌습니다.

이런식으로 영문 글자의 모서리값을 얻게되면 그 모서리값은 재현성이 높게되며, ShortStraw에 의해 얻어진 모서리 개수의 값을 필기인식의 feture값으로 지정할 수 있을 것입니다. 이 방식을 Zinna에 새로운 feature로 지정해 적용해볼 생각입니다~