🔗 : https://woomogo.vercel.app

약 일주일간 기획부터 개발, 배포까지 몰두했던 우모고 | 우리는 모두 고양이였다 프로젝트를 끝마쳤다.
점차 개발을 진행해나가다 보니 새로운 아이디어가 떠올라서 첫 기획 당시보다는 조금 더 디벨롭된 서비스를 배포할 수 있었다.
이제 우모고 프로젝트 진행 기간동안 느꼈던 것들을 KPT 회고 방식으로 글을 작성해보겠다.

K(KEEP)		: 계속 이어가며 진행해도 될 정도로 만족스러웠던 부분
P(PROBLEM) 	: 개선이 필요할 정도로 불 만족스러웠던 부분
T(TRY)		: 불 만족스러웠던 부분에 대한 해결책

---

기술 스택

• 프론트엔드: React.js
• 데이터베이스: Firebase(Firestore)
• 분석도구: Vercel Analytics, Google Analytics
• 배포: Vercel

---

프로젝트 진행 계기

현 시대는 MBTI부터 시작되어온 스스로에 대한 궁금증이 많아지고 다양해지는 시대라고 생각된다.
(대부분 자기 PR이 중요하다고 느껴서 그럴 수도 있겠다 생각한다.)
최근 웹 서비스로 런칭한 '내가 춘자라니 by Anne-Hyeyeon' 프로젝트가 굉장히 히트했고 현재까지도 리텐션이 이루어지고 있다.
이 또한 아마 시대의 흐름에 맞춰 사람들의 관심사를 빠르게 캐치하시고 굉장히 똑똑하게 기획하셨기에 성공적인 결과와 현재를 맞이하실 수 있던 거 같다.

이러한 웹 서비스를 접하고 유저들이 실제로 사용하고 본인에 대해 한 단계 더 알아가는 서비스를 개발·배포하고 싶다는 욕망이 생겼다.
또한 나는 티거 라는 이름을 가진 코숏 치즈 고양이를 키우는 집사이기에 평소 고양이에 대한 관심도도 높았다.
따라서 현재 대부분의 유저들이 갖고 있는 관심사인 스스로에 대한 궁금증과 나의 개인적인 관심사인 고양이를 토픽으로 프로젝트를 기획하기로 결정했다.

---

프로젝트 소개

MBTI 부터 시작되어 스스로에 대해 궁금증이 많아지고 다양해지는 현 시대!! 사실 당신도 고양이였다면?? 새로운 당신의 모습을 확인해보세요!!

😼 우모고는 유저의 성격 유형 분석을 통해 어떤 고양이와 성격이 맞는 지 매칭하고 해당하는 고양이의 재치있고 귀여운 이미지를 보여주고 성격을 알려주는 웹 서비스입니다.

😺 유저 본인의 성격과 매치하는 고양이가 어떤 고양이인지 확인해보시고 본인과 찰떡인 유형의 고양이는 어떤 고양이인지도 확인해보세요!!

😸 유저들이 가벼운 마음으로 우모고 서비스를 접하고 웃음이 나오는 결과를 받아볼 수 있도록 사용자 친화적인 UI/UX를 제공했고 회원가입 등 별도의 인증방식을 사용하지 않았습니다.

🐈 사용 방법 !!
1. 메인에 접속 후 과거로 이동하기 버튼을 클릭해주세요
2. 고양이적 사고로 8개의 질문에 답변해주세요
3. 만약 고양이적 사고에 집중하지 못했다면 새로운 질문을 1개 ~ 4개 받게됩니다. 모든 질문에 대해 답변해주세요
4. 과거 냥생 확인하기 버튼 클릭 후 과거 냥생 시절을 확인해보세요!!
5. 본인의 결과를 확인해보고 당신과 가장 찰떡인 고양이에 대해서도 알아보세요!

extra. 자신의 과거 냥생을 인스타, 카톡 등의 SNS에 공유하고 결과로 자신과 찰떡인 고양이를 받은 인연을 찾아보세요!

---

KEEP

시작이 반이다

