UI 패턴 원칙 도서

UI 패턴과 원칙을 이해하는 것은 건축가가 구조를 이해하는 것과 같이 기본이면서도 중요하다. 패턴과 원칙은 일반적인 디자인 문제에 대한 광범위한 해결 방안을 제공하며, UI 기획자와 디자이너 모두에게 공통 언어 역할을 한다.

위승용(uxdragon)이 2013년 정리한 20권 이상의 목록은 웹·모바일·정보 구조·콘텐츠 등 여러 영역을 아우른다. 국내 번역 출판 기준으로 선별된 이 도서들은 pxd 라이브러리에도 구비되어 있다.

목록보다 앞선 2011년, 위승용은 pxd 내부 "UI 스터디" 모임에서 목록에 포함된 About Face 3(『퍼소나로 완성하는 인터랙션 디자인』)을 챕터별로 읽고 발표하는 시리즈를 진행했는데, 그중 14장 "시각 인터페이스 디자인" 발표 자료를 블로그에 공유하기도 했다. 이는 도서 목록이 개인의 독서 추천에 그치지 않고, 실제로 구성원들이 함께 읽고 토론하는 사내 스터디 교재로 활용됐음을 보여주는 사례다.

시리즈에서 가장 이른 시기의 기록은 1부 목표 지향 디자인 챕터를 다룬 2장 발표 "구현 모델과 멘탈 모델의 전쟁"(김금룡, 2011-02-08)이다. 발표 슬라이드 자체는 짧았지만, 게시물에는 18개의 댓글이 달리며 시리즈 전체에서 가장 활발한 토론이 오갔다. 첫 댓글을 단 mango01이 "인터페이스는 구현 모델이 아닌 사용자 멘탈 모델에 맞게 디자인해야 한다", "사용성을 크게 향상시킬 때만 기존 익숙한 디자인을 변경해야 한다"는 책의 핵심 문장을 인용하며 멘탈 모델을 빠르게 파악하는 방법, 구현 모델에 집착하는 개발자·클라이언트를 설득하는 법, '리얼 메타포'와 '구식 디자인'의 경계, 디지털 달력 스크롤 UI가 정말 혁신인지 등 5가지 논의 질문을 던지자, songyejin·박기혁·kyuheeee·허클베리준·엄청난동동이·your beloved·hhh_pxd·노미연·Leesw03·uxdragon 등 10명 넘는 구성원이 순위를 매기듯 댓글을 이어가며 각자의 프로젝트 경험과 해석을 공유했다. uxdragon은 애플 HIG가 메타포 활용을 권장하는 것과 책이 메타포를 '구식 디자인'의 제약 요인으로 지적하는 것 사이의 모순을 짚었고, hhh_pxd는 이 장의 논의가 "리서치와 퍼소나의 개념이 더욱 중요하게 생각되는" 계기가 되었다고 밝혔다. 시리즈의 다른 챕터들이 발표자 개인의 질문 제시에 그쳤던 것과 달리, 2장만큼은 다수 참여자의 답변까지 함께 기록된 예외적인 사례다.

이 시리즈의 8장 발표 "훌륭한 디자인의 탄생 - 디자인 원칙과 패턴"(2011-07-11, 슬라이드 작성일 2011-06-26)은 14장 발표보다 앞서 진행된 회차로, 슬라이드쉐어 발표자료 공유와 함께 스터디 참여자들이 논의할 6가지 질문을 함께 제시했다. 질문은 디자인 원칙이 추구하는 목적, UI/GUI 디자인을 하며 갖게 되는 디자인 가치관, 사용자가 처한 상황을 개선한 실제 프로젝트 사례, 개발·마케팅·디자인 팀 간 다른 관점을 통일해나간 경험, 디자인 패턴 추천 도서 등을 포함했다. 특히 "사내에서 인터랙션 디자인 패턴 라이브러리를 만들어보는 것은 어떨까"라는 질문은, 훗날 pxd가 디자인 시스템 구축을 실무 과제로 다루게 되는 흐름의 초기 문제의식을 보여주는 대목이다. 8장 발표 9일 뒤인 10장 "디자인 오케스트라"(2011-07-20, 김금룡 발표) 회차는 "스터디 자료 공유합니다"라는 한 줄 설명과 슬라이드 이미지 한 장만 남아, 시리즈 안에서도 회차별 텍스트 분량 편차가 컸음을 보여주는 사례다. 이어진 11장 "인터페이스 세금"(2011-08-01) 발표도 같은 형식으로 슬라이드쉐어 자료가 공유됐는데, 이 회차는 별도의 논의 질문이나 해설 텍스트 없이 슬라이드 자료만 공유된 형태로, 시리즈가 매 챕터 동일한 분량의 텍스트를 남기지는 않았음을 보여준다. 뒤이은 12장 "끝내주는 행동 디자인"(유리.Hawer, 2011-08-19) 발표도 슬라이드 자료만 공유됐을 뿐 해설 텍스트나 댓글이 전혀 없어, 시리즈 후반부로 갈수록 이런 placeholder성 회차가 흔해졌음을 보여준다.

