스킬 자체의 표현으로
대시보드, 관리자 패널, SaaS 앱, 도구, 설정 페이지, 데이터 인터페이스 등 제품 UI를 최상위 디자인 팀이 내릴 결정과 같은 수준으로 구축하는, 크래프트를 최우선으로 하는 원칙입니다. 코드를 작성하기 전에 작동하는 브리프를 먼저 만들도록 강제합니다: 사용자가 누구인지, 그들이 하러 온 단 하나의 동작이 무엇인지, 그리고 인터페이스가 의미 있는 말로 어떤 느낌을 주어야 하는지를 정의합니다.
이어서 도메인 탐색(도메인, 컬러 월드, 시그니처, 배제된 기본값), 비율 기반 타입 스케일과 위계를 담당하는 굵기·색상, 하나로 확정된 깊이 전략, 하드코딩된 리터럴이 아닌 시맨틱 토큰, 그리고 마무리와 모션에 관한 필수 요소들—탭 숫자, 동심 반경, 300ms 이하의 지속 시간, 고빈도 동작에는 애니메이션을 넣지 않는 것—을 규정합니다. 랜딩 페이지, 마케팅 사이트, 캠페인 또는 브랜드 전용 작업에는 명확히 적용되지 않습니다.
산출물
- 도메인, 컬러 월드, 시그니처, 배제, 방향을 명시하는 Suggest + Ask 제안입니다.
- 렌더링 도구가 있을 경우, 팔레트 스와치, 실제 서체로 표현된 타입 스케일, 스택형 엘리베이션 카드, 실제 컴포넌트로 구현된 시그니처 등 인라인으로 렌더링된 샘플입니다. 구현 자체는 여전히 코드베이스에 반영됩니다.
- 방향, 깊이 전략, 위계 결정, 반복되는 컴포넌트 패턴을 담은 .interface-design/system.md 파일로, 사용자가 승인한 뒤에만 저장됩니다.
작동 방식
- 01작업 브리프 작성
코드를 작성하기 전에, 사용자가 누구인지, 어떤 동작을 수행해야 하는지, 인터페이스가 어떤 느낌을 주어야 하는지에 답합니다—방향 확인이 필요한 경우가 아니면 간결하게 유지합니다.
- 02제품 도메인 탐색
방향을 제안하기 전에 네 가지 결과물을 만듭니다: 최소 5개의 도메인 개념, 제품이 속한 물리적 세계에서 나온 5개 이상의 색상, 하나의 시그니처 요소, 그리고 배제할 명백한 기본값 3가지입니다.
- 03방향 제안 및 확인
도메인, 컬러 월드, 시그니처, 배제, 방향을 명시하는 Suggest + Ask 블록으로 시작한 다음, 구현에 들어가기 전 방향이 적절한지 확인합니다.
- 04가능한 경우 샘플을 렌더링
세션에 인라인 시각 렌더링 도구가 있다면, 팔레트, 타입 스케일, 엘리베이션 단계, 시그니처를 설명 대신 실제 컴포넌트로 보여줍니다. 그렇지 않으면 코드로 대체합니다.
- 05기존 요소를 기반으로 구현한 뒤 검증
앱, 토큰, 컴포넌트 패턴, system.md를 확인하고, 구현을 수정하고, 가능한 경우 빌드, 타입 체크 또는 테스트를 실행한 다음 데스크톱과 모바일 폭에서 시각적으로 검증합니다.
- 06패턴 저장 제안
작업 후, 이후 세션에서도 일관성을 유지할 수 있도록 방향, 깊이 전략, 위계 결정, 반복되는 컴포넌트 패턴을 기록할지 제안합니다.