오늘날 반응형 디자인이 표준이 되었지만 화면 크기가 더욱 다양해지면서 화면 크기에 최적화된 디자인은 UX 디자이너들 사이에서 여전한 과제로 남아 있습니다.

또한 멀티스크린 디자인 제작 시 상황에 따라 워크플로우를 빠르게 조정해야 하는 경우가 종종 발생합니다. 이러한 경우 어떻게 워크플로우를 조정하고, 문제를 해결할 수 있을까요?

어도비 XD(Adobe XD)의 총괄 제품 디자이너 탈린 워즈워스(Talin Wadsworth), 선트러스트 뱅크(SunTrust Bank)의 UX 디렉터 앤디 비탈레(Andy Vitale), 마이크로소프트 월드와이드 러닝(Microsoft Worldwide Learning)의 UX 디자이너 제시 창(Jecy Chang)으로부터 이러한 물음에 대한 답변을 들어봤습니다.

어도비 XD를 사용하면 아트보드의 크기를 조정하여 디자인이 큰 화면에서 어떻게 표시되는지 빠르게 테스트해 볼 수 있습니다.

‘모바일 퍼스트’ 전략이 항상 효과적입니까?

멀티스크린 디자인 작업 시 가장 먼저 고려해야 할 것은 실질적으로 제품을 사용하게 될 최종 사용자입니다.

“먼저 고객이 누구이고, 웹 사이트나 앱의 콘텐츠를 고객이 어떠한 방식을 통해 경험하게 될지를 생각합니다”라고 탈린은 설명합니다.

이에 대해 앤디는 “저도 마찬가지로 사람들이 특정 기능을 사용하는 지점 및 방식과 사람들이 기대하는 바가 무엇인지를 먼저 파악한 후 이를 바탕으로 디자인 작업을 시작합니다. 그런 다음, 주요 작업과 동작을 파악한 후 워크플로우와 데이터를 토대로 어떤 화면에 어떠한 기능을 넣을지 결정합니다”라고 말합니다.

탈린은 보통 “모바일 퍼스트” 접근 방식을 적용하거나, 최소한 모든 제약 사항을 감안한 후에 장기적으로 시간을 절약할 수 있는 접근 방식을 선택한다고 말합니다. 이에 대해 앤디는 모든 것이 완벽한 환경에서는 “모바일 퍼스트” 전략을 활용하는 것이 도움이 될 수 있지만, 프로젝트에 따라 데스크톱을 기반으로 작업하는 것이 더 효과적일 수 있다고 말합니다.

예를 들어, 선트러스트(SunTrust)의 경우 일부 기능은 웹 기반 애플리케이션에서 먼저 제공하고 추후 모바일 앱에도 적용되었지만, 모바일 수표 입금과 같은 다른 기능은 모바일 앱에서만 제공됩니다.

이에 대해 앤디는 다음과 같이 조언합니다. “모바일에서 필요하고 웹/데스크톱 버전으로 확장해야 하는 주요 기능이 불분명한 경우라면 모바일 퍼스트 전략이 효과적입니다. 하지만 엔터프라이즈 애플리케이션의 경우 최대한 많은 양의 데이터와 기능을 사용하여 작업을 시작한 다음, 추후 모바일에 맞게 범위와 기능을 좁혀나가는 것이 합리적입니다.”

제시는 이에 동의하며, “표준처럼 자리잡은 모바일 퍼스트 전략을 채택하더라도 대부분 경우 모든 콘텐츠를 대형 캔버스에 추가하여 레이아웃 형태로 개념을 구상해야 합니다. 그런 다음 필요에 따라 기능을 숨기거나 사용자에게 보이지 않도록 하는 방식으로 작은 화면에 맞게 덜 중요한 콘텐츠를 하나씩 제거하는 거죠”라고 말합니다.

또한 제시는 콘텐츠를 보게 될 잠재 고객과 화면 크기를 먼저 정한 다음, 세 가지 주요 문제점을 강조한 디자인을 개발 팀에 전달하여 필요한 기본 프레임워크에 대한 아이디어를 제시한다고 말합니다.

반응형 크기 조정을 통해 모바일용 디자인을 대형 태블릿/웹에 맞게 확장할 수 있습니다.

