디자인 시스템
프로젝트의 UI 기본 설정으로, 구축 후가 아닌 구축 중에 적용됩니다. reference.md를 참조하지 않고 UI를 작성하면 어떤 단계를 실행하기 전에 평면 처리 규칙(flat-treatment rule)이 위반됩니다. 규칙은 먼저 로드되는 reference.md의 컨텍스트입니다.
단계
- 규칙을 읽고, 기존 UI를 확인합니다. reference.md의 스타일 규칙을 가져온 다음, 코드베이스에서 이미 사용 중인 것(글꼴, 색상 팔레트, 아이콘 팩, 둥글기)을 찾습니다.
- 완료 조건: 규칙이 구현 계획에 명시되었고, 코드베이스에 이미 있는 모든 규칙이 새로 고쳐지지 않고 일치되었습니다.
- 테두리보다 여백을 우선합니다. 요소를 공백으로 분리하고, 여백이 부족할 때만 테두리를 추가합니다.
- 완료 조건: 각 요소 경계가 공백만으로 렌더링되며, 테두리는 계획에서 여백이 부족한 이유를 명시한 곳에만 존재합니다.
- 색상을 세 가지 계층으로 배분합니다. 스타일을 작성하기 전에 각 표면당 중립 80%, 보조 20%, 강조 10%를 할당합니다. 알약(pill) 또는 배지(badge)는 강조 색상이 그 자리를 채우는 곳입니다.
- 완료 조건: 컨트롤과 텍스트가 하나 또는 두 가지 중립 톤으로만 렌더링되며, 강조 색상은 보기당 최대 한 곳에만 나타납니다.
- 반응형 및 가독성 확인합니다. 스타일이 완료되었다고 선언하기 전에 모바일 너비에서 보기를 실행하고, 순수 검정이나 순수 흰색에 가까운 텍스트는 극단에서 이동시킵니다.
- 완료 조건: 모바일 레이아웃이 가로 스크롤 없이 유지되며, 모든 텍스트 색상이 극단에서 벗어난 톤입니다.
- 아이콘을 적용합니다. 프로젝트의 아이콘 라이브러리를 감지하고, 해당 라이브러리의 한 단위를 나타나는 모든 곳에 재사용합니다.
- 완료 조건: 규칙에 따라 하나의 아이콘이 선택되었으며 새로운 아이콘 세트가 도입되지 않았습니다.
참조
- reference.md — 11가지 스타일 규칙, 색상 분할, 하나의 전체 세트 아이콘 규칙. 여기로 지식을 연결하세요. 이 파일은 절대 변경되어서는 안 됩니다.