이태리정미소 디자인 가이드

Section 02

1차 레퍼런스 사이트 — 친절 안내

핵심 3곳은 크게, 나머지 5곳은 간결하게. 처음 볼 땐 TOP 3만 익히고 충분합니다. 익숙해지면 확장.

★ TOP 3 · 이태리정미소에 제일 맞는 곳

Awwwards

2009년 스페인 런칭. 업계에서 "웹디자인 아카데미상"이라 불리는 가장 권위 있는 어워드. 매일 Site of the Day (SOTD) 1개 선정, 월간/연간 종합 수상작 발표. 심사 기준: 디자인 40 + 사용성 30 + 창의성 20 + 콘텐츠 10.

주요 특징

Food & Drink 카테고리 활성 — 식품 브랜드 참고 최적
필터 세밀 (컬러·국가·테크·카테고리)
Developer Award 병행 — 코드 품질 좋은 것 많음
Honors 등급 수상작만 추려 보기 가능

유명 참여/수상 예시

Apple, Nike, Spotify 등 글로벌 브랜드 다수
이탈리아 식품 브랜드 (Illy, Lavazza 등 자주 등장)
Studio Dixon·Active Theory 등 유명 스튜디오

🔗 바로가기

🍝 Food & Drink 🏆 Site of the Year 연간 최고 🥇 Site of the Month 월간 최고 🎖 Site of the Day 매일 💠 Honorable Mentions 명예 등급 📝 Typography Winners 타이포 최고 🛒 E-commerce Winners 커머스 최고

🎯 언제 쓰나: 방향 초반 탐색·SOTD 매일 체크·프리미엄 레이아웃 아이디어 수집

Lapa Ninja

lapa.ninja ↗

랜딩 페이지(단일 상품·서비스 소개 페이지) 전문 갤러리. Awwwards가 "사이트 전체"를 보여준다면 Lapa Ninja는 "한 페이지에 어떻게 메시지를 담는가"에 집중. 카페24 상세페이지 구조 잡을 때 제일 직접적으로 참고.

주요 특징

랜딩만 8,000+개 큐레이션
섹션별 분류: Food, Fashion, SaaS, Agency 등
무료. 회원가입 불필요
각 페이지 스크린샷 전체 보기 가능

우리에 특히 유용

상품 1개짜리 상세페이지 구조 참고
Hero → USP → 증거 → CTA 순서 감각
폰트/여백 스케일 훔쳐 쓰기 좋음

🔗 바로가기

🍽 Food 카테고리 💎 전체 인기 랜딩 분야 무관 🎨 Branding 카테고리 🛒 E-commerce 카테고리

🎯 언제 쓰나: 상품 상세페이지 구조 짤 때·신규 상품 랜딩 만들 때

SiteInspire

siteinspire.com ↗

영국 런던 기반. 2008년 런칭. 가장 깔끔한 큐레이션으로 유명한 곳. Awwwards보다 화려함을 덜어내고 "정제된 웹디자인"만 엄선. 우리 "Quiet Premium" 톤 찾을 때 1순위.

주요 특징

Style / Type / Subject 3축 필터
Minimal, Typographic, Monochrome 세부 스타일 필터 강력
선별 기준 엄격 — 허당 없음
로딩 빠름, UI 자체도 레퍼런스

우리에 특히 유용

Minimal 스타일 필터 → 우리 지향점 직결
Ecommerce 타입 + Minimal 조합으로 좁혀보기
폰트 대비/여백 감각 훌륭

🔗 바로가기

🛍 Ecom × Minimal 미니멀 커머스 ✨ 전체 엄선 큐레이션 분야 무관 🫥 Minimal 스타일 ✒️ Typographic 스타일

🎯 언제 쓰나: 미니멀·프리미엄 톤 잡을 때·여백 감각 훔쳐 쓸 때

나머지 5곳 · 필요할 때 꺼내 쓰기

CSS Design Awards

디자인·UX·혁신 3축 심사. 엔터프라이즈/스튜디오 포트폴리오 많음. 타이포그래피 정교한 것 찾기 좋음.

cssdesignawards.com ↗

FWA

