UX - 기기환경별 사용자 인터페이스 특성

해당 문서는 Desktop과 Mobile, Web과 App의 사용자 인터페이스 특성에 대한 설명입니다.
용어에 대한 자세한 내용이나 개발 고려사항 등 기술적인 설명은 다루지 않습니다. 

목차

1. 개요

2. 데스크톱 웹 & 모바일 웹

3. 모바일 웹 & 모바일 앱, 그리고 반응형 웹

 

 

1. 개요

 웹(Web)은 사용자가 인터넷을 통해 사진, 영상 등의 콘텐츠 및 서버에 저장되어있는 정보에 항상 접근할 수 있는 시스템으로, 거미줄처럼 수많은 웹 사이트가 엮인 공간을 나타냅니다.

 

 앱(App)은 운영체제에서 실행되는 모든 소프트웨어를 뜻하며 웹 서비스를 이용할 수 있는 브라우저(IE, Chrome 등)와 오피스 프로그램인 워드 등도 앱에 속합니다.

 

 우리는 웹 사이트를 통해 쇼핑도 하고, 검색도 하며, 영상을 찾아보거나 친구와 소통하기도 합니다. 데스크톱 환경에서 주로 사용되어온 웹 서비스는 스마트폰 중심의 생활환경 조성 이후, 모바일 사용이 늘면서 급격한 변화가 이루어졌습니다. 스마트폰, 태블릿 등 '이동성'에 초점을 맞추어 언제 어디서나 인터넷에 접속할 수 있다는 장점과 더불어 '개인성', '휴대성'의 특성으로 모바일 웹과 앱이 발전했습니다. 반면 데스크톱보다 작은 화면, 저장 용량의 한계 등이 존재해 웹 사이트를 제작할 때 고려해야 할 부분들이 존재합니다.

 

 이러한 특성으로 특히 모바일 환경에서 UX를 중요하게 생각합니다. 모바일은 화면 크기 등이 데스크톱 대비 한정된 상황에서 같은 수준의 서비스를 제공해야 하므로 더 많은 부분을 신경 써야 합니다. 제한된 화면 크기를 고려하여 최대한 단순하게 화면을 표시하되, 사용자가 생각하지 않아도 사용할 수 있어야 합니다. 이런 점을 고려하기 위해서는 사용자가 관련 분야에 어느 정도의 숙련도를 가졌는지, 어떤 특정 분야의 사용자들이 주로 사용하는지 등이 파악되어야 합니다.

 

 모바일 환경에서만 제공하는 기능 중 푸시 알림 기능을 생각하면, 서비스를 이용하는 사용자들의 스마트폰 사용 패턴 등을 파악, 각 사용자에 적합한 맞춤 알림 등을 제공합니다. 이처럼 데스크톱 환경보다 모바일 환경에서 사용자의 '개인화'를 생각해야 한다는 점에서 기존과 다른 관점으로 접근해야 합니다.

 

 더불어 모바일 웹 서비스와 앱 서비스는 모바일 기기를 통해 콘텐츠를 소비하거나 정보를 받는다는 점에서 별 차이 없어 보입니다. 그러나 브라우저라는 프로그램을 통해 이용하는 웹 서비스와 운영체제(OS) 위에서 바로 실행하는 앱 서비스는 사용자 관점에서 아래와 같은 차이점이 있습니다.

 

모바일 웹 (Web) 서비스	모바일 앱 (App) 서비스
브라우저를 통해 접근 인터넷(네트워크 환경) 필수 모든 모바일 단말기에서 사용 가능 뒤로가기, 새로고침 등 각각의 웹 사이트별 기능 사용 방법 동일	애플리케이션 설치를 통해 접근 인터넷 없이 사용 가능한 예도 있음 OS에 따른 단말 제한 앱별 기능의 사용 방법 다를 수 있음

 

데스크톱 웹과 모바일 웹, 모바일 웹과 모바일 앱의 특성 등 자세한 내용은 아래에서 설명하고자 합니다.

 

 

2. 데스크톱 웹 & 모바일 웹

 데스크톱 웹과 모바일 웹의 가장 큰 차이점은 사용 기기의 크기입니다. 따라서 모바일 웹 제작 시에는 작은 기기의 크기에 맞게 내비게이션 바를 생략하는 등 단순한 형태로 설계해야 합니다. 또한 모바일 웹은 터치스크린과 같은 인터페이스를 가지며, 클릭 투 콜(Click to call)과 같은 모바일 특화 기능을 제공합니다. '클릭 투 콜'이란 전화 바로 걸기, 카카오톡 문의 버튼 등 스크린 상의 버튼을 클릭하면 바로 전화 연결이 가능한 기능이며 데스크톱 환경에서는 제공하기 어렵습니다.

 

 데스크톱 웹과 모바일 웹의 레이아웃의 차이를 보면, 빠르게 정보를 찾을 수 있도록 콘텐츠를 더 강조합니다. 오피스체크인 웹 사이트로 확인해보면, 데스크톱 웹 사이트 메인에는 상단 내비게이션 바와 우측 메뉴 바가 표시되어있습니다. 

 

오피스체크인 - 데스크탑 웹 사이트

 

 반면, 모바일 웹 사이트에서는 상단 내비게이션 바와 메뉴 바가 축소 및 생략되어 아이콘 형태로 표시했습니다. 화면에서 '사무실 검색'이라는 주요 기능을 좀 더 강조해 사용자가 모바일 환경에서도 더욱 편리하게 서비스를 이용할 수 있습니다. 그리고 터치 기능을 고려하여 데스크톱 웹 사이트의 정보를 그대로 제공하는 것이 아니라 사용 빈도가 많은 '지역별 매물' 아이콘을 터치하기 쉬운 크기로 표시하고 있습니다. 또한 '월 지출액' 입력 방식에 가로 막대 스크롤을 추가했습니다.

 

