[사용하기 쉬운 모바일 앱을 위한]
모바일 앱 디자인 패턴
- 원서명Mobile Design Pattern Gallery: UI Patterns for Mobile Applications (ISBN 9781449314323)
- 지은이테레사 닐(Theresa Neil)
- 옮긴이박정아, 임정화
- ISBN : 9788960776760
- 26,000원
- 2015년 02월 27일 펴냄 (절판)
- 페이퍼백 | 288쪽 | 188*235mm
- 시리즈 : 모바일 프로그래밍, UX 프로페셔널
판매처
- 현재 이 도서는 구매할 수 없습니다.
책 소개
요약
모바일 애플리케이션을 만들고자 하는 누구나를 위한 책이다. 모바일 애플리케이션을 사용하기 쉽게 만들려면 어떻게 디자인해야 할까? 이 책은 풍부한 실제 사례 중심으로 간단하게 상황에 맞는 디자인과 구성 패턴을 찾을 수 있도록 구성하여 모바일 애플리케이션 디자인 고민 해결에 도움이 될 수 있다. 주요 모바일 애플리케이션의 디자인 패턴을 분석해 앱들이 구성된 이유에 대해 설명하고, 어떤 상황에 이런 디자인 패턴을 활용하면 좋을지 제안한다.
이 책에 쏟아진 찬사
"이 책은 아이디어가 필요할 때 휘리릭 넘겨보기 좋은, 최고로 간편한 책이다.
- 빌 스콧(Bill Scott) / 페이팔(Paypal)의 시니어 웹 개발 디렉터
“환상적인 책이다!”
- 에린 말론(Erin Malone) / 탠저블UX(Tangible UX)의 파트너
"이 책에 대한 깊은 고마움을 감사하다는 말 외에 달리 표현할 길이 없다. 이 책은 기존 앱을 다시 디자인하는 작업에 훌륭한 길잡이가 되어 줬다!"
- 아가타 준(Agatha June) / UX 디자이너
추천의 글
이름을 아는 것은 이해를 위한 첫걸음이다.
나의 5살짜리 아들은 다른 아이들과 마찬가지로 구름 보는 것을 참 좋아한다. 아들은 얼마 전 구름의 종류에 따라 이름이 다르다는 사실을 알고는 거기에 빠져들어 구름 이름을 외우기 시작했다. 새털구름, 뭉게구름, 안개구름, 면사포구름, 소나기구름, 높층구름, 렌즈구름... 이 정도가 그중 내가 아는 전부다. ‘봉우리 뭉게구름’이란 건 전에 들어본 적도 없다.
이제 아들은 하늘을 보면서 내게 구름의 이름을 말해줄 수 있다. 그뿐만 아니라 전에 비해 아주 미묘한 부분까지 알아차린다. 아들은 구름의 종류를 질감, 색깔, 높이, 움직임 등 외형적 특징으로 구별해서 익혔다(물론 구별하기가 항상 쉽진 않지만, 아들에게는 크게 문제되지 않는다). 또한 어떤 구름이 비를 뿌릴지, 뿌리지 않을지 어느 정도 정확하게 예측할 수 있다.
어린 미취학 아동들이 그렇듯이, 아들은 구름에 대한 지식을 큰 그림을 분석하는 데 사용하기도 한다. “면사포구름은 온난전선을 의미하는 것 같아요.” 또는 “봉우리 뭉게구름이 소나기구름으로 변하고 있어요. 곧 폭풍이 올 것 같아요.”라고 말한다.
무엇보다 아들은 구름이름을 익히는 일을 즐긴다. 어린 아이들은 자기가 사랑하는 것에 이름 붙이는 일을 정말 좋아하는 듯하다. 구름, 공룡, 곤충, 차, 인형, 영화 캐릭터, 무엇이든 말이다. 아이들의 상상력은 좌뇌의 지식에 제한받지 않는 게 분명하다. 아들은 '뭉게구름' 속에서 궁전, 오리, 꽃양배추를 본다.
우리는 이렇게 자라왔다. 이는 이 책의 주제인 모바일 인터페이스 디자인에도 마찬가지로 적용된다. 인터페이스의 패턴을 인식하고 이름을 알면, 인터페이스를 더 잘 ‘보게’ 되고 더 깊숙이 알게 된다. 뇌는 우리가 찾는 것에 맞춰지기 때문이다. 인터페이스 패턴이 어떻게 동작하는지 알기 때문에 소프트웨어의 동작을 예측할 수 있다. 사람들에게 우리가 보는 것을 새로운 표현으로 이야기해줄 수 있다.
그러면 이러한 패턴들을 어떻게 배울 것인가?
내 아들이 구름에 대해 배울 때 가장 좋은 도구는 그림, 아주 많은 그림이었다. 책과 웹사이트에 있는 카탈로그 그림들을 보면서 구름의 차이, 때로는 말로 표현하기도 어려운 미묘한 차이들을 익혔다.
마찬가지로, 인터페이스 패턴을 배우는 가장 좋은 방법은 시각적인 예제들을 보는 것이다. 나는 어휘를 사랑하는 작가이기 때문에, 패턴이 무엇이고, 어떻게 선택하는지 그리고 패턴들 간의 차이가 무엇인지 가능한 범위 내에서 할 수 있는 한 정의해보려고 한다. 그러나 단순히 기술적으로 패턴을 알 필요가 있는 인터페이스 디자이너들에게는 이런 어휘들이 모두 필요하지 않을 것이다. 충분한 설명을 통해 각 패턴에 대한 지식을 얻고, 선별된 실제 사용 사례들을 통해 지식을 강화하고 싶을 것이다.
이 책의 수많은 패턴 그림은 테레사 닐(Theresa Neil)이 함께 작업했다. 나로서는 엄두도 낼 수 없는 이 작업에 어느 정도의 노고가 들어갔는지 상상하기 어렵다. 수많은 모바일 앱을 리뷰하고, 그중에서 좋은 앱을 골라 스크린샷을 모으는 일은 보통 일이 아니다.
이 책은 모바일 인터페이스 디자이너에게 보물단지다. 한 번에 다 읽는 것도 좋겠지만, 예제들을 활용해 자신의 디자인을 향상해보기를 권한다.
■ 예제 중 잘 된 것을 골라보고, 현재 디자인하고 있는 상황에 맞춰 그 이유를 파악해보라.
■ 디자인 영감을 얻기 위한 소스로 사용하라. 이 책의 스크린샷은 패턴뿐만 아니라 아이콘 디자인 또는 색 사용 등 디자인 측면에서도 훌륭하다.
■ 앱에 대한 지식을 넓히는 데 사용할 수 있다. 모든 앱을 일일이 다운로드하고 사용해보는 수고 없이 기존 앱들이 어떻게 작동하는지 알 수 있다.
어쩌면 사용하고 있는 모바일 앱에서 자신만의 패턴 예제를 찾아낼 수도 있다. 일단 패턴의 이름을 알고 나면 그 패턴을 사용할 수밖에 없으리라고 장담할 수 있다. 아들이 알려준 덕분에 이제 나는 '봉우리 뭉게구름'을 알고 있다. 아, 그동안 그것도 모르고 어떻게 살았을까?
모쪼록 즐기길!
- 제니퍼 티드웰(Jenifer Tidwell)
이 책에서 다루는 내용
■ 내비게이션: 기본 내비게이션과 보조 내비게이션 패턴 배우기
■ 폼: 업계에 널리 퍼진 나쁜 폼 디자인 습관 타파하기
■ 표와 리스트: 가장 중요한 정보만 보여주기
■ 검색, 정렬, 필터: 기능을 사용하기 쉽게 만들기
■ 도구: 직접 인터랙션하는 것처럼 만들기
■ 차트: 기본 차트 디자인의 모범 사례 배우기
■ 유도: 한 번 사용해보게 하고, 기능을 발견하도록 유도하기
■ 컨트롤 및 피드백: 기능 수행을 도와주고 적절한 피드백 제공하기
■ 도움말: 도움말 페이지를 좀 더 작은 폼 요소로 통합하기
이 책의 대상 독자
이 책은 모바일 애플리케이션을 만드는 제품 관리자, 디자이너, 개발자들을 위한 책이다. 회사에서 모바일 전략을 만들 때, 모범 디자인 사례를 찾아내기란 쉬운 일이 아니다. 특히 다양한 운영체제를 고려하면 더욱 어렵다. 간단한 아이폰 애플리케이션을 비롯한 어떤 운영체제에서든지, 이 책에 나오는 패턴들은 쉽지 않은 디자인 문제에 대한 해법이 돼줄 것이다.
목차
목차
- 01장 내비게이션
- __기본 내비게이션 패턴
- ____스프링보드
- ____리스트 메뉴
- ____탭
- ____갤러리
- ____대시보드
- ____메타포
- ____대형 메뉴
- __보조 내비게이션
- ____페이지 회전판
- ____이미지 회전판
- ____리스트 확장
- 02장 폼
- __로그인
- __등록
- __결제
- __계산
- __검색 폼
- __멀티스텝
- __긴 폼
- 03장 표와 리스트
- __기본 표
- __제목 없는 표
- __열고정
- __개요 + 데이터
- __행묶음
- __계단식 리스트
- __시각적 표지를 포함한 표
- __편집가능 표
- 04장 검색, 정렬, 필터
- __검색
- ____검색 기능
- ____자동완성형 검색
- ____동적 검색
- ____범위 검색
- ____최근 검색
- ____검색 폼
- ____검색 결과/결과 보기
- __정렬 패턴
- ____화면 정렬
- ____정렬 옵션 셀렉터
- ____정렬 폼
- __필터
- ____화면 필터
- ____필터 서랍
- ____필터 대화상자
- ____필터 폼
- 05장 도구
- __툴바
- __옵션 메뉴
- __기능 호출 버튼
- __컨텍스트 도구
- __인라인 기능
- __멀티상태 버튼
- __대량 기능
- 06장 차트
- __필터 포함 차트
- __미리보기 창
- __개요 + 데이터
- __데이터포인트 상세 정보
- __상세 탐색
- __확대
- __피벗 테이블
- __스파크라인
- 07장 유도
- __대화상자
- __팁
- __기능 투어
- __비디오 데모
- __투명화
- __처음 사용해보기
- __노출 지속화
- __발견가능성
- 08장 피드백과 어포던스
- __피드백
- ____에러 메시지
- ____확인하기
- ____시스템 상태
- __어포던스
- ____탭(누르기)
- ____플리킹(밀어 넘기기)
- ____드래그(끌기)
- 09장 도움말
- __사용법
- __컨닝페이퍼
- __기능 투어
- 10장 안티패턴
- __참신한 디자인 안티패턴
- __메타포 부조화 안티패턴
- ____컨트롤 부조화
- ____아이콘 부조화
- ____멘탈 모델 부조화
- __바보 상자
- __정크 차트
- __버튼 바다
- 부록
- __부가 정보
- __내비게이션
- ____기본 내비게이션
- ____보조 내비게이션
- __폼
- __표
- __검색
- __정렬 패턴
- __필터
- __도구
- __차트
- __유도
- __피드백
- __어포던스