주접 생성기 사이트 개발 후기



주접 사이트 개발 후기

주접사이트 gif

https://ju-jeob.com

해당 프로젝트 Github에서 보기

요즈음 유튜브 댓글을 보다보면, 다음과 같은 댓글이 많은 호응을 받는 걸 볼 수 있다.

언니보고 벽 뿌시다가 우리집 원룸됐어

언니 승마장 출입금지당했어요… 왜인지 알아요? 언니 외모 보면 말이 안 나와서…

오빠 그거 알아요? 잘샌긴 사람을 보면 기억력이 감소한대요, 근데 오빠 그거 알아요? 잘생긴 사람을 보면 기억력이 감소한대요, 근데 오빠 그거 알아요? …

한국인들 특유의 주접거림인데, 요즈음 덕질하는 사람들은 모두 기본 장착하고 있는 아첨 스킬이라고 할 수 있다.

예를 들어, 내가 좋아하는 사람의 코가 높다면, 에베레스트 산 스펠링 아는 사람? 아 Sehun’s nose 이런 식이다.

내가 이 사람을 이정도로 좋아한다. 라는 것을 일부러 과장되게 표현하여 웃음을 자아낸다, 이 각박한 세상에서 사람들은 점점 정신 나가는 것 같다.

아무튼, 이런 주접 댓글들은 많은 호응을 얻었고, 지금도 검색창에 “주접”을 검색하면 주접 모음이 가장 상단에 배치된다. 수요가 많다는 뜻이다. ~[사바나] ‘주접 댓글’ 놀이에 빠진 MZ세대 : 신동아~

사실 이런 드립들은 언어 유희가 기본이 된다. 그러다보니 보다보면 그게 그거 같고, 신선한 소재도 점점 떨어진다. 지금이 과도기 같지만.. 드립학원 수강생들은 생각보다 더 엘리트다.

손흥민

그러던 와중, 다음 사이트를 보게 되었다.


척 노리스 데이터베이스 🔫

http://www.icndb.com/api/

척 노리스

척 노리스는 미국의 액션배우인데, 이소룡과 같은 나이이다. 많은 영화에서 최강자 역할을 많이 맡았는데, 이에 관련한 드립들이 꽤 재밌다.

사실: 척 노리스는 팔굽혀펴기를 할 때 자신을 밀어 올리지 않는다. 지구를 밀어내릴 뿐.

사실: 척 노리스는 불을 태울 수 있다

사실: 척 노리스의 눈물은 암을 치료할 수 있다. 그러나 안타깝게도 척 노리스는 눈물을 흘리지 않는다.

2020년 한국의 주접 댓글도 척 노리스의 밈(meme)의 영향을 조금이라도 받은 것 같긴 하다.

한국판 척 노리스도 있는데, 노동요 로 유명한 sake L 님이다. 해당 영상 댓글을 보면 많은(거의 전부)가 이런 댓글들이다.

sake L

SKT T1 소속 프로게이머였던, 뱅기선수도 이런 취급을 받고 있다.

벵기뱅기 더 정글 관련 유머 모음 - 뱅기 더 협곡 - 갓기

딴길로 샛는데, 아무튼 저 사이트를 보고 주접 댓글 생성기를 만들겠다고 생각했다. 처음엔 api만 만드려고 생각했는데, 그러다보니 메인 페이지도 만들고.. 그러다가 후기도 쓰고.. 내가 미쳐 정말.


아무튼, 개발 👨‍💻

금요일에서 토요일로 넘어가는 새벽에 잠이 오질 않아서 그냥 새벽을 꼬박 새고 전부 만들었다.. 개발에는 3시간이 걸린 것 같은데 배포가 좀 오래걸렸다.. ㅠ 도메인 너무 비싸요 좀 할인해주세요

React는 당연히 썻고, 이번 프로젝트에 NextJS를 처음으로 사용해봤다. 사용된 기술스택은 다음과 같다.

  • React
  • NextJS
  • Typescript
  • Mobx
  • Styled-components
  • AWS
  • Elasticbeanstalk
  • S3

사이트에도 주접거림을 넣고싶었다 🤪

주접거림, 그니까 막 정신없고, 진짜 정신 나갈 것 같고, 오바스러운. 그런 분위기를 사이트에서도 느낄 수 있도록 하고 싶었다.

그래서, 배경을 정신없게 했다.

구글에 주접 댓글을 검색하고, 내 기준으로 오 이거 참신하다. 하는 것들을 전부 다운받아서 포토샵으로 이어붙였다.

사실 이 작업이 개발 시간중 가장 오래걸렸다..

실제 적용모습

난잡하게 배열된 댓글들이 움직이면서 정신없는 분위기를 연출해준다.
구현은 background-repeat, background-position 그리고 keyframes 으로 구현을 했는데, 웹에서는 background-position이 변경될 때 마다 re-render를 하기 때문에.. 성능상 이슈가 있다.

background-repeat를 이미지 9개로, background-position을 transform로 변경해서 테스트 해보았지만. 이 경우도 이미지 9개가 보여지기 때문에 성능상 이슈가 있는 건 똑같았다. 이 부분은 차차 업데이트 해야할 것 같다.

주접을 떨었을 때 마리텔에서 쓰는, 네티즌들이 퐝퐝퐝퐝 하는 효과도 넣을 예정이다.

마리텔

배포 ☁️

AWS를 사용하여 배포했고, https://ju-jeob.com 이라는 도메인을 사는데에 13,500₩(거금, 더블와퍼 세트 하나, 싸이버거 세트 두개)을 사용했다.

Elastic beanstalk을 사용해서 정말 5분만에 배포할 수 있는 이런 시대.. 너무 좋은 것 같다.

정적 페이지인지라(주접 데이터베이스도 그냥 json파일이다), gh-page나 heroku 같은 무료 호스팅 서비스로 옮길 생각도 하고있다. 이유는 당연히 비용이다.

너무 AWS EC2? 사용하지 마세요. 편리함이 있다면. 위험성은 중대하죠. 닭잡는 데에 소잡는 칼 쓸 이유가 없겠죠?


마치면서 🐍🦶

이 글에 사족을 붙이자면, 만드는데에는 하루도 걸리지 않았지만, 이 후기 글을 쓰는 데에는 무려 삼일이 걸렸다.

아직 About 페이지를 만들지 않았지만 곧 작업할 예정이다.

깃허브에 있는 Projects를 적극 사용해볼 예정이다.

이전 글이 페이스북으로 공유가 되고 하루에 몇 백 분이 방문하는 걸 보곤 뿌듯함을 많이 느꼈다. 그 이후로 포스팅 하려 했지만,, 마음처럼 안되는 걸..

아마 다음 글은 2020 회고가 되지 않을 듯 싶다. 많이 긴 글이 되리라 생각된다.

해당 프로젝트 Github에서 보기




© 2019. by jong-hui

Powered by aiden