사실 처음에는 되게 막막했다. React까지 학습을 이어왔다고는 하지만 실제 유저들이 이용할 웹 서비스를 개발하여 배포한다는 것 그 자체가 꽤나 부담이었다.
하지만 '누구나 이렇게 시작하는 거 아닐까?' 라는 생각으로 막연하게 나의 첫 서비스에 대해 구상하기 시작했고, 어느 정도 구상을 마친 이후, 여자친구에게 내가 지금까지 구상했던 내용들을 얘기를 해주며 '어떨 거 같아? 어떤 부분을 바꿔야 할까?' 라고 물었고 내가 생각하지 못했던 부분들에 대하여 짚어줬던 걸로 기억한다.
그렇게 개발을 시작하기 위해 페이지를 나누고 대략적인 UI를 짜고 들어갈 컨텐츠들을 정리해뒀다.
앞으로도 시작을 겁먹지 말아야겠다. 그리고 혹시나 이 글을 읽게 될 사람도 시작을 겁내지 않았으면 좋겠다.

하루종일 몰두하기

눈 뜨고 잠들기 전까지 하루종일 우모고가 머릿속에 있었다.
'어떤 기능이 필요할까?' , '코드를 어떻게 작성해야 할까?' , '아 이거 추가해야겠다' , '뭐 해야 하는 거 있었는데...'
이런 생각들이 하루 종일 일주일간 내 머리를 채우고 있었다.
피곤하다는 생각도 들지 않고 잠들기 전과 밥 먹을 때 유튜브 보는 것도 재미가 없었다.
그냥 하루라도 빨리 우모고 프로젝트를 배포해서 사람들이 이용하는 모습을 보고 싶었다.

나는 어릴 적 어머니가 보내주신 학원에서 주산을 배웠는데 재미도 있었고 암산이 빨라지는 것을 느껴 꽤 오래 다녔다.
주판 학원을 다니던 초반 시기에 가상의 주판이 머릿속에 생길 거라는 말을 듣고 굉장히 생소했는데 어느 순간 실제로 머릿속에 가상의 주판이 생긴 경험이 있다.
그리고 현재, 우모고 프로젝트를 진행하는 시기에 잠시 나가서 바람을 쐬고 있었는데 내가 작성했던 코드가 머릿속에서 떠오르고 코드를 수정하며 짜고 있는 나를 발견했다.
내가 우모고 프로젝트를 진행함에 있어 큰 재미를 느끼고 있고 이렇게나 몰두하고 있구나라는 나의 감정을 알 수 있었다.

개인 프로젝트이기에 가능했던 유연함

사실 개인 프로젝트이기에 유연하게 진행이 가능했다는 장점도 있지만 단점도 명확하게 느낄 수 있었다. 단점에 대해서는 PROBLEM & TRY 챕터에서 다루도록 하겠다.
개발을 진행하고 하루 종일 우모고 프로젝트를 생각하다 보니 점점 초기 기획보다는 더 디벨롭된 서비스를 구상하게 되었다.

• 기존에는 질문이 8개로 고정되어 있었고 누구나 보자마자 알법한 MBTI 기반의 질문·답변이었다.
  하지만 고양이를 토픽으로 가져온 만큼 컨셉을 확실하게 살려서 질문·답변을 수정했고 동률의 파트 ( E/I, S/N, T/F, P/J )에 대해서는 누구나 이해하기 쉽도록 일반적인 MBTI 기반의 질문·답변으로 구성된 추가적인 질문·답변을 제공하여 조금 더 확실한 유저의 성격 유형을 분석할 수 있도록 하였다.

• 기존에는 유저의 답변을 기반으로 한 유저의 타입을 state에 저장하고 단순히 당신은 어떤 고양이입니다!를 알려주는 것으로 기획했다.
  하지만 유저들은 결국 결과 페이지에서 확인할 수 있는 결과를 기대하며 우모고에 접속했을 것이기에 결과 페이지만큼은 가장 많은 공을 들이고 싶었다.
  따라서 유저의 성격 유형과 매치하는 고양이들의 귀엽고 엉뚱한 사진들을 모으기 시작했고 해당 사진들을 말풍선으로 꾸미고 고양이의 성격을 세 줄씩 작성해두었다. 또한 우모고에서 자신의 결과를 받아본 유저들의 수와 현재까지 유저들이 받았던 결과를 데이터로 저장하여 특정 결과는 전체 유저 수의 몇 프로에 해당하는지 노출해주었고 성격 기반으로 자신과 가장 잘 맞는 고양이를 알려줌으로써 유저들로부터 다른 결과에 대한 호기심도 끌어낼 수 있도록 하였다

