Project Detail
( 05 )
SABI SHOP - WABI SABI Minimal Coffee Store
SABI SHOP은 일본 미학 ‘와비사비(侘び寂び)’에서 영감을 받은 미니멀 커피 스토어입니다. ‘화려함보다 여백을, 꾸밈보다 온기를’이라는 컨셉으로 절제된 디자인과 직관적인 사용자 경험(UX)을 추구하였으며, Next.js의 SSR과 SSG을 활용해 SEO 성능을 강화했습니다. Tailwind CSS를 통해 빠른 스타일링과 일관된 디자인 시스템을 구축하였고, Redux Toolkit으로 전역 상태를 체계적으로 관리했습니다. 또한, Firebase Auth와 Firestore로 로그인 및 주문 데이터를 처리하고, Vercel을 통해 자동 배포 파이프라인을 구축했습니다. 다국어(i18n) 지원을 구현하여 한국어·일본어 간 언어 전환이 가능한 구조를 설계했습니다.
이 프로젝트의 주요 기능, 구조, 스크린샷 등은 GitHub를 통해 확인하실 수 있으며 프로젝트 링크에서 실제 서비스를 체험해보실 수 있습니다.
본 페이지에서는 개발 배경과 문제 해결 과정, 배운 점을 중심으로 정리하였습니다.
Motive
기존 프로젝트에서는 React SPA와 Context API를 기반으로 구현했지만, 렌더링 효율성과 상태 관리의 복잡도, SEO 대응력에 한계를 느꼈습니다. 이에 Next.js를 도입하여 CSR뿐 아니라 SSR·SSG 구조를 직접 경험하고, 실제 서비스 배포 시 SEO와 초기 로딩 속도 개선 효과를 검증하고자 했습니다. 또한 CSS(BEM 네이밍) 기반의 정적 스타일링에서 벗어나 Tailwind CSS로 전환하며, 빠르고 일관된 스타일 관리와 반응형 설계를 동시에 실현했습니다.
Problem Solving
React Context API 대신 Redux Toolkit을 도입하여, 장바구니처럼 여러 페이지에서 공통으로 사용되는 전역 상태를 slice 단위로 구조화하고 localStorage와 동기화해 데이터의 지속성을 확보했습니다. Firebase Auth를 통해 사용자 인증을 간소화하고 Firestore로 주문 데이터를 관리했으며, Vercel CI/CD 파이프라인을 구성해 push만으로 자동 배포가 이뤄지도록 설정했습니다. 또한 Next.js의 동적 라우팅(app router)을 통해 제품 상세 페이지와 주문 내역을 효율적으로 렌더링하고, i18n 다국어 JSON 구조를 locale별로 분리하여 유지보수를 단순화했습니다. TypeScript를 적용해 컴파일 단계에서 오류를 사전에 감지하고, props·state의 타입 일관성을 확보함으로써 안정적인 코드 품질을 유지했습니다.
Learned
Next.js로의 전환을 통해 React SPA와는 다른 렌더링 방식(SSR, SSG, ISR)을 직접 이해하고, 서비스 구조 설계 시 클라이언트·서버 간 역할 분리를 명확히 할 수 있었습니다. Tailwind CSS를 도입하면서 전역 디자인 시스템 관리의 효율성과 생산성을 체감했고, TypeScript로 마이그레이션하며 코드 안전성과 유지보수성을 크게 높였습니다. 또한 Redux Toolkit의 slice 구조를 통해 상태 관리 로직이 단순하고 예측 가능하게 변했으며, Vercel 배포 자동화 덕분에 개발–배포–피드백 사이클이 훨씬 빨라졌습니다. 결과적으로 SABI SHOP은 기술적 실험과 학습을 모두 겸한 ‘다음 단계로의 성장 프로젝트’로, 프론트엔드 개발자로서 새로운 기술 스택을 실무 수준으로 소화한 경험이 되었습니다.