hakushiidev/claude-skills

이 스킬은 독창적이고 프로덕션에 적합한 프론트엔드 인터페이스 생성을 안내합니다. 실제 동작하는 코드를 탁월한 미적 디테일에 대한 주의를 기울여 구현합니다.

예시 프롬프트

• "브리프에 따라 히어로 섹션을 만들어 줘"
• "스칸디나비아 스타일의 카드 컴포넌트를 만들어 줘"
• "일본 잡지 느낌이 나길 원해. 레이아웃을 구축해 줘."
• "설정 페이지를 만들어 줘. 어울리는 스타일을 사용해."

코드를 작성하기 전에

1. 먼저 기존 코드베이스를 탐색하세요. 특히 다음 항목을 확인합니다:

   • 컴포넌트 디렉토리: components/, ui/, shared/ 디렉토리와 각 컴포넌트의 이름 및 props/API를 나열합니다.
   • CSS 변수 / 토큰: tokens.css, variables.css, theme.css 또는 사용자 정의 속성이 있는 :root 선언 파일을 찾습니다.
   • Tailwind 설정: tailwind.config.js 또는 tailwind.config.ts 파일에서 theme.extend의 사용자 정의 값을 확인합니다.
   • UI 프레임워크 테마: Material UI의 createTheme, Chakra의 extendTheme, shadcn의 globals.css 및 components.json 파일을 확인합니다.
   • Storybook: .storybook/ 디렉토리 또는 *.stories.* 파일로 문서화된 컴포넌트를 확인합니다.
   • 폰트 로딩: Google Fonts 링크, @font-face 선언, 폰트 임포트를 확인합니다.
   • 레이아웃 패턴: 기존 페이지가 그리드, 컨테이너, 중단점 및 여백을 어떻게 처리하는지 확인합니다.
   • Package.json UI 의존성: tailwindcss, @mui/material, @chakra-ui/react, @radix-ui, lucide-react, framer-motion 등을 확인합니다.
   • 구축해야 하는 것과 일치하거나 부분적으로 일치하는 컴포넌트가 있으면 확장하거나 구성하세요. 중복 생성하지 마세요.

2. 맥락을 이해하세요:

   • 이 인터페이스는 어떤 문제를 해결하나요? 누가 사용하나요?
   • 의도된 정서적 톤은 무엇인가요?
   • 하드 제약 조건(프레임워크, 기기, 성능, 접근성)은 무엇인가요?

3. 미학적 방향을 결정하세요. 사용자가 하나를 지정하거나(아래 철학 참조) 상황에 맞는 것을 직접 선택하세요. 코드를 작성하기 전에 선택한 이유와 함께 선택 사항을 명시하세요.

미학 철학

사용자가 철학을 언급하거나 분위기를 설명하면, 이를 구체적인 구현 가이드로 사용하세요. 각 철학은 서체, 색상, 레이아웃, 여백, 모션 및 디테일 처리를 정의합니다.

Dieter Rams (기능주의자)

적지만 더 나은. 모든 요소는 그 자리를 정당화해야 합니다. 기능 없는 장식은 없습니다.

• 서체: 깔끔한 산세리프(Helvetica Neue, Suisse Intl, Akkurat). 제목에는 좁은 자간. 본문에는 넉넉한 행간. 하나의 크기 척도를 엄격히 사용.
• 색상: 절제됨. 단일 기능적 악센트가 있는 단색. 흰색 또는 밝은 회색 배경. 색상은 정보이지 장식이 아닙니다.
• 레이아웃: 엄격한 그리드. 명확한 기능적 계층 구조. 공간 시스템에 정렬된 컴포넌트. 그 자체를 위한 비대칭 없음.
• 여백: 일관된 수학적 척도(4px/8px 기준). 넉넉한 패딩. 요소 간의 여유 공간.
• 모션: 최소화. 의도적인 전환(상태 변경, 표시)에만 사용. 장식적 애니메이션 없음.
• 디테일: 미묘한 테두리와 구분선(그림자 대신). 정밀한 정렬. 모서리 둥글림은 드물고 일관되게 사용.

