감사한 사람들에게 편지를 영상으로 만들어 공유하는 서비스, Thanks Clip!
프론트 4명 (백엔드X)
기능별로 분담하여 작업
1.2~1.16
기획 및 개발
1.17~
프로젝트 발표(중간 회고) 진행, 배포 및 테스트를 통한 이슈 확인 -ing
연초를 맞아 gdsc frontend 스터디팀의 마지막 활동으로 계획했던 gdsc-final-project를 진행하였다.
가장 먼저 figjam으로 비대면 라이브 소통을 하면서 각자가 생각해 온 아이디어를 모았다. 아이디어는 빠른 이해를 위해 서비스 대상, 한 줄 소개, 서비스 효과 세 파트로 나누어서 피그잼에 적을 수 있도록 하였다.
나의 경우 주접/축하 짤 생성기와 개발자 밈 테스트를 아이디어로 가져왔는데, 초반에는 내 아이디어가 꽤 긍정적인 반응을 얻었으나 전자의 경우 에디터 구현이 매우 어려울 것이라는 판단과 후자의 경우 기획만 하다 기간이 끝날 것 같다는 결론이 내려졌다 😵
아쉽지만 팀원들의 의견은 모두 일리 있는 말이었고, 우리는 2주라는 짧은 시간동안 배포까지 끝내야하는 현실적인 목표를 갖고 있었기에 최종적으로 감사하는 마음을 담아 편지를 보내는 서비스를 구현해보기로 했다. (일상님의 아이디어가 채택되었다👍🏻)
아이디어 구체화를 위해, 우리 서비스에서 전달하고자 하는 핵심 가치나 키워드가 무엇일지 생각해보았다. 다양한 의견이 나왔는데 그 중 영상을 통해 감사를 표현해보면 어떨까 라는 생각을 하게 되었고, 결론적으로 편지를 영상으로 재해석하는 기능이 우리 서비스의 핵심 기능이 되었다. 지금 생각해도 꽤 참신한 아이디어라고 생각한다.
아이디어가 거의 다 잡혀갈 때 쯔음 서비스명도 정했다. 운좋게 내가 제시한 ThanksClip이 서비스명이 되어 괜히 뿌듯했기도 한 순간이었다.
먼저 아이디어 구체화를 위해 회의를 진행했다. 회의는 피그잼이라는 툴을 사용했는데, 섹션별로 나누어 포스트잇으로 간단히 자신의 생각을 적어내는 ui가 참 직관적이고 보기 편했고 모두의 참여도를 이끌어내기에 탁월했던 것 같다. 노션의 경우 줄글로 적어야해서 뭔가 잘 정제된 문장을 한 땀 한 땀 써내려 가야할 것 같은 느낌이 있는데 피그잼의 ui는 여러 사람 의견을 공유하고 브레인스토밍하는데 딱 제격인 것 같다는 느낌을 받았다. 😯
아무튼 다시 돌아가서, 우리의 아이디어가 잘 전달되기 위해 어떤 흐름으로 진행되어야 할 지 논의했다. UI 구체화 전에 빠르게 스토리 보드를 만들었는데 우리는 즉각적으로 개발에 착수 할 수 있게 하기 위해서 ui 컴포넌트 단위로 사고하려고 노력하였다. 결국 우리가 기획한 것들이 개발 단계로 넘어갔을 때 어떻게 컴포넌트 단위로 흘러가는지에 대해 처음부터 많은 고민을 했던 것 같다.
앞서 말했다시피, 우리는 개발 사고로 확장이 용이하도록 스토리보드를 제작했기 때문에 스토리보드를 보고도 1차적으로 개발 목록을 리스트업할 수 있었다. 그래서 크게 모든 페이지에서 공통으로 사용되는 공통 컴포넌트와 페이지 내에서만 사용되는 페이지 컴포넌트를 나누어서 개발 업무를 분류했다.
또한 UI 구체화를 위해 하연님께서 피그마로 와이어프레임 디자인을 해주셨다. 디자인 컨셉은 다같이 정했지만 페이지 하나하나 디자인 하는것이 쉽지 않은데 흔쾌히 제작해주신 하연님께 이 자리를 빌어 다시 한 번 감사의 말씀을 드린다… (그리고 역시나 디자인 전공자는 다름을 느꼈다 ✨)
그리고 이 와이어프레임을 토대로 개발 업무도 조정되었다
이제 기획 단계가 마무리될 시점이었기에 남은 건 개발 뿐(이라고 생각했지만 사실 프로젝트 마무리 시점까지 기획회의를 자잘하게 계-속 해나아갔다. 이게 애자일이지 😅😤)이었다.
그래서 개발 전 팀원끼리 맞춰나가야할 사항들을 정리했다.
첫째로, 뽑아낸 개발 목록을 각자 실력 및 선호도에 따라 분담했고, 개발 칸반보드를 이용해서 개발 업무를 배치했다.
둘째로, PR룰과 커밋룰을 정했다. PR의 경우 리뷰어를 지정하고 PR의 성격을 나타내는 라벨을 꼭 붙여서 생성하도록 정했다. 기능단위로 feature브랜치를 팠기에 보통 기능 하나를 완료하면 PR을 날리는 형식으로 진행되었다. 또한 원활한 코드리뷰를 위해 최대한 PR에 어떤 구조로 설계해서 최종적으로 어떤 결과를 도출했는지 이해하기 쉽게 글을 작성했다. 글만으로 부족하다면 직접 테스트한 영상이나 사진도 첨부하였다.
실제로 날렸던 PR이다.
개발 core stack의 경우 처음에는 vite.js+react 조합이었지만, 서버 사이드 렌더링이 필요해진 시점 이후에는 nextjs+react로 마이그레이션 하였다.
역할 | 종류 |
---|---|
(SSR)Framework | Next.js |
UI library | React |
Styling | tailwind |
State Management | Jotai |
Programming Laguage | JavaScript |
Data Fetching | x (serverLess) |
Formatting | Eslint, Prettier, husky, lint-staged |
Package Manager | pnpm |
Version Control | Git, github |
우리 서비스는 step별로 편지를 완성해가는 페이지가 이어지는 흐름이다. 그래서 각 step페이지마다 공통되는 부분이 많았고, 사진과 같이 파란색으로 박스친 부분을 공통 UI 컴포넌트로 정의하여 재사용성을 높었다.
차례대로 메인 화면 -> step1 화면(1) -> step1 화면(2) -> step2 화면이다.
메인 화면
서비스 타이틀 및 화면 소개 문구가 보이고, 시작버튼을 통해 서비스를 진행할 수 있다.
step1 화면
받는 사람과 보내는 사람 입력 폼을 작성하고, 계속하기 버튼을 누르면 감사편지 입력 폼이 등장한다.
step2 화면
받는 사람에게 어울리는 감사 키워드를 선택하는 폼이 등장하며, 2-5개 선택할 수 있다.
차례대로 step3 화면 -> 모달창(step3→step4) -> step4 화면 -> 다운로드(받는 사람용) 화면입니다.
step3 화면 + 모달창
편지지를 꾸밀수 있는 편집기가 등장한다. 편집기 옵션은 편지지 형태, 배경색, 글씨체, 스티커 총 4가지가 있다. 영상으로 만들어지기 전에 모달창을 띄워 최종적으로 만들어진 편지를 검토 및 수정할 수 있다.
step4 화면 + 다운로드 화면
제출된 편지를 바탕으로 remotion 라이브러리를 통해 영상을 제작하고, 영상을 플레이어 기능을 통해 재생가능하도록 하였다. 영상은 키워드 - 받는 사람 이름 - 편지내용이 다양한 애니메이션이 적용된 상태로 보여진다. 또한 아래 카카오톡 공유 버튼을 통해 받는 사람에게 영상을 다운로드할 수 있는 페이지로 연결시킬 수 있다.
프로젝트에서 만족했고, 앞으로의 업무에서 지속하고 싶은 부분
프로젝트에서 부정적인 요소로 작용했거나 아쉬웠던 점
Problem에 대한 해결 방식으로 "다음 프로젝트"에서 시도해볼 점
전반적인 회고라 Try부분이 다소 추상적인 것 같다. 🥲 problem에 대한 해결방법이라기보다는 keep부분에서 나열했던 것들을 더 견고하게 하여 다음 프로젝트에 시도해보고싶다는 일종의 다짐 같은 느낌으로 해석하면 더 좋을 듯 하다
다양한 기술 스택들에 능숙해지기
기술 스택 선정을 위한 시야 넓히기
처음부터 끝까지 본인의 힘으로 배포해보기
배포 후 에도 지속적으로 테스트해보기
스스로 challenging한 영역을 만들어내서 그 속에 뛰어들어보기🌟🌟
PR 규칙 강화해보기
하나의 프로젝트에 대한 코딩컨벤션 규칙 만들어보기 (개인 작업이더라도)
칸반보드 사용