• 기존에는 단순히 과거로 이동하기(테스트 시작하기)버튼만 있었다.
  하지만 유저들이 공유하기 쉬울 수록 더 많은 신규 유저들의 유입이 많아질 거라고 생각했다.
  따라서 링크 복사하기, 카톡으로 링크 공유하기, 이미지로 결과 저장하기, 카톡으로 결과 공유하기 등 다양한 버튼을 Home 페이지와 Result 페이지에 배치해두었다.
  또, 일반 유저들이 겪은 불편한 점들, 발생한 장애 등을 리포트하거나 디자인, 개발 직군에 종사하시는 분들께 전체적인 피드백을 받아보고 싶다은 마음에 개발자에게 한마디 버튼을 추가하였다.

Firebase를 이용한 데이터베이스 연결

• 이번 프로젝트를 진행하면서 새롭게 공부하게된 툴이다.
  위에서 언급한 것 처럼 초기 기획 단계에서는 사용할 계획이 없었는데 특정 유저가 받은 결과는 전체 이용 유저들 중 몇 %에 해당하는지 그리고 전체 이용 유저 수를 집계하고 표시해줌으로써 유저에게 조금 더 매력적인 결과를 보여주기 위해서 데이터베이스를 연결할 필요성을 느꼈다.
  하지만 프론트엔드 관련 학습만 하던 나는 데이터에 관심은 있었지만 어떤 종류가 있고 어떻게 사용해야할 지 전혀 모르는 상태였다.
  따라서 정보를 찾아보기 시작했고 여러 툴 중 Firebase를 최종적으로 선택하게 되었다.
  Firebase가 서버리스 환경을 제공하여 백엔드 관련 지식이 없는 내게 적합하다고 느꼈고 UI가 가장 직관적이라고 느꼈다. 또 무료 플랜으로 제공되는 할당량이 충분하고 Google Analytics가 탑재되어있어 실시간 및 전체 사용자 수 등 여러 데이터를 수집할 수 있다는 점이 매력적이라고 느껴졌다.

---

PROBLEM & TRY

공유하기 api 이슈

• web share api를 적용하여 os에 맞춰서 지원되는 공유 기능을 이용하려고 했다.
  유저에게 가장 익숙한 UI가 제공되는 공유 방식이라고 생각했기 때문이다.
  하지만 web share api는 특정 브라우저 혹은 같은 브라우저이지만 특정 os에서 정상적으로 작동하지 않았고 해당 이슈를 해결하기 위하여 여러 정보를 찾아보다 결국 1차적 포기를 했었다.
  그 이후 카카오 링크 api를 추가하여 카카오톡으로 공유할 수 있는 기능을 추가해두었고 그대로 배포를 진행했다.

• 그 이후 이틀이 지난 오늘 '내가 분명 뭔가를 놓친 것 같다' 라는 생각이 들었고 코드를 확인해 봤지만 아무런 문제가 없었다. 그 이후 로컬 환경으로 앱을 실행시키고 페이지 하나하나 기능이 정상적으로 작동하는지 확인하다 공유하기 api에 문제가 있음을 깨달았다.
  모든 공유하기 api는 보안 상의 이유로 HTTPS 환경에서만 사용 가능하다는 것이었다... 하지만 앞서 배포하기 직전에 web share api를 포기하고 카카오 링크 api를 연결하고 로컬 환경에서 테스트했을 때는 문제없이 공유 기능이 작동했다고 생각했지만 지금 돌이켜보면 당시 밤새 마무리 작업하고 오전 9시 배포 및 홍보를 진행하고 이후 Analytics로 유입되는 유저들의 수, 집계되는 유저들의 결과 데이터 등을 구경하고 들어온 피드백들 확인하고 적용하다 보니 하루 종일 잠을 자지 않은 탓인가 정신 나간 상태로 첫날이 지나버려서 깜빡 잊고 있었다.
  어쨌든 돌아와서 다시 카카오 링크 api를 제거하고 web share api를 적용하여 사용자에게 가장 익숙한 UI의 공유 기능을 제공할 수 있었다.

개인 프로젝트이기에 어려웠다

