프로젝트 소개 💌
2022-2023 gdsc frontend 팀의 마지막 활동으로 진행했던 ThanksClip 프로젝트를 소개합니다.
ThanksClip은 모바일웹 애플리케이션으로, 감사한 사람들에게 편지를 영상으로 만들어 공유하는 서비스입니다.
감사한 분께 짧은 감사 메시지를 작성하고 그분께 어울리는 키워드를 선택합니다.
취향대로 편지지를 꾸밀 수도 있고 폰트도 선택할 수 있습니다.
모든 것이 준비되었다면 감사한 마음을 저희가 직접 제작한 영상에 녹여내어 보내드립니다.
영상은 카카오톡을 통해 공유할 수도 있고 다운로드하여 오랫동안 소장할 수도 있습니다.
_
돌아보면 주변에 참 고마운 분들이 많은 것 같습니다.
이번 기회에 주위의 감사한 사람들에게 하나뿐인 클립 영상으로 마음을 전달해 보는 건 어떨까요? 💐
Thanks Clip Github 링크
- 작업기간 -
2023/1/2~2023/1/21
- 참여인원 - 파트(flutter, backend, frontend, ai/ml)
고은서 | frontend |
박일상 | frontend |
장준성 | frontend |
조하연 | frontend |
구현 기능 소개
화면 플로우대로 구현 기능들을 소개하겠습니다.
편지 작성 기능
보내는 사람, 받는 사람의 이름을 입력한 후 다음 버튼을 클릭합니다.
편지 입력 폼을 통해 감사 편지를 짧게 작성합니다.
편지 키워드 선택 기능
받는 사람에게 어울리는 감사 키워드를 선택합니다.
키워드는 2~5개 범위 내에서 선택해야만 아래 버튼이 활성화 됩니다.
편지지 꾸미기 기능
편지지를 꾸밀 수 있는 편집기가 등장합니다.
편집 옵션은 편지지 선택, 편지지 색 선택, 폰트 선택, 스티커 추가 총 4가지가 있습니다.
- 편지지 선택 - 편지 테두리를 취향에 맞게 선택할 수 있습니다.
- 편지지 색 선택 - 파스텔 톤의 다섯 가지 색상 중에 하나를 편지지 색상으로 고를 수 있습니다.
- 폰트 선택 - 세 가지 폰트 종류 중 하나를 골라 글씨체를 변형할 수 있습니다.
- 스티커 추가 - 직접 디자인한 하트 모양, 별 모양, 원 모양의 스티커를 추가하여 편지지를 꾸밀 수 있습니다. 스티커는 여러 개를 부착시킬 수 있고 위치를 자유자재로 이동시킬 수 있습니다. 오른쪽 하단의 체크 버튼을 클릭하면 스티커를 고정시킬 수 있고 x 버튼을 눌러 삭제할 수도 있습니다.
영상 제작 기능
영상 변환 전에 모달을 띄워 편지를 검토 및 수정할 수 있으며 최종적으로 확인되면 영상을 만들기 시작합니다.
영상
server 에서는 aws lambda 에서 영상을 제작합니다. 영상은 react로 비디오을 제작해주는 라이브러리인 remotion을 활용했습니다. 영상 제작이 완료되면 s3 에 업로드 됩니다.영상
client 에서는 server가 영상을 제작하는 동안 우측과 같이 로딩화면이 표시됩니다.영상 확인 및 카카오톡 공유하기 기능
영상 제작이 완료되면
client 에서도 영상을 확인할 수 있습니다. 플레이어 기능을 통해 바로 재생이 가능합니다. 참고로 영상 플로우는 감사 키워드 → 받는 사람 이름 → 편지 내용 순서로 다양한 애니메이션이 적용되어 보입니다.또한 ‘카카오톡으로 Clip 보내기’ 버튼을 통해 영상을 보낼 수 있습니다. 받는 사람은 우측 사진과 같이 카카오톡 메시지를 받게 됩니다.
(받는 사람) 영상 확인 및 다운로드 기능
카카오톡 메시지의 ‘편지 영상 확인하기’ 버튼을 클릭하면 동적라우팅 되어 영상 다운로드 페이지로 연결됩니다.
렌더링이 완료되면 다운로드 버튼을 통해 영상을 다운로드 할 수 있습니다.
또한 ‘저도 만들어볼래요’ 버튼을 통해 받는 사람도 편지를 만들 수 있습니다.
영상 결과는 아래와 같습니다 😀
Tech Stack, Architecture 설명
Tech Stack
역할 | 종류 |
(ssr) framework | Next.js |
UI library | React |
Styling | Tailwind |
State management | Jotai |
Programming Langauge | Javascript |
Data fetching | x (serverless) |
Formatting | eslint, prettier, husky, lint-staged |
Package manager | pnpm |
Version control | Git, github |
- 기술 스택 선정 기준 및 히스토리
- Next.js
- 처음에는
vite.js+react조합이었지만 서버 사이드 렌더링이 필요해진 시점 이후에는Next.js+react로 마이그레이션 하였습니다. - Tailwind
- 주어진 기간 내에 인라인 스타일을 사용하는 것만큼 쉽고 빠르게 스타일링을 할 수 있으면서도 디자인 시스템만큼이나 일관된 디자인을 가능하게 해주는 tailwind가 가장 적합한 css 프레임워크일 것이라 판단했습니다. 또한 해당 기술을 이미 경험해보고 리딩해 줄 팀원이 존재했기에 팀원 모두가 빠르게 해당 프레임워크에 적응할 수 있었습니다.
- Jotai
- 상태 관리 라이브러리 사용 경험이 없는 팀원들을 고려했을 때 러닝 커브가 높지 않았고, 크지 않은 큐모의 서비스에 적합한 기술이라 생각되어 jotai를 상태 관리 라이브러리로 채택했습니다.
- Pnpm
- 패키지 매니저로는 pnpm을 선택하였습니다. pnpm은 node_modules를 직접 설치하는 대신, 전역 저장소에서 패키지를 공유하는 구조를 사용하기 때문에 빠르고 효율적으로 디스크를 관리할 수 있다는 장점이 있습니다.
Architecture
