Top

[사용하기 쉬운 모바일 앱을 위한]
모바일 앱 디자인 패턴

  • 원서명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)

이 책에서 다루는 내용

■ 내비게이션: 기본 내비게이션과 보조 내비게이션 패턴 배우기
■ 폼: 업계에 널리 퍼진 나쁜 폼 디자인 습관 타파하기
■ 표와 리스트: 가장 중요한 정보만 보여주기
■ 검색, 정렬, 필터: 기능을 사용하기 쉽게 만들기
■ 도구: 직접 인터랙션하는 것처럼 만들기
■ 차트: 기본 차트 디자인의 모범 사례 배우기
■ 유도: 한 번 사용해보게 하고, 기능을 발견하도록 유도하기
■ 컨트롤 및 피드백: 기능 수행을 도와주고 적절한 피드백 제공하기
■ 도움말: 도움말 페이지를 좀 더 작은 폼 요소로 통합하기

이 책의 대상 독자

이 책은 모바일 애플리케이션을 만드는 제품 관리자, 디자이너, 개발자들을 위한 책이다. 회사에서 모바일 전략을 만들 때, 모범 디자인 사례를 찾아내기란 쉬운 일이 아니다. 특히 다양한 운영체제를 고려하면 더욱 어렵다. 간단한 아이폰 애플리케이션을 비롯한 어떤 운영체제에서든지, 이 책에 나오는 패턴들은 쉽지 않은 디자인 문제에 대한 해법이 돼줄 것이다.

저자/역자 소개

저자 서문

