[ code note ]

Space for memo codes

간만에 재미있게 놀았습니다.

시작은 예전에 어디선가 반투명 디자인을 보면서 시작되었다.
배경을 반투명하게 투과시키는 그래픽 디자인이 너무 마음에 들어서 제작하고 있는 블로그에 적용시켜 보려고 했지만.. 당시 나의 js 프로그래밍 능력은 거의 0에 가까웠다.
인터넷에 비슷한 디자인의 코드가 있긴 했지만 내가 생각한 모습과는 조금 다르기도 했고, js를 거의 못다루었기 때문에 포토샵으로 원하는 위치에 배경을 잘라다가 가우시안 블러처리하고 해당 위치에 엘리먼트 요소의 배경으로 넣는 편법으로 했던 기억이 있다.

그렇게 꽤 오래 잊고 있다가, 지난주에 구글링을 하다가 반투명 플라스틱 명함 이미지를 보게되었다. 보는순간 다시 도전정신이 불타올랐고, 이번에는 어렵지 않게 원하는 모양을 만들어 낼 수 있었다.
예전과는 다르게 지금은 브라우저에서 엘리먼트에 blur filter를 지원한다. 그렇지만 원하는 부분만큼 구역을 정해서 blur처리를 해주진 않는다.

그래서 생각해낸 방법이 배경을 블러할 타겟 엘리먼트에 똑같은 배경을 하나 더 쓰는 것이었다.
그렇게 해서 타겟 엘리먼트의 배경을 블러처리해서 좌표에따라 블러처리된 배경이 뒷 배경과 같은 위치에 보일 수 있도록 싱크를 맞추면, 실시간으로 배경을 반투과시켜 보여주는 엘리먼트가 생성될 것이라 생각했다.

예전에비해 브라우저 성능이나 CSS도 강력하고, 라이브러리가 잘되어 있어서 생각했던대로 어렵지 않게 만들어 낼 수 있었다.
다만 아직도 filter를 지원하지 않는 ie에서는 방법이 없었다…지금이나 예나 ie는..ㅂㄷㅂㄷ

그렇게 프로토타입을 만들고나서 실제 디자인이 나오는 것을 보니 굉장히 만족스러웠다. 코드 자체는 영 성에 차지는 않지만..
다른 사람들 반응도 궁금해서 페이스북 생활코딩 페이지에 올렸을 때 반응도 생각보다 굉장히 좋아서 놀랐었다.
자기만족으로 시작하긴 했지만 아마 반응이 심심했다면 지금처럼 적극적으로 건드리지는 않았을 것 같다.

딱 만들어놓고 나니까 뭔가 좀 아쉽기도 하고, 심심하기도 해서 더 쉽게 쓸 수 있도록 jquery플러그인으로 만들어보고 싶다는 생각이 불현듯 들었다.
그렇게 다시 뻘짓은 시작되었고.. 마침내 npm 패키지로까지 만들어서 올리기도 해봤다.
플러그인으로의 포장 자체는 그리 어렵지 않았다. 다만 이게 플러그인으로서 적절한 코드인가?라고 생각되는 부분이 많아서 이부분은 다시 공부를 해봐야 할 것 같다. 앞으로 해야할건 자잘한 버그들의 수정과 코드 개선, 테스트코드의 작성 정도인 것 같다.

한동안 개인적으로 프로젝트를 못해서 많이 아쉬웠는데 덕분에 몇일간 재미있었다.
오늘의 일기 끝.