큐티파이 개선하기
방치했던 서비스 되살리기
지금까지 다양한 사이드 프로젝트를 진행해 왔다. 하나하나 쌓이다 보니 이제 그 숫자가 꽤 된다. 결과물들을 보면 뿌듯한 마음이 드는 동시에 아쉬움도 느낀다.
만들고 나서 방치한 결과물이 있다. 지금 돌아봐도 매력적인 서비스인데 다 만들고 잠깐 만지작거리다 다른 프로젝트로 넘어갔다.
낳는다고 다 자식이 아닌데, 잘 키워야 비로소 자식이라 부를 수 있는 것인데. 이런 생각이 들며 내가 방치한 아이들에게 미안해졌다.
큐티파이(Cutify)는 그중에서도 특히 신경 쓰이는 아이였다. 만들면서도 재밌었고 결과물도 마음에 들었다. 또 사용자도 꽤 되었다. 2,000명은 넘게 써주었으니까.
큐티파이는 물론 사용자 분들에게도 미안했다. 쭉 잘 발전시켰다면 더 매력적인 아이가 될 수 있었을 텐데.
이런 생각이 강해지며 큐티파이를 개선해야겠다는 결심을 하게 됐다. 예전에 같이 큐티파이를 만든 친구에게 연락해 개선 작업을 시작했다.
그렇게 약 한 달 정도를 달렸으려나. 새로운 큐티파이가 세상에 나왔다. 만드는 과정도 재밌었고 결과물도 마음에 든다.
이번에도 역시나 마침표를 찍는 느낌으로 작업하는 중에 고민한 내용을 남겨 놓는다.
큐티파이 개선하기
목차
근본적인 문제 해결하기
콘텐츠가 더 잘 보이도록 바꾸기
콘텐츠 주목도 높이기
알림/광고 배너 추가하기
ZZAL 콘텐츠 오픈
사소한 개선 포인트
맺으며.
앞선 큐티파이 제작기 글을 읽으면 더 이해가 잘 됩니다.
근본적인 문제 해결하기
큐티파이를 개선하며 가장 먼저 한 액션은 어드민을 만드는 거였다. 기존엔 큐티파이의 콘텐츠를 관리하는 제대로 된 어드민이 없었다.
기존에 큐티파이의 콘텐츠는 아래와 같이 관리되었다.
1. 관리자가 유사 어드민에서 콘텐츠의 URL 입력
2. URL 입력 시 나온 Json 포맷 텍스트를 개발에 전달
3. 전달받은 Json 포맷 텍스트를 반영하여 페이지 배포
유사 어드민관리자가 개발자를 통해 콘텐츠를 업데이트하는 방식이라 불편했다. 처음엔 사소한 작업이라 생각했는데 일상이 정신없이 바쁘면 그런 일도 버겁게 느껴질 때가 있었다.
(퇴근하고 오면 노트북도 안 키고 쉬고 싶을 때가 있으니..)
이런 문제로 업데이트 주기가 조금씩 늘어졌다. 중간중간 심폐소생을 하긴 했으나 결국엔 손을 떼게 되었다...
이게 큐티파이 개선 작업에서 어드민 개발을 최우선으로 둔 이유다. 관리자가 개발자의 도움 없이 편하게 콘텐츠를 운영하는 것이 목표였다.
어드민 페이지를 만들고 크게 세 가지 기능을 개발했다.
관리자 로그인 기능
콘텐츠 관리 기능
카테고리 관리 기능
주요 기능인 콘텐츠 관리 기능부터 설명하면 말 그대로 큐티파이의 콘텐츠를 관리하는 메뉴다. 신규 콘텐츠를 생성하거나 이전 콘텐츠를 수정, 삭제할 수 있다.
카테고리 기능은 큐티파이의 카테고리를 관리하는 메뉴다. 강아지, 고양이 등과 같은 카테고리에 속한 메타 데이터를 관리할 수 있다.
둘 다 기본적인 서비스 관리 툴이라 특별하게 설명한 것은 없다.
한 가지 신경 쓴 부분이 있다면 콘텐츠 생성, 수정 시 프리뷰를 제공했다는 점 정도다. 관리자는 프리뷰를 보며 콘텐츠가 어떤 식으로 올라갈지 예상할 수 있다.
큐티파이 어드민어드민을 만들고 뿌듯했던 점은 아래와 같다.
이제 내가 운영을 고려하고 기획을 하게 되었구나!
과거의 나라면 사용자에게 보이는 부분부터 개선하려고 했을 것이다. 그게 웬만해서는 어드민 개발보다는 재밌으니까.
모지또를 운영하고 회사에서 일하며 쌓인 경험이 도움이 되었는지 이런 운영적인 부분에도 신경을 쓰게 되는 듯하다.
콘텐츠가 더 잘 보이도록 바꾸기
어드민을 새로 만드는 것만으로는 만족되지 않았다. 사용자 단의 UX/UI도 개선하면 좋겠다는 생각이 들어 기존 큐티파이를 살펴봤다.
기존 큐티파이 화면헤더(빨강)가 영역을 너무 많이 잡아먹고 있어 하단의 콘텐츠(초록)가 잘 보이지 않았다. 잘 변동되지 않는 지루한 헤더에 저렇게 많은 땅을 줄 필요가 있을까라는 생각이 들었다.
결국 사용자는 귀여운 동물 콘텐츠를 보러 큐티파이를 사용하는 것이니, 콘텐츠를 더 잘 보여주는 방향으로 UX/UI를 바꾸기로 했다.
또 사용자가 스크롤을 내리면 카테고리 선택 영역이 안 보이게 되는데 이 부분도 개선하였다. 카테고리 영역을 콘텐츠 영역 상단이 아닌 좌측에 두었다.
결론적으로 새로운 큐티파이의 모습은 아래와 같이 변화되었다. 아무래도 서핏을 참고해서 유사한 구조의 결과물이 나왔다.
넓어진 콘텐츠 영역확실히 콘텐츠가 전보다 잘 보여 만족스럽다. 이제 사용자는 귀여운 것들을 더 많이 볼 수 있게 되었다!
콘텐츠 주목도 높이기
팀원이 사용자가 더 쉽게 콘텐츠를 선택할 수 있는 기능이 있으면 좋겠다는 의견을 냈다. 이름하여 Editor's Pick이었다.
사용자가 봐줬으면 하는 콘텐츠에 Editor's Pick 마크와 선정 이유를 달아 주목도를 높이자는 얘기였다. 전보다 콘텐츠가 많이 보이니 선택 기준을 사용자에게 주면 좋을 것 같았다.
어드민에 콘텐츠별로 Editor's Pick 관련하여 설정할 수 있는 기능을 추가했다.
선정 여부
선정 이유
선정 에디터
어드민 Editor's Pick 설정Editor's Pick에서 설정한 값에 따라 사용자 화면에서 아래와 같이 표시된다.
Editor's Pick개인적으로 생각했을 때 귀여운 부분은 추천한 에디터에 따라 발자국이 달라진다는 점이다. 에디터가 Pick할 때 발자국 도장을 찍는다는 느낌으로 디자인했다.
(각 에디터의 이름을 표시하여 친근감을 표시한 건 덤..)
해당 카드에 Hover하면 아래와 같이 Gif가 재생된다. 발바닥 꾹꾹이!
이후엔 Editor's Pick을 과거 콘텐츠 끌올용으로 쓸 예정이기도 하다. 예전 콘텐츠 중에 괜찮은 건 다시 상위 노출하여 재활용하면 좋을 것 같다.
알림/광고 배너 추가하기
이번에 어드민을 추가하며 큐티파이에 파이어베이스를 붙였는데 결국엔 서버를 대여하게 되지 않을까 생각하고 있다. 이것은 꽤 무겁게 다가온다. 돈이 나간다는 것을 의미하기에..
취미처럼 큐티파이를 운영하는 것도 나름의 즐거움을 주겠지만 기왕이면 다홍치마니까. 언젠가 광고가 붙길 희망하며 배너를 추가하기로 했다.
사실 기존 큐티파이에도 배너 영역은 있었고 종종 콘텐츠를 바꿔가며 운영을 해왔다.
기존 큐티파이 배너근데 전달하는 정보량에 한계가 느껴졌다. 이미지 영역이 그렇게 크지 않았고 텍스트도 많이 적을 수 없었다. 그런 만큼 배너 주목도도 떨어지지 않았나 싶다.
새로운 큐티파이에선 UX/UI도 개편되는 만큼 배너에 대해서도 다시금 고민했다. 더 많은 메시지를 전달할 수 있고 주목도가 높은 방향으로.
이 부분에서도 서핏을 참고했다. 서핏은 인사 채용 관련 광고 카드를 콘텐츠 영역에 함께 띄웠다. 그리드 첫 번째와 두 번째 행의 마지막 열이 광고 구좌로 쓰이는 것으로 보였다.
서핏의 우측 광고 구좌큐티파이도 이 부분을 참고하여 소박하게 광고 구좌를 하나 열었다. 그리드 첫 행의 가장 마지막 열이다. 아직은 광고가 없어 동물 관련 공익 메시지를 띄우고 있다.
큐티파이의 광고 구좌처음엔 광고가 안 들어올 가능성이 높지만.. 그래도 구좌를 만들어 놓으니 좋다. 굳이 광고가 아니더라도 지금처럼 공익 메시지를 주목도 있게 전달하는 것만으로도 가치가 있다.
해당 영역에 들어가는 메시지는 카테고리별로 다르게 설정할 수 있도록 했다. 예를 들어 현재는 강아지 카테고리를 선택하면 강아지 관련 해피빈 기부 프로젝트를 소개하고 있다.
강아지 카테고리 광고 구좌그런데 여기서 한 가지 문제점이 발견되었다. 바로 이질감이다. 귀엽고 행복한 동물들 사이에 안타까운 사연의 썸네일이 표시되니 괴리감이 들었다.
일부 사용자는 썸네일에 마음이 불편해질 수도 있을 것 같았다. 아무래도 긍정적인 기운을 주는 이미지가 아닐 수 있으니까.
이러한 문제를 해결하기 위해 관심 있는 사용자에게만 썸네일이 보이도록 수정했다. 마음이 불편해질 수 있는 썸네일을 가진 콘텐츠는 Hover해야지만 자세히 보인다.
마우스 호버에 따른 카드 형태 변화이 알림/광고 배너는 아직까지는 100% 마음에 들지 않는다. 뭔가 더 개선할 수 있을 것 같아서 앞으로 고민을 해볼 예정이다.
그래도 알림/광고 배너 구좌를 새로 파니 설레는 마음이 커진다. 언젠가 사용자가 늘어 광고가 들어오면 참 좋겠다.
ZZAL 콘텐츠 오픈
사람 욕심은 끝이 없다더니 큐티파이를 개선하던 중 기능을 추가하고 싶다는 생각이 들었다. 사람들의 서비스 참여율을 높일 기능을 만들고 싶었다.
기획은 브라우저 확장 프로그램을 사용하는 환경에서부터 시작되었다. 브라우저를 업무/학습 환경에서 많이 사용한다는 점이 기획의 기본이 되어야 할 것 같았다.
그렇게 고민하던 중 생각난 것이 메신저였다. 업무/학습 중에 브라우저와 함께 많이 사용하는 게 메신저니까. 우리는 브라우저로 탐색하고 메신저로 나눈다.
이러한 관계를 활용해 큐티파이가 할 수 있는 게 있을 것 같았다. 큐티파이에서 무언가를 탐색하고 메신저로 나눈다는 흐름으로.
그렇다면 큐티파이에선 어떤 걸 탐색해야 할까? 이에 대한 답은 금방 나왔다. 바로 귀여운 동물짤이다. 메신저로 소통할 때 이모티콘처럼 쓸 수 있는 짤!
큐티파이에서 동물짤을 발견하고 메신저에 복붙하여 쓰는 시나리오를 생각했다.
물론 카톡이나 슬랙 등 메신저에서 자체 제공하는 이모티콘이 있기는 하다. 심지어 슬랙에선 사용자가 직접 이모티콘을 만들 수 있는 기능도 제공한다.
그래도 귀여운 동물짤 콘텐츠를 잘 골라두면 모든 메신저에서 쓸 수 있는 추가적인 선택지가 제공될 수 있을 것이라 봤다.
이런 고민을 거쳐 신규 기능으로 ZZAL을 추가하기로 결정했다. 앞에서 말한 것처럼 귀여운 동물짤을 탐색하고 복붙하여 다른 곳에 사용할 수 있는 기능이다.
근데 예상하지 못한 난제가 나타났다. GIF 위주로 동물짤을 구성하려고 했는데 테스트로 GIF 이미지를 복사하니 움짤이 아닌 사진 파일로 붙여넣기가 되었다.
이 문제를 해결하지 못하여 아쉽게도 GIF가 아닌 일반 사진 파일로 동물짤을 구성하게 되었다. JPEG와 같은 사진 파일은 복붙에 문제가 없었다.
개발 검토가 어느 정도 끝나고 동물짤을 어디에서 구할 것인가에 대한 고민을 시작했다. 아무래도 안정적인 출처에서 동물짤을 구하는 게 콘텐츠 운영에 용이할 것으로 보였다.
이를 위해 평소 메신저에 동물짤을 자주 올리는 친구에게 출처를 물어봤고 핀터레스트라는 답을 들었다. 실제로 핀터레스트에 들어가니 아래와 같이 동물짤을 올리는 사람이 있었다.
핀터레스트 동물짤동물짤을 사용하겠다고 댓글을 다는 사람도 보여서 신기했다. 우리가 ZZAL 기능을 열었을 때 이런 분들이 사용해주면 좋겠다라는 생각이 들었다.
개발 검토와 콘텐츠 수급처에 대한 고민이 완료되어 개발에 돌입했다. 파이어베이스 스토리지 기능을 사용하여 만들었다. 결과물은 아래와 같다.
신기능 : ZZAL카테고리별로 ZZAL 콘텐츠를 볼 수 있다. 아직 콘텐츠는 모으고 있는 상황인데 최대한 이모티콘처럼 사용할 수 있는 것들 위주로 모으려 한다.
사용법은 간단하다.
1. 마음에 드는 동물짤 위에 마우스 Hover
2. 카드 클릭하여 동물짤 복사
3. 메신저 등에 붙여넣기(ctrl + v)
마우스 Hover 시 복붙 안내이외에 아래 출처 영역을 누르면 해당 움짤을 만든 창작자 게시글로 이동할 수 있다. 나중엔 큐티파이 오리지널 콘텐츠도 만들면 좋을 것 같다.
갑작스레 준비한 기능인데 만들면서 새로운 기술도 써보고 참 재밌었다. 신규 기능을 사람들이 잘 써주면 참 좋겠다.
사소한 개선 포인트들
위에서 말한 것들 외에도 사소한 개선점이 있다.
먼저 카테고리 동물별로 백과 링크를 넣었다. 그 동물에 대해 알면 더 친근하고 귀엽게 느껴지지 않을까란 생각 때문이었다.
동물백과동물백과 보기를 누르면 해당 동물의 네이버 백과사전으로 이동하도록 했다. 나무위키로 할까 하다가 정보의 정확성을 고려해 백과사전으로 바꿨다.
지금은 강아지나 고양이처럼 이미 우리가 잘 알고 있는 동물 카테고리만 있어 큰 효과가 있을 것 같지는 않지만.. 이후 카테고리가 추가되면 도움이 될 것 같다.
다음으론 다크 모드를 추가했다. 아무래도 브라우저를 업무 시 많이 쓸 테니 사용자의 눈이 피로해지지 않도록 다크 모드가 필요해 보였다.
다크 모드개발적으로 라이트/다크 모드를 보다 더 쉽게 관리할 수 있도록 테마 파일을 따로 만들었다. 테마 파일을 한 번 만들어 두니 라이트/다크 모드 구현이 수월해졌다.
이렇게 모듈화?해서 개발하는 게 은근 재밌더라. 모듈화해서 효율화된 게 체감되면 참 뿌듯하다.
이번에 개발할 때 최대한 각 요소를 모듈화하여 유지/보수를 쉽게 한 것도 개선 포인트가 될 수 있겠다. 큐티파이를 앞으로 더 잘 운영하는 데 도움이 될 것이다.
맺으며.
큐티파이 개선하며 참으로 즐거웠다. 최근에 회사 일 때문에 정신이 없는 와중에도 여유될 때마다 할 정도로.. 간만에 시간 가는 줄 모르고 작업했다.
또 이번에 만들면서 큐티파이의 가치를 다시금 생각해 보게 되었다.
일하는 사람이 가장 많이 접하는 매체인 브라우저. 업무 시간에 우리의 브라우저는 일로 가득 차 있다. 브라우저 상단에 가득 찬 탭은 그 사람의 업무량을 대변하기도 한다.
이렇게 고된 상황에서 큐티파이가 잠시라도 쉬어갈 수 있는 오아시스가 될 수 있을 것 같다. 아직 일로 채워지지 않은 새 탭에서라도 사람들이 휴식을 취하면 좋겠다.
더 나아가 큐티파이를 통해 우리가 동물 친구들에게 더 많은 관심을 갖게 되었으면 한다. 일단 나부터도 그래야 할 것이고!
이런 가치가 사람들에게 더 잘 전달될 수 있도록 앞으로 큐티파이를 잘 운영해야지.
새로운 큐티파이 파이팅!
오늘도 긴 글 읽어주신 독자 분들에게 감사합니다.
큐티파이 다운로드해 주세요!!