우리는 최근 새로운 모바일 프로젝트를 시작했고, 노련한 모바일 디자이너 모두가 각자 프로젝트에 참여하고 있는 상황이었다. 신입 디자이너를 가르칠 수 있는 시간은 불과 일주일도 채 되지 않았다. 그래서 나는 수많은 스크린샷으로 좋은 디자인과 나쁜 디자인을 설명하는 퀵 튜토리얼을 만들었고, 이렇게 모바일 애플리케이션 디자인 패턴이 탄생했다.
이 책의 진정한 가치는 패턴을 분류해서 정의한 것보다 수백 개의 예를 수집해 정리했다는 데 있다. 즉 이 책은 패턴 이론서가 아니라, 모바일 애플리케이션이 진열된 갤러리다. iOS, 안드로이드, 블랙베리, 웹OS, 심비안, 윈도우용 애플리케이션으로부터 400개가 넘는 최신 스크린샷을 구해 패턴 유형별로 분류했다. 웹사이트(http://www.mobiledesignpatterngallery.com)와 플리커(Flickr) 포토스트림에서 더 많은 예를 볼 수 있다.

저자 소개

테레사 닐 (Theresa Neil)

텍사스 오스틴에서 사용자 경험 컨설턴트로 일하고 있다. 노련한 UX 디자이너 및 개발자 팀과 함께 고객과 밀접하게 작업하면서, 사람들을 즐겁게 만들어주고 생산성을 높여주며 확신을 심어줄 수 있는 애플리케이션을 만든다. 최근에는 레스토랑에서 고객이 주문할 때 사용하는 태블릿 애플리케이션 프로젝트를 진행 중이다. 기타 프로젝트 정보는 웹사이트(http://www.theresaneil.com)를 참고하고, 트위터 계정 @theresaneil을 팔로우하라.

역자 서문

모바일 시대로 넘어오면서 그 중심에는 모바일 애플리케이션(앱)이 있다고 해도 과언이 아닐 것입니다. 우리가 하루에 사용하는 모바일 애플리케이션의 수는 얼마나 될까요? 하루에도 수없이 많은 모바일 애플리케이션이 지구 곳곳에서 만들어지고 있습니다. 이런 모바일 애플리케이션을 사용하기 쉽게 만들려면 어떻게 디자인해야 할까요? 큰 모니터 화면, 키보드 입력이 기본이었던 PC 환경에서 웹사이트를 만들다가 손바닥만 한 화면과 터치 인터페이스가 중심인 스마트폰 환경에서 사용하기 편리한 모바일 애플리케이션을 디자인하는 일은 쉽게 답할 수 있는 문제가 아닙니다. 이 책은 이 질문에 풍부한 실제 사례들을 기반으로 잘 정리해 실질적이고 구체적으로 답하고 있습니다.

현업에서 일하다 보면 애플리케이션에 녹여내고 싶었던 가치가 모바일 화면을 구성하는 과정에서 잘 표현되지 못해 사용자에게 제대로 전달되지 못하는 경우도 많이 보게 됩니다. 다양한 컨텐츠와 기능이 새롭고 창의적인 방식으로 표현되기 위해서는 참신한 아이디어 못지않게, 사용자와 소통할 수 있는 방식으로 아이디어를 구현하는 방안을 찾아나가는 일 또한 중요합니다. 이러한 학습에는 좋은 사례들을 제대로 이해하는 과정이 도움이 될 수 있습니다. 애플리케이션을 만들어가면서 당면한 문제들을 어떻게 해결했는지 체계적으로 정리해서 보여주는 것이 바로 디자인 패턴입니다. 저자가 수백 가지의 모바일 애플리케이션을 살펴보고 뽑아내어 체계적으로 정리한 디자인 패턴들이 좋은 모바일 애플리케이션을 만드는 데 도움이 되었으면 하는 바람입니다.

역자 소개

박정아

컴퓨터과학과 국문학을 공부하고 인지과학으로 박사학위를 받았다. 자연어 처리와 인공지능 대화 기술을 연구하다가 다음커뮤니케이션에서 다양한 검색 서비스를 만들었고 검색 팀장을 지냈다. 현재 LG전자 LSR/UX 연구소에서 수석 연구원으로 사용자 경험 디자인 연구를 하고 있다.

임정화

심리학을 공부하고 게임몰입경험으로 논문을 썼다. 사용자경험컨설팅 회사에서 컨설팅과 글로벌리서치 업무를 하다가 다음커뮤니케이션에서 UXer로 다양한 모바일 서비스의 사용자 경험을 만드는 과정에 참여했다. 현재는 다음카카오에서 모바일, O2O, IoT 서비스의 사용자 경험을 만들고 있다.

목차

목차
  • 01장 내비게이션
  • __기본 내비게이션 패턴
  • ____스프링보드
  • ____리스트 메뉴
  • ____탭
  • ____갤러리
  • ____대시보드
  • ____메타포
  • ____대형 메뉴
  • __보조 내비게이션
  • ____페이지 회전판
  • ____이미지 회전판
  • ____리스트 확장

  • 02장 폼
  • __로그인
  • __등록
  • __결제
  • __계산
  • __검색 폼
  • __멀티스텝
  • __긴 폼

  • 03장 표와 리스트
  • __기본 표
  • __제목 없는 표
  • __열고정
  • __개요 + 데이터
  • __행묶음
  • __계단식 리스트
  • __시각적 표지를 포함한 표
  • __편집가능 표

  • 04장 검색, 정렬, 필터
  • __검색
  • ____검색 기능
  • ____자동완성형 검색
  • ____동적 검색
  • ____범위 검색
  • ____최근 검색
  • ____검색 폼
  • ____검색 결과/결과 보기
  • __정렬 패턴
  • ____화면 정렬
  • ____정렬 옵션 셀렉터
  • ____정렬 폼
  • __필터
  • ____화면 필터
  • ____필터 서랍
  • ____필터 대화상자
  • ____필터 폼

  • 05장 도구
  • __툴바
  • __옵션 메뉴
  • __기능 호출 버튼
  • __컨텍스트 도구
  • __인라인 기능
  • __멀티상태 버튼
  • __대량 기능

  • 06장 차트
  • __필터 포함 차트
  • __미리보기 창
  • __개요 + 데이터
  • __데이터포인트 상세 정보
  • __상세 탐색
  • __확대
  • __피벗 테이블
  • __스파크라인

  • 07장 유도
  • __대화상자
  • __팁
  • __기능 투어
  • __비디오 데모
  • __투명화
  • __처음 사용해보기
  • __노출 지속화
  • __발견가능성

  • 08장 피드백과 어포던스
  • __피드백
  • ____에러 메시지
  • ____확인하기
  • ____시스템 상태
  • __어포던스
  • ____탭(누르기)
  • ____플리킹(밀어 넘기기)
  • ____드래그(끌기)

  • 09장 도움말
  • __사용법
  • __컨닝페이퍼
  • __기능 투어

  • 10장 안티패턴
  • __참신한 디자인 안티패턴
  • __메타포 부조화 안티패턴
  • ____컨트롤 부조화
  • ____아이콘 부조화
  • ____멘탈 모델 부조화
  • __바보 상자
  • __정크 차트
  • __버튼 바다

  • 부록
  • __부가 정보
  • __내비게이션
  • ____기본 내비게이션
  • ____보조 내비게이션
  • __폼
  • __표
  • __검색
  • __정렬 패턴
  • __필터
  • __도구
  • __차트
  • __유도
  • __피드백
  • __어포던스

도서 오류 신고

도서 오류 신고

에이콘출판사에 관심을 가져 주셔서 고맙습니다. 도서의 오탈자 정보를 알려주시면 다음 개정판 인쇄 시 반영하겠습니다.

오탈자 정보는 다음과 같이 입력해 주시면 됩니다.

(예시) p.100 아래에서 3행 : '몇일'동안 -> 며칠동안