연합 IT 동아리 DND에서 9기로 참여하며 8주간 진행한 사이드 프로젝트 개발 후기 및 회고입니다 (이전 포스트를 이전하였습니다)

• 👀 포즈피커 바로가기
• 📸 인스타그램으로 소식받기
• 📹 데모영상
• 🐈 깃허브 레포

---

🪄 포즈피커, 어떻게 만들어졌나요?

디자이너와 개발자가 한 팀이 되어 8주 동안 사이드 프로젝트를 진행하는 연합 IT 동아리 DND의 9기 활동으로 진행된 프로젝트다.

동아리 활동에 대한 정보는 이전 포스팅을 참고해주세요!

디자이너 2명, 프론트엔드 2명, 백엔드 2명 총 6명이서 서비스 기획, 개발, 발표 및 배포까지의 프로세스에 참여했다

1. 기획 배경 및 브랜딩

포즈피커 서비스는 아이데이션 중 나온 굉장히 단순한 고민에서 출발했다.

인생네컷, 포토이즘, 포토시그니처, 하루필름 등 다양한 포토부스에서 사진을 남길 때마다 하게되는 포즈고민이라는 누구나 한번쯤은 해봤을 고민을 해결해주자!
가 단순한 처음 목표였다.

본 서비스가 사용될 포토 부스에 대한 시장조사, 1000여명이 참여한 설문조사, 노코드로 만든 임시랜딩 페이지를 이용한 MVT 진행, 페르소나와 유사한 5인과의 인터뷰 진행 등 다양한 리서치를 진행하였고

이를 통해 기획 목표와 가설을 검증하고 서비스 기능을 구체화할 수 있었다.

개발자와 디자이너만으로 이루어져서 따로 기획자가 없는 팀이였지만 기획을 정말 탄탄하게 챙긴 프로젝트였다.

개인적으로 개발자임에도 불구하고 서비스의 기획 단계부터 깊게 참여했기에 프로젝트에 대한 애착이 특히 더 높았던 것 같다.

그렇게 리서치를 통해 구체화한 기능은 다음과 같다.

그동안 나는 로그인이 필요한 서비스만 만들어왔는데, 이전부터 장벽 없이 쉽고 편하게 이용할 수 있는 서비스를 만들어서 다양한 유저들을 만나고 싶다는 열망이 있었다.

그렇기에 로그인 없이 대부분의 기능을 라이트하지만 지속적이게 이용할 수 있는 이번 서비스가 너무 마음에 들었다.

2. 서비스 기획

PoseFeed

맨 처음에는 이렇게 포즈 데이터들을 모아보고 필터링 할 수 있는 기능을 중심으로 포즈피드 내에서 상세페이지로 이동하고, 북마크하는 기능이 포함시키는 방향으로 기획했었다.

PosePick

그러다가 리서치를 통해서 증명된
"사람들은 포즈를 미리 찾는 것이 아닌 찍기 직전에 찾는다"
라는 가설을 적용하기 위해 핵심 기능을 추가하였다.

포즈피드에서 직접 골라야하는 시간조차 생략할 수 있는 "빠르고" "랜덤성이 짙은" 컨텐츠로써 포즈픽이 탄생했다.

그렇게 포즈픽(당시에는 각 기능 이름도 안정해져서 랜덤포즈라는 가제를 사용했다)과 포즈피드 양 기능 체제로 와이어프레임까지 완성된 상태였는데

PoseTalk

최종 기획 협의 단계에서 "몸으로 말해요" 컨텐츠에서 영감을 받아 사진이 아닌 키워드 데이터로 포즈를 추천해주는 기능에 대한 아이디어가 나왔다.
(당시 이 아이디어가 나오자마자 다들 박수를 쳤다)

그렇게 막바지에 추가되었지만 지금 필자가 가장 많이 사용하고 있는 포즈톡이 등장했다.

그렇게 세가지 기능이 만들어지고, 디자이너분들이 로우파이를 작업할 때 우연히 들어갔다가 각 기능의 이름을 지으려고 새벽까지 토론했던게 꽤나 인상적이였다.

랜덤포즈, 포즈로 말해요, 포즈탐색 이라는 통일성 없고 직관적이지 않은 이름을 두고 고민하다가 디자이너님이 포즈탐색에 포즈피드라는 이쁜 이름을 붙여주셨고,

그후 내가 포즈로 말해요라는 긴 이름을 포즈톡으로 줄이고 랜덤포즈를 포즈픽으로 바꿔서 포즈픽&포즈톡 으로 라임(?)을 맞추는건 어떨지 제안드렸다

지금 생각해보니 굉장히 뿌듯했던 작명시간이였다 :)

---

📸 포즈피커, 개발 과정이 궁금해요!

기능 기획이 어느정도 된 후 본격적인 디자인 작업을 위해 브랜딩과 디자인 컨셉을 잡았다.