스위스 / 국제 타이포그래픽

구조를 통한 객관성. 그리드는 신성합니다. 콘텐츠가 최우선입니다.

• 서체: 강력한 산세리프(Neue Haas Grotesk, Univers, Aktiv Grotesk). 제목과 본문 간의 극적인 크기 대비. 넉넉한 자간이 있는 대문자 소제목.
• 색상: 고대비. 검정, 흰색 및 하나의 기본 색상. 구성 요소로서의 대담한 색상 블록.
• 레이아웃: 엄격한 다중 열 그리드. 비대칭 균형. 텍스트와 이미지의 대화. 요소 간 정렬은 절대적입니다.
• 여백: 그리드 모듈에 의해 정의됨. 거터는 디자인의 일부이지 부산물이 아닙니다.
• 모션: 그리드를 존중하는 페이지 전환 및 스크롤 트리거 표시. 장난기 있는 바운스 없음.
• 디테일: 구조적 요소로서의 규칙(수평선). 그라데이션 없음. 그림자 없음. 평면성이 핵심입니다.

일본 미니멀리즘 (Ma)

공백은 콘텐츠입니다. 절제는 세련됨을 전달합니다. 조용함이 시끄러움보다 낫습니다.

• 서체: 얇은 산세리프 또는 우아한 세리프(Noto Sans, Cormorant). 넉넉한 행간(1.8-2.0). 큰 흰색 여백이 있는 작은 본문 크기.
• 색상: 음영이 있는 자연색(따뜻한 회색, 돌, 세이지, 와시). 강한 대비보다 미묘한 색조 변화. 거의 단색.
• 레이아웃: 비대칭이지만 균형 잡힘. 중앙에서 벗어난 콘텐츠. 넓은 빈 영역은 의도적입니다. 콘텐츠가 공간에 떠 있습니다.
• 여백: 극도의 공백. "정상"이라고 느껴지는 것보다 2-3배 더 큰 패딩과 마진. 요소가 숨을 쉽니다.
• 모션: 느리고 부드러운 페이드(400-600ms). 바운스, 오버슈트 없음. 위치 이동보다 불투명도 전환.
• 디테일: 가는 실선 테두리. 미묘한 질감(종이 결, 린넨). 날카로운 그림자 없음. 부드럽고 확산된 효과.

브루탈리스트 / 로우

구조가 보입니다. 광택 없음. 반미학이 미학입니다.

• 서체: 시스템 폰트, 고정폭(JetBrains Mono, IBM Plex Mono, Courier) 또는 공격적인 디스플레이 서체. 혼합 크기. 질감으로서의 텍스트.
• 색상: 검정과 흰색이 기본. 색상을 사용한다면 원시적이고 충돌하는 색상(건설용 노랑, 위험 주황, 터미널 초록). 그라데이션 없음.
• 레이아웃: 눈에 띄는 테두리. 노출된 박스 모델. 쌓인 블록. 의도적인 거침. 콘텐츠 우선, 아름다움은 절대 없음.
• 여백: 좁거나 의도적으로 고르지 않음. 압축된 느낌의 패딩.
• 모션: 없음, 또는 충격적(즉각적인 상태 변경, 하드 컷). 이징 없음.
• 디테일: 눈에 띄는 윤곽선. 기본 브라우저 양식 요소도 의도적일 수 있음. 텍스트 전용 인터페이스. 기능적이지 않으면 아이콘 없음.

스칸디나비아

따뜻함과 절제. 기능적 아름다움. 기본적으로 접근 가능.

