김성모 짤 생성기 제작 후기

최근에 네이버 웹툰에서 나온 짤 중 위와 같은 짤이 있는데 이 짤이 많이 유행하고 사람들이 말풍선 안의 대사를 직접 수정해서 많이 쓰는 것 같아서 이를 편하게 하기 위해 김성모 짤 생성기 페이지를 직접 만들어서 무료로 배포해보았다.

만든 뒤 몇 명의 지인에게 먼저 뿌려서 테스트를 진행하고 개드립이라는 자주 눈팅하는 커뮤니티에 뿌려보았는데 정말 상상할 수 없을 정도의 엄청난 호응을 받고 배포한지 약 1시간만에 모든 커뮤니티 사이트에 다 퍼져서 엄청나게 많은 사용자가 들어왔다.

(심지어 Retention 비율이 높은 편이다.)

대충 트래픽이 일주일에 10만명 쯤 됐었으며 저번 주 일요일에 공개하고 딱 일주일이 된 지금까지 총 15만개의 짤을 생성하였다. 심지어 이렇게 많은 사람이 들어오는 페이지임에도 호스팅 하는 비용은 단 1원도 들지 않았으며 서버가 터지거나 하지도 않았다. 이렇게 많은 트래픽이 몰리면 ec2를 사용한다고 쳐도 꽤나 비용이 들거나 호스팅하는 서버가 터질텐데 vercel의 기술력이 정말 엄청나다는 생각을 다시금 하게 되었다.
얼마나 많은 수의 유저가 이미지를 생성하는지를 확인하기 위해 MongoDB를 사용하였는데 이 역시 무료임에도 불구하고 15만개의 데이터를 문제없이 저장할 수 있었다.

한가지 아쉬운점은 puppeteer 라이브러리가 트래픽을 견디지 못해서 가끔 이미지 생성에 실패하는 경우가 있었는데 이 경우 재시도하면 성공할 수 있기에 큰 문제는 되지 않았다.

동작 원리는 간단한데 말풍선의 정보를 input 2개로 입력받은 뒤 이 정보를 서버로 보낸다. 이후 서버에서는 puppeteer를 사용하여 이미지를 생성한다.
puppeteer란 e2e test를 위한 라이브러리인데 이 라이브러리를 잘 사용해서 내가 지정한 페이지의 특정 section을 스크린 샷 찍어 이를 파일로 변환시켜주었다. 이를 적당히 응용하여 해당 프로젝트에서 사용하였으며 아이디어는 vercel의 open graph 생성기를 참고하였다.
이 때 그냥 스크린샷을 찍으면 유저가 전달한 말풍선 내용이 전달되지 않을텐데 이는 SSR(Server-Side-Rendering)을 응용하여 말풍선 내용을 query로 해당 페이지에 함께 전달함으로써 내가 원하는 말풍선이 들어간 이미지를 만들어낼 수 있다.

또한 swr을 사용하여 현재 생성된 개수를 상단에서 실시간으로 보여주었다.

개발시작 전 원본 이미지의 폰트를 따라하기 위해 친한 디자이너에게 물어봐서 폰트를 알아낸 뒤 개발을 진행하였으며 이 폰트를 적용하는 과정에서 puppeteer에서 폰트를 불러오는 과정에서 기본 브라우저에 한글 폰트가 없기에 항상 ㅁㅁㅁㅁ으로 출력되는 문제가 생겨서 이를 해결하기 위해 s3에 폰트를 올려놓고 이미지 생성 전에 해당 폰트를 다운받아 chromuim 을 통해 브라우저에 폰트를 다운받게 시켜 해당 문제를 해결하였다.

또한 production 과정에서 이미지가 정상적으로 다운로드 되지 않는 에러가 발생하였는데 이를 검색을 통하여 executablePath를 설정해줘야한다는 정보를 알아냈었고 이를 chrome-aws-lambda에 설정해주었다. 물론 윈도우, 맥 각자 다른 path를 사용하였다.

가장 곤란했던것이 카카오와 같은 인앱브라우저 환경에서 이미지 다운로드 자체를 못하도록 막아놓은것이였는데 이는 카카오 개발쪽의 문제이기에 내가 해결할 수 없는 이슈였으며 내가 임의로 카카오 인앱브라우저로 접속 시 크롬 혹은 사파리로 새 창을 띄우는 과정을 진행했으나 이는 올바른 동작이 아니라는 조언을 듣고 가볍게 페이지 링크를 복사할 수 있는 버튼을 만들어 대체하였다.

생각보다 엄청나게 많은 사람들이 들어와서 업데이트를 진행하다가 내 실수로 많은 사람들이 불편을 겪게 될 수도 있다는 점 때문에 업데이트에 부담을 많이 느꼇던 것 같다. 때문에 업데이트 과정에서 branch를 파서 한다던가 테스트를 더욱 빡세게 진행하게 되었다.
vercel을 원래 사용하고는 있었지만 이렇게 많은 트래픽에도 원활하게 동작하는 것을 보고 vercel에 대한 확신이 더욱 강해졌으며 vercel이 미래다라고 생각하게 되는 계기가 되었다.

만들고 버그를 다 해결하거나 하는데에 대충 5시간정도 걸린 프로젝트치고는 값진 경험을 하게 되었으며 본인이 만든 페이지를 많은 사람들이 사용하고 있다는 것에 큰 보람을 느꼈다. 또한 가끔 메일로 아래 이미지처럼 잘 사용하고 있다고 감사하다고 보내시는 분들이 있는데 정말로 힘이 되었던 것 같다. 앞으로도 기회가 되면 사람들에게 도움을 줄 수 있는 프로젝트를 만들자고 생각하게 된 것 같다.

개발할 때 회사에서 자체 개발한 Next.js 템플릿 을 사용하였는데. swr, MongoDB, tailwind css, jest를 포함해서 Next.js의 정수가 담겨져있는 템플릿이라고 생각하기에 혹시라도 Next.js를 사용하는 사람이라면 반드시 사용해보기를 추천한다. (사용 시 Star는 필수!)