디자인 시스템 및 문서

1) 설계 시스템이란 무엇이며 왜 필요한가

디자인 시스템은 UX 예측 가능성, 개발 속도 및 확장 성을 제공하는 토큰, 구성 요소, 실습 및 문서 세트와 같은 인터페이스의 단일 진실 소스입니다.

• 모든 제품에서 시각 및 행동 계층의 일관성.
• 속도: 재사용 구성 요소, 검토 비용 절감.
• 품질: 일반적인 A11y 패턴, 현지화, 테스트, 컨텐츠 표준.
• 관리 가능성: 명확한 책임, 릴리스, 로드맵.

2) 설계 시스템 아키텍처 (레이어)

1. 디자인 토큰 (기초): 색상, 타이포그래피, 치수, 반경, 그림자, 들여 쓰기, 상태 및 시맨틱 토큰 ('색상. 표면. 경고 ',' 공간. xs ').
2. UI 구성 요소: 버튼, 입력 필드, 모달 창, 드롭 다운, 테이블, 토스트, 배너, 경고, 빈 상태, 골격.
3. 패턴 및 구성: KYC 양식, 결제 흐름, 결과 제로, 스텝 마스터, 컨텐츠 카드.
4. 콘텐츠 가이드 (마이크로 카피): 톤, 용어 사전, 오류/성공 패턴, 푸시/배너.
5. 인프라: A11y 안내, 테스트, 현지화, 버전, 기고자 (기여).

3) 디자인 토큰: 원칙

시맨틱> "원시" 스타일. 색상을 사용하십시오. 텍스트. '# 6B7280' 대신 음소거되었습니다.
테마화 및 플랫폼. 소스 토큰 → 플랫폼 매핑 (웹, iOS, Android, 이메일).
토큰 수준에서 빛/어두운 테마 및 WCAG 대비.
세계적이고 맥락적인 규모: '공간. 2 ',' 반경. md ',' 고도. 1 ',' 불투명도. 장애인 '.
토큰 버전화: 변경-탈퇴 정책 및 마이그레이션 노트를 통한 변경.

4) 구성 요소: 문서에서 페이지의 요구 사항 및 구성

각 구성 요소에 대해 문서에는 다음이 포함됩

설명과 목적. 사용할 시간/사용하지 마십시오.
변형/상태. 차원, 유형 (1 차/2 차/유령), 비활성화, 로딩, 파괴적.
접근성. 역할, 키보드 탐색, 'aria-', 대비, 포커스 링.
마이크로 코피 텍스트 및 예. 유효한 라벨/플레이스 홀더, 실수, 도움.
코드 예. 최소 API, 제어/제어되지 않음.
양식 및 i18n과의 통합. 긴 줄, 숫자/통화/날짜.
반예. 잘못된 사용 패턴.
테스트 매트릭스. 비주얼 스냅 샷, 단위/상호 작용, 스크린 리더.

5) 구성 패턴 (레시피)

등록 양식/CUS: 단계별 마법사, 진행 상황, 검증 인라인 + 요약, 오류 패턴.
지불 흐름: 메소드 선택, 수수료, 날짜, 동일한 메소드 규칙, 확인 및 상태.
빈 상태: 컨텍스트 + 값 + CTA, 검색 결과 제로.
성공/오류 메시지: 상태 계층 구조, 비주얼 토큰, 토스트/배너/모달.
탐색 및 필터: 글로벌 검색, 빠른 사전 설정, 태그.
패턴 페이지에는 마이크로 코피 및 A11y 노트와 함께 복사 준비가 된 구성 요소의 구성이 표시되어야합니다.

6) 콘텐츠 가이드 (음성 및 톤, 마이크로 카피)

음성: 전문적이고 명확합니다. 톤은 컨텍스트 (온 보드, 결제, 보안) 에 따라 다릅니다.
통합 용어 사전: 지불, 보너스, 한도, KYC-제품 당 하나의 값.
템플릿: CTA, 오류, 경고, 성공, 빈 상태, 알림.
현지화 우선: 줄 길이, 숫자/통화/지역 별 날짜 재고.
A11y 어휘: 모호성이없는 명확한 레이블, 아리아 설명.

7) 시스템 표준으로서의 접근성 (A11y)

