Repository navigation
FrontEnd‐Design
- [Figma] 디자인 파일
- [Figma] 쇼핑몰 화면 (Shop 페이지)
- [Figma] 관리자 화면 (Admin 페이지)
- [Figma] 컴포넌트 · 디자인 토큰 (Components 페이지)
모든 화면 · 컴포넌트 · 토큰은 Figma MCP로 Figma 파일에 직접 생성했다.
| 데스크톱 홈 | 모바일 홈 |
|---|---|
 |
 |
| 관리자 주문 목록 (데스크톱) | 관리자 주문 선택 모드 (모바일) |
|---|---|
 |
 |
우아하면서 따뜻한, 갓 구운 빵 냄새가 나는 베이커리.
빵 속살 같은 베이지 바탕에 구운 껍질과 초콜릿을 닮은 브라운을 쓰고, 신선한 허브 같은 그린을 포인트로 둔다.
- 배경은 밝고 단순하게 두고, 개성은 상품 사진과 포인트 색 하나로 낸다.
- 장식(손글씨, 종이 질감, 스크롤 연출, 360° 회전 등)은 구현 비용이 커서 쓰지 않는다.
| 레퍼런스 | 가져온 것 |
|---|---|
| Sugar Bliss 베이커리 랜딩 | 쇼핑몰 헤더(장바구니 배지, 주문 버튼), 카테고리 카드(카드별 색 배경 + 배경 없는 오브젝트), 3단 푸터 |
| SLOY 케이크 스튜디오 랜딩 | 상품 카드(테두리 없이 사진 · 세리프 상품명 · 작은 부제 · 가격), 절제된 여백 |
| CAKÉ 초콜릿 케이크 랜딩 | 크림 · 초콜릿 2색 대비, 상품 상세 구성(사진 + 이름 · 설명 · 가격 · 장바구니) |
| shadcn/ui Dashboard · Tasks 예시 | 관리자 화면 틀(사이드바 + 툴바 + 데이터 테이블) |
| KFC 모바일 앱 | 모바일 원형 카테고리 아이콘 탭 |
| 네이버 모바일 앱 (가운데 렌즈 버튼) | 모바일 상품 버튼을 누르면 카테고리가 떠오르는 메뉴 |
| 용도 | 서체 |
|---|---|
| 제목 | Noto Sans KR (굵게 · 자간 좁게) |
| 본문, UI | Noto Sans KR |
| 섹션 라벨 | Noto Sans KR, 영문 대문자, 자간 넓게 (예: OUR BAKERY) |
Pretendard는 Figma에서 쓸 수 없어 Noto Sans KR로 정했다. Google Fonts에 있어 next/font로 디자인과 같은 서체를 쓴다.
처음에는 제목에 한글 세리프(Noto Serif KR)를 썼지만, 세리프 한글은 글자 조각이 커서 제목 몇 글자 때문에 화면마다 폰트 전송량의 65–75%를 차지했다. 성능 개선 때 서체를 하나로 줄였다 (Performance 개선 3).
섹션은 작은 라벨 → 굵은 제목 → 본문 → 버튼 순서를 반복한다.
| 영역 | 화면 |
|---|---|
| 쇼핑몰 (데스크톱 · 모바일) | 홈, 상품 목록, 검색, 검색 결과, 상품 상세, 장바구니, 주문서, 결제창, 주문 완료, 마이페이지, 주문 내역(회원), 주문 상세 |
| 관리자 (데스크톱 10개 · 모바일 12개) | 상품 목록, 상품 수정, 주문 목록, 주문 상세, 상태 변경, 상태 일괄 변경, 주문 접수(모바일), 비밀번호 확인 |
모바일은 데스크톱 구조를 축소하지 않고, 모바일 사용 패턴에 맞게 구조를 바꾼다.
| 데스크톱 | 모바일 |
|---|---|
| 헤더 메뉴 + 검색 · 장바구니 · 마이페이지 · 관리자 버튼 | 로고만 있는 헤더 + 하단 고정 탭 바 (검색 · 장바구니 · 상품 · 마이페이지 · 관리자) |
| 카테고리 카드 4장 (사각 이미지) | 원형 카테고리 아이콘 탭 → 탭하면 아래 상품 목록이 해당 카테고리로 바뀜 |
| 헤더의 카테고리 메뉴 | 가운데 상품 버튼을 누르면 카테고리 버블이 부채꼴로 떠오름 |
| 검색 모달 | 전체 화면 검색 (탭 바의 검색 탭) |
| 결제 다이얼로그 | 하단에서 올라오는 결제 시트 |
| 메인 배너 버튼 2개 | "전체 상품 보기" 버튼 1개 |
- 같은 이미지라도 데스크톱은 사각형으로 온전히 보여주고, 모바일에서만 원형 아이콘으로 보여준다.
- 가로 스크롤 카드 슬라이드처럼 웹에 특화된 구성은 모바일에서 쓰지 않는다.
| 동작 | 사양 |
|---|---|
| 열기 | 상품 버튼 탭 → 버튼이 브라운 ✕로 전환 (180ms) |
| 버블 | 버튼 중심에서 출발해 부채꼴 위치로 이동. scale 0.6 → 1, opacity 0 → 1 |
| 순서 | All → Beverage 순으로 40ms 간격 순차 등장, 각 260ms ease-out (spring) |
| 배경 | 오버레이 opacity 0 → 0.6 (200ms) |
| 닫기 | ✕ 또는 배경 탭 → 역순, 180ms ease-in |
| 이동 | 버블 탭 → 해당 카테고리가 선택된 상품 목록 |
목록 오른쪽 위 「총 12개 · 인기순 ▾」. 누르면 최신순 → 인기순 순서로 열리고, 선택된 항목은 배경색 + 굵은 글씨 + 체크로 표시한다. 모바일에서는 「인기순 ▾」를 오른쪽 끝에 두고 같은 방식으로 연다. 기본은 인기순이다. (Figma: Product List (Sort Open), Mobile / Product List (Sort Open))
데스크톱은 모든 화면에 푸터가 있다. 모바일은 하단 탭 바가 항상 있어 푸터까지 두면 화면이 답답하고 탭 바와 겹쳐 보이므로, 홈에서만 푸터를 보여 준다. 다른 화면은 탭 바 높이만큼 아래 여백을 두어 마지막 내용이 가려지지 않게 한다. 헤더는 모든 화면에 둔다.
Pine Bakery 로고(소나무 + 글자 + 빵)와 파비콘을 적용했다. 헤더(데스크톱 높이 56 · 모바일 40)와 푸터에 쓰고, Figma Components > Brand 보드에 원본을 둔다. 로고가 짙은 그린 투명 PNG라 어두운 브라운 푸터에서는 잘 보이지 않는다. 푸터용 밝은 로고는 마무리 단계의 디자인 디테일 정리에서 정한다.
shadcn/ui 기본 구성(사이드바 + 툴바 + 데이터 테이블)에 프로젝트 색 토큰만 입혔다. 조회는 누구나 가능하고, 저장 · 삭제 · 상태 변경은 모두 비밀번호 확인 후 실행한다.
| 데스크톱 | 모바일 |
|---|---|
| 사이드바 (상품 · 주문) | 로고만 있는 헤더 + 하단 고정 탭 바 (상품 · 주문 · 접수 · 쇼핑몰) |
| 상품 테이블 (사각 썸네일) | 원형 썸네일 목록 + 원형 카테고리 탭, 상품 추가는 떠 있는 버튼 |
| 행 끝 … 메뉴 | 하단 액션 시트 |
| 상품 수정 Dialog | 전체 화면 + 하단 고정 저장 버튼 |
| 주문 테이블 + 상태 칩 | 주문 카드 + 밑줄 상태 탭 |
| 상태 메뉴 · 비밀번호 Dialog | 하단 시트 |
주문 상태는 주문 접수 → 배송 준비중 → 배송중 → 배송 완료 순서로 진행하고, 주문 취소는 이 흐름 밖에 둔다.
| 상태 | 배지 색 |
|---|---|
| 주문 접수 | honey-200 배경 |
| 배송 준비중 | primary-200 배경 (배지 토큰) |
| 배송중 | mauve-200 배경 |
| 배송 완료 | brown-200 배경 |
| 주문 취소 | 배경 없이 brown-400 테두리 |
- 1건 변경: 주문 행의 상태 배지 ▾ → 상태 메뉴(모바일은 시트) → 비밀번호 확인. 주문 상세에는 다음 단계로 바로 바꾸는 버튼을 둔다.
- 일괄 변경: 판매자가 여러 주문을 한꺼번에 준비하는 일이 잦아서 만들었다. 일괄로 바꿀 수 있는 것은 상태뿐이다.
데스크톱: 체크박스로 주문 선택 → 하단 일괄 작업 바 → 상태 선택 → 비밀번호 확인
모바일: 제목 줄의 '선택' → 카드 체크 → 하단 일괄 바 → 상태 시트 → 비밀번호 시트
- 모바일의 접수 탭은 주문 접수 상태만 걸러 보여 주는 바로가기다. 새 주문을 빠르게 준비하도록 건수 배지를 붙였고, 안에서도 같은 선택 · 일괄 변경을 쓴다.
- 선택한 주문의 현재 상태가 달라도 고른 상태 하나로 맞춘다.
- 이름 · 연락처 · 주소는 관리자 화면에서도 마스킹해서 보여준다. (홍*동, 010-****-0000)
- 주문 상세는 주문자 정보와 받는 분 정보를 나눠 보여 준다.
- 상태 이력은 저장할 테이블이 스키마에 없어서 화면에서 뺐다.
- 상품 수정 폼은 스키마의 모든 편집 필드(이름 · 영문 이름 · 카테고리 · 가격 · 설명 · 원재료 · 알레르기 · 보관 방법 · 추천 여부)를 담는다. 이미지는 업로드 없이 고정 이미지 중 선택한다.
검색 (데스크톱: 헤더 아이콘 → 모달 / 모바일: 탭 바 → 전체 화면)
└─ 검색어 입력 → 상품 목록에 검색어 칩과 함께 필터링된 결과 표시
로그인은 카카오 로그인만 추후 도입한다. 지금은 비활성 로그인 버튼만 두고, 비회원은 주문번호로 주문 1건을 조회한다.
비회원: 마이페이지 → 주문번호 + 주문자 연락처 → 주문 상세 (해당 주문 1건)
회원 (카카오 로그인, 추후): 마이페이지 → 주문 내역 → 주문 상세
- 마이페이지는 카드 하나에 로그인(카카오 로그인 비활성 버튼) → 구분선 → 비회원 주문조회를 둔다.
- 주문 상세의 배송 정보는 마스킹해서 보여준다. (홍*동, 010-****-0000)
상품 상세 → 장바구니 → 주문서 (데모 안내: 실제 개인정보 입력 금지) → 결제창 (실제 결제 없음) → 주문 완료
구현된 화면을 실제 브라우저로 보며 다듬은 내용이다. 모두 Figma에도 반영했다.
| 화면 | 바뀐 점 | 이유 |
|---|---|---|
| 푸터 | 높이 축소, 구분선 삭제, 데모 안내 문구를 로고 아래로, 로고는 베이지 테두리 버전 | 화면 끝이 무겁고, 어두운 배경에서 짙은 그린 로고가 보이지 않음 |
| 상품 목록 상단 | "SHOP" 라벨 삭제, 높이 축소(데스크톱 244 → 168), 글자 위아래 여백을 실제 글자 기준으로 같게 | 의미 없는 라벨, 영역이 지나치게 넓음 |
| 메인 배너 | 글자 쪽에만 brown-900 그라데이션 | 밝은 창가 · 그릇 위에서 흰 글자 대비가 1.2:1까지 떨어짐 → 본문 4.6:1 이상으로 |
| 마이페이지 | 카카오 로그인(비활성) → 임시 로그인 | 회원 주문 내역 화면을 보여 주기 위한 데모 로그인 |
| 주문 내역 | 상태 필터 칩(건수), 상태별 배지 색 | 관리자와 같은 상태 색으로 통일 |
| 로그인 후 마이페이지 아이콘 | 드롭 메뉴(데모 회원 · 주문 내역 · 로그아웃). 모바일은 하단 탭 위로 열림 | 로그아웃 경로 제공 |
| 주문서 | "배송 요청사항 (선택)" 표시, 뒤로 가기 시 나갈지 확인 | 필수 · 선택 구분, 입력 손실 방지 |
| 헤더 | 보고 있는 카테고리를 그린 · 굵게 표시 | 현재 위치 표시 (UX 공통 원칙) |
| 관리자 | 텍스트 로고 → 이미지 로고 + ADMIN 배지 | 쇼핑몰과 브랜드 통일 |
이 밖에 UX 공통 원칙 점검으로 커서(클릭 요소 pointer · 글자 default · 비활성 not-allowed), 모바일 터치 영역 44px, 버블 메뉴 ESC 닫기, 동작 줄이기 설정 대응을 넣었다.
상품 · 배너 · 카테고리 이미지 20장은 Figma MCP의 이미지 생성으로 만들었다.
- 상품 사진은 같은 프롬프트 틀(아침 햇살, 리넨 위 나무 도마, 45도, 얕은 심도, 크림 · 브라운 톤)로 톤을 통일했다.
- 카테고리 이미지는 접시 · 그림자 · 테두리 없는 배경 투명 PNG를 쓴다.
생성 방법과 배경 제거 과정은 Figma MCP 문서에 정리했다.