2000년부터. 가장 오래된 어워드 중 하나. 인터랙티브·모션·3D 중심. 우리 톤과 거리 있지만 복잡 구현 참고.

thefwa.com ↗

Dribbble

실제 사이트가 아닌 디자이너 시안/컴포넌트 공유. 버튼·카드·마이크로인터랙션 조각 영감. 구현된 사이트 아닌 점 주의.

dribbble.com ↗

Behance

Adobe 플랫폼. 완성 브랜딩 프로젝트 통합(웹+인쇄+패키지). "italian food brand" "pasta packaging" 검색으로 우리 결 찾기.

behance.net ↗

maxibestof

"각 카테고리별 최고" 엄선. 사이트 수 적지만 질 높음. 처음 길 잃을 때 시작점으로 좋음.

maxibestof.one ↗

참고 · 업계에서 꾸준히 회자되는 프리미엄 기준

어워드 수상은 아니어도 "프리미엄 웹디자인의 표준"으로 자주 인용되는 사이트들. 디자인이 드물게 바뀌니 레퍼런스 수명 김.

Awwwards · 이태리정미소 맞춤 카테고리 단축키

Section 03

카테고리별 Top 10 — 방문 참고 가이드

Awwwards 공식 심사 기준(Design 40 / Usability 30 / Creativity 20 / Content 10)에 따라 30개 후보를 4개 카테고리로 재평가 · 선별. 각 사이트마다 어디를 어떻게 보는지 직링크 포함.

📊 점수 범례 — 각 카드 우측 상단 4개 배지

Visual Design

컬러·타이포·레이아웃·여백 등 시각 완성도

Usability & UX

네비·구매 플로우·로딩·반응성

Creativity

독특한 접근·인터랙션·애니메이션

Storytelling

브랜드 서사·콘텐츠 구성·카피

각 0~10점 · 클로드 자체 평가 기준 · 절대 수치 아님, 비교용

🎨

Category A · Visual Design

전체 분위기가 압도적인 곳

컬러·타이포·여백의 조합이 "수준 있다"는 첫 인상을 만드는 곳. 브랜드 톤 잡기용.

Ecavo

V 7U 9C 9S 5

타이포 위계·여백·중성 팔레트의 교과서. "정제된 프리미엄"의 기본기를 보여주는 사이트.

👀 뭘 보나세리프 Display + 산세리프 Body 조합 · 섹션 간 넉넉한 공백 · 중성 팔레트 일관성

🏠 홈 🛍 Products 📖 About ✉️ Contact

La Panuozzeria 1978 ⭐

V 6U 7C 8S 7

이탈리아 현지 브랜드. 1978 헤리티지를 시각에 녹여낸 정석. 우리 이태리정미소 결과 직관적 싱크.

👀 뭘 보나연도(1978) 강조 방식 · 전통 이탈리안 컬러/폰트 · 장인 사진 비중 · 헤리티지 서사

🏠 홈 🍝 Menu

Johnny's Dirty Soda

V 5U 7C 5S 7

빈티지 포스터 스타일의 Hero. 장인·헤리티지 톤으로 프리미엄을 만듦. 우리 브랜드 스토리 섹션에 참고.

👀 뭘 보나크고 강한 타이포 · 제품 히어로샷 중심 · 서브텍스트 간결 · 포스터 감각 레이아웃

🏠 홈 📖 About ✉️ Contact

🛠

Category B · Usability & UX

UI와 기능이 잘 풀린 곳

상품·결제 플로우, 네비게이션, 폼 구성이 정제된 곳. 카페24 결제창/상품상세 잡을 때 직접 참고.

Thessaloniki Sto Piato

V 1U 10C 3S 5

그리스 레스토랑. UX 안정감 최고 + 정적 로딩. 심플한 네비와 빠른 반응성이 강점.

👀 뭘 보나단순 네비 구조 · 빠른 로딩 · 메뉴 중심 UX · 불필요한 요소 제거

🏠 홈

Casper's Caviar ⭐

V 5U 9C 8S 4

Shopify 기반 프리미엄 식품 커머스. 검정+골드 = 우리 다크그린+골드와 톤 호환. 결제창 작업 1순위 참고.

