개발 계기
어느 날 인터넷을 보다가 요즘 '나를 구성하는 9가지의 게임'을 골라서 공유하는 사이트가 유행이라는 글을 봤다.
이미 유행이 시작된 지 몇 주가 지난 시점이었는데,
사이트를 보자마자 다양한 장르로 변주가 가능하겠다는 생각이 들었다.
SNS에 검색해 보니 역시나 영화, 노래 버전 등 다양한 파생 서비스가 이미 운영 중이었다.
책을 사랑하는 사람으로서, 그리고 이미 '웹소설 캘린더'라는 사이트도 운영 중이었기 때문에
한국 사용자들을 위한 도서 버전의 사이트 만들어보면 어떨까 싶었다.
DB도 필요 없이 검색 API만 연동하면 되겠다는 판단에 가벼운 마음으로 시작했고, 실제로 4시간 만에 완성했었다.
그리고 만들자마자 X에 바로 홍보 트윗을 올렸다.
SNS 바이럴로 X 트렌드까지
트윗을 올린 당일에는 큰 반응이 없었는데,
다음날인 3월 8일부터 갑자기 SNS와 각종 커뮤니티 상에서 바이럴이 되기 시작했다.
이날 마침 친구와 약속이 있어서 밥을 먹고 카페에 앉아 있었는데,
이용자 수가 오후 내내 수백 명 단위로 늘어나더니 오후 5시쯤엔 X 실시간 트렌드에 올라와 있는 걸 발견했다.
SNS 바이럴 덕분에 서비스 출시 5일만에 누적 사용자 1.5만 명을 달성했다!
사용자가 급증하면서 가장 힘들었던 부분
서버 트래픽은 이미 Vercel Pro를 사용하고 있기도 했고,
DB 연동 없이 거의 로컬에서만 작업이 이루어지는 구조라 사용자가 급증해도 큰 부담은 없었는데
가장 큰 문제는 검색 API였다.
MT9 (My Top 9 Books) 는 일반 도서와 전자책 검색 기능을 나눠서 제공하는데, 검색 API 제공처도 분리돼 있다.
- 일반 도서: 네이버 검색 API — 일일 25,000회 제한
- 전자책 (주로 웹소설): 알라딘 검색 API — 일일 5,000회 제한
온라인 도서 판매를 전문으로 하는 알라딘으로 검색 API를 통일하고 싶었지만
일일 검색 횟수가 너무 적었기 때문에 부득이하게 둘로 나누게 되었다.
초반에 일일 이용자가 4,000~5,000명에 달하던 시기에는 빠르면 오후 5시부터 검색이 제한되기도 했다.
사용자들에게 원활한 서비스 이용을 제공할 수 없다는 점에
하루에도 몇 번씩 검색 이용 횟수를 확인하면서 스트레스를 많이 받았었다.
검색 한도 문제를 해결하기 위해 예스24, 교보문고, 알라딘 세 곳에 검색 API 제휴 문의를 보내기도 했었다.
이 중 두 곳에서 긍정적인 답장을 받았고, 한 곳과는 대면 미팅까지 진행했다.
여러 사정으로 인해 실제로 성사되지는 않았지만,
이런 대기업에서 나의 서비스를 이미 알고 있었다는 얘기를 들을 수 있어서 신기하고 뿌듯한 경험이었다.
개발 과정
4시간만에 개발했던 초기 버전
처음에는 정말 기본적인 기능들만 제공했다.
- 도서 검색 후 표지 이미지 가져오기
- 이미지 저장하기
- X에서 공유하기
- GA 연동, 메타데이터
DB는 전혀 사용하지 않고 로컬에서만 작동하는 버전이었다.
처음부터 완벽한 사이트를 만들려고 하지 말고,
일단 MVP 버전을 만들어서 배포한 후 사용자들의 반응을 보고 싶었다.
초기에는 도메인도 구입하지 않아서 Vercel 무료 도메인을 그대로 사용했었다.
(지금은 도메인 구입 후 리다이렉트를 적용해 놓았다.)
사용자 급증에 따른 조치
사용자들이 X에 해시태그로 공유해 주시는 트윗을 열심히 모니터링하면서
서비스 이용에 문제가 없는지, 어떤 부분을 개선해야 할지를 탐색했다.
확인하면서 이미지 첨부 없이 글만 올라온다거나,
이미지 저장이 되지 않아서 그냥 화면을 캡처해서 올리시는 분들이 많아서 이 부분에도 대응을 했다.
트위터에서 이미지 없이 글만 올라오는 경우가 자주 발생해서 'X에서 공유하기' 버튼 클릭 시 안내 팝업을 추가했다.
이미지를 직접 첨부해 달라는 강조 문구와 함께, 안내 팝업에서 바로 이미지를 저장할 수 있도록 했다.
이미지 저장이 되지 않는다고 화면을 그대로 캡처해서 올리시는 분들도 있었는데
이 경우에 표지 우측 상단에 X 버튼으로 인해 이미지가 지저분해 보였다.
이때는 추가 기능 개발하느라 정신이 없었기 때문에 이 닫기 버튼을 아예 없애 버렸었다.
Error: l.roundRect is not a function. (In 'l.roundRect(a,n,384,s,24)', 'l.roundRect' is undefined)
추후에 에러 로그를 확인해서 브라우저에 따라 이미지 크롭 함수가 작동하지 않는 것이
문제라는 것을 알아내서 해당 에러를 수정했다.
검색 API의 일일 한도량을 모두 소진해서 검색이 불가능해지는 상황이 대비하는 작업도 진행했다.
- 검색 결과에 캐싱을 적용해서, 동일한 검색어 중복 요청 시 API 호출을 절약했다
- 자정이 지나도 전날 캐시가 남아 검색이 되지 않는 이슈를 경험하고, 캐싱 태그에 날짜를 추가해서 자정 이후엔 항상 갱신되도록 했다
- 검색 한도 초과 시 검색 모달에 안내 메시지를 노출했다
검색 한도가 초과된 경우 상황을 자세히 설명하고, 언제부터 검색 가능한지를 안내해서
사용자들이 기능을 이용하는 데 혼란이 없도록 노력했다.
한국이 아닌 다른 국가에서도 꾸준히 유입이 있는 것을 보고
헤더에 한국어 또는 영어 중에 언어를 선택할 수 있는 버튼도 추가했다.
또한 추후 랭킹 정보를 제공하기 위해 DB에 작품별 선택된 횟수를 저장하기 시작했다.
처음에는 무료로 사용할 수 있고 빠른 구현이 가능한 Friebase를 이용했었는데
데이터 확인이나 정렬에 어려움이 있어서 나중에 Supabase로 마이그레이션을 했다.
여기까지가 이 서비스가 SNS에서 바이럴 되고 초기 이틀 동안 업데이트했던 내용이다.
공유 링크 생성 기능 추가
사용자들의 이용 방식을 보면서 새로운 기능 아이디어가 떠올랐다.
단순하게 top9 이미지만 저장하는 게 아니라 공유 링크를 만들어서
내가 고른 책의 제목이나 상세 정보를 더 편리하게 공유하고, 영구적으로 저장할 수 있으면 좋겠다는 생각이었다.
공유 링크 생성 기능은 비슷한 "9가지" 컨셉의 사이트에서도 일반적으로 제공되는 부분이었고
여기에 두 가지 기능을 추가하고 싶었다.
1. 작품 추천 기능
top9 이미지를 올리면서 내 취향에 맞을 거 같은 책을 추천해 달라는 사용자들이 많았다.
이 기능을 사이트 내에서 직접 제공하면 어떨까 싶었다.
아쉽게도 결과적으로는 현재 거의 이용되지 않는 기능이 되었지만...
2. 나와 비슷한 서재 추천
top9 이미지를 올리면서 나와 취향이 비슷한 영혼의 단짝을 찾는다는 글이 많았다.
실제 데이터를 바탕으로 내가 선택한 책 중에서 2권 이상이 일치하는 다른 사람의 서재를 추천해 주는 기능이다.
공유 링크 생성 기능을 개발하면서 다음 작업들을 진행했다.
- 공유 링크 생성 시 닉네임과 서재명, 도서별 코멘트 작성 기능
- 검색 결과에 없는 책을 직접 이미지로 첨부해서 등록하는 경우 DB에 저장 -> 이후 다른 사용자들도 검색 가능
- 링크 생성 전까지 작성 내용을 로컬에 저장
- 공유 링크 생성 시 선택한 책 9권으로 og_image 생성 후 Cloudflare R2에 저장
- 공유 링크 생성 실패 시 DB 업데이트, og_image 등 전부 롤백
- 공유 페이지에서 작품 추천 및 비슷한 취향의 서재 추천 기능
새로 추가된 기능의 사용률을 높이고 싶어서 '공유 링크 생성 안내' 모달도 추가했다.
API 호출 횟수를 최적화하기 위해서 공유 페이지의 렌더링 전략도 섹션마다 다르게 적용했다.
1. 책 정보 + 표지 이미지 그리드 섹션
최초 생성 후에는 변하지 않는 정적인 데이터이기 때문에 SSG로 구현했다.
데이터가 잘못된 경우에는 관리자 페이지에서 캐시 태그로 갱신할 수 있다.
2. 작품 추천 섹션
작품 추천이 새로 등록될 때만 캐시를 갱신하는 On-demand ISR로 구현했다.
3. 비슷한 서재 추천 섹션
다른 사람들의 서재 데이터에 의존하기 때문에 실시간성을 판단하기 어려워서
SSR로 항상 새로운 데이터를 불러오도록 했다.
한 가지 아쉬운 점이 있다면 접근성을 높이기 위해 로그인 기능을 넣지 않았기 때문에,
서재를 한 번 생성하면 수정이나 삭제가 불가능하다는 것이다.
(생성 시 비밀번호를 받아서 인증하는 방식도 생각해 봤지만,
일단은 간단하게 구현하고 이용률이 많아지면 그때 수정하기로...)
사용자들에게도 이러한 사항을 미리 고지하기 위해 '공유 링크 생성하기' 버튼을 누르면 안내용 팝업을 띄운다.
이 때문에 간혹 동일한 사용자가 서재를 생성한 뒤 1~2권만 바꿔서 새 서재를 다시 만드는 경우가 있다.
이런 경우 '서재 구경하기' 페이지에서 먼저 생성된 서재를 숨김 처리하는 방식으로 관리하고 있다.
공유 링크 생성 기능을 개발할 때 디테일한 부분까지 완벽하게 마무리하고 싶기도 했고,
새로운 기술도 사용해 보느라 생각보다 개발 기간이 길어졌다.
배포를 마쳤을 때는 이미 유행이 약간 식은 분위기였기 때문에
단계적으로 쪼개서 일부 기능이라도 빠르게 추가했다면 어땠을까 하는 아쉬움이 남는다.
공유 링크 생성 기능 출시 후 UX 디테일 개선
공유 링크 생성 기능 출시 후 초반에는 이용률이 생각보다 저조했다.
그래서 이용률을 높이기 위해 디테일한 부분들을 여러 차례 수정했다.
1. '공유 링크 생성하기' 버튼 위치 변경
처음에는 '공유 링크 생성하기' 버튼을 페이지 최하단에 위치했었다.
책 9권을 고르고 → 정보를 작성하고 → 링크를 생성하는 순서로 자연스럽게 내려올 거라 생각했기 때문이다.
그런데 막상 배포하고 나니까 사용자들이 굳이 페이지 최하단까지 스크롤하지 않는 것 같았다.
그래서 공유 링크 생성 버튼을 사용자들이 가장 많이 이용하는 '이미지 저장하기' 버튼 하단으로 옮기고,
가장 눈에 띄는 색상으로 바꿔서 접근성을 높였다.
2. '공유 링크 생성하기' 버튼 텍스트 변경
텍스트를 어떻게 해야 사용자들이 이 기능을 사용하고 싶어 할까 고민하면서
'공유 링크 생성하기' → '페이지 저장하기' → '내 서재 공유 링크 만들기'로 버튼의 표현을 여러 차례 수정했다.
3. 생성자명 필수 입력 해제
처음에는 공유 링크 생성 시 생성자명을 필수적으로 입력하도록 했었다.
근데 사용자들이 필수 입력 누락으로 공유 링크 생성을 포기하는 경우가 생길 거 같아서 (물론 안내 메시지를 보여준다)
9권의 책을 선택하기만 하면 즉시 공유 링크를 생성할 수 있도록 절차를 간소화했다.
서재 구경하기 페이지 추가
공유 링크가 생성될 때마다 하나하나 확인하면서 검수를 하다 보니,
타인의 개성 넘치는 서재를 구경하는 게 생각보다 너무 재밌었다.
그래서 이걸 나만 보는 게 아니라 다 같이 보고 싶다는 생각이 들어서 바로 개발에 들어갔다.
'서재 구경하기' 페이지는 일반 도서와 장르소설/만화로 나뉘는데,
검색 API에서 세부 장르 정보를 제공하지 않기 때문에 어느 검색 API만으로 검색했는지에 따라 단순하게 구분된다.
(네이버 → 일반 도서, 알라딘 → 장르소설)
이 때문에 가끔 잘못 분류되는 경우가 생기는데,
새 서재가 생성될 때마다 슬랙 알림이 오도록 연동해서 관리자 페이지에서 직접 수정해주고 있다.
장르뿐만 아니라 서재 데이터에 잘못된 부분은 없는지 한 번씩 검수하는 용도로도 좋은 것 같다.
처음 구경하기 페이지를 구상할 때 내가 생성한 공유 링크가 모두에게 공개된다는 점이
오히려 이 기능의 사용률을 낮추지 않을까 걱정했었는데
지금까지 꾸준히 이용되고 있는 점을 보면 크게 영향은 없는 것 같다.
그래도 언젠가 공개/비공개 옵션을 추가하고 싶은 마음은 있다.
랭킹 페이지 추가
Firebase와 Supabase에 분산되어 있던 도서별 카운팅 데이터를 통합하느라 공개가 좀 늦어졌다.
랭킹 데이터를 정기적으로 업데이트하고 최신 업데이트 시각을 표기하는 등 더 친절하게 만들 수도 있었지만,
일단 빨리 배포하자는 생각으로 최대한 심플하게 만들었다.
비정기적으로 업데이트하긴 하는데, 업데이트해도 기존 데이터에서 큰 변화는 없는 편이다.
주제 페이지 추가
공유 링크 생성 기능을 추가하면서 이 서비스가 독서인들의 다양한 취향을 공유할 수 있는
커뮤니티로서의 성격을 가질 수 있기를 바랐다.
그 방향성에 맞게 단순한 '인생책 9권'뿐만 아니라
다양한 주제로 서재를 만들고 모아볼 수 있으면 좋겠다는 생각에 주제 생성 기능을 추가했다.
특정 주제 페이지에서 공유 링크를 생성하면 해당 주제만의 서재 데이터를 모아볼 수 있고,
해당 공유 링크 페이지에는 어떤 주제로 만들어진 것인지 표기된다.
그 외 신경 쓴 것들
1. SEO
SEO를 위해 페이지별 메타데이터, 사이트맵, 렌더링 전략 등을 신경 썼는데,
구글이나 네이버 검색 결과에 사이트가 잘 뜨는 것을 보면 효과가 있었던 것 같다.
(SNS 공유가 활발했던 것도 영향이 있었을 거라 생각한다.)
2. 드래그 앤 드롭 순서 변경
선택한 책의 순서를 바꾸고 싶은 경우가 있을 거 있어서
최근에 드로그 앤 드롭으로 책의 순서를 변경할 수 있는 기능을 추가했다.
마무리
이번에 MT9를 만들고 운영하면서 느낀 점이 있다.
할까 말까 고민할 시간에 일단 만들어 보자.
처음부터 너무 완벽한 걸 만들려고 하지 말자.
일단 빠르게 만들고, 사용자들의 반응을 보면서 고쳐나가면 된다.
MT9는 특히 해시태그를 통한 SNS 공유가 활발하게 이루어졌기 때문에,
내가 만든 서비스가 실제로 누군가에게 이용되고 있다는 것을,
그리고 어떻게 이용되고 있는지를 직접 볼 수 있어서 정말 행복했다.
"책 9권을 고르기 너무 힘들었어요",
"고르면서 나도 몰랐던 내 취향을 알게 됐어요" 같은 반응들을 볼 때마다 너무 재밌고 뿌듯했다.
개발자는 관심을 먹고사는 것 같다.
내가 만든 서비스를 누군가가 시간을 내서 이용해 준다는 점이 너무 매력적이다.
앞으로도 사람들에게 재미와 가치를 줄 수 있는 서비스를 계속 만들어나가고 싶다!