웹 디자인 디렉터
감정적 의도(Warm/Cold x Active/Calm)로 구성된 시각 디자인 방향 프레임워크입니다. 외형이 아닌 느낌에 따라 사이트를 분류하는 최초의 디자인 레퍼런스 시스템이며, 48개의 주석이 달린 공개 웹사이트 참조 자료를 포함합니다.
이 스킬을 사용해야 할 때
- 새 웹사이트 프로젝트를 시작하고, 코딩 전에 시각적 방향을 결정해야 할 때
- 클라이언트가 "전문적이면서도 따뜻한 느낌"을 원한다고 말하고, 이를 구체적인 디자인 결정으로 전환해야 할 때
- 브랜드 포지셔닝(Dunford, StoryBrand)을 보유하고 있으며, 이를 시각적 언어로 매핑해야 할 때
- 디자인 접근 방식(다크 모드 vs 라이트, 미니멀 vs 리치, 에디토리얼 vs 프로덕트)을 선택할 때
- 브랜드의 감정적 영역과 일치하는 레퍼런스로 무드 보드를 구축할 때
- 의도적인 방향성이 부족하여 AI 생성 디자인이 "템플릿처럼" 보일 때
방법론 기반
출처:
- 감정 디자인(Don Norman, 2004) — 본능적, 행동적, 반성적 처리
- 브랜드 포지셔닝 이론(April Dunford, "Obviously Awesome") — 경쟁 대안이 시각적 영역을 결정
- 색채 심리학 연구 — 따뜻함/차가움 스펙트럼과 행동 반응
- 웹 디자인 패턴 분석 — 4가지 감정 사분면에 걸쳐 48개의 공개 사이트 분석
- 12개 디자인 영감 플랫폼(Awwwards, Dribbble, Godly, Mobbin 등)의 갭 분석
핵심 통찰력: 기존의 모든 디자인 영감 플랫폼(Awwwards, Dribbble, Behance, Godly, Mobbin, SiteInspire, Lapa.ninja)은 비주얼 스타일, 업계, 플랫폼 또는 색상별로 분류합니다. 감정적 의도로 구성하는 플랫폼은 ZERO입니다. 이것이 갭입니다. "미니멀 다크 사이트"는 고급스러움(Cartier)을 느낄 수도 있고 위협적(CrowdStrike)으로 느낄 수도 있습니다 — 시각적 스타일은 동일하지만 감정적 효과는 반대입니다. 의도 없는 스타일은 장식입니다. 스타일 없는 의도는 와이어프레임입니다.
감정 사분면:
WARM
(접근, 신뢰)
|
Warm+Active | Warm+Calm
(에너지, | (안락함,
기쁨) | 안전)
|
ACTIVE --------+-------- CALM
(모멘텀, | (절제,
혁신) | 권위)
|
Cold+Active | Cold+Calm
(혁신, | (고급,
파워) | 배타성)
|
COLD
(거리, 정밀함)
이것이 중요한 이유: 브랜드 포지셔닝이 디자인할 사분면을 결정합니다. 아동 심리학자는 Warm+Calm에 속합니다. 개발자 도구는 Cold+Active에 속합니다. Vercel의 미학으로 아동 심리학자 사이트를 디자인하는 것은 아무리 "깔끔"해 보여도 포지셔닝 불일치입니다.
Claude가 하는 일 vs 사용자가 결정하는 일
"Claude가 레퍼런스와 패턴을 선택합니다. 사용자가 감정적 적합성을 검증합니다."
| Claude가 처리 | 사용자가 제공 |
|---|---|
| 브랜드 포지셔닝을 감정 사분면에 매핑 | 브랜드 가치, 대상 고객, 경쟁 대안 |
| 라이브러리에서 관련 레퍼런스 선택 | 직감 확인: 이 레퍼런스가 내 브랜드처럼 느껴지나요? |
| 디자인 패턴 추출(타이포그래피, 여백, 색상, 모션) | 예산 및 기술적 제약 |
| 근거가 포함된 디자인 방향 문서 생성 | 코딩 시작 전 최종 방향 승인 |
| 포지셔닝 불일치 플래깅(따뜻한 브랜드 + 차가운 디자인) | Claude가 볼 수 없는 클라이언트 맥락 |
기억하세요: 레퍼런스 라이브러리는 대화의 시작점이지 처방전이 아닙니다. 최고의 디자인 방향은 종종 사분면 간 요소를 결합하는 데서 나옵니다. 예를 들어 Warm+Calm 팔레트와 Cold+Active 타이포그래피를 조합하는 것입니다.
이 스킬이 하는 일
- 감정적 포지셔닝 — 브랜드 포지셔닝을 올바른 감정 사분면에 매핑
- 레퍼런스 선택 — 대상 감정과 일치하는 3-5개의 주석이 달린 공개 웹사이트 제시
- 패턴 추출 — 각 감정 효과를 만드는 특정 디자인 메커니즘 식별
- 방향 문서 — 팔레트, 타이포그래피, 여백, 모션, 레이아웃 결정이 포함된 디자인 브리프 생성
- 불일치 감지 — 디자인 선택이 브랜드 포지셔닝과 모순될 때 플래깅
- 사분면 간 혼합 — 다른 사분면의 요소를 의도적으로 혼합하도록 안내
사용 방법
새 웹사이트에 대한 디자인 방향 얻기
[브랜드/비즈니스 유형]의 웹사이트를 디자인하고 있습니다.
대상 고객: [누구].
브랜드 느낌: [2-3개의 감정 단어].
경쟁 대안: [이 브랜드 대신 사용할 것].
web-design-director 스킬을 로드해 주세요.
특정 느낌에 대한 레퍼런스 찾기
[감정 설명] 느낌의 웹사이트 레퍼런스가 필요합니다.
[피해야 할 것]은 제외. 브랜드는 [업계]에 있습니다.
라이브러리에서 주석이 달린 레퍼런스 5개를 보여주세요.
브랜드 포지셔닝에 대한 기존 디자인 감사
현재 사이트는 다음과 같습니다: [URL 또는 스크린샷].
브랜드 포지셔닝은: [포지셔닝 설명].
디자인이 감정적 의도와 일치하나요? 무엇이 잘못되었나요?
지침
1단계: 감정 사분면 결정
다음 질문을 통해 브랜드를 배치합니다:
## 브랜드 감정 매핑
**1. 방문자가 처음 3초 동안 무엇을 느껴야 하나요?**
[ ] 안전, 환영, 편안함 (→ Warm)
[ ] 인상적, 호기심, 흥미로움 (→ Cold)
**2. 사이트의 에너지 수준은 어때야 하나요?**
[ ] 역동적, 전진하는, "무언가 일어나고 있다" (→ Active)
[ ] 절제된, 여유로운, "천천히 시간을 가져라" (→ Calm)
**3. 브랜드와 방문자의 관계는 무엇인가요?**
[ ] 동료/친구/가이드 (→ Warm)
[ ] 전문가/권위자/기관 (→ Cold)
**4. 경쟁 대안 — 사람들이 대신 무엇을 사용할까요?**
(이것이 시각적 영역을 결정합니다 — 대안과 달라야 합니다)
사분면 결정:
| 조합 | 사분면 | 시그니처 느낌 |
|---|---|---|
| Warm + Active | 활기찬 온기 | "이건 흥미롭고 친근해" |
| Warm + Calm | 양육하는 안락함 | "나는 여기서 안전하고 이해받는 기분이야" |
| Cold + Active | 혁신적인 파워 | "이건 최첨단이고 진지해" |
| Cold + Calm | 세련된 권위 | "이건 고급스럽고 배타적이야" |
2단계: 라이브러리에서 레퍼런스 선택
일치하는 사분면에서 3-5개의 레퍼런스를 선택하세요. 각각에 대해 다음을 기록합니다:
- 감정 효과를 만드는 특정 디자인 메커니즘
- 가장 잘 보여주는 섹션/페이지
- 무엇을 가져오고 무엇을 남겨둘지
사분면 간 혼합 규칙:
- 대비를 위해 인접 사분면에서 하나의 요소를 빌려옴 (예: Warm+Calm 팔레트에 Cold+Active 타이포그래피)
- 반대 사분면에서는 절대 빌리지 않음 (Warm+Active 사이트에 Cold+Calm 요소 = 혼란)
- 인접 사분면은 하나의 축을 공유함: Warm+Calm과 Warm+Active는 온기를 공유; Cold+Calm과 Cold+Active는 정밀함을 공유
3단계: 디자인 결정 추출
각 디자인 차원에 대해 라이브러리를 참조하여 특정 선택을 합니다:
## 디자인 방향 문서
**사분면**: [Warm+Calm / Warm+Active / Cold+Active / Cold+Calm]
**주요 레퍼런스**: [라이브러리의 3개 사이트]
**사분면 간 악센트**: [인접 사분면의 요소 1개, 해당되는 경우]
### 색상 팔레트
- **배경**: [특정 색상 + 사용하는 레퍼런스 사이트]
- **주요 악센트**: [특정 색상 + 감정적 근거]
- **텍스트**: [어두움/밝음 + 대비 비율 근거]
- **시스템**: [단색 / 보색 / 유사]
### 타이포그래피
- **제목**: [세리프/산세리프/디스플레이 + 두께 + 특정 글꼴 제안]
- **본문**: [글꼴 + 크기 + 줄 높이 + 레퍼런스 근거]
- **성격**: [타입이 브랜드에 대해 말하는 것]
### 여백 및 레이아웃
- **밀도**: [넉넉함/보통/조밀함 + 레퍼런스]
- **그리드**: [열 + 최대 너비 + 근거]
- **공백**: [적극적/균형/최소]
- **섹션 리듬**: [교대/일관/진행]
### 모션 및 상호작용
- **애니메이션 스타일**: [미묘/표현적/없음 + 레퍼런스]
- **스크롤 동작**: [부드러움/표준/패럴랙스]
- **호버 상태**: [변환 유형 + 타이밍]
- **페이지 전환**: [유형 또는 없음]
### 사진 및 이미지
- **스타일**: [사진/일러스트레이션/추상/혼합]
- **감정 방향**: [minimalist-image-director 사분면 참조]
- **처리**: [풀컬러/뮤트/듀오톤/그레인]
### 레이아웃 패턴
- **히어로**: [풀블리드/포함/분할/텍스트 전용]
- **카드**: [테두리 있음/없음/입체/평면]
- **내비게이션**: [상단/사이드/최소/숨김]
4단계: 포지셔닝에 대한 검증
최종 확정 전에 불일치 확인을 실행합니다:
## 포지셔닝 불일치 확인
- [ ] 색상 온도가 브랜드 온기와 일치합니까? (따뜻한 브랜드 = 따뜻한 색상)
- [ ] 애니메이션 수준이 브랜드 에너지와 일치합니까? (차분한 브랜드 ≠ 공격적인 애니메이션)
- [ ] 타이포그래피가 브랜드 권위 수준과 일치합니까? (장난기 있는 브랜드 ≠ 모두 대문자 산세리프)
- [ ] 대상 고객의 방문자가 환영받거나 위협받는다고 느낄까요?
- [ ] 경쟁 대안과 다르게 보입니까?
- [ ] 이 디자인이 브랜드의 최악의 날(런칭일뿐만 아니라)에도 작동할까요?
레퍼런스 라이브러리 — 48개의 주석이 달린 공개 웹사이트
WARM + CALM — 양육하는 안락함
"나는 여기서 안전하고 이해받는 기분이야"
이 사분면의 사이트는 다음을 사용합니다: 따뜻한 색상 팔레트, 넉넉한 여백, 부드러운 이미지, 접근하기 쉬운 타이포그래피, 부드러운 전환. 시각적 임팩트보다 가독성과 정서적 편안함을 우선시합니다.
| # | 사이트 | 업계 | 주요 디자인 메커니즘 | 연구할 최적 페이지 | 안티 패턴 주의 |
|---|---|---|---|---|---|
| 1 | Headspace | 웰니스/명상 | 둥근 모양 + 따뜻한 일러스트레이션 + 파스텔 팔레트. 부드러운 포옹 같은 느낌. | 홈페이지 히어로 + 온보딩 흐름 | 일러스트레이션이 조심스럽게 균형을 잡지 않으면 유치해질 수 있음 |
| 2 | Allbirds | 지속 가능 패션 | Earth tone 사진 + 자연스러운 텍스처 + 깔끔한 그리드. 제품 우선이지만 따뜻함. | 제품 상세 페이지 | 개성 없이 "에코-기업"처럼 느껴질 수 있음 |
| 3 | Wildling Shoes | 아동 신발 | 자연 사진 + 따뜻한 중성색 + 유기적 흐름. 숲속 산책 같은 느낌. | 홈페이지 스크롤 내러티브 | 자연 이미지에 제품 초점을 잃기 쉬움 |
| 4 | Kinfolk | 라이프스타일 에디토리얼 | 타이포그래피 주도 + 넉넉한 공백 + 따뜻한 사진. 조용한 자신감. | 기사 레이아웃 | 콘텐츠가 부족하면 너무 허전해 보일 수 있음 |
| 5 | Cereal Magazine | 여행/디자인 | 뮤트된 따뜻한 팔레트 + 에디토리얼 그리드 + 명상적인 이미지. 느린 템포. | 여행 가이드 | 낮은 대비가 가독성을 해칠 수 있음 |
| 6 | Aesop | 뷰티/스킨케어 | 따뜻한 톤의 제품 사진 + 세리프 타이포그래피 + 절제된 레이아웃. 세련된 온기. | 매장 찾기 + 제품 페이지 | Warm+Calm과 Cold+Calm 사이의 경계를 걷고 있음 |
| 7 | Everlane | 윤리적 패션 | 깔끔한 레이아웃 + 따뜻한 라이프스타일 사진 + 투명한 가격. 정직한 온기. | "회사 소개" 페이지 + 공장 스토리 | 투명성 메시지가 과하면 설교처럼 느껴질 수 있음 |
| 8 | Patagonia | 아웃도어/목적 | 대담한 따뜻한 사진 + 목적 중심 콘텐츠 + 에디토리얼 깊이. 활동가적 온기. | 환경 스토리 | 활동주의 중심 디자인은 비활동주의 고객을 소외시킬 수 있음 |
| 9 | Nurture Life | 어린이 식사 | 부드러운 파스텔 + 둥근 UI + 따뜻한 음식 사진. 학부모 친화적. | 식사 계획 페이지 | 파스텔 과용은 일반적인 "베이비 브랜드"처럼 느껴질 수 있음 |
| 10 | Organic Basics | 지속 가능 필수품 | 중성색 + 숨 쉴 공간 + 최소 내비게이션. 차분한 커머스. | 제품 카테고리 페이지 | 너무 미니멀하면 "볼 게 없다"는 느낌을 줄 수 있음 |
| 11 | Ritual | 웰니스/보충제 | 따뜻한 노란색 악센트 + 깔끔한 레이아웃 + 과학적 온기. 투명성을 통한 신뢰. | 성분 추적 페이지 | 노란색 악센트가 과하면 임상적으로 느껴질 수 있음 |
| 12 | Mejuri | 접근 가능 주얼리 | 따뜻한 라이프스타일 사진 + 부드러운 골드 악센트 + 깔끔한 전자상거래 그리드. 접근 가능한 럭셔리. | 컬렉션 페이지 | 고급스러움과 접근 가능한 가격의 균형 |
사분면 간 패턴: 모든 Warm+Calm 사이트는 넉넉한 줄 높이(1.6-1.8), 뮤트된/어스 톤 팔레트, 자연 환경의 실제 인간을 특징으로 하는 사진을 공유합니다. 내비게이션은 항상 단순합니다. 애니메이션은 항상 미묘합니다.
WARM + ACTIVE — 활기찬 온기
"이건 흥미롭고 친근해"
이 사분면의 사이트는 다음을 사용합니다: 대담한 색상, 역동적인 애니메이션, 장난기 있는 일러스트레이션, 활기찬 타이포그래피, 대화형 요소. 열정적인 친구가 멋진 것을 보여주는 것처럼 느껴집니다.
| # | 사이트 | 업계 | 주요 디자인 메커니즘 | 연구할 최적 페이지 | 안티 패턴 주의 |
|---|---|---|---|---|---|
| 1 | Notion | 생산성 | 따뜻한 일러스트레이션 + 깔끔한 제품 UI + 친근한 미세 상호작용. 조직된 열정. | 템플릿 갤러리 + 홈페이지 | 일러스트레이션 스타일이 많이 복제됨 — 자신만의 것을 찾으세요 |
| 2 | Figma | 디자인 도구 | 생생한 그라데이션 + 협업 에너지 + 대담한 타이포그래피. 차갑지 않은 디자인 중심. | 커뮤니티/플러그인 페이지 | 그라데이션 중심 디자인은 빨리 구식이 됨 |
| 3 | Mailchimp | 이메일 마케팅 | 독특한 일러스트레이션 + 따뜻한 브랜드 노란색 + 장난기 있는 UI. 개성 중심. | 홈페이지 + 가격 페이지 | 독특한 일러스트레이션 스타일은 강력한 브랜드 헌신 필요 |
| 4 | Loom | 비디오 커뮤니케이션 | 따뜻한 보라색 + 접근하기 쉬운 UI + 제품 중심 애니메이션. 기술적이지 않은 기술. | 제품 데모 섹션 | 보라색 온기가 과포화되면 기업처럼 느껴질 수 있음 |
| 5 | Intercom | 고객 커뮤니케이션 | 대담한 색상 + 대화형 카피 + 역동적인 레이아웃. 친근한 권위. | 제품 둘러보기 페이지 | 대담한 팔레트는 공백 규율 없이 압도적일 수 있음 |
| 6 | Monday.com | 프로젝트 관리 | 밝은 색상 대비 + 대담한 타이포그래피 + 역동적인 데이터 시각화 + 애니메이션 보드. | 보드 템플릿 + 홈페이지 | 밝은 색상이 시각적 혼란을 초래하지 않도록 주의 |