Brand Identity
브랜드 정체성
Italy Jeongmiso
장인의 정제된 온기
대기업 화려함이 아닌, 품질로 말하는 프리미엄 D2C
Refined · 정제된
Warm · 따뜻한
Quiet Premium · 조용한 프리미엄
방문자에게 남길 4경험: ① "여긴 뭔가 다르다, 앞서간다" ② "구매~결제 불편함 없었다" ③ "소개해주고 싶다" ④ "다른 데서 못 보던 게 있다"
Logo
로고
로고 2타입
가로형 · Horizontal
헤더 · 푸터 · 넓은 띠
세로형 · Vertical
정사각 · 좁은 곳 · 중앙정렬
사용 규칙
금지 조합
Typography Rule
폰트 · 영문 Times New Roman / 한글 Pretendard
Times New Roman — Italic · Regular · Bold
Pretendard — ExtraLight · Light · Bold · ExtraBold
영문·숫자(품종·대회명·연도·로고) = Times New Roman (Italic·Regular·Bold) · 한글(카피·설명) = Pretendard (ExtraLight·Light·Bold·ExtraBold) · 절대 섞지 않음 · 자간 0 통일 · Playfair 등 안 씀 · 이 굵기 밖은 X
Color Tokens
컬러 토큰 · ① 브랜드 마스터(2-모드) + ② 제품별 팔레트
① 브랜드 마스터 · 2-Mode
언제 어느 모드? 자사몰 본문·기본 UI·상품 정보 = 라이트 / 수상·헤리티지·프리미엄 섹션 = 다크. 한 페이지에 섞어도 됨(본문 라이트 + 수상 블록만 다크).
◻ 라이트 모드 — 자사몰 기본 · radius 8
◼ 다크 모드 — 수상·프리미엄 · radius 10
작은 글자색: 다크=cream-dim rgba(244,240,230,.9) / 라이트=본문 #444·캡션 #888. ★두 모드의 골드가 다름(라이트 #D9BC82 / 다크 #C49A3F) — 섞지 말고 모드 안에서 일관.
② 제품별 팔레트 · 라이트 ↔ 다크
제품 상페는 아래 톤 램프 안에서. 라이트모드=밝은 톤 배경 + 어두운 톤 글자 / 다크모드=뒤집기. 강조·포인트색은 모드 공통.
◼ 룽고 · 톤도 — 사포리 델 그라나이오 (빵)
라이트: 배경 #ede9e5·#dbd4cc / 글자 #322d25 / 강조 #8b987c · 포인트 #7b2b33 · 다크: 배경 #322d25 / 글자 #ede9e5·#dbd4cc / 강조 #8b987c·#bdb6ae · 포인트 #7b2b33
◼ 롤리오 EVOO — 코라티나 · 프루타토 (올리브유)
라이트: 배경 #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%" 방식) |
| 원칙 ⑤ | 감성 한 줄 + 팩트 한 줄 |
이렇게 ✓ (정미소톤)
안 쓴다 ❌ (광고톤)
룰: 한글 카피에 줄표(—) 금지 → 쉼표·마침표·줄바꿈 · 전문용어 빼고 쉬운 말.
Type in Use · 역할별 실제 모습
고정 5단(25~65)을 역할에 적용한 모습 · 라이트/다크 모드
다크 모드 (수상·프리미엄)
한글 · Pretendard
임팩트
롤리오
헤드라인
롤리오 EVOO
제목
롤리오 EVOO 세계가 인정
제목 (강)
롤리오 EVOO
중제목 · 본문
세 대륙 심사위원이 인정한 맛
영문 · 숫자 · Times New Roman
연도 · 숫자
2025
대회 · 품종
CORATINA
브랜드명
L'ÓLIO Riserva
부제 (이탤릭)
L'ÓLIO Extra Virgin
라벨 · 캡션
Extra Virgin Olive Oil
라이트 모드 (자사몰 본문)
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는 ✕ (모바일 가독)
영문 최소L'ÓLIO Extra Virgin Olive Oil
한글은 30부터 — 25는 ✕ (모바일 가독)
30px
한글 최소롤리오 EVOO 세계가 인정
L'ÓLIO Extra Virgin
한글 최소롤리오 EVOO 세계가 인정
L'ÓLIO Extra Virgin
45px롤리오 EVOO 세계
L'ÓLIO EVOO
L'ÓLIO EVOO
55px롤리오 EVOO
L'ÓLIO
L'ÓLIO
65px
최대롤리오
2025
최대롤리오
2025
예) "제목 45px로" · "이 글자 30px". ★최소 = 영문 25 / 한글 30 (한글은 획이 많아 더 커야 또렷 · 모바일 20px 이하 안 보임), 최대 65. 화면 줄어도 clamp() 하한 유지(영문25·한글30). 역할별 적용은 위 Type in Use 참고.
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북마크
bookmarkQR
qr쿠폰
coupon원산지
globe농가·산지집
farm정기·재구매
repeat영수증
receipt전부 <svg> 인라인이라 상페 description에도 바로 붙음 · 색=stroke/fill만 바꾸면 됨(브랜드 골드·그린·크림) · 애니 붙이려면 Motion Menu 약어(예: 별 twinkle, 잎 leafsway, 체크 drawicon).
Motion Menu
애니메이션 메뉴 · 각 효과 약어(코드)로 명령. 예: "이 문자
fadeup", "GOLD에 satin"
CSS — 상페(cafe24)도 OK + 홈페이지도 OK
JS — 홈페이지·랜딩·이 가이드 같은 페이지만 (상페는 script 제거돼 ❌)
① 등장 — 처음/스크롤 시 한 번 CSS
GOLD
세계 Top 100
페이드인 fadein
투명→선명하게 부드럽게 등장.
실제: 히어로 부제·카드
"이거 fadein"
Olive Japan
아시아 최대 국제 대회
GOLD
페이드업 (↑) fadeup
아래서 위로 떠오르며 등장.
실제: 타임라인 항목 (롤리오 적용중)
"이 줄 fadeup"
슬라이드 인 (→) slide
옆에서 미끄러지며 등장.
실제: 좌우 번갈아 나오는 줄
"slide로 들어오게"
GOLD
스케일 팝 pop
작게→제 크기로 톡 튀어나옴.
실제: 뱃지·수상 도장
"여기 pop"
2025
블러 인 blur
흐릿→선명. 고급스러운 포커스 인.
실제: 히어로 큰 숫자·제목
"2025 blur"
스태거 (순차) stagger
여러 개가 시차를 두고 차례로.
실제: 메달 3개·항목 줄줄이
"메달들 stagger"
② 강조 · 텍스트 CSS
GOLD
골드 사틴 satin
금빛 띠가 좌우로 흐름.
실제: 수상 글자(GOLD·TOP100)
"GOLD에 satin"
2024
골드 샤인 shine
사틴 약버전, 은은한 금빛.
실제: 연도 숫자
"연도 shine"
L'ÓLIO
반짝 스윕 sweep
글자 위로 빛이 한 번 지나감.
실제: 브랜드명 1곳만
"여기 sweep 한번"
매년의 증명
밑줄 그어짐 underline
밑줄이 왼→오른쪽으로 그어짐.
실제: 핵심 문구 강조
"이 문구 underline"
2025
골드 글로우 glow
은은한 금빛이 호흡하듯 깜빡.
실제: 핵심 숫자·뱃지
"여기 glow"
③ 은은한 반복 (계속) CSS
둥둥 (float) float
위아래로 부드럽게 떠다님.
실제: 국기·뱃지·제품컷
"이 이미지 float"
GOLD
펄스 (콩닥) pulse
살짝 커졌다 작아짐. 시선 끌기.
실제: 수상 pill·CTA 버튼
"버튼 pulse"
그 이전의 발자취
바운스 화살표 bounce
↓ 화살표가 통통 튐.
실제: "발자취 ↓" 스크롤 유도
"화살표 bounce"
④ 선 · 정적 CSS
2024
선 그려짐 line
세로 타임라인 선이 위→아래로.
실제: 연도 잇는 세로선
"타임라인 line"
정적 본문
움직임 없음
애니 빼기 none
움직임 없이 깔끔하게.
실제: 본문 설명·스펙표
"여긴 none"
PC: 마우스 올리면
카드 떠오름/밝아짐
카드 떠오름/밝아짐
호버 hover
마우스 올릴 때만(PC). 모바일 효과 없음.
실제: PC 카드 강조
"PC에서 hover"
⑤ SVG · 장식 아이콘 CSS · 인라인 SVG면 상페도 OK
잎 흔들 leafsway
잎·요소가 좌우로 살랑살랑.
실제: 장식 잎·바질 아이콘
"잎 leafsway"
김 올라옴 steam
김·연기가 위로 피어오름.
실제: 따뜻한 요리컷 위
"여기 steam"
포크 회전 forktwirl
아이콘이 빙글 회전(파스타 감기).
실제: 포크·로고 아이콘
"포크 forktwirl"
전구 반짝 bulb
전구가 켜졌다 꺼지듯 깜빡.
실제: 팁·아이디어 아이콘
"전구 bulb"
별 반짝 twinkle
별이 반짝이며 커졌다 작아짐.
실제: 평점 별·강조 포인트
"별 twinkle"
아이콘 그려짐 drawicon
선·체크·로고가 펜으로 그리듯 그려짐.
실제: 체크·서명·로고 등장
"체크 drawicon"
도장 회전 spin
인증 도장·뱃지가 천천히 회전.
실제: 수상 도장·인증 마크
"도장 spin"
하트 두근 heartbeat
하트가 콩닥콩닥 뛰는 느낌.
실제: 찜(♡)·좋아요 버튼
"하트 heartbeat"
흔들기(주목) shake
종처럼 좌우로 딸랑 흔들림.
실제: 알림·한정 뱃지
"여기 shake"
⑥ 이미지 · 카드 CSS
켄번스 kenburns
이미지가 아주 천천히 줌·이동(영화 느낌).
실제: 히어로 배경 사진
"배경 kenburns"
호버 줌 imgzoom
마우스 올리면 이미지가 확대(PC).
실제: 제품·갤러리 썸네일
"썸네일 imgzoom"
2025
GOLD
카드 플립 flip
카드가 3D로 뒤집히며 뒷면 보임.
실제: 앞=제품 / 뒤=수상
"카드 flip"
GOLD
올려봐
그림자 리프트 lift
마우스 올리면 카드가 떠오름(그림자).
실제: PC 카드 강조
"카드 lift"
PREMIUM
보더 글로우 borderglow
테두리가 은은히 빛났다 잦아듦.
실제: 한정·프리미엄 뱃지
"테두리 borderglow"
⑦ 더 많은 등장 · 텍스트 CSS
GOLD
줌인 등장 zoomin
작은 점에서 확 커지며 등장.
실제: 임팩트 숫자·도장
"이거 zoomin"
2024
회전 등장 rotatein
살짝 기울었다 똑바로 펴지며 등장.
실제: 연도·뱃지
"이거 rotatein"
L'ÓLIO
그라데이션 텍스트 gradient
글자에 색이 계속 흐르는 그라데이션.
실제: 브랜드명·핵심 단어
"글자 gradient"
롤리오EVO
물결 wave
글자가 하나씩 출렁이며 파도처럼.
실제: 경쾌한 한 줄 강조
"글자 wave"
⑧ 추가 효과 (신규) CSS · 상페도 OK
화덕 브레드
형광펜 칠 highlight
글자 뒤 색 띠가 좌→우로 칠해짐.
실제: 핵심 문구 강조 (93 적용중)
"이 문구 highlight"
Solution
깜빡 강조 blink
투명도가 켜졌다 꺼지듯 반복.
실제: 배지·주목 요소 (93/95 적용중)
"배지 blink"
PREMIUM
흐르는 테두리 runborder
테두리 따라 빛 선이 한 바퀴 돎.
실제: 수상·프리미엄 카드 (91 적용중)
"테두리 runborder"
19,800
가격 취소선 strike
정가에 취소선이 좌→우로 그어짐.
실제: 정가→할인가 가격
"정가 strike"
GOLD
마스크 와이프 등장 wipe
한쪽에서 닦이듯 드러나며 등장.
실제: 헤드라인·히어로 이미지
"제목 wipe"
From Italia
자간 벌어지며 등장 spread
자간이 좁→넓게 퍼지며 페이드인.
실제: 영문 serif eyebrow
"eyebrow spread"
원형 마스크 등장 clipreveal
원이 커지며 이미지가 드러남.
실제: 제품 히어로컷
"사진 clipreveal"
더보기 →
→ 넛지 nudge
화살표가 옆으로 살짝 밀렸다 돌아옴.
실제: "더보기 →" 링크·CTA
"화살표 nudge"
STORY
배경 그라데이션 흐름 bgflow
배경색이 아주 천천히 흐름(앰비언트).
실제: 브랜드 스토리 섹션
"배경 bgflow"
CORATINA
마스크 업 등장 maskup
글자가 보이지 않는 선 아래서 밀려 올라옴.
실제: 고급 헤드라인 등장
"제목 maskup"
테두리 그려짐 borderdraw
카드 테두리가 펜으로 그리듯 한 바퀴.
실제: 수상 카드·인용 박스
"박스 borderdraw"
BEST
도장 쾅 stamp
크게 시작해 쾅 찍히며 등장(+살짝 기울기).
실제: BEST·수상 도장
"뱃지 stamp"
OPEN
커튼 열림 curtain
양옆으로 패널이 열리며 내용 공개.
실제: 신제품 공개 섹션
"여기 curtain"
겉바속촉
기울며 등장 skewin
살짝 기울어진 채 미끄러져 들어와 펴짐.
실제: 다이나믹 카피 한 줄
"이 카피 skewin"
갓 구운 맛
지그재그 밑줄 zigzag
손그림 느낌 지그재그 선이 그어짐.
실제: 키워드 캐주얼 강조
"이 단어 zigzag"
호흡 줌 breathe
이미지가 아주 은은하게 커졌다 작아짐.
실제: 제품컷·배경 (kenburns보다 절제)
"사진 breathe"
궤도 점 orbit
점이 요소 주위를 천천히 돎(장식).
실제: 뱃지·아이콘 주변 장식
"뱃지에 orbit"
한정 수량
갸웃갸웃 wiggle
좌우로 갸웃갸웃 기울며 시선 끌기.
실제: 한정·마감 임박 뱃지
"뱃지 wiggle"
공중부양 floatshadow
떠오를 때 바닥 그림자가 같이 작아짐(진짜 부양감).
실제: 제품 단독컷
"제품컷 floatshadow"
CARD
그림자 숨쉬기 shadowbreathe
그림자가 은은히 커졌다 작아짐(살아있는 카드).
실제: CTA·핵심 카드
"카드 shadowbreathe"
⑨ JavaScript 효과 — 홈페이지·랜딩 전용 JS · 상페 ❌
0
숫자 카운트업 count
0 → 목표 숫자로 올라가며 카운트.
실제: 수상 개수·연도·통계
"이 숫자 count"
타이핑 type
글자가 한 자씩 타이핑되며 나타남.
실제: 히어로 카피 한 줄
"이 카피 type"
GOLD
마우스 올려봐
마우스 틸트 tilt
카드가 마우스 따라 3D로 기울어짐(PC).
실제: 제품·수상 카드
"카드 tilt"
NYIOOCOLIVE JAPANEVOOLEUMNYIOOCOLIVE JAPANEVOOLEUM
마퀴 (흐름) marquee
로고·텍스트가 끊김없이 흐름.
실제: 수상 로고 띠·리뷰 흐름
"로고 marquee"
스크롤 리빌 reveal
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"
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 국제 표준 채점
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
DON'T
자사몰 UX 룰
DO
DON'T
접근성: 작은 골드 글자(ExtraLight 200)는 모바일에서 흐림 → 골드 본문 최소 14px · 명도 대비 4.5:1 이상. 다크 배경엔 흰색, 연한 배경엔 #333+.
작업 전 브리프 6칸: 목표 / 제품(번호·품종) / 넣을 위치 / 문구·데이터 출처 / 톤·레퍼런스 / 제약. ★제품·출처는 필수(사실 정확성).