iyuyoung/young-design

Young Design

웹사이트가 유치하거나 장식적이거나 평범해지지 않으면서도, 젊고, 저작된 느낌이 있으며 제품 중심적이도록 만듭니다. 시각적 품질과 구현 품질을 하나의 시스템으로 취급합니다. 고정된 하우스 스타일을 적용하는 대신, 제품에 맞게 시각적 표현을 조정합니다.

작업 모드 선택

작업을 시작하기 전에 하나의 모드를 선택하세요:

• 방향 설정(Direction): 시각 언어, 페이지 계층 구조, 토큰 및 대표적인 구성 요소를 정의합니다.
• 디자인(Design): 실제 콘텐츠와 반응형 의도를 포함한 완전한 페이지 또는 목업을 생성합니다.
• 구현(Implementation): 승인된 방향이나 레퍼런스를 프로덕션 코드로 변환합니다.
• 개선(Refinement): 기존 사이트를 감사하고, 영향력이 가장 큰 격차를 식별하여 동작을 불안정하게 만들지 않으면서 개선합니다.
• 검토(Review): 요청받지 않는 한 파일을 수정하지 않고 증거 기반의 시각적 피드백을 제공합니다.

사용자가 디자인만 요청하면 프로덕션 프로젝트를 구현하지 마십시오. 사용자가 사이트를 빌드하거나 최적화하도록 요청하면 작업을 검증 단계까지 수행하십시오.

디자인 계약 수립

색상이나 구성 요소를 선택하기 전에 다음을 결정하십시오:

1. 대상(Audience) — 누가 방문하며, 어떤 감정 상태를 가지고 오는가.
2. 약속(Promise) — 첫 번째 뷰포트가 분명하게 전달해야 할 한 가지.
3. 주요 행동(Primary action) — 가장 가치 있는 다음 단계.
4. 성격(Personality) — 유용한 형용사 세 가지와 피해야 할 세 가지 특성.
5. 제약 조건(Constraints) — 프레임워크, 브랜드 자산, SEO, 성능, 접근성, 인쇄 또는 배포 요구사항.

가능하면 저장소, 브리핑 및 이전 결정 사항에서 이를 추론하십시오. 답변이 없으면 디자인이 실질적으로 변경될 경우에만 질문하십시오.

그런 다음 디자인 지문(design fingerprint) 을 정의하십시오: 따뜻함, 장난기, 촉각, 밀도, 정밀성, 시각적 대비를 1~5점으로 평가하고, 점수와 결과 방향을 설명하는 한 문장을 기록하십시오. 관련 없는 제품에 기본적으로 동일한 지문을 부여하지 마십시오.

실제 제품 카피와 대표 데이터를 사용하십시오. 로렘 입숨, 일반적인 대시보드, 가짜 사회적 증명은 계층 구조 문제를 숨깁니다.

페이지보다 먼저 비주얼 시스템 구축

룩앤필을 정의하거나 변경할 때 references/visual-language.md를 참조하십시오. 제품, 대상 또는 워크플로우에서 하나의 지배적인 시각적 모티프를 도출하십시오; 종이와 콜라주는 옵션이지 기본값이 아닙니다.

작지만 일관된 시스템을 만드십시오:

• 단순한 색상 모음이 아닌, 역할이 있는 색상;
• 디스플레이, 본문 및 선택적 주석 타이포그래피;
• 간격 리듬과 콘텐츠 너비;
• 테두리, 둥글기, 그림자 및 재질 규칙;
• 아이콘 및 일러스트레이션 언어;
• 상호작용 및 모션 동작;
• 데스크톱, 태블릿 및 모바일 구성 규칙.

디자인 토큰 또는 공유 변수를 사용하십시오. 각 섹션을 고립된 포스터처럼 스타일링하지 마십시오.

다음 구분을 유지하십시오:

• 브랜드 계층 — 인식 가능한 목소리, 마크, 색상, 타이포그래피;
• 제품 계층 — 작업 흐름, 컨트롤, 상태, 피드백;
• 콘텐츠 계층 — 계층 구조, 스캐닝, 신뢰, SEO 카피;
• 재질 계층 — 종이, 테이프, 연필, 텍스처 또는 콜라주 악센트.

재질 디테일은 계층 구조를 지원해야 합니다. 제품이 신뢰할 수 있고 사용 가능한 상태를 유지할 수 있을 정도로만 드물게 사용하십시오.

제품 모멘트를 중심으로 구성

기본적으로 왼쪽에 헤드라인, 오른쪽에 임의의 대시보드 스크린샷을 배치하지 마십시오. 제품이 작동함을 증명하는 순간(추천, 미리보기, 결과, 변환, 워크시트, 비교 또는 다음 단계)을 식별하십시오.

첫 번째 뷰포트에는 일반적으로 다음이 포함되어야 합니다:

• 구체적인 약속;
• 하나의 읽기 쉬운 제품 모멘트;
• 하나의 주요 행동;
• 간결한 신뢰 또는 제약 조건 단서;
• 저작된 느낌을 주기에 충분한 비대칭성 또는 재질 특성.

보조 섹션은 뚜렷한 질문에 답해야 합니다. 다른 제목 아래에 동일한 카드 그리드를 반복하지 마십시오.

영웅, 선택기, 카드, 도구, 디렉토리 또는 에디토리얼 패턴을 선택할 때 references/component-patterns.md를 참조하십시오.