우리팀은 팀원들이 모두 참여하여 시네틱스 방법론을 이용해 포즈 추천 이라는 두개의 키워드로부터 여러개의 키워드를 도출해냈는데, 이 키워드들로 스토리텔링을 하고 브랜딩까지 진행하는 과정이 인상적이였다.

이후에도 이렇게 서비스를 기획할 일이 생긴다면 디자이너에게 브랜딩을 전담하는 것이 아닌 브랜딩 단계에도 참여하면 좋을 것 같았다.

Design System

그렇게 만들어진 컨셉을 바탕으로 디자이너님들이 디자인 작업을 진행하셨고 그 과정에서 디자인 시스템을 만들어주셨다.

이 디자인 시스템이 UI통일이라는 디자인적 이점뿐만 아니라 개발 용이성도 가져다줘서 프론트엔드 개발이 한결 편했던 것같다.

Service Architecture

프론트엔드는 Next, 백엔드는 Spring Boot를 기반으로 개발이 진행되었다.

Frontend Stack

• 사진 데이터가 많은 서비스 특성상 Server Side Redering으로 최적화된 빠른 렌더링을 이용하고자 했다
• 또한 폭넓은 유저층이 단기적으로 사용하는 서비스 특성상 접근성을 높이기 위해 SEO가 필수적이였기 때문에 당연하게도 Next를 선택했다.

• 이번 프로젝트에서 나의 챌린징 요소는 Tailwind CSS라는 새로운 스타일링 프레임워크였다.
• 이전까지 Styled Components만 사용해왔는데 왜 Next가 Tailwind CSS를 기본으로 권장하고 있는지 알게 되었고 너무 편리해서 이후 Tailwind 없이 타 프로젝트를 진행하려나 정말 매우 불편했다.
• 러닝커브는 높지만 한번 배우면 개발 속도가 훨씬 빨라지고 또 코드만 보고도 그 형태를 예측할 수 있어서 코드리뷰에도 정말 큰 도움을 많이 준 스택이였다.

• 바텀시트 구현과 필터 데이터 상태 관리를 위한 전역 상태 관리 라이브러리는 이전 인턴기간에 회사에서 써봤던 Recoil을 사용했다.
• 추후 로그인 기능을 업데이트하면 유저 관리에도 사용하게 될 듯 하다.

• Axios와 React Query도 회사에서 사용해봤던 스택이라 익숙하게 사용하긴 했는데, React Query의 경우 Tanstack Query로 업데이트 되면서 변경사항이 있어 잠시 혼란을 겪기도 했다
• 무한스크롤을 구현할 때 React Query에 있는 useInfiniteQuery를 꽤나 유용하게 사용했다
• 최종 발표 후 네트워킹 시간에 다른 프론트엔드 개발자들과 이야기 나누며 리액트 쿼리를 넥스트에서 사용할 때 서버 사이드 렌더링의 이점을 제대로 누릴 수 있는가와 그 딜레마에 대해 이야기를 나눴는데, 꽤나 기억에 남는 토론이였다

---

💫 Epilogue

본 회고에 사용된 자료를 포함하여 발표자료 또한 갓 디자이너님들이 너무 예쁘고 멋지게 만들어주신 덕분에 최종발표도 성공적으로 마칠 수 있었다

팀에 좀 기여를 더 하고싶다는 마음으로 자원해서 맡은 발표였지만 발표 당일 많이 떨리고 간장한 상태로 진행했는데, 많은 분들이 호응해주시고 좋게 봐주셔서 정말 다행이였다.

최종 프로젝트 발표 때 각 기능을 효과적으로 설명하기 위해 퍼소나를 제시하고 퍼소나의 입장에서의 각 기능들을 소개했는데, 이 발표 방법이 실감나서 기억에 남는다는 감상평을 받았다 ㅎㅎ

특히 발표 말미에 배포 완료된 서비스의 링크를 QR로 넣어서 방금 발표한 서비스를 직접 이용하시면 된다고 외칠 때 정말 뿌듯하고 짜릿했다

마지막으로 서비스 데모영상과 깃허브 링크를 첨부하며 8주간 너무 좋은 경험을 할 수 있었던 포즈피커 프로젝트에 대한 회고를 마친다.

• 데모영상
• 깃허브 레포

업데이트 후 공식적인 홍보나 우연히 검색을 통해 포즈피커 서비스를 보게 된다면 많은 관심 부탁드립니다 :)

피드백은 환영입니다 🫶

거침없이 익명 피드백 하기

조언, 피드백, 인사, 칭찬, 비판 전부 환영합니다!

인스타그램 많관부 ❣️

포즈피커 소식 빠르게 받기

포즈피커 팀 응원하기 ☕️

토스로 포즈피커 응원하기 (900₩)

포즈피커는 현재 수익을 따로 내지 않고 있는 서비스로
현재 팀원들의 사비로 도메인 구입 비용과 서버비를 충당중입니다 🥺
작은 응원들이 포즈피커의 지속적인 유지에 큰 도움이 됩니다