cubxxw/deepen-design

디자인 심화 (Deepen Design)

더 장식된 디자인이 아니라, 더 독창적인 디자인을 만듭니다.

작업 전에 references/recursive-tree.md를 읽으십시오. 사용자가 이전 결과에 만족하지 못하는 경우, references/failure-patterns.md도 읽으십시오.

핵심 구분

세분화에는 수준이 있습니다:

1. 제품 진실과 원하는 신념;
2. 브랜드 정리와 내러티브 은유;
3. 페이지 아키텍처와 템포;
4. 섹션 구성과 상호 작용;
5. 컴포넌트 언어;
6. 타이포그래피, 색상, 간격, 테두리, 그림자, 모션 폴리쉬.

항상 이 순서대로 내려갑니다. 더 많은 토큰 세트, 더 많은 그림자 또는 더 많은 마이크로 인터랙션이 1-4단계가 변경되지 않은 상태에서는 더 깊은 디자인이 아닙니다.

렌더링된 증거부터 시작

기존 인터페이스의 경우:

1. 현재 구현과 사용자 변경 사항을 보존합니다.
2. 현재 데스크톱 및 모바일 첫 번째 뷰포트를 캡처합니다.
3. 최소한 두 개의 후반 섹션과 하나의 의미 있는 상호 작용을 검사합니다.
4. 객관적으로 작동하는 것을 명시합니다.
5. 페이지가 5초 만에 잊혀지는 이유를 명시합니다.
6. 기능적 게이트와 미적 판단을 분리합니다.

"여전히 평범함"을 실패한 디자인 테스트로 간주합니다. 이전 점수를 방어하거나 기본적으로 동일한 방향을 계속하지 마십시오.

제한된 이진 트리 구축

각 방향 변경 노드에서 정확히 두 개의 실질적으로 다른 가지를 만듭니다. 유효한 가지는 시각적 주장, 정보 구조 또는 시그니처 상호 작용을 변경합니다. 팔레트 교체는 가지가 아닙니다.

빔 검색 사용:

• 두 가지를 확장합니다.
• 둘 다 가장 저렴한 유용한 충실도로 표시합니다.
• 쌍으로 비교합니다.
• 가장 강력한 가지와 하나의 신뢰할 수 있는 도전자를 유지합니다.
• 한 수준 내려갑니다.
• 두 자식이 동일한 약점을 물려받을 때 역추적합니다.

가능한 모든 잎을 구성하지 마십시오. 조합적 볼륨이 아닌 결과에 중요한 결정에 깊이를 투자하십시오.

필수 깊이 게이트

깊이 0: 제품 불변

다음을 작성합니다:

• 방문자;
• 긴장의 순간;
• 그들이 이해하고, 느끼고, 해야 할 일;
• 경쟁자가 같은 방식으로 정직하게 주장할 수 없는 제품 진실.

이것이 구체화될 때까지 구현하지 마십시오.

깊이 1: 두 가지 브랜드 정리

서로 다른 함의를 가진 두 개의 한 문장 포지션을 만듭니다. 각각은 다음을 생성해야 합니다:

• 내러티브 은유;
• 공간 문법;
• 콘텐츠 우선 순위;
• 하나의 시그니처 메커니즘;
• 하나의 명시적인 반대 참조: 이 방향이 닮아서는 안 되는 것.

외부 연구가 가능할 때 현재 관련 참조 세 개에서 다섯 개를 검색합니다. 스타일 콜라주가 아닌 메커니즘을 추출합니다. 어떤 후보도 하나의 참조 전체 시각적 정체성을 복사할 수 없습니다.

깊이 2: 두 가지 아키텍처

선두 정리에 대해 페이지를 두 개의 다른 여정으로 분기합니다. 모든 섹션에 대한 작업, 레이아웃 패밀리, 템포, 대비 이벤트, 증거 및 종료 작업을 정의합니다.

다음과 같은 경우 아키텍처를 거부합니다:

• 대부분의 섹션이 "큰 제목 + 단락 + 이미지/카드"를 반복합니다.
• 제품 증거가 일반 SaaS 스크린샷과 교환 가능합니다.
• 로고를 제거하면 카테고리 또는 브랜드를 인식할 수 없습니다.
• 유일하게 눈에 띄는 차이는 팔레트 또는 타이포그래피입니다.

깊이 3: 시각적 프로토타입

전체 구현 전에 두 생존 방향을 모두 렌더링합니다. 다음을 선호합니다:

• 두 개의 첫 번째 뷰포트 프로토타입;
• 각각에 대해 하나의 대표적인 중간 페이지 섹션;
• 데스크톱 우선, 그 다음 모바일 축소 확인.

스크린샷을 나란히 비교합니다. 산문만으로 선택하지 마십시오.

사용자가 가능하고 방향이 진정으로 다른 취향을 인코딩하는 경우, 하나의 간결한 포크 질문을 합니다. 사용자가 자율성을 요청한 경우 증거에서 선택하고 도전자를 보존합니다.

깊이 4: 시스템 및 구현

이제서야 다음을 정의합니다:

• 유형 역할 및 척도;
• 팔레트 및 대비;
• 자산 언어;
• 그리드, 간격 및 모양 규칙;
• 모션 의미론;
• 컴포넌트 기본 요소.

사용 가능한 경우 관련 디자인 시스템 데이터에 대해 ui-ux-pro-max를 사용합니다. 방향 선택 후 design-taste-frontend를 사전 점검 린터로 사용합니다. 그 규칙은 클리셰를 거부할 수 있지만 개념을 선택할 수는 없습니다.

깊이 5: 미세 디테일

방향 및 아키텍처 게이트가 통과된 후에만 테두리, 그림자, 재질, 호버, 광학 간격 및 성능을 조정합니다.

모든 미세 변경은 강화하는 상위 결정의 이름을 지정해야 합니다. 계층 구조, 의미, 피드백 또는 재질 일관성을 변경하지 않을 때 제거합니다.

올바른 것을 평가

두 개의 별도 원장을 유지합니다.

기능 게이트

• 제품 진실;
• 반응형 동작;
• 접근성;
• 성능;
• 코드 및 테스트 상태.

이것들은 합격/불합격 제약 조건입니다. 취향을 증명하지 않습니다.

디자인 판단

• 5초 이해도;
• 로고 제거 소유 가능성;
• 지연 후 시각적 기억;
• 카테고리 템플릿 거리;
• 제품 메커니즘 가시성;
• 전체 페이지 대비 및 템포;
• 사용자 선호도.

참조 워크플로우의 쌍별 증거를 사용합니다. 자체 작성 루브릭에서 절대적인 95/100 또는 98/100을 부여하지 마십시오. 사용자가 결과가 평범하다고 말하면, Lighthouse에 관계없이 차별성 주장은 실패한 것입니다.

증거로 마무리

다음을 반환합니다:

1. 탐색된 트리와 역추적한 위치;
2. 승리한 방향과 생존한 도전자;
3. before/A/B 스크린샷 또는 동등한 시각적 증거;
4. 깊이별로 정렬된 가장 큰 세 가지 가시적 변경 사항;
5. 기능 게이트 결과;
6. 해결되지 않은 취향 또는 제품 결정.

미세 디테일 볼륨을 주요 결과로 설명하지 마십시오. 결과는 로고 없이도 살아남을 수 있는 인식 가능한 디자인 주장입니다.