다양한 크기의 화면 및 디바이스를 위한 디자인: 탁월한 UX를 완성하는 7단계

콘텐츠는 스마트워치의 소형 화면부터 대형 TV 화면에 이르기까지 다양한 크기의 화면에서 보고 상호 작용할 수 있도록 개발되어야 합니다. 그러나 다양한 디바이스를 위한 디자인은 단순히 다양한 크기의 화면에서 잘 보이도록 콘텐츠 크기를 조정하는 것에 그치지 않으며, 훨씬 복잡한 작업을 수반합니다. 디자이너는 앱이 화면에 맞게 늘어나기만 하는 것이 아니라 실제로 _사용자의 디바이스에 딱 맞게 디자인_되었다고 받아들일 정도로 각 디바이스의 사용자 경험을 극대화해야 합니다.

탁월한 UX를 제작하려면 다양한 디바이스와 화면의 크기를 타겟팅하기 위한 효과적인 전략을 세워야 합니다.

1.핵심적인 사용자 경험 파악

각 제품에는 핵심적인 사용자 경험이 있으며, 이는 곧 제품이 존재하는 이유이기도 합니다. 핵심 UX는 사람들의 문제를 해결함으로써 유의미해지며 가치를 제공합니다. 핵심 UX는 주요 콘텐츠와 기능의 조합으로 요약될 수 있습니다. 다음 질문을 통해 제품의 핵심 UX를 찾아보십시오. “고객에게 가장 일반적이면서도 중요한 업무는 무엇일까요?” 제품이 이용되는 모든 채널에서 고객의 편의를 돕는 중요한 업무를 지원하는 것이 무엇보다도 중요합니다. 예를 들어 모바일 차량 요청 서비스를 제공하는 우버(Uber)의 핵심 UX는 언제든지 간편하게 차량을 요청하는 것입니다. 이 기능은 화면의 크기와는 상관없이 의도된 모든 디바이스에서 제대로 작동되어야 합니다.

고객이 우버를 사용하는 가장 큰 이유는 바로 택시를 호출하기 위해서입니다. 이 기능은 애플 워치(Apple Watch)에서도 이용 가능합니다. 이미지 출처: 테크크런치(Techcrunch)

제품에 맞는 디바이스 유형 식별

시중에는 화면의 크기가 다양한 디바이스가 무수히 존재합니다. 서로 다른 각 디바이스를 대상으로 디자인하는 것은 불가능에 가까울지도 모릅니다. 하지만 사용자가 수행하고자 하는 업무를 바탕으로 제품에 사용할 디바이스 유형을 정의하는 것은 가능한 일입니다. 가장 일반적인 디바이스 유형은 다음과 같습니다.

각 디바이스 유형은 다양한 컨텍스트에 맞는 다양한 서비스를 제공합니다. 사용자는 자신이 보고 있는 화면의 유형에 따라 각기 다른 상호 작용을 경험하게 됩니다. 예를 들어 스마트폰은 비교적 사소한 업무에 사용되며 사용자 세션이 짧습니다. 반면 태블릿은 주로 콘텐츠 소비에 사용되며 대부분의 사람들이 이를 작업 툴로 인식하지는 않습니다. 각 디바이스의 유형에 대한 기본적인 컨텍스트 가정을 이해하면 탁월한 UX를 구축하는 데 한 걸음 더 가까워질 수 있습니다.

2. 콘텐츠의 용도에 맞는 경험 적용

제품의 핵심 UX를 식별하고 지원하려는 디바이스 유형을 선택한 다음에는 사용자 경험을 각 디바이스 유형에 맞게(각 사용 컨텍스트에 맞게) 적용해야 합니다. 컨텍스트에 맞는 디자인은 특히 다양한 디바이스 유형을 위해 디자인할 때 중요합니다.

첫째, 모든 기능이 모든 디바이스에 적합한 것은 아닙니다. 선택된 디바이스 유형에서 제품이 사용되는 각종 시나리오를 파악하여 각 시나리오에 맞는 경험을 디자인해야 합니다. 예를 들어 스마트폰 사용자가 원하는 것과 데스크톱 사용자가 원하는 것이 다를 수 있습니다. 메모 작성을 위한 제품으로 인기를 끌고 있는 에버노트(Evernote) 를 예로 들어 보겠습니다. 여러 디바이스에서 제공되고 있는 에버노트의 데스크톱 버전은 콘텐츠 소비에 최적화되어 있습니다.

데스크톱용 에버노트 앱은 텍스트 읽기 및 미디어 시청에 최적화되어 있습니다.

반면 모바일 버전은 메모 작성, 사진 촬영 및 오디오 녹음에 최적화되어 있습니다.

에버노트는 모바일 컨텍스트에 대한 이해를 바탕으로 디바이스의 기능을 십분 활용하여 아이디어를 신속하게 저장(텍스트 메모 추가, 사진 촬영 또는 알림 설정)하는 방식을 제공하고 있습니다.

둘째, 화면마다 지원하는 입력 방법이 다릅니다. 터치 입력을 한 예로 들어 보겠습니다. 터치 입력 디바이스(스마트폰 및 스마트워치)를 위한 디자인 작업 시 디자이너가 흔히 범하는 몇 가지 실수를 살펴봅시다.

이미지 출처: UXMag

버튼 간격

3. 작은 화면부터 시작하는 디자인 방식