👀 뭘 보나Collection → 상품상세 → 장바구니 → 체크아웃 플로우 · 섹션 구분 방식 · 버튼 스타일 · 가격 위계

🏠 홈 🛍 Shop 📖 About 🛒 Cart ✉️ Contact

Aupale Vodka

V 4U 9C 5S 7

세리프+산세리프 조합. 보드카 럭셔리 브랜드. 정적 안정감과 제품 스토리 레이아웃이 참고.

👀 뭘 보나상세 페이지 UI · 제품 스토리 레이아웃 · 여백 활용 · 타이포 대비

🏠 홈

💡

Category C · Creativity & Innovation

색다른 접근·인터랙션이 있는 곳

애니메이션·스크롤 경험·비주얼 실험이 돋보이는 곳. 시즌 캠페인·특별 상품 페이지 기획에.

Elevare

V 5U 6C 10S 5

Creativity 10점 만점. 인터랙티브 커머스 실험. 애니메이션과 UI 통합이 돋보임.

👀 뭘 보나스크롤 애니메이션 · 인터랙션 디자인 · 제품-UI 통합 · 마이크로 인터랙션

🏠 홈 🛍 Shop 📖 About 🛒 Cart

Gourou Indian Food

V 1U 6C 9S 8

프랑스 인도 음식점. 독특한 비주얼 접근과 대담한 컬러 대비. 우리 톤과 다르지만 "어떻게 튀는지" 참고.

👀 뭘 보나대담한 컬러 조합 · 애니메이션 활용 · 메뉴 인터랙션 · 문화적 아이덴티티 전달

🏠 홈

📖

Category D · Content & Storytelling

브랜드 스토리·콘텐츠 구성이 특별한 곳

About 페이지와 서사 구성이 탁월한 곳. 이태리정미소 About·Process·Story 기획 직접 참고.

Single Fin

V 3U 8C 5S 10

Storytelling 10점 만점. 프랑스어 현지 톤. 상품보다 이야기를 먼저 배치. "Quiet Premium" 결 가장 가까움.

👀 뭘 보나텍스트 비중 높게 · 읽히는 디자인 · 사진 절제 · 여백으로 리듬 · 서사 중심 네비

🏠 홈

Meyers

V 4U 7C 8S 10

덴마크 유명 베이커리/제과. Storytelling 10점. 스토리와 제품의 균형. 장인 레시피 콘텐츠 구성이 돋보임.

👀 뭘 보나장인/레시피 콘텐츠 섹션 · 브랜드 히스토리 구성 · 제품과 스토리 분배 · 시즌 콘텐츠

🏠 홈

💡 사용법

전체 방문 금지. 필요한 카테고리 1~2개만 골라서 해당 사이트 훑기.
각 카드의 "👀 뭘 보나"만 머리에 담고 방문 — 그 부분만 집중.
직링크 버튼 클릭하면 바로 해당 섹션(About/Shop/Cart 등)으로 이동.
V/U/C/S 점수는 Awwwards 심사 기준 참고용. 우리 맥락 자체평가값이라 절대 수치 아님.

Section 04

Do / Don't — 업계 공식 5+5

Apple HIG · Google Material · W3C WCAG · Nielsen Norman Group · Baymard Institute — 1차 리서치 출처 기반 원칙만. 각 카드의 수치는 공식 문서에서 확인된 값. 한국 D2C 식품 브랜드 맥락으로 해석.

이것부터 챙기기

📱

모바일 버튼은 손가락으로 편하게 누를 크기로

💡 쉽게: 버튼 크기는 최소 10~12mm. 아이콘이 작아도 주변 공간을 넓혀서 탭하기 편하게 만들기.

공식 기준: iOS 44pt, Android 48dp 이상. 아이콘 자체는 작아도 탭 가능 영역은 투명 패딩으로 확장.

📚 Apple HIG · Google Material

🍝 우리 맥락: 30~50대 여성 엄지 터치 주력. 네일·손톱 때문에 작은 버튼 오조작률 높음. "구매하기"·"옵션 선택" 44pt 미만이면 쿠팡/네이버로 이탈.

⚡

첫 화면 이미지는 2.5초 안에 떠야

