웹 페이지 또는 흐름 디자인하기
web-craft를 먼저 읽으십시오. 기존의 DESIGN.md나 디자인 시스템이 권위를 가집니다: 이를 따르고, 기존 제품을 위해 새로운 방향을 발명하지 마십시오.
1. 코드 작성 전 방향 설정 (신규 제품 및 대규모 신규 영역)
다음 사항을 간략히 결정하고 기록하십시오:
| 결정 사항 | 답변 |
|---|---|
| 사용자와 작업 | 이 영역은 누구의 작업을 더 쉽게 만드는가? |
| 우선순위 | 무엇을 먼저 보고 수행해야 하는가? |
| 구성 | 편집 플로우, 분할 레이아웃, 밀도 높은 작업 공간, 제품 쇼케이스 또는 기타 |
| 타이포그래피 | 문자 스타일, 척도, 줄 길이, 계획된 모든 언어에 대한 스크립트 지원 |
| 시각 자료 | 실제 제품 이미지, 사진, 일러스트레이션, 다이어그램 또는 텍스트 중심 |
| 표면과 밀도 | 테두리, 톤, 여백, 데이터 밀도, 페이지 리듬 |
| 모션 | 기능적 피드백 및 제품이 필요로 하는 경우에만 서사적 모션 |
| 시그니처 디테일 | 브랜드를 지원하는 일관된 디테일 하나 또는 두 개 |
참고 자료: 기존 브랜드가 최우선이며, 그 다음으로 사용자가 제공한 자료입니다. 새로운 방향을 위해서는 몇 가지 적합한 소스를 선택하고 각각이 무엇을 기여하는지(밀도, 사진, 리듬, 상호작용, 타입) 설명하십시오. "현대적인" 또는 "깔끔한"과 같은 형용사는 결정 사항이 아닙니다. 로고, 텍스트 또는 전체 구성을 복사하지 마십시오. 신규 제품의 옵션은 색상뿐만 아니라 구성과 우선순위에서 달라야 합니다. 자세한 내용: references/direction-and-references.md, references/composition.md, references/typography.md.
2. 토큰
색상(의미론적, 라이트 및 다크 모드), 타입 척도, 간격, 반경, 입체감 및 모션은 한 곳에 토큰으로 존재하며 키트의 테마에 매핑됩니다. 입체감은 제한적입니다: 테두리와 표면 톤을 우선으로 하고, 떠 있는 레이어를 위한 몇 개의 단일 레이어 저투명도 그림자 토큰, 다크 모드에서는 그림자 대신 더 밝은 표면, 그리고 애니메이션 box-shadow는 사용하지 않습니다. 자세한 내용: references/tokens-color-elevation.md.
3. 카피와 계층 구조
모든 텍스트는 하나의 역할을 수행합니다. 기본적으로 제목 위에 눈썹문구를 배치하지 않습니다(진행 상황, 날짜, 상위 객체 또는 법적 맥락에서만 사용; "프리미엄"과 같은 등급 레이블은 해당 기능에 배지가 됩니다). 부제목은 범위, 결과, 위험 또는 구체적인 사실을 위해서만 유지됩니다. 제목 수준은 글꼴 크기가 아닌 구조를 따릅니다. 플레이스홀더는 레이블을 대체하지 않습니다. 버튼은 어떤 일이 일어날지 알려줍니다. 자세한 내용: references/copy-hierarchy.md.
4. 상태
모든 데이터 표면과 폼에 대해 상태 매트릭스를 구축하십시오: 초기 로딩(레이아웃과 일치하는 스켈레톤, 깜빡임을 피하기 위해 지연, 축소된 모션에서는 정적), 빈 상태(첫 사용 vs 결과 없음), 데이터 유지와 함께 재시도 가능한 오류, 새로고침, 페이지 오류, 제출 중, 성공, 금지됨, 찾을 수 없음, 오프라인. 자세한 내용: references/states.md.
5. 폼
blur 시 유효성 검사, 오류가 표시된 후 변경 시 재검증, 디바운스된 비동기 검사를 수행합니다. 오류와 함께 제출 시: 첫 번째로 유효하지 않은 필드에 포커스, 고정된 헤더 아래로 스크롤, 해당 필드를 포함하는 접힌 섹션이나 단계를 열고, 긴 폼의 경우 오류 요약을 표시합니다. 메시지는 무엇이 잘못되었고 어떻게 수정할 수 있는지 말하며, 필드 옆에 위치하며 aria-describedby와 연결됩니다. 제출 버튼은 전송 중에만 비활성화됩니다. 서버 필드 오류는 동일한 스크롤 및 포커스와 함께 해당 필드에 표시됩니다. 자세한 내용: references/forms.md.
6. 모션
라이브러리를 선택하기 전에 모션 매트릭스(references/motion-matrix.md)를 채우십시오:
- 버튼과 링크: 호버(호버가 존재하는 곳에서), 눌림, focus-visible, 로딩 중, 비활성화.
- 대화상자, 시트, 메뉴, 팝오버, 토스트: 항상 진입 및 퇴장 애니메이션(불투명도와 작은 크기 조정 또는 이동, 퇴장 애니메이션은 마운트 해제 전에 완료), 포커스 트랩 및 복귀, 닫기. 자세한 내용:
references/overlays.md. - 목록: 삽입, 제거 및 재정렬이 이해 가능해야 합니다.
- 차트: 첫 번째 보기에서 짧은 드로우인 애니메이션, 데이터 변경 시 전환, 측정된 데이터 크기 이상에서는 없음, 축소된 모션에서는 없음; 키보드로 접근 가능한 툴팁과 대체 테이블. 자세한 내용:
references/charts.md. - 마케팅 서사: 제한적이며, 제품에 특화되어 있고, 애니메이션 뒤에 콘텐츠를 숨기지 않음.
지속 시간, 감속 곡선 및 거리는 토큰에서 가져옵니다. 모든 페이지에 동일한 페이드업 스태거가 적용되지 않습니다. 폼이나 데이터 화면에 인공적인 지연을 추가하지 않습니다. 축소된 모션은 중앙에서 처리되며 CSS, 라이브러리 및 동영상을 포함합니다.
7. 반응형
중단점은 콘텐츠를 따릅니다. 좁은 화면에서 탐색, 필터, 테이블, 고정된 액션, 대화상자 및 팝오버의 동작을 정의하십시오. 320px, 긴 번역 텍스트, 200% 줌, 터치 및 키보드를 확인하십시오. 웹 대화상자가 기본적으로 React Native 바텀 시트가 되어서는 안 됩니다. 자세한 내용: references/responsive.md.
8. 결과 확인
모바일 및 데스크톱 너비, 두 테마와 두 언어, 키보드 전용, 축소된 모션 상태로 브라우저에서 확인하십시오. 정적 스크린샷으로는 모션을 검토할 수 없습니다; 직접 상호작용하십시오.
키트가 매우 다른 제품에서 재사용될 때는 references/pilot-divergence.md의 분기 테스트를 실행하십시오.