JavaScript 한글 Typewriter

브라우저에서 타자기로 글자를 치는 효과를 내주는 typewriter 라이브러리란 라이브러리가 있다. 며칠전 신년 인사를 타자 치듯이 보여주는 카드를 만들려고 이 라이브러리를 사용했다. 근데 영문은 잘 되는데 한글은 제대로 동작을 하지 않는 것이었다.

한글인 경우는 영문과 달리 하나의 글자가 완성되는 동안 커서가 이동이 되면 안되고, 자모 입력이 추가됨에 따라 표시되는 글자도 달라야 하는데 영문권 개발자가 이런 사항까지 고려하기는 무리일 거라고 생각이 든다.

한글 타이핑 문제를 해결하기 위해서 typewriter.js를 수정하는 방식보다는 이 라이브러에 한글인 경우는 좀 다르게 입력을 주는 방식을 택해서 작업을 진행했다.

우선, 자바스크립트로 한글의 자음과 모음을 분리해 내는 라이브러리를 검색했다. 다행히 아주 잘 만든 hangul.js라는 자바스크립트 라이브러리가 github에 공개 되어 있었다. 이 라이브러리의 disassemble을 이용해서 한글을 자음과 모음으로 분리했고, 이렇게 분리된 자모가 타이핑 되면서 화면에 어떻게 표시되는 지를 문자열로 반환하는 typewrite 함수를 추가를 했다.

typewrite 함수에 의해 반환되는 문자열에는 \a라는 특수 문자가 존재한다. 이 문자는 커서를 이동하지 않고 다음에 오는 문자를 현재의 위치에 표시하라고 지정하는 의미이다. 2014년 새해 복 많이 받으세요!!!는 다음의 문자열 형태로 변경이 되어 typewriter-bundle.js에게 넘겨진다.

'2014ㄴ\a녀\a년 ㅅ\a새\a샣\a새해 ㅂ\a보\a복 ㅁ\a마\a만\a많ㅇ\a이 ㅂ\a바\a받ㅇ\a으\a읏\a으세\a셍\a세요!!!'

typewriter-bundle.js는 \a처리를 위해서 다음 부분이 수정됐다.

Typewriter.prototype.type = function(text, cb) {
  var char, checkInterval, gen;
  checkInterval = (this.minimumSpeed + this.maximumSpeed) / 2;
  gen = charactergenerator(this.keyboardLayout, this.accuracy, checkInterval, text);
  while ((char = gen.next()) !== null) {
    if (char == '\b') {
      this["delete"]();
    } else if(char == '\a') {
      this["delete"]();
    } else {
      this.put(char);
    }
    if (char !== '\a') {
      this.waitRange(~~(1000 / this.maximumSpeed), ~~(1000 / this.minimumSpeed));
    }
  }
  return this.wait(0, cb);
};

수정된 hangul.js 소스 다운로드

수정된 typewriter-bundle.js 소스 다운로드

수정된 라이브러리를 사용한 예

var twSpan = document.getElementById('typewriter');
var tw = typewriter(twSpan).withAccuracy(100)
                           .withMinimumSpeed(5)
                           .withMaximumSpeed(17)
                           .build();

var msg = '2014년 새해 복많이 받으세요!!!';
msg = Hangul.disassemble(msg);
msg = Hangul.typewrite(msg);

tw.type(msg)
  .wait(500)
  .type('', function() {document.getElementById("caret").style.display = 'none';});

데모보기

TODO

'으세'는 'ㅇ으읏으세'로 타이핑 되는데 '읏' 다음에 '으'만 먼저 표시되고
어느 정도 지연뒤에 '세'가 표시되어 실제 타이핑과는 다름
타이핑 음향 효과
줄바꿈 효과
한글 타이핑에서도 타입 실수 구현

TODO

Reference