단일 인터페이스 언

1) 단일 인터페이스 언어는 무엇이며 왜 필요한가

NEI (Unified Interface Language) 는 디자이너, 엔지니어, 분석가 및 컨텐츠 저자가 공유하는 일반적인 개념, 시각적 규칙 및 상호 작용 시스템입니다.

• 일관성-제품 및 팀마다 동일한 구성 요소 및 용어.
• 속도: 빠른 빌드, 더 적은 휴가, 더 빠른 온 보딩.
• 품질: 일관된 UX 패턴, "기본적으로" 가용성.
• 확장 성: "UI 동물원" 으로 나누지 않고 안전한 진화.

2) 단일 언어의 레이어

1. 토큰 (색상, 타이포그래피, 치수, 그림자, 들여 쓰기, 반경, 애니메이션).
2. 구성 요소 (버튼, 입력 필드, 테이블, 그래프, 모달, 토스트, 탭).
3. 패턴 (양식, 검증, 단계별 마법사, 목록/테이블, 알림).
4. 내용 (마이크로 카피 라이팅, 용어, 오류 메시지).
5. 도해 법 및 삽화 (가족, 스타일, 치수 및 선).
6. 가용성 및 i18n/RTL (A11y 규칙, 가변 성, 로케일).
7. 프로세스 (버전, 가이드, 리뷰, 린터, 쇼케이스 및 예).

3) 디자인 토큰 (표현력의 기초)

토큰은 모든 제품에서 재사용되는 값으로 명명됩니다.

3. 1 토큰 구조 (예)

json
{
"color": {
"bg": { "base": "#FFFFFF", "subtle": "#F7F8FA" },
"fg": { "primary": "#11131A", "muted": "#656D76" },
"accent": { "primary": "#2F6BFF", "warning": "#FF9F1A", "critical": "#E53935", "success": "#2EAE60" }
},
"space": { "xs": 4, "sm": 8, "md": 12, "lg": 16, "xl": 24, "2xl": 32 },
"radius": { "sm": 8, "md": 12, "lg": 16, "pill": 1000 },
"shadow": { "sm": "0 1px 2px rgba(0,0,0,.08)", "md": "0 4px 12px rgba(0,0,0,.10)" },
"font": { "family": "Inter, system-ui", "size": { "sm": 12, "md": 14, "lg": 16, "xl": 20 } },
"motion": { "duration": { "fast": 120, "base": 200, "slow": 320 }, "curve": { "inout": "ease-in-out" } }
}

3. 2 개의 이름 지정 토큰

일반적으로 특히: '색상. 악센트. 기본 ', н1은' 기본 파란색 '입니다.
브랜드 이름에 묶이지 않고 (브랜드는 토큰 이름이 아닌 주제입니다).
그레이션: 'fg. 음소거 ',' fg. 기본 ',' fg. 역 '. 시스템없이 이름 ('blue500') 으로 밝기를 인코딩하지 마십시오.

3. 3 테마 토큰

밝고 어둡고 대조적 인: 이름이 아닌 값을 변경하십시오.

테마 - 계층 오버라이드, UI는 일관성을 유지합니다

4) 구성 요소: 계약, 주, 가용성

구성 요소 = Visual + Behavior + Props 계약 + A11y.

4. 1 단추 계약 예

ts type ButtonProps = {
kind: "primary"      "secondary"      "tertiary"      "danger";
size: "sm"      "md"      "lg";
icon?: "plus"      "download"      "trash";
disabled?: boolean;
loading?: boolean;
ariaLabel?: string;
onClick?: (e: MouseEvent) => void;
};

상태: '기본/호버/활성/초점/비활성화'.
가용성: 포커스 링, 대상 크기는 40-48 px 이상, 토글은 'aria-pressed' 입니다.

4. 2 구성 요소 보증

안정적인 치수 (라인 높이, 패딩).
상자에서 접근성 (역할/아리아, 키보드, 대비).
불변량: 필드 내부의 오류는 항상 바닥과 'aria-descripedby' 입니다.

5) UX 패턴 (반복 가능한 논리)

