Web Design System Agent Skill 완전 가이드

게시 2026/01/23 업데이트 2026/01/24

By BLUEBUG

135 분읽는 시간

뻔한 디자인을 넘어, 독창적인 웹을 만드는 법

작성일: 2026년 1월 23일
버전: 1.0
대상 독자: 웹 디자이너, 웹 기획자, 프론트엔드 개발자, UX/UI 전문가

1. 들어가며: 왜 모든 웹사이트가 비슷해 보일까

1.1 디자인 동질화 현상

최근 몇 년간 웹 디자인을 관찰해보면 놀라운 현상을 발견할 수 있습니다. 전 세계 수많은 스타트업과 기업 웹사이트들이 마치 복사한 듯 비슷한 모습을 하고 있습니다. 보라색에서 파란색으로 흐르는 그라데이션 배경, 중앙에 정렬된 큰 제목, 그 아래 행동 유도 버튼, 그리고 3개의 박스로 나뉜 기능 설명 섹션. 이런 패턴은 너무나 흔해서, 어떤 웹사이트를 보든 “어디선가 본 것 같은” 느낌을 받게 됩니다.

이런 현상이 발생하는 이유는 여러 가지입니다. 첫째, shadcn/ui, Material-UI, Tailwind UI 같은 인기 있는 디자인 시스템과 컴포넌트 라이브러리의 확산입니다. 이런 도구들은 분명 훌륭하고 유용하지만, 많은 디자이너와 개발자들이 기본 스타일을 그대로 사용하면서 웹사이트들이 비슷해지고 있습니다.

둘째, 디자인 트렌드의 빠른 확산입니다. Dribbble이나 Behance 같은 플랫폼에서 인기를 얻은 디자인 스타일이 빠르게 복제됩니다. 한때 모든 웹사이트가 플랫 디자인을 사용했고, 그 다음에는 네온 색상과 글래스모피즘이 유행했으며, 지금은 보라색 그라데이션이 대세입니다.

셋째, AI 도구의 역설입니다. AI 디자인 도구들이 발전하면서 누구나 쉽게 웹사이트를 만들 수 있게 되었지만, AI는 학습 데이터에서 가장 흔한 패턴을 재현하는 경향이 있습니다. 결과적으로 AI로 만든 웹사이트들이 더욱 비슷해지는 현상이 발생합니다.

1.2 독창성이 중요한 이유

그렇다면 왜 독창성이 중요할까요? 비즈니스 관점에서 보면, 차별화되지 않은 디자인은 브랜드 인지도를 낮춥니다. 사용자는 수많은 비슷한 웹사이트 중에서 여러분의 사이트를 기억하지 못합니다. 경쟁사와 구별되지 않는 디자인은 마케팅 비용을 증가시키고, 고객 이탈률을 높입니다.

사용자 경험 관점에서도 독창성은 중요합니다. 예상 가능한 디자인은 안전하지만 지루합니다. 사용자는 새롭고 흥미로운 경험을 원합니다. 물론 사용성을 해치지 않는 선에서의 독창성이어야 하지만, 적절한 균형을 찾는다면 사용자 만족도와 브랜드 선호도를 크게 높일 수 있습니다.

디자이너의 관점에서도 매번 같은 패턴을 반복하는 것은 창의성을 저해합니다. 진정한 디자인 실력은 제약 속에서 창의적인 해결책을 찾는 능력입니다. 기존 템플릿에 의존하면 이런 능력을 기를 수 없습니다.

1.3 AI 시대의 딜레마

AI 디자인 도구의 등장은 이런 상황을 더욱 복잡하게 만들었습니다. ChatGPT, Claude, Midjourney 같은 도구들은 놀라운 능력을 보여주지만, 동시에 새로운 문제를 야기했습니다. AI에게 “스타트업 랜딩 페이지를 만들어줘”라고 요청하면, 열에 아홉은 보라색 그라데이션과 shadcn/ui 스타일의 결과물을 내놓습니다.

이는 AI의 본질적인 특성 때문입니다. AI는 학습 데이터에서 가장 확률이 높은 답을 생성합니다. 즉, 가장 흔한 디자인을 재현하는 것입니다. 이것이 바로 “AI 미학의 평준화”라는 문제입니다.

그렇다면 AI 시대에 독창적인 디자인은 불가능한 것일까요? 아닙니다. 오히려 AI를 올바르게 가이드한다면, AI는 인간 디자이너보다 더 다양하고 창의적인 아이디어를 제시할 수 있습니다. 핵심은 AI에게 “어떻게” 질문하느냐입니다.

1.4 이 가이드가 제시하는 해결책

이 가이드는 AI 디자인 도구를 활용하면서도 독창성을 유지하는 방법을 제시합니다. 그 핵심은 web-design-system Agent Skill과 Verbalized Sampling 기법입니다.

web-design-system은 단순한 디자인 가이드가 아닙니다. 이것은 AI가 창의적으로 사고하도록 유도하는 시스템입니다. 먼저 AI에게 가장 뻔한 디자인이 무엇인지 식별하게 하고, 그것을 의도적으로 피하도록 만듭니다. 동시에 웹 접근성, 사용성, 성능 같은 기본적인 품질 기준은 반드시 지키도록 합니다.

이 가이드를 통해 여러분은:

뻔한 디자인 패턴을 식별하고 피하는 방법을 배웁니다
AI에게 창의적인 대안을 요구하는 프롬프트 기법을 익힙니다
한글 웹사이트 특유의 디자인 요구사항을 이해합니다
독창성과 사용성의 균형을 맞추는 법을 배웁니다
기업 수준의 디자인 시스템을 구축하는 방법을 습득합니다

2. Agent Skills 혁명의 시작

2.1 2026년 1월, 웹 개발의 게임 체인저

2026년 1월 18일, Vercel이 발표한 ‘Agent Skills’는 AI 개발 도구의 역사에서 중요한 전환점이 되었습니다. 이것은 단순히 새로운 도구의 출시가 아니라, AI와 개발자가 협업하는 방식의 근본적인 변화를 의미합니다.

Agent Skills 이전의 세계를 생각해봅시다. AI 코딩 도구를 사용하려면 매번 긴 프롬프트를 작성해야 했습니다. “이 웹사이트를 만들 때는 이런 색상을 사용하고, 저런 레이아웃을 피하고, 접근성은 이렇게 확보하고…” 같은 지시사항을 반복적으로 입력했습니다. 도구를 바꾸면 모든 설정을 처음부터 다시 해야 했고, 팀원들과 가이드라인을 공유하는 것도 복잡했습니다.

Agent Skills는 이 모든 것을 바꿨습니다. 이제 베스트 프랙티스를 ‘스킬’이라는 재사용 가능한 패키지로 만들어, npm 패키지를 설치하듯 간단하게 AI에게 추가할 수 있습니다. 한 번 만든 스킬은 여러 프로젝트에서, 여러 팀원과, 여러 AI 도구에서 동일하게 사용할 수 있습니다.

2.2 Skills.sh 생태계의 탄생

