email
사전 조사
Aug 5, 2018
5 minutes read

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

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

  1. 적절한 검색어 선정에 실패했거나 (경험상 88%의 확률로 이거다)
  2. 잘못된 접근 방식으로 문제를 해결하려고 하거나 (10%)
  3. 사용자가 적은 기술/브랜드/언어/디바이스같이 범용성이 좀 떨어지거나 (1.9%)
  4. 아직 특정 검색어가 우세하지 않거나 (0.1%)
  5. 완전 새로운 아이디어다. (0.0%)

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

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

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

  • 가져다 쓰거나 수정해도 되는 라이선스를 가지고 있는가
  • 최근까지 업데이트가 있었는가
  • 얼마나 많은 사람이 사용하고 있는가
  • '조금만' 공부하면 되거나 아니면 문서화가 잘 되어있는가

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

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

단순 문자 찍기2

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

 

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

JavaScript한글 Typewriter3

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

 

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

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

Unityping4

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

 

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

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

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

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

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

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

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

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

    1. ‘또 하루 멀어져간’까지 치고 나서 backspace를 누르면,
    2. ‘또 하루 멀어져가’
    3. ‘또 하루 멀어져ㄱ’
    4. ‘또 하루 멀어져’에 도달하고 나서야
    5. ‘또 하루 멀어’로 한 글자씩 지워진다.
  3. HTML Tag 표현의 문제가 있다.

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

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

  1. Typed.js의 기능 및 인터페이스를 따라가도록 구현하며,
  2. backspace 시에 마지막 한글은 자음/모음을 하나씩 지우고, 그다음에야 한 글자씩 지우도록 구현하는 것이다.
  3. HTML tag처럼 텍스트로 나타내지 않아야 하는 것들은 표현되지 않도록 한다.

  1. Wijaya, Henri, “10 Javascript Libraries To Create Animated Typing Effect”, BASHOOKA, Bashooka, 22 Feb. 2017, https://bashooka.com/coding/10-javascript-libraries-to-create-animated-typing-effect/ [return]
  2. “표에 문자 찍기, 화면에 타이핑 되는것 같은 효과 내기”, 달팽이홈2, 7 Jun. 2008, http://superkts.pe.kr/helper/view.php?seq=V&seq=3 [return]
  3. Byun, YongHun, “JavaScript한글 Typewriter”, Red Ghost, BreadTrend, 5 Jan. 2014, http://ghost.rivario.com/javascript-%ED%95%9C%EA%B8%80-typewriter/ [return]
  4. https://github.com/jkiimm/unityping [return]
  5. 여기서 물론 ‘멀어’만 지우고 ‘잊혀’로 바꾸는 것도 가능하지 않냐고 반문할 수 있겠다. 다른 말로 커서를 옮기는 경우인데, 이번 경우에는 구현하지 않기로 하였다. 우선 오버 엔지니어링이 될 수 있다고 생각했고(구현이 만만치 않다), 사전 조사한 프로젝트 중에서 이를 구현한 것은 없었기 때문이다. [return]
  6. 스마트폰의 경우에는 계속 하나의 모음/자음을 지우는 경우가 있다. [return]
  7. 물론 오랫동안 멈춰있으면 바로 한글자를 지우는 경우도 있지만 좀 더 일반적인 경우를 보기로 했다. [return]