Sitemap
The full structure of this site. All 211 terms are listed here, so you can use your browser's find (Ctrl/⌘ + F) to jump straight to a word.
Main pages
- HomeCategory entry points · deep dives
- All termsSearch 211 terms in English or Korean
- Design guideThe rules this site follows
- SitemapYou are here
12 categories · 211 terms
01 Layout & structure 14
How a screen is divided up. The basics of reading a mockup.
- Header헤더
- Footer푸터
- Global Navigation BarGNB
- Local Navigation BarLNB
- Sidebar사이드바
- Content Area콘텐츠 영역
- Container컨테이너
- Grid System그리드 시스템
- Column · Gutter · Margin컬럼 · 거터 · 마진
- Section섹션
- Hero Section히어로 섹션
- The Fold더 폴드
- Layout레이아웃
- z-index · Layerz-index · 레이어
02 Navigation 16
Every way a person moves from one screen to another.
- Navigation내비게이션
- Tabs탭
- Tab Bar탭바
- Hamburger Menu햄버거 메뉴
- Drawer드로어
- Dropdown Menu드롭다운 메뉴
- Mega Menu메가 메뉴
- Breadcrumb브레드크럼
- Pagination페이지네이션
- Load More더보기 버튼
- Infinite Scroll무한 스크롤
- Step Indicator스텝 인디케이터
- Anchor Link앵커 링크
- Sticky · Fixed스티키 · 픽스드
- Floating Action Button플로팅 버튼 · FAB
- Kebab · Meatballs · Bento Menu케밥 · 미트볼 · 벤토 메뉴
03 Overlays & feedback 23
Everything that appears on top of the screen — popups, modals, toasts.
- Popup팝업
- Modal모달
- Non-modal · Modeless논모달 · 모달리스
- Dialog다이얼로그
- Alert얼럿
- Confirm컨펌
- Dim · Backdrop · Scrim딤 · 백드롭 · 스크림
- Focus Trap포커스 트랩
- Bottom Sheet바텀시트
- Action Sheet액션시트
- Tooltip툴팁
- Popover팝오버
- Toast토스트
- Snackbar스낵바
- Banner배너
- Inline Message인라인 메시지
- Spinner · Loader로딩 스피너
- Skeleton스켈레톤 UI
- Progress Bar프로그레스 바
- Empty State엠티 스테이트
- Error State에러 스테이트
- Splash Screen스플래시 스크린
- The Big Four팝업 vs 모달 vs 다이얼로그 vs 얼럿
04 Inputs & forms 26
Every control that collects a value from someone.
- Form폼
- Input · Text Field인풋 · 텍스트 필드
- Textarea텍스트에어리어
- Label라벨
- Placeholder플레이스홀더
- Helper Text헬퍼 텍스트
- Select셀렉트
- Combobox콤보박스
- Autocomplete오토컴플리트
- Checkbox체크박스
- Radio Button라디오 버튼
- Toggle · Switch토글 · 스위치
- Segmented Control세그먼티드 컨트롤
- Slider슬라이더
- Range Slider레인지 슬라이더
- Number Stepper숫자 스텝퍼
- Date Picker · Picker데이트 피커 · 픽커
- File Uploader · Dropzone파일 업로더 · 드롭존
- Chip칩
- Tag태그
- Validation밸리데이션
- Input Masking마스킹
- Call To ActionCTA
- Primary · Secondary Button프라이머리 · 세컨더리 버튼
- Ghost · Outline · Text Button고스트 · 아웃라인 · 텍스트 버튼
- Icon Button아이콘 버튼
05 Displaying data 15
Showing information as lists, tables and cards.
- Card카드
- List리스트
- Table · Data Grid테이블 · 데이터 그리드
- Carousel캐러셀
- Accordion아코디언
- Disclosure디스클로저
- Badge배지
- Avatar아바타
- Thumbnail썸네일
- Toolbar툴바
- Timeline타임라인
- Tree트리
- Chart · Graph차트 · 그래프
- Dashboard대시보드
- Skeleton vs Placeholder Image스켈레톤 vs 플레이스홀더 이미지
06 Interaction & states 19
How things react when pressed, or when the pointer is over them.
- State상태
- Hover호버
- Focus포커스
- Active · Pressed액티브 · 프레스드
- Selected셀렉티드
- Disabled디스에이블드
- Read-only리드온리
- Transition트랜지션
- Animation애니메이션
- Easing이징
- Micro-interaction마이크로 인터랙션
- Drag & Drop드래그 앤 드롭
- Swipe스와이프
- Long Press롱프레스
- Pull to Refresh풀 투 리프레시
- Parallax패럴랙스
- Debounce · Throttle디바운스 · 스로틀
- Optimistic UI옵티미스틱 UI
- Lazy Loading지연 로딩
07 Visual & style 17
The words for spacing, type, colour and shadow.
- Whitespace여백
- Padding vs Margin패딩 vs 마진
- Typography타이포그래피
- Hierarchy위계
- Type Scale타입 스케일
- Line Height행간 · 라인 하이트
- Letter Spacing자간 · 레터 스페이싱
- Color Palette컬러 팔레트
- Primary · Semantic Color프라이머리 · 시맨틱 컬러
- Contrast Ratio명도 대비
- Dark Mode다크 모드
- Elevation · Shadow엘리베이션 · 그림자
- Border Radius보더 레디우스
- Opacity오퍼시티 · 투명도
- Icon Set아이콘 세트
- SVG vs Bitmap (PNG/JPG)SVG vs 비트맵
- Image Scale Factor@2x · @3x
08 Responsive & devices 12
How a screen changes between desktop and mobile.
- Responsive반응형
- Adaptive적응형
- Breakpoint브레이크포인트
- Viewport뷰포트
- Mobile First모바일 퍼스트
- Desktop · MobilePC · MO
- Safe Area세이프 에어리어
- Touch Target터치 타깃
- Viewport Units (vw / vh)뷰포트 단위
- px · rem · %px · rem · %
- Cross Browsing크로스 브라우징
- Native · Web · Hybrid App네이티브 · 웹 · 하이브리드 앱
09 UX process & deliverables 32
The work before any screen is drawn, and the documents you hand over.
- Information ArchitectureIA · 정보구조
- Sitemap사이트맵
- Depth뎁스
- User Flow유저 플로우
- Wireframe와이어프레임
- Mockup목업
- Prototype프로토타입
- Screen Definition · Storyboard화면설계서 · 스토리보드
- Description디스크립션
- Design Draft시안
- Persona페르소나
- Customer Journey Map고객 여정 지도
- Pain Point페인 포인트
- Usability Test사용성 테스트
- Heuristic Evaluation휴리스틱 평가
- A/B TestA/B 테스트
- Funnel퍼널
- CVR · Bounce Rate · Retention전환율 · 이탈률 · 리텐션
- Minimum Viable ProductMVP
- Affordance어포던스
- Signifier시그니파이어
- Mental Model멘탈 모델
- Cognitive Load인지 부하
- Hick's Law힉의 법칙
- Fitts's Law피츠의 법칙
- Jakob's Law제이콥의 법칙
- Gestalt Principles게슈탈트 원리
- F Pattern · Z PatternF 패턴 · Z 패턴
- UX Writing · MicrocopyUX 라이팅 · 마이크로카피
- Onboarding온보딩
- Coach Mark코치마크
- Dark Pattern다크 패턴
10 Design systems & handoff 11
Making reusable rules and passing them to development.
- Design System디자인 시스템
- Style Guide · UI Kit스타일 가이드 · UI 킷
- Component컴포넌트
- Variant베리언트
- Instance · Main Component인스턴스 · 메인 컴포넌트
- Design Token디자인 토큰
- Atomic Design아토믹 디자인
- Auto Layout오토 레이아웃
- 8pt Grid8pt 그리드
- Handoff핸드오프
- Design QA디자인 QA
11 Accessibility (a11y) 10
The minimum needed for anyone to be able to use it.
- Accessibility접근성 · a11y
- Web Content Accessibility GuidelinesWCAG · KWCAG
- Screen Reader스크린 리더
- Alt Text대체 텍스트
- Semantic Markup시맨틱 마크업
- Accessible Rich Internet ApplicationsARIA
- Focus Ring포커스 링
- Tab Order탭 오더
- Keyboard Navigation키보드 내비게이션
- Not Color Alone색만으로 구분하지 않기
12 Dev terms for client work 16
Not design words, but ones you cannot afford to miss in a meeting.
- Publishing · Markup퍼블리싱 · 마크업
- Frontend · Backend프론트엔드 · 백엔드
- Application Programming InterfaceAPI
- CMS · AdminCMS · 어드민
- Static · Dynamic Page정적 · 동적 페이지
- Single Page ApplicationSPA
- Staging · Production스테이징 · 프로덕션
- Deploy배포
- Quality AssuranceQA
- Issue · Ticket이슈 · 티켓
- Requirements Document요구사항 정의서
- Scope Creep스코프 크립
- Dependency디펜던시
- Resource리소스
- Design Spec가이드
- Web vs App Estimate반응형 웹 vs 네이티브 앱 견적
4 deep dives
01 Why "just add a popup" is dangerous 6 steps
Popup, modal, dialog, alert — the relationship between four words, settled in one go.
- The problem
- Modal = a property
- Dialog = the thing
- Alert vs confirm
- The three notices
- How to ask
02 Which input control should you use 6 steps
The answer follows from the number of options and when it saves.
- How many options
- Now vs on save
- One vs many
- Where errors go
- Decision table
- How to ask
03 Why one button needs six states 5 steps
The thing most often missing from a mockup — state.
- Feel the difference
- The six states
- No hover on mobile
- The disabled trap
- How to ask
04 What happens as you narrow the window 5 steps
One set of mockups does not finish it. Narrow the width yourself and see.
- Try it yourself
- Breakpoints
- Responsive vs adaptive
- Mobile traps
- How to ask