Bread & Butter
요리 서적 온라인 상점
Bread & Butter는 다양한 국가의 요리 서적과 레시피 북을 제공하는 요리 서적 전문 전자상거래 플랫폼입니다.프로젝트 매니저이자 백엔드 개발자로 참여하여, 상품 조회, 장바구니, 재고 관리 대시보드 등 주요 기능을 설계하고 구현했습니다.UI/UX 디자인을 총괄하며, 전체 화면 구성 및 브랜드 아이덴티티(로고, 컬러 시스템) 설계를 통해 일관된 사용자 경험을 구축했습니다.
TIMELINE
24.02.19 ~ 24.03.02
TEAM
3 Frontend, 3 Backend
ROLE
Backend Developer & Project Manager
CONTRIBUTION
· Design : 100%
· Planning : 100%
· Management : 100%
· Development : 80%
Frontend
HTML5, CSS3, JavaScript, ESLint
Backend
Node.js, Express.js, MongoDB, JWT, Mongoose, PM2
Design Tools
Figma, Adobe Illustrator
각 나라의 요리를 배우고 싶은데, 어떤 책을 선택해야 할지 고민해 본 적이 있으신가요?
각국의 다양한 요리를 배우고 싶은 사람들에게 적절한 책을 찾는 일은 쉽지 않습니다. 서점마다 취급하는 책이 다르고, 온라인에서는 신뢰할 수 있는 리뷰를 찾기가 어렵습니다.이러한 고민에서 Bread & Butter가 시작되었습니다. 세계 각국의 요리책을 한곳에 모아, 사용자가 쉽게 탐색하고 구매할 수 있는 공간을 만들고자 했습니다.
세계 각국의 요리책을 한 곳에서 만날 수 있는 따뜻한 공간을 만들었습니다
Bread & Butter는 세계 요리 책을 한 곳에 모아 쉽게 탐색하고 구매할 수 있는 온라인 서점입니다. 다양한 요리 문화와 레시피를 소개하여, 사용자가 새로운 맛을 발견하고 더 깊이 있는 요리 경험을 할 수 있도록 하였습니다. 편리한 쇼핑을 위해 비회원 주문 조회, 회원 인증, 장바구니, 주문 관리, 실시간 재고 확인 기능을 도입하였으며, 판매자가 서적을 효율적으로 관리할 수 있도록 관리자 대시보드를 구축하였습니다. ✨
홈 & 상품 조회
베스트 상품을 한눈에 확인할 수 있으며, 상품 상세 페이지에서 가격과 정보를 조회할 수 있습니다. 재고 수량에 따라 품절 여부가 표시되며, 원하는 수량을 선택하여 장바구니에 담을 수 있습니다. 또한, 하단에는 추천 상품이 자동으로 로딩되며, 상품 정렬 및 페이지네이션 기능을 지원합니다.
장바구니 & 주문
장바구니에서 상품 옵션을 변경할 수 있으며, 총 주문 금액에 따라 배송비가 자동으로 계산됩니다. 주문이 완료되면 주문 번호가 제공되며, 비회원도 주문 번호를 통해 주문 내역을 조회할 수 있습니다.
로그인 & 마이페이지
JWT Refresh Token을 이용한 안전한 회원 인증 시스템을 적용하였습니다. 로그인한 사용자만 마이페이지에 접근할 수 있으며, 관리자 역할을 가진 경우 관리자 페이지에 접근할 수 있습니다. ✨
주문 관리 (관리자)
관리자는 주문을 취소할 수 있으며, 주문 상태를 변경할 수 있습니다. 주문이 처리됨에 따라 상태가 업데이트되며, 모든 주문 이력을 한눈에 관리할 수 있습니다.
상품 관리 (관리자)
새로운 상품을 추가하고, 기존 상품을 수정 및 삭제할 수 있습니다. 또한, 상품 이미지 업로드 기능을 통해 더욱 직관적인 상품 관리를 지원합니다. 📦
카테고리 관리 (관리자)
관리자는 새로운 카테고리를 추가하거나 기존 카테고리를 수정 및 삭제할 수 있습니다. 이를 통해 상품을 보다 체계적으로 정리하고 탐색할 수 있도록 관리할 수 있습니다.
CRUD 별로 기능을 나눈 뒤, 각 기능에 필요한 요구 사항들과 중요도를 정했습니다. 또한 각 페이지의 권한(전체, 회원, 관리자) 을 부여하고 기능의 중요도를 파악해 우선 순위를 정했습니다.
데이터 모델을 정의할 때, 그룹핑할 수 있는 항목을 세분화하여 구조화된 데이터 모델을 설계했습니다. 이를 통해 데이터 간의 관계를 명확하게 정리하고, 확장성과 유지보수성을 고려한 체계를 마련하였습니다. 또한, 사용자의 행동 패턴을 분석하여 필요한 데이터 항목을 도출하고, API의 입력 및 출력 형식을 사전에 정의하여 백엔드 팀이 원활하게 개발할 수 있도록 지원했습니다. 이를 바탕으로 백엔드 팀원들이 API 명세서를 작성하고, 데이터베이스를 구축할 수 있도록 협업하였습니다.
회원 여부에 따라 분기되는 흐름을 정의하고, 유저의 목적에 따른 페이지 이동과 행동 단계를 구조적으로 설계하여 직관적인 사용자 경험을 제공했습니다.
API 문서화 없이 협업하는 과정에서 어떤 문제를 겪었으며, 어떻게 개선했는가?
프로젝트 초기에는 API 명세를 별도로 문서화하지 않고, MongoDB 모델을 기반으로 직접 프론트엔드와 협업을 진행했습니다. 이 방식은 빠르게 개발을 진행하는 데는 유리했지만, API 응답 형식이 불명확하여 프론트엔드에서 데이터 처리 시 혼선이 발생하는 문제가 있었습니다. 이를 해결하기 위해, MongoDB 모델을 기준으로 API 응답 예시(JSON 형태)를 정리하여 공유하였고, API 엔드포인트별로 필요한 필드와 데이터 타입을 정리한 간단한 Notion 문서를 만들어 프론트엔드와의 소통을 원활하게 했습니다.
또한, 예상치 못한 데이터 누락을 방지하기 위해 기본값을 설정하고, 필수 필드를 체크하는 데이터 검증 로직을 추가하였습니다. 이 과정을 통해, API 문서화가 없을 경우 협업 속도가 느려질 수 있으며, 최소한의 명세라도 정리해 공유하는 것이 개발 효율성을 높이는 데 필수적이라는 점을 깨달았습니다. 향후에는 API 문서화 툴을 도입하거나, 초기 기획 단계에서 응답 형식을 더 명확하게 정리하는 방식을 적용하고 싶습니다.
단기간 내 디자인과 개발을 병행하며 CSR 이슈를 경험한 과정
엘리스 부트캠프에서 진행된 Bread and Butter 프로젝트는 2주라는 짧은 기간 동안 디자인과 개발을 동시에 수행해야 했던 도전적인 프로젝트였습니다. 빠른 기획과 디자인 작업이 필요했고, 효율적인 개발을 위해 디자인 시스템을 최소화하고 컴포넌트 단위로 개발을 진행했습니다.
그러나 CSR(Client-Side Rendering) 방식으로 개발되면서 페이지 전환 시 깜빡임이 발생하는 이슈가 있었습니다. 데이터 로딩이 완료되기 전에 UI가 먼저 렌더링되면서 불필요한 화면 변화가 발생했고, 이는 사용자 경험에 부정적인 영향을 미쳤습니다. 짧은 기간 동안 해당 문제를 완벽히 해결하지는 못했지만, Skeleton UI 적용 등의 방안을 고민하며 개선할 방법을 모색했습니다.
이번 경험을 통해 단기간 내 디자인과 개발을 병행하는 어려움을 체감했고, CSR 방식에서 발생할 수 있는 UI/UX 문제를 사전에 고려하는 것이 중요하다는 점을 배웠습니다.