00_웹 인터페이스는 어떻게 모바일에 적용되었을까
author - 우뚝솟은비니 | UX 디자이너
얼마 전, 피땀눈물 흘려가며 준비하던 프로젝트가 갑자기 미세먼지마냥 하늘에 흩날리는 바람에 잠시 여유시간이 생겼습니다. 이 시간을 어떻게 의미 있게 채울까 고민하던 중에 『리치 인터페이스 디자인』이라는 책을 읽고 팀원들과 공유하면 모두에게 유익한 시간이 될 것 같아 UX/UI팀원들 앞에서 약 30분간의 북리뷰 PT를 진행했습니다.(사실 책임님이 시킴) 막상 리뷰를 진행하고 나니, 내부에서만 알고 있기에는 아쉽다는 생각이 들어 PT 내용을 브런치에도 공유하려 합니다.(대표님이 시킴)
지금은 절판되어 UX도서계의 전설로만 전해진다고 한다인터페이스계의 백과사전,『리치 인터페이스 디자인』
『리치 인터페이스 디자인』은 (원제: Designing Web Interfaces) 웹 인터렉션 디자인에서 고려해야 할 6가지 원칙과 75가지 패턴을 담고 있는 인터페이스계의 백과사전이라고 할 수 있습니다. 서문에서 ‘이 책은… 웹에서 독특하고 풍부한 경험을 만들어 낼 수 있는 가이드, 패턴, 원칙들을 담은 결정체다’라고 밝힌 것과 같이 UX/UI 디자이너라면 기본으로 알고 있어야 할 원칙과 디테일한 디자인 가이드를 제시합니다 만,
넷플릭스가 DVD 팔던 2000년대의 웹 환경을 기반으로 쓰인 책이기 때문에 2018.. 9년을 살고 있는 우리들이 책의 예시를 보고 있노라면 싸이월드에서 파도타기 하던 때의 향수를 느끼게 됩니다.
10년 전 넷플릭스의 모습이라고 합니다때문에 이번 매거진에서는 책에서 소개된 6가지 원칙과 디자인 가이드를 중심으로, PC 웹에서 사용되는 인터렉션 패턴들이 모바일 환경에서는 어떻게 적용되었는지 살펴보려고 합니다. 물론, 75가지 모두를 다룰 수는 없기 때문에 제가 재밌게 본 패턴들 위주로만 뽑았습니다.
Index
1원칙. 다이렉트하게 만들어라
2원칙. 가볍게 유지하라
3원칙. 페이지에 머무르게 하라
4원칙. 유인 요소를 제공하라
5원칙. 전환 효과를 사용하라
6원칙. 즉각적으로 반응하라
앞으로 6번에 걸쳐 디자인 원칙 하나씩을 소개해드릴게요:)
-
플러스엑스의 UXUI 실무 배우러 가기
UX 상위기획 실무 강의 : 플러스엑스 UX 실무 마스터 패키지
UX 디자인 실무 피그마 강의 : Plus X UX디자이너가 피그마로 화면 설계하는 방식
-
UI 디자인 기초 강의 : 플러스엑스 UI 실무 마스터 패키지
UI 디자인 실무 피그마 강의 : Plus X UI팀의 입문자를 위한 피그마 디자인 매뉴얼
