04 · UX Guidelines

UX
Guidelines.

NMWC 제품의 상호작용 원칙과 패턴. Nielsen 휴리스틱 + NMWC 고유 추가. 온보딩, 폼, 에러, 로딩, 마이크로카피, 모션, 성능까지. 빌더가 도구를 빠르게 쓸 수 있도록 만드는 규칙.

NMWC UX Principle
Show
the SILO.

빌더가 자기 SILO의 현재 상태를 항상 볼 수 있도록. 운영 중인 사업의 지표·진행이 첫 화면에 · 빌더의 일상은 자기 SILO에서 시작합니다.

01

UX Principles

Nielsen 10 휴리스틱을 채택하고, NMWC 고유 3개 원칙을 추가.

Nielsen's 10 Heuristics

  1. Visibility of system status · 시스템이 무엇을 하는지 항상 보여라
  2. Match between system and real world · 사용자의 언어로
  3. User control and freedom · 실수 복구가 항상 가능
  4. Consistency and standards · 같은 행동은 같은 결과
  5. Error prevention · 에러가 발생하지 않게 설계
  6. Recognition over recall · 사용자가 외우지 않게
  7. Flexibility and efficiency · 초보와 고수 모두
  8. Aesthetic and minimalist design · 불필요한 정보 제거
  9. Help users recognize, diagnose, recover from errors · 에러를 사람말로
  10. Help and documentation · 도움말은 발견 가능하게

NMWC Additions

NMWC · 01
Show the SILO
사용자의 누적 작업은 항상 시각화. 본인이 얼마나 쌓았는지 보여줘야 함. 빈 페이지로 시작하지 마라. 어제의 SILO를 항상 보여라.
NMWC · 02
AI is Honest
AI 능력의 한계와 불확실성을 숨기지 마라. "확실하지 않습니다"가 거짓 확신보다 낫습니다. AI는 동료, 거짓말하지 않습니다.
NMWC · 03
Start Small, Scale Up
빈 화면에서도 첫 단계가 항상 제시되어야 함. 다음 단계는 점진적으로. 한 번에 모든 기능을 보여주지 마라. Build small, then build again.
02

Onboarding

첫 사용자의 60초. 첫 가치 경험까지 최단 거리.

Rules

Anti-Patterns

✓ DO
소셜 로그인 우선 · 첫 SILO 즉시 빌드 · 가입 없이 둘러보기 허용 · "오늘 한 줄" 즉시 가능
✗ DON'T
이메일 가입 강제 · 5단계 튜토리얼 · 모든 기능 슬라이드쇼 · 카드 등록 요구 · 다음 단계 강제

Sample Flow

  1. Land · Hero + "Build now" CTA 한 개. 다른 산만한 요소 0
  2. Auth (옵션) · Google/GitHub 한 번 클릭, 또는 게스트로 진행
  3. First SILO · 빈 입력 필드 1개, placeholder에 예시. Enter하면 SILO 시작
04

Forms

폼은 마찰의 주요 원천. 최소화하고 친절하게.

Validation Timing

이벤트별 검증 트리거. 각 카드는 해당 시점의 실제 입력 필드 상태를 미니 미리보기로 보여줍니다.

이메일
user@exa
검증 보류 — 빨간 줄 표시하지 않음
타이핑 중
✗ 검증 트리거 금지. 입력 중 빨간 줄은 사용자를 짜증나게 합니다.
이메일
user@exa
✗ 올바른 이메일 형식이 아닙니다.
Blur — 인라인 검증 시작
Blur · 포커스 떠남
필드별 검증 시작. 사용자가 그 필드에서 손을 뗀 시점.
이메일
user@exa
비밀번호
••••
계속하기
Submit — 전체 필드 검증
제출 시도
모든 필드를 한 번에 검증. 첫 에러 필드에 포커스 이동.
이메일
hello@nmwc.ai
Server — 서버 에러 도착
이미 가입된 이메일입니다.
서버 응답
클라이언트 검증은 통과했지만 서버에서 거부된 경우. 토스트 + 인라인 동시.

Error Messages

3가지를 다 답해야 좋은 에러 메시지:

  1. 무엇이 잘못됐나 (이메일 형식)
  2. 왜 잘못됐나 (@가 빠졌어요)
  3. 어떻게 고치나 (example@domain.com 형식으로)

Smart Defaults

Layout

05

Error Handling

에러는 회복이 우선. 사용자를 비난하지 마라.

Recovery-First

모든 에러 메시지는 사용자가 다음에 할 일을 명시해야 합니다.

BAD "Error: Something went wrong."
GOOD "AI가 잠시 멈췄어요. 같이 다시 가요." (재시도 버튼)
BAD "Invalid input"
GOOD "이메일 형식이 아닌 것 같아요. 예: name@example.com"
BAD "Failed to save"
GOOD "저장에 실패했어요. 인터넷 연결을 확인하고 다시 시도해주세요."

Severity Levels

각 심각도가 실제 UI에서 어떻게 전달되는지 미니 미리보기로 표현. 색이 진할수록 사용자를 더 적극적으로 차단·알림.

