사이드 프로젝트 개발기 | Yumiko Simulator를 소개합니다

Oct 27, 2024 eunbin20

저는 취미로 발레를 즐기고 있는 5년 차 취미 발레러입니다 🙌

우연히 발레 수업을 접한 뒤 그 매력에 푹 빠져, 지금까지 꾸준히 발레 학원에 다니고 있어요.

발레의 매력은 여러 가지가 있지만, 특히 다양한 색상과 소재, 디자인의 발레복을 고르고 입는 즐거움이 크죠 🤓

그중에서도 일본 발레복 브랜드 Yumiko는 저 같은 취미 발레러부터 전문 발레리나들까지 많은 사랑을 받고 있는 브랜드인데요. Yumiko에서는 고객이 원하는 색상과 소재를 선택해 자신만의 발레복을 디자인할 수 있는 커스텀 오더 시스템을 제공하고 있어요.

저도 이 서비스를 이용해 다양한 색상과 소재를 조합해봤지만, 사용하면서 한 가지 아쉬운 점을 느꼈습니다…

개발 동기

위 화면은 Yumiko 홈페이지에서 실제로 커스텀 오더 방식으로 주문할 때 보여지는 화면입니다.

옷의 디자인과 색상을 셀렉 박스로만 선택이 가능할 뿐, 이 색상들의 조합이 실제로 어떤 모습일지 즉시 확인할 수 없었습니다.🥲

그래서 저는 이러한 경험에서 영감을 받아, 사용자가 선택한 커스텀 디자인이 실제로 반영된 모습을 실시간으로 확인할 수 있는 “Yumiko Simulator”라는 서비스를 기획하게 되었습니다.

Common

Prettier & ESLint: 코드 스타일 통일성과 정적 검사 기능을 통해 협업 시 코드 품질을 높이고, 유지보수를 쉽게 하기 위함입니다. 개발 과정에서 실수를 줄이고, 일관된 코드를 유지하는 데 도움을 주기 때문에 이 두 가지 도구를 필수적으로 도입했습니다.

Frontend

TypeScript: 타입 안전성을 위해 선택했습니다. 런타임 환경에서 발생하는 타입 오류를 발견할 수 있어 예상치 못한 에러를 줄이고 디버깅을 용이하게 하는 데 큰 도움이 됩니다.
Next.js: SEO 최적화와 SSR(Server-Side Rendering)을 통해 검색엔진에 잘 노출되도록 하며, 초기 렌더링 속도를 높일 수 있습니다. 또한, next/image의 이미지 최적화 기능과 페이지 단위의 코드 스플리팅 등 다양한 최적화 옵션을 제공하여, 이러한 기능들을 활용하기 위해 Next.js를 채택했습니다.
Tailwind CSS: 클래스 네이밍의 부담을 덜고 CSS와 HTML 간 컨텍스트 전환을 줄여 개발 생산성 향상에 큰 도움을 줍니다. 또한 반응형 디자인을 손쉽게 처리할 수 있고, 컴포넌트 재사용 측면에서도 유리한 측면이 있어 선택하게 되었습니다.

Backend

Supabase: 간단한 데이터베이스 관리를 위해 Supabase를 선택했습니다. Supabase는 Firebase와 비슷한 기능을 제공하면서도 SQL 기반의 접근이 가능해 데이터의 구조를 관리하는 데 효율적입니다. 현재 발레복의 이름과 이미지, 색상 이름과 이미지 등을 저장하는 데 사용하고있습니다.

Deployment

Vercel: 빠르고 손쉬운 배포를 위해 Vercel을 선택했습니다. Next.js와의 통합이 최적화되어 있어 빌드 및 배포가 매우 간편합니다.

feature

유저 로그인 기능 추가하기
나만의 코디를 저장하는 기능 추가하기
- 로그인 후에 이용할 수 있느 기능으로, 본인이 조합한 디자인을 저장하여 리스트형태로 확인할 수 있습니다.
SEO 개선하여 구글 검색 순위 향상 시키기
이미지 로딩속도, 로딩 화면 개선하기

technical

Yumiko Simulator는 제가 발레복 쇼핑을 하면서 느꼈던 불편함을 해소하기 위해 시작한 사이드 프로젝트입니다. 아직은 완벽하지 않고 보완할 부분도 많지만, 차근차근 개선해나가보려고합니다!

앞으로 기능을 점차적으로 개선해나가며, 프로젝트 발전 과정과 기술적 고민들을 블로그에 차근차근 기록할 예정이에요. 이 과정들을 통해 제가 조금 더 성장할 수 있기를 기대하며, 저의 첫 사이드 프로젝트 소개글을 마칩니다. 😊