Communitygithub.com

웹 디자인 디렉터

감정적 의도(Warm/Cold x Active/Calm)를 기준으로 한 시각 디자인 방향 프레임워크입니다. 웹사이트가 어떻게 보이는지가 아니라 어떤 느낌을 주는지에 따라 분류하는 최초의 디자인 참조 시스템으로, 48개의 주석이 달린 공개 웹사이트 참조를 포함합니다.

웹 디자인 디렉터란 무엇인가요?

이 스킬은 브랜드 포지셔닝을 감정적 쿼드런트(Warm/Cold x Active/Calm)에 매핑하여 웹 디자인 프로젝트의 시각적 방향을 설정하는 데 도움을 줍니다. 주요 통찰은 기존 디자인 영감 플랫폼(Awwwards, Dribbble 등)이 시각적 스타일이나 산업별로만 분류하는 반면, 이 스킬은 사용자가 느끼는 감정(안전함, 혁신적, 고급스러움 등)을 기준으로 참조 사이트를 구성한다는 점입니다. 48개의 주석이 달린 공개 웹사이트 라이브러리에서 3-5개의 참조를 선택하고, 각 사이트의 구체적인 디자인 메커니즘(타이포그래피, 색상, 간격, 모션)을 추출하여 브랜드 감정과 일치하는 디자인 방향 문서를 생성합니다. 또한 포지셔닝 불일치를 감지하고 의도적으로 다른 쿼드런트의 요소를 혼합할 수 있도록 안내하여, 디자이너와 AI 에이전트가 '템플릿 같아 보이는' 디자인을 피하고 감정적으로 의도된 디자인을 만들 수 있도록 지원합니다.

지원 대상✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/guia-matthieu/clawfu-skills/tree/HEAD/skills/ai-design/web-design-director
원본 보기→모든 스킬 둘러보기

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

문서

웹 디자인 디렉터은(는) 무엇을 하나요?