기본 기준: WCAG 2. 대조적으로 1 AA, 초점은 항상 키보드 탐색입니다.
역할 및 속성: 구성 요소는 '역할', '아리아 라벨', '아리아-설명', 토스트/경고를위한 라이브 지역을 설명합니다.
화면 읽기: 문구, 읽기 순서, 올바른 상태 ('주장/정중') 의 예.
테스트 절차: 자동 점검 + 수동 스크립트.

8) 국제화 및 국제화

구성 요소 코드 + 컨텍스트 설명 옆의 i18n 키.
형식 유틸리티를 통한 숫자/통화/날짜; 템플릿에서 텍스트를 하드코딩하지 않습니다.
길이 테스트: "긴 독일어", "좁은 모바일", RTL 변형.
언어로 톤: 중요한 단계 (지불/보안) 를위한 톤 맵.

9) 문서: 구조 및 탐색

1. 소개: 사명, 원칙, 책임 영역.

2. 토큰: 색상, 타이포그래피, 격자, 치수, 그림자, 상태, 테마.

3. 구성 요소: 필터가있는 카탈로그 (역할 별, 플랫폼 별, A11y).

4. 패턴: 시나리오 (양식, 지불, 빈 상태, 성공/오류).

5. 콘텐츠 가이드: 음성 및 톤, 사전, 마이크로 카피 템플릿.

6. 접근성: 표준, 점검표, 테스트 사례.

7. 현지화: 시장 별 원칙, 예, 용어집.

8. 통합 및 코드: 설치, 버전, 예, 마이그레이션 방법.

9. 기여: 기여 프로세스, 설계 검토, 코드 검토, 수행 된 정의.

10. Changelog 및 로드맵: 릴리스, 감금, 개발 계획, 알려진 문제.

10) 거버넌스 및 프로세스

역할: 시스템 소유자 (DesignOps/UX 플랫폼), 관리자 (디자인/FE), 컨설턴트 (BE, A11y, 현지화).
변경위원회: 요청 평가, 우선 순위, API/토큰 조정.
프로세스: 새로운 구성 요소, 내부 문제 양식, 버그에 대한 SLA.
완료의 정의: 디자인 (피그마) 항목 코드 (UI 패키지) 도크 (예 + 가이드) 표시 테스트.

11) 기여: 추가/변경 방법

RFC 템플릿: 문제 → 옵션 → 선택한 결정 → A11y → i18n → 마이그레이션 → 위험.
Flow PR: 디자인 검토 → 코드 검토 → UX 카피라이터 → A11y 수표 → 릴리스 노트.
후방 호환성 규칙: 비파괴, 전공에 대한 사소한/패치-가능한 경우 감소 및 자동 마이그레이션.

12) Versioning, 릴리스, 마이그레이션

패키지 용 SemVer ('@ company/ds-core', '@ company/ds-forms', '@ company/ds-charts').
릴리스 노트: 토큰 변경, 구성 요소 API, 기본 동작, 변경 중단, 마이그레이션 가이드.
우울증: 도크 마크 업, 린터 규칙, 대량 대체를위한 코드 모드.
디자인 토큰 파이프 라인: 단일 소스 (JSON/YAML) → 플랫폼 빌드 (CSS vars, iOS, Android).

13) 품질 테스트

동작 및 조건에 대한 단위 테스트.
비주얼 스냅 샷 (테마/상태 회귀).
A11y 테스트: 스크린 리더의 자동 + 수동 스크립트.
중요한 흐름에 대한 E2E 사례 (등록, 지불, KYC).
Perf 예산: 번들/렌더 제한 및 중독 금지.

14) 설계 시스템 성숙도 지표

채택: DS를 사용한% 스크린/리포지토리.
속도: 레이아웃에서 전달까지의 시간.
품질: UI/A11y ~ 1 릴리스 결함.
일관성: DS 외부의 "일회용" 구성 요소/스타일 수.
문서: 도크 구성 요소 범위, 내부 청중 NPS (디자이너/개발자/분석가).

15) 반 패턴

