디자인 방향성은(는) 무엇을 하나요?
디자인이 독창적이라는 것은, 해당 분야를 아는 사람이 이 디자인을 보고 특정 제품의 것이라고 바로 알아볼 수 있을 때를 말합니다. 사용성은 익숙한 구조에서 비롯되지만, 독창성은 오직 이 제품만이 가진 것, 즉 브랜드, 세계관, 그래픽 장치, 하나의 시그니처 무브에서 나옵니다. 이러한 요소는 사람에게서 비롯되므로, 이 스킬은 그리기 전에 먼저 질문합니다.
생성기(Generator)를 단독으로 실행하면 몇 가지 비슷한 스타일로 수렴하는 경향이 있습니다 (defaults.md). 아래의 모든 결정은 인터뷰에서 나온 내용을 바탕으로 하거나, 해당 목록과 대조하여 검증된 것입니다. 즉, 단순히 가장 먼저 떠오르는 것이 선택되지 않습니다.
방향성이 문서화되고, 사용자가 이를 선택하며, 이후 모든 빌드가 이 방향성을 따를 때 완료됩니다.
1. 기존 자료 수집
브랜드를 이미 정의하고 있는 모든 자료(로고 파일, 색상, 폰트, 브랜드 가이드라인, 사진, 일러스트레이션, 이전 덱이나 페이지, 저장소의 디자인 시스템 파일, product-ui 스킬의 프로젝트 파일(.claude/product-ui.md) 등)를 요청하고 읽습니다. 기존 시스템은 출발점이며, 방향성은 이를 확장하고 절대 모순되지 않아야 합니다. 어떤 자산이 존재하고 어떤 것이 누락되었는지 기록합니다.
2. 인터뷰
interview.md를 실행합니다: 라운드당 몇 가지 질문을 하고, 각 라운드는 이전 답변을 기반으로 진행됩니다. 질문하고, 경청하고, 예상치 못한 답변이 나오면 한 단계 더 깊이 파고듭니다. 라운드는 제품의 세계관, 성격, 안티-레퍼런스(anti-references)를 한 문단으로 요약할 수 있고 사용자가 동의할 때 완료됩니다.
3. 모드(Mode)
인터뷰를 바탕으로 모드를 결정합니다:
- 운영(Operate) (사용자가 작업하는 애플리케이션): 구조, 내비게이션, 컨트롤은 해당 카테고리의 익숙한 방식을 유지합니다. 방향성은 타이포그래피, 팔레트, 밀도, 조용한 영역(헤더, 빈 상태, 온보딩, 로딩)의 그래픽 장치, 하나의 시그니처 무브에 기여합니다.
- 설득(Persuade) (랜딩 페이지, 캠페인, 덱): 방향성이 전체 페이지의 구성, 이미지, 모션, 레이아웃을 결정할 수 있습니다.
두 모드가 모두 필요한 제품은 하나의 방향성을 가지고 각 모드에 맞게 적용합니다.
4. 방향성 제안
각각 인터뷰 자료에서 도출된, 한눈에 차이가 나는 두세 가지 방향성을 작성합니다. 각 방향성은 다음을 명시합니다:
- 토큰(Tokens): 팔레트(역할이 정의된 4~6개의 명명된 색상), 타입 페어링 및 스케일, 반경, 테두리, 고도, 밀도. 1단계의 브랜드 자산을 사용하여 tokens.md로 구축합니다. 참조 제품은 특성(속도, 밀도)을 빌려오되 색상이나 타입은 절대 빌려오지 않습니다.
- 그래픽 장치(Graphic devices): 제품의 세계관에서 가져온 형태 언어와 기하학, 그리고 이러한 형태로 구축된 생성 배경, 패턴, 채우기 이미지를 위한 레시피.
- 이미지(Imagery): 사진이나 일러스트레이션이 보여주는 내용, 자르기와 처리 방식.
- 구조(Structure): 그리드, 리듬, 화면이나 페이지의 구성 방식.
- 음성(Voice): 인터페이스가 말하는 방식을 나타내는 세 단어, 그리고 버튼, 빈 상태, 오류 각각에 대한 예문 하나씩.
- 시그니처 무브(Signature move): 시청자가 기억하는 하나의 구체적이고 이름 붙일 수 있는 아이디어(예: "상태가 ...로 그려짐").
- 샘플(Sample): 실제 콘텐츠로 렌더링된 하나의 실제 화면 또는 섹션.
샘플을 동일한 크기와 동일한 콘텐츠로 나란히 보여줍니다. 사용자가 하나를 선택하거나 부분을 조합하고 그 이유를 말합니다.
샘플의 모든 숫자와 레이블은 사용자가 동의하는 정의가 필요합니다(예: "활성 사용자": 로그인한 사용자? 오늘 세션 중인 사용자?). 사용자가 질문하는 것은 미해결 정의(open definitions)로 수집합니다. 이는 제품 관련 질문이며 6단계의 기록에 포함됩니다.
사용자가 여전히 일반적으로 보인다고 말하지만 이유를 설명하지 못할 때는, 동일한 화면에서 독립적인 토글(타입페이스, 팔레트, 형태(반경, 테두리, 칩), 밀도, 아이콘 스타일)로 표면을 분할하고, 사용자가 느낌이 사라질 때까지 각각을 전환하게 합니다. 느낌을 제거한 토글이 원인을 밝혀냅니다.
5. 독창성 확인
선택한 샘플을 defaults.md 및 사용자의 안티-레퍼런스와 대조합니다. 일치하는 항목이 있으면 해당 결정을 변경하거나, 이 제품이 이를 유지하는 이유를 기록합니다. 그런 다음 귀속 테스트(attribution test)를 진행합니다. 로고를 가렸을 때, 해당 분야를 아는 사람이 이 제품을 이름 지을 수 있습니까? 인터뷰에서 확인된 표면의 독창성 수준에 따라 가중치가 부여됩니다. 높은 수준에서 "누구의 것일 수도 있다"고 판단되면 가장 약한 요소와 함께 4단계로 돌아갑니다. 낮은 수준에서는 깔끔하고 친숙한 결과가 통과되며 기록에 그렇게 명시됩니다.
독창성은 결코 사용성을 희생하지 않습니다: 컨트롤을 숨기거나, 대비를 낮추거나, 해당 카테고리의 익숙한 패턴을 깨는 시그니처 무브는 조용한 영역으로 이동하거나 삭제됩니다.
6. 기록
방향성을 프로젝트 파일(.claude/product-ui.md, 또는 CLAUDE.md가 프로젝트가 디자인 결정을 보관하는 위치라고 명시한 곳. 없을 경우 product-ui 템플릿에서 생성)의 "방향성(Direction)" 섹션에 기록합니다: 날짜, 모드, 토큰, 장치, 이미지 레시피, 구조, 음성, 시그니처 무브, 안티-레퍼런스, 미해결 정의, 이를 정당화하는 인터뷰 답변. 토큰 자체는 코드의 토큰 파일에 넣습니다. 이후의 빌드와 리뷰는 먼저 프로젝트 파일을 읽습니다.