• 서체: 둥글고 친근한 산세리프(Nunito, Poppins, Circular, Cera Pro). 중간 두께. 편안한 읽기 크기.
• 색상: 자연스러운 팔레트. 따뜻한 흰색, 부드러운 파란색, 음영 처리된 녹색, 점토. 파스텔 악센트. 순수한 검정 사용 안 함(숯 사용).
• 레이아웃: 깔끔하고 개방적. 카드 기반. 둥근 모서리(8-12px). 편안하고 넉넉한 레이아웃.
• 여백: 넉넉하지만 극단적이지 않음. 모든 것이 접근하기 쉽고 깔끔함.
• 모션: 부드럽고 자연스러운 이징. 미묘한 호버 리프트. 제자리에 안착하는 콘텐츠.
• 디테일: 부드러운 그림자(큰 블러, 낮은 불투명도). 둥근 요소. 회색의 따뜻한 언더톤. 일러스트레이션 친화적.

아르데코 / 기하학

대담한 대칭. 장식적 정밀성. 스테이트먼트와 럭셔리.

• 서체: 기하학적 디스플레이 서체(Futura, Poiret One, Josefin Sans). 극단적인 자간의 대문자 헤드라인. 대비를 위한 세리프 본문 텍스트.
• 색상: 풍부하고 깊음. 금/샴페인, 에메랄드, 네이비, 버건디, 검정. 메탈릭 악센트(금 그라데이션, 샤이머 효과).
• 레이아웃: 대칭적이고 중앙 정렬. 강한 수직 축. 장식적 프레임과 테두리. 레이어드 깊이.
• 여백: 구조화되고 형식적. 패딩은 건축적입니다.
• 모션: 우아한 표시. 지연된 입장 애니메이션. 패럴랙스 깊이.
• 디테일: 기하학적 패턴(셰브론, 선버스트, 부채꼴 모양). 장식적 테두리. 질감(대리석, 브러시드 메탈). 히어로 규모의 스테이트먼트 타이포그래피.

네오-맘피스

장난기 가득한 혼돈. 반기업. 캐릭터로서의 모양.

• 서체: 다양한 두께와 스타일. 충돌하는 폰트는 의도적입니다. 과장된 헤드라인. 기울어진 텍스트.
• 색상: 대담한 원색과 네온. 충돌하는 조합(분홍과 노랑, 파랑과 주황). 음영 처리된 톤 없음. 평면 색상, 그라데이션 없음.
• 레이아웃: 깨진 그리드. 겹치는 요소. 구성 요소로서의 모양(원, 삼각형, 구불구불한 선). 의도적인 비대칭.
• 여백: 일부 영역은 조밀하고 다른 영역은 비어 있음. 리듬이 불규칙합니다.
• 모션: 탄력 있고 장난기 가득. 과장된 호버 효과. 흔들리거나 회전하거나 튀어나오는 요소.
• 디테일: 두꺼운 테두리. 장식으로서의 기하학적 모양. 패턴(점, 대시, 지그재그). 딱딱한 가장자리와 밝은 색상의 드롭 섀도우.

에디토리얼 / 매거진

콘텐츠 중심 디자인. 타이포그래피가 무거운 작업을 합니다. 모든 페이지는 스프레드입니다.

• 서체: 헤드라인용 디스플레이 세리프(Playfair Display, Fraunces, Instrument Serif). 본문용 깔끔한 산세리프(DM Sans, Source Sans). 극적인 규모(72-120px 히어로 헤드라인). 풀 인용구. 드롭 캡.
• 색상: 최소. 검정과 흰색에 하나의 악센트. 색상은 편집적으로 사용됨(강조, 장식 아님).
• 레이아웃: 강력한 열 그리드(3-5열). 전체 너비 이미지. 텍스트 줄바꿈. 혼합 열 너비. 수직 리듬.
• 여백: 넉넉한 마진. 헤드라인은 좁은 행간, 본문은 넓은 행간. 구성 도구로서의 공백.
• 모션: 스크롤 트리거 표시. 이미지의 패럴랙스. 부드러운 페이지 전환.
• 디테일: 구분선으로서의 가는 규칙. 캡션 타이포그래피. 호/날짜 메타데이터. 인쇄에서 영감을 받은 디테일(쪽 번호, 러닝 헤더).

구현 지침