감정적 의도(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 타이포그래피.

이 스킬이 하는 일

  1. 감정적 포지셔닝 — 브랜드 포지셔닝을 올바른 감정 쿼드런트에 매핑
  2. 참조 선택 — 타겟 감정과 일치하는 3-5개의 주석이 달린 공개 웹사이트 표면화
  3. 패턴 추출 — 각 감정 효과를 만드는 특정 디자인 메커니즘 식별
  4. 방향 문서 — 팔레트, 타이포그래피, 간격, 모션, 레이아웃 결정이 포함된 디자인 브리프 생성
  5. 불일치 탐지 — 디자인 선택이 브랜드 포지셔닝과 모순될 때 플래깅
  6. 교차 쿼드런트 혼합 — 다른 쿼드런트의 요소를 의도적으로 혼합하도록 안내

사용 방법

새 웹사이트를 위한 디자인 방향 얻기

[브랜드/비즈니스 유형]의 웹사이트를 디자인하고 있습니다.
타겟 고객: [대상].
브랜드 느낌: [2-3개의 감정 단어].
경쟁 대안: [이 브랜드 대신 사용할 것들].
web-design-director 스킬을 로드해주세요.

특정 느낌에 대한 참조 찾기

[감정 설명] 느낌이 드는 웹사이트 참조가 필요합니다.
[피해야 할 느낌]은 제외. 브랜드는 [산업] 분야입니다.
라이브러리에서 5개의 주석이 달린 참조를 보여주세요.

기존 디자인을 브랜드 포지셔닝에 대해 감사하기

현재 사이트: [URL 또는 스크린샷].
브랜드 포지셔닝: [포지셔닝 문구].
디자인이 감정적 의도와 일치하나요? 무엇이 잘못되었나요?

지침

1단계: 감정 쿼드런트 결정

브랜드를 배치하기 위해 다음 질문을 하세요:

## 브랜드 감정 매핑

**1. 방문자가 처음 3초 안에 무엇을 느껴야 합니까?**
   [ ] 안전함, 환영받음, 편안함 (→ Warm)
   [ ] 인상적임, 호기심, 흥미로움 (→ Cold)

**2. 사이트의 에너지 수준은 어느 정도여야 합니까?**
   [ ] 역동적, 앞으로 나아가는, "일이 일어나고 있는" (→ Active)
   [ ] 절제된, 여유로운, "시간을 내서" (→ Calm)

**3. 브랜드와 방문자의 관계는 무엇입니까?**
   [ ] 동료/친구/가이드 (→ Warm)
   [ ] 전문가/권위자/기관 (→ Cold)

**4. 경쟁 대안 — 사람들이 대신 무엇을 사용할까요?**
   (이것이 시각적 영역을 결정합니다. 대안과 DIFERENT해 보여야 합니다)

쿼드런트 결정:

조합쿼드런트시그니처 느낌
Warm + Active에너제틱 웜스"이건 흥미진진하면서도 친근해"
Warm + Calm양육적 편안함"여기서 안전하고 이해받는다고 느껴"
Cold + Active혁신적 힘"이건 최첨단이고 진지해"
Cold + Calm세련된 권위"이건 고급스럽고 독점적이야"

2단계: 라이브러리에서 참조 선택

일치하는 쿼드런트에서 3-5개의 참조를 선택하세요. 각각에 대해 다음을 기록하세요:

  • 어떤 특정 디자인 메커니즘이 감정 효과를 만드는가
  • 어떤 섹션/페이지가 그것을 가장 잘 보여주는가
  • 무엇을 차용할 것인가 vs 무엇을 남겨둘 것인가

교차 쿼드런트 혼합 규칙:

  • 대비를 위해 인접 쿼드런트에서 하나의 요소를 차용하세요 (예: Cold+Active 타이포그래피를 Warm+Calm 팔레트에)
  • 반대 쿼드런트에서 절대 차용하지 마세요 (Warm+Active 사이트에 Cold+Calm 요소 = 혼란)
  • 인접 쿼드런트는 하나의 축을 공유합니다: Warm+Calm과 Warm+Active는 따뜻함을 공유; Cold+Calm과 Cold+Active는 정밀함을 공유

3단계: 디자인 결정 추출

각 디자인 차원에 대해 라이브러리를 참조하여 특정 선택을 하세요:

## 디자인 방향 문서

**쿼드런트**: [Warm+Calm / Warm+Active / Cold+Active / Cold+Calm]
**주요 참조**: [라이브러리의 3개 사이트]
**교차 쿼드런트 악센트**: [인접 쿼드런트의 요소 1개, 있는 경우]

### 색상 팔레트
- **배경**: [특정 색상 + 이를 사용하는 참조 사이트]
- **주요 악센트**: [특정 색상 + 감정적 근거]
- **텍스트**: [어두움/밝음 + 대비율 근거]
- **시스템**: [단색 / 보색 / 유사색]

### 타이포그래피
- **제목**: [세리프/산세리프/디스플레이 + 두께 + 특정 글꼴 제안]
- **본문**: [글꼴 + 크기 + 행간 + 참조의 근거]
- **성격**: [타입이 브랜드에 대해 말하는 것]

### 간격 및 레이아웃
- **밀도**: [넉넉함/적당함/조밀함 + 참조]
- **그리드**: [열 + 최대 너비 + 근거]
- **여백**: [과감함/균형 잡힘/최소]
- **섹션 리듬**: [교대/일관/진행]

### 모션 및 상호작용
- **애니메이션 스타일**: [미묘함/표현적/없음 + 참조]
- **스크롤 동작**: [부드러움/표준/패럴랙스]
- **호버 상태**: [변환 유형 + 타이밍]
- **페이지 전환**: [유형 또는 없음]

### 사진 및 이미지
- **스타일**: [사진/일러스트레이션/추상/혼합]
- **감정 방향**: [미니멀리스트 이미지 디렉터 쿼드런트 참조]
- **처리**: [풀컬러/뮤트/듀오톤/그레인]

### 레이아웃 패턴
- **히어로**: [전폭/포함/분할/텍스트 전용]
- **카드**: [테두리 있음/없음/입체/평면]
- **내비게이션**: [상단/사이드/미니멀/숨김]

4단계: 포지셔닝 검증

최종 확정 전에 불일치 검사를 실행하세요:

## 포지셔닝 불일치 검사

- [ ] 색상 온도가 브랜드의 따뜻함과 일치합니까? (따뜻한 브랜드 = 따뜻한 색상)
- [ ] 애니메이션 수준이 브랜드 에너지와 일치합니까? (차분한 브랜드 ≠ 과격한 애니메이션)
- [ ] 타이포그래피가 브랜드 권위 수준과 일치합니까? (장난기 많은 브랜드 ≠ 올캡스 산세리프)
- [ ] 타겟 고객의 방문자가 환영받는다고 느낄까요, 위협받는다고 느낄까요?
- [ ] 경쟁 대안과 DIFERENT해 보이나요?
- [ ] 이 디자인이 브랜드의 최악의 날(론칭일이 아닌)에도 작동할까요?

참조 라이브러리 — 48개 주석이 달린 공개 웹사이트

WARM + CALM — 양육적 편안함

"나는 여기서 안전하고 이해받는다고 느낀다"

이 쿼드런트의 사이트는 다음을 사용합니다: 따뜻한 색상 팔레트, 넉넉한 간격, 부드러운 이미지, 접근하기 쉬운 타이포그래피, 부드러운 전환. 시각적 인상보다 가독성과 감정적 편안함을 우선시합니다.

#사이트산업주요 디자인 메커니즘가장 공부할 페이지안티패턴 경고
1Headspace웰니스/명상둥근 형태 + 따뜻한 일러스트레이션 + 파스텔 팔레트. 부드러운 포옹처럼 느껴집니다.홈페이지 히어로 + 온보딩 플로우일러스트레이션이 신중하게 균형 잡히지 않으면 유치해질 수 있음
2Allbirds지속 가능 패션어스 톤 사진 + 자연 질감 + 깔끔한 그리드. 제품 우선이지만 따뜻함.제품 상세 페이지개성 없이 너무 "에코-기업"처럼 느껴질 수 있음
3Wildling Shoes아동 신발자연 사진 + 따뜻한 중성색 + 유기적 흐름. 숲속 산책처럼 느껴집니다.홈페이지 스크롤 내러티브자연 이미지에 제품 초점을 잃기 쉬움
4Kinfolk라이프스타일 에디토리얼타이포그래피 주도 + 넉넉한 여백 + 따뜻한 사진. 조용한 자신감.기사 레이아웃콘텐츠가 얇으면 너무 텅 빈 느낌
5Cereal Magazine여행/디자인뮤트된 따뜻한 팔레트 + 에디토리얼 그리드 + 사색적 이미지. 느린 페이스.여행 가이드낮은 대비가 가독성을 해칠 수 있음
6Aesop뷰티/스킨케어따뜻한 톤 제품 사진 + 세리프 타이포그래피 + 절제된 레이아웃. 세련된 따뜻함.매장 찾기 + 제품 페이지Warm+Calm과 Cold+Calm 사이의 경계를 걷습니다
7Everlane윤리적 패션깔끔한 레이아웃 + 따뜻한 라이프스타일 사진 + 투명한 가격. 정직한 따뜻함."회사 소개" 페이지 + 공장 스토리투명성 메시지가 과하면 설교처럼 느껴질 수 있음
8Patagonia아웃도어/목적대담한 따뜻한 사진 + 목적 중심 콘텐츠 + 에디토리얼 깊이. 활동가적 따뜻함.환경 스토리활동주의 중심 디자인은 비활동주의 고객을 소외시킬 수 있음
9Nurture Life아동 식사부드러운 파스텔 + 둥근 UI + 따뜻한 음식 사진. 부모에게 친근함.식사 계획 페이지파스텔 과용은 일반적인 "베이비 브랜드"처럼 느껴질 수 있음
10Organic Basics지속 가능 필수품중성 톤 + 숨 쉴 공간 + 미니멀 내비게이션. 차분한 커머스.제품 카테고리 페이지너무 미니멀하면 "볼 게 없음"처럼 느껴질 수 있음
11Ritual웰니스/보충제따뜻한 노란색 악센트 + 깔끔한 레이아웃 + 과학적 따뜻함. 투명성을 통한 신뢰.성분 추적 페이지노란색 악센트가 과하면 임상적으로 느껴질 수 있음
12Mejuri접근 가능한 주얼리따뜻한 라이프스타일 사진 + 부드러운 골드 악센트 + 깔끔한 전자상거래 그리드. 접근 가능한 럭셔리.컬렉션 페이지럭셔리 감성과 접근 가능한 가격의 균형 맞추기

교차 쿼드런트 패턴: 모든 Warm+Calm 사이트는 넉넉한 행간(1.6-1.8), 뮤트된/어스 톤 팔레트, 자연 환경의 실제 사람들을 담은 사진을 공유합니다. 내비게이션은 항상 단순합니다. 애니메이션은 항상 미묘합니다.

WARM + ACTIVE — 에너제틱 웜스

"이건 흥미진진하면서도 친근해"

이 쿼드런트의 사이트는 다음을 사용합니다: 대담한 색상, 역동적인 애니메이션, 장난기 많은 일러스트레이션, 에너제틱 타이포그래피, 인터랙티브 요소. 열정적인 친구가 멋진 것을 보여주는 것처럼 느껴집니다.

#사이트산업주요 디자인 메커니즘가장 공부할 페이지안티패턴 경고
1Notion생산성따뜻한 일러스트레이션 + 깔끔한 제품 UI + 친근한 마이크로 인터랙션. 정리된 열정.템플릿 갤러리 + 홈페이지일러스트레이션 스타일이 많이 복제됨 — 자신만의 것을 찾으세요
2Figma디자인 도구생생한 그라데이션 + 협업 에너지 + 대담한 타입. 차갑지 않은 디자인 중심.커뮤니티/플러그인 페이지그라데이션 중심 디자인은 빨리 구식이 됩니다
3Mailchimp이메일 마케팅독특한 일러스트레이션 + 따뜻한 브랜드 노란색 + 장난기 많은 UI. 개성 중심.홈페이지 + 가격 페이지독특한 일러스트레이션 스타일은 강력한 브랜드 헌신 필요
4Loom비디오 커뮤니케이션따뜻한 보라색 + 접근하기 쉬운 UI + 제품 중심 애니메이션. 기술적으로 느껴지지 않는 기술.제품 데모 섹션보라색 따뜻함이 과포화되면 기업처럼 느껴질 수 있음
5Intercom고객 커뮤니케이션대담한 색상 + 대화형 카피 + 역동적 레이아웃. 친근한 권위.제품 투어 페이지대담한 팔레트는 여백 규율 없이 압도적일 수 있음
6Monday.com

…

[truncated for translation]

관련 스킬

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community