이미지 픽셀화 라이브러리 Pixler 제작 후기

pixler로 픽셀화 시킨 이미지

패키지 주소: https://www.npmjs.com/package/pixler

데모페이지: https://grapgrap.github.io/pixler-demo-page

  얼마전에  VA-11 HALL-A(발할라) 라는 이름의 비쥬얼 노벨 게임을 한 적이 있다. 비쥬얼 노벨 게임인데 주인공은 사이버 펑크를 배경으로한 도시의 주점에서 일하는 바텐더이고, 주인공이 일할 때 마주치는 손님들에게 술을 제조해 주면서 이야기를 풀어나가는 게임이다.

  이 게임은 내가 좋아하는 사이버펑크의 배경에 도트 그래픽을 가지고 있었기 때문에 시작부터 아주 흥미로웠고, 이야기의 흡입력도 비쥬얼 노벨 답게 훌륭했다. 그리고 바텐더라는 직업에 대한 로망이 생겼고, 한달에 한병정도 양주를 사서 여러가지 레시피를 찾아보고 만들어 마시면서 레시피를 모아둔 사이트가 있으면 좋겠다는 생각을 했다.

  페이지 테마는 발할라 게임 처럼 도트 그래픽으로 했으면 했는데, 기본적인 배경은 그렇다 하더라도, 칵테일 사진을 일일히 도트 그래픽으로 찍기에는 시간과 그림 실력 면에서 무리였다. 그래서 일단은 이미지를 픽셀화 시키는 라이브러리를 만들어보기로 했다.

  처음 아이디어를 찾은 곳은 그림판이었다. 이전에 그림판에서 그림을 축소 시켰다가 확대 하면 픽셀이 뭉개져서 픽셀화 되는 것을 본적이 있었기 때문에 그것과 동일하게 그림을 줄였다가 늘리면 되지 않을까 라는 생각을 하게 되었다. 그래서 이미지를 외부로 부터 받아서 이미지를 일정수준으로 줄였다가 늘리면 되겠다라는 아이디어를 가지고 개발에 들어갔다.

  그 다음에는 '이미지를 Javascript API로 줄였다 늘였다 할 수 있는가' 가 문제였다. 구글링으로 MDN을 뒤져보고나서야 Canvas 에서 할 수 있는 것을 알게 되었고, Canvas의 drawImage()를 이용해 원본 이미지를 입력된 factor 만큼 줄여 Context로 만들고, 크기가 줄어든 Context를 다시 drawImage()로 원본 이미지 사이즈 만큼 늘리게 되었다.

  ...라면 될 줄 알았다. 늘어난 이미지를 화면에 표시해보니 픽셀화를 한 것이 아니라 블러 처리 한것 처럼 뿌옇게 변했다. 다시 구글과 몇시간 싸움을 하고나서 나와 동일한 기능을 하는 라이브러리를 만든 사람이 있다는 것을 발견하게 되었다. 차이점은 그 라이브러리는 이미지 파일만 받을 수 있는데, 나는 이미지 URL도 받을 수 있다는 차이점만 있었다.

  발견한 라이브러리에서 찾은 바로는 Canvas의 CSS 속성 중 image-rendering과 Canvas의 Context 속성 중 imageSmoothingEnabled를 각 브라우저에 맞게 조절 하여야만, 뿌옇게 사진이 늘어나는 것이 아니라 픽셀화 된 사진으로 나온다. 때문에, 나는 이미지를 줄였다 늘린 다음 해당 속성들을 픽셀화 될 수 있게 조절하여 결과 값을 다시 이미지로 만들어 콜백을 통해 내보냈다.

  Pixler는 Typescript를 이용해서 만들었는데 배포를 하기 위해서는 빌드 작업이 필요했다. 지금까지 라이브러리를 가져다 써보기는 많이 써봤는데 그것들의 파일 구조라던지 빌드 방법에 대해서는 관심이 없었기 때문에 처음 해보는 작업이었다. 그래서, tsconfig.json을 작성하는 방법을 구글링을 통해 찾아보게 되었다.

  tsconfig.json은 많이 본 친구였다. Angular를 쓸 때에도 그랬고, React도 Typescript를 이용해서 항상 개발을 했었기 때문에 tsconfig.json을 한번씩 봐야했다. 하지만, 모듈을 개발하기 위해 건들여 본 적은 없었고, 항상 CLI를 통해 자동으로 만들어진 tsconfig.json을 봤었기 때문에 맨땅에 헤딩하는 것은 조금 어려울 것이라 생각했다.

  하지만, Typescript의 공식문서가 아주 잘 되어 있어, 나에게 꼭 필요한 설정들만 선택해서 설정할 수 있었다. 이후 Pixler를 빌드 하였고, 빌드된 파일은 NPM을 통해 배포 되었다. 또, README도 작성하여서 Pixler를 어떻게 다운받는지, 사용하는지를 적어 두었다.

  현재 10월 7일까지 총 130회의 다운로드가 있었다. 아직 Github에 스타는 없지만, 하나 달렸으면 좋겠다. 개인적으로 사용하기 위해 만든 라이브러리였지만, 이렇게 배포하게 되니까 욕심이 생긴다.