오피스체크인 - 모바일 웹 사이트 (네이버 앱 브라우저)

 

 모바일 웹 사이트는 단순히 데스크톱 웹 사이트를 모바일 기기를 통해 보는 것이 아니라, 데스크톱 웹 사이트와 다른 URL로 접근하는 별개의 웹 사이트입니다. 주소의 차이는 대체로 일반 웹 사이트는 'www'로 시작하며, 모바일 버전은 'm'으로 시작합니다. 아래는 오피스체크인의 데스크톱 웹 사이트와 모바일 웹 사이트 주소입니다.

 

오피스체크인 - 데스크톱 웹 사이트 (www.officecheckin.com)

오피스체크인 - 잠겨있던 사무실이 열린다!

오피스체크인- 모바일 웹 사이트 (m.officecheckin.com)

오피스체크인 - 잠겨있던 사무실이 열린다!

 

 위와 같이 데스크톱과 모바일 웹 사이트를 따로 제작하는 방식이 아닌, 반응형 웹 사이트 하나를 운영하기도 합니다.

 

3. 모바일 웹 & 모바일 앱, 그리고 반응형 웹

 모바일 웹과 모바일 앱은 어떤 차이점이 있을까요? 오피스체크인의 모바일 웹과 모바일 앱의 메인을 보면 큰 차이가 없어 보입니다. 모바일 앱은 기기에 직접 설치한 후 사용하는 방식으로 기기의 OS에 따라 이용할 수 있는 서비스가 구분되며 인터넷 없이 이용 가능하기도 합니다. 또한 푸시 알림 등 나에게 맞는 맞춤 콘텐츠나 메시지를 제공받을 수 있습니다. 웹 서비스는 뒤로가기, 새로고침, 홈버튼 등이 브라우저에서 제공하는 기능을 그대로 이용할 수 있지만, 앱 서비스에서는 앱에서 제공하는 방법을 통해 이용할 수 있습니다. 그리고 웹 서비스보다는 앱 서비스가 좀 더 문자, 인터넷 검색, 다른 앱 사용 등 다중 동작이 수월합니다. 

 

오피스체크인 - 모바일 앱 서비스

 

 오피스체크인의 모바일 웹과 모바일 앱 서비스는 거의 동일한 화면을 제공하고 있지만 완전히 다른 화면으로 서비스를 제공하는 경우도 존재합니다. 예를 들어, 네이버 지도의 경우 모바일 웹에서는 검색창 클릭 전에는 해당 지역 인근의 음식점, 카페 등 아이콘을 통해 선택하는 창이 없는 반면에, 모바일 앱에서는 검색창과 별개로 선택할 수 있습니다. 그 외에도 앱 서비스에서는 해당 지역 근처의 맛집, 인기 있는 장소 등을 추천해주는 등 다른 서비스를 제공하고 있음을 알 수 있습니다.

 

네이버 지도 - 모바일 웹 서비스

 

네이버 지도 - 모바일 앱 서비스

 

 출근길 지하철 안에서 그날의 신문 기사를 검색할 때 어떤 서비스를 이용하는지 생각해보면 모바일 웹과 모바일 앱의 차이를 알 수 있습니다. 언론사 자체 앱 서비스를 이용하기보다는 웹 서비스 내에서 검색 또는 메인 기사 제목 터치 등을 통해 짧은 시간을 활용해 신문 기사를 읽습니다. 반면에 특정 분야의 매거진 또는 글을 검색하거나 자기개발 등을 위한 정보 검색 시에는 커리어리, 퍼블리와 같은 특정 앱 서비스를 이용하기도 합니다. 이처럼 우리는 '정보 검색'이라는 같은 기능을 사용하더라도 상황이나 목적에 따라 웹과 앱 서비스 중 선택하고는 합니다.

 

 반응형 웹이란 웹에 접속하는 기기에 반응하는 웹 서비스를 말합니다. 데스크톱부터 모바일 기기까지 다양한 단말기 특성에 대응하는 하나의 웹 사이트로 브라우저 또는 스크린에 반응하여 크기에 따라 최적화된 레이아웃을 보여줍니다. 모바일 웹과 다르게 동일한 URL로 데스크톱과 모바일 기기에서 접근할 수 있습니다. 사용자 입장에서는 동일한 웹 서비스에 어떤 기기로 접근하던지, 배열의 차이만 존재할 뿐, 동일한 서비스를 경험할 수 있다는 장점이 있습니다. 그러나 사용 속도가 느리다는 단점 또한 있어, 네이버와 같이 다양한 기능을 한 번에 제공하는 웹 서비스에서는 주로 사용하지 않습니다.

 

#끝으로

 컴퓨터 사용 환경과 기술이 발전하면서 인터페이스 또한 함께 변화해왔습니다. 문자 입력을 종이가 아닌 컴퓨터에 하기 위해 키보드가 등장하고, 아이콘 기반의 컴퓨터 UI에 발맞추어 마우스가 발전했습니다. 이제는 별도의 입력 도구가 필요 없는 태블릿과 모바일의 사용량이 늘면서 터치 기반의 인터페이스가 등장했습니다. 그리고 손가락의 움직임을 명령어로 인식하던 터치 기능에서 좀 더 여러 신체의 부위 및 다양한 움직임을 인식할 수 있는 제스처 기반의 인터페이스로 발전하고 있습니다. 사용자 인터페이스를 고려할 때 이러한 변화 또한 함께 신경 써야 할 것 같습니다. 

 

이상으로 글을 마칩니다.