---
name: "frontend-design"
description: "개성 있고 완성도 높은 프론트엔드 UI를 설계하고 구현합니다. 웹 페이지, 컴포넌트, 대시보드, 랜딩페이지, 스타일 개선 요청이 있을 때 호출합니다."
---

# 개성 있는 프로덕션급 프론트엔드 디자인

이 스킬은 흔한 "AI가 만든 티 나는" 결과물을 피하고, 높은 디자인 완성도를 가진 프론트엔드 인터페이스를 만들기 위한 가이드입니다. 미학적 디테일과 창의적 선택에 집중하면서 실제로 동작하는 코드를 구현합니다.

사용자는 컴포넌트, 페이지, 애플리케이션, 포스터, 웹 인터페이스 등의 프론트엔드 요구사항을 제공합니다. 여기에는 목적, 대상 사용자, 기술 제약이 함께 포함될 수 있습니다.

## 디자인 사고

코드를 작성하기 전에 문맥을 이해하고, 분명하고 대담한 미학 방향을 먼저 정합니다.

- **목적** - 이 인터페이스가 해결하는 문제는 무엇인지, 누가 사용하는지 파악합니다.
- **톤** - 극단적인 방향성을 고릅니다. 예: 극단적 미니멀리즘, 맥시멀리즘, 레트로 퓨처리즘, 유기적/자연주의, 고급/정제, 장난감 같은 유쾌함, 에디토리얼/매거진, 브루탈리즘, 아르데코, 소프트/파스텔, 산업적/실용주의 등
- **제약** - 프레임워크, 성능, 접근성 같은 기술 조건을 확인합니다.
- **차별점** - 이 결과물을 잊히지 않게 만드는 핵심 한 가지가 무엇인지 정의합니다.

**중요**: 개념적 방향을 명확히 정하고 정밀하게 실행해야 합니다. 대담한 맥시멀리즘이든 정제된 미니멀리즘이든 모두 가능하지만, 핵심은 강도가 아니라 의도성입니다.

방향을 정할 때는 "멋있어 보이는 것"만이 아니라 "왜 이 제품과 맥락에 맞는가"까지 설명할 수 있어야 합니다.

그 다음, HTML/CSS/JS, React, Vue 등 적절한 기술로 아래 기준을 만족하는 실제 동작 코드를 구현합니다.

- 프로덕션 수준의 완성도와 기능성
- 시각적으로 강렬하고 기억에 남는 결과
- 일관된 미학 관점
- 세부까지 정교하게 다듬어진 표현

## 프론트엔드 미학 가이드라인

다음 요소에 집중합니다.

- **타이포그래피** - 아름답고, 독특하고, 흥미로운 폰트를 선택합니다. Arial, Inter 같은 너무 흔한 폰트는 피합니다. 개성 있는 디스플레이 폰트와 정제된 본문 폰트를 조합합니다.
- **색상과 테마** - 일관된 미학 방향에 확실히 맞춥니다. CSS 변수로 일관성을 유지합니다. 소심하게 균등 분배된 색상보다, 지배적인 메인 컬러와 날카로운 포인트 컬러가 더 강한 인상을 줍니다.
- **모션** - 애니메이션과 마이크로 인터랙션을 활용합니다. HTML에서는 가능하면 CSS 중심으로 해결하고, React에서는 Motion 계열 라이브러리를 활용할 수 있습니다. 페이지 로드 연출, 스태거드 리빌, 스크롤 트리거, 의외성 있는 호버 상태처럼 임팩트 있는 순간에 집중합니다.
- **공간 구성** - 예상 가능한 배치보다 비대칭, 겹침, 대각선 흐름, 그리드를 깨는 요소, 넉넉한 여백 또는 의도된 밀도를 적극 활용합니다.
- **배경과 시각 디테일** - 단색 배경으로 끝내지 말고 분위기와 깊이를 만듭니다. 그래디언트 메시, 노이즈 텍스처, 기하학 패턴, 레이어 투명도, 강한 그림자, 장식 테두리, 커스텀 커서, 그레인 오버레이 등 맥락에 맞는 효과를 활용합니다.
- **맥락 적합성** - 금융, 의료, 패션, 교육처럼 도메인별 기대치를 반영합니다. 시각적으로 강하더라도 제품 신뢰를 해치면 실패입니다.
- **디테일 완성도** - 버튼 상태, 입력 포커스, 빈 상태, 에러 상태, 로딩 상태까지 같은 미학 언어로 정리합니다.

## 반드시 피할 것

다음과 같은 흔한 AI 스타일은 사용하지 않습니다.

- Inter, Roboto, Arial, 시스템 폰트에 과도하게 의존하는 구성
- 흰 배경 위 보라색 그라데이션 같은 진부한 색 조합
- 너무 예측 가능한 레이아웃과 컴포넌트 패턴
- 맥락 고유성이 없는 쿠키커터식 디자인

항상 맥락에 맞게 창의적으로 해석하고, 예상 밖이지만 설득력 있는 선택을 합니다. 모든 디자인은 서로 달라야 하며, 결과물마다 라이트/다크 테마, 폰트, 분위기, 스타일이 달라질 수 있어야 합니다. 여러 세대의 결과물이 공통된 안전한 선택으로 수렴해서는 안 됩니다.

다음 같은 패턴도 피합니다.

- 의미 없는 화려함만 있고 정보 위계가 약한 구성
- 디자인 방향 없이 라이브러리 기본 스타일만 얹은 화면
- 모든 요소에 같은 그림자, 같은 반경, 같은 간격을 기계적으로 적용한 화면
- 제품 목적보다 Dribbble식 비주얼 과시에 치우친 화면

## 구현 복잡도와 미학의 일치

구현 복잡도는 미학 방향과 맞아야 합니다.

- 맥시멀한 디자인이라면 풍부한 애니메이션, 시각 효과, 정교한 레이어링이 필요할 수 있습니다.
- 미니멀하거나 정제된 디자인이라면 절제, 정밀한 간격, 타이포그래피, 미묘한 디테일에 집중해야 합니다.

우아함은 단순함 자체가 아니라, 선택한 비전을 얼마나 정확하게 실행했는지에서 나옵니다.

## 작업 절차

이 스킬을 적용할 때는 보통 아래 순서를 따릅니다.

1. 제품 맥락과 사용자층을 확인합니다.
2. 대담한 미학 방향을 한 문장으로 정의합니다.
3. 색상, 폰트, 레이아웃, 모션 원칙을 결정합니다.
4. 그 방향에 맞는 실제 UI를 구현합니다.
5. 상태 변화, 반응형, 접근성, 디테일 완성도를 점검합니다.

## 산출물 기대치

최종 결과물은 다음을 만족해야 합니다.

- 실제로 동작하는 코드여야 합니다.
- 디자인 방향이 한눈에 읽혀야 합니다.
- 타이포그래피와 색상 시스템이 의도적으로 구성되어야 합니다.
- 상태 변화와 미세 상호작용까지 마감되어야 합니다.
- 흔한 AI 스타일이 아니라, 맥락에 맞는 인상적인 화면이어야 합니다.

## 핵심 원칙

- 프론트엔드 결과물은 항상 실제로 동작해야 합니다.
- 미학 방향은 분명해야 하며, 애매한 절충안으로 흐르지 않습니다.
- 흔한 AI 스타일 대신 맥락에 맞는 독창성을 우선합니다.
- 디테일, 간격, 타이포그래피, 모션, 색상 일관성을 끝까지 다듬습니다.
- 과감한 선택을 두려워하지 말고, 명확한 방향성을 완성도 있게 구현합니다.