• 위에서 개인 프로젝트이기에 프로젝트를 진행 중인 와중에도 심지어는 마무리 단계에서도 내 입맛대로 유연하게 기획 내용을 수정하거나 디테일을 수정할 수 있었다고 언급했다.
  하지만 이러한 유연함과는 반대로 개인 프로젝트는 단점도 명확히 존재한다.

  1. 옳은 방향으로 가고 있는지 점검할 수 없다.
  • 기획부터 개발 배포까지 혼자서 진행하다 보니 여러 고민이 들 때가 많았다.
    UI를 어떻게 짜는 것이 더 직관적일까? , 내가 모르는 부분 중 유저 경험을 향상시킬 수 있는 유의미한 기능이 있을까? , 내 코드는 문제가 없을까? , 사람들이 좋아하는 포인트가 뭘까? 등등 다양한 고민이 들지만 함께 고민할 수 있는 사람이 없어서 나의 기획이 옳은 방향인지 감을 잡기 어려웠다.
    그렇기에 나의 경우에는 기술적인 부분은 Chat-GPT와 Claude를 이용해서 해소하고 그 외적인 부분들은 여자친구에게 도움을 구하면서 해소하기 위해 노력했다.
    프로젝트에 몰두해서 함께 고민하고 의지하며 동반 성장할 수 있는 팀원이 있다는 사실은 여러모로 큰 힘이 되는 거 같다.
  2. 개인 프로젝트는 하나부터 열까지 내가 다 해야 한다.
  • 당연한 소리라고 생각할 수도 있지만 내가 전혀 모르거나 흥미가 없는 분야에 대한 작업도 전부 스스로 해야만 한다.
    내가 우모고 프로젝트를 진행하면서 겪었던 내용을 얘기해 보자면 결과 페이지의 이미지를 수집하고 작업함에 있어서 큰 고난을 겪었다. 하루 종일 웹 서핑을 하며 고양이 종과 성격에 맞는 행동을 하는 이미지를 찾고 해당 이미지에 말풍선과 텍스트를 추가하는 등 이미지를 수정하고 사진의 크기 및 비율을 정하는 것도 익숙하지 않아 너무 어려웠다.
    만약 내가 직접 새로운 이미지들을 디자인해야만 했다면 해당 기획을 갈아엎지 않았을까 싶다...
    결과 이미지를 제작하기 위해 이틀을 썻고 이후 들었던 감정은 코드를 작성하는 일은 굉장히 재밌다. 였다. 역체감이 굉장히 심했다.
  3. 배포 이후 홍보에 있어서 어려움을 겪다.
  • 이는 개인 프로젝트여서 어려웠다기 보다는 유저들이 실제로 사용할 수 있는 서비스를 배포한 경험이 처음이기 때문이 더 크다고 생각되지만 우선 적어보겠다.
    내가 우모고라는 웹 서비스를 제작하고 배포한 이유는 많은 사용자들이 들어와서 이용해 보고 본인의 성격과 매치하는 귀엽고 재치있는 고양이의 이미지와 해당 고양이의 성격 등을 담고 있는 결과를 확인하고 웃음이 나오는 경험을 하길 바랬기 때문이다.
    하지만 배포 이후 개인적으로 다양한 플랫폼에서 홍보를 진행했지만 지속적으로 이루어질 수 없었기에 트래픽이 점차 줄어드는 것이 눈에 보여 너무 아쉬웠다.

---

주저리주저리

우모고 프로젝트는 잘 마무리되었고 개인 인스타그램 스토리, 지인들의 인스타그램 스토리, 참여하고 있던 프론트엔드 관련 카톡 오픈채팅방에 홍보를 진행했고 감사하게도 첫날 412명의 유저가 우모고 서비스를 이용했다. 이후 다른 지인들이 인스타그램 스토리 및 커뮤니티에 홍보해주었고 개인적으로 개발자분들의 시선에서 피드백을 받아보고 싶다는 마음에 개발자 커뮤니티인 OKKY, DISQUIET에 글을 작성했고 현재 513명의 유저가 우모고 서비스를 이용했다.
한가지 아쉬운 점이 있다면 구글 서치 콘솔과 네이버 서치 어드바이저에 도메인을 미리 등록하지 못한 것이 조금 후회된다.
첫날 오전 9시쯤 배포와 홍보를 완료한 이후 사이트 등록을 시작했는데 SEO 설정이 처음이다 보니 미숙했고 잠을 못 자고 밤을 새운 상태였기에 정신이 없어서 시간이 꽤 흐른 후에 사이트 등록을 마쳤다.
만일 정식 배포 이전 개발 단계에서 미리 배포 이후 사이트 등록을 마쳐뒀다면 조금 더 많은 유저들이 다양한 루트로 들어와서 서비스를 이용해 볼 수 있지 않았을까 하는 아쉬움이 있다.
이번 프로젝트를 통해서 유저가 실제로 이용할 수 있는 서비스를 만드는 것은 되게 재밌고 배포 이후가 기대되는 일이라는 것을 알게 되었다.
추후 이러한 서비스를 만들기 위해 여러 분야의 팀원들과 협업해서 혹은 개인적으로라도 사이드 프로젝트를 자주 진행해 보려고 한다.