• 서체: Google Fonts 또는 CDN을 통해 로드된 독특한 폰트를 선택하세요. 일반적인 기본값(Inter, Roboto, Arial, 시스템 폰트)을 피하세요. 디스플레이 폰트와 본문 폰트를 페어링하세요.
• 색상: 일관성을 위해 CSS 변수를 사용하세요. 안전하고 균등하게 분포된 팔레트보다 지배적인 색상과 날카로운 악센트가 더 효과적입니다.
• 모션: HTML에는 CSS 전환을 사용하세요. React에는 Framer Motion / Motion 라이브러리를 사용하세요. 분산된 마이크로 인터랙션보다 영향력이 큰 순간(페이지 로드 표시, 상태 변경)에 집중하세요.
• 공간 구성: 예상치 못한 레이아웃이 주목을 받습니다. 비대칭, 겹침, 대각선 흐름, 그리드를 깨는 요소. 또는 철학이 요구한다면 정밀하게 실행된 엄격한 그리드.
• 배경 및 깊이: 분위기를 조성하세요. 그라데이션 메시, 노이즈 텍스처, 기하학적 패턴, 레이어드 투명도, 그레인 오버레이. 선택한 철학에 맞추세요.

절대 일반적인 AI 미학을 생성하지 마세요: 흰색 바탕의 보라색 그라데이션, Inter 폰트, 예측 가능한 카드 그리드, 판에 박힌 컴포넌트 레이아웃. 모든 출력물은 특정 컨텍스트에 맞게 디자인된 느낌이 들어야 합니다.

구현 복잡성을 미학적 비전과 일치시키세요. Dieter Rams 인터페이스는 50줄의 정밀한 CSS입니다. Neo-Memphis 인터페이스는 300줄의 창의적인 혼돈입니다. 둘 다 옳습니다.

모바일 우선

먼저 모바일 레이아웃을 구축한 다음 확장하세요. 이것은 타협할 수 없습니다.

• 375px 너비에서 단일 열 레이아웃으로 시작하세요.
• 각 중단점에서 복잡성을 추가하세요(max-width가 아닌 min-width 미디어 쿼리 사용).
• 터치 대상은 모바일에서 최소 44x44px여야 합니다.
• 모바일에서 본문 텍스트는 최소 16px 이상이어야 합니다(iOS에서 입력 포커스 시 확대 방지).
• 내비게이션은 모바일 전용 패턴(햄버거, 하단 탭, 드로어)을 가져야 합니다. 넘치는 수평 내비게이션 바에 의존하지 마세요.
• 모든 중단점에서 줄 길이가 편안한 범위(45-75자)를 유지하는지 테스트하세요.

다크 모드

디자인 토큰 파일이 있으면(/design-tokens에서) 다크 모드 팔레트를 사용하세요. 없으면 라이트 테마와 함께 다크 모드 지원을 생성하세요.

• CSS 사용자 정의 속성을 사용하여 테마 전환이 변수 값을 변경하는 것을 의미하고 컴포넌트를 다시 작성하지 않도록 하세요.
• prefers-color-scheme 미디어 쿼리(시스템 기본 설정)와 [data-theme="dark"] 속성(수동 토글)을 모두 지원하세요.
• 단순히 색상을 반전시키지 마세요. 어두운 배경은 철학에 맞게 따뜻하거나 차가워야 합니다(스칸디나비아는 따뜻한 숯, 스위스는 차가운 슬레이트, 브루탈리스트는 거의 검정).
• 순수한 흰색 텍스트를 오프 화이트(예: #E5E5E5 또는 rgba(255,255,255,0.87))로 줄여 눈의 피로를 줄이세요.
• 다크 모드의 그림자는 라이트 모드와 같은 값이 아니라 더 어둡고 더 투명해야 합니다.
• 악센트 색상은 어두운 배경에 대해 WCAG 대비 비율을 유지하기 위해 명도 조정이 필요할 수 있습니다.
• 필요한 사용자를 위해 prefers-reduced-motion 미디어 쿼리를 포함하세요. 해당 쿼리 내에서 모든 애니메이션 및 전환을 비활성화하거나 단순화하세요.