!
권한이 없습니다
이 페이지에 접근할 수 없습니다.
다시 로그인
Critical
Full-page error
인증 실패, 권한 없음, 시스템 다운.
이메일
user@example
✗ 올바른 이메일 형식이 아닙니다.
저장에 실패했어요. 다시 시도해주세요.
Major
Inline error + toast
저장 실패, API 에러, 폼 검증 실패.
네트워크가 잠시 느려요.
Minor
Toast only
임시 네트워크 지연, 백그라운드 재시도.
자동 저장됨
Info
Silent · minimal pill
자동 저장, 동기화 완료, 백그라운드 성공.

Don'ts

06

Loading & Feedback

시스템이 무엇을 하고 있는지 사용자가 항상 알게.

Timing Table

응답 시간대별 사용자에게 보여줄 피드백. 각 행의 미리보기는 실제 거동을 라이브로 보여줍니다.

< 100ms
저장됨
무표시
즉각적 반응. 사용자는 지연을 인지하지 못함. 상태만 즉시 반영.
100ms–1s
결과 업데이트됨
즉시 결과
스피너 없이 결과 표시. Optimistic UI 권장 — 실패 시 롤백.
1s–3s
인라인 스피너
버튼 내부 또는 카드 위 작은 스피너. 위치 = 트리거 옆.
3s–10s
스켈레톤 + 진행률
스피너 대신 콘텐츠 모양 placeholder. 가능하면 진행률 함께 표시.
> 10s
i
약 30초 소요 백그라운드 처리됩니다.
설명 메시지
"이 작업은 시간이 걸려요" + 예상 시간. 백그라운드 처리·취소 옵션 제공.

Optimistic UI

네트워크 요청 시작 즉시 UI를 업데이트. 실패 시 롤백 + 토스트.

Skeleton vs Spinner

두 로딩 패턴이 동시에 작동하고 있는 모습. 스켈레톤은 콘텐츠 모양을 미리 보여줘 인지 지연을 줄이고 레이아웃 shift를 막습니다. 스피너만으로는 사용자에게 "얼마나 더 기다려야 하는지" 신호가 없습니다.

✓ Skeleton
콘텐츠 모양 placeholder
  • 페이지 첫 로드 · 콘텐츠 fetch · 1초 이상 예상
  • 레이아웃 shift 방지 — 실제 콘텐츠와 같은 자리·크기
  • 인지 지연 감소 — "구조"가 먼저 도착
✗ Spinner only
진행률 없는 무한 회전
  • 페이지 전체에 큰 스피너 단독 사용 금지
  • 3초 이상의 대기에 스피너만 두지 말 것
  • 스피너는 1–3초 인라인 액션 피드백에만 적절
07

Microcopy

버튼 텍스트, 라벨, 안내 문구. 작은 차이가 큰 인상. 이 섹션은 "어떻게 보일지"의 UI 룰 — 카피 톤·voice·문장 패턴은 BX § Sample Copy · BX § Tone of Voice 참조.

CTA Buttons

동사 중심, 구체적, 결과 명시. (BX 가이드의 voice 참조)

VAGUESubmit
SPECIFICSILO 저장
VAGUEClick here
SPECIFIC오늘 빌드 시작
VAGUELearn more
SPECIFICNMWC 방식 보기
VAGUEGet started
SPECIFIC첫 SILO 짓기

Empty States

Number Specificity

VAGUE여러 SILO
SPECIFIC3개의 SILO
VAGUE최근
SPECIFIC최근 7일
VAGUE곧 완료
SPECIFIC약 30초 후 완료

Permission / Destructive Action

08

Notifications

방해와 정보 사이의 균형. 사용자의 흐름을 끊지 마라.

Toast

Notification Center

Email / Push

10

Motion in UX

모션은 장식이 아니라 정보 전달의 수단.

Purpose of Motion

ORIENT

어디서 왔고 어디로 가는지. 예: 모달이 클릭한 버튼에서 expand. 페이지 전환이 방향성을 가짐.

INDICATE

무슨 일이 일어났는지. 예: 아이템 추가 시 slide-in, 삭제 시 fade-out. 상태 변화를 시각적으로 알림.

DELIGHT

보상감. 예: 완료 시 짧은 success 체크 애니메이션. 단, 너무 빈번하면 산만함.

Duration & Easing

Brand 가이드의 motion 토큰을 그대로 사용. (Brand → Motion 섹션 참조)

Reduced Motion

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Don'ts

✓ DO
목적 있는 motion · 250ms 이하 · prefers-reduced-motion 지원 · 사용자 액션에 반응
✗ DON'T
텍스트 자체 애니메이션 (어지러움) · 0.5s 이상 transition · 무한 반복 (집중 방해) · 자동 캐러셀
11

Performance Perception

실제 속도와 체감 속도는 다르다. 둘 다 챙겨야 함.

Core Web Vitals

< 2.5s
LCP · Largest Contentful Paint
target: 2.5s
가장 큰 콘텐츠 요소 (히어로 이미지 등)가 로드되는 시간.
< 200ms
INP · Interaction to Next Paint
target: 200ms
사용자 입력에 대한 반응 시간. 클릭/타이핑 → 화면 변화.
< 0.1
CLS · Cumulative Layout Shift
target: 0.1
레이아웃이 갑자기 이동하는 양. 광고/이미지 로드 시 점프 방지.

Techniques

Anti-Patterns