UX 지침 및 인터페이스 표준

1) 원칙

아름다움 이전의 명확성. 1-2 초 안에 의미와 행동이 분명합니다.

화면 당 하나의 대상. 다른 모든 것은 이차적이거나 숨겨져 있

일관성. 같은 패턴 = 동일한 기대.
기본 가용성. 대조, 초점, 키보드, 음성 연기.
상황성. 팁과 텍스트는 정확히 필요한 곳입니다.
현지화 우선. 처음에는 디자인에서 줄 길이, 형식, 문화.
가역성. 위험한 조치는 취소/확인할 수 있습니다.
측정 가능성. 각 규칙에는 메트릭 (단계 변환, 시간, 오류) 이 있습니다.

2) 그리드, 들여 쓰기 및 리듬

격자: 4/8-pt 피치; 열: 12 (데스크톱), 6 (태블릿), 4 (모바일).
내부 구성 요소 들여 쓰기: 4의 배수; 외부 - 8/12/16/24.
수직 리듬: 제목 → 자막 → → 행동 내용 (CTA).
국경과 칸막이: 경제적; "공기" 와 타이포그래피의 계층 구조를 선호합니다.

3) 타이포그래피

핀 스케일: 12/14/16/20/24/32/40 (본체 16).
행 높이: 1. 4–1. 텍스트는 6, 1입니다. 2–1. 제목은 3입니다.
줄 길이: 45-75 자 (데스크탑), 35-55 (모바일).
강조 표시: 시맨틱 악센트에 대해 굵게; 캡-라벨에만 있습니다.
큰 소리로 읽을 수 있습니다. 텍스트는 자연스럽게 들려야합니다.

4) 색상과 대비

시맨틱: '성공/정보/경고/오류/중립'.
대조: WCAG 최소 2. 1 AA (텍스트/배경 5:1; 큰 이하 3:1).
색상은 유일한 신호입니다. 아이콘/텍스트/양식을 추가합니다.
초점 링: 항상 볼 수 있습니다 (CSS에서는 비활성화하지 마십시오).

5) 탐색 및 정보 아키텍처

사용자 경로: "어디에 있습니까? 여기 무엇입니까? 다음은 무엇입니까? " -분명히.
메뉴 계층 구조: 기본 탐색에서 자동 레벨 2.
빵 부스러기: 깊은 섹션.
검색: 복잡한 디렉토리에서 전 세계적으로 사용 가능; 핫키 '/'.
탐색 상태: 활성 탭/페이지가 토큰으로 강조 표시됩니다.

6) 구성 요소 및 패턴

우리는 "수제" 없이 디자인 시스템의 구성 요소를 사용합니다.
화면 당 하나의 기본 CTA; 나머지는 2 차/3 차입니다.
상태: 기본/호버/초점/활성/비활성화/로딩-각 대화식에 필수입니다.
빈 상태: 컨텍스트 + 값 + CTA (+ 보조 링크).
일반적인 경고: 화면 당 하나의 페이지 경고 + 로컬 인라인 프롬프트.

7) 양식, 검증 및 오류

라벨은 필수입니다. 플레이스 홀더는 대체품이 아닌 형식의 예입니다.
흐림에 대한 인라인 검증, 제출에 대한 요약 오류.
오류 메시지: 무엇이 잘못되었는지++ 제약/형식을 수정하는 방법.
자동 스크롤하여 첫 번째 오류에 집중하십시오. 'aria-ununity', 'aria-descripedby'.
마스크 및 형식: 프롬프트하지만 입력을 중단하지 마십시오 (paist 가능).
데이터 안전: 재부팅/오류 중에 아무것도 잃지 마십시오.

8) 조건 및 피드백

성공: 토스트 2-4 초, 중립 양성 톤, CTA "다음 단계".
정보/알림: 소프트 배너/타입, 스트림을 차단하지 않습니다.
경고/오류/중요: 시각적/의미 적으로 계층 구조; 중요-명시 적 동작이있는 모달/배너.
로딩: 스켈레톤> 스피너; 대기 시간> 3 초 평가.

9) 내용 및 마이크로 카피

세 가지 답변의 규칙: 무슨 일이 일어나고 있는지 → 다음에 무엇을해야합니까?
CTA: 동사 동사 + 객체 ("변경 저장", "통과 확인").
숫자/날짜/통화: 로컬 형식.
톤: 친절한; 스트레스가 많은 단계 (지불/보안) -중립.

10) 가용성 (A11y)

전체 키보드 탐색; 논리적 태빙 순서.
토스트/상태를위한 대화식 라이브 지역의 역할 및 'aria-'.
대조, 포커스 링, 대화식 크기는 44 × 44 px 이상입니다.
아이콘/이미지를위한 텍스트 대안; 'th '/' scope' 가있는 테이블.
검사: 화면 판독기의 자동 (린터/스캐너) + 수동 스크립트.

11) 국제화 및 국제화

모든 문자열은 문맥 i18n 키입니다.
"긴 언어" (DE/TR) 테스트, RTL 모드.
숫자/통화/시간-형식 유틸리티.
톤맵: 시나리오 별 형식/감정 정도 (온 보딩/결제/보안).

12) 반응 및

