영문·숫자(품종·대회명·연도·로고·라벨) = Times New Roman (Italic·Regular·Bold) · 한글(카피·설명) = Pretendard (ExtraLight·Light·Bold·ExtraBold) · 절대 섞지 않음(영문↔한글) · 자간 0 통일 · 이 굵기 밖은 X
+ Playfair Display = 영문 에디토리얼 디스플레이 전용(매거진 큰 제목·이탤릭 헤드라인·사틴 강조). ★큰 크기(45↑)에서만 — 대비가 강한 서체라 작게 쓰면 가독 ↓, 작은 영문·라벨·숫자는 Times. 한글엔 안 씀. 예) 단골 매거진 Interview 타이틀.
Color Tokens
컬러 토큰 · ① 브랜드 마스터(2-모드) + ② 제품별 팔레트
① 브랜드 마스터 · 2-Mode
언제 어느 모드? 자사몰 본문·기본 UI·상품 정보 = 라이트 / 수상·헤리티지·프리미엄 섹션 = 다크. 한 페이지에 섞어도 됨(본문 라이트 + 수상 블록만 다크).
◻ 라이트 모드 — 자사몰 기본 · radius 8
Page BG#FAFAF8 · 페이퍼
Card#FFFFFF
Soft Gold BG#FDFAF2
Brand Gold#D9BC82 · 액센트
Brand Dark#2C3E2D · 주색
Text강 #1A1A1A · 본문 #444 · 캡션 #888
◼ 다크 모드 — 수상·프리미엄 · radius 10
green-deep#1c2818 · 배경
green#2C3E2D · 카드
gold#C49A3F
gold-soft#d9bc82 · 부제/로고
gold-bright#e8c98a · 강조
cream#f4f0e6 · 본문
GOLD 사틴수상 글자 전용
작은 글자색: 다크=cream-dim rgba(244,240,230,.9) / 라이트=본문 #444·캡션 #888. ★두 모드의 골드가 다름(라이트 #D9BC82 / 다크 #C49A3F) — 섞지 말고 모드 안에서 일관.
② 제품별 팔레트 · 라이트 ↔ 다크
제품 상페는 아래 톤 램프 안에서. 라이트모드=밝은 톤 배경 + 어두운 톤 글자 / 다크모드=뒤집기. 강조·포인트색은 모드 공통.
◼ 룽고 · 톤도 — 사포리 델 그라나이오 (빵)
최연 배경#ede9e5
연 배경·카드#dbd4cc
미드#bdb6ae
세이지(강조)#8b987c
다크#322d25 · 글자/다크bg
버건디(포인트)#7b2b33
라이트: 배경 #ede9e5·#dbd4cc / 글자 #322d25 / 강조 #8b987c · 포인트 #7b2b33 · 다크: 배경 #322d25 / 글자 #ede9e5·#dbd4cc / 강조 #8b987c·#bdb6ae · 포인트 #7b2b33
◼ 롤리오 EVOO — 코라티나 · 프루타토 (올리브유)
최연 민트#f4fcf0
연 그린그레이#eaf2e6
라이트그린(포인트)#699f61
그린(강조)#0d773b
미드 그린#367d45
올리브#3e5821
다크 그린#004f13 · 글자/다크bg
라이트: 배경 #f4fcf0·#eaf2e6 / 글자 #004f13·#3e5821 / 강조 #0d773b·#367d45 · 포인트 #699f61 · 다크: 배경 #004f13·#3e5821 / 글자 #f4fcf0·#eaf2e6 / 강조 #699f61·#367d45
Photography
포토그래피 · 솔리드 컬러 + 커머셜 스튜디오
무드 = Bon Appétit + 한국 커머셜 푸드 스튜디오. 디자인가이드 초기의 어스톤·농가 톤과 다름(은우 실제 취향 25장 레퍼 기준).
배경
솔리드 컬러 (그라데이션·자연 배경 ❌)
라이팅
스튜디오 사이드 라이트, 드라마틱 그림자
구도
손이 영웅(아래서 들어올림) · 단일 제품 · 떠있는 다이내믹 컷
스타일링 비율
미니멀 50% / 적당 30% / 풍성 20%
제작
실촬영 + nano-banana 레퍼 합성
배경색 = 고정 안 함 · 캠페인/제품/시즌별 자유. 단 조건: ① 솔리드 한 색(그라데이션·자연 배경 ❌) ② 커머셜 스튜디오 채도(쨍한 형광·탁한 파스텔 ❌). 막막하면 브랜드색(다크그린·골드·크림·딥브라운)이 기본 안전.
금지: 생활감 잡템 · 과한 어스톤 · 로우퀄 조명 · 자연 배경 · 그라데이션 배경
Voice & Tone
보이스 & 톤 · 광고톤 ❌ / 정미소톤 ✓
톤(Refined·Warm·Quiet Premium)을 글로. 핵심 = 감성 한 줄 + 팩트 한 줄, 둘 다 짧게.
원칙 ①
한 줄에 한 가지만 (이중구조 X)
원칙 ②
형용사 빼고 명사·숫자로 ("완벽한·무한한·최고의" 삭제 1순위)
원칙 ③
부정문·도전 카피 자제 ("…몰랐던 겁니다" 광고톤 배제)
원칙 ④
영문+숫자 미니멀 ("0DAY", "0%" 방식)
원칙 ⑤
감성 한 줄 + 팩트 한 줄
이렇게 ✓ (정미소톤)
EVOO · 세계가 동시에 인정한 한 방울. 블라인드 심사, 금메달.
빵 · 갓 구운 5분. 캄파냐에서 우리 집까지.
페스토 · 바질이 살아있는 초록. 갈아서, 그날의 향 그대로.
안 쓴다 ❌ (광고톤)
완벽한 맛, 무한한 감동의 프리미엄
최고라 생각했다면, 당신은 몰랐던 겁니다
혁신적 더블베이킹 테크놀로지
룰: 한글 카피에 줄표(—) 금지 → 쉼표·마침표·줄바꿈 · 전문용어 빼고 쉬운 말.
Type in Use · 역할별 실제 모습
고정 5단(25~65)을 역할에 적용한 모습 · 라이트/다크 모드
다크 모드 (수상·프리미엄)
한글 · Pretendard
임팩트
롤리오
ExtraBold · 65
헤드라인
롤리오 EVOO
ExtraBold · 55
제목
롤리오 EVOO 세계가 인정
Bold · 45
제목 (강)
롤리오 EVOO
ExtraBold · 45
중제목 · 본문
세 대륙 심사위원이 인정한 맛
Regular · 30 (한글 최소)
영문 · 숫자 · Times New Roman
연도 · 숫자
2025
Bold · 65
대회 · 품종
CORATINA
Regular · 55
브랜드명
L'ÓLIO Riserva
Bold · 45
부제 (이탤릭)
L'ÓLIO Extra Virgin
Italic · 30
라벨 · 캡션
Extra Virgin Olive Oil
Regular · 25 (영문 최소)
영문 디스플레이 · Playfair Display (큰 제목·이탤릭 강조 전용)
매거진 제목
Interview
Italic · 55
에디토리얼
Monthly Regulars
Black · 45
라이트 모드 (자사몰 본문)
L'ÓLIO Extra Virgin
롤리오 EVOO
세계가 동시에 인정한 맛.
모든 크기 25~65 안. 굵기·폰트 = Typography Rule / 고를 크기 = 아래 Size Scale.
Size Scale
글자 크기 = 고정 5단 (25 · 30 · 45 · 55 · 65) · ★최소는 언어별 → 영문 25 / 한글 30 (한글은 25 안 씀) · 최대 65
25px 영문 최소L'ÓLIO Extra Virgin Olive Oil 한글은 30부터 — 25는 ✕ (모바일 가독)
30px 한글 최소롤리오 EVOO 세계가 인정 L'ÓLIO Extra Virgin
45px롤리오 EVOO 세계 L'ÓLIO EVOO
55px롤리오 EVOO L'ÓLIO
65px 최대롤리오 2025
예) "제목 45px로" · "이 글자 30px". ★최소 = 영문 25 / 한글 30 (한글은 획이 많아 더 커야 또렷 · 모바일 20px 이하 안 보임), 최대 65. 화면 줄어도 clamp() 하한 유지(영문25·한글30). 역할별 적용은 위 Type in Use 참고.
↑ 이 5단은 수상·상페 히어로 디스플레이(큰 타이포)용. 실제 본문 콘텐츠 페이지(매거진·후기)에서 쓴 크기는 아래 실전 스케일 참고.
Size Scale · 실전 (본문 · 에디토리얼)
단골 매거진에서 실제로 쓴 크기 · 모바일 ↔ PC 각각 (반응형 clamp()로 자동 전환) · 2026-07
역할
모바일
PC
폰트 · 굵기
대표 타이틀 Interview
40
64
Playfair Italic
섹션 큰 제목
28
42
Pretendard ExtraBold
인터뷰 카드 제목
22
36
Pretendard ExtraBold
섹션 헤더
23
30
Pretendard ExtraBold
소제목 (팁·후기명)
19
19
Pretendard ExtraBold
강조 문장 (형광펜)
17
20
Pretendard ExtraBold
리드 문단
16
18
Pretendard Light
본문 · 인용
15
15.5
Pretendard Light~Reg
라벨 · 뱃지 · eyebrow
12~13
13~17
Times italic / Pretendard
캡션 · 날짜 · 안내
11
11.5
Pretendard Light (최소)
모바일 ↔ PC: 한 값이 아니라 clamp(모바일, 화면비례, PC)로 자동 전환 — 큰 제목이 PC 64px여도 폰에선 40px로 줄어 안 깨짐. 왜 위 25/30 최소랑 다른가: 25~65는 수상·히어로 디스플레이 스케일, 여긴 본문 콘텐츠라 본문 15~16·캡션 11~13까지 내려감. 페이지 성격으로 골라 씀.
모바일 함정 iOS · 갤럭시 · 인앱 · 재발방지
데브툴에선 멀쩡한데 실기기에서만 깨질 때 · 실사고 모음
대전제: 크롬 데브툴 모바일 뷰는 iOS Safari·삼성 브라우저·인앱 WebView를 재현 못 함. 스샷만 보고 "됐다" 금지 → 실기기로 확인. 깨지면 ①~③ 순서로 의심.
◼ 아이폰 (iOS Safari) · 2026-07 단골 매거진 3원인
① text-size-adjust
iOS Safari가 데스크탑스러운 레이아웃을 감지하면 글자를 멋대로 키움(데브툴 재현 X). 제목이 4줄로 터지는 게 대표 증상. → html,body{-webkit-text-size-adjust:100%} 필수.
② 가로 넘침(vw)
100vw·120%로 화면보다 넓어지면 iOS가 페이지 전체를 축소(shrink-to-fit) → 미디어쿼리가 안 먹음. → @media 의존 버리고 flex로, 풀블리드 밴드엔 overflow:hidden·max-width:100%.
③ 가운데+높이고정
가운데 정렬 요소의 높이를 고정하면 글자 커질 때 위아래로 삐져나감. → 높이 고정 대신 flex로 내용따라, 넘침은 overflow:hidden.
◼ 갤럭시 · 안드로이드 · 인앱브라우저
④ 삼성 브라우저
갤럭시(삼성 인터넷)는 UA 에뮬로도 안 잡히는 게 있음 — 삼성 옵션·날짜 픽커, 회원가입·로그인 흐름. 이건 실기기 육안검증 항목으로 분리. 자사몰 구매흐름 배포 시 갤럭시+아이폰 에뮬 최소 1패스.
⑤ 인앱 WebView
인스타·카톡 인앱브라우저(안드로이드/iOS 공통)에서 결제 깨짐 상시: 자사 결제버튼 무반응(Dead click) + 네이버페이 누르면 외부앱을 못 띄워 세션 종료("java object is gone"). → 인앱 감지 시 상단 "사파리/크롬에서 열기" 배너 + 카드결제 우선노출.
진단 순서(iOS): ① text-size-adjust → ② vw 넘침 → ③ 가운데-넘침. 배포 전 3종 세트: 한글 word-break:keep-all · PC용 <br> 모바일 숨김 · text-wrap:pretty. + 검증: 갤럭시·아이폰 UA 에뮬 1패스, 못 잡는 것(삼성 픽커·인앱 결제)은 실기기.
SVG Library
바로 쓰는 인라인 SVG 아이콘 ·약 95종 (주방기기·상페실전 추가) · 색은 currentColor/브랜드색으로 자유 · 상페(인라인)도 OK · 마우스 올리면 움직임(hover) · "올리브 아이콘" "메달 svg" 식 명령
전부 라인 스타일(stroke 1.6·round) 통일. 채움형(★)은 fill. 24×24 기준(구분선류만 와이드). 크기·색·굵기는 말하면 조정.
① 제품 · 재료 food
올리브olive
올리브가지olivebranch
오일병oilbottle
오일방울oildrop
빵bread
밀wheat
바질잎basil
페스토병jar
파스타pasta
토마토tomato
치즈cheese
와인잔wine
② 수상 · 인증 award
메달medal
트로피trophy
리본ribbon
월계관laurel
별(채움)star
인증도장seal
인증체크badgecheck
품질보증quality
③ 조리 · 주방 kitchen
포크fork
나이프knife
스푼spoon
커트러리cutlery
접시plate
냄비pot
오븐oven
불꽃flame
온도계thermo
타이머timer
도마board
저울scale
④ 배송 · 신뢰 trust
박스box
배송트럭truck
냉동(눈)snow
방패보증shield
친환경잎eco
클린라벨cleanlabel
빠른배송fast
안전잠금lock
⑤ UI · 인터페이스 ui
화살표→arrowr
화살표↓arrowd
체크check
닫기close
플러스plus
하트·찜heart
장바구니cart
검색search
별점(선)starline
정보info
전화phone
위치핀pin
공유share
⑥ 장식 · 구분 deco
올리브 구분선divider
따옴표quote
물결선wave
코너장식corner
반짝sparkle
프레임frame
이탈리아 삼색italy
태양sun
산·산지mountain
리본 배너banner
점 구분dots
아치arch
잎 페어leafpair
왕관crown
⑦ 주방기기 · 도구 (2브랜드) kitchenware
프라이팬pan
웍wok
주전자kettle
거품기whisk
뒤집개spatula
국자ladle
강판grater
믹서blender
앞치마apron
계량컵cup
밀대rollingpin
채반strainer
인덕션induction
집게tongs
⑧ 상페 실전 (혜택 · 안내) detail
전자레인지microwave
에어프라이어airfryer
냉장보관fridge
선물gift
리뷰 말풍선bubble
캘린더calendar
레시피북recipe
북마크bookmark
QRqr
쿠폰coupon
원산지globe
농가·산지집farm
정기·재구매repeat
영수증receipt
전부 <svg> 인라인이라 상페 description에도 바로 붙음 · 색=stroke/fill만 바꾸면 됨(브랜드 골드·그린·크림) · 애니 붙이려면 Motion Menu 약어(예: 별 twinkle, 잎 leafsway, 체크 drawicon).
Motion Menu
애니메이션 메뉴 · 각 효과 약어(코드)로 명령. 예: "이 문자 fadeup", "GOLD에 satin"
CSS — 상페(cafe24)도 OK + 홈페이지도 OKJS — 홈페이지·랜딩·이 가이드 같은 페이지만 (상페는 script 제거돼 ❌)
IntersectionObserver로 화면 들어올 때 1회. CSS view()보다 정확.
실제: 섹션마다 등장(홈)
"스크롤 reveal"
패럴랙스 parallax
배경·요소가 다른 속도로 움직여 깊이감.
실제: 홈 히어로 배경
"배경 parallax"
비포/애프터 compare
가운데 손잡이를 끌어 두 이미지 비교.
실제: before/after·원본/가공
"compare 슬라이더"
캐러셀 carousel
여러 이미지를 좌우로 넘김(자동/수동).
실제: 제품컷·리뷰 슬라이드
"이미지 carousel"
라이트박스 lightbox
이미지 클릭 시 팝업으로 확대.
실제: 상세컷·인증서 확대
"이미지 lightbox"
SVG 드로잉 drawpath
스크롤에 맞춰 선/로고가 그려짐.
실제: 브랜드 로고 등장
"로고 drawpath"
스크롤 진행바 progress
페이지 상단에 읽은 진행도 바.
실제: 긴 매거진·스토리
"상단 progress 바"
클릭 리플 ripple
버튼 누르면 파동이 퍼짐(터치 피드백).
실제: 구매·CTA 버튼
"버튼 ripple"
스포트라이트 spotlight
커서 위치에 빛 원이 따라다님(PC).
실제: 히어로·인터랙티브 섹션
"spotlight 깔아줘"
L'ÓLIO
글자 단위 등장 splittext
한 글자/단어씩 시차 두고 등장.
실제: 임팩트 헤드라인
"제목 splittext"
02595
숫자 롤링 odometer
숫자가 굴러 올라가며 바뀜(카운트 고급버전).
실제: 누적 판매·통계
"숫자 odometer"
스티키 핀 pin
스크롤 동안 요소를 잠깐 붙박이(핀).
실제: 비교표 헤더·사이드
"이거 pin"
관성 스크롤 smoothscroll
스크롤이 관성 있게 부드럽게(Lenis 류).
실제: 홈 전체 고급감
"홈 smoothscroll"
BUY
자석 버튼 magnetic
마우스가 가까워지면 버튼이 끌려옴.
실제: 홈 CTA 버튼
"버튼 magnetic"
가로 스크롤 섹션 hscroll
아래로 스크롤하면 화면이 옆으로 넘어감.
실제: 제품 라인업·수상 띠
"이 섹션 hscroll"
수획야췹충전
스크롤 스토리 scrollytell
요소를 핀한 채 스크롤로 내용이 전환.
실제: 소싱·생산 과정 스토리
"과정 scrollytell"
컨페티 confetti
장바구니 담기 등 성공 순간 색종이 축포.
실제: 자사몰 담기 피드백
"담기에 confetti"
호버 미리보기 hoverpreview
목록 항목에 올리면 썸네일이 커서 옆에(PC).
실제: 레시피·제품 목록
"목록 hoverpreview"
L'ÓLIO
텍스트 속 영상 textmask
제목 글자 모양으로 영상이 마스킹돼 재생.
실제: 홈 히어로 임팩트
"제목 textmask"
GOLD
글자 디코드 scramble
랜덤 글자가 빠르게 섞이다 단어로 맞춰짐.
실제: 숫자·키워드 등장
"단어 scramble"
스와이프 덱 swipedeck
카드 뭉치에서 한 장씩 옆으로 날아감(틴더식).
실제: 리뷰·레시피 카드 넘기기
"리뷰 swipedeck"
커서 트레일 cursortrail
커서 뒤로 금빛 잔상이 따라옴(PC).
실제: 브랜드 스토리·이벤트 페이지
"trail 깔아줘"
스크롤 줌 scrollzoom
스크롤 내릴수록 이미지가 서서히 확대.
실제: 히어로→디테일 전환
"히어로 scrollzoom"
02:45:19
카운트다운 countdown
마감까지 남은 시간이 실시간으로 줄어듦.
실제: 공구 마감·한정 이벤트
"마감 countdown"
⑩ 이미지 카드 라이브 데모 — 직접 만져보세요 JS · 홈·랜딩용 (상페 ❌)
BEFORE
AFTER
← 좌우로 끌어보세요
비포/애프터 슬라이더 bacompare
손잡이를 끌어 두 이미지를 실시간 비교.
실제: 데우기 전/후 · 원물/완성
"before after 슬라이더"
CORATINA
마우스를 올리고 움직여보세요
줌 렌즈 zoomlens
커서 위치를 따라 그 부분이 확대(PC).
실제: 라벨·디테일컷 확대
"라벨 zoomlens"
L'ÓLIOGOLD
마우스를 움직여보세요
패럴랙스 레이어 layerpar
배경·글자·뱃지가 다른 속도로 따라와 입체감.
실제: 홈 히어로 카드
"히어로 layerpar"
자석 버튼 (라이브) magnetic
커서가 다가가면 버튼이 끌려옴(PC).
실제: 홈 CTA
"버튼 magnetic"
RISERVA
마우스를 움직여보세요
스포트라이트 (라이브) spotlight
커서 자리에 빛이 따라다니는 다크 카드.
실제: 프리미엄 섹션
"카드 spotlight"
파네 룽고클릭하면 뒷면
GOLD
클릭해보세요
플립 카드 (라이브) clickflip
클릭하면 3D로 뒤집혀 뒷면 공개.
실제: 앞=제품 / 뒤=수상·스펙
"카드 clickflip"
⑪ 시그니처 — 로고·타이틀용 JS · Canvas
모래 흩어짐 dissolve
글자·로고가 입자로 부서져 바람에 흩날림. (KAMASOT 인트로용)
실제: 브랜드 인트로 영상·홈 히어로
"로고 dissolve"
입자 모임(반대) gather
흩어진 입자가 모여 글자·로고가 완성됨. dissolve의 역방향.
실제: 로고 등장·오프닝
"로고 gather"
⑫ 테크·글리치 CSS
KAMASOT
글리치 glitch
가끔 지직 튀며 RGB 어긋남. 티타늄·테크 무드.
실제: KAMASOT 워드마크·테크 포인트
"로고 glitch"
KAMASOT
RGB 분리(상시) rgbsplit
빨강·청록이 계속 미세하게 어긋남. 사이버 감성.
실제: 강한 테크 타이틀
"타이틀 rgbsplit"
2026
네온 플리커 neon
네온사인처럼 깜빡이며 빛남.
실제: 연도·이벤트 숫자
"숫자 neon"
HOVER ME
지터(호버) jitter
마우스 올리면 파르르 떨림(PC). 긴장·주목.
실제: 한정·긴급 뱃지
"뱃지 jitter"
⑬ 텍스트 연출 CSS
L'ÓLIO
골드 시머 shimmer
금빛 그라데이션이 글자를 계속 흘러감. satin 상위버전.
실제: 프리미엄 브랜드명
"브랜드 shimmer"
FRESH
글자 웨이브 wave
글자가 하나씩 물결치듯 출렁.
실제: 경쾌한 헤드라인
"이 단어 wave"
KAMASOT
3D 플립 인 flip3d
위에서 접혀 있다 펼쳐지며 등장(입체).
실제: 타이틀 등장
"제목 flip3d"
KAMASOT_
타이프라이터 typewriter
타자 치듯 글자가 하나씩, 커서 깜빡.
실제: 인트로 문구·코드감
"문구 typewriter"
FEEDBACK
마스크 리빌 maskup
아래에서 밀려 올라오며 나타남(가림막 열림).
실제: 매거진 큰 타이틀
"타이틀 maskup"
⑭ 블러 계열 CSS
L'ÓLIO
포커스 인 focusin
흐릿하게 퍼졌다 선명하게 초점 맞음. 고급 등장.
실제: 히어로 제목·브랜드명
"제목 focusin"
KAMASOT
프로스트 리빌 frost
뿌옇게 밝은 유리 너머에서 또렷해지며 등장.
실제: 프리미엄 인트로
"로고 frost"
FRESH
모션블러 슬라이드 motionblur
잔상을 남기며 빠르게 미끄러져 제자리(속도감).
실제: 동적 헤드라인·수치
"이 줄 motionblur"
2026
포커스 펄스 focuspulse
선명↔흐림 반복. 은은하게 숨쉬는 강조.
실제: 대기 중 포인트 숫자
"숫자 focuspulse"
KAMASOT
디포커스 스윕 defocus
글자가 하나씩 흐려졌다 선명해지며 파도치듯.
실제: 긴 타이틀 연출
"타이틀 defocus"
⑮ 시선 강탈 — 대형 그래픽 CSS · orbit은 JS 약간
KAMASOTTITANIUMKAMASOTSINCE 2026
원통 회전 orbit
텍스트가 원통(실린더)처럼 위아래로 돌아감. 포스터·인트로 임팩트.
실제: 브랜드 인트로·이벤트 배너
"타이틀 orbit"
COMING
유리판 부분블러 glasspane
반투명 유리판이 글자 위를 지나며 그 부분만 흐려짐(프로스티드).
실제: COMING SOON·티저 · 티타늄/유리 무드
"제목 glasspane"
NIGHT
붉은 번짐 redbleed
붉은 글자가 번지고 글로우가 호흡하듯 커짐(몽환·긴장).
실제: 다크 무드 헤드라인·이벤트
"제목 redbleed"
⑪~⑮ = After Effects급 확장(2026-07) · ⑪(dissolve·gather)은 Canvas라 홈·영상용(상페 ❌) — KAMASOT 로고 SVG로 교체하면 로고가 입자화. ⑫~⑮는 CSS라 상페 OK(wave·defocus는 글자 span 분리 필요 — 데모는 JS가 분리, 상페는 수동 분리). 전부 prefers-reduced-motion 존중.
CSS 효과(①~⑧·⑫~⑮, SVG·이미지·텍스트 포함)는 상페·홈 다 됨 / JS 효과(⑨·⑩·⑪)는 홈페이지·랜딩·이 가이드 같은 페이지만(상페 description은 script 제거돼 ❌). ⑩은 데모 자체가 실제 작동(드래그·호버·클릭). 데모는 보기 위해 반복 재생, 실제 적용 땐 1회/스크롤 1회. 원칙: 모션 최소·고급스럽게(한 화면에 2~3개 이하).
Components
컴포넌트 (그대로 복사해 쓰는 블록)
메달 카드 — width 210 · 패딩 세로15/가로22 · radius10 · 국기 사각 34×22
NYIOOC New York
GOLD
세계 Top 100 · 이탈리아 Top 50 올리브오일의 올림픽
Olive Japan
GOLD
아시아 최대 국제 대회 IOC 국제 표준 채점
타임라인 — 연도 라벨 + 아이템
2024
Olive Japan
아시아 최대 국제 대회 (2년 연속)
GOLD
EVOOLEUM
세계 Top 100 + Best Premium Design
TOP 100
푸터 로고 — 인라인 SVG (paparella_logo.svg, 골드, 폭 220)
FRANTOIO ✦ PAPARELLA
PUGLIA, ITALIA
Components · 자사몰 (라이트 모드)
자사몰 기본 부품 · 그대로 복사해서 씀
라이트 모드 토큰(BG #FAFAF8 · CTA 다크그린 #2C3E2D · 골드 #D9BC82 · radius 8). 상품 정보·구매 영역 등 본문에 사용.
버튼 — 메인 크게 + 보조 (수평 나열 X)
가격 3줄
64,800원
15%54,800원
배송 3,500원 · 39,800원 이상 무료
옵션 셀렉터 (높이 42)
뱃지
신상세일BEST한정
비교표 (양식 · 내용은 제품에 맞게)
항목
제품 A
제품 B
용량
—
—
특징
—
—
추천
—
—
Spacing & Shape
간격 · 모양
섹션 좌우 패딩 24(모바일15) · 히어로 아래 30(모바일24) · 타임라인 위 24(모바일18) · 섹션제목 아래 56 · 카드 사이 18 · 카드 패딩 세로15/가로22
★간격 규칙: 섹션 사이 빈 공간 = 앞요소 아래패딩 + 뒷섹션 위패딩 합. 넓으면 둘 다 줄여야 빠짐.
모양: radius = 라이트 8px / 다크 10px(모드별) · 국기 = 사각형 34×22(r3), 원형·이모지 ❌ → flagcdn 이미지 · 카드 폭 210(모바일 100%, 최대340)
Rules
절대 Do / Don't
DO
영문 Times · 한글 Pretendard
자간 0 · radius 모드별(라이트 8 / 다크 10)
사틴은 수상 글자에만
작은 설명 = ExtraLight(200)
수치·수상은 출처 준 것만
DON'T
한글 카피에 줄표(—) ❌ → 쉼표·마침표·줄바꿈
품종/대회명 사실을 다른 제품에 복붙 ❌ (코라티나→프루타토 X)
폰트 섞기 ❌
검증 안 한 수치 ❌
자사몰 UX 룰
DO
모바일 버튼 10~12mm (누이손·네일)
LCP 2.5초 이내 (WebP·lazy)
명도 대비 4.5:1 이상
상품 이미지 크고 선명
신뢰 증거 3개 이하
DON'T
자동 회전 배너 ❌ (정적 히어로 1컷)
구매 중 팝업 ❌ (스크롤 80%↑만)
배송비 숨기기 ❌ (이탈 1위 48%)
복잡한 결제창 ❌ (3단계·6~8필드↓)
버튼 수평 나열 ❌ (메인1 크게+보조1)
접근성: 작은 골드 글자(ExtraLight 200)는 모바일에서 흐림 → 골드 본문 최소 14px · 명도 대비 4.5:1 이상. 다크 배경엔 흰색, 연한 배경엔 #333+.
작업 전 브리프 6칸: 목표 / 제품(번호·품종) / 넣을 위치 / 문구·데이터 출처 / 톤·레퍼런스 / 제약. ★제품·출처는 필수(사실 정확성).
