BALLOP DESIGN SYSTEM
밸롭 디자인 시스템
Gallop lightly · 블랙 메인 + 블루 #1B55E5 포인트 · Pretendard · SOCAR FRAME 구조 반영
디자인 원칙
경량·미니멀·스포티. 넓은 여백, 절제된 포인트 컬러, 제품 중심.
01
Light & Minimal
흑백 베이스, 충분한 여백.02
Product First
사진과 정보가 주인공.03
Consistent & Accessible
시맨틱 토큰·대비·터치영역 준수.
로고
공식 BALLOP 로고 — 윙(swoosh) 심볼 + 워드마크. 단색(블랙/화이트)으로만 사용하고 임의 색상화·블루 적용을 금지합니다(블루는 포인트 컬러이지 로고 색이 아님).
기본 로고 (심볼 + 워드마크)
밝은 배경 = 블랙 · 어두운 배경/사진 위 = 화이트.
심볼 단독
사용 규칙
- 단색만 사용 — 블랙 또는 화이트. 색상화·그라데이션 금지.
- 최소 여백(로고 높이의 약 0.5배 이상)을 확보.
- 비율 고정 — 기울이기·늘이기·그림자·테두리 금지.
- 상세페이지 사진 위에는 우상단 화이트 워드마크가 기본.
컬러 · 시맨틱 토큰
SOCAR식 역할 기반 시맨틱 네이밍. 라이트/다크가 같은 토큰명을 공유 → 다크모드 자동 대응. ★=검증값.
Brand · Point · Sale
Foreground (텍스트)
Surface · Line · Semantic
Dark Mode (쿨그레이 기반)
순흑(#000) 대신 쿨그레이(bg #17181A / surface #202225 / line #303236)를 써 브랜드 톤을 유지. 우측 상단 버튼으로 토글해 보세요.
타이포그래피
기본 글꼴 Pretendard · 4·8 기반 스케일.
Display · 32 / 800Gallop lightly
H1 · 28 / 700밸롭 아쿠아슈즈
H2 · 24 / 700제품 상세 정보
H3 · 20 / 600초경량 인젝션 솔
Title · 18 / 600빠른 배수 드레인 홀
Body · 16 / 400맨발에 가까운 착화감으로 자연스러운 움직임을 돕습니다.
Subtext · 14 / 400평일 14시 이전 주문 시 익일 출고됩니다.
Caption · 12 / 400KC 인증 · 제조연도 2026
간격
4·8px 스케일에서만 선택.
sp-1 · 4
sp-2 · 8
sp-3 · 12
sp-4 · 16
sp-6 · 24
sp-8 · 32
sp-12 · 48
그리드 & 레이아웃
데스크탑 12컬럼 · 모바일 4컬럼, gutter 8~16. 상세페이지 콘텐츠 폭 1000px.
반경 · 그림자 · 투명도
Radius
sm · 8
md · 12
lg · 16
full
Elevation
shadow-1
shadow-2
shadow-3
none
Opacity
10060
38 (disabled)12 (overlay)
아이콘
선(line) 스타일 일관 · 24px 그리드 · 터치 타깃 ≥44px. (현 데모는 이모지 자리표시, 실제는 SVG 세트로 교체)
모션
기본 전환 0.15s(상태) / 0.2s(테마·시트). easing: ease / cubic-bezier(.2,.8,.2,1). 과한 모션 지양.
접근성 & 플랫폼 원칙 — Apple HIG
Apple HIG의 4원칙과 접근성 스펙을 밸롭 톤(미니멀·콘텐츠 중심)에 적용. 이 페이지 자체도 :focus-visible·prefers-reduced-motion을 반영합니다.
4가지 디자인 원칙
CLARITY
명료성
모든 크기에서 읽히는 텍스트, 최소한의 장식.DEFERENCE
겸양
UI는 물러나고 제품·콘텐츠가 주인공.DEPTH
깊이
레이어·모션으로 위계와 관계 전달.CONSISTENCY
일관성
익숙한 패턴·시스템 컴포넌트 유지.
접근성 체크리스트 (적용 기준)
44터치 타깃 ≥ 44×44인접 요소 간 충분한 간격. 버튼 높이 48 기본.
AA색 대비 4.5:1 / 큰글씨·UI 3:1본문 #191919 on #FFF = 약 16:1 ✓
◑색에만 의존 금지상태=색+아이콘/문구 병행(에러는 색+메시지).
A↕Dynamic Type / 텍스트 확대상대 단위·reflow 허용, 본문 ≥11pt.
⊙포커스 가시화:focus-visible 아웃라인(이 페이지 Tab 이동 시 확인).
≈Reduce Motion 존중prefers-reduced-motion 시 전환·애니메이션 최소화.
44pt 터치 타깃
44×44
작은 아이콘이라도 탭 영역은 최소 44px 확보 (시각 크기 ≠ 터치 영역).
체크박스 · 라디오 · 스위치 · 셀렉트
✓ 약관 동의
✓ 선택 약관
옵션 A
옵션 B
Select
칩 · 뱃지 · 태그
Chip
Badge
38% SALEBESTKIDS무료배송NEW
Tag
#러닝화#경량#아쿠아슈즈
툴팁 · 스낵바 · 배너
사이즈는 정사이즈 권장
Snackbar / Toast
장바구니에 담았어요.
Banner
🎁 카본 키즈 라인 첫 구매 시 10% 추가 할인
다이얼로그 · 바텀시트
주문을 취소할까요?
취소 후에는 되돌릴 수 없어요.
탭 · 세그먼트 · 앱바 · 하단내비
Segmented Control
Top App Bar
←글라이드♡🛒
Bottom Navigation
리스트 · 카드 · 디바이더
B글라이드러닝화 · 272g›
B구름 브리즈 퀵온워킹화›
B티바트 나이트워커워킹화›
PRODUCT
BALLOP
인젝션 아쿠아슈즈
38%29,800원
↑ 상품 카드 + 디바이더
상세페이지 제작 가이드
레퍼런스 PSD(글라이드·구름 브리즈 퀵온·티바트)를 레이어 단위로 실측해 정리. 기본 작업 기준: 폭 1000px 캔버스 · 2x 고해상 이미지 export · 세로 단일 컬럼 · 모노톤 UI.
1 · 레이아웃 & 여백 — 1000px 캔버스 기준
본문은 좌정렬 기본, 섹션 타이틀은 중앙정렬. 좌우 여백 대칭. 모바일은 비율(%)로 유지 — 좌우 9% / 6% / 16%.
2 · 타이포그래피 — 실제 크기로 보기
레퍼런스에서 측정한 크기를 그대로 렌더링했습니다(너무 크면 가로 스크롤). 전부 Pretendard.
마케팅 섹션 (intro · detail)
제품명(히어로) · 100px · ExtraBold
글라이드
기능·제품명 · 75px · Bold
QUICK-ON™
섹션 헤드라인 · 65px · Bold
Design detail
강조 헤드라인 · 55px · Bold
SKIP은 누구에게나 필요하니까
강조 서브 · 45px · Bold
나만의 템포 완성
본문 카피 · 40px · Medium
손대지 않고 착화 가능한 QUICK-ON 기능
작은 본문 · 32px · Regular
구름 시리즈의 업그레이드 버전 워킹화
정보 섹션 (사양 · 사이즈 · 세탁)
섹션 타이틀 · 80px · Bold
SIZE INFO
소제목 · 38px · Bold
나한테 맞는 신발 사이즈
본문 · 28px · Regular
평일 14시 이전 주문 시 익일 출고됩니다.
캡션·주의문 · 22px · Regular
*해당 상세페이지는 AI로 생성된 연출 이미지를 활용했습니다.
영문 장식 숫자/라벨에만 간헐적으로 engraved serif가 쓰였으나(GUREUM BREEZE 등) 비중이 작아 신규 작업엔 Pretendard 통일을 권장.
3 · 상세페이지 구성 순서 — 레퍼런스 공통 흐름
1
인트로 히어로
풀블리드 제품컷 위에 카피 오버레이. 우상단에 BALLOP 워드마크, 좌하단에 리드문 → 볼드 한 줄 → 초대형 제품명. 사진 위 글자는 흰색+드롭섀도.
예시 — 오버레이 카피
매일 달리고 싶은
나만의 템포 완성
글라이드
2
Product info
게이지 pill 3종(사이즈 · 발볼넓이 · 무게감)으로 핏을 직관 표시 + Name / Color / Material / Weight 정의표. (아래 ‘PDP 예시’에 구현)
3
시리즈 인트로 헤더
기능 단락 시작 시 작은 회색 리드 → 영문 시리즈명 → 초대형 기능/제품명 순으로 위계를 잡음.
예시 — 구름 브리즈 퀵온
구름 시리즈의 업그레이드 버전 워킹화
GUREUM BREEZE
QUICK-ON™
4
핵심 기능 비주얼
풀블리드 클로즈업/연출컷 + 중앙정렬 카피로 한 가지 핵심 메시지를 크게 전달.
5
기능 4분할 그리드
제품 클로즈업 위에 2×2로 핵심 기능 배치. 각 칸은 영문 라벨 + 한글 설명.
예시 — 2×2 기능
Engineered Mesh
엔지니어드 메쉬로 열과 땀 배출이 원활해 숨쉬는 착화감
Oversole
무릎·발 통증을 감소시키는 4cm 오버솔 굽 높이
E-band
착화 시 베라가 말려 들어가는 현상을 방지
NON-SLIP
미끄럼 방지를 돕는 러버 아웃솔 설계
6
Design detail — 번호형 기능 섹션
중앙 대형 ‘Design detail’ 타이틀 후, 01·02·03… 번호마다 [블루 eyebrow(기능명) → 대형 2줄 헤드라인 → 본문 → 풀블리드 사진]을 반복.
예시 — 01
01
손대지 않고 편리하게, QUICK-ON™
SKIP은
누구에게나 필요하니까
손대지 않고 착화 가능한 QUICK-ON™ 기능을 추가하여 허리와 손 사용 없이 1초 만에 즐겨보세요.
7
라이프스타일 컷
실제 착용 러닝/워킹 풀블리드 사진으로 분위기·핏을 전달(도심·러닝 등).
8
고지 밴드
블랙 배경 + 흰 글씨의 가로 밴드로 안내 문구 표기.
예시 — 안내 밴드
*해당 상세페이지는 AI로 생성된 연출 이미지를 활용하여 제작되었습니다.
9
사이즈 체크 가이드
체크 아이콘 + 소제목(‘신발 사이즈 체크하기’) → 발길이·발볼 넓이 측정법 일러스트. 올바른/잘못된 예시를 함께 보여주며 잘못된 예시는 레드 점선으로 강조.
10
SIZE INFO 표
측정 다이어그램(굽높이 · 신발 내부 볼 넓이 · 신발 내부 길이) + 사이즈별 치수 표. (아래 ‘PDP 예시’에 구현)
11
세탁 · 취급 주의
체크 아이콘 + ‘세탁방법 및 취급시 주의사항’. 물세탁/드라이클리닝 금지 등 항목을 회색 본문으로 나열.
12
컬러 변형
페이지 하단에 컬러별 제품 썸네일 행으로 옵션을 한눈에 노출.
4 · 이미지 사용 규칙
- 해상도 — 1000px로 디자인하되 원본은 2000~2800px, 2x로 export(레티나). 한 섹션이 1000×9000px+ 단일 이미지인 경우도 있음.
- 마케팅 섹션 — 풀블리드가 지배적. 제품 클로즈업 + 실착용 라이프스타일을 혼합. 사진 위 카피는 흰색 + 드롭섀도, 좌하단 정렬, 우상단 워드마크.
- 기능 콜아웃 — 클로즈업 위에 화살표·하이라이트로 부위 강조(시안 블루 #098EFF).
- 정보 섹션 — 흰 배경 + 다이어그램·아이콘·표. 콘텐츠 inset(58~156px).
- 톤 유지 — 배경은 모노톤, 포인트 컬러는 제품·콜아웃에서만. 라이팅·그림자 일관.
5 · 컬러 실측값 — PSD 레이어에서 추출
상세페이지(PDP) 패턴 — 레퍼런스 기반
PSD 레퍼런스(글라이드·구름 브리즈 퀵온·티바트) 분석으로 정리한 밸롭 상세페이지 구성. 폭 1000px 단일 컬럼.
Product info
- Name
- 글라이드
- Color
- 블랙 / 화이트 / 오렌지 / 실버 / 오프화이트
- Material
- [겉감] 폴리에스터 100% [안감] EVA 90%, TPR 10%
- Weight
- 272g (260mm 기준)
*해당 상세페이지는 AI로 생성된 연출 이미지를 활용하여 제작되었습니다.
✓ 신발 사이즈 체크하기
· 발 길이 : 발을 종이 위에 올리고 가장 긴 발가락 끝과 뒤꿈치를 기준으로 체크합니다.
· 발볼 넓이 : 양볼 가장 튀어나온 부분에 수평으로 선을 그어 체크합니다.
📐 SIZE INFO
| 사이즈 | 내부 길이 | 볼 넓이 | 굽높이 |
|---|
| 250 | 250mm | 96mm | 30mm |
| 260 | 260mm | 99mm | 30mm |
| 270 | 270mm | 102mm | 30mm |
컬러
© 2026 BALLOP Design System · v0.6 — ballop.co.kr + 실제 로고/상세페이지 PSD 실측 + SOCAR FRAME 구조 + Apple HIG 접근성 반영. 작업하며 점진 보강.