💡 쉽게: 고객이 페이지 들어와서 제일 큰 이미지가 2.5초 안에 보여야 함. 그 이상이면 "느리다"고 느끼고 떠남.

공식 기준: LCP (Largest Contentful Paint)가 2.5초 이내 = Google "좋음" 판정. 방법: 이미지를 WebP/AVIF 최신 포맷으로 저장 + 적절 크기로 서빙 + 스크롤 내려야 할 이미지는 lazy load(늦게 로드).

📚 web.dev (Google) · Google Search Central

🍝 우리 맥락: 식품은 "먹음직해 보이는가"가 구매 시그널. LCP 4초 넘으면 쿠팡 대비 신뢰도 즉시 하락. 바질페스토 히어로 1컷 고품질 WebP가 최우선.

👀

배경과 글씨 색 차이 또렷하게

💡 쉽게: 흰 배경에 연회색 글씨·연한 골드 배경에 흰 글씨 같은 거 눈 아파서 안 읽힘. 검은 배경엔 흰 글씨, 흰 배경엔 진한 회색 이상.

공식 기준: 콘트라스트 비율 4.5:1 이상 (WCAG 2.1). 브랜드 다크그린 #2C3E2D 위엔 골드 본문 금지(비율 낮음) — 장식·포인트로만. 흰 배경엔 #333 이상 본문.

📚 W3C WCAG 2.1 SC 1.4.3 · WebAIM 검사기

🍝 우리 맥락: 30~50대 여성은 노안 영향권 초입. Pretendard 300 이하 라이트 본문 금지. 연한 회색 위 회색 부제 금지. 다크그린 배경엔 흰색 (콘트라스트 약 12:1).

📸

이미지 크고 선명하게 + 실제 크기 가늠 샷 포함

💡 쉽게: (1) 상품 사진 크고 선명하게 (2) 손가락으로 확대 가능하게 (3) 실제 크기 감 잡을 수 있는 사진 꼭 넣기 — 손에 든 컷·식탁 위 컷 같은 거.

Baymard 리서치: 상세 진입 후 첫 행동이 이미지 탐색인 사용자 56%. "실제 크기(In-Scale)" 이미지 제공 사이트는 62%뿐. 모바일에서 손가락 확대(pinch/double-tap) 미지원 사이트가 40%.

📚 Baymard 이미지 해상도 · In-Scale 연구

🍝 우리 맥락: 바질페스토 1병 크기, 파스타 500g 분량 — 한국 소비자는 손·식탁·계량컵 대비로 판단. 쿠팡과 차별화: "손에 들린 샷 + 식탁 플레이팅 + 성분표 줌" 3종.

✅

믿을 수 있는 증거는 3개 이하만

💡 쉽게: 리뷰·인증·환불보장 같은 "증거"를 너무 많이 깔면 오히려 신뢰 떨어짐. 3개 이하로 고르고 나머지는 과감히 뺄 것. 낮은 별점 리뷰도 숨기지 마.

Baymard 리서치: 신뢰 신호 1~3개 타입일 때 전환율 +23%, 7개 이상은 오히려 −8%. 낮은 별점 리뷰 일부러 찾는 사용자 53% → 부정 리뷰 허용하는 사이트가 더 신뢰도 높음.

📚 Baymard Product Page Research

🍝 우리 맥락: (1) 알파리뷰 평점·개수 (2) 이탈리아 직소싱 인증/사진 (3) 환불 보장 — 3가지로 압축. 식약처/HACCP/ISO 전부 나열하면 오히려 전환 저해. 알파리뷰 낮은 별점 숨기지 말 것.

DON'T

이것은 피하기

🎠

메인 배너가 자기 혼자 넘어가는 거 금지

💡 쉽게: "3~5초마다 이미지가 자동으로 바뀌는 슬라이드 배너" 같은 거. 고객이 읽기 전에 넘어가서 짜증나고, 2번째 이후 배너는 거의 안 눌림. 한 장만 정적으로.

NN/g 리서치: 자동 회전 슬라이더의 첫 프레임 외 클릭률 1%. "글 다 못 읽었는데 넘어갔다" 불만 반복. 운동성 장애 사용자 접근성도 저해.