양식: 왼쪽/상단 레이블, 자리 표시 자 www. 레이블, 나란히 + 요약 오류, 입력 마스크 및 프롬프트.
모달: 하나의 주요 CTA, 'Esc' 폐쇄, 포커스 트랩, 포커스 리턴.
테이블/목록: 정렬, 끈적 끈적한 헤더, 페이지 매김, 내보내기.
필터: 명시 적 적용 단추, 재설정, 저장된 사전 설정.
알림: 토스트 3-5 초, 초점 일시 정지, 'role = "상태/경고"'.
대시 보드: 최고 통찰력 → 컨텍스트 → 그래픽 → CTA.

6) 일반적인 용어 및 마이크로 카피 라이팅

6. 용어집 1 개

단일 용어집 및 UX 용어를 유지하십시오. 각 인터페이스 기사에서 참조하십

이중선의 경우 검색에서 동의어로 하나의 단어 ("지갑" 대 "밸런스") 를 선택하십시오.

6. 2 텍스트 규칙

간단히 그리고 사건에; 전문 용어를 피하십시오

오류-수행 대상 설명: "YYYY-MM-DD 형식으로 날짜를 지정하십시오".
헤딩은 명사입니다. 동사 - 동사 ("저장", "취소").
일관된 단위: UTC 또는 로케일의 날짜/시간, 코드가있는 통화 (EUR, USD).

7) 도해 법과 삽화

패밀리는 동형입니다: 단일 각도, 선 두께, 그리드 24 × 24.
상태 및 의미: 색상-보조; 모양/아이콘 + 텍스트-기본.
스케일링: 픽토 그램은 다른 밀도 (1 ×/2 ×/3 ×) 에서 "부동" 하지 않습니다.

8) 가용성 (A11y) 및 현지화 (i18n/RTL)

구성 요소는 대비, 키보드 탐색, 초점, '선호 감소 모션' 과 같은 WCAG AA를 겪습니다.
번역 된 문자열-코드가 아닌 리소스. 장소 보유자 및 번호/날짜 형식은 현지화 할 수 있습니다.
RTL: 미러링 아이콘, 올바른 탭 순서, 키보드의 DnD 로직.

9) 숫자, 날짜, 통화 및 형식

날짜/시간: ISO-8601, 실제 시점-UTC; 사용자 - 로케일.
통화: 사소한 단위/10 진수 문자열; 항상 코드를 지정하십시오 (예: "€12. 34 "또는" 12. 34 EUR "-로케일 별).
관심사: '12. 3% 및 포인트 '+ 1. 2 pp '를 명확하게 구별합니다.
반올림: 중요한 숫자로; 많은 수의 "k/m".

10) 거버넌스: 역할, 유물, 채널

DLC (Design Language Council): 토큰/구성 요소 소유자, RFC 주장.

• 콘텐츠 센터 (피그마/코드) + 예제가있는 라이브 카탈로그.
• 문서: 가이드, 패턴, A11y, 컨텐츠 가이드.
• 날짜, 레벨이있는 Changelog (추가/변경/삭제/제거/고정).
• 채널: 주간 디자인 싱크, 슬랙 채널, 구현 쇼케이스.

11) 진화와 진화

구성 요소 패키지 용 SemVer: 'MAJOR. 미노르. PATCH '.
MINOR-첨가제: 새로운 토큰, 기본값이있는 소품, 새로운 구성 요소.
메이저-속보: 소품 제거, 의미 변경 → 마이그레이션 가이드.
결과: 경고, 창 90 일 이상, 호환성 플래그.

12) 라이터 및 자동 점검

UI-linter: 토큰 외부의 금지 된 색상, 패턴 방지 (버튼 디바, 비활성화 된 개요).
A11y 확인: 대비, 역할/아리아, 초점, 키보드.
i18n-linter: 코드의 "하드" 라인, 잘못된 장소 홀더.
스크린 샷 테스트: 구성 요소의 시각적 회귀.
시각화 API 계약 (있는 경우): 데이터 유형, 범위, 서명.

13) 구성 요소 쇼케이스 (스토리 북/샌드 박스)

