디자인 서적

<UI 디자인 교과서> 하라다 히데시 저 ★★

saejun 2023. 9. 17. 15:03
반응형

앞서 읽었던 <UX 심리학> 이 사용자 심리의 모든 것을 총망라한 책이었다면 이 책은 UI입문서로 멀티 디바이스에 최적화된 콘텐츠를 담고 있다. 이미지 예시와 설명이 체계적이기 때문에 비전공자 입장에서 기본적인 개념과 활용사례를 접하기 좋은 것 같다.

 

흔히 웹이나 앱 UI를 구분해서 기획하는 경우가 많은데 반해 이 책의 경우엔 TV를 포함한 N스크린 개념에서 UI 구성요소를 철저히 해부해 주기 때문에 UI 전반적인 개념에 대해서 폭넓게 이해하기 좋은 것 같다. 예를 들어 앱의 손가락 터치 또는 제스처나 웹의 마우스 호버 개념에 대해선 비교적 익숙하지만 TV 리모컨의 경우 이동이 수직 수평으로 제한되고 포커스 효과를 고려해 UI를 기획하는 부분은 굉장히 새롭게 다가왔다.

 

개인적으로 가장 흥미로웠던 부분은 네이게이션과 인터랙션을 다룬 6장이었다. 가면 갈수록 서비스 간 UI 사이에 더는 큰 차별화가 어렵기 때문에 점점 더 마이크로 인터랙션 디테일이 고도화되고 있다. 사실 이런 인터랙션은 없어도 작동하는 자체에 지장은 없지만 이러한 디테일이 쌓이다 보면 서비즈의 질이 올라가고 장기적으로 경쟁력의 분수령이 될 수 있다.

 

신은 디테일에 깃들어 있다(God is in the details), 바로 내 블로그의 타이틀이다. 뭔가 종교적(?)인 글귀로 느껴질 수도 있지만, 현대건축의 3대 거장 중 한명으로 불리는 미스 반데로 어(Mies van de Rohe)가 했던 말이다. 즉, 명작의 조건은 디테일에서 좌우된다는 것인데, 그래픽 아웃풋 차이가 희미해진 요즘 같은 시기엔 사용자 심리를 고려한 세심한 인터랙션이 제품의 완성도를 좌우하는 경쟁력인 것 같다.

 

책에서 언급된 예시 중 하나인 로그인 크리터(Login Critter)

로그인 창 위에 있는 곰이 텍스트 입력을 따라가면서 사용자에게 유쾌함을 준다.

 

많은 웹사이트들이 패럴렉스를 채용하고 있고 앱은 3D를 포함한 다양한 인터랙션들로 넘쳐난다. 심지어 비헨스에 올라와있는 많은 포트폴리오 대부분에 애니메이션이 포함되어있다. 즉, 단순히 그래픽적인 UI이론을 공부하는 것을 넘어 인터랙션과 애니메이션에 대한 전문성도 어느 정도 확보해야 한 명의 디자이너로서 어느 정도 경쟁력을 갖출 수 있을 것 걷다. 할 게 너무 많은데 산넘어 산

 

기타

책 읽다가 흥미로운 내용은 6장에서 저자가 건축과 가구에 빗대어 웹사이트와 앱의 구조를 설명한 부분이었다. 건축이나 제품 디자인에서는 몇 개의 평면도를 바탕으로 가로, 세로, 높이의 3차원으로 구성된 구조물을 만든다. 웹과 앱도 얼핏 보면 평면구조인 것 같지만, 페이지는 개별적으로 디자인하는 것이 아니라 전체적인 전후 관계(전환을 동반하는 관계성)를 내비게이션과 전체 레이아웃을 통해 반영한다.

 

건축의 평면도가 웹이나 앱의 User Flow 역할을 하고, 건축이나 제품의 3D 투시도가 각각의 페이지로서 기능한다고 생각하면 이해하기 쉬운 것 같다. 오래전이지만 예전에 대학에서 건축을 공부할 때 위와 비슷한 설명을 읽은 적이 있는 것 같은데, 이 책에서도 비슷한 내용이 있어서 노트를 남긴다.

 

전체적인 구조에 맞춰 사용자의 동선을 설계하고 입체적인 공간에서 사용자가 느끼는 경험을 설계하는 데 매력을 느끼는 점이 길게보면 대학에서 건축을 전공했던 배경과 현재에 와서 UXUI를 공부하는 이유가 아닐지 생각해 본다.

반응형