📚 NN/g Auto-Forwarding · NN/g Carousel Usability

🍝 우리 맥락: 카페24 기본 스킨 4~6장 자동 회전 지양. 정적 히어로 1컷 + 스크롤로 이어지는 섹션이 프리미엄 톤에 맞음. "재입고/공구/이벤트" 다 자동 회전시키면 아무 것도 인식 안 됨.

💬

결제하려는 고객 막는 팝업 금지

💡 쉽게: 결제하려고 클릭했는데 "카카오 채널 추가해!" "쿠폰 받아!" 팝업 뜨면 열받아서 나감. 팝업은 스크롤 많이 한 후 or 창 닫으려 할 때만.

NN/g 리서치: 팝업의 가장 큰 문제는 과업 중단. 결제·장바구니 진행 중 쿠폰·뉴스레터 모달 = 이탈. 꼭 써야 하면 스크롤 80% 이후 or exit intent(마우스가 창 밖으로 나가려 할 때).

📚 NN/g Popups · Overlay Overload

🍝 우리 맥락: "첫방문 쿠폰 + 카카오채널 추가 + 알림받기" 3중 스택 = 30~50대에게 스팸 사이트 인상. 쿠폰은 팝업 대신 상단 스티키 바 또는 상세 본문 자연 배치.

💸

배송비·추가비용 마지막에 튀어나오게 하지 마라

💡 쉽게: 결제 직전에 "배송비 3천원 추가요"가 튀어나오면 고객 1순위 이탈 사유. 상품 페이지부터 배송 조건 투명하게. "2만원 이상 무료배송" 같은 거 미리 노출.

Baymard 리서치: 장바구니 이탈 원인 1위(48%)가 "계산 단계의 예상 밖 추가비용". 상품 페이지에서 배송비 확인 원하는 사용자 64%.

📚 Baymard Cart Abandonment · Checkout Report

🍝 우리 맥락: 쿠팡은 로켓=무료 기본값. 자사몰 차별화 포인트: "XX원 더 담으면 무료배송" 상세페이지에 명시. 가격 하단에 배송 조건 상시 표기.

📋

결제창 너무 복잡하게 만들지 마라

💡 쉽게: 이름·주소·전화·카드·약관동의·쿠폰 등 20개씩 입력 안 받게. 카카오페이·네이버페이로 한 번에 끝나게. 회원가입 강제는 절대 금지.

Baymard 리서치: 이상적 체크아웃은 최대 3단계 + 6~8필드. 평균 사이트는 15필드. 회원가입 강제 시 이탈 26%. 게스트 결제 허용 + 간편결제 SDK로 정보 자동 채우기.

📚 Baymard 체크아웃 필드 최적화 · Mobile Checkout Forms

🍝 우리 맥락: 카페24 기본 주문서는 비회원도 7~9단계. 카카오페이·네이버페이 간편결제 우선 노출로 주소·연락처 SDK 자동 채움. 회원가입 강제 금지(할인 유도 OK).

🔘

버튼 여러 개 같은 크기로 깔지 마라

💡 쉽게: "지금구매 / 장바구니 / 찜 / 공유 / 문의" 다 같은 크기로 늘어놓으면 뭘 눌러야 할지 몰라서 아무 것도 안 눌림. 메인 버튼 1개 크게 + 보조 1개 작게. 나머지는 아이콘 사이즈로.