관습적으로 디자이너는 가장 큰 화면에서 작은 화면 순으로 작업하곤 합니다. 이는 디자인 시 가장 주력하는 부분이 가장 많은 기능을 포함하는 데스크톱 전체 화면 보기이기 때문입니다. 따라서 데스크톱 디자인이 완료된 후에야 비로소 모바일과 다른 디바이스 유형을 작업했습니다. 그런데 디자이너가 데스크톱용 디자인을 작업할 때 제품에 추가되는 기능과 관련하여 너무나도 많은 문제에 봉착하게 됩니다. 특히 이해 관계자가 여러 명인 경우 이 문제는 더욱 악화됩니다. 화면이 클수록 기능을 추가하기가 비교적 쉽다는 사실을 떠올리면 이해하기가 더욱 쉬울 것입니다. 모바일 퍼스트 접근 방식을 적용하여 디자인하면서 사용자와 연관된 가장 작은 화면의 앱부터 만드는 것이 효과적이라는 것이 실제로 분명하게 입증되고 있습니다.

화면의 크기가 가장 작은 디자인부터 작업하면 가장 중요한 것이 무엇인지 판단할 수 있기 때문입니다. 그런 다음, 동일한 접근 방식을 통해 세심하게 선택한 우선순위를 데스크톱, 태블릿 또는 TV 화면용 디자인에 적용할 수 있습니다.

일반적으로 스마트폰이 화면의 크기가 가장 작습니다. 만일 웨어러블 디바이스가 중요한 경우 더 작은 해상도의 소형 화면부터 고려해야 할 것입니다.

4. 대형 화면을 위한 콘텐츠 디자인

작은 화면을 위한 디자인만큼이나 큰 화면을 위한 디자인도 중요합니다. 따라서 대형 화면을 작업할 때에도 여러 요소를 고려해야 합니다.

이미지 출처: 위키피디아

왼쪽: 낮은 품질의 이미지. 오른쪽: 적절한 해상도

TV에 사용할 유저 인터페이스 요소는 데스크톱용 유저 인터페이스 요소보다 커야 합니다. 이미지 출처: 삼성

5. 일관된 경험 제공

일관된 경험이란 각각의 앱과 그에 따른 사용자 경험이 화면의 크기에 상관없이 유사하게 제공되는 것을 말합니다. 디바이스 유형에 상관없이 제공되는 일관된 사용자 경험은 성공적인 옴니채널 사용자 경험을 위한 핵심 요소 중 하나로, 다음의 이점을 갖습니다.

갈수록 다양해지는 크기의 화면과 디바이스에 맞게 디자인을 일일이 고치지 않고도 동일한 경험을 제공하는 디자인을 작업할 수 있습니다. 예를 들어 구글 검색(Google Search) 앱은 모든 디바이스에서 동일한 검색 경험을 제공합니다.

디자인과 기능이 일관적이면 사용자가 선택한 디바이스에서 원하는 업무를 보다 효율적이고도 신속하게 완료할 수 있습니다.

6. 매끄러운 경험 제작

사용자의 입장을 고려할 때 다양한 디바이스의 유형을 지원하는 매끄러운 경험을 제작하는 것이 중요합니다. 일반적으로 사용자는 여러 디바이스를 자유롭게 바꿔가면서 원하는 작업을 수행하며, 사용자가 다른 디바이스로 전환할 때 해당 제품과 서비스를 그대로 이용할 수 있기를 기대합니다. 즉 사용자는 자신이 사용하는 디바이스, 환경의 변화 또는 컨텍스트의 변화에 구애받지 않고 모든 디바이스 유형에서 탁월한 기능을 간편하게 사용할 수 있기를 원합니다.

대부분의 사람들에게 해당하는 일상적인 생활 패턴과 그에 따라 사용하는 화면의 유형을 나타낸 그림입니다. 이미지 출처: 인터컴

사용자의 사용량 시나리오를 기반으로 각 디바이스에서의 콘텐츠 소비율이 동일하게 되기를 바랄 수도 있습니다. 애플 뮤직(Apple Music)을 한 예로 들어 보겠습니다. 맥(Mac) 컴퓨터에서 재생 목록을 설정하는 즉시 아이폰(iPhone)에서 바로 이를 이용할 수 있으며, 아이폰에서 노래를 듣다가 데스크톱으로 전환하면 아이폰에서 중단한 부분부터 노래를 다시 들을 수 있습니다.

애플 뮤직에는 여러 대의 디바이스를 동기화하는 기능이 잘 구현되어 있습니다.

7. 디자인 사전 테스트

테스트 환경에서 큰 효과를 거두었다고 해서 실제로도 좋은 반응을 얻을 수 있는 것은 아닙니다. 실사용자를 대상으로 실제 디바이스에서 사용성 테스트를 수행하면 출시 전에 미리 UX 문제를 발견하고 해결할 수 있습니다.

결론

다양한 크기의 화면과 디바이스에 배포할 디자인을 작업할 때 최고의 전략은 최종 사용자 경험을 염두에 두는 것입니다. UX 디자이너는 사용자를 위한 최적의 경험을 구상하기 위해 제품이 언제, 어디서, 어떻게 사용될 것인지를 고려해야 합니다. 콘텐츠가 제공되는 화면의 크기와 상관없이 사용자는 모든 디바이스에서 원활한 경험을 기대합니다.

디자인. 프로토타입. 공유. 모두가 가능한 하나의 올인원 앱 Adobe XD.

웹사이트 및 모바일 앱을 디자인하고 프로토타이핑하고 공유할 수 있는 최초의 올인원 툴인 Experience Design CC(베타)를 사용하면 아이디어 구상에서 프로토타이핑에 이르는 과정을 신속하게 진행할 수 있습니다. 베타 버전을 테스트해 보시고, 여러분의 피드백을 공유해 주십시오. 다운로드 받기

닉 배비치

닉 배비치(Nick Babich)는 개발자로, 기술에 열정적이며 UX에 큰 애착을 가지고 있습니다. 그는 지난 10년 동안 전문 소프트웨어 개발 업계에 몸담았으며 그의 다양한 관심 분야 중 광고, 심리학 및 영화에 조예가 깊습니다.