배경

프로덕트 디자이너 시절, 디자이너 동료이자 사수와 같았던 친구와 함께 사이드 프로젝트 아이디어를 많이 나누어 왔습니다. 저희 둘은 '개구린랩'이라는 디자인 크루를 형성하여 디자인 에이전시와 같이 작업물을 올릴 수 있는 사이트를 만들었고(곧 재배포 할 예정), 함께 좋은 서비스들을 만들어 갈 예정이었습니다. 이전에는 간간히 공부한 개발 지식으로 막연하게 접근해 볼 생각이었지만, 이제는 의지만 있다면 직접 실현할 수 있게 되었습니다!(커리어 전환)
2023년에는 회사 업무에 적응하느라, 또 공부하기에 급급하다는 이유로 차일피일 미루어 왔는데 2024년이 되자마자 그 친구는 저에게 간단한 프로토타입을 보여주며 바로 시작할 수 있는 의지를 불어넣어 주었습니다.

마침 저는 2023년 회고에서 작성했던 것과 같이, 테오의 스프린트를 통해 단기간에 밀어 붙여 무언가를 만들어내는 성공 경험을 얻었었기 때문에 자신감 있게 시작할 수 있게 되었습니다.
또한, 같은 전 직장 동료이자 현재도 친구로서 돈독하게 지내는 백엔드 개발자도 개인적으로 사이드 프로젝트를 진행하고 있었는데, 디자인이 필요하던 참에 저희 셋은 '생산적인 아저씨들'이란 이름으로 일종의 커뮤니티를 형성하여 서로 도움을 얻으면서 작업을 이어가기로 결정 했습니다!!

어떤 서비스인가?

디자이너 친구가 저에게 제안한 첫 서비스는 '아마추어 스포츠 팀을 위한 맨 오브 더 매치 투표 서비스' 입니다.
친구는 축구 팀에 속해 매주 경기를 치루어 왔기 때문에, 이 분야에 접목시키고 싶은 프로덕트 아이디어가 많았습니다. 하지만 아이디어에 살을 붙이고 붙이다 보니 시작하기 쉽지 않았습니다. 정말 잘 만들고 싶었기 때문이죠! 때문에 시작은 정말 가볍게 출발하자는 마인드로 전환하여 매 주 반드시 해야하는 그 날의 경기 MVP 투표부터 접근하기로 했습니다.

왜 필요한가?

물론 어차피 팀원들이 카카오톡 대화방에서 소통을 한다면, 카카오톡 투표하기가 편리할 수 있습니다. 하지만 카카오톡의 투표 기능은 아무래도 목적이 약속을 정하기와 같이 단발성 투표에 있기 때문에, 데이터를 취합하는데는 적합하지 않다는 아쉬움이 있었습니다. 운영진에 속한 저의 친구는 본인 뿐만 아니라 다른 팀의 운영진들도 마찬가지로, 투표한 데이터가 DB를 형성할 수 있기를 바란다는 것을 눈여겨 보았습니다. 이 데이터를 이용하여 월간, 연간, n년간의 통계를 만들어 팀원들의 동기 부여 및 역량 증진에 사용하고자 하는 목표가 있었기 때문입니다.

어떤 기능이 들어가는가?

주요 기능은 다음과 같습니다.

• 투표 등록하기
• 팀으로 등록 되어있는 팀원들에게 링크 보내기(카톡 링크, 푸시 알림)
• 투표하기
• 투표 결과보기
• 투표 히스토리 보기

조금 독특하게도 이 서비스의 방향성은 '투표 등록자는 조금 불편하게, 투표자는 간편하게' 입니다. 운영진 입장에서는 속상하게도, 카카오톡 투표하기로 받는 투표조차 응답을 제 때 받기 쉽지 않다는 페인 포인트가 있었습니다. 때문에 마치 구글폼 응답을 받는 것처럼, 투표자들은 공유받은 링크를 열어 '단순히 투표만' 하면 되도록 방향성을 잡고 기능을 만들 예정입니다.

어떤 기술을 쓸 것인가?

• React: 사실 프론트엔드로 React를 선택한 이유는 단순합니다. 현업에서 Vue를 사용하고 있기 때문에, 공부 차원에서 그친 React를 실제 프로젝트에서 사용해보고 싶었기 때문입니다.

• Vite: 현업에서 사용하고 있는 Vite로부터 실제로 Dev Server의 구동 속도, 빌드에서 훌륭한 퍼포먼스를 체감하였기 때문에 React + Vite 조합으로 프로젝트를 생성하기로 결정했습니다.

• react-hook-form: 공부할 때도 느꼈지만 React에서 Form의 에러를 비롯하여 다양한 케이스를 직접 State로 관리한다는 것은 너무 비용이 많이 드는 일이었기 때문에 react-hook-form을 선택하였습니다.

• Emotion: 그동안 스타일은 css와 scss로만 만들었었는데, CSS-in-JS 프레임워크로 재사용이 가능한 컴포넌트로 만들어 사용한다는 점에 매료되어 Emotion을 선택하였습니다.

• Firebase: Firebase를 알게되었기 때문에 혼자서 프로젝트를 시작할 용기를 얻게 되었습니다. Firebase는 Authentication(인증), Firestore(데이터베이스), FCN(푸시 알람) 등의 기능을 제공하기 때문에 백엔드에 대한 지식이 없이도 데이터를 설계하고 CRUD를 손쉽게 해낼 수 있으며, 로그인과 푸시 알람까지 해결할 수 있습니다. 앞으로도 Firebase를 적극 사용할 것이지만, 다음 프로젝트에서는 Firebase와 비견되고 있는 Supabase를 사용해 볼 예정입니다.

앞으로 작성할 컨텐츠들

• 개발하면서 겪은 고민들
• 트러블 슈팅
• 런칭 후 실제 얼마나 사용되었는지
• 무엇을 얻었는지(실제 증진된 역량, 인사이트 등)

함께하는 디자이너가 있기 때문에 2인 팀으로서 프로젝트를 하는 것이지만, 개발을 혼자 도맡아서 무언가를 만드는 경험은 처음입니다. 분명 우여곡절이 많을 것입니다.

필요한 기능을 어떻게 만들어갔는지 오랫동안 부딪혀 본 고민들들과 정말 모르는 문제를 맞닥뜨리고 어떻게 해결해나갔는지를 트러블 슈팅을 개발 일지로 작성할 것입니다. 그리고 이 투표 서비스가 런칭되었을 때 어떤 반응이 나오고, 어떤 사용자 이슈가 발생했으며. 어떻게 개선해 나갔는지, 결과적으로 이 프로젝트를 통해 얻은건 무엇인지를 작성하여 올릴 에정입니다.