의미가없는 팔레트로 토큰 ("그냥 색상").
문서가없고 극단적 인 경우의 예가없는 구성 요소.
A11y 무시 (초점, 낮은 대비, '아리아' 없음).
파괴 및 마이그레이션 가이드없이 버전을 깨뜨립니다.
구성 요소에 숨겨진 논리 (UI 동작 대신 비즈니스 규칙).
API 확장 대신 좁은 케이스에 대한 구성 요소의 복제.

16) 점검표

• 시맨틱 이름과 목적.
• 두 테마에서 AA 대비.
• 해골 및 사용법이 문서화되어 있습니다.

• 옵션/상태가 적용됩니다.
• A11y- 설명, 'aria-', 초점.
• 마이크로 코피 예 (레이블, 오류, 힌트).
• 코드 샘플 및 엣지 케이스 (긴 선, 하중, 비어 있음).
• 단위/비주얼/A11y 테스트는 녹색입니다.

• 예제 전후에 메모를 릴리스하십시오.
• 마이그레이션 가이드 온라인 결정.
• 스토리/데모 업데이트, 도크 링크.

17) 예 전/후

• 다른 기본 버튼: 색상/반경/인던트가 일치하지 않습니다. 다른 CTA 텍스트.

• 토큰이있는 단일 '버튼': '크기 = md', '변형 = 1 차', '반경 = lg', '간격 = md', 스타일 "동작 + 객체" 의 텍스트.

• 기술 메시지, 프롬프트 없음.

• 구성 요소 ' 잘못된 날짜 형식. DD를 사용하십시오. MM. YYYYY. '+ 자동 초점.

18) 구성 요소 페이지 템플릿 (골격)

이름: 버튼

설명: 조치를 시작합니다. 화면 당 1 메인.
옵션: 1 차, 2 차, 유령, 파괴적; sm/md/lg 치수.
상태: 호버, 초점, 활성, 로딩, 비활성화.
A11y: 키보드에서 사용 가능; 전환 가능한 'aria-pressed'.
마이크로 카피: "변경 저장", "검증을 계속하십시오. "확인" 피하십시오.
코드 (예: API): '버튼 {변형, 크기, 아이콘, 로딩}'.
반 예: 동일한 계층 구조 수준에서 이중 기본.
테스트: 시각적 스냅 샷, 대비, 포커스 링.

19) 디자인 시스템 구현 플레이 북 (롤아웃)

1. 인터페이스 감사: 색상/타이포그래피/구성 요소/패턴 목록.
2. MVP 토큰 및 주요 구성 요소: 버튼, 입력, 선택, 모달, 경고, EmptyState, 토스트.
3. 문서 및 스토리 북: 라이브 예, 코드 스 니펫, 가이드.
4. 파일럿 제품: 위젯 교체, 피드백 수집.
5. 마이그레이션 가이드: 코드 모드, 삭제 규칙.
6. 세트의 확장: 테이블, 페이지 매김, 양식 포럼, 마법사 단계.

7. 스케일링: 제품 패턴 (결제, KYC), 분석 및 A/B와의 통합

8. 지원: 질문 채널, SLA, 내부 워크샵.

20) 빠른 문서 템플릿

• 이름: '색상. 국경. 경고 '
• 목적: 경고 프레임 및 배너 공지/경고
• 대조: 색상에 대한 AA. 표면. 채무 불이행 '
• 하지 마십시오: 작은 크기의 텍스트에 사용
• 관련: '색상. 표면. 경고 ',' 아이콘. 경고 '

패턴 패턴: 빈 상태 (결과 없음)

목적: "잘못된" 느낌없이 쿼리를 수정하려면

구성: 제목 (도매), 텍스트 (1-2 문장), CTA, 보조 CTA, 아이콘/일러스트레이션

마이크로 코피: "{query}" 에 의해 아무것도 발견되지 않았습니다. 필터를 초기화하거나 쿼리를 개선하십시오. "

A11y: 'role = "state"', 'aria-live = "polite"'

최종 치트 시트

시맨틱 토큰 + 훈련 A11y = 기본.
전체 구성 요소 페이지: 목적, 변형, A11y, 현미경, 코드, 테스트.
패턴 = 기성품 텍스트 및 규칙이있는 구성 요소의 구성.
문서-제품: 버전, 릴리스, 마이그레이션, 기여 프로세스.
측정 성숙도: 채택, 속도, 결함, 일관성, 내부 명령의 NPS.