올바른 결과물 전달

references/output-contracts.md를 읽고 선택한 작업 모드에 대한 계약을 따르십시오. 가정, 결정, 반응형 의도 및 검증 증거를 다른 디자이너나 엔지니어가 작업을 계속할 수 있을 만큼 명시적으로 만드십시오.

실제 시스템으로 구현

저장소를 수정하거나 레퍼런스를 코드로 변환하기 전에 references/implementation-playbook.md를 읽으십시오.

기존 프로젝트에서 작업할 때:

1. 프레임워크, 라우트, 공유 레이아웃, 토큰, 컴포넌트, 테스트 및 생성된 자산을 검사하십시오.
2. 의도적인 소스 변경 사항을 생성된 출력 및 포맷팅 노이즈와 분리하십시오.
3. 동작 계약, URL, 분석 훅, 테스트 선택자, 시맨틱 및 인쇄 규칙을 유지하십시오.
4. 페이지별 재정의 전에 공유 기반 요소를 추가하거나 수정하십시오.
5. 반복되는 시각적 및 동작 패턴에 대해 재사용 가능한 컴포넌트를 구현하십시오.
6. 모든 의미 있는 상태를 확인하십시오: 초기, 선택됨, 호버, 포커스, 로딩, 비어 있음, 오류, 성공 및 해당되는 경우 인쇄.
7. 데스크톱, 태블릿 및 좁은 모바일 너비에서 검증하십시오.

로컬 또는 자체 호스팅 폰트, SVG 마크 및 일관된 아이콘 라이브러리를 선호하십시오. 생성된 이미지는 실제 내러티브 가치가 있을 때만 사용하십시오. 약한 계층 구조를 장식용 이미지로 보상하지 마십시오.

영향도 순서로 개선

사이트가 "낡았다", "평범하다" 또는 "디자인 같지 않다"고 느껴질 때 다음 순서로 문제를 수정하십시오:

1. 타이포그래피 특성 및 계층 구조;
2. 첫 번째 뷰포트 구성;
3. 간격 리듬 및 콘텐츠 밀도;
4. 컴포넌트 기하학 및 상호작용 상태;
5. 색상 역할 및 대비;
6. 재질 디테일 및 미세 장식;
7. 모션 및 폴리싱.

그림자, 그라데이션, 블롭 또는 애니메이션을 추가하는 것으로 시작하지 마십시오. 이것들은 약한 구성을 거의 수선하지 못합니다.

완료라고 말하기 전에 검증

구현 또는 최종 검토를 위해 references/quality-gates.md를 읽으십시오. 결과를 발표, 출시 또는 게시할 준비가 되었는지 결정할 때 references/review-rubric.md를 읽으십시오.

최소한 다음을 검증하십시오:

• 의도하지 않은 가로 페이지 오버플로우가 없음;
• 보이는 인터페이스 텍스트는 필수 아트워크가 아닌 이상 최소 14px;
• 일반 텍스트 대비는 4.5:1, 큰 텍스트 대비는 3:1 충족;
• 키보드 포커스가 명확하고 인터랙티브 컨트롤이 편안한 터치 크기;
• 모바일이 단순히 축소된 것이 아니라 재구성됨;
• 서체, 둥글기, 그림자, 아이콘 및 재질이 일관성 유지;
• 구현된 첫 번째 뷰포트가 승인된 디자인의 계층 구조를 유지;
• 기능, SEO 구조, 생성된 파일, 다운로드 및 인쇄 출력이 여전히 작동;
• 프로젝트에서 제공하는 경우 타입 검사, 테스트, 빌드 및 브라우저 검사 통과.

결과물을 릴리스 준비 완료라고 부르기 전에 최소 85/100 점수와 치명적인 차단 항목이 없어야 합니다. 점수를 진단 용도로 사용하십시오; 임계값을 충족시키기 위해 부풀리지 마십시오.

로컬에서 브라우저 실행이 불가능한 경우 환경적 한계를 명시하고 시각적 검증을 주장하는 대신 프로젝트의 CI를 사용하십시오.

Young Design 실패 모드 회피

절대 기본값으로 사용하지 마십시오:

• 일반적인 스타트업 그라데이션과 떠다니는 유리 카드;
• "개성"의 주요 원천으로서 구식 세리프체;
• 과도한 알약 모양, 지나치게 큰 둥글기 또는 균일한 카드 그리드;
• 대비가 부족한 모든 곳의 파스텔 색상;
• 모든 요소에 임의의 회전, 테이프, 낙서 또는 종이 텍스처;
• 정교함을 조작하기 위해 사용되는 작은 메타데이터 및 레이블;
• 핵심 제품 가치를 숨기거나 페이지 수준 가로 스크롤을 강제하는 모바일 레이아웃;
• 시각적 재설계를 수용하기 위해 작동하는 제품 로직을 재작성;
• 관련 없는 브랜드에 하나의 레퍼런스를 문자 그대로 복사.
• 도메인이 더 날카롭고, 조밀하거나, 기술적인 표현을 요구할 때 따뜻한 종이, 파스텔 색상 또는 둥근 카드를 적용.

결과물은 저작되고, 유용하며, 최신식으로 느껴져야 합니다: 친근하지만 유치하지 않고, 표현력이 풍부하지만 시끄럽지 않으며, 정제되었지만 멸균된 느낌이 없어야 합니다.