프로젝트 배경
1) 문제점
- 기존 식품 쇼핑몰은 제품의 성분, 건강 정보에 대한 신뢰성과 접근성이 부족함.
- 건강을 고려한 소비를 원하는 고객층을 만족시킬 수 있는 UX 설계가 부재함.
2) 프로젝트 목표
- 무첨가물 및 건강한 원료 기반 제품을 선별한 라이프케어 전문 쇼핑몰 구축.
- 장바구니 내 상품들의 영양성분을 자동 계산하여 건강 중심의 소비 경험 제공.
3) 주안점
- 제품별 영양성분 정보 시각화 및 누적 데이터 제공 기능 구현.
- 깔끔하고 신뢰감 있는 UI와 반응형 웹 설계를 통한 접근성 강화.
- 기존 식품 쇼핑몰은 제품의 성분, 건강 정보에 대한 신뢰성과 접근성이 부족함.
- 건강을 고려한 소비를 원하는 고객층을 만족시킬 수 있는 UX 설계가 부재함.
2) 프로젝트 목표
- 무첨가물 및 건강한 원료 기반 제품을 선별한 라이프케어 전문 쇼핑몰 구축.
- 장바구니 내 상품들의 영양성분을 자동 계산하여 건강 중심의 소비 경험 제공.
3) 주안점
- 제품별 영양성분 정보 시각화 및 누적 데이터 제공 기능 구현.
- 깔끔하고 신뢰감 있는 UI와 반응형 웹 설계를 통한 접근성 강화.
프로젝트 성과
건강 정보 기반 차별화된 쇼핑 경험 제공
- 영양성분 자동 계산 기능으로 사용자에게 맞춤형 건강 정보를 제공함.
사용자 친화적인 장바구니 시스템 구축
- 장바구니 내 모든 상품의 영양성분을 한눈에 확인할 수 있는 기능 완성.
반응형 웹 이용 가능
- 모바일, 태블릿, 데스크톱 등 다양한 기기에서 최적화된 쇼핑 환경 제공.
직관적이고 신뢰감 있는 UI 디자인 완성
- 고객이 신뢰하고 쉽게 사용할 수 있도록 깔끔하고 명료한 디자인 적용.
원활한 재고 및 상품 관리 시스템 구축
- 관리자 페이지를 통해 상품 정보, 재고, 주문 내역을 효율적으로 관리 가능.
핵심 기능
영양성분 자동 계산 기능
- 장바구니에 담긴 상품들의 영양성분을 자동으로 합산해 사용자에게 제공.
무첨가물 및 건강 제품 카테고리 분류
- 신뢰할 수 있는 건강 제품만 선별해 카테고리별로 쉽게 탐색 가능.
반응형 웹 디자인
- 모바일, 태블릿, 데스크톱 등 다양한 디바이스에 최적화된 UI 제공.
맞춤형 상품 추천 시스템
- 사용자 구매 이력과 선호도에 기반한 개인화 추천 기능.
관리자 상품 및 주문 관리 페이지
- 상품 정보, 재고, 주문 내역을 효율적으로 관리할 수 있는 백오피스 제공.
진행 단계
요구사항 분석 및 기획
2024.09.
- 고객 니즈 및 시장 조사, 무첨가물·건강식품 트렌드 분석을 통한 서비스 기획 수립.
UI/UX 디자인 및 프로토타입 제작
2024.09.
- 사용자 편의성 극대화를 위한 직관적 인터페이스 설계 및 프로토타입 검증.
프론트엔드 및 백엔드 개발
2024.10.
- React, Next.js, Tailwind CSS를 활용한 반응형 쇼핑몰 웹사이트 개발.
영양성분 자동 계산 및 장바구니 기능 구현
2024.10.
- 제품별 영양정보 데이터베이스 구축 및 실시간 누적 계산 기능 적용.
테스트 및 최적화, 배포
2024.10.
- 크로스 디바이스 테스트, 성능 최적화 후 서비스 런칭 및 운영 지원.
프로젝트 상세
1) 포트폴리오 소개
무첨가 식품과 프리미엄 차를 중심으로 한 라이프케어 F&B 커머스 개발
글로벌 TOP 500 F&B 플랫폼을 지향하는 ‘오베크’ 브랜드의 건강한 식품 전문 쇼핑몰 구축
• 주 타깃 : 건강한 식생활에 관심이 높은 2030 여성층
2) 작업 범위
• 전체 UI/UX 설계 및 브랜딩 반영
• Next.js + React 기반 프론트엔드 개발
• Tailwind CSS를 활용한 반응형 웹 구현
• 관리자 페이지 설계 및 API 연동
• 배포, SEO 최적화, 메타 구성 등 런칭 전반 담당
3) 주요 업무
• 카테고리 및 상세 페이지, 장바구니, 결제 기능 개발
• 영양 성분 필터 기능 및 상품별 상세 영양 정보 표시
• 장바구니 내 등록된 상품들의 총 영양 성분 자동 계산 기능 구현
• 관리자 페이지: 상품/재고/영양성분 등록 및 관리 시스템 개발
• 메인 이벤트 배너 및 테마별 추천 영역 구성
4) 주안점
• 다른 쇼핑몰과 차별화되는 ‘영양 성분 기반 쇼핑 경험’ 구현
• 직관적이고 신뢰감 있는 UI/UX 구성
• 건강한 이미지와 정제된 브랜드 감성을 동시에 표현
• 모바일 중심의 최적화된 퍼포먼스 및 반응형 설계
• 복잡한 영양 정보도 쉽게 파악할 수 있도록 사용자 흐름 설계
무첨가 식품과 프리미엄 차를 중심으로 한 라이프케어 F&B 커머스 개발
글로벌 TOP 500 F&B 플랫폼을 지향하는 ‘오베크’ 브랜드의 건강한 식품 전문 쇼핑몰 구축
• 주 타깃 : 건강한 식생활에 관심이 높은 2030 여성층
2) 작업 범위
• 전체 UI/UX 설계 및 브랜딩 반영
• Next.js + React 기반 프론트엔드 개발
• Tailwind CSS를 활용한 반응형 웹 구현
• 관리자 페이지 설계 및 API 연동
• 배포, SEO 최적화, 메타 구성 등 런칭 전반 담당
3) 주요 업무
• 카테고리 및 상세 페이지, 장바구니, 결제 기능 개발
• 영양 성분 필터 기능 및 상품별 상세 영양 정보 표시
• 장바구니 내 등록된 상품들의 총 영양 성분 자동 계산 기능 구현
• 관리자 페이지: 상품/재고/영양성분 등록 및 관리 시스템 개발
• 메인 이벤트 배너 및 테마별 추천 영역 구성
4) 주안점
• 다른 쇼핑몰과 차별화되는 ‘영양 성분 기반 쇼핑 경험’ 구현
• 직관적이고 신뢰감 있는 UI/UX 구성
• 건강한 이미지와 정제된 브랜드 감성을 동시에 표현
• 모바일 중심의 최적화된 퍼포먼스 및 반응형 설계
• 복잡한 영양 정보도 쉽게 파악할 수 있도록 사용자 흐름 설계