앤디는 여러 화면에 맞게 구성해야 하는 기능의 경우 일관성을 유지하기 위해 공통된 요소를 찾을 것을 권장합니다.

“모든 디바이스에서 100% 일관되어야 하는 것은 아닙니다. 하지만 특정 기능을 찾는 데 도움을 주는 정보 아키텍처와 같은 요소는 일관되어야 합니다. 저는 항상 공통된 요소와 핵심 기능부터 살펴본 후 각 화면의 미묘한 차이를 고려합니다”라고 앤디는 말합니다.

탈린의 경우 콘텐츠와 탐색 영역에 대한 견고한 기반을 만든 후 해당 레이아웃을 다른 태블릿 화면 크기에 맞게 조정합니다.

“계층 구조, 레이아웃, 탐색 영역부터 조정합니다. 화면 크기가 작은 경우에는 탐색 옵션을 축소하거나 세로 방향의 레이아웃을 선택해야 할 수 있습니다. 크기가 확장되면 더 많은 정보를 표시할 수 있습니다. 대부분 경우 이렇게 조정해도 극적인 변화가 나타나는 것은 아니지만, 디자인 레이아웃을 리팩토링하면 웹 사이트 또는 앱 경험을 개선할 수 있습니다”라고 탈린은 말합니다.

탈린은 이러한 과정을 거친 후 타이포그래피에서 개별 요소의 크기와 스타일링을 수정합니다. 그는 최근 출간된 팀 브라운(Tim Brown)의 유연한 문자 설정(Flexible Typesetting)을 추천하면서 반응형 디자인의 문자를 설정하기 위한 권장 사항을 따르면 더욱 명료하고 액세스 가능한 디자인을 만들 수 있다고 설명합니다.

다양한 화면에 맞게 디자인을 조정하기 위해서는 격자를 만들고 문제점을 추려볼 것을 앤디는 권장합니다. 약간의 반복 작업이 필요하지만 다양한 툴을 사용해 시간을 단축할 수 있습니다.

반응형 크기 조정 활용 사례

반응형 크기 조정 및 반복 그리드를 통한 시간 단축

“어도비 XD의 반응형 크기 조정을 통해 각 요소들이 화면 크기에 맞게 어떻게 확장되는지를 확인할 수 있습니다. 이는 버튼, 카드, 탐색 요소, 이미지가 어떻게 작동하는지 확인할 때 특히 유용합니다. 약간의 조정이 필요하기는 하지만, 반응형 크기 조정을 통해 작업의 약 80% 정도를 수행할 수 있습니다.”

앤디는 설정 작업 또한 중요하다고 말합니다. 텍스트 상자나 이미지와 같은 요소가 의도하지 않은 방식으로 확장되는 경우 각 요소에 대한 고정점이나 정렬을 수동으로 설정하고 조정할 수 있습니다.

탈린은 이에 동의하며 반응형 크기 조정 기능을 에셋 패널과 같은 다른 기능과 함께 사용할 경우 멀티스크린 디자인 작업을 빠르게 시작할 수 있다고 말합니다. 또한 이동 중에도 디자인을 유연하게 변경할 수 있고 레이아웃을 원활하게 업데이트할 수 있는 점을 장점으로 꼽았습니다.

“반응형 크기 조정 기능은 디자인 작업을 처음 시작할 때 가장 많이 사용했으며, 이후에도 종종 사용했습니다. 한 가지 팁을 드리자면, UI 확장 방식에 대한 규칙을 정하면 일관성을 유지하고 화면 크기에 맞게 디자인을 조정할 수 있습니다”라고 탈린은 설명합니다.

탈린은 반응형 크기 조정 기능을 최대한 활용하기 위해 그룹별로 체계적으로 구성할 것을 권장합니다. 이를 통해 캔버스에 있는 객체 간의 관계를 정의할 수 있기 때문입니다(아래 이미지 참조).

반복 그리드는 콘텐츠를 대규모로 디자인할 때 일관성을 유지할 수 있는 가장 효과적인 방법입니다. 이를 통해 새로운 아이디어를 시도해볼 수 있고 여러 디자인을 테스트하거나 다양한 색상과 레이아웃 옵션을 활용해 볼 수도 있습니다.

