통합 요약노트
Ch.17 UI 패턴의 어원과 역사
24개 UI 패턴의 이름은 어디서 왔을까? 실제 사물 vs UI 비교로 배운다
이 챕터의 내용
Accordion — 악기에서 UI로
벨로우즈(주름 부분)의 펼치고 접는 동작이 그 답입니다.
1829년 비엔나, Cyril Demian이 특허를 냅니다
독일어 Akkord — 화음이라는 뜻입니다. 아코디언의 핵심은 벨로우즈(bellows) — 주름 부분. 당기면 펼쳐지고, 밀면 접힙니다.
이 '펼치고 접는' 동작이 그대로 UI가 됩니다
Tab — 파일 캐비닛에서 UI로
라틴어 tabella(작은 판)에서 시작된 여정을 따라가봅시다.
라틴어 tabella — '작은 판' 폴더 위에 돌출된 라벨입니다
1990년대 데스크톱 GUI에서 등장. 2007년 Jakob Nielsen이 가이드라인 정립. 돌출 라벨을 잡아당기는 것 → 상단 라벨을 클릭하는 것
UI Tab의 이름은 키보드의 Tab 키에서 유래했다
Card — 명함에서 UI로
라틴어 charta(파피루스 잎)에서 시작된 카드의 여정.
라틴어 charta (파피루스 잎) 한 장 = 한 단위 정보
그림자(elevation) = 테이블 위에 놓인 카드의 물리적 존재감
Toggle — 전등 스위치에서 UI로
답은 스큐어모피즘 — 현실을 디지털로 모방하는 디자인 철학.
1884년 Holmes 퀵-브레이크 스위치 레버를 올리면 ON, 내리면 OFF
스큐어모피즘: 현실 사물의 외형과 동작을 디지털에 모방
Chip/Tag — 토큰에서 UI로
2004년 폭소노미에서 Tag가, Material Design에서 Chip이 탄생합니다.
Drawer — 서랍에서 UI로
필요할 때만 열고, 쓰지 않을 때는 숨기는 것.
draw (당기다) → drawer (당겨서 여는 것) Google I/O 2013 공식 패턴화
Carousel — 회전목마에서 UI로
carosello(작은 전투) → 회전목마 → 웹 UI.
Badge — 배지에서 UI로
2007년 iPhone의 빨간 원 알림.
Pagination — 책에서 웹으로
답은 느린 인터넷. 전부 한 번에 보여줄 수 없었으니까.
Footer — 인쇄에서 웹으로
HTML5 `<footer>` 시맨틱 요소로 공식화.
위치가 곧 이름 — Header(머리), Footer(발), Sidebar(옆)
Hero — 영화에서 웹으로
페이지에서 가장 눈에 띄는 최상단 영역 = Hero.
Sidebar — 신문에서 웹으로
WordPress (2005)의 위젯 사이드바가 결정적 전환점.
Dropdown — 아래로 떨어지다
1970년대 Xerox에서 시작된 풀다운 메뉴의 여정.
Popover — 톡 튀어나오다
콘텐츠 위에 톡 나타나는 작은 인터랙티브 뷰.
Tooltip: hover에 반응, 텍스트만 Popover: click에 반응, 버튼/링크 포함 가능 Popover는 Tooltip의 '상위 호환'입니다.
Toast — 토스터에서 UI로
Toast.makeText() — Android의 가장 유명한 API.
Spinner — 회전의 역사
30년간 이어진 '뭔가 진행 중' 시각 신호의 역사.
Tooltip — 도구에 대한 조언
Microsoft의 ToolTip이 업계 표준이 됩니다.
Skeleton — 뼈대에서 UI로
같은 시간이라도 체감 속도가 다릅니다.
Breadcrumb — 동화에서 UI로
경로 표시 내비게이션의 탄생.
Hamburger ☰ — 40년의 여정
16×16px에 메뉴 목록을 표현해야 했던 디자이너의 이야기.
Avatar — 신의 강림에서 프로필까지
1985년 게임 디자이너가 플레이어 캐릭터에 이 이름을 붙이면서.
Modal — 모드를 바꾸다
Alan Kay, Larry Tesler가 설계한 다이얼로그 박스.
Navbar — 항해에서 UI로
1990년대 브라우저 주소창에서 시작된 여정.
Stepper — 계단을 오르듯
'마법사'라 불리던 것이 Stepper로 진화했습니다.
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 코스 시작하기