더 많이 더 적게 : 어떻게 발전시켜나갔는가?

 

더 많이 더 적게 : 어떻게 발전시켜나갔는가?

 사이드 프로젝트로 기획한 사이트인 < 더 많이 더 적게 >가 나온 지 1달이 좀 넘었다. 침착맨님이 방송에서 잠깐 시간 남을 때 해줬으면 했던 게임인데 어쩌다 보니 다양한 스트리머들이 게임을 즐기면서, 금전적인 문제와 남들이 더 나은 게임을 즐겨야 한다는 생각에, 나도 재미로 이 사이트를 굴리기 힘들어졌다.

▲ 처음으로 게임을 즐긴 이말년 만화가님과 주호민 만화가님

 가장 큰 문제는 역시 돈이었다. 도메인은 그냥 버리는 돈으로 생각하고, 좋은 경험했다고 넘어갈 수 있겠지만 서버비가 한 순간 감당할 수 없을 만큼 높아져 있었다. 게다가 정말 야매로 만든 코드라 백앤드 없이 오로지 프론트앤드로만 코드를 짜서 ZEIT으로 올렸던 프로젝트인데, 게임 내에서 계속 이미지를 불러오는 부분의 트래픽이 생각보다 많이 늘어나게 된 것이었다. 또한 게임 내 키워드가 200개를 넘어가자 프론트에서 사진에 대한 위치를 넣고 노가다에 가까운 작업을 하는 게 귀찮고 버거워졌다.

▲ 예상보다 많은 트래픽이 나왔다

 그래서 백앤드를 추가하기로 결정했다. 최대한 빨리 해당 페이지에 문제 없게 백앤드를 추가해야 했기 때문에 가장 최근에 사용하고 가장 쉬운 것을 선택해야 했다. 그래서 나는 일반적인 백앤드 대신 GraphCMS라는 CMS(Content Management System, 콘텐츠관리시스템)를 사용하기로 결정했다. GraphQL을 최근까지 사용해왔고, 최근에 GraphCMS를 강의를 들으면서 잠깐 다뤄봤을 때 편리하다고 느꼈기 때문이다. 나중에 Amazon S3같은 온라인 스토리지를 사용하는 것도 고려를 했지만, 이미 GraphCMS로 해 놓은 게 많은 상태라 넘어가기 어려웠다. GraphCMS에서의 키워드 추가는 프론트앤드만 있었을 때에 비해서 시간이 1/10로 줄어들었다. 구글에서 이미지를 받아서 업로드하고, 자동으로 연결된 이미지에 미리 생성해둔 필드인 키워드 이름과 검색 수를 입력하고 생성만 하면 된다.

▲ 정말 직관적인 GraphCMS의 디자인

 GraphCMS를 추가한 뒤에는 게임이 끝난 후 점수에 대한 결과 값을 Query로 보내는 것이나, 사용자들이 게임에 들어갈 키워드 제안이나 기타 의견들 줄 수 있는 기능 또한 추가할 수 있었다. 해당 기능으로 사용자들과 소통하면서 더욱 양방향적인 게임이 되었다. 그리고 이를 통해 당일 사용자가 얼마나 늘었는 지에 대한 지표도 확인 할 수 있게 되었다.

▲ 이런 식으로 결과 값들과 의견을 확인 할 수 있다.

 자잘한 버그들을 고치고 좀 더 직관적인 코드들로 바꾸고 나서는 더 이상의 코드 업데이트는 진행하고 있지 않고, 매주 올라온 키워드들을 바탕으로 키워드 업데이트만 진행중이다. 처음으로 인터넷에 내놓은 내 자식 같은 아이라 자다가도 이렇게 바꿀 걸 저렇게 바꿀 걸 생각하다가 잠이 안와서 코드를 고치기도 했다. 이런 고민을 할 수 있게라도 해준 사이트가 정말 고맙다.