탈린은 “특히 콘텐츠가 많이 사용되는 레이아웃의 경우 반복 그리드를 사용해 하나의 열로 구성된 레이아웃에서 여러 열로 구성된 레이아웃으로 신속하게 확장할 수 있으며, 동시에 콘텐츠의 흐름을 조정할 수도 있습니다”라고 설명하며, 다른 작업자들과 작업을 동기화하기 위해 구글 시트(Google Sheets)와 같은 플러그인을 함께 사용할 것을 제안합니다.

제시는 목록, 표, 메뉴를 디자인할 때 반복 그리드를 사용합니다. 반복적으로 표시되는 요소에 메타데이터가 포함된 경우 반복 그리드를 사용해 기본 레이아웃을 디자인한 후 필요에 따라 텍스트 또는 이미지를 변경합니다. 화면 크기에 따라 그리드 프레임을 변경하고, 간격과 글꼴 크기를 수정합니다.

반복 그리드를 사용해 여러 필드를 간단하게 만들 수 있습니다.

반복 테스트

탈린과 앤디는 항상 디자인을 크게 확장하여 미리 보고 테스트할 것을 권장합니다. 이는 주요 문제를 파악하기 위한 가장 쉽고 효과적인 방법입니다.

“디자인을 적용하려는 모든 화면 크기와 문제점을 테스트해보면서 디자인이 어떻게 표시되고 작동하는지 살펴봐야 합니다. 이러한 세부적인 요소들을 직접 확인한 후 내부 팀원들과 공유하는 것이 좋습니다”라고 앤디는 조언합니다.

탈린은 디자인 프로세스 전반에서 항상 XD의 미리 보기 창 또는 XD 모바일 앱을 사용하여 디바이스에서 주요 변경 사항은 물론 사소한 조정까지 모두 테스트합니다. 탈린은 “직접 테스트해보기 전까지는 12px 텍스트 크기가 아이폰 X에서 어떻게 표시되는지 알지 못합니다”라고 설명합니다.

탈린은 이러한 테스트 과정을 거쳐 만족스러운 결과가 나왔을 때 비로소 디자인을 공개합니다.

“이러한 과정을 거치면 기본적인 오류나 일관성 문제, 디자이너의 편향성이나 세부 사항에 너무 치우쳐서 놓치게 되는 요소 등이 드러나게 됩니다”라고 앤디는 설명합니다.

앤디는 디자인을 내부 팀과 공유하여 테스트하기도 합니다.

“XD를 사용하면 팀원은 물론 여러 이해관계자들이 화면에 주석을 달 수 있습니다. 이는 매우 훌륭한 기능입니다. 실제 사용자를 대상으로 디자인을 테스트하기 전에 많은 사람이 살펴보고 다양한 의견을 디자이너에게 전달할 수 있기 때문이죠. 또한 문제를 해결하는 과정에서 놓치게 되는 사항도 이 과정에서 발견할 수 있습니다. 이러한 문제는 종종 화면 관련 문제보다 더 큰 문제인 경우도 있습니다”라고 앤디는 말합니다.

이러한 모든 것을 종합해볼 때 제 답변은 ‘상황에 따라 다르다’는 것입니다. 디자인 프로세스는 프로젝트마다 달라질 수 있지만 보유하고 있는 툴을 효과적으로 사용하면 시간을 크게 줄일 수 있습니다. 툴을 통해 디자인을 효과적으로 조정하거나 대부분 작업을 수행할 수도 있기 때문입니다. 이로써 실제 사용자를 대상으로 디자인을 테스트한 후 그에 따라 세부적으로 조정하는 데 더 많은 시간을 할애할 수 있게 되고, 결과적으로 모든 디바이스에서 사용자의 기대에 부응하는 디자인을 빠르게 선보일 수 있게 됩니다.

UX에 대한 유용한 정보를 이메일로 받아보려면 어도비의 경험 디자인 뉴스레터를 구독하십시오.

원문보기

출처 : 어도비블로그(https://blogs.adobe.com/creativedialogue/creative-dialogue/responsive-design-multiple-screens-tips/)