소품 제어, 코드, 상태, A11y-checker가있는 라이브 예.
"레시피": 등록 양식, 3 단계 마법사, 테이블 + 필터, modalka + 토스트.
"로케일의 샌드 박스": 언어/형식/RTL 전환.

14) 명명 및 구조 패턴

14. 1 개의 구성 요소 (BEM/시맨틱, CSS 예)

.btn/basic/
.btn--primary/view/
.btn--danger
.btn--lg/size/
.btn __ icon/part/

코드에서 소품의 단조로운 이름: '크기', '종류', '비활성화', '온 클릭'.

14. 2 라이브러리 파일 구조

/tokens
/components
/button
/input
/modal
/patterns
/docs
/changelog

15) 반 패턴

토큰 외부의 "무료" 색상/입력.
중복 구성 요소: "ButtonV2", "PrimaryButtonNew".
유일한 필드 레이블로 장소 보유자.
개요 및 div 단추를 비활성화합니다.
예측할 수없는 호버/활성/비활성화.
정상적인 번역 대신 음역 된 용어.

업데이트 중 마이그레이션 가이드 부족

16) 단일 언어 품질 지표

적용 범위-컨텐츠 라이브러리를 사용하는 화면의 비율.
일관성 지수: 토큰과 "수동" 스타일을 재사용하십시오.
A11y 패스 속도-WCAG AA를 통과하는 구성 요소의 백분율.
결함 탈출: 1k 커밋 판매에서 UI/컨텐츠 결함.
선박 시간-DLS 전후 일반적인 화면을 구현할 시간.
채택: DAU 쇼케이스, 구성 요소/패턴이있는 PR 번호.

17) 화면 점검표

• 하드 값이 아닌 사용 된 토큰 (색상/입력/반경).
• 도서관의 구성 요소; 사용자 정의-RFC 전용.
• 접근성: 키보드/초점/대비/역할/아리아.
• 단위: 날짜/통화/백분율-형식 가이드 당.
• 마이크로 카피: 버튼 = 동사, 오류 = 수정 동작.
• Locales/RTL은 레이아웃을 깨뜨리지 않습니다.
• 상태: 로딩/빈/오류가 제공됩니다.
• 시각 회귀 테스트가 업데이트되었습니

18) 구현 계획 (3 회 반복)

반복 1-기초 (2-3 주)

토큰 (색상/타이포그래피/간격/모션), 기본 구성 요소 (버튼, 입력, 선택, 툴팁, 모달), 컨텐츠 가이드 (톤, 라벨, 오류).
쇼케이스 (스토리 북) 및 A11y-checker, 토큰 라인터.

Iteration 2-패턴 및 국소화 (3-4 주)

양식/테이블/필터의 패턴, 아이콘 팩 24 × 24, RTL/i18n 샌드 박스, 숫자/날짜/통화 규칙.
SemVer, 변경 로그, RFC/마이그레이션 프로세스, 자동 테스트 (시각적 + A11y).

Iteration 3-규모와 진화 (연속)

구성 요소 (Wizard, DataGrid, Chart Primitives), temization (light/dark/contrist), 품질 지표 보고서, 일반 UX 감사.

19) 미니 -FAQ

"한 번에" 필요합니까?
아니요, 그렇지 않습니다. 토큰 및 기본 구성 요소로 시작한 다음 패턴과 프로세스를 추가하십시오.

팀이 YEI를 사용하도록 설득하는 방법?
상금: 속도, 적은 결함, 기성품 스크린 레시피 및 A11y를 상자에서 보여줍니다.

레거시 화면으로 무엇을해야합니까?
마이그레이션 계획, 토큰을 통한 브리지 스타일, 우선 순위 화면-먼저.

합계

단일 인터페이스 언어는 구성 요소 라이브러리 일뿐만 아니라 이것은 토큰이 표현력을 설정하고 동작 및 가용성, 패턴, 의사 결정의 반복성, 거버넌스 및 지표-지속 가능한 진화를 설정하는 규칙 및 프로세스 시스템입니다. 언어를 명확하고 검증 가능하며 확장 가능하게 만들면 제품이 균일하고 빠르며 안정적으로 보이고 작동합니다.