중단 점: 360/768/1024/1280 +.
모바일 우선: 한 손으로 사용할 수있는 중요한 경로, 엄지 영역의 CTA.
제스처 및 키보드: 제스처는 버튼으로 복제됩니다. 데스크톱에서-핫키.
밀도: 클릭 가능성을 손상시키지 않으면 서 데스크톱- "공기", 모바일-수직 절약.

13) 어두운 테마

WCAG와의 대조가 유지됩니다. 배경 (진한 회색) 에 대한 "순수한 검은 색" 을 피하십시오.
글로우/섀도우-약화; 초점 링 대비.
거꾸로 된 버전의 삽화 및 로고.
전환 정책: 사용자의 선택을 저장하십시오 (시스템/조명/어둠).

14) 애니메이션 및 모션

기간: 120-200 ms (작은), 200-300 ms (전환).
가속 기능은 자연 스럽습니다 (약간 감속되는 입방체).
애니메이션은 흐름을 차단하고 가독성을 손상시키지 않아야합니다.
'선호 감소 모션' 을 존중하십시오.

15) 성능

LCP 방식 2. 5s, 녹색의 TTI/TBT; 코드 스 플라이 싱; 게으른 미디어로드.
긴 목록의 가상화; 데이터 캐싱.
속도 인식을위한 해골; "정크" 레이아웃을 최소화하십시오.

16) UI의 보안 및 개인 정보

요청 사유 (카메라, KYC, 지리) 에 대한 명확한 설명.
투명한 마감일/커미션/제한; 지연이 가능한 경우 "즉시" 없이.
기밀 데이터-마스킹, 명시 적 "쇼/숨기기".
돌이킬 수없는 행동에 대한 확인; 활동 로그/로그인 알림.

17) UX 품질 지표

단계 변환 및 완료 시간.
필드/단계 별 오류 속도 및 수정 시간.
CTA에 의한 CTR 및 시나리오 반복성.
오류 후/로딩 후> N 초 중단.
주제 별 전화 지원 (변경 전/후).
릴리스 용 A11y 결함 (대상 - 0 임계).

18) 점검표

시험판 화면

• 하나의 기본 목표와 하나의 기본 CTA.

[탐색] 및 위치 I-am 상태가 분명합니다.

• 짧은 내용: 블록 당 1-2 문장.
• 상태: 로딩/빈/오류/성공이 보장됩니다.
• A11y: AA 대비, 대화식에서 초점이 보이는 'aria-'.
• 현지화: 문자열 길이/형식/RTL이 확인되었습니다.
• 성능: 불필요하게 "무거운" 블록이 없습니다.

사전 릴리스 양식

• 라벨 및 샘플 형식이 있습니다.
• 제출할 인라인 검증 + 요약.
• 첫 번째 오류로 스크롤하여 상자에 집중하십시오.
• 메시지: 무엇/방법/이유; 사용자를위한 500/400 코드가 없습니다.
• 오류/재부팅시 데이터가 손실되지 않습니다.

19) 반 패턴

의미 단계에서 CTA로 "OK".
라벨 대신 장소 보유자.
유일한 상태 신호로 색상.
시간 추정치가없고 대안이없는 스피너.
초점 트랩 및 ESC 닫기가없는 모달 창.
스타일/아이콘을 혼합하여 디자인 시스템 외부의 구성 요소를 복제합니다.
중요한 시나리오에서 유머/이모티콘 (지불/보안).

20) 예 전/후

양식 오류

이전: "오류 400"

이후: "유효하지 않은 날짜 형식. DD를 사용하십시오. MM. YYYY "

빈 상태

전에: "여기가 비어 있습니다"

이후: "첫 번째 보충 이후의 운영 이력은 여기에 나타납니다. [탑업] "

성공 메시지

"완료"

후에: "지불이 수락되었습니다. 균형이 업데이트되 [역사보기] "

탐색

이전: 사용자가 어디에 있는지 확실하지 않습니

이후: 활성 탭 + 빵 부스러기 + 명시 적 페이지 제목

21) 디자인 검토 템플릿

스크린 프레임

제목 → 짧은 설명 → 내용/목록 → 피드백/상태 → 동작.

금형 프레임

머릿말 → 프롬프트 → 필드 (레이블 + 헬퍼 + 오류) → CTA → 보조 동작 → 노트.

마이크로 코피 템플릿

제목 (ex)

1-2 문장: 컨텍스트 + 다음 단계

CTA: 동작 + 객체

이차 링크: 도움말/규칙

22) 표준 프로세스 및 유지 관리

완료의 정의 (UX): 레이아웃 + 텍스트 + 상태 + A11y + i18n + 메트릭.
PR의 UX 검토: 섹션 18-21의 점검표.
문서: 각 기능은 위키/스토리 북에 가이드를 추가/업데이트합니다.
콘텐츠, A11y, 성능, 일관성.

최종 치트 시트

하나의 목표, 하나의 주요 CTA.
상태와 피드백은 미리 설계되었습니다.
A11y 및 현지화-" 나중에 "가 아닌 처음부터.
더 적은 색상-더 많은 의미와 리듬.
측정: 변환, 오류, 시간, 반전.
모든 설계 시스템: 동일한 규칙 → 동일한 기대 → 예측 가능한 UX.

주요 시나리오 (등록/CUS, 예금/인출, 보너스/토너먼트) 에 대한 기성품 템플릿으로이 안내서를 보완하고 검토 프로세스에 대한 체크리스트를 수집 할 수 있습니다.