본문으로 건너뛰기
WebmateStudio
포트폴리오 목록
[ CONCEPT 05 / E-COMMERCE ]

LOWWAVE COFFEE — 스페셜티 원두 쇼핑몰 · B2B 납품 사이트

개인 고객에게는 원두를 팔고 카페에는 원두를 납품하는 로스터리를 가정한 콘셉트 사이트입니다. 브랜드 홈, 원두 목록, 원두 상세, B2B 납품 4개 화면 디자인을 Next.js로 옮기고, 원두 10종을 하나의 데이터로 묶어 모든 화면이 같은 가격과 정보를 쓰도록 했습니다. 산미·바디·배전도 필터와 정렬, 용량·분쇄도·정기구독 주기에 따라 바뀌는 가격, 새로고침해도 유지되는 장바구니와 무료배송 계산, 세 문항 취향 퀴즈, 커핑 예약, 입력 검사가 있는 납품 신청서까지 실제로 동작합니다.

유형
E-COMMERCE
연도
2026
작업 범위
디자인 시안 구현 · Next.js 프론트엔드 · 쇼핑 기능 · 장바구니 · 폼 검증
CONCEPT

실제 고객사 작업이 아닌 웹메이트 자체 콘셉트 작업입니다. 화면 속 회사명·인물·수치는 가상입니다.

  • E-Commerce
  • Next.js
  • B2B

[ LIVE DEMO ]

실제로 원두를 고르고 장바구니에 담아 볼 수 있습니다.

결제와 신청서 전송은 하지 않는 데모입니다. 장바구니는 이 브라우저에만 저장됩니다.

LOWWAVE COFFEE 홈 전체 화면: 히어로, 로스팅 철학, 이달의 큐레이션, 패키징, 취향 퀴즈와 샘플러 신청, 고객 후기, 로스터리 랩 안내
브랜드 홈 — 1440px 데스크톱
LOWWAVE COFFEE 홈 모바일 전체 화면: 데스크톱과 같은 구성이 한 열로 쌓인 화면
브랜드 홈 — 390px 모바일
LOWWAVE COFFEE 원두 목록 화면: 카테고리·배전도·산미·바디 필터와 원두 카드 목록
원두 목록 — 필터 · 정렬
LOWWAVE COFFEE 원두 상세 화면: 사진 갤러리, 용량·분쇄도·정기구독 선택, 향미 정보, 추출 가이드, 구매 후기
원두 상세 — 옵션별 가격 계산
LOWWAVE COFFEE B2B 납품 화면: 샘플러 키트 소개, 납품 신청서, 파트너 카페 후기, 자주 묻는 질문
B2B 납품 — 샘플 신청서