이 스터디는 2012년에도 이어졌다. "2012 UI 스터디"라는 이름으로 재개된 모임의 여섯 번째 시간(2012-04-04)은 김동후가 발표를 맡아 About Face 3 3부 "인터랙션 디자인 백과사전" 중 15장 "검색과 탐색의 경계"(Rethinking Files and Save 앞 장)와 16장 "되살리기"(Getting Out of Trouble)를 다뤘다. 15장에서는 Searching(검색)과 Finding(탐색)의 개념 차이, 그리고 이를 뒷받침하는 저장(Storage)·추출(Retrieval) 시스템을 소프트웨어 적용 사례 중심으로 살폈고, 16장에서는 Undo 기능이 사용자에게 주는 멘탈 모델과 다양한 구현 사례를 비교했다. 발표 후 이어진 사내 코멘트에서는 사내 서비스 '부엉이 쪽지' 앱에 나온 Undoable UI 사례를 더 분석해볼 만하다는 의견이 나왔는데, 이는 스터디에서 다룬 원론적 패턴을 실제 사내 프로젝트에 곧바로 대응시켜보려는 시도를 보여준다. 일곱 번째 시간(2012-04-25 진행, 2012-05-03 공유)은 kyuheeee가 발표를 맡아 같은 3부의 17장 "저장 인터랙션의 재발견"(Rethinking Files and Save)과 18장 "똑똑한 정보 입력"(Improving Data Entry)을 다뤘다. 발표자는 이 회차를 "저장 인터랙션과 정보 입력에 대해 고민해 보는 좋은 시간"이었다고 요약했는데, 2011년 1부(목표 지향 디자인 원칙) 챕터 위주였던 스터디가 이듬해 3부의 구체적 인터랙션 패턴 챕터로까지 진도를 이어갔음을 보여준다.

2021년 위승용은 목록에 포함된 Designing interfaces(제니퍼 티드웰)의 3판 번역서 사용자를 끌어들이는 UX/UI의 비밀에 대한 독후감을 남겼다. 2007년 초판 이후 아이폰 등장으로 디스플레이 환경이 데스크톱·모바일·패드·워치·키오스크까지 촘촘히 확장된 변화에 맞춰, 3판은 모바일 디스플레이를 다루는 챕터가 새로 추가되고 심미적 디자인 관련 내용이 대폭 보강됐다. 위치 인식·카메라·음성 인식·제스처 입력·햅틱 피드백처럼 데스크톱에는 없는 모바일 고유 기능을 활용한 패턴들이 최신 사례로 갱신된 점이 특징이다. 리뷰는 이 책을 "UI 패턴과 활용법을 명확히 알고 기획에 적용해야 하는" UI 디자이너의 필수 참고서로 꼽으면서도, 스크린샷의 색 재현을 위한 매끄러운 재질의 종이가 페이지 두께 감소와 맞물려 밑줄 필기나 책장 넘김이 뻑뻑해지는 점을 아쉬운 부분으로 지적했다. 번역은 pxd의 박재현, 한상택이 맡았다.

이보다 앞서 2014년 이재용은 루크 로블르스키의 모바일 우선주의(Mobile First, 원서 2011) 독후감을 남겼다. PC 웹 중심 설계에서 모바일 중심 설계로 전환해야 하는 이유와, 모바일로 넘어갈 때 유의할 원칙을 다룬 책으로, pxd처럼 모바일 작업이 많은 조직의 디자이너에게는 새로운 내용이 적을 수 있지만 스타트업 관계자·초보 UI 디자이너에게는 여전히 유효하다고 평가했다. 예컨대 애플(44×44pt)·마이크로소프트(9mm)·MIT(10~14mm)처럼 기관마다 권장하는 터치 대상 크기가 제각각이지만, 더 중요한 원칙은 '터치 대상과 터치 영역의 크기가 같을 필요는 없다'는 것 — 버튼의 시각적 크기가 실제 터치 가능 영역의 50% 이하로만 내려가지 않으면 된다는 지적이다. 책에서 다룬 라벨-플레이스홀더 논쟁(플레이스홀더는 공간을 줄이지만 '이미 입력된 것 같은' 착각을 준다는 약점)을 예로 들며, 37시그널즈 베이스캠프처럼 입력전·포커스입력전·입력후 세 단계로 나눠 절충한 사례도 소개했다. 이재용은 모바일의 작은 화면을 제약이 아닌 '사용자가 태스크에 집중할 기회'로 재해석해야 한다는 저자의 관점에 공감하며 리뷰를 맺는다.

