LIMIT3 DESIGN REFERENCE
design.md
# LIMIT3 Commerce Redesign
## 1. Direction
LIMIT3는 모자/패션 잡화 중심의 온라인 스토어로 재구성한다. 참고 사이트 NEWTAPE처럼 이미지가 먼저 시선을 잡고, 상품명/가격/할인가/간단한 핏 설명이 바로 읽히는 담백한 커머스 톤을 따른다.
핵심 인상은 다음과 같다.
- 불필요한 장식보다 제품 이미지와 착용 무드가 중심인 화면
- 상단에서 로그인, 장바구니, 혜택, 카테고리 접근이 빠른 구조
- 상품 카드에는 이름, 한 줄 설명, 정가, 판매가를 명확히 노출
- 리뷰는 실제 사용자의 착용감, 사이즈, 배송 경험이 보이는 신뢰 섹션으로 구성
- 푸터는 한국 쇼핑몰 운영에 필요한 법적/고객 안내 정보를 한 번에 확인할 수 있게 정리
참고: https://newtape.co.kr/
## 2. Page Structure
### A. Top Banner / Header
첫 영역은 쇼핑몰의 기본 기능을 작고 선명하게 제공한다.
구성:
- 프로모션 바: "회원가입 시 2,000원 할인 쿠폰" 또는 현재 진행 중인 혜택
- 메인 헤더:
- 좌측: LIMIT3 로고
- 중앙: 카테고리 내비게이션
- BEST
- NEW
- BALL CAP
- BUCKET HAT
- BEANIE
- ACC
- 우측:
- 로그인
- 주문조회
- 장바구니
- 검색 아이콘
동작:
- 장바구니는 상품 수량을 함께 표시한다. 예: `장바구니 0`
- 모바일에서는 로고, 메뉴 버튼, 장바구니만 우선 노출하고 나머지는 드로어 메뉴로 이동한다.
- 프로모션 바는 한 줄 고정형으로 두되, 너무 강한 색보다 검정/화이트 대비를 사용한다.
### B. Mood Shot
상단 헤더 아래에는 브랜드 무드를 보여주는 큰 이미지 영역을 둔다.
구성:
- 전체 폭 무드샷 1장 또는 2장 슬라이드
- 카피:
- 메인: "핏으로 완성하는 데일리 캡"
- 서브: "여유로운 깊이감, 편한 착용감, 매일 손이 가는 실루엣"
- CTA:
- "신상품 보기"
- "베스트 보기"
비주얼:
- `assets`의 기존 제품 이미지와 로고를 재활용한다.
- 제품을 크게 보여주는 정물 이미지, 착용 컷, 소재 디테일 이미지를 우선 사용한다.
- 배경은 밝은 회색, 화이트, 차콜, 딥그린 포인트를 조합해 단정한 스포츠/스트릿 무드로 잡는다.
### C. New Arrivals
무드샷 다음에는 신상품 섹션을 배치한다. 사용자가 바로 구매 후보를 볼 수 있어야 하므로 카드형 상품 그리드를 사용한다.
섹션 제목:
- `NEW ARRIVALS`
- 보조 문구: "새롭게 입고된 LIMIT3의 최신 핏"
상품 카드 구성:
- 상품 이미지
- 상품명
- 한 줄 설명
- 정가
- 판매가
- 컬러/옵션 스와치
- 장바구니 담기 버튼
예시 상품:
- 시그니처 대두핏 볼캡 (블랙)
- 설명: 깊이감이 좋은 데일리 볼캡
- 정가: 49,000원
- 판매가: 38,000원
- 소프트 코튼 볼캡 (베이지)
- 설명: 가볍게 쓰기 좋은 미니멀 캡
- 정가: 45,000원
- 판매가: 34,000원
레이아웃:
- 데스크톱: 4열 그리드
- 태블릿: 3열
- 모바일: 2열
- 상품 이미지는 동일 비율로 맞추고, 카드 높이가 흔들리지 않도록 가격/버튼 영역을 고정한다.
### D. Real User Reviews
신상품 아래에는 실제 사용자 리뷰 섹션을 둔다. 판매 전환을 위한 사회적 증거 역할을 하므로 상품 이미지보다 착용감/만족도 텍스트가 잘 읽히게 만든다.
섹션 제목:
- `REAL REVIEWS`
- 보조 문구: "직접 착용한 고객들이 남긴 핏과 사이즈 후기"
리뷰 카드 구성:
- 별점
- 작성자 마스킹 이름: `김**`, `박**`
- 구매 상품명
- 키워드 태그:
- `깊이감 좋아요`
- `얼굴 작아 보여요`
- `배송 빨라요`
- `가벼워요`
- 리뷰 본문
- 착용/상품 사진 썸네일
예시 리뷰:
- "머리가 큰 편이라 모자 고르기 어려웠는데 깊이가 넉넉해서 편합니다. 정면 핏도 깔끔해요."
- "베이지 색감이 너무 노랗지 않아서 여기저기 잘 어울립니다. 배송도 빨랐어요."
- "러닝할 때 쓰려고 샀는데 가볍고 오래 써도 답답하지 않습니다."
레이아웃:
- 데스크톱: 가로 스크롤 또는 3열 카드
- 모바일: 1열 카드 슬라이드
- 리뷰 사진은 정사각형 썸네일로 통일한다.
### E. Footer
푸터는 한국에서 온라인 쇼핑몰을 운영할 때 필요한 정보를 명확히 정리한다. 내용은 실제 사업자 정보 확정 전까지 플레이스홀더로 관리한다.
푸터 구성:
- 고객센터
- 운영시간: 평일 10:00 - 18:00
- 점심시간: 12:30 - 13:30
- 휴무: 토/일/공휴일
- 문의: 이메일 또는 카카오 채널
- 이용안내
- 이용약관
- 개인정보처리방침
- 배송/교환/반품 안내
- 상품정보고시
- 사업자정보
- 상호명: LIMIT3
- 대표자명: 입력 필요
- 사업자등록번호: 입력 필요
- 통신판매업신고번호: 입력 필요
- 사업장 주소: 입력 필요
- 개인정보보호책임자: 입력 필요
- 이메일: 입력 필요
- 고객센터 번호: 입력 필요
- 배송/교환/반품 안내 요약
- 배송비: 기본 배송비 및 무료배송 기준 입력
- 배송기간: 결제 후 평균 1-3 영업일
- 교환/반품: 상품 수령 후 7일 이내 접수
- 단순 변심 반품 배송비: 입력 필요
- 사용 흔적, 택 제거, 세탁, 훼손 상품은 교환/반품 제한
- 상품정보고시
- 품명 및 모델명
- 소재
- 색상
- 치수
- 제조자/수입자
- 제조국
- 취급 시 주의사항
- 품질보증기준
- A/S 책임자 및 연락처
## 3. Visual System
### Color
- Base: `#FFFFFF`
- Text: `#111111`
- Muted Text: `#666666`
- Line: `#E8E8E8`
- Surface: `#F6F6F3`
- Accent Green: `#204A3A`
- Sale Red: `#C73A31`
- Charcoal: `#242424`
색은 화이트/블랙 중심으로 운영하고, 딥그린과 레드는 필요한 상태나 가격 강조에만 사용한다.
### Typography
- 영문 섹션 타이틀은 굵고 간결하게 사용한다.
- 한글 본문은 가독성을 우선한다.
- 추천 폰트:
- Pretendard
- Inter
- system-ui fallback
타입 스케일:
- Header logo: 24-32px
- Hero title: 40-64px
- Section title: 28-40px
- Product name: 15-17px
- Body: 14-16px
- Meta/footer: 12-13px
### Spacing
- 데스크톱 최대 콘텐츠 폭: 1280px
- 섹션 상하 여백: 72-96px
- 모바일 섹션 상하 여백: 48-64px
- 카드 간격: 16-24px
## 4. Component Notes
### Product Card
- 이미지는 1:1 또는 4:5 비율로 통일한다.
- 할인가가 있을 경우 정가는 취소선, 판매가는 굵게 표시한다.
- 장바구니 버튼은 호버 시 검정 배경/흰색 텍스트로 전환한다.
- 컬러칩은 실제 상품 색에 가까운 작은 원형 스와치로 제공한다.
### Review Card
- 별점은 텍스트보다 아이콘 또는 `★★★★★` 형태로 빠르게 인지되게 한다.
- 리뷰 본문은 2-4줄까지만 노출하고 상세보기로 확장 가능하게 한다.
- 구매 상품명은 카드 하단에 작게 배치한다.
### Footer Legal Links
- 법적 문서는 별도 페이지 또는 모달로 연결한다.
- 개인정보처리방침은 푸터에서 시각적으로 가장 잘 보이는 링크 중 하나로 둔다.
- 사업자정보 확인 링크는 통신판매업 신고번호 옆에 배치한다.
## 5. Responsive Rules
- 1024px 이상: 풀 내비게이션, 4열 상품 그리드, 3열 리뷰
- 768-1023px: 압축 내비게이션, 3열 상품, 2열 리뷰
- 767px 이하: 모바일 헤더, 2열 상품, 1열 리뷰, 푸터 아코디언
모바일에서 상품명과 가격이 버튼을 밀어내지 않도록 카드 내부 하단 영역을 고정한다.
## 6. Content Checklist
구현 전에 필요한 실제 정보:
- 브랜드 로고 최종 파일
- 대표 무드샷 이미지
- 상품별 이미지, 상품명, 가격, 할인 여부
- 실제 리뷰 데이터 또는 초기 더미 리뷰
- 사업자등록번호
- 통신판매업신고번호
- 대표자명/주소/고객센터/이메일
- 이용약관 전문
- 개인정보처리방침 전문
- 배송/교환/반품 정책
- 상품정보고시 항목별 값
## 7. Implementation Priority
1. `assets`의 로고와 제품 이미지를 기준으로 첫 화면 구성
2. 상단 배너/헤더와 모바일 메뉴 구현
3. 무드샷 영역 구현
4. 신상품 상품 그리드 구현
5. 실제 사용자 리뷰 카드 구현
6. 한국 서비스용 푸터 및 법적 링크 구조 구현
7. 반응형 점검 및 이미지 비율 정리