UI 패턴의 어원과 역사
Accordion · Tab · Card · Modal · Toast · Hamburger 등 24개 UI 패턴의 이름은 어디서 왔을까?
매일 쓰는 UI 패턴의 이름이 악기, 가구, 동화, 산스크리트어에서 왔다는 걸 알면, 패턴의 본질을 직관적으로 이해하고 올바르게 사용할 수 있다.
레슨 단위로 펼쳐 보기
- TOPIC · 17 · 01
Accordion
아코디언 악기처럼 접었다 펴는 UI.
- TOPIC · 17 · 02
Tab
파일 캐비닛의 색인 탭에서 유래한 UI.
- TOPIC · 17 · 03
Card
명함/카드에서 유래한 독립된 정보 컨테이너.
- TOPIC · 17 · 04
Toggle
전등 스위치의 on/off에서 유래한 UI.
- TOPIC · 17 · 05
Chip / Tag
토큰/라벨에서 유래한 작은 정보 태그.
- TOPIC · 17 · 06
Drawer
서랍처럼 옆에서 슬라이드로 나오는 패널.
- TOPIC · 17 · 07
Carousel
회전목마처럼 콘텐츠가 돌아가는 UI.
- TOPIC · 17 · 08
Badge
경찰 배지/메달에서 유래한 상태 표시.
- TOPIC · 17 · 09
Pagination
책의 쪽 매기기에서 유래한 UI.
- TOPIC · 17 · 10
Footer
인쇄물 하단 각주에서 유래한 UI.
- TOPIC · 17 · 11
Hero
영화/무대의 주인공 이미지에서 유래한 UI.
- TOPIC · 17 · 12
Sidebar
신문의 사이드 기사에서 유래한 UI.
- TOPIC · 17 · 13
Dropdown
'아래로 떨어지다' — 선택 시 목록이 펼쳐지는 UI.
- TOPIC · 17 · 14
Popover
'톡 튀어나오다' — 호버/클릭 시 나타나는 작은 오버레이.
- TOPIC · 17 · 15
Toast
토스터에서 빵이 올라오듯 알림이 올라오는 UI.
- TOPIC · 17 · 16
Spinner
실잣는 물레에서 유래한 로딩 표시.
- TOPIC · 17 · 17
Tooltip
도구(tool)에 대한 조언(tip).
- TOPIC · 17 · 18
Skeleton
콘텐츠 로딩 전 뼈대(골격)를 보여주는 UI.
- TOPIC · 17 · 19
Breadcrumb
헨젤과 그레텔의 빵 부스러기에서 유래한 경로 표시.
- TOPIC · 17 · 20
Hamburger ☰
Xerox Star(1981)에서 시작된 3줄 아이콘의 40년 역사.
- TOPIC · 17 · 21
Avatar
산스크리트어 '아바타라'(신의 강림)에서 프로필 아이콘까지.
- TOPIC · 17 · 22
Modal
라틴어 'modus'(모드)에서 유래, 현재 모드를 바꾸는 대화 상자.
- TOPIC · 17 · 23
Navbar
항해(navigation)에서 유래한 방향 안내 바.
- TOPIC · 17 · 24
Stepper
계단을 한 칸씩 오르듯 단계별 진행 표시.