핵심 내용

  • 2011~2012년 pxd 내부 "UI 스터디" 모임이 About Face 3를 교재로 진행한 챕터별 발표 시리즈 (2장 "구현 모델과 멘탈 모델의 전쟁"(김금룡) — 시리즈 중 가장 활발한 댓글 토론, 8장 "훌륭한 디자인의 탄생", 10장 "디자인 오케스트라", 11장 "인터페이스 세금", 12장 "끝내주는 행동 디자인"(유리.Hawer) — 댓글 없는 placeholder성 회차, 14장 "시각 인터페이스 디자인", 15·16장 "검색과 탐색의 경계"·"되살리기"(김동후), 17·18장 "저장 인터랙션의 재발견"·"똑똑한 정보 입력"(kyuheeee) 등)
웹·일반 UI 패턴
  • 웹 폼 디자인 (루크 로블르스키, 인사이트, 2009) — 입력 폼의 레이아웃·레이블·에러 처리 원칙
  • 리치 인터페이스 디자인 (빌 스콧·테레사 닐, 인사이트, 2010) — AJAX 시대의 인터랙티브 UI 패턴
  • 소셜 인터페이스 디자인 (크리스천 그림리시·에린 멀론, 인사이트, 2011) — 소셜 네트워킹 UI 패턴
  • 검색 패턴 (제프 칼렌더·피터 모빌, 한빛미디어, 2010) — 검색 UX의 12가지 패턴
  • 웹사이트 해부하기 (로버트 후크만·제라드 스풀, 인사이트, 2012) — 실제 사이트 분석 기반 UI 설계 인사이트
  • Designing web navigation (제임스 콜백, 한빛미디어, 2008) — 웹 내비게이션 구조 설계
  • 웹 스타일 가이드 (사라 호튼·패트릭 린치, 인사이트, 2011) — 웹 콘텐츠 구조·타이포그래피·접근성
  • The design of sites (더글러스 벤 듀인 외, 에이콘출판사, 2011) — 사이트 디자인의 패턴 카탈로그
UX 원칙 종합
  • Designing interfaces (제니퍼 티드웰, 한빛미디어, 2007) — GUI 컴포넌트·레이아웃·내비게이션 패턴의 고전. 3판은 사용자를 끌어들이는 UX/UI의 비밀(박재현·한상택 번역, 2021)로 번역 출간되며 모바일 디스플레이 챕터가 추가됨
  • 경험 디자인의 요소 (제시 제임스 가렛, 한솜미디어, 2006) — 전략·범위·구조·스켈레톤·표면 5단계 프레임워크
  • 퍼소나로 완성하는 인터랙션 디자인 About Face 3 (앨런 쿠퍼 외, 에이콘출판사, 2010) — 목표 지향 디자인 원칙의 정수
  • UX 디자인 7가지 비밀 (박지수·김현, 안그라픽스, 2013) — 국내 저자의 UX 원칙 정리
  • 오래가는 UX 디자인 (반준철, 한빛미디어, 2013) — 시간이 지나도 유효한 UX 설계 철학
  • 콘텐츠 UX 디자인 (제니스 레디쉬, 위키북스, 2011) — 사용자 맥락에 맞는 콘텐츠 구조화
  • 모든 기획자와 디자이너가 알아야 할 사람에 대한 100가지 사실 (수잔 웨인쉔크, 위키북스, 2012) — 인지·행동심리학 기반 100가지 설계 원칙
  • Human Computer Interaction 개론 (김진우, 안그라픽스, 2012) — HCI 이론의 체계적 입문
모바일 UI 패턴
  • 아이폰 앱 디자인 정석 (조시 클라크, 한빛미디어, 2012) — iOS 앱 UI 패턴과 제스처 설계
  • 모바일 디자인 전략 (조셉 카트먼·리차드 팅, 위키북스, 2011) — 모바일 맥락 기반 UX 전략
  • 모바일 애플리케이션 UI 라이브러리 (노주환, 멘토르출판사, 2011) — 모바일 UI 컴포넌트 참고서
  • UI디자인을 잘 하기 위한 테크닉 80 (노주환, 비비컴, 2002) — 절판, 초기 UI 패턴 국내 저작
  • 모바일 우선주의 Mobile First (루크 로블르스키, 원서 2011) — PC 중심에서 모바일 중심으로 전환해야 하는 이유, 터치 타겟 크기·라벨-플레이스홀더 논쟁 등 모바일 UI 설계 원칙

관련 개념

출처

최종 업데이트: 2026-09-07 | 출처 11개