Agent Skills와 함께 등장한 것이 Skills.sh(https://skills.sh)입니다. 이것은 AI 에이전트 스킬의 중앙 허브로, npm registry가 자바스크립트 패키지의 생태계를 만든 것처럼, AI 스킬의 생태계를 만들고 있습니다.

Skills.sh에서는 누구나 스킬을 만들어 공유할 수 있습니다. Vercel 같은 대기업부터 개인 개발자까지, 전 세계 사람들이 자신의 전문 지식을 스킬로 만들어 올리고 있습니다. 이것은 오픈소스의 정신이 AI 시대에도 계속되고 있음을 보여줍니다.

현재 Skills.sh에는 다양한 카테고리의 스킬들이 있습니다:

프론트엔드 개발 (React, Vue, Svelte 등)
백엔드 개발 (Node.js, Python, Go 등)
데이터베이스 디자인 (PostgreSQL, MongoDB 등)
웹 디자인 (UI/UX, 접근성, 성능 등)
배포 및 운영 (CI/CD, 모니터링 등)

2.3 주요 공식 Skills 살펴보기

Skills.sh 생태계에는 몇 가지 주목할 만한 공식 스킬들이 있습니다.

Vercel의 react-best-practices는 React와 Next.js 성능 최적화에 특화되어 있습니다. 10년 이상의 웹 개발 노하우가 집약된 이 스킬은 40개 이상의 성능 규칙을 담고 있습니다. 네트워크 워터폴 제거, 번들 크기 축소, 리렌더링 제어 등 8개 영역에 걸쳐 구체적인 가이드를 제공합니다.

예를 들어, AI가 코드를 리뷰할 때 “이 컴포넌트에서 인라인 함수를 사용하고 있어서 매 렌더링마다 새로운 함수가 생성됩니다. useCallback으로 메모이제이션하는 것을 고려해보세요”라고 제안할 수 있습니다. 이런 세밀한 최적화는 시니어 개발자의 노하우인데, 스킬을 통해 주니어 개발자도 활용할 수 있습니다.

Vercel의 web-design-guidelines는 UI/UX 품질 향상에 초점을 맞춥니다. 100개 이상의 규칙이 포함되어 있으며, 접근성, 폼 동작, 애니메이션, 타이포그래피, 다크 모드, 국제화 등을 다룹니다. 이 스킬은 AI가 단순히 예쁜 디자인이 아니라, 모든 사용자가 사용할 수 있는 포용적인 디자인을 만들도록 가이드합니다.

Anthropic의 frontend-design이 특히 흥미로운 이유는 Verbalized Sampling 기법을 사용하기 때문입니다. 이 스킬은 AI에게 먼저 “가장 흔한 디자인이 무엇인지” 말하게 한 후, 그것을 의도적으로 피하도록 만듭니다. 이것이 바로 우리 web-design-system 스킬의 핵심 영감이 되었습니다.

2.4 왜 Agent Skills가 게임 체인저인가

Agent Skills가 혁명적인 이유는 세 가지입니다.

첫째, 재사용성입니다. 한 번 만든 스킬은 어디서든 사용할 수 있습니다. 프로젝트를 바꿔도, 팀을 옮겨도, AI 도구를 교체해도 같은 스킬을 사용할 수 있습니다. 이것은 개발자의 생산성을 크게 높입니다.

둘째, 표준화입니다. 팀 전체가 동일한 스킬을 사용하면, 모든 팀원이 같은 가이드라인을 따르는 AI 도구를 사용하게 됩니다. 코드 리뷰 시간이 줄어들고, 일관성 있는 코드베이스를 유지할 수 있습니다.

셋째, 진화 가능성입니다. 스킬은 살아있는 문서입니다. 새로운 베스트 프랙티스가 발견되면 스킬을 업데이트하고, 모든 사용자가 최신 버전을 받을 수 있습니다. 이것은 지속적인 개선을 가능하게 합니다.

2.5 한국 시장의 특수성과 기회

흥미롭게도, 현재 Skills.sh에는 한글이나 한국 시장에 특화된 스킬이 거의 없습니다. 대부분의 스킬이 영문 중심이고, 글로벌 시장을 대상으로 합니다. 이것은 한국 개발자와 디자이너에게 큰 기회입니다.

한국의 웹 환경은 독특한 특성이 있습니다. 한글 타이포그래피는 영문과 완전히 다른 접근이 필요하고, 한국 사용자의 웹 사용 패턴도 서구와 다릅니다. 모바일 사용 비율이 매우 높고, 빠른 속도를 중시하며, 정보 밀도가 높은 페이지를 선호하는 경향이 있습니다.

또한 한국에는 독특한 법적 요구사항이 있습니다. 개인정보보호법, 전자금융거래법, 장애인차별금지법 등 웹사이트가 준수해야 할 규정들이 있습니다. 이런 한국 특유의 맥락을 이해하는 AI 스킬은 큰 가치가 있습니다.

web-design-system 스킬은 바로 이런 간극을 메우기 위해 만들어졌습니다. 글로벌 베스트 프랙티스에 한국 시장의 특수성을 더한 것입니다.

3. web-design-system Skill 깊이 이해하기

3.1 탄생 배경과 철학

web-design-system 스킬은 두 가지 관찰에서 출발했습니다.

첫 번째 관찰은 AI 디자인 도구의 한계였습니다. Claude, ChatGPT, Midjourney 같은 도구들에게 웹 디자인을 요청하면, 놀라울 정도로 비슷한 결과물이 나왔습니다. 보라색 그라데이션, 중앙 정렬, shadcn/ui 스타일… 마치 하나의 템플릿에서 복사한 것처럼요.

이것은 AI의 잘못이 아닙니다. AI는 학습 데이터에서 가장 확률이 높은 패턴을 재현합니다. 인터넷에 가장 많이 존재하는 디자인 패턴이 바로 이런 스타일이니, AI가 그것을 재현하는 것은 자연스러운 일입니다.

두 번째 관찰은 Anthropic의 frontend-design 스킬이었습니다. 이 스킬은 Verbalized Sampling이라는 흥미로운 기법을 사용했습니다. AI에게 먼저 “가장 흔한 선택”을 말하게 한 후, 그것을 피하게 만드는 방식이었습니다. 이 접근법이 매우 효과적이라는 것을 발견했습니다.

web-design-system은 이 두 관찰을 결합했습니다. Verbalized Sampling 기법을 채택하되, 한글 웹사이트의 특수성을 반영하고, 웹 기획부터 디자인, 개발까지 전체 워크플로우를 고려한 종합적인 스킬을 만들기로 했습니다.

3.2 핵심 구성 요소

web-design-system 스킬은 크게 다섯 가지 핵심 요소로 구성됩니다.

1. Verbalized Sampling 엔진

이것이 스킬의 핵심입니다. AI에게 창의적으로 사고하도록 유도하는 체계적인 프로세스입니다.

먼저 AI에게 “이 유형의 웹사이트에서 가장 흔한 디자인 패턴 5가지”를 리스트하게 합니다. 예를 들어 SaaS 스타트업이라면:

보라색 그라데이션 배경
중앙 정렬 히어로 섹션
shadcn/ui 컴포넌트
3개 박스 Feature 섹션
둥근 모서리 카드

그 다음 AI에게 “이것들을 완전히 피하면서 창의적인 대안 3가지”를 제안하게 합니다. AI는 완전히 다른 접근을 시도합니다:

딥 포레스트 색상 팔레트 (#0D3B2E + #E8B54D)
비대칭 레이아웃
커스텀 디자인 시스템

마지막으로 AI에게 “왜 이것이 창의적인지” 설명하게 합니다. 이 과정에서 AI는 자신의 선택을 정당화하면서, 더 깊이 있는 사고를 하게 됩니다.

2. 안티패턴 라이브러리

스킬에는 피해야 할 디자인 패턴의 광범위한 데이터베이스가 포함되어 있습니다.

색상 안티패턴:

보라색 그라데이션 (#667eea → #764ba2)
파란색→보라색 (#4facfe → #00f2fe)
SaaS 파란색 (#3b82f6)
네온 색상 (#00ffff, #ff00ff)

레이아웃 안티패턴:

중앙 정렬 히어로 + CTA 버튼
3개 박스 Feature 섹션
지그재그 교차 섹션
동일 크기 카드 그리드

컴포넌트 안티패턴:

shadcn/ui 기본 스타일
Material-UI 기본 테마
Bootstrap 느낌 버튼
8px 둥근 모서리

타이포그래피 안티패턴:

Inter + Inter (헤딩, 본문 모두)
Montserrat Bold 제목
Poppins everywhere
전체 대문자 (ALL CAPS)

이 라이브러리는 계속 업데이트됩니다. 새로운 트렌드가 지나치게 확산되면 안티패턴에 추가됩니다.

3. 한글 최적화 시스템

한글은 영문과 완전히 다른 특성을 가지고 있습니다.

먼저 글자 구조가 다릅니다. 영어는 26개 알파벳의 조합이지만, 한글은 자음과 모음의 조합으로 수천 개의 글자를 만듭니다. 한글은 각 글자가 여러 획으로 이루어져 있어, 영문보다 시각적으로 복잡합니다.

이런 차이 때문에 한글은 더 큰 폰트 크기와 더 넓은 행간이 필요합니다. web-design-system은 다음을 권장합니다:

기본 폰트: Pretendard Variable (한글 최적화)
행간: 1.6-1.8 (영문은 1.5)
자간: -0.01em (약간 타이트)
단어 분리: word-break: keep-all

또한 한글과 영문을 혼용할 때의 처리도 다룹니다. “React 컴포넌트”, “REST API” 같은 표현에서 한글과 영문의 높이를 맞추는 방법, 숫자 표기를 일관되게 하는 방법 등을 가이드합니다.

4. 접근성 가드레일

창의성을 추구하되, 접근성은 절대 타협하지 않습니다. 스킬에는 WCAG 2.1 AA 기준을 충족하는 체크리스트가 포함되어 있습니다.

색상 대비: 최소 4.5:1 (일반 텍스트), 3:1 (큰 텍스트) 터치 타겟: 최소 44x44px 키보드 네비게이션: 모든 인터랙티브 요소 접근 가능 스크린 리더: 적절한 ARIA 속성과 시맨틱 HTML 포커스 인디케이터: 명확하게 보이는 포커스 상태

AI는 아무리 창의적인 디자인을 만들어도, 이 기준을 위반하면 수정하도록 프로그래밍되어 있습니다.

5. 실전 템플릿 라이브러리

이론만으로는 부족합니다. 스킬에는 실제로 사용할 수 있는 템플릿이 포함되어 있습니다.

랜딩 페이지 와이어프레임 (ASCII 다이어그램)
대시보드 레이아웃
이커머스 상품 리스트
블로그/매거진 스타일
포트폴리오 사이트

각 템플릿은 뻔한 패턴을 피한 독창적인 접근을 보여줍니다. 동시에 실용성과 사용성을 유지합니다.

3.3 다른 Skills와의 차별점

web-design-system을 다른 유사한 스킬들과 비교해보겠습니다.

vs Anthropic frontend-design

Anthropic의 frontend-design은 web-design-system의 직접적인 영감이었습니다. 두 스킬 모두 Verbalized Sampling을 사용하지만, 몇 가지 중요한 차이가 있습니다.

frontend-design은 글로벌 시장을 대상으로 합니다. 주로 영문 웹사이트를 다루고, 서구의 디자인 관습을 따릅니다. 반면 web-design-system은 한글 웹사이트에 특화되어 있습니다. Pretendard 폰트, 한글 행간, word-break 설정 등 한글 특유의 요구사항을 깊이 다룹니다.

또한 web-design-system은 웹 기획 요소도 포함합니다. 단순히 시각 디자인만이 아니라, 정보 구조도(IA), 사용자 플로우, 와이어프레임 등 기획 단계부터 다룹니다. 이것은 디자이너뿐 아니라 기획자도 사용할 수 있게 합니다.

vs Vercel web-design-guidelines

Vercel의 web-design-guidelines는 UI/UX 품질에 초점을 맞춥니다. 100개 이상의 체크리스트를 제공하여, AI가 빠뜨리기 쉬운 디테일을 확인하도록 합니다.

web-design-system은 이런 품질 가이드를 포함하면서도, 창의성에 더 무게를 둡니다. web-design-guidelines가 “무엇을 확인해야 하는가”에 답한다면, web-design-system은 “어떻게 독창적으로 만드는가”에 답합니다.

예를 들어, web-design-guidelines는 “이미지에 alt 텍스트가 있는지 확인하라”고 말합니다. web-design-system은 여기서 한 발 더 나아가 “흔한 스톡 이미지 대신 브랜드 고유의 비주얼을 만들라”고 제안합니다.

vs 일반 디자인 시스템

Material Design, Human Interface Guidelines 같은 전통적인 디자인 시스템과도 다릅니다.

전통적인 디자인 시스템은 일관성을 목표로 합니다. “이런 상황에서는 이 컴포넌트를 사용하라”는 명확한 규칙을 제시합니다. 이것은 대규모 조직에서 여러 팀이 협업할 때 유용합니다.

web-design-system은 다양성을 목표로 합니다. “이런 뻔한 것은 피하고, 이런 방향으로 실험해보라”는 가이드를 제공합니다. 규칙보다는 원칙을, 통일보다는 개성을 중시합니다.

물론 두 접근법이 상호 배타적인 것은 아닙니다. web-design-system으로 독창적인 디자인 방향을 정한 후, 그것을 Material Design 같은 체계로 구조화할 수 있습니다.

3.4 스킬의 구조와 파일

web-design-system 스킬은 간단한 폴더 구조를 가집니다:

web-design-system/
├── SKILL.md          # AI가 읽는 가이드 (25,000+ 단어)
└── README.md         # 사람이 읽는 가이드 (10,000+ 단어)

SKILL.md는 AI를 위한 문서입니다. 여기에는:

Verbalized Sampling 프로세스 상세 설명
안티패턴 라이브러리 (색상, 레이아웃, 컴포넌트, 타이포그래피)
창의적 대안 제안 (색상 팔레트, 레이아웃 패턴, 컴포넌트 디자인)
한글 타이포그래피 가이드
접근성 체크리스트
반응형 디자인 패턴
코드 예시 (HTML/CSS, React)
와이어프레임 템플릿

AI는 코드를 작성하거나 디자인을 만들기 전에 이 문서를 참조합니다. 마치 요리사가 레시피를 보듯이, AI는 SKILL.md를 보면서 작업합니다.

README.md는 사람을 위한 문서입니다. 여기에는:

스킬 사용법
프롬프트 예시
문제 해결 Q&A
비교표와 체크리스트
학습 자료 링크

사용자는 README를 읽고 스킬을 이해한 후, AI에게 작업을 요청합니다.

3.5 어떻게 작동하는가

실제로 web-design-system 스킬이 어떻게 작동하는지 단계별로 살펴보겠습니다.

Step 1: 스킬 로딩

사용자가 Claude Code나 Cursor 같은 AI 도구를 시작하면, 도구는 ~/.claude/skills/ 또는 .cursor/skills/ 디렉토리를 스캔합니다. web-design-system 폴더를 발견하면 SKILL.md 파일을 읽어서 AI의 컨텍스트 창에 로드합니다.

이것은 AI에게 “작업을 시작하기 전에 이 가이드북을 읽어”라고 말하는 것과 같습니다. AI는 이제 web-design-system의 모든 규칙과 원칙을 알고 있습니다.

Step 2: 사용자 요청

사용자가 요청합니다:

"스타트업 랜딩 페이지 만들어줘. web-design-system skill 사용해서"

Step 3: Cliché Identification

AI는 먼저 SKILL.md의 Verbalized Sampling 섹션을 참조합니다. 그리고 스스로에게 질문합니다:

“스타트업 랜딩 페이지에서 가장 흔한 디자인 패턴은?”

AI는 안티패턴 라이브러리를 검토하고 답합니다:

보라색 그라데이션 (#667eea → #764ba2)
중앙 정렬 히어로 섹션
shadcn/ui 카드 컴포넌트
3개 박스 Feature 섹션
둥근 버튼 + 드롭 그림자

Step 4: Creative Divergence

AI는 이제 이것들을 의도적으로 피해야 함을 압니다. SKILL.md의 창의적 대안 섹션을 참조하여 다음을 선택합니다:

색상: 딥 포레스트 팔레트 (#0D3B2E + #E8B54D) 레이아웃: 비대칭 그리드, 겹치는 요소 타이포그래피: 극단적 크기 대비 (120px vs 16px) 컴포넌트: 언더라인 확장 버튼 한글: Pretendard Variable, 행간 1.7

Step 5: Quality Validation

AI는 창의적인 디자인을 만들었지만, 접근성 체크리스트도 확인합니다:

색상 대비: #0D3B2E와 #F4F1E8 = 11.2:1 ✓ (4.5:1 이상)
터치 타겟: 버튼 최소 44x44px ✓
키보드 네비게이션: 모든 링크 접근 가능 ✓
한글 행간: 1.7 ✓ (1.6-1.8 권장)

모든 기준을 통과했으므로 최종 디자인을 생성합니다.

Step 6: 결과 생성

AI는 HTML/CSS 또는 React 코드를 작성합니다. 주석으로 자신의 선택을 설명합니다:

  
// 뻔한 보라색 그라데이션 대신 딥 포레스트 색상 사용
const colors = {
  primary: '#0D3B2E',    // 깊은 숲 - 자연스럽고 권위있음
  accent: '#E8B54D',     // 황금빛 - 따뜻한 강조
  // ...
};

// 중앙 정렬 대신 비대칭 레이아웃
const HeroSection = styled.section`
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;  // 비대칭 비율
  // ...
`;

이렇게 web-design-system 스킬은 AI의 사고 과정을 체계적으로 가이드하여, 독창적이면서도 품질 높은 디자인을 만들어냅니다.

4. Verbalized Sampling: 창의성의 과학

4.1 왜 AI는 뻔한 것을 만드는가

AI의 창의성 한계를 이해하려면, AI가 어떻게 작동하는지 알아야 합니다.

대규모 언어 모델(LLM)은 확률적으로 작동합니다. 모델은 학습 데이터를 분석하여, 특정 맥락에서 다음에 올 가장 확률이 높은 토큰을 예측합니다. 예를 들어, “스타트업 랜딩 페이지”라는 맥락이 주어지면, 모델은 학습 데이터에서 “스타트업 랜딩 페이지”와 자주 함께 나타난 패턴들을 찾습니다.

인터넷에는 보라색 그라데이션을 사용한 스타트업 웹사이트가 수없이 많습니다. shadcn/ui를 사용한 사이트도 많고, 중앙 정렬 레이아웃도 흔합니다. 따라서 AI가 이런 패턴을 선택하는 것은 통계적으로 정확한 답입니다.

문제는 “가장 확률이 높은 답”이 반드시 “가장 좋은 답”은 아니라는 것입니다. 특히 창의성이 요구되는 디자인 작업에서는 더욱 그렇습니다.

4.2 Temperature와 Top-p의 한계

많은 사람들이 AI의 창의성을 높이기 위해 temperature나 top-p 같은 샘플링 파라미터를 조정합니다. temperature를 높이면 AI가 더 다양한 선택을 하게 됩니다.

하지만 이 방법에는 한계가 있습니다. temperature를 높이면 무작위성도 함께 증가합니다. 결과적으로 창의적이지만 일관성 없거나, 때로는 의미 없는 출력을 만들 수 있습니다.

예를 들어, temperature를 매우 높게 설정하면 AI가 “네온 핑크, 사이버펑크 스타일, 3D 홀로그램 효과”를 제안할 수 있습니다. 확실히 독특하지만, 대부분의 스타트업 랜딩 페이지에는 적절하지 않습니다.

우리가 원하는 것은 “통제된 창의성”입니다. 독창적이면서도 맥락에 맞고, 사용자 경험을 해치지 않는 디자인입니다.

4.3 Verbalized Sampling의 작동 원리

Verbalized Sampling은 완전히 다른 접근법입니다. 샘플링 파라미터를 조정하는 대신, AI의 사고 과정 자체를 바꿉니다.

핵심 아이디어는 간단합니다: AI에게 먼저 가장 흔한 선택을 명시적으로 말하게 한 후, 그것을 피하도록 지시하는 것입니다.

이것이 작동하는 이유는 AI의 확률 분포 때문입니다. AI가 생성할 수 있는 모든 가능한 답은 확률 분포를 형성합니다. 보라색 그라데이션이 30% 확률로 가장 높고, 파란색 단색이 20%, 녹색 계열이 15%… 이런 식입니다.

일반적으로 AI는 가장 높은 확률의 답만 보여줍니다. 하지만 Verbalized Sampling은 AI에게 전체 분포를 “펼쳐놓으라”고 요구합니다.

AI의 내부 확률 분포:
보라색 그라데이션: 30%
파란색 단색: 20%
녹색 계열: 15%
테라코타 톤: 10%
모노크롬: 8%
딥 포레스트: 5%
...

“가장 흔한 것 5가지를 말해줘”라고 하면, AI는 1-5번을 보여줍니다. 그 다음 “이것들을 피하고 창의적인 대안을 줘”라고 하면, AI는 6번 이하의 선택지를 탐색합니다.

딥 포레스트는 확률로는 5%밖에 안 되지만, 그렇다고 나쁜 선택은 아닙니다. 단지 덜 흔할 뿐입니다. 오히려 차별화가 필요한 상황에서는 더 좋은 선택일 수 있습니다.

4.4 4단계 프로세스

Verbalized Sampling은 체계적인 4단계 프로세스로 진행됩니다.

Phase 1: Cliché Identification (뻔한 것 식별)

첫 단계는 AI에게 가장 흔한 패턴을 명시적으로 나열하게 하는 것입니다.

프롬프트: "[웹사이트 유형]에서 가장 흔한 디자인 패턴 5가지를 
색상, 레이아웃, 타이포그래피, 컴포넌트 별로 리스트해줘"

AI의 응답 예시:

색상: 보라색→파란색 그라데이션 (#667eea → #764ba2)
레이아웃: 중앙 정렬 히어로 섹션
타이포그래피: Inter Bold 48px 제목
컴포넌트: shadcn/ui 둥근 카드
CTA: 파란색 둥근 버튼 + 그림자

이 단계에서 중요한 것은 AI가 이것들을 나열하면서, 이것들이 “흔하다”는 것을 인식한다는 점입니다. AI의 컨텍스트에 “이것들은 피해야 할 클리셰”라는 정보가 기록됩니다.

Phase 2: Constraint Application (제약 적용)

두 번째 단계는 명시적인 제약을 적용하는 것입니다.

프롬프트: "위에서 말한 5가지를 완전히 피하면서,
[웹사이트 목적]에 맞는 창의적인 대안 3가지를 제안해줘.
각각 왜 독창적인지, 어떤 사용자 경험을 제공하는지 설명해줘."

이 단계에서 “완전히 피하면서”라는 명확한 제약이 중요합니다. AI는 이제 1-5번 선택지를 배제하고, 6번 이하를 탐색해야 합니다.

“왜 독창적인지 설명”을 요구하는 것도 중요합니다. 이것은 AI에게 자신의 선택을 정당화하도록 강제합니다. 단순히 무작위로 선택하는 것이 아니라, 의미 있는 이유가 있어야 합니다.

Phase 3: Divergent Exploration (발산적 탐색)

세 번째 단계에서 AI는 여러 창의적 방향을 탐색합니다.

AI의 응답 예시:

대안 1: 딥 포레스트 & 내츄럴
- 색상: #0D3B2E (깊은 숲) + #E8B54D (황금빛)
- 레이아웃: 비대칭 그리드
- 특징: 자연스럽고 권위있는 느낌
- UX: 신뢰감과 안정감 제공

대안 2: 테라코타 선셋
- 색상: #C85C3C (테라코타) + #F4E3D3 (크림)
- 레이아웃: 브로큰 그리드
- 특징: 따뜻하고 고급스러운 느낌
- UX: 친근하면서도 전문적

대안 3: 미드나잇 애쉬
- 색상: #2C3539 (차콜) + #C4C4C4 (애쉬)
- 레이아웃: 미니멀 + 여백 강조
- 특징: 현대적이고 세련된 느낌
- UX: 집중력과 명료함

AI는 각 대안의 장단점을 고려하면서, 프로젝트 목적에 가장 맞는 것을 추천할 수 있습니다.

Phase 4: Quality Guardrails (품질 가드레일)

마지막 단계는 창의성을 추구하면서도 기본적인 품질을 보장하는 것입니다.

창의성 체크리스트:
✅ 경쟁사와 차별화되는 비주얼?
✅ 예상을 깨는 요소 1개 이상?
✅ 브랜드 고유의 비주얼 언어?
✅ 기억에 남는 인터랙션?

품질 체크리스트:
✅ 웹 접근성 WCAG 2.1 AA 준수?
✅ 색상 대비비 4.5:1 이상?
✅ 모바일 터치 타겟 44x44px 이상?
✅ 로딩 시간 고려한 디자인?
✅ 한글 최적화 (Pretendard, 행간 1.7)?

이 체크리스트를 통과한 디자인만 최종 선택됩니다. 창의성과 사용성의 균형을 맞추는 것입니다.

4.5 실제 효과

Verbalized Sampling의 효과는 놀랍습니다. 같은 AI 모델, 같은 프롬프트라도 이 기법을 사용하면 완전히 다른 결과가 나옵니다.

일반적인 프롬프트:

"스타트업 랜딩 페이지 만들어줘"

결과: 보라색 그라데이션, 중앙 정렬, shadcn/ui 컴포넌트 (예상 가능)

Verbalized Sampling 프롬프트:

"스타트업 랜딩 페이지 만들어줘. web-design-system skill 사용:
먼저 가장 흔한 디자인 5가지
그것들 피하고 창의적인 대안 3가지
가장 독창적인 것으로 만들되, 접근성 WCAG 2.1 AA 보장"

결과: 딥 포레스트 색상, 비대칭 레이아웃, 커스텀 컴포넌트 (독창적)

차이는 명백합니다. 동일한 AI도 질문 방식에 따라 천차만별의 결과를 만듭니다.

4.6 심리학적 근거

Verbalized Sampling이 작동하는 이유를 인지 심리학적으로 설명할 수 있습니다.

System 1과 System 2 사고

노벨상 수상자 대니얼 카너먼은 인간의 사고를 두 시스템으로 구분했습니다.

System 1: 빠르고 직관적이며 자동적. 노력이 거의 필요없음. System 2: 느리고 신중하며 의식적. 많은 인지 자원 필요.

AI도 유사한 패턴을 보입니다. 기본적으로 AI는 System 1 모드로 작동합니다. 가장 확률이 높은, 즉 가장 흔한 답을 빠르게 제시합니다.

Verbalized Sampling은 AI를 강제로 System 2 모드로 전환시킵니다. “먼저 흔한 것을 나열하고, 그것을 피하면서, 이유를 설명하라”는 과정은 깊은 사고를 요구합니다.

Constraint-based Creativity

창의성 연구에서 잘 알려진 역설이 있습니다: 제약이 창의성을 증진시킨다는 것입니다.

무한한 자유보다, 명확한 제약이 주어졌을 때 더 창의적인 결과가 나옵니다. “아무거나 그려봐”보다 “빨간색을 사용하지 않고 고양이를 그려봐”가 더 흥미로운 작품을 만듭니다.

Verbalized Sampling의 “뻔한 것을 피하라”는 제약은 AI에게 새로운 해결책을 찾도록 강제합니다. 이것은 창의성을 제한하는 것이 아니라, 오히려 촉진하는 것입니다.

4.7 한계와 주의사항

Verbalized Sampling이 만능은 아닙니다. 몇 가지 한계가 있습니다.

1. 맥락 이해 필요

뻔한 것을 피하는 것이 항상 좋은 것은 아닙니다. 어떤 경우에는 “뻔한” 디자인이 실제로 최선일 수 있습니다.

예를 들어, 정부 웹사이트나 의료 시스템은 사용자가 익숙한 패턴을 따르는 것이 중요할 수 있습니다. 독창성보다 명확성과 신뢰성이 우선이기 때문입니다.

따라서 Verbalized Sampling을 사용할 때는 프로젝트의 맥락을 고려해야 합니다. “이 프로젝트에서 독창성이 정말 필요한가?”를 먼저 물어야 합니다.

2. 과도한 독창성

너무 독특해서 사용하기 어려운 디자인이 나올 수도 있습니다. AI에게 “극단적으로 창의적으로”라고 요구하면, 실용성을 잃을 수 있습니다.

이것이 바로 Phase 4 (Quality Guardrails)가 중요한 이유입니다. 창의성을 추구하되, 사용성, 접근성, 성능 같은 기본 품질은 반드시 지켜야 합니다.

3. 브랜드 일관성

이미 확립된 브랜드를 가진 회사라면, 완전히 새로운 디자인 방향은 브랜드 정체성을 해칠 수 있습니다.

이 경우 Verbalized Sampling을 조정해야 합니다. “브랜드 가이드라인 내에서 독창적으로”처럼, 제약과 창의성의 균형을 맞춰야 합니다.

4.8 응용과 확장

Verbalized Sampling은 디자인뿐 아니라 다른 창의적 작업에도 적용할 수 있습니다.

글쓰기:

이 주제에서 가장 흔한 서론 패턴 3가지
그것들 피하고 독특한 시작 3가지
가장 흥미로운 것으로 글 작성

마케팅:

이 제품 카테고리에서 흔한 마케팅 메시지 5가지
차별화된 메시지 3가지
가장 임팩트 있는 캠페인 기획

문제 해결:

이 문제의 일반적인 해결책 5가지
비전통적인 접근 3가지
가장 혁신적인 솔루션

Verbalized Sampling의 핵심 원리 - “먼저 흔한 것을 식별하고, 의도적으로 피하며, 이유를 설명하라” - 는 거의 모든 창의적 작업에 적용할 수 있습니다.

5. 한글 웹 디자인의 특수성

5.1 한글은 왜 특별한가

한글은 세계에서 가장 과학적인 문자로 평가받습니다. 세종대왕이 창제한 한글은 소리의 원리를 시각화한 독창적인 체계입니다. 하지만 이런 독창성은 웹 디자인에서 특별한 도전을 제시합니다.

글자 구조의 복잡성

영어 알파벳은 26개 문자로 이루어져 있고, 각 문자는 비교적 단순한 형태입니다. ‘a’, ‘b’, ‘c’는 몇 개의 획으로 구성됩니다.

한글은 완전히 다릅니다. 자음 14개와 모음 10개를 조합하여 이론적으로 11,172개의 글자를 만들 수 있습니다. 각 글자는 자음과 모음이 2차원 공간에 배치된 복합 구조입니다.

예를 들어 ‘웹’이라는 글자를 보겠습니다:

ㅇ (초성)
ㅔ (중성)
ㅂ (종성)

세 개의 요소가 하나의 음절 블록 안에 조화롭게 배치되어 있습니다. 이런 구조는 영문 ‘web’의 세 글자가 수평으로 나열된 것과는 완전히 다른 시각적 특성을 갖습니다.

시각적 밀도

한글의 2차원 구조는 같은 크기에서 영문보다 훨씬 높은 시각적 밀도를 만듭니다. ‘웹디자인’과 ‘web design’을 같은 폰트 크기로 표시하면, 한글이 훨씬 복잡하고 무겁게 보입니다.

이것이 한글에서 더 큰 폰트 크기와 더 넓은 행간이 필요한 이유입니다. 영문에서 16px이 적당하다면, 한글에서는 18px 이상이 필요할 수 있습니다.

5.2 타이포그래피 최적화

web-design-system 스킬은 한글 타이포그래피를 위한 구체적인 가이드를 제공합니다.

폰트 선택

한글 웹 폰트로 가장 추천하는 것은 Pretendard입니다.

Pretendard는 한국의 디자이너 orioncactus가 만든 현대적인 산세리프 폰트입니다. 이 폰트의 특징은:

가변 폰트 기술: Pretendard Variable은 하나의 파일로 다양한 폰트 웨이트를 지원합니다. 100부터 900까지 연속적인 굵기 조절이 가능하며, 파일 크기도 작습니다.
한글 최적화: 11,172개 한글 음절을 모두 지원하며, 각 글자가 광학적으로 보정되어 있습니다.
한영 조화: 한글과 영문의 높이, 굵기, 간격이 조화롭게 설계되어 한영 혼용 시에도 자연스럽습니다.
오픈소스: SIL 오픈 폰트 라이선스로 상업적 사용이 자유롭습니다.

  
/* Pretendard 로드 */

/* 적용 */
body {
  font-family: 'Pretendard Variable', 
               'Pretendard',
               -apple-system,
               BlinkMacSystemFont,
               'Apple SD Gothic Neo',
               'Noto Sans KR',
               sans-serif;
}

대안으로는 Noto Sans KR (구글 폰트)도 좋지만, Pretendard가 더 현대적이고 성능도 우수합니다.

행간 (Line Height)

한글의 행간은 영문보다 20-30% 넓어야 합니다.

영문 권장 행간: 1.5 한글 권장 행간: 1.6-1.8

  
/* 영문 중심 사이트 */
body {
  font-family: 'Inter', sans-serif;
  line-height: 1.5;
}

/* 한글 중심 사이트 */
body {
  font-family: 'Pretendard Variable', sans-serif;
  line-height: 1.7;  /* 한글은 더 넓게 */
}

왜 한글은 더 넓은 행간이 필요할까요? 한글의 2차원 구조 때문입니다. 글자가 수직으로도 공간을 차지하기 때문에, 줄 사이 간격이 좁으면 위아래 줄이 시각적으로 붙어보입니다.

자간 (Letter Spacing)

자간 조정도 중요합니다. 한글은 기본적으로 각 음절이 블록으로 되어 있어, 영문보다 간격이 넓어 보일 수 있습니다. 따라서 약간 타이트하게 조정하는 것이 좋습니다.

  
body {
  letter-spacing: -0.01em;  /* 약간 타이트 */
}

h1, h2, h3 {
  letter-spacing: -0.02em;  /* 큰 제목은 더 타이트 */
}

하지만 너무 타이트하면 가독성이 떨어지므로, -0.03em 이상은 권장하지 않습니다.

단어 분리 (Word Break)

한글의 가장 큰 문제 중 하나는 줄바꿈입니다. 영어는 단어 사이에 공백이 있어 자연스럽게 줄이 바뀌지만, 한글은 어절 중간에서 줄이 바뀔 수 있습니다.

“대한민국 웹디자인 협회”가 좁은 화면에서 “대한민국 웹디자/ 인 협회”로 나뉘면 가독성이 크게 떨어집니다.

해결책은 word-break: keep-all입니다:

  
p {
  word-break: keep-all;  /* 한글 단어 단위로 줄바꿈 */
  overflow-wrap: break-word;  /* 긴 영문 단어만 분리 */
}

이렇게 하면 한글은 어절 단위로 줄이 바뀌고, 영문은 필요할 때만 단어 중간에서 분리됩니다.

5.3 한영 혼용 처리

현대 한국 웹사이트의 현실은 한글과 영문의 혼용입니다. 특히 기술 문서나 비즈니스 사이트에서는 “React 컴포넌트”, “REST API”, “UI/UX” 같은 표현이 빈번합니다.

폰트 폴백 전략

한영 혼용 시 폰트 선택이 중요합니다. Pretendard는 영문도 포함하고 있지만, 때로는 영문 전용 폰트를 따로 지정하고 싶을 수 있습니다.

  
/* 기본: 한글과 영문 모두 Pretendard */
body {
  font-family: 'Pretendard Variable', sans-serif;
}

/* 대안: 영문은 Inter, 한글은 Pretendard */
body {
  font-family: 'Pretendard Variable',  /* 한글 우선 */
               'Inter',                 /* 영문 */
               sans-serif;
}

이 경우 브라우저는 각 글자를 렌더링할 때 첫 번째 폰트부터 시도합니다. 한글은 Pretendard에 있으므로 Pretendard로, 한글이 아닌 문자는 Inter로 렌더링됩니다.

숫자 처리

숫자는 특별한 문제입니다. 텍스트 안에 섞인 숫자는 본문 폰트를 따르는 것이 좋지만, 표나 통계에서는 tabular numbers(너비가 고정된 숫자)를 사용하는 것이 좋습니다.

  
/* 텍스트 안의 숫자 */
p {
  font-family: 'Pretendard Variable', sans-serif;
}

/* 표나 통계의 숫자 */
.numbers, table td {
  font-family: 'Roboto Mono', monospace;
  font-variant-numeric: tabular-nums;  /* 숫자 너비 고정 */
}

tabular-nums를 사용하면 모든 숫자가 같은 너비를 가져, 수직으로 정렬했을 때 깔끔하게 맞습니다.

괄호와 특수문자

한글과 영문을 혼용할 때 괄호 사용도 주의해야 합니다. 한국어에서는 전각 괄호(( ))를 선호하지만, 영문에서는 반각 괄호( () )를 사용합니다.

웹에서는 일반적으로 반각 괄호를 사용하되, 한글과 잘 어울리는 폰트를 선택하는 것이 중요합니다. Pretendard는 괄호를 한글과 조화롭게 디자인했습니다.

5.4 한국 웹 트렌드의 이해

한국 웹사이트는 서구와 다른 독특한 트렌드를 보입니다.

정보 밀도

한국 웹사이트는 일반적으로 정보 밀도가 높습니다. 네이버, 다음 같은 포털 사이트를 보면, 하나의 화면에 엄청난 양의 정보가 담겨있습니다.

이것은 문화적 차이에서 비롯됩니다. 한국 사용자는 한눈에 많은 정보를 파악하기를 원하는 경향이 있습니다. 반면 서구 웹사이트는 미니멀리즘을 선호하여, 한 화면에 하나의 메시지만 전달하려 합니다.

web-design-system은 이런 차이를 인식합니다. 한국 시장을 대상으로 한다면, 적당한 정보 밀도를 유지하면서도 가독성을 해치지 않는 균형을 찾아야 합니다.

빠른 속도 선호

한국은 세계에서 인터넷 속도가 가장 빠른 나라 중 하나입니다. 5G 보급률도 매우 높습니다. 이런 환경에서 한국 사용자는 웹사이트가 즉각적으로 로드되기를 기대합니다.

페이지 로딩 시간이 3초를 넘으면 사용자의 절반 이상이 이탈합니다. 따라서 성능 최적화가 매우 중요합니다.

모바일 우선

한국은 모바일 인터넷 사용 비율이 매우 높습니다. 많은 사용자가 PC보다 스마트폰으로 웹사이트에 접속합니다.

따라서 모바일 퍼스트 접근이 필수입니다. 작은 화면에서 먼저 디자인하고, 큰 화면으로 확장하는 방식입니다.

  
/* 모바일 기본 (작은 화면) */
.container {
  padding: 1rem;
  font-size: 16px;
}

/* 태블릿 (중간 화면) */
  .container {
    padding: 2rem;
    font-size: 17px;
  }
}

/* 데스크톱 (큰 화면) */
  .container {
    padding: 3rem;
    max-width: 1200px;
    margin: 0 auto;
  }
}

5.5 한국 법규 준수

한국에서 웹사이트를 운영할 때는 몇 가지 법적 요구사항을 준수해야 합니다.

웹 접근성 인증

장애인차별금지법에 따라, 일정 규모 이상의 기관과 기업은 웹 접근성을 보장해야 합니다.

공공기관: 모두 의무
법인: 연 매출 30억 이상 의무
특수 학교 및 복지시설: 의무

웹 접근성 인증은 한국웹접근성평가센터 같은 기관에서 받을 수 있습니다. 기준은 WCAG 2.1 AA와 유사하지만, 한국 실정에 맞게 일부 조정되었습니다.

web-design-system 스킬은 WCAG 2.1 AA를 기본으로 따르므로, 한국 웹 접근성 인증 기준도 대부분 충족합니다.

개인정보보호법

웹사이트에서 사용자 정보를 수집할 때는 개인정보보호법을 준수해야 합니다.

개인정보 수집 전 동의 받기
개인정보 처리방침 명시
쿠키 사용 안내
만 14세 미만은 법정대리인 동의

특히 EU의 GDPR과 비슷하게, 쿠키 사용에 대한 명시적 동의가 필요합니다.

전자금융거래법

이커머스나 결제 기능이 있는 웹사이트는 전자금융거래법을 준수해야 합니다.

SSL 인증서 필수
결제 정보 암호화
거래 내역 보관
보안 프로그램 설치 안내

5.6 한국 사용자의 UX 선호도

한국 사용자의 UX 선호도를 이해하는 것도 중요합니다.

실명 문화

한국은 실명 문화가 강합니다. 많은 웹사이트가 실명 인증을 요구하고, 사용자들도 이를 자연스럽게 받아들입니다.

하지만 최근에는 개인정보 보호 의식이 높아지면서, 과도한 정보 요구는 거부감을 줍니다. 필요한 최소한의 정보만 수집하는 것이 좋습니다.

빠른 결정

한국 사용자는 일반적으로 빠른 결정을 선호합니다. 긴 설명보다는 핵심 정보를 한눈에 파악하기를 원합니다.

따라서 중요한 정보는 위쪽에, 명확하게 제시해야 합니다. 사용자가 스크롤을 많이 하거나, 여러 페이지를 거쳐야 핵심 정보를 찾는 구조는 피해야 합니다.

커뮤니티 기능

한국 사용자는 커뮤니티 기능을 중요하게 생각합니다. 리뷰, 댓글, Q&A, 커뮤니티 게시판 같은 기능이 활성화된 사이트를 선호합니다.

이것은 구매 결정이나 서비스 이용에서 다른 사용자의 의견을 중시하기 때문입니다.

5.7 web-design-system의 한글 최적화

web-design-system 스킬은 이 모든 요소를 종합하여 한글 웹사이트에 최적화된 가이드를 제공합니다.

AI에게 웹 디자인을 요청하면, 스킬은 자동으로:

Pretendard Variable 폰트 사용
행간 1.6-1.8로 설정
word-break: keep-all 적용
한영 혼용 고려한 폰트 폴백
모바일 퍼스트 접근
한국 웹 접근성 기준 준수
적절한 정보 밀도 유지
빠른 로딩 속도 최적화

이런 최적화는 글로벌 스킬에서는 찾기 어렵습니다. 한국 시장을 이해하고, 한글의 특성을 깊이 고려한 web-design-system만의 강점입니다.

6. 실전 프로젝트 가이드

6.1 설치와 시작

web-design-system을 사용하기 위한 첫 단계는 설치입니다.

Step 1: 다운로드

먼저 web-design-system 폴더를 다운로드합니다. 폴더 구조는 다음과 같습니다:

web-design-system/
├── SKILL.md          # AI가 읽는 가이드
└── README.md         # 사용자 가이드

Step 2: 설치

Claude를 사용한다면:

  
# .claude/skills 디렉토리 생성
mkdir -p ~/.claude/skills

# web-design-system 복사
cp -r web-design-system ~/.claude/skills/

Cursor를 사용한다면:

  
# 프로젝트 루트에 .cursor 디렉토리가 있을 것입니다
mkdir -p .cursor/skills

# web-design-system 복사
cp -r web-design-system .cursor/skills/

Step 3: 확인

설치가 제대로 되었는지 확인:

  
# Claude 사용자
ls ~/.claude/skills/web-design-system/
# SKILL.md  README.md 가 보이면 성공

# Cursor 사용자
ls .cursor/skills/web-design-system/
# SKILL.md  README.md 가 보이면 성공

Step 4: 첫 사용

AI 도구를 열고 테스트:

"간단한 랜딩 페이지 만들어줘. web-design-system skill 참고해서"

AI가 스킬을 인식하고 사용하면, 보라색 그라데이션이 아닌 독창적인 디자인이 나올 것입니다.

6.2 프로젝트 1: 스타트업 랜딩 페이지

첫 번째 실전 프로젝트로 AI 스타트업의 랜딩 페이지를 만들어보겠습니다.

프로젝트 배경

회사명: “마인드브릿지 (MindBridge)” 업종: AI 기반 정신건강 케어 플랫폼 대상 고객: 30-40대 직장인 핵심 가치: 따뜻함, 전문성, 신뢰, 접근성

프롬프트 작성

"AI 정신건강 케어 플랫폼 '마인드브릿지' 랜딩 페이지를 만들어줘.
web-design-system skill 사용:

1. 먼저 헬스케어 AI 스타트업에서 가장 흔한 디자인 5가지를 말해줘
2. 그것들을 완전히 피하면서, 우리 브랜드 가치(따뜻함, 전문성, 신뢰)를 
   표현하는 창의적인 대안 3가지를 제안해줘
3. 가장 적합한 방향으로 만들어줘

요구사항:
- 히어로 섹션 (메인 메시지 + CTA)
- 핵심 기능 3가지
- 사용자 후기 (2-3개)
- 가격 플랜
- FAQ
- CTA 섹션

기술 스택: React + styled-components
한글 최적화: Pretendard, 행간 1.7
접근성: WCAG 2.1 AA
반응형: 모바일 퍼스트
다크모드: 지원

특별 요청:
- 차갑거나 기계적이지 않게
- 의료 느낌보다는 상담 느낌
- 과도한 애니메이션 피하기
- 신뢰감 있는 색상
"

AI의 응답 (예상)

1. 헬스케어 AI에서 흔한 디자인:
   - 파란색 + 흰색 (병원 느낌)
   - 스톡 이미지 (의사, 환자)
   - 의료 아이콘 (십자가, 청진기)
   - 차트와 통계 강조
   - 전문용어 남용

2. 창의적 대안:

대안 1: 따뜻한 대화
- 색상: 테라코타 (#C85C3C) + 따뜻한 베이지 (#F4E3D3)
- 레이아웃: 대화형 (말풍선 모티브)
- 타이포그래피: 부드러운 라운드체
- 특징: 상담실 느낌, 인간적 접근

대안 2: 자연적 치유
- 색상: 딥 포레스트 (#0D3B2E) + 연한 민트 (#E8F5E9)
- 레이아웃: 유기적 곡선
- 타이포그래피: 세리프 + 산세리프 믹스
- 특징: 자연, 성장, 회복의 이미지

대안 3: 미니멀 신뢰
- 색상: 차분한 네이비 (#2C3E50) + 따뜻한 골드 (#F39C12)
- 레이아웃: 미니멀 + 충분한 여백
- 타이포그래피: 깔끔한 산세리프
- 특징: 전문성과 따뜻함의 균형

추천: 대안 2 (자연적 치유)
이유: 
- 정신건강은 "성장과 회복"의 여정
- 자연 색상이 안정감과 치유감 제공
- 의료 느낌 없이 전문성 유지
- 한국 사용자에게 친숙한 색상

3. 구현 시작...

결과물 특징

AI는 다음과 같은 독창적인 디자인을 만들 것입니다:

색상:

  
:root {
  --color-primary: #0D3B2E;      /* 깊은 숲 */
  --color-secondary: #1A5F4A;    /* 모스 그린 */
  --color-accent: #E8F5E9;       /* 연한 민트 */
  --color-warm: #F4E3D3;         /* 따뜻한 베이지 */
  --color-text: #1F2421;
}

레이아웃:

비대칭 히어로 섹션 (1.2fr / 0.8fr)
유기적 곡선을 활용한 섹션 구분
브로큰 그리드로 배치된 기능 카드
여백을 대담하게 활용

타이포그래피:

  
font-family: 'Pretendard Variable', sans-serif;
line-height: 1.7;
letter-spacing: -0.01em;

h1: 4rem (64px) - 극단적 크기
p: 1.125rem (18px) - 가독성 최적화

컴포넌트:

shadcn/ui 대신 커스텀 디자인
둥근 버튼 대신 언더라인 확장 효과
드롭 그림자 대신 서브틀한 테두리

접근성:

색상 대비: #0D3B2E / #E8F5E9 = 8.5:1 ✓
터치 타겟: 모든 버튼 48x48px ✓
키보드 네비게이션: 전체 지원 ✓
스크린 리더: ARIA 레이블 완비 ✓

6.3 프로젝트 2: 이커머스 상품 리스트

두 번째 프로젝트는 럭셔리 패션몰의 상품 리스트 페이지입니다.

프로젝트 배경

브랜드: “서울 헤리티지 (Seoul Heritage)” 컨셉: 한국 전통과 현대 패션의 융합 가격대: 프리미엄 (20만원~100만원) 대상: 30-50대, 전통미와 품격 중시

프롬프트

"럭셔리 한복 패션 브랜드 상품 리스트 페이지 만들어줘.
web-design-system skill 사용:

피해야 할 것:
- 일반 쇼핑몰처럼 동일 크기 카드 그리드
- 흰 배경에 상품 사진만
- 전형적인 필터 사이드바
- 밋밋한 정렬 버튼

대신:
- 매거진 스타일 레이아웃
- 전통미를 현대적으로 해석
- 여백을 통한 고급스러움
- 독특한 필터 UI

포함 요소:
- 상품 이미지 (호버 시 다른 각도)
- 상품명, 가격, 간단한 설명
- 필터 (카테고리, 가격, 소재, 색상)
- 정렬 (신상품, 인기, 가격)
- 페이지네이션

기술: Next.js + TypeScript + styled-components
특별: 한국 전통 색상 활용
모바일: 필수 최적화
"

AI의 창의적 접근

색상 팔레트:

  
/* 한국 전통 색상의 현대적 해석 */
:root {
  --color-dansaekhwa: #1A1A1A;    /* 먹색 */
  --color-baekja: #F5F5F0;        /* 백자 */
  --color-ochre: #C8A882;         /* 황토 */
  --color-indigo: #2E4A62;        /* 쪽빛 */
}

레이아웃:

┌────────────┬─────────────────┐
│            │                 │
│  Large     │    Medium       │
│  Product   │                 │
│            ├──────┬──────────┤
│            │ Med  │  Small   │
│            │      │          │
├────────────┴──────┴──────────┤
│  Small    │  Large Product   │
│           │                  │
└───────────┴──────────────────┘

브로큰 그리드로 각 상품의 크기가 다릅니다. 주목받아야 할 상품은 크게, 보조 상품은 작게 배치하여 시각적 계층을 만듭니다.

호버 효과:

  
.product-card:hover {
  /* 일반적인 그림자 대신 */
  transform: translateY(-4px);
  
  /* 이미지 교체 (다른 각도) */
  .product-image {
    opacity: 0;
  }
  .product-image-alt {
    opacity: 1;
  }
}

필터 UI: 전통적인 사이드바 대신, 상단에 미니멀한 필터 칩:

[카테고리 ▼] [가격 ▼] [소재 ▼] [색상 ▼]  | [신상품 ▼]

클릭하면 드롭다운이 아니라 전체 화면 오버레이로 필터 옵션 표시. 고급스럽고 집중도 높은 경험.

6.4 프로젝트 3: 관리자 대시보드

세 번째는 프로젝트 관리 대시보드입니다.

프로젝트 배경

도구명: “플로우 (Flow)” 목적: 애자일 프로젝트 관리 사용자: 개발팀, 디자인팀 특징: 간결함, 생산성, 팀 협업

프롬프트

"애자일 프로젝트 관리 대시보드 만들어줘.
web-design-system skill 참고:

1. 먼저 프로젝트 관리 대시보드의 흔한 디자인 5가지
2. 그것들 피하면서 생산성을 높이는 창의적 디자인
3. 실용적이면서 독창적으로

포함 요소:
- 사이드바 네비게이션
- KPI 카드 (진행중 태스크, 완료율, 팀 활동)
- 스프린트 번다운 차트
- 태스크 타임라인
- 팀원 상태
- 최근 활동 피드

기술: React + TypeScript + Recharts
다크모드: 기본 (개발자 친화적)
한글: 완전 지원
데이터 시각화: 명료하고 아름답게
"

AI의 독창적 솔루션

흔한 패턴 식별:

왼쪽 어두운 사이드바
상단 흰색 헤더
카드 그리드 (4열)
막대 그래프 중심
테이블 중심 데이터

창의적 대안:

최소화 가능한 사이드바 (더 넓은 작업 공간)
헤더 없음 (모든 공간을 콘텐츠에)
비정형 카드 배치
다양한 차트 스타일 믹스
타임라인 + 칸반 하이브리드

색상 (다크 모드):

  
:root {
  --bg-primary: #0F1419;          /* 깊은 다크 */
  --bg-secondary: #1C2128;        /* 카드 배경 */
  --accent-blue: #58A6FF;         /* GitHub 블루 */
  --accent-green: #3FB950;        /* 성공 */
  --text-primary: #E6EDF3;
  --text-secondary: #7D8590;
}

레이아웃 혁신:

┌────┬─────────────────────────────────────┐
│ ☰  │  KPI 1   KPI 2        KPI 3        │
│    ├──────────┬──────────────────────────┤
│ 📊 │          │                          │
│ 📁 │  Chart   │  Timeline                │
│ 👥 │          │                          │
│ ⚙️  │          │                          │
│    ├──────────┴──────────────────────────┤
│    │  Recent Activity                    │
└────┴─────────────────────────────────────┘

사이드바는 아이콘만 보이고, 호버 시 확장됩니다. 이렇게 하면 화면 공간을 최대한 활용할 수 있습니다.

데이터 시각화:

전통적인 막대 그래프 대신 스파크라인 (작지만 트렌드를 잘 보여줌)
도넛 차트 대신 progress ring (더 모던)
표 대신 timeline view (시간 흐름을 직관적으로)

6.5 프로젝트 4: 개인 포트폴리오

네 번째는 웹 디자이너의 포트폴리오 사이트입니다.

프로젝트 배경

이름: “김서연 (Kim Seoyeon)” 직업: UX/UI 디자이너 스타일: 미니멀, 타이포그래피 중심 목표: 독특함으로 눈에 띄기

프롬프트

"UX/UI 디자이너 포트폴리오 웹사이트 만들어줘.
web-design-system skill로 극도로 독창적으로:

피해야 할 것:
- 일반적인 포트폴리오 템플릿
- 프로젝트 카드 그리드
- 상투적인 자기소개
- 스킬 바 차트

대신:
- 타이포그래피가 주인공
- 극단적 크기 대비
- 예상치 못한 내비게이션
- 스크롤 기반 스토리텔링

포함:
- 인트로 (이름 + 직업)
- 선택된 프로젝트 3-5개
- 접근 방식 (나의 디자인 철학)
- 연락처

기술: Next.js + Framer Motion
효과: 부드러운 스크롤 애니메이션
폰트: Pretendard Variable (한글)
      + 영문 타이포 전용 폰트
"

AI의 대담한 디자인

타이포그래피 중심:

  
/* 극단적 크기 대비 */
h1 {
  font-size: clamp(4rem, 20vw, 20rem);  /* 64px ~ 320px */
  line-height: 0.9;
  letter-spacing: -0.04em;
}

.tagline {
  font-size: clamp(0.875rem, 2vw, 1.125rem);  /* 14px ~ 18px */
  opacity: 0.7;
}

인트로 섹션:

┌─────────────────────────────────────┐
│                                     │
│                                     │
│                                     │
│           김                         │
│             서                       │
│               연                     │
│                                     │
│  UX/UI Designer based in Seoul     │
│                                     │
│                                     │
└─────────────────────────────────────┘

이름이 거대하게, 세로로 배치됩니다. 스크롤하면 이름이 점점 작아지면서 왼쪽 상단으로 이동하고, 프로젝트들이 나타납니다.

프로젝트 레이아웃:

[Project 1]
           ┌──────────────┐
           │              │
           │  Image       │
           │              │
           └──────────────┘
        Title
        Description

                        [Project 2]
                        ┌──────────────┐
                        │              │
                        │  Image       │
                        │              │
                        └──────────────┘
                     Title
                     Description

프로젝트마다 좌우를 번갈아 배치하되, 수직 위치도 조금씩 달리하여 리듬감을 만듭니다.

내비게이션: 전통적인 상단 메뉴 대신, 고정된 세로 텍스트:

화면 왼쪽:
│
│ P
│ R
│ O
│ J
│ E
│ C
│ T
│ S
│

마우스를 올리면 “Projects”가 가로로 펼쳐지면서 프로젝트 목록이 나타납니다.

6.6 프로젝트별 학습 포인트

각 프로젝트에서 배운 핵심 교훈을 정리합니다.

프로젝트 1 (스타트업 랜딩)

브랜드 가치를 색상과 레이아웃으로 표현하기
의료/헬스케어 클리셰(파란색, 흰색) 피하기
따뜻함과 전문성의 균형

프로젝트 2 (이커머스)

브로큰 그리드로 시각적 계층 만들기
한국 전통 색상의 현대적 활용
고급스러움 = 여백 + 디테일

프로젝트 3 (대시보드)

생산성과 미학의 조화
다크 모드에서 색상 사용법
데이터 시각화의 창의성

프로젝트 4 (포트폴리오)

타이포그래피로 개성 표현
극단적 대비의 효과
스크롤 기반 내러티브

7. 기업 디자인 시스템 구축하기

7.1 왜 기업에 디자인 시스템이 필요한가

기업 디자인 시스템은 단순히 “예쁜 디자인 가이드”가 아닙니다. 이것은 조직의 디자인 일관성, 생산성, 협업을 좌우하는 전략적 자산입니다.

일관성 확보

여러 팀, 여러 디자이너가 각자 작업하면 결과물이 제각각입니다. A 팀은 파란색을 #3b82f6로 쓰고, B 팀은 #4a90e2를 씁니다. 버튼 모서리는 팀마다 4px, 8px, 12px로 다릅니다.

사용자는 이런 불일치를 알아챕니다. “이 회사는 주먹구구식인가?”라는 인상을 줍니다.

디자인 시스템은 “우리 회사의 파란색은 #1976D2, 버튼 모서리는 8px”처럼 명확한 기준을 제시합니다.

생산성 향상

디자이너가 매번 “이 버튼은 어떤 색으로 해야 하지?”를 고민하면 시간 낭비입니다. 디자인 시스템이 있으면, 정해진 컴포넌트를 가져다 쓰면 됩니다.

개발자도 마찬가지입니다. “이 버튼의 CSS를 어떻게 짜지?”가 아니라, 디자인 시스템의 Button 컴포넌트를 import하면 끝입니다.

협업 촉진

디자인 시스템은 디자이너, 개발자, 기획자가 같은 언어로 소통하게 합니다. “Primary Button을 여기에 놓자”라고 하면 모두가 같은 것을 떠올립니다.

7.2 web-design-system으로 기업 디자인 시스템 만들기

web-design-system 스킬은 기업 디자인 시스템 구축에도 활용할 수 있습니다.

Phase 1: 브랜드 정의

먼저 회사의 브랜드 정체성을 명확히 합니다.

프롬프트:
"우리 회사의 디자인 시스템을 만들고 싶어. web-design-system skill 사용:

회사 정보:
- 이름: [회사명]
- 업종: [업종]
- 핵심 가치: [가치 1], [가치 2], [가치 3]
- 대상 고객: [고객 프로필]
- 경쟁사: [경쟁사 1], [경쟁사 2]

1단계: 경쟁사 디자인 분석
- [경쟁사 1]과 [경쟁사 2]의 디자인 특징
- 업계에서 흔한 디자인 패턴 5가지

2단계: 차별화 방향
- 경쟁사와 차별화되면서 우리 가치를 표현하는 디자인 방향 3가지
- 각 방향의 장단점

3단계: 선택과 정당화
- 가장 적합한 방향 선택
- 왜 이것이 우리 회사에 맞는지
"

AI는 경쟁사 분석을 통해 피해야 할 클리셰를 식별하고, 독창적이면서도 브랜드에 맞는 방향을 제시합니다.

Phase 2: 색상 시스템

색상은 브랜드의 가장 직접적인 표현입니다.

프롬프트:
"[1단계에서 선택한 방향]에 맞는 색상 시스템을 만들어줘.

요구사항:
- Primary, Secondary, Accent 색상
- Neutral 색상 (그레이 스케일)
- Semantic 색상 (Success, Warning, Error, Info)
- 다크 모드 색상
- 모든 색상은 WCAG 2.1 AA 대비 보장

각 색상에 대해:
- Hex 코드
- 사용 목적
- 조합 가이드
- 접근성 검증 결과
"

AI는 브랜드 정체성에 맞으면서도 접근성을 보장하는 색상 팔레트를 만듭니다.

Phase 3: 타이포그래피

한글 웹사이트의 타이포그래피는 특히 중요합니다.

프롬프트:
"한글 최적화 타이포그래피 시스템 만들어줘.

포함 요소:
- 폰트 선택 (헤딩용, 본문용, 코드용)
- Type Scale (xs, sm, base, lg, xl, 2xl, 3xl, 4xl, 5xl)
- 행간, 자간
- 폰트 웨이트
- 한영 혼용 가이드
- 반응형 폰트 크기

한글 최적화:
- Pretendard Variable 기본
- 행간 1.6-1.8
- word-break: keep-all
"

Phase 4: 컴포넌트 라이브러리

재사용 가능한 컴포넌트를 정의합니다.

프롬프트:
"다음 컴포넌트의 디자인 가이드를 만들어줘.
각 컴포넌트는 shadcn/ui 스타일을 피하고 우리만의 독특한 스타일로:

컴포넌트 목록:
1. Button (Primary, Secondary, Tertiary, Danger)
2. Input (Text, Password, Email, Search)
3. Card
4. Modal
5. Dropdown
6. Navigation
7. Alert
8. Badge
9. Tooltip
10. Table

각 컴포넌트에 대해:
- 비주얼 디자인 (스케치 또는 코드)
- 사용 시나리오
- 접근성 고려사항
- 상태 (Default, Hover, Focus, Active, Disabled)
- 반응형 동작
"

Phase 5: 문서화

디자인 시스템은 문서화가 생명입니다.

프롬프트:
"디자인 시스템 문서를 만들어줘.

구조:
1. 소개
   - 디자인 시스템의 목적
   - 사용 대상
   - 업데이트 정책

2. 디자인 원칙
   - 핵심 가치를 디자인으로 표현하는 방법
   - Do's and Don'ts

3. 색상
   - 팔레트
   - 사용 가이드
   - 접근성

4. 타이포그래피
   - 폰트
   - 크기와 행간
   - 한글 최적화

5. 컴포넌트
   - 각 컴포넌트 상세 설명
   - 코드 예시
   - 사용 사례

6. 레이아웃
   - 그리드 시스템
   - 간격
   - 브레이크포인트

7. 애니메이션
   - 트랜지션
   - 이징 함수
   - 사용 원칙

Markdown 형식으로, 개발자와 디자이너 모두 이해하기 쉽게
"

7.3 실제 구축 사례

가상의 회사 “그린테크 (GreenTech)”의 디자인 시스템 구축 과정을 살펴봅시다.

회사 정보

업종: 환경 기술 스타트업
제품: 탄소 배출 추적 및 상쇄 플랫폼
가치: 지속가능성, 투명성, 혁신
경쟁사: 대부분 파란색/녹색 사용

1단계: 경쟁사 분석

AI가 분석한 업계 클리셰:

밝은 녹색 (#4CAF50) - 환경 = 녹색 공식
나뭇잎/지구 아이콘 남발
자연 사진 배경 (숲, 바다)
“에코”, “그린”, “친환경” 과용
Material Design 기본 스타일

2단계: 차별화 방향

AI가 제안한 3가지 방향:

방향 1: 데이터 중심

색상: 차분한 차콜 (#2C3539) + 데이터 시각화 색상
특징: 감성보다 데이터와 투명성 강조
장점: 전문성, 신뢰감
단점: 차가울 수 있음

방향 2: 지구색 (Earthy)

색상: 테라코타, 황토, 암갈색
특징: 자연스럽지만 흔하지 않은 색상
장점: 따뜻하고 자연적
단점: 럭셔리 패션과 혼동 가능

방향 3: 딥 포레스트 (선택됨)

색상: 깊은 숲 녹색 (#0D3B2E) + 황금 액센트 (#E8B54D)
특징: 녹색이지만 깊고 성숙한 톤
장점: 환경 연관성 + 독창성 + 전문성
단점: 너무 어두우면 시니어 느낌

3단계: 색상 시스템

  
/* GreenTech 디자인 시스템 v1.0 */

:root {
  /* Primary - 깊은 숲 */
  --color-primary-50: #E8F0ED;
  --color-primary-100: #C5DAD1;
  --color-primary-200: #9FC2B3;
  --color-primary-500: #0D3B2E;  /* 메인 */
  --color-primary-700: #092A1F;
  --color-primary-900: #041510;
  
  /* Secondary - 모스 그린 */
  --color-secondary-500: #1A5F4A;
  
  /* Accent - 황금빛 */
  --color-accent-500: #E8B54D;
  
  /* Neutral */
  --color-gray-50: #F4F1E8;
  --color-gray-100: #E5E1D8;
  --color-gray-500: #8B8374;
  --color-gray-900: #1F2421;
  
  /* Semantic */
  --color-success: #2E7D32;   /* 녹색 */
  --color-warning: #F57C00;   /* 주황 */
  --color-error: #C62828;     /* 빨강 */
  --color-info: #0288D1;      /* 파랑 */
}

/* 다크 모드 */
  :root {
    --color-primary-500: #1A5F4A;  /* 약간 밝게 */
    --color-gray-50: #1F2421;      /* 반전 */
    --color-gray-900: #F4F1E8;
  }
}

접근성 검증:

Primary (#0D3B2E) / Gray-50 (#F4F1E8) = 11.2:1 ✓
Accent (#E8B54D) / Primary (#0D3B2E) = 4.7:1 ✓
모든 조합이 WCAG 2.1 AA 통과

4단계: 타이포그래피

  
/* 폰트 */

:root {
  --font-primary: 'Pretendard Variable', sans-serif;
  --font-mono: 'Roboto Mono', monospace;
  
  /* Type Scale (Major Third: 1.25) */
  --text-xs: 0.64rem;     /* 10px */
  --text-sm: 0.8rem;      /* 13px */
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.25rem;     /* 20px */
  --text-xl: 1.563rem;    /* 25px */
  --text-2xl: 1.953rem;   /* 31px */
  --text-3xl: 2.441rem;   /* 39px */
  --text-4xl: 3.052rem;   /* 49px */
  --text-5xl: 3.815rem;   /* 61px */
}

body {
  font-family: var(--font-primary);
  font-size: var(--text-base);
  line-height: 1.7;           /* 한글 최적화 */
  letter-spacing: -0.01em;
  word-break: keep-all;
  color: var(--color-gray-900);
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.3;
  letter-spacing: -0.02em;
  font-weight: 700;
}

code, pre {
  font-family: var(--font-mono);
  font-size: 0.875em;
}

5단계: 컴포넌트 - Button

  
// GreenTech Button Component

import styled from 'styled-components';

const StyledButton = styled.button`
  /* 기본 스타일 - shadcn/ui와 다르게 */
  padding: 0.75rem 1.5rem;
  font-family: var(--font-primary);
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  
  /* shadcn/ui의 둥근 모서리 대신 약간만 */
  border-radius: 2px;
  
  /* 드롭 그림자 대신 서브틀한 테두리 */
  border: 2px solid transparent;
  
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  
  /* Primary Variant */
  &.primary {
    background: var(--color-primary-500);
    color: var(--color-gray-50);
    
    &:hover {
      background: var(--color-primary-700);
      transform: translateY(-2px);
    }
    
    &:focus-visible {
      outline: 3px solid var(--color-accent-500);
      outline-offset: 2px;
    }
  }
  
  /* Secondary - 독특한 언더라인 효과 */
  &.secondary {
    background: transparent;
    color: var(--color-primary-500);
    position: relative;
    padding-bottom: 0.875rem;
    
    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 2rem;
      height: 2px;
      background: var(--color-primary-500);
      transition: width 0.3s ease;
    }
    
    &:hover::after {
      width: 100%;
    }
  }
  
  /* Disabled */
  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
  }
`;

export function Button({ variant = 'primary', children, ...props }) {
  return (
    <StyledButton className={variant} {...props}>
      {children}
    </StyledButton>
  );
}

이 버튼은:

shadcn/ui의 8px 둥근 모서리 대신 2px
드롭 그림자 대신 서브틀한 변화
Secondary는 언더라인 확장 효과 (독창적)
접근성: 포커스 인디케이터 명확

7.4 디자인 시스템 유지보수

디자인 시스템은 만드는 것보다 유지하는 것이 더 어렵습니다.

버전 관리

디자인 시스템도 코드처럼 버전을 관리해야 합니다.

v1.0.0 - 초기 릴리스 (2026-01-15)
- 색상 시스템
- 타이포그래피
- 기본 컴포넌트 10개

v1.1.0 - 컴포넌트 추가 (2026-02-01)
- Table 컴포넌트
- Pagination
- Breadcrumb

v1.2.0 - 다크 모드 (2026-03-01)
- 전체 다크 모드 지원
- 자동 전환 기능

v2.0.0 - 메이저 업데이트 (2026-06-01)
- 브랜드 리뉴얼에 따른 색상 변경
- Breaking change: 일부 컴포넌트 API 변경

업데이트 프로세스

제안: 새 컴포넌트나 변경 사항 제안
리뷰: 디자인 시스템 팀 검토
프로토타입: 실제 구현
테스트: 여러 제품에서 시험
문서화: 가이드 업데이트
릴리스: 버전 발표

커뮤니케이션

디자인 시스템 업데이트를 모든 팀에 알려야 합니다.

Slack 채널 운영
정기 미팅 (월 1회)
릴리스 노트 작성
워크샵 개최 (분기 1회)

7.5 AI와 디자인 시스템

web-design-system 스킬은 디자인 시스템 유지보수에도 활용할 수 있습니다.

자동 문서 생성

프롬프트:
"이 컴포넌트의 사용 가이드를 작성해줘:

[컴포넌트 코드]

포함 내용:
- 개요
- Props 설명
- 사용 예시 (3가지)
- 접근성 고려사항
- 주의사항
"

일관성 검증

프롬프트:
"이 페이지 디자인이 우리 디자인 시스템을 따르는지 확인해줘:

[페이지 스크린샷 또는 코드]

디자인 시스템: [링크 또는 요약]

확인 항목:
- 색상 (허용된 색상만 사용?)
- 타이포그래피 (Type Scale 준수?)
- 간격 (Spacing System 준수?)
- 컴포넌트 (표준 컴포넌트 사용?)
- 접근성 (기준 충족?)

위반 사항과 수정 방법을 알려줘
"

새 컴포넌트 제안

프롬프트:
"우리 디자인 시스템에 [새 컴포넌트]를 추가하려고 해.
기존 스타일과 일관되게 디자인해줘:

기존 컴포넌트 예시:
[Button 코드]
[Card 코드]

새 컴포넌트 요구사항:
[요구사항 설명]

디자인 원칙:
- shadcn/ui 스타일 피하기
- 독창적이면서 일관적
- 접근성 보장
"

AI는 기존 디자인 시스템의 패턴을 학습하여, 새 컴포넌트를 일관되게 디자인할 수 있습니다.

8. Skills 생태계와 미래

8.1 Agent Skills 생태계의 현황

2026년 1월 현재, Agent Skills 생태계는 빠르게 성장하고 있습니다.

주요 통계 (예상)

전체 스킬 수: 500개 이상
활성 기여자: 1,000명 이상
다운로드 수: 100,000회 이상
지원 도구: Claude Code, Cursor, Windsurf 등

인기 카테고리

프론트엔드 개발 (150개)
백엔드 개발 (100개)
데이터베이스 (50개)
웹 디자인 (40개)
DevOps (30개)
모바일 개발 (20개)
기타 (110개)

주목할 트렌드

트렌드 1: 산업 특화 스킬

일반적인 개발 스킬을 넘어, 특정 산업에 특화된 스킬들이 등장하고 있습니다.

healthcare-hipaa-compliance: 의료 시스템 HIPAA 준수
fintech-regulations: 금융 규제 준수
ecommerce-optimization: 이커머스 성능 최적화
education-platform: 교육 플랫폼 베스트 프랙티스

트렌드 2: 회사별 스킬

큰 회사들이 자사의 개발 표준을 스킬로 만들어 공개하고 있습니다.

airbnb-javascript: Airbnb JavaScript 스타일 가이드
google-material-design: Material Design 구현
stripe-api-design: Stripe API 디자인 원칙

트렌드 3: 다국어 스킬

영문 중심이었던 초기와 달리, 다양한 언어의 스킬들이 등장하고 있습니다.

중국어 스킬: 20개
일본어 스킬: 15개
한국어 스킬: 5개 (아직 적음!)
스페인어, 프랑스어, 독일어 등

8.2 한국 개발자를 위한 기회

현재 Skills.sh에서 한국어나 한국 시장에 특화된 스킬은 매우 적습니다. 이것은 한국 개발자들에게 큰 기회입니다.

만들 수 있는 한국 특화 스킬들

korean-web-standards

한국 웹 표준
웹 접근성 인증 기준
브라우저 호환성 (특히 IE11 지원이 여전히 필요한 경우)
한글 타이포그래피

korean-ecommerce

배송 시스템 (새벽 배송, 택배함 등)
결제 시스템 (토스, 카카오페이, 네이버페이 등)
리뷰 시스템 (한국 사용자의 높은 리뷰 참여율)
CS 시스템 (빠른 응대 기대)

personal-info-protection

개인정보보호법 준수
쿠키 동의
데이터 암호화
만 14세 미만 처리

korean-fintech

전자금융거래법
금융 보안
본인 인증 시스템
가상계좌, 계좌이체 등

korean-gov-systems

행정표준용어
공공 데이터 포털 연동
정부24 연동
전자정부 프레임워크

korean-mobile-optimization

카카오톡 공유
네이버 앱 연동
모바일 결제
앱 다운로드 유도

이런 스킬들을 만들어 공유하면, 전 세계 한국어 사용 개발자들에게 도움이 됩니다.

8.3 자신만의 스킬 만들기

여러분도 스킬을 만들 수 있습니다. 과정은 생각보다 간단합니다.

Step 1: 전문 지식 식별

자신이 다른 사람보다 잘 아는 것이 무엇인지 생각해보세요.

특정 기술 스택 (예: Flutter, Django, PostgreSQL)
특정 도메인 (예: 게임 개발, 이커머스, 블록체인)
특정 방법론 (예: TDD, DDD, Clean Architecture)
특정 산업 (예: 의료, 금융, 물류)

Step 2: 베스트 프랙티스 정리

해당 분야의 베스트 프랙티스를 체계적으로 정리합니다.

예: Flutter 성능 최적화 스킬

위젯 리빌드 최소화
const 생성자 사용
이미지 캐싱
네트워크 요청 최적화
메모리 누수 방지 …

각 항목에 대해:

설명
나쁜 예시
좋은 예시
이유

Step 3: SKILL.md 작성

다음 템플릿을 사용하세요:

  
# [Skill 이름]

## Overview
이 스킬이 무엇을 하는지 1-2 문단으로 설명

## When to Use This Skill
어떤 상황에서 이 스킬을 사용해야 하는지

## Core Principles
핵심 원칙 3-5개

## Detailed Rules

### 규칙 1: [제목]
설명...

❌ 나쁜 예:
```[code]```

✅ 좋은 예:
```[code]```

왜 이렇게 해야 하는가:
...

### 규칙 2: [제목]
...

## Examples
실제 사용 예시

## Common Mistakes
흔한 실수와 해결 방법

## References
참고 문서 링크

Step 4: README.md 작성

사람이 읽을 문서입니다:

  
# [Skill 이름]

## 설치
```bash
npx skills add [your-username]/[skill-name]
```

## 사용법
```
"[작업 설명]. [skill-name] skill 참고해서"
```

## 예시
...

## FAQ
...

Step 5: GitHub에 공개

  
# Git 저장소 생성
git init
git add .
git commit -m "Initial release"

# GitHub에 푸시
git remote add origin https://github.com/[username]/[skill-name]
git push -u origin main

Step 6: Skills.sh에 등록

Skills.sh 웹사이트에서 GitHub 저장소 URL을 제출하면, 며칠 내에 리뷰 후 게시됩니다.

8.4 커뮤니티 기여

스킬을 만드는 것 외에도 다양한 방식으로 기여할 수 있습니다.

기존 스킬 개선

마음에 드는 스킬을 발견했는데 개선 여지가 있다면:

GitHub 이슈로 제안
Fork & Pull Request
번역 (영문 → 한글)
예시 추가
문서화 개선

스킬 리뷰

다른 사람의 스킬을 사용해보고 피드백을 주세요:

작동하는가?
문서가 명확한가?
예시가 충분한가?
개선 아이디어는?

토론 참여

Skills.sh 커뮤니티 포럼이나 Discord에서:

질문에 답변
베스트 프랙티스 공유
새로운 아이디어 논의

한국어 커뮤니티 구축

한국 개발자들을 위한 별도 커뮤니티를 만들 수도 있습니다:

Slack/Discord 채널
정기 모임
스킬 제작 워크샵
한글 스킬 큐레이션

8.5 미래 전망

Agent Skills 생태계는 어디로 향하고 있을까요?

단기 (2026-2027)

1. 스킬 마켓플레이스

현재는 모든 스킬이 무료입니다. 하지만 곧 프리미엄 스킬 마켓플레이스가 등장할 것입니다.

무료 기본 스킬
유료 고급 스킬
기업용 라이선스
구독 모델

전문가들이 자신의 노하우를 스킬로 만들어 판매할 수 있습니다.

2. AI 도구 통합

더 많은 AI 코딩 도구가 Agent Skills를 지원할 것입니다:

GitHub Copilot
Tabnine
Codeium
Amazon CodeWhisperer

표준화된 포맷 덕분에, 한 번 만든 스킬을 모든 도구에서 사용할 수 있습니다.

3. IDE 네이티브 지원

VS Code, IntelliJ IDEA 같은 주요 IDE가 Agent Skills를 네이티브로 지원할 것입니다.

스킬 검색 및 설치 UI
스킬 적용 상태 표시
스킬 충돌 해결
팀 스킬 동기화

중기 (2027-2029)

4. 자동 스킬 생성

AI가 코드베이스를 분석하여 자동으로 스킬을 만들 수 있을 것입니다.

프롬프트:
"이 프로젝트의 코딩 스타일을 분석해서 스킬로 만들어줘"

AI가 자동으로:
- 네이밍 컨벤션 분석
- 아키텍처 패턴 파악
- 코드 스타일 추출
- SKILL.md 생성

5. 스킬 조합

여러 스킬을 조합하여 새로운 스킬을 만들 수 있을 것입니다.

react-best-practices 
+ typescript-strict
+ testing-library
= react-typescript-full-stack

6. 실시간 협업

팀원들이 실시간으로 스킬을 함께 만들고 수정할 수 있습니다.

Google Docs 스타일 공동 편집
변경 이력 추적
댓글과 제안
버전 브랜칭

장기 (2029+)

7. AI 에이전트 자율성

AI 에이전트가 스스로 필요한 스킬을 찾고, 배우고, 적용할 수 있을 것입니다.

사용자: "이커머스 사이트 만들어줘"

AI: 
스킬 검색 (ecommerce-best-practices)
스킬 다운로드 및 학습
프로젝트 생성
스킬 적용
결과 리뷰
개선 제안

8. 산업 표준화

Agent Skills가 산업 표준이 되어, 모든 AI 개발 도구가 지원하고, 기업들이 공식 스킬을 발표할 것입니다.

ISO/IEC 표준 제정 가능성
정부 및 공공기관 공식 스킬
대학 교육 과정 통합
자격증 및 인증

9. 전문 직업 출현

“Agent Skill Engineer”라는 새로운 직업이 생길 것입니다.

역할:

기업 스킬 설계 및 관리
AI 에이전트 교육
스킬 품질 검증
스킬 생태계 기여

필요 역량:

도메인 전문 지식
AI 이해도
기술 문서화 능력
커뮤니케이션

8.6 한국의 역할

한국은 이 생태계에서 중요한 역할을 할 수 있습니다.

강점

IT 인프라: 세계 최고 수준의 인터넷 속도와 모바일 보급률
개발 문화: 빠른 개발 속도와 높은 품질 추구
언어적 독특성: 한글 최적화는 한국 개발자가 가장 잘할 수 있음
시장 규모: 5천만 한국어 사용자 + 전 세계 한인

기회

한글 AI 도구 시장 선점: 한국 시장에 최적화된 스킬로 차별화
K-개발 문화 세계화: 한국의 우수한 개발 관행을 글로벌에 전파
산업 특화 스킬: 한국이 강한 산업(반도체, 자동차, K-뷰티 등)의 스킬
교육 시장: 한국 개발자 교육에 스킬 활용

과제

영문 문서화: 글로벌 확산을 위해 영문 문서 필요
국제 협력: 해외 개발자들과 적극적 교류
표준화 참여: 국제 표준 논의에 참여하여 한국 관점 반영
인식 제고: Agent Skills의 중요성을 한국 개발 커뮤니티에 알리기

마무리하며

핵심 요약

web-design-system Agent Skill은 뻔한 AI 디자인의 한계를 극복하는 솔루션입니다.

핵심 개념:

Verbalized Sampling: 흔한 것을 식별하고 의도적으로 피하기
안티패턴 라이브러리: 피해야 할 디자인 패턴 데이터베이스
한글 최적화: Pretendard, 행간 1.7, word-break: keep-all
접근성 가드레일: WCAG 2.1 AA 필수 준수
실전 템플릿: 바로 사용 가능한 와이어프레임과 코드

차별화 요소:

글로벌 스킬: 영문 중심, 서구 디자인 관습
web-design-system: 한글 최적화, 한국 시장 이해, 기획 포함

활용 범위:

스타트업 랜딩 페이지
이커머스 사이트
관리자 대시보드
개인 포트폴리오
기업 디자인 시스템

다음 단계

이 가이드를 읽은 후, 다음을 추천합니다:

1주차: 설치 및 학습

web-design-system 설치
간단한 랜딩 페이지 만들어보기
Verbalized Sampling 프롬프트 연습

2-3주차: 실전 적용

실제 프로젝트에 적용
팀원들과 공유
피드백 수집 및 개선

1개월차: 확장

회사 디자인 시스템 구축 시작
한국 특화 요소 추가
문서화

2-3개월차: 기여

개선 사항 제안
한국어 스킬 제작
커뮤니티 참여

함께 만들어갈 미래

Agent Skills 생태계는 시작 단계입니다. 여러분의 참여가 생태계를 풍성하게 만듭니다.

특히 한국 개발자 커뮤니티의 참여가 중요합니다. 한글 웹 디자인, 한국 시장 특성, K-개발 문화를 세계에 알릴 수 있는 기회입니다.

web-design-system은 그 첫걸음입니다. 이 스킬이 더 많은 한국 특화 스킬의 영감이 되기를 바랍니다.

함께 만들어요:

더 나은 한글 웹 디자인
더 독창적인 사용자 경험
더 포용적인 웹 접근성
더 혁신적인 AI 활용

연락 및 피드백

피드백

GitHub Issues: [저장소 URL]
Email: [이메일]
Twitter/X: [@handle]

커뮤니티

Discord: [초대 링크]
Slack: [채널 링크]
정기 모임: [일정]

자료

공식 문서: [URL]
튜토리얼: [URL]
예제 코드: [URL]

이 가이드가 여러분의 웹 디자인 여정에 도움이 되기를 바랍니다.

독창적이고, 아름답고, 접근 가능한 웹을 함께 만들어갑시다.

작성일: 2026년 1월 23일
최종 수정일: 2026년 1월 23일
버전: 1.0
저자: web-design-system skill 개발자

라이선스: MIT License
기여: 환영합니다!

부록

A. 용어 사전

Agent Skills: AI가 따를 규칙과 베스트 프랙티스를 패키징한 것
Verbalized Sampling: AI가 흔한 선택을 먼저 말하고 피하게 하는 기법
안티패턴: 피해야 할 디자인/코드 패턴
WCAG: Web Content Accessibility Guidelines (웹 접근성 가이드라인)
Pretendard: 한글 최적화 오픈소스 폰트
브로큰 그리드: 불규칙한 그리드 레이아웃
SKILL.md: AI가 읽는 스킬 가이드 문서
Skills.sh: Agent Skills 중앙 허브

B. 참고 링크

Agent Skills

Skills.sh: https://skills.sh
Vercel Labs: https://github.com/vercel-labs/agent-skills
Anthropic: https://github.com/anthropics/skills

디자인 리소스

Pretendard: https://github.com/orioncactus/pretendard
WCAG 2.1: https://www.w3.org/WAI/WCAG21/quickref/
한글 타이포그래피: https://typography.hangeul.org/

영감

Awwwards: https://www.awwwards.com/
Dribbble: https://dribbble.com/
Behance: https://www.behance.net/

C. 체크리스트

스킬 사용 전

스킬 설치 확인
README 읽기
프로젝트 맥락 이해
요구사항 정리

디자인 생성 시

뻔한 패턴 식별 요청
창의적 대안 3가지 요청
선택 이유 설명 요청
접근성 검증 요청

완성 후 확인

보라색 그라데이션 없음?
shadcn/ui 느낌 없음?
한글 최적화 (Pretendard, 행간 1.7)?
색상 대비 4.5:1 이상?
터치 타겟 44x44px?
모바일 최적화?
독창적이면서 사용 가능?

D. 자주 묻는 질문

Q: 모든 프로젝트에 이 스킬을 사용해야 하나요? A: 아닙니다. 독창성이 중요한 프로젝트에 사용하세요. 관공서 웹사이트처럼 익숙함이 중요한 경우는 표준 패턴을 따르는 것이 나을 수 있습니다.

Q: 스킬이 완벽한 디자인을 보장하나요? A: 아닙니다. 스킬은 가이드일 뿐입니다. 최종 판단과 조정은 디자이너와 개발자의 몫입니다.

Q: 영문 프로젝트에도 사용할 수 있나요? A: 네. 한글 최적화 부분만 건너뛰면 영문 프로젝트에도 유용합니다.

Q: 다른 디자인 시스템(Material, shadcn)과 같이 쓸 수 있나요? A: 네. web-design-system으로 독창적인 방향을 정한 후, 기존 디자인 시스템으로 구조화할 수 있습니다.

Q: 스킬을 수정할 수 있나요? A: 네. 로컬에 설치된 스킬은 자유롭게 수정 가능합니다. 회사 맥락에 맞게 커스터마이징하세요.

Q: 한국어 스킬이 더 필요한데요? A: 여러분이 만들어주세요! 이 가이드의 “자신만의 스킬 만들기” 섹션을 참고하세요.

Q: 피드백은 어디로 보내나요? A: GitHub Issues나 커뮤니티 채널로 보내주세요. 모든 피드백을 환영합니다!

AI, Agent Skills

AI Skills.sh Vercel Claude.write

뻔한 디자인을 넘어, 독창적인 웹을 만드는 법

목차

1. 들어가며: 왜 모든 웹사이트가 비슷해 보일까

1.1 디자인 동질화 현상

1.2 독창성이 중요한 이유

1.3 AI 시대의 딜레마

1.4 이 가이드가 제시하는 해결책

2. Agent Skills 혁명의 시작

2.1 2026년 1월, 웹 개발의 게임 체인저

2.2 Skills.sh 생태계의 탄생

2.3 주요 공식 Skills 살펴보기

2.4 왜 Agent Skills가 게임 체인저인가

2.5 한국 시장의 특수성과 기회

3. web-design-system Skill 깊이 이해하기

3.1 탄생 배경과 철학

3.2 핵심 구성 요소

3.3 다른 Skills와의 차별점

3.4 스킬의 구조와 파일

3.5 어떻게 작동하는가

4. Verbalized Sampling: 창의성의 과학

4.1 왜 AI는 뻔한 것을 만드는가

4.2 Temperature와 Top-p의 한계

4.3 Verbalized Sampling의 작동 원리

4.4 4단계 프로세스

4.5 실제 효과

4.6 심리학적 근거

4.7 한계와 주의사항

4.8 응용과 확장

5. 한글 웹 디자인의 특수성

5.1 한글은 왜 특별한가

5.2 타이포그래피 최적화

5.3 한영 혼용 처리

5.4 한국 웹 트렌드의 이해

5.5 한국 법규 준수

5.6 한국 사용자의 UX 선호도

5.7 web-design-system의 한글 최적화

6. 실전 프로젝트 가이드

6.1 설치와 시작

6.2 프로젝트 1: 스타트업 랜딩 페이지

6.3 프로젝트 2: 이커머스 상품 리스트

6.4 프로젝트 3: 관리자 대시보드

6.5 프로젝트 4: 개인 포트폴리오

6.6 프로젝트별 학습 포인트

7. 기업 디자인 시스템 구축하기

7.1 왜 기업에 디자인 시스템이 필요한가

7.2 web-design-system으로 기업 디자인 시스템 만들기

7.3 실제 구축 사례

7.4 디자인 시스템 유지보수

7.5 AI와 디자인 시스템

8. Skills 생태계와 미래

8.1 Agent Skills 생태계의 현황

8.2 한국 개발자를 위한 기회

8.3 자신만의 스킬 만들기

8.4 커뮤니티 기여

8.5 미래 전망

8.6 한국의 역할

마무리하며

핵심 요약

다음 단계

함께 만들어갈 미래

연락 및 피드백

부록

A. 용어 사전

B. 참고 링크

C. 체크리스트

D. 자주 묻는 질문

인기 태그