English

사이트맵

이 사이트의 전체 구조입니다. 211개 용어가 모두 적혀 있으니 브라우저 찾기(Ctrl/⌘ + F)로 원하는 말을 바로 찾을 수 있습니다.

20개 페이지 · 12개 분류 · 211개 용어 · 깊게 보기 4편

기본

분류 12개 · 용어 211개

01 레이아웃 & 구조 14개

화면을 어떻게 나누고 배치하는가. 시안을 읽는 기본기.

02 내비게이션 16개

사용자가 화면을 옮겨 다니는 모든 수단.

03 오버레이 & 피드백 23개

화면 위에 뜨는 모든 것. 팝업·모달·토스트의 정체.

04 입력 & 폼 26개

사용자에게 값을 받아내는 모든 컨트롤.

05 데이터 표시 15개

정보를 목록·표·카드로 보여주는 방법.

06 인터랙션 & 상태 19개

눌렀을 때·올렸을 때 요소가 어떻게 반응하는가.

07 비주얼 & 스타일 17개

여백·글자·색·그림자를 다루는 말.

08 반응형 & 디바이스 12개

PC와 모바일에서 화면이 어떻게 달라지는가.

09 UX 방법론 & 산출물 32개

화면을 그리기 전에 하는 일, 그리고 넘기는 문서.

10 디자인 시스템 & 협업 11개

재사용 규칙을 만들고 개발에 넘기는 방법.

11 접근성 (a11y) 10개

누구나 쓸 수 있게 만드는 최소한의 기준.

12 외주 소통용 개발 용어 16개

디자인 용어는 아니지만 회의에서 못 알아들으면 곤란한 말.

깊게 보기 4편

01 "팝업 띄워주세요"가 위험한 이유 6단계

팝업·모달·다이얼로그·얼럿 — 네 단어의 관계를 한 번에 정리합니다.

  1. 문제 체감
  2. 모달 = 성질
  3. 다이얼로그 = 물건
  4. 얼럿 vs 컨펌
  5. 알림 3형제
  6. 요청 문구

02 어떤 입력 컨트롤을 써야 할까 6단계

선택지 개수와 저장 시점에 따라 답이 정해집니다.

  1. 선택지 개수
  2. 즉시 vs 저장
  3. 하나 vs 여러 개
  4. 오류 위치
  5. 결정표
  6. 요청 문구

03 버튼 하나에 상태가 6개나 필요한 이유 5단계

시안에서 가장 많이 빠지는 것 — 상태(State).

  1. 차이 체감
  2. 6가지 상태
  3. 모바일엔 호버가 없다
  4. 비활성의 함정
  5. 요청 문구

04 창을 줄이면 무슨 일이 일어나나 5단계

시안 한 벌로는 끝나지 않습니다. 직접 폭을 줄여보며 확인합니다.

  1. 직접 줄여보기
  2. 브레이크포인트
  3. 반응형 vs 적응형
  4. 모바일 함정
  5. 요청 문구