디바이스별 UI 디자인의 특성

스마트폰, tv, 컴퓨터 등 ui 디자인이 들어가는 디바이스는 상당히 많다.

사용자와의 접점이 가장 많고 물리적인 접촉이 이루어지는 물체이기에 디바이스에 대한 이해가 필요하다. 

지금 블로그를 쓰고 있는 티스토리 역시 모바일과 웹사이트의 레이아웃 배치라든지 호버에 따른 반응의 차이가 디바이스에 따라 달라지기에 ui디자인을 하는 사람들이라면 꼭 디바이스별 어떻게 특징이 달라지는지 알아야 한다.

그럼 각 디바이스별 UI 디자인 특성을 알아보도록 하자.

컴퓨터

- 컴퓨터의 가장 큰 특징은 호버가 가능하다는 점!
호버가 가능하기에 클릭 없이 올려놓는 동작으로도 정보를 얻을 수 있다. 커머스 제품 같은 경우 상품의 디테일을 볼 때 이런 호버 기능이 빛을 발휘한다.

-세로 스크롤이 가능하다

많은 정보성 글을 부담 없이 볼 수 있다. 하지만 가로 스크롤은 불편할 수 있기에 터치가 자유로운 모바일에서 편리하게 사용할 수 있는 기능이다.

-화면을 줄였다 늘렸다 사이즈 조절이 가능하기에 사이즈에 따른 다양한 디자인 체계가 필요하다. 웹사이트의 디자인 시스템은 만들어 본 적이 없어서 한번 찾아봤는데 아래와 같이 아우디 공식 웹사이트 자세한 디자인 시스템에 대한 설명이 나와있다. 레이아웃 디자인 체계를 살펴보았는데 모바일과 유사하게 레이아웃의 활용가능 범위에 대해 설명하며 어떤 디바이스에 들어가든 자사 제품에 대한 설명이 생략되면 안 된다는 것을 강조했다.

https://www.audi.com/ci/en/intro/basics/layout-structure.html? 

Basics / Layout Structure

https://www.audi.com/ci/en/guides/user-interface/responsive-ui.html

Responsive UI

-멀티 화면이 가능하다. 유튜브를 가장 큰 예로 들 수 있다. 유튜브 라이브를 보면 유튜브의 메인 영상과 오른쪽으로는 실시간 댓글 스레드를 볼 수 있어 편리하다. 

TV

- 컨트롤러를 통한 조작

신체적 활동이 제한적이다.  그렇기에 인터페이스 간의 간격이 가까워야 한다. 즉 연속성이 있어야 한다는 의미이다 (*몇 년 전부터 마이크 기능이 추가되며 제한적인 활동의 범위가 크게 늘어났다.) 스마트 TV가 보급되며 마우스와 같이 리모컨으로 클릭을 하기도 했는데 직접 사용해 본 결과 너무 불편하고 한번 잘못 누르면 다시 빠져나오는 과정이 복잡하게 느껴졌다. 음성인식 기술이 발전된 만큼 스마트 tv를 볼 때 더욱 유용히 활용되었으면 하는 바람이 있다.

-이러한 제한적인 tv의 인터페이스에서 ui 디자인적 차별화를 주기 위해서는 콘텐츠를 눌렀을 때/ 호버 했을 때의 '테두리 생성' '배경색이나 글자색 변경' ' 요소 크기 확대' 등의 연구를 해야 할 듯싶다.

스마트폰

-터치를 활용한 다양한 움직임이 가능하지만 호버 기능이 없어 사용자의 뎁스를 줄이기 힘들다.

-aos / ios 체계에 따른 ui 구성이 달라진다.

모바일 화면을 디자인할 때 뒤로 가기 버튼의 유무에 따라 화면에 탭이 들어가는 방식이 달라지는 것처럼 체계에 따른 디자인의 이해가 필요하다. ---> 체계에 따른 ui 구성이 필요한가에 대해 알아보던 중 어떤 한 블로그 글을 보았는데 디자이너와 개발자가 서로 소통을 이루며 개발 친화적인 디자인 시스템을 이루는 게 좋다는 글을 보았는데 실무에서 일을 해보니까 명언처럼 다가왔다..ㅋㅋㅋㅋㅋ