이것은 잠뜰TV 미궁 시리즈에서 등장하는 연출 중 일부입니다. 멋있으니까 내 갠홈에도 적용해 봅시다!! ![img](/images/journey/문자-해독-효과/00.gif) 이 글은 최신 문법의 바닐라 자바스크립트를 기반으로 진행합니다. 바닐라 자바스크립트는.. 그냥 순수한 일반적인 자바스크립트라는 뜻입니다. 바닐라 아이스크림, 깔끔하고 맛있잖아요? 그런 거죠 코드에 대한 이해를 돕기 위해 설명을 자세히 적다 보니 글이 길어졌습니다. 자세한 설명이 필요하신 분은 글을 읽어주시고, 기본적인 자바스크립트를 이해할 수 있으며 예제만 필요하신 분은 코드만 참고하셔도 좋습니다. 메소드(커스텀 가능한 옵션)에 대한 설명은 맨 마지막에 있습니다. React(NextJS) 버전은 따로 준비해 보겠습니다. PHP, jQuery, ES6 이전 문법에 대한 적용 방법은 저도 모릅니다.. 하지만 글을 참고해서 길을 개척해 보시는 것도 재미있지 않을까요? ### 준비물 - 컴퓨터 > ## 바닐라 자바스크립트 버전 기존에 사용하던 갠홈 폴더를 열거나, 새로운 연습용 프로젝트를 만들어봅시다. 저는 아무 곳에 `myhome`이라는 폴더, 그리고 그 안에 `index.html`과 `obfuscator.js`라는 파일 딱 두 개만 만들었습니다. ![img](/images/journey/문자-해독-효과/01.webp) 파일을 어떻게든 열고 코드를 작성합니다. > ### index.html ```html 문자 해독 효과 연습

다람쥐 헌 쳇바퀴에 타고파

``` 중요한 부분은 `{:html}`태그의 내부입니다. 다른 건 달라도 상관없어요! ```html

다람쥐 헌 쳇바퀴에 타고파

``` 이 코드는 이번에 효과가 적용될 문장이 담기는 코드입니다. 예제는 `

{:html}`를 사용했지만, `{:html}`,`

{:html}`,`
{:html}`같이 문자가 담기는 태그라면 뭐든 상관없습니다. 기존 프로젝트를 가져오신 분이라면, `class=" "{:js}`의 내부에 이미 다른 단어가 적혀있을 수 있습니다. 괜찮습니다. 기존 단어와는 띄어쓰기로 구분하여, 이번에 적용할 효과의 이름을 정해줍시다. 예제에서는 `macaron`,`kimchi`,`jjigae`를 기존 클래스 이름이라 가정하고, 적용할 효과의 이름을 `daramji`라고 정하겠습니다. 짓고 싶은 이름이 있다면 `daramji`가 아닌 다른 이름으로 정하셔도 됩니다. 만약 `{:html}`태그를 사용하고, 클래스 이름을 `potato`라고 짓는다면 코드는 ```html 다람쥐 어쩌고 저쩌고 ``` 이렇게 바꿀 수 있겠죠 효과를 적용할 모든 요소에 예제와 같이 `daramji`(혹은 `potato`) 클래스를 추가해 줘야 하지만.. 힘들 것 같으니까 일단 시험 삼아 딱 한 개만 적용해 보고, 성공한 후에 나머지 `daramji`를 붙이는 것이 낫겠네요... 다음 줄을 봅시다. ```html ``` 효과를 작동시키는 자바스크립트를 html과 연결하는 코드입니다. 기존 프로젝트를 가져오신 분은, 다른 ` ``` ### obfuscator.js ```javascript import baffle from "https://cdn.skypack.dev/baffle"; const namu = document.querySelectorAll(".daramji"); document.addEventListener("DOMContentLoaded", () => { namu.forEach((apple) => { const count = 15; const repeat = Array(count).fill(apple.innerHTML).join(""); const baguni = baffle(apple); baguni .set({ characters: "+�⍰?□■⍰?□■" + repeat, speed: 100, }) .start(); }); }); ``` 제가 따로 설정한 난독화 문자인 `+�⍰?□■⍰?□■`는 두 번씩만 적었기 때문에 가끔만 나타납니다. 하지만 각 요소에서 문자를 추출하여 15번씩 반복하도록 하는 코드를 추가했기 때문에 `characters`는 결국 `characters: "*+�⍰?□■⍰?□■리리리리리리리리리리리리리리리"`와 같이 실행됩니다. `리`가 엄청나게 많으니 난독화 효과가 가끔만 일어나는 것처럼 보일 것입니다. - `exclude` 난독화 효과를 무시하는 문자를 설정합니다. 저는 적용할 글자마다 요소를 분리하며 클래스를 주는 방식을 선택했지만, 이 옵션을 사용하셔도 좋을 것 같습니다. - `speed` 난독화 문자가 바뀌는 속도를 설정합니다. 밀리초 단위입니다. 숫자가 작을수록 문자가 빠르게 바뀌고, 숫자가 클수록 느리게 바뀌겠지요? ...여기까지입니다! 성공적으로 적용하시고.. 즐거운 갠홈 꾸미기 되시길 바라며.. 안녕! - [공식 문서](https://camwiegert.github.io/baffle/)