NN/g 리서치: 선택지가 많을수록 결정 지연 + 분석 마비(Hick's Law: 선택지가 많을수록 결정 시간이 기하급수로 증가하는 심리 법칙). "단순함이 선택의 풍요를 이긴다". 기본은 주 CTA 1개 + 보조 1개.

📚 NN/g Simplicity vs Choice · Visual Hierarchy

🍝 우리 맥락: 상세페이지 하단 고정: [구매하기] 풀폭 다크그린 1개 + 위에 [장바구니] 아웃라인 보조. 문의·찜·공유는 아이콘 사이즈 보조 라인으로.

ℹ️ 각 원칙의 수치는 1차 소스(Apple · Google · W3C · NN/g · Baymard) 공식 문서에서 확인된 값입니다. 링크 클릭 시 원문으로 이동. 세리프·"컬러 4개 이상" 같은 추측 원칙은 의도적으로 제외. 팀 내부 CSS 교훈(덧칠 금지·박스 중첩 등)은 feedback.md에 별도 정리.

Section 05

디자인 역할

감으로만 움직이지 않고, 우리에 어울리는 톤을 사이트들 뒤져가며 레퍼런스로 모읍니다. 브랜드 컬러·톤·스타일은 같이 정해갑니다.

⭐ 최우선순위

모바일 최적화가 항상 제일 먼저입니다. 어떤 작업이든 데스크탑보다 모바일이 우선.

미주

기능 중심 + 도전적 레퍼런스 발굴

CRM 같은 기능적인 부분을 신경쓰고, 새롭고 도전적인 자사몰들을 찾아본다.
브랜드 컬러·톤·스타일은 은우와 같이 정한다.

은우

세련된 디자인 + 구매 편의

디자인적으로 세련되고, 고객이 와서 구경하고 싶고 구매하기 편한 자사몰 만들기.
감에 의존하지 않고 레퍼런스와 함께 톤을 잡아간다.

경태

오류 점검 + 이상향 자사몰 아카이빙

코딩은 모르지만 오류가 없는지 점검하는 역할.
그리고 NotebookLM으로 우리가 좋다고 모아둔 자사몰들을 한 폴더에 쌓아서 공통점·규칙을 계속 뽑아낸다.

🌱 시도해보고 싶은 것

3D 목업 디자인 — 상품 입체감 있는 프리뷰
모션그래픽 — Hero·섹션 전환에 미묘한 움직임

은우의 필요성

현 상황

자사몰 전반을 대표 1인이 단독 관리
디자인 · 기능 · 레퍼런스 탐색 · 구현 전체 포함

문제점

1인 관리로 깊이 있는 탐색과 개선 반복에 한계
자사몰은 핵심 채널이나 투입 가능 시간 부족
이태리정미소 · 카마솥 두 브랜드 병행 시 부하 가중
두 브랜드의 지향 톤이 상이하여 각각의 감각 관리 필요

은우의 역할

은우가 해줄 수 있는 것

자사몰 전반의 디자인 · 기능 · 전환 책임
타사 레퍼런스 지속 탐색과 적용
데이터 기반 구매 전환 개선
새로운 시도(3D 목업 · 모션 그래픽 등) 실험과 안착

기대효과

이태리정미소 자사몰 프리미엄 포지셔닝 안착
카마솥 론칭 및 자사몰 자리잡기 가속
구매 전환율 · 매출의 측정 가능한 개선
대표 작업 부하 분산 → 경영 전략 집중 가능

은우의 궁극적 역할

은우는 단순히 디자인만 하는 인력이 아니다.
자사몰 브랜드 아이덴티티 구현 · 빅데이터 활용 및 지속 개선 · 코딩 · 바이브 모션 등 새로운 시도의 반복.

방문자에게 남길 네 순간의 경험

첫인상

"여긴 뭔가 다르다. 전문적이고 앞서 나간다."

결제 직후

"구매부터 결제까지 불편함이 없었다."

외부 공유

"요새 이런 자사몰이 있더라. 소개해주고 싶다."

새로움

"다른 곳에서 못 보던 게 있다."

Strong	#1a1a1a
Body	#444
Caption	#888
Brand Dark	#2C3E2D
Brand Gold	#D9BC82

Page BG	#fafaf8
Card BG	#ffffff
Soft Gold BG	#fdfaf2
Border Light	#f0f0f0
Border Default	#e5e5e5

XS · Tight	4 / 8
S · Inner	12 / 16
M · Section	24 / 32
L · Hero	60 / 96

H2 Section	18px · 600
H3 Sub	16px · 600
Body	14px · 400
Label	13px · 500
Caption	12px · 400

Padding (mobile)	14px 12px
Radius	8px
Border	1px solid #ededed
Shadow	none (prefer)

이태리정미소의
디자인 결을 담은 팀 가이드.

브랜드 결 — 이태리정미소의 무드

1차 레퍼런스 사이트 — 친절 안내