(2-1장) UI 디바이스의 종류와 특성 [UI デザインの教科書 ー UI디자인의 교과서]
[들어가며]
주로 업무를 할 때 모바일 디바이스를 기준으로 디자인 하기 때문에, 모바일 디바이스에 익숙하지만, 종종 PC나 태블릿 사용성을 고려하며 디자인하게 된다면 당황하곤 한다. 1)스마트폰의 터치와 PC의 클릭 제스쳐의 차이 2)화면 넓이에 따른 정보 배치의 복잡도 3)손, 키보드, 마우스, 리모콘 등 다른 입력 장치의 사용 등 디바이스의 특징 별로 고려해야 할 사항이 다르다. 특히 PC나 TV 같은 경우는 이미 우리 생활 깊숙이 자리 잡고 있어서 이번 기회에 의식적으로 디바이스 별 특성과 디자인 유의점을 살펴봐야겠다는 생각이 들었다.
같은 서비스라고 하더라도, 디바이스와 화면크기의 특성에 따라 컨텐츠가 바뀐다. 간략하게 에어비앤비의 예를 살펴보더라도 PC 웹의 경우에는 가로 형태로 많은 컨텐츠들을 나열 할 수 있다. 그리고 요소들의 크기도 비교적 작은 형태임을 볼수 있고. 반면에 앱의 경우에는 세로로 긴 화면에 맞춰 컨텐츠가 배열되어 있다. 세로 스크롤의 길이 덕에 상단의 메뉴도 손으로 간편하게 조작하도록 하단에 고정되어 있고.
1편에 이어서 쓰는글 - UX/UI 디자인이란 무엇인가>>
UX/UI 디자인이란 무엇인가? -1 [UI デザインの教科書 ー UI디자인의 교과서]
UX/UI 디자이너가 되고 싶다 생각하며 입사한지 만 3년이 되어갑니다. 실무를 하며 막연하게 디자인은 이론보단 실무 경험이 중요한가 의문이 들었습니다. 100여권의 책을 읽더라도 1번의 실무경
studiodebbbie.tistory.com
(2-1장) UI 디바이스의 종류와 특성 [UI デザインの教科書 ー UI디자인의 교과서]
2021/02/21
[디바이스 별 규정]
어느 기기가 스마트 폰이고 태블릿일까. 사실 요즘의 다양한 디바이스의 규격과 기기안의 많은 기능을 탑재한 all-in-one 제품이 늘어나며 모호해져 정확한 규정은 어렵지 않을까 생각도 든다. 해당 책에서는 조작 디바이스의 종류와 패널의 크기로 구분하고 있다.
1.PC - 마우스, 키보드, 트랙패드 의 포인틱 디바이스
2.스마트폰 4~7인치의 터치 패널을 가진 디바이스
3.타블렛 7인치 이상의 터치패널을 가진 디바이스
4.TV 리모콘으로 조작하는 디바이스
좀 더 세부적으로 각 기기의 특성과 유의점에 대해 정리해보았다.
[PC]
PC의 경우, 스마트 폰이나 타블렛에 비해 비교적 넓은 화면을 가지고 있다. 특히 가로폭이 비교적 넓다. 디자인 할 수 있는 화면도 넓으므로 상세 조작이 가능하고 작은 요소들도 넣을 수 있다. 조작기기는 1)마우스 2)트랙패드로 터치 형식이 아니라 마우스를 요소 위에 올리는 호버:hover 제스쳐로 사용자들에게 미리보기를 제공한다.
[스마트폰]
스마트폰과 태블릿의 경우, PC 에 비해 탭, 더블탭, 길게 누르기, 핀치, 스와이프, 디바이스 기울이기 등 다양한 제스쳐가 가능하다. (다만 다양한 제스쳐를 어떻게 활용할지도 기획자와 디자이너의 몫이다!) 디바이스가 터치패널 이기에 1)사용자가 충분히 누를 수 있을만한 크기로 제공 2)해당 영역이 클릭이 가능한 영역이라는 시각적 안내가 필요하다.
디바이스의 화면이 매우 좁고, 다양한 컨텐츠를 내부에 넣어야하기 때문에, 페이지에서 어떤 행동을 유도할지 고민해야한다. 이는 버튼의 크기나 색상, 형태에 영향을 주게 된다. 상단 이미지의 의 야놀자의 경우에는 '객실 선택하기'를 사용자들이 클릭할 수 있도록 진한 빨간색 메인 컬러와 하단의 고정버튼으로 만들었다. 내부의 <현장이벤트>보기 나 <댓글이벤트>보기와 같은 서브 기능들은 고스트 버튼이라 불리는 스트로크 버튼을 사용하였다.
[TV]
텔레비젼의 경우에는 최근 인터넷 TV가 활성화 됨에 따라 화면의 디자인도 변화하고 있다. 티비는 리모컨이라는 외부입력 장치로 조작하게 되는데, PC의 마우스나 스마트폰의 터치 형식과 달리 상당히 제한적인 제스쳐만 가능하다. 위아래 좌우 포커스로 이동하거나 음성 입력이 필요하다. (특히 한자 입력이 복잡한 일본에는 음성 입력이 효과적인 것으로 보인다.)
특히, 포커스를 이동할 땐 선택하고 싶은 항목까지 열심히 움직여야해서 포커스가 눈에 띄어야 한다. 그리고 쉽고 빠른 포커스 이동을 위해선 1)연속적인 배치가 중요하다. 조작의 어려움 때문에 다른 디바이스와는 다르게 2) 색, 배경색, 요소크기, 애니메이션 등 포커스 된 요소와 포커스 되지 않은 요소의 차별이 필요하다.
애플 TV화면으로 살펴보아도 컨텐츠들은 가로로 배열되어 있으며, 선택된 항목은 1)썸네일 이미지 확대 2) 콘텐츠 제목이 큰 흰색 글씨로 보이고 있다. 디자인 하는 회사에 따라 컨텐츠는 세로로 길게 배열되기도하고 가로로 길게 배열되기도 한다. 요즘은 편의를 위해 apple TV나 안드로이드 TV의 경우 앱을 제공해주기도 한다. 애플의 경우 원하는 콘텐츠를 빠르게 탐색하고, 클라우드 서비스로 기기간 컨텐츠를 장소 제한 없이 자유롭게 접근할 수 있도록 해두었다.
[특성정리]
해당 책에서 각 디바이스별 항목을 표로 정리한 부분을 발췌해보았다. 한글의 경우, 자음 모음으로만 이루어져 있어 문자입력의 복잡성이 줄어들지만, 일본이나 중국과 같이 직접 한자를 쓰는 경우는 문자 입력이 중요한 요소로 고려되고 있는걸 볼 수 있다. 추가로 각 기기별 사용 인원에 따라 프라이버시를 고려해야하는 점도.
[잡담]
집에서 주로 TV를 보는 일이 드물다보니, 외부에서 인터넷 TV를 만나게 되면 당황스럽다. 원하는 선택지를 선택하기 위해서 포커스를 긴 시간동안 기다린다거나, 키보드 입력도 포커스를 통해 입력해야한다는 점이 불편함이 상당한듯 하다. TV도 스마트폰 리모콘 어플로 연동한다거나, 음성입력을 한다거나, 패널이 터치패널로 바뀐다면 편의성은 높이지겠지만, 아직도 불편함을 감수하고 사용해야한다는 생각이 들었다. 그럼 오늘은 여기까지! :)