오빠! 톤 많아?

🧐 About Project

오빠! 톤 많아? 퍼스널 컬러 자가진단

안녕하세요. 색깐다입니다.

내 퍼스널 컬러는 뭘까? 한 번쯤 궁금한 적 있지 않나요?
하지만 퍼스널 컬러 진단 받으러 가려면 비싸고... 귀찮죠.
내 사진 한 장으로 직접! 비용 없이 빠르고 간편하게! 나의 퍼스널 컬러를 찾아보아요.

배포 링크: https://omct.web.app/

Github 링크: https://github.com/SaekKkanDa/OppaManyColorTone

✨ Installation

nvm use
yarn
yarn run dev

📙 Guide

• 1 - 에러 핸들링 디자인
• 2 - Github Actions을 활용하여 배포 자동화
• 3 - OMCT 폴더 구조
• 4 - 다국어 지원 (next‐i18next)

🙏 Contributors

잰크

설탕

닉

코코

준

수야

🛠 Stack

• Next.js
• TypeScript
• styled-components
• Recoil
• Firebase
• Github actions
• Sentry
• spline
• i18next

🧑‍💼 담당 역할

설탕

• Javascript -> Typescript 마이그레이션🔗

• React -> Next.js 마이그레이션🔗

• UI/UX 설계 및 개선

• 공통 컴포넌트 개발

• 컬러 선택에 따른 결과 도출 로직 작성🔗

• SEO 개선🔗

• CLS 최적화🔗

• Next.js 이미지 및 폰트 최적화🔗

• 3D 이미지 적용
  랜딩 페이지에 3D 이미지 추가 (Spline 라이브러리 활용)

코코

• 컬러 선택 로직
  퍼스널 컬러 진단 서비스의 핵심 기능인 컬러 선택 로직 설계 및 구현

• 다국어 서비스 도입🔗
  서비스의 글로벌 확장 가능성을 염두하여, 해외 사용자들도 쉽게 접근할 수 있도록 다국어 지원 추가

• 컬러칩 선택 인터렉션 추가🔗
  사용자의 중간 이탈율을 줄이기 위하여, 컬러 선택 과정에 애니메이션을 추가하여 서비스의 몰입도를 향상

수야

• 퍼스널컬러 관련 아이디어 제공
  퍼스널컬러 12타입으로 확장, 타입 별 컬러 초이스 및 설명 텍스트 작업

• 다국어 지원🔗
  다국어 지원 라이브러리 교체 (next-i18next)

• SEO 메타 태그🔗

준

• SVG를 이용한 인터렉션 개발🔗
  주로 사용하는 lottie 혹은 애니메이션 라이브러리가 아닌 svg를 직접 제어하는 인터렉션 개발

• Firebase 통신 모듈
  firebase storage 혹은 API와 통신할 수 있는 모듈 개발

• 퍼스널 컬러 대리 테스트 기능🔗
  나의 이미지를 타인이 대신 테스트 할 수 있는 기능 개발

• CI/CD🔗
  firebase CLI와 github acionts을 이용하여 CI/CI 파이프라인 구축

• 코딩 컨벤션 개발🔗

• 에러 핸들링 디자인🔗
  핸들링 될 수 있는 에러는 상황에 맞게 핸들링 하며, 그렇지 못한 에러는 sentry에 규약에 맞게 에러 수집을 하는 구조 설계

🐞트러블 슈팅

• html2canvas 라이브러리 저장 이슈🔗
  결과 이미지 저장 시 연예인 사진이 꺠지는 이슈

• i18next, firebase cli 사용하여 배포시 internal server error가 발생하는 이슈
  추후 문서 제작 예정

• 크로스 브라우징 이슈
  Native Share API, html 이미지로 저장 등 디바이스/브라우저별로 다르게 동작하는 이슈

📌 개선점 (TODO)

구글 애드센스

• 서비스 사용화 및 수익 창출
• UX에 자연스럽게 녹아드는 광고 개시

구글 태그 매니저

• CDP
• 사용자 행동 데이터 수집 및 데이터에 기반한 UI/UX 개선

UX 개선

• 컬러 선택 타인 공유 링크의 랜딩 페이지 추가
• 사용자 데이터에 기반하여 이탈률 감소를 위한 개선