AI First
AI는 의도를 이해하고 제안하되 사용자의 통제권을 대신하지 않는다.
복잡한 조작을 줄이고 검토 가능한 도움을 먼저 제공한다.
- 결과 수정·재생성·거부 가능
- 중요 행동은 승인 후 실행
- 진행·실패·복구 상태 제공
BidMe가 요청을 정리한 뒤 사용자가 수정하고 승인한다.
AI 제안을 검토 없이 외부에 자동 발송한다.
AI 결과를 사용자가 거부하거나 고칠 수 있는가?Related · AI UX · AI Trust · Feedback
Data First
장식보다 중요한 데이터와 상태를 먼저 보여준다.
숫자, 비교, 출처, 갱신 시점을 판단 순서에 맞춰 배치한다.
- 핵심 숫자 우선
- Loading·Empty·Error 명시
- 출처와 갱신 시점 제공
PriceGo가 원화 환산 결과와 적용 환율을 먼저 보여준다.
핵심 금액을 작은 Caption으로 숨긴다.
사용자가 판단할 데이터가 장식보다 먼저 보이는가?Related · Display · Data States · Templates
Mobile First
가장 작은 화면에서 핵심 목적과 행동을 먼저 해결한다.
320px, Safe Area, 큰 터치 영역과 한 손 사용을 기본으로 검토한다.
- 320px 지원
- 가로 스크롤 금지
- 긴 문구와 큰 글씨 대응
OCR 복구 Action이 좁은 화면에서 세로로 쌓인다.
Desktop 표를 그대로 축소해 가로 스크롤로 숨긴다.
320px에서도 같은 목적을 달성할 수 있는가?Related · Mobile Template · Responsive Quality
Zero Learning
교육 없이 화면 목적과 다음 행동을 이해할 수 있어야 한다.
명확한 제목, 하나의 목적, 즉시 Feedback으로 학습 비용을 줄인다.
- 3초 안에 목적 이해
- Primary Action 명확
- 행동 결과 즉시 표시
스캔 화면이 촬영과 갤러리 선택을 바로 제시한다.
아이콘만 나열하고 설명은 별도 도움말에 둔다.
설명서 없이 다음 행동을 선택할 수 있는가?Related · Navigation · Actions · Page Templates
Trust First
정확성, 한계, 출처와 실패를 숨기지 않는다.
자동 분석의 근거와 불확실성을 검토 가능한 상태로 전달한다.
- Confidence와 한계 표현
- Source·Last Updated 제공
- Retry·Correction 제공
AI Measure가 측정 신뢰도와 현장 확인 필요를 함께 표시한다.
추정 결과를 확정값처럼 표현한다.
사용자가 결과를 신뢰할 근거와 의심할 이유를 모두 볼 수 있는가?Related · AI Trust · Status · Quality
Clarity First
시각적 풍부함보다 이해와 판단 속도를 우선한다.
불필요한 문구와 장식을 줄이고 정보 계층을 선명하게 만든다.
- 핵심 메시지 먼저
- 쉬운 문장
- 경쟁하는 강조 최소화
ShimPM이 현재 위험과 다음 조치를 한 화면에 구분한다.
동일한 강도의 카드가 핵심 상태와 부가 설명을 경쟁시킨다.
가장 중요한 한 가지가 즉시 드러나는가?Related · Typography · Layout · Cards
Consistency
같은 의미와 상태는 프로젝트가 달라도 같은 UI 언어를 사용한다.
기존 Token, Component, Pattern을 먼저 확장한다.
- 동일 상태는 동일 표현
- 기존 컴포넌트 우선
- 예외는 기록
모든 제품의 Error가 설명과 복구 Action을 함께 제공한다.
서비스마다 Success 색상과 용어가 다르다.
기존 Studio 항목으로 같은 의미를 표현할 수 있는가?Related · Foundations · Components · Patterns
Accessibility
접근성은 선택 기능이 아니라 기본 품질 기준이다.
키보드, 보조 기술, 큰 글씨, 대비와 터치 영역을 설계 단계에서 포함한다.
- 명확한 Heading과 Landmark
- 상태를 색상 외 텍스트로 표현
- Focus와 터치 영역 보장
Toggle이 이름과 checked 상태를 함께 전달한다.
색상만으로 오류와 성공을 구분한다.
보지 못하거나 정밀 조작이 어려워도 목적을 달성할 수 있는가?Related · Accessibility Quality · Checklists
Maintainability
시각적 완성도가 구조와 유지보수성을 해치지 않아야 한다.
의미 있는 Token과 재사용 가능한 책임 경계를 유지한다.
- UI에 비즈니스 로직 금지
- 일회성 Global Token 금지
- 중복 Wrapper 최소화
프로젝트 Adapter가 기존 Semantic Token을 연결한다.
한 화면 장식을 위해 전역 Theme 구조를 확장한다.
변경 이유와 영향 범위를 다음 개발자가 이해할 수 있는가?Related · Token Governance · Contributing
Human Control
중요한 의사결정과 실행의 최종 통제권은 사용자에게 있다.
제안, 검토, 수정, 승인, 실행, 결과 확인의 경계를 명확히 한다.
- 위험 Action 명시적 승인
- 취소와 수정 제공
- 실행 결과 확인
ShimPM이 Git Action을 제안하고 사용자가 승인한 뒤 실행한다.
AI가 계약 생성이나 삭제를 자동 확정한다.
되돌리기 어렵거나 외부 영향이 있는 행동을 사용자가 승인했는가?Related · Overlays · Actions · AI Governance