하늘 아래 새로움은 없다. 단지 개선만이 있을 뿐이다.
만일 새롭다고 느낀다면 그 분야를 잘 모르는 것이다.

사전 조사를 하려면 우선 적절한 검색어부터 찾아야 한다. 이는 표현하는 적절한 단어로 검색해야 적절한 결과가 나오기 때문이다. 만일 기술 자체는 일반적인데 (Javascript) 맞는 검색결과가 안 나온다면,

대게의 경우에는 몇 번 비스름한 단어로 검색하다 보면 '아! 이런 단어로 표현하는구나'라는 일종의 전문용어(?)를 알게 된다. 이번에는 타이핑을 흉내 내는 효과는 영어로 'typewriting effect js' 혹은 'typing effect js' 정도로 추렸다. 하지만 한글(Hangul, Korean)의 typing effect는 세 번째에 해당하기 때문에 그리 많은 정보가 나타나지 않는다.

우선 한글을 제외하고 찾아보았는데 꽤 있었다. 많은 웹 개발자들이 이러한 문제를 푸는데에 관심이 있었던 거 같다. 예전 jQuery 1.x 버전 때부터 지속해서 이러한 기능을 만드는 것이 때때로 존재해왔고, 어떤 건 의존성이 없이 만들어진 JS Plugin 들도 있었다. 심지어는 이들을 정리한 웹 페이지까지 있으니, 만드는 요청들이 꽤 있었나 보다.¹

다 훑어보기는 하지만 그중에서도 자세히 볼 것, 그러니까 branch를 따올 만한 프로젝트를 골라야 한다. 일반적으로 나는 아래의 선별기준을 두며, 각 기준은 후보 중에서 상대적으로 평가한다.

그렇게 적당히 괜찮다 싶은 걸 고른 게 2가지인데, 하나는 Typeit 이고, 다른 하나는 Typed.js 이다. 문서화 면에서는 Typeit이 더 자세하였지만 Typeit은 상용으로도 판매되는 중이며, Typed.js와 기능상 그리 큰 차이를 보이지 않기에, 더 많은 사람이 사용하는 Typed.js를 중심 프로젝트로 정했다.

그럼 이제 한글의 Typing Effect를 구현한 것이 있는가 찾아봐야 한다. 검색 결과가 많지는 않았다. 그리고 나머지는 After Effect를 이용한 영상 편집이었다.

단순 문자 찍기²

우선 달팽이 님이 시도했던 결과는 다음과 같다.

바로 알겠지만, 타이핑의 효과 없이 바로 완성형 글자로 입력되는 것을 확인할 수 있다. 라인 끝에 < 글자가 나타나는 것은 <br> 을 한 글자씩 쓰면서 나타나는 현상이다... 그 이외의 추가적인 기능은 없으며 minimal 한 JS Plugin이라고 볼 수 있겠다.

JavaScript한글 Typewriter³

변용훈님이 만든 것을 한 번 보도록 하자.

이는 realistic-typewriter.js와 Hangul.js 를 조합하여 만든 것으로 Hangul.js 는 약간 수정하여 사용되었다. 하지만 해당 블로그 글에서도 언급했듯이 실제 타이핑과 다르게 중간중간 '으세'를 치는데 'ㅇ > 으 > 읏 > 으ㅅ > 으세 ...' 로 타이핑하는 것을 볼 수 있다.

여기서는 '으세'를 표현하기 위해 해당 문자열을 'ㅇ\a으\a읏\a으세'로 변형시킨 다음, '\a'가 있을 때마다 마지막 한 글자를 지우는 방식을 택하였다. 하지만 한 글자에서 두 글자로 변하는 단계로 인해 (읏 > 으ㅅ > 으세) 순간적으로 '으'가 보이는 버그가 발생하게 되었다. 이로 인해 오히려 어색한 타이핑 효과를 만들어 버리고 말았다. 그리고 한글과 영어 혼용 시에 제대로 출력되지 않는 버그가 있다.

Unityping⁴

이제 마지막으로 살펴볼 건 unityping이다. 검색 결과 중에서 내가 생각한 것과 제일 일치되는 것으로 사용해도 크게 문제가 없을 정도의 수준이었다.

3년 전(2015년)이 마지막 커밋이기 때문에 가져다 쓰는 게 좀 어려울 수 있지만, 이 정도 수정은 어렵지 않다. 하지만 두 가지 아쉬운 점이 있었다.

1. Typed.js에 비해 기능이 적다.

   Typed.js의 경우에는 Pause, Smart Backspace의 기능이 있는 데 반해 Unityping의 경우에는 그러한 기능이 없었다. 그렇기 때문에 썼다 지웠다 정도의 기능만 있을 뿐, 뭔가 시간을 두고 쓴다든가 하는 좀 더 인간적인 기능을 지원하지는 않았다.

   예를 들어, '또 하루 멀어져간다.' 그리고 지운 다음에 '또 하루 잊혀져간다.'라고 타이핑하고 싶다고 가정하다. 그러면 얼추 아래와 같이 타이핑을 하게 될 것이다.

   1. '또 하루 멀어져간다.'까지 타이핑을 한 다음
   2. 잠깐 생각을 한다. (커서가 멈춰있다, Pause)
   3. 그리고 '또 하루 '까지 backspace를 한 다음에 (Smart Backspace)
   4. '또 하루 잊혀져간다.'로 타이핑을 한다.⁵

   하지만 Unityping에서는 Pause와 Smart Backspace를 구현하지 않았다. 한글을 구현한 것까지는 좋은데 뭔가 뒷맛이 찜찜한 느낌이었다. Typed.js에서 제공하는 기능까지는 있어야 한다고 생각하였다.

2. backspace 구현에 아쉬움이 있다.

   보통 한글을 타이핑하다 중간에 backspace를 누르면 모음/자음 하나씩 지워지다⁶ 새로운 글자로 들어서야 비로소 한 글자씩 지워진다.⁷ 이 또한 예를 들어보면,

   1. '또 하루 멀어져간'까지 치고 나서 backspace를 누르면,
   2. '또 하루 멀어져가'
   3. '또 하루 멀어져ㄱ'
   4. '또 하루 멀어져'에 도달하고 나서야
   5. '또 하루 멀어'로 한 글자씩 지워진다.

3. HTML Tag 표현의 문제가 있다.

   여기서도 달팽이 님의 구현에서 보았던 <br> 같은 HTML tag를 표현하면 순간적으로 < 글자가 보이는 버그가 있다. 좀 더 자세히 이야기하자면 브라우저가 <만 있을 때는 일반적인 글자로 인식을 하다가 이후에 입력된 글자에 의해서 HTML tag로 인식이 되어 글자로 표현되지 않기 때문에 순간적으로 < 가 나타나는 것이다.

그러므로 세부 목표를 정하면,