폴더블 스마트폰의 화면 확장 사용성 강화를 위한 UI 가이드라인 :갤럭시 폴드 앱 서비스를 중심으로

스마트폰 제조사, 소프트웨어 개발사 중에서는 삼성의 원 UI(ONE UI)와 구글의 머티리얼 디자인 3(Material Design 3)에서 폴더블 디바이스를 위한 디자인 가이드라인을 제시하고 있다. 삼성 원 UI 가이드라인의 경우 폴더블은 태블릿과 같은 대화면 UI 섹션과 통합되어 전체 가이드라인 중 극히 일부인 폴더블 & 대화면(Foldable & Large Screen) 메뉴에서만 다루고 있는 실정이다. 삼성은 폴더블 디자인 가이드라인을 통해 ‘모든 스크린에 대응되는 반응형 레이아웃을 기본으로 할 것’, ‘화면 분할 등을 이용하여 확장된 공간을 낭비하지 말 것’, ‘한 번에 더 많은 정보를 보일 것, 동시에 더 많은 작업을 할 수 있도록 디자인할 것’을 제시하고 있다[7]. 가이드라인의 핵심을 요약하면 ‘확장된 메인 스크린을 통해 동시에 더 많은 정보의 양을 보여줄 것’이라 할 수 있다. 삼성 원 UI의 폴더블 인터페이스 가이드라인은 관련 연구가 많지 않은 초기 단계에서 제시된 가이드라인으로써의 의의는 있지만 폴더블 폼팩터를 위한 별도의 디자인 가이드라인을 제시한 것이 아니라 기존 태블릿 UI 가이드를 기반으로 하기 때문에 화면 전환의 결과인 메인 스크린의 확장 상태만을 기준으로 하고 있는 점과 폴더블 폼팩터의 화면 확장에 따른 구체적인 레이아웃 체계의 가이드는 다루고 있지 않은 한계가 존재한다. 반면 구글의 머티리얼 디자인 3은 대화면을 위한 가이드라인(Design for Large Screens)과 폴더블 디바이스(Foldable Devices)를 위한 가이드라인을 구분하여 설명하고 있다[8]. 구체적으로 보면 기기의 하드웨어 특징과 환경에 대한 고려(Device & Environment), 포스처(Postures), 도달 가능성(Reachability), 중앙 힌지와 주름(Center Hinge), 화면 분할(Dividing the Screen)에 대해 고려할 것을 언급하고 있다. 그중 폴더블의 메인 디스플레이는 접혀있는 상태와 달리 두 개 이상의 열을 사용하는 분할이 가능한데, 기존의 창을 확장하는 것과 다른 기능을 하는 창들을 결합하는 것의 개념을 구분하고 있는 것이 특징이다(Extend or Combine Windows). 창의 확장은 화면을 펼칠 때 분할을 통해 한 화면에서 더 많은 항목을 보여주는 것을 의미한다. 반면 창의 결합은 기존 모바일 환경에서는 별도의 스크린으로 나타났던 것이 화면을 펼칠 때 하나의 화면에 분할되어 나타나도록 하는 것으로 태블릿 환경의 스플릿 뷰(Split View)와 유사한 개념이다. 이러한 화면 분할 UI를 구성할 때 분할 과정에서 두 개 이상의 열이 개별 콘텐츠 영역을 좁힐 수 있고, 복잡한 항목 분할 시에는 두 열에 걸쳐있는 내용의 가독성이 떨어지는 것에 주의해야 함을 언급하고 있다. 구글의 가이드라인은 화면의 접힘과 펼침, 그리고 분할에서의 결합과 확장 개념을 제시한 점에서 매우 유용하지만, 예시와 함께 가능·불가능(Do, Don‘t) 방식으로 명료하게 구분한 구글의 다른 가이드라인 항목과는 달리 구체적 예시 제시가 부족한 한계점이 있다. 본 연구는 삼성 원 UI 가이드라인에서 제시한 더 많은 정보의 양이라는 기준과 구글 머티리얼 가이드라인의 창들의 분할과 결합 개념을 바탕으로 시각 요소의 양에 따른 레이아웃 체계에 대한 더 구체적인 가이드라인을 제시하고자 한다.

현 폴더블용 상용 앱 서비스는 대부분 기존 바형 폼팩터에 기반한 모바일 UI를 그대로 적용하고 있는 실정이다. 좀 더 구체적으로 확인하기 위해 유튜브, 코레일톡, 카카오톡과 같은 분야별로 많이 활용되는 3개의 앱 서비스를 갤럭시 폴드에서 직접 구동해 보았고, 접힌 상태에서 사용되는 커버 디스플레이 대비 물리적으로 확장된 메인 디스플레이에서의 레이아웃 개선이 이루어진 경우와 이루어지지 않은 경우로 크게 나누어볼 수 있었다. 전자에 해당하는 애플리케이션 예는 유튜브로 자동으로 확장된 영상의 크기를 통해 물리적인 영역 증가만으로 사용성이 향상된 사례였다. 반면 후자의 서비스는 기차 예매 서비스인 코레일톡이 그 예로 확장된 화면의 레이아웃은 단순히 이미지와 여백이 확대를 통한 방식을 적용하여 보여주는 내용의 양도 동일할뿐더러 오히려 레이아웃도 부자연스러워 화면 확장의 의미가 떨어졌다. 이러한 문제는 영상 및 텍스트와 같은 정보 콘텐츠를 시청하거나 읽으며 소비하는 서비스보다 기차 예매 및 금융거래와 같이 특정 기능 수행을 목적으로 하는 다수의 서비스가 공통으로 가지고 있는 문제로 보인다. 반면 카카오톡은 화면 확장 시 폴더블 스마트폰에서도 태블릿 UI 레이아웃이 그대로 구동되도록 설계되어 있다. 이 경우 화면을 펼쳤을 때 채팅방 목록을 함께 볼 수 있도록 개선은 되어 있으나, 태블릿 대비 면적이 좁은 폴더블 스마트폰의 특성상 사이드바와 메인 콘텐츠의 비중이 거의 같아져 특정 페이지에서는 지나치게 좁거나 복잡해지는 문제가 발생한다. 서비스 구동 결과 기존 바형 모바일 UI를 폴더블에서 그대로 사용할 경우 선행 가이드라인의 더 많은 정보의 양 제시라는 조건을 충족하지 못하는 경우가 다수였다. 또한 폴더블 스마트폰에 기존 태블릿 UI를 적용하는 경우에도 2단 분할 구조를 그대로 사용하고 있었으며 태블릿 대비 협소한 폴더블 스마트폰의 면적에서는 레이아웃 문제가 있음을 발견할 수 있었다. 이처럼 현 상용 서비스들의 부족한 펼침 화면 체계와 활용성은 폴더블 폼팩터가 아직 대중적이지 않은 점에 있겠지만, 폴더블 스마트폰 시장이 점차 커지고 있고 앱 생태계 또한 확장 추세이므로 펼쳐진 스크린의 활용도를 높일 수 있는 구체적인 레이아웃 가이드라인을 마련하는 것이 중요한 시점이다.

Fig. 1.

Screens of the Three Commercial Services Before and After Unfolding

모바일 디바이스는 협소한 공간에 데스크탑에서 사용하던 다량의 정보를 담을 수 있도록 하기 위해 텍스트, 이미지의 크기와 정보량 사이의 절충을 요구한다[9]. IOS, 안드로이드와 같은 모바일 운영체제들은 여러 크기의 장치들 사이에서 일관된 UI 형태와 크기를 유지할 수 있도록 애플리케이션의 구성요소를 상대 크기로 지정하는 반응형 UI를 적용하여 화면 크기별 정보의 양을 조정하고 있다. 구체적으로 반응형 설계는 그림 2과 같이 가로 폭의 일정한 분기점을 설정하고, 특정 기기의 가로 폭이 지정된 분기점을 넘길 경우, 모바일, 태블릿, 데스크탑 기준으로 변경된 레이아웃이 제시되도록 하는 것을 기본 원리로 한다[10]. 반응형 UI의 구성요소는 화면 비율에 기반하여 고정된 그리드가 아닌 유동형 그리드 위에 배치되며, 내부에 사용되는 이미지와 미디어 역시 비율에 맞도록 유동적으로 변환되는 특징을 가지고 있다[11]. 폴더블 스마트폰의 메인 디스플레이에서 기존 서비스를 구동할 때 발생하는 문제점의 원인은 기존 모바일 디스플레이와는 다른 정사각형에 가까운 비율 때문이다. 기존 모바일 앱 중 활용도가 많은 360*800, 414*896, 360*640 해상도는 모두 높이(Height)가 너비(Width)보다 2배 가까이 큰 직사각형의 형태를 하고 있다[12]. 즉, 세로로 긴 직사각형의 형태에 맞춰 요소를 배치하였기 때문에 화면을 펼친 후 너비가 두 배가 되는 폴더블 스마트폰의 메인 스크린 비율을 고려하지 않아 그림 2의 하단과 같이 정상적 레이아웃 반영이 안 되는 것이다. 갤럭시 폴드의 출시 이후 실제 UI 요소의 배치가 어긋나거나, 이미지, 텍스트 등이 너무 크거나 작게 조절되어 미관을 해치는 문제를 지적하는 사용 후기와[13] 아직 점유율이 낮은 폴더블 스마트폰을 위해 별도의 해상도 지원 작업에 어려움을 보이는 중소 개발업체들의 반응이 존재하고 있다[14]. 폴더블 폼팩터의 대중화를 위해서는 모바일과 태블릿 사이에서 효율적 정보 배치를 위한 폴더블 스마트폰에 최적화된 UI 체계가 필요함을 알 수 있다.

Fig. 2.

The Breaking Point in The Responsive Layout and Problem in Foldable Mobile Environment

(1) 화면 구조

화면 구조는 그리드(Grid), 마진(Margin), 그리고 거터(Gutter)를 활용한 배경 화면의 기본 골격 구조를 의미한다. 접고 펼치는 화면 전환에 따른 콘텐츠 배치의 효율성을 위해 몇 단 그리드를 활용하는지를 포함한 행(Row)과 열(Column)의 개수 체계 변동성 파악이 중요하다. 기존 반응형 디자인에서는 해상도별로 디자인 구성요소의 간격 조절과 정렬을 통해 기기 간 디자인 일관성을 유지하고 있다. 하지만 폴더블 스마트폰의 경우 언급한 그리드와 공간 비율이 체계적으로 고려되지 않아 인위적으로 늘어난 공백으로 인해 시각 요소들이 분산되는 등 화면 구조의 효율성을 떨어뜨리고 있다.

(2) 시각 요소의 크기

시각 요소의 크기는 사진 등의 이미지와 그래픽 디자인 요소, 버튼 등의 UI 컴포넌트를 포함한 시각 요소의 크기 변화에 관계된 내용이다. 이미지와 더불어 그래픽은 점, 선, 면 형태의 기본적인 요소들에 의해 만들어지며 비율에 기반하여 유동적으로 크기가 조절되는 유동형 이미지(Flexible Images)는 반응형 레이아웃을 구성하는 핵심적인 기술 요소이다[11]. 복잡한 콘텐츠의 효율적인 구성을 위해 그래픽 요소를 이용하여 기기별 해상도의 분기점별로 다양한 모바일 패턴과 컨트롤 컴포넌트를 배치한다. 이때 그래픽 요소의 크기는 디바이스의 크기에 따라 한 화면에 보이는 시각 요소의 양과 스크롤 길이를 조절할 수 있어 레이아웃에 중요한 역할을 한다[20]. 특히 폴더블 스마트폰의 경우 하나의 기기에 두 종류의 스크린 사이즈가 동시에 존재하므로 화면을 펼치기 전후 시각 요소의 크기 변화는 레이아웃에 변화를 주며 이는 사용성에도 많은 영향을 준다.

(3) 정보 분량

텍스트는 정보 분량과 밀접한 관련이 있는 요소로 여러 가이드라인에서 기기 화면 사이즈에 맞게 가독성을 고려하여 서체 및 크기를 규정하여 사용하도록 하고 있다. UI 컴포넌트의 개수 또한 정보 분량과 관련이 많으며 안드로이드 운영체제에서는 구글이 제공하는 머티리얼 가이드를 통해 총 26개의 디자인 컴포넌트를 제공하고 있다. 컴포넌트는 사용 목적에 따라 정보 탐색을 위한 컴포넌트와 콘텐츠 제공을 위한 컴포넌트의 두 가지 형태로 나눌 수 있다[21]. 정보 탐색을 위한 컴포넌트는 앱 바(App Bar), 내비게이션(Navigation) 등이며 단일 스크린에서 고정된 위칫값을 갖고 한 번만 사용될 수 있는 특징을 가진다. 반면 콘텐츠 제공을 위한 컴포넌트의 경우 정보 및 콘텐츠를 사용자에게 전달하기 위해 사용되므로 콘텐츠 성격에 맞게 변형이 가능한 유기적 형태를 가지며, 컴포넌트 간의 조합과 반복이 가능하다. 독립적으로 사용 가능한 버튼(Button), 토글(Toggle), 체크박스(Checkbox), 라디오버튼(Radio Button)과 같은 셀렉션 컨트롤(Selection Controls)과 여러 컴포넌트를 조합하여 사용하는 카드(Card)와 리스트(List) 등이 이 콘텐츠 제공을 위한 컴포넌트에 포함된다. 반응형 UI에서는 콘텐츠의 양에 따라 조합할 수 있는 카드, 리스트 컴포넌트를 통해 주로 한 페이지에 보이는 시각 정보의 양을 조절할 수 있다. 본 연구는 여러 컴포넌트 중 화면을 접고 펼칠 때 가장 양적으로 많이 변화하는 카드와 리스트 컴포넌트를 주요 분석 도구로 선정하였다.

(4) 배치

배치는 위 세 가지 분석 도구들이 관계지어져 실제 레이아웃 될 때의 분석 도구로 접힌 상태와 펼친 상태에서 시각 요소의 크기와 정보 분량의 비중 변화를 비교함으로써 폴더블 기기를 펼쳤을 때 발생한 레이아웃의 문제를 도출할 수 있다.

Fig. 3.

Analysis Tool Model for Case Study

2장 3절에서 사전 구동 테스트를 통해 파악했을 때 코레일톡, 카카오톡 사례와 같이 특정한 기능 수행을 목적으로 하는 서비스의 경우 자동으로 확장된 글자와 그래픽의 크기만으로는 좋은 사용자경험을 줄 수 없음을 알 수 있었다. 따라서 본 연구는 유튜브, OTT, 이북 서비스와 같이 영상, 이미지 및 텍스트 콘텐츠를 큰 화면에서 직접 소비하여 사용자경험 측면의 만족도에 큰 문제가 없는 서비스는 분석 대상에서 제외하였고, 화면 펼침 시 다량의 시각정보로 화면 레이아웃 재구성이 필요한, 그리고, 특정 기능을 수행하는 것에 목적이 있는 서비스 분야를 대상으로 하였다. 구글 플레이스토어의 앱 서비스 카테고리를 기준으로 식음료, 금융, 커뮤니케이션 분야, 쇼핑 분야를 선정하였고 구체적 분석 대상 서비스는 2022년 2월 4주차를 기준으로 카테고리당 스토어 1위에 위치한 서비스들인 식음료-쿠팡이츠, 금융-KB스타뱅킹, 쇼핑-오늘의 집, 커뮤니케이션-카카오톡을 선정하였다.

서비스별 분석 화면은 구동 후 아무 조작을 하지 않은 상태의 가장 먼저 나타나는 랜딩 페이지로, 갤럭시 폴드 2 스마트폰을 이용하여 화면을 펼치기 전과 후의 스크린에서 각각 동일한 과업을 수행하는 과정을 캡처하였다. 이때 화면의 방향은 접힌 상태에서 펼친 후 바로 보이게 되는 세로모드를 기준으로 하였다. 또한 캡처 후 비교과정에서 인폴딩 폼팩터는 물리적 해상도와 픽셀 밀도가 서로 다른 두 개의 디스플레이를 사용하고 있으므로 화면 간 시각 요소의 크기 비교를 위해 통일된 기준을 설정하였다. 우선 갤럭시 폴드2의 메인 디스플레이의 해상도는 반응형 설계에서 사용자가 페이지에서 보이는 영역을 의미하는 뷰포트(Viewport) 크기인 884*1104 PX를 기준으로 하였다[22]. 커버 디스플레이의 경우 캡쳐 스크린샷을 메인 디스플레이의 세로 높이인 1104 PX에 맞추어 정비례로 축소한 결과인 400*1104 PX로 지정하였다.

쿠팡이츠는 쿠팡에서 서비스하는 배달 서비스로 음식의 메뉴 이름과 가격, 음식 사진 등을 바탕으로 사용자는 원하는 음식을 선택하여 주문할 수 있다. 음식명, 가격과 같은 소량의 텍스트와 음식 이미지 위주로 구성된다. 분석 결과 그림 4의 (1)번 화면 구조 측면을 보면 화면을 접고 펼칠 때 컬럼 변화와 같은 구조적인 변화는 발생하지 않았다. 펼친 화면에서도 별도의 분할 없이 1단 그리드가 사용되었으며, 화면 좌우의 마진은 접힌 화면, 펼친 화면 모두 18 PX로 동일하여 펼친 화면에서는 여백이 협소해 보이는 결과를 보였다. (2)번 시각 요소의 크기는 광고 배너의 이미지와 카드 컴포넌트가 가로 너비를 채우기 위해 정비례로 늘어나는 과정에서 4배가 넘는 비정상적인 확대가 일어나 펼친 후 이 둘이 과도한 면적을 차지하게 되었다. (3)번 정보 분량 측면에서는 식당명에 해당되는 제목 텍스트의 경우 화면이 확장된 만큼 한 번에 보이는 글자의 수가 증가하였다. 음식 카테고리 선택을 위한 컴포넌트인 이미지 버튼 또한 확장된 영역만큼 한 번에 볼 수 있는 항목의 개수가 늘어났다. 반면 음식점 목록인 카드 컴포넌트의 경우 펼친 후 함께 커져서 한 화면에서 볼 수 있는 목록의 수가 절반으로 줄어들고 스크롤이 필요한 하단으로 정보가 밀려 내려갔다. 종합적으로 (4)번 배치를 살펴보면 시각 요소 크기의 과도한 증가가 한 화면에서 볼 수 있는 항목의 개수를 현저히 줄여 항목 간 비교를 어렵게 하고, 밀려난 정보들은 많은 스크롤을 발생시켰다. 결국 화면을 펼쳤을 때, 시각 요소들이 함께 커져 오히려 시각적으로 답답할 뿐만 아니라 좋은 사용자경험을 주기 어려운 결과를 보였다.

Fig. 4.

Analysis of Coupang Eats Landing Page

KB 스타뱅킹은 국민은행에서 제공하는 인터넷 뱅킹 애플리케이션으로 텍스트 위주로 구성되어 있다. 분석 결과 그림 5의 (1)번을 보면 컬럼 등 화면 구조의 변화 없이 시각 요소의 크기만 가로 너비를 가득 채우는 형태로 확장되었다. 반면 세로 길이는 그대로 유지되어 달라진 비례에 따른 심미성 이슈가 생겼다. (2)번 시각 요소의 크기 항목에서는 카드 컴포넌트 내부에 있는 계좌 및 잔액 정보의 텍스트 분량, 크기 등 콘텐츠는 변화가 없고, 콘텐츠를 둘러싼 카드 컴포넌트의 가로 너비만 2.4배 확장되어 크기 구성의 비효율성이 발생 되었다. (3)번 화면 펼침에 따른 정보 분량에는 변화가 없었다. 은행 앱의 특성상 텍스트 요소인 잔액과 계좌번호 정보는 글자 수가 많지 않기 때문에 확장 시 더 보일 정보가 없어 마찬가지로 확대된 컴포넌트 크기만큼의 이점을 얻지 못하고 과도한 여백을 남기게 되었다. 계좌정보, 메뉴, 광고 배너 역시 펼친 후에도 정보 분량에는 변화가 없었다. (4)번 배치를 보면 (3)번 정보 분량은 같은데 (2)번 가로로만 길어진 시각 요소의 크기가 심미성을 떨어트리는 결과를 보였다. 이는 앞서 분석한 쿠팡이츠와 비슷한 문제이며 스크롤 조차 필요 없는 정보 분량으로 큰 화면을 효율적으로 활용하지 못하고 있다.

Fig. 5.

Analysis of KB Bank Landing Page

오늘의 집은 인테리어 관련 정보를 공유하고, 인테리어 용품을 구매하거나 시공업체를 중개해주는 쇼핑 플랫폼이다. 분석 결과 그림 6을 보면 첫 번째 사례인 쿠팡이츠와 비슷하나 한 화면에 보이는 많은 상품 이미지 수를 늘리기 위해 펼치기 전 2단 컬럼이 펼친 후 2단 컬럼으로 유지되어 이슈가 발생하고 있다. (1)번 화면 구조는 언급한대로 펼치기 전, 후 모두 2열 컬럼을 활용하여 펼침에 따른 구조적인 변화는 없었다. 반면 (2)번 시각 요소의 크기의 경우 동일 컬럼 수로 아이콘과 광고 이미지는 5배 이상 확대되었다. 쇼핑앱 특성상 확대에 따른 상품 검색의 장점은 있으나 너무 과도한 확대가 적용되어 보인다. (3)번 정보 분량 측면에서는 사진의 과도한 확대로 한 눈에 보여지는 정보량이 줄어들고 스크롤이 생성되어 항목 간 비교를 어렵게 하고 있다. 반면 텍스트는 펼쳐진 너비만큼 더 많은 글을 볼 수 있어 펼친 후의 이점이 있었다. (4)번 배치를 보면 화면을 펼친 후 시각 요소들의 과도한 확대로 인해 한 화면에 보이는 정보의 양이 줄어들어 오히려 펼치기 전보다 좋지 못한 사용자경험을 줄 수 있어 보인다.

Fig. 6.

Analysis of Today’s House Landing Page

카카오톡은 국내에서 가장 많이 이용되는 메신저 서비스이다. 분석 결과 그림 7을 보면 카카오톡 앱은 (1)번 화면 구조 측면에서 화면을 펼칠 때 태블릿에서 적용되던 UI가 구동된다. 2개 컬럼은 본래 각자 다른 정보를 제시하는 역할을 수행해야 하지만 현 랜딩 페이지는 우측면은 빈 공란으로 제시되고 있다. 비록 화면을 인위적으로 늘린 구조보다는 시각적 불편함은 없더라도 공란 컬럼보다는 랜딩 시 정보제시에 대한 고민이 필요해 보인다. (2)번 시각 요소의 크기를 보면 프로필과 광고 이미지, 대화방 목록을 보여주는 리스트 컴포넌트의 크기의 경우 펼치기 전과 거의 비슷한 수준으로 유지되고 있다. (3)번 정보 분량 측면을 보면 펼칠 시 2단 컬럼으로 분할되고 그중 좌측 컬럼은 펼지기 전 대비 펼친 후의 대화방 목록의 개수와 보이는 글자 수는 큰 변화는 없어 정보의 분량은 비슷하다. 우측 컬럼은 채팅창으로 활용하나 랜딩시는 공란이어서 전체 정보량은 동일하다. (4)번 배치의 경우 (1)번 2단 컬럼으로 구조 변화가 일어나더라도 (2)번 시각요소의 크기 혹은 (3)번 정보 분량은 비슷하게 유지되어 펼침에 대한 특별한 긍정적 사용자 경험을 기대하기 어려워 보인다.

Fig. 7.

Analysis of Kakao Talk Landing Page

배달 서비스의 랜딩 페이지는 여러 음식 카테고리와 가게 들의 비교를 통해 원하는 매장과 메뉴를 빠르게 선택하고 주문을 하는 것이 중요하므로 개별 요소의 크기가 큰 것보다 더 많은 요소를 보이게 하여 서로 비교할 수 있게 하는 것이 유리하다. 그러므로 본 연구의 제안 가이드라인은 (1)번 화면 구조를 1열 구성에서 2열 구성으로 바꾸고 좌우 열의 화면 역할을 나누는 방식으로 구조를 변경하였다. (2)번 시각 요소의 크기는 과도한 크기 확대의 개선을 위해 펼치기 전과 동일하게 유지시켰으며 이를 통해 남은 영역은 다음과 같이 (3)번 정보 분량을 늘리기 위해 활용시켰다. 접힌 상태에서 가로 스크롤 우측에 상당수 가려져 있던 한식, 양식 등 스크롤 없이 한 눈에 보이는 음식 유형 버튼 (3)-a의 개수를 기존 9개에서 20개로 제시하여 원하는 음식 유형을 빠르게 선택할 수 있도록 하였다. 부정적인 사용자 경험을 주는 요소였던 매장의 목록을 보이는 카드 컴포넌트 (3)-b는 기존 한 눈에 1.5개 밖에 보이지 않았다면, 본 가이드라인은 3개까지 보일 수 있게 개선하였다. (4)번 배치의 경우 2컬럼으로의 화면 구조 변화를 통해 각종 시각 요소가 펼친 화면 가로폭의 반이상 커지지 않게 배치하여 한 눈에 볼 수 있는 정보량 감소 문제를 해결하였다. 마찬가지로 음식점 목록 또한 한 눈에 기존보다 2배의 수가 보일 수 있게 배치하여 사용자 경험을 향상시켰다.

뱅킹 서비스의 현 랜딩 페이지는 화면 구조의 변화 없이 컴포넌트의 가로 크기만 화면을 가득 채우고 있어 과도한 여백이 발생하는 문제가 있었다. 또한 화면을 펼치더라도 늘릴 수 있는 정보의 양이 부족하였다. 따라서 본 제안은 이의 개선을 위해 (1)번 화면 구조의 경우 2열 분할로 구성하여 (2)번 시각 요소의 크기가 가로로 비정상적으로 늘어나지 않게 조정하였다. 반면 남은 영역은 (3)번 정보 분량을 늘리기 위해 다음과 같이 활용하였다. (3)-a의 경우 랜딩 페이지에서 보이는 각 계좌의 거래 명세 중 기존 클릭 절차의 불편함이 있었던 거래 내역 일부 정보를 미리 보이게 하여 사용성을 개선했다. 아울러 전체 메뉴로 이동하는 카드 컴포넌트인 (3)-b의 경우 숨겨져 있던 전체 메뉴의 일부가 미리 보이게 수정하여 한 눈에 볼 수 있는 정보량을 늘렸다. (4)번 배치를 보면 2단으로의 화면 구조의 변화를 통해 시각 요소의 크기를 펼치기 전 상태와 같게 유지시켜 비정상적인 가로폭 증가로 인한 심미성 저하를 방지하였다. 이를 통해 확보된 공간에는 접힌 상태에서는 볼 수 없었던 정보를 미리 확인할 수 있게 배치하여 화면 펼침 필요에 대한 긍정적 경험을 강화하였다.

쇼핑 서비스는 식음료 배달 서비스 사례인 쿠팡이츠와 비슷하나 한 화면에 보이는 많은 상품 이미지 수를 늘리기 위해 펼치기 전 2단 컬럼 적용이 펼친 후 동일 2단 컬럼으로 유지되며 이에 따른 또 다른 시각 요소 확대의 이슈가 발생하고 있었다. 따라서 본 제안은 (1)번 화면 구조의 경우 펼친 후 3단까지 분할되기에는 너무 복잡성을 야기하므로, 펼치기 전, 후 모두 2열 컬럼 그리드의 구조는 유지하지만 기존 요소의 과도한 확대에 따른 세로 스크롤 생성에 따른 정보 가림이 생기는 문제를 개선하기 위해 한 눈에 볼 수 있는 정보의 양은 유지하며 쇼핑몰 항목 사진을 시원하게 볼 수 있는 방법으로 가로 스크롤 혼용 방식을 채택하여 개선하였다. (2)번 시각 요소의 크기 측면에서 현 앱의 경우 아무리 사진 검색이 중요한 쇼핑몰이어도 상품 사진 (2)-b와 같은 상품 이미지의 크기가 4배 이상 증가됨에 따른 스크롤 발생으로 사용성이 현저히 떨어지므로, 본 제안 가이드라인은 (2)-b 상품 이미지를 2.3배 크기로 확대시켜 사진 가독성을 향상시켰다. 또한 스크롤 없이 한 번에 비교하며 볼 수 있는 정보량을 증가시켜 쇼핑 경험을 강화하였다. (3)번 정보 분량은 시각요소 크기에서 언급하였듯이 스크롤 없이 한 번에 비교하며 볼 수 있는 이미지 크기와 연동시킨 정보량을 반영하여 (3)-b 상품 목록을 비교하기 위한 사용자경험을 개선하였다. (4)번 배치를 보면 접힌 상태보다 2.3배 증가한 이미지의 크기를 통해 상품의 세부 형태까지 확인할 수 있도록 도움을 주었고, 한 화면에 보이는 항목의 개수 역시 2배 가량 증가시켜 상품 비교 시 더욱 긍정적인 사용자 경험을 줄 수 있게 배치 하였다.

펼친 화면에서 태블릿 UI 가이드라인이 적용된 카카오톡은 기본적으로 2단 컬럼이 사용되어 화면을 펼치더라도 시각 요소가 화면을 과도하게 채우며 심미성을 해치는 문제는 발생시키지는 않지만, 랜딩 페이지에서 2단 컬럼의 우측 컬럼을 의미없이 여백으로 남겨두어 화면 활용도가 떨어지는 문제가 있었다. 낭비되는 공간 문제를 해결하기 위해 (1)번 화면 구조와 (2)번 시각 요소의 크기는 기존과 동일하게 유지시키고 우측 빈 공간에 다음과 같은 (3)번 정보 분량을 추가하여 이 문제를 개선시켜 보았다. (3)-a는 카카오톡에 이미 존재하는 ‘채팅방 고정’ 기능으로 사용자가 단체 채팅방, 혹은 중요 정보 공지방과 같이 중요하다고 생각되는 채팅방을 상단에 고정해두는 기능이다. 접힌 상태에서는 단순히 상단에 고정되어 있어 기존 채팅방 목록과 큰 차이가 없으나 본 연구의 제안 랜딩 페이지에서는 고정 채팅방을 우측 공간으로 이동시켜 최근 올라온 채팅 내용까지 미리 보여주게 수정하였다. 아울러 좌측의 일반 채팅방 목록인(3)-b는 고정된 채팅방이 차지하던 영역만큼 더 많은 목록을 볼 수 있게 개선하였다. (4)번 배치의 경우 2단 컬럼의 화면 구조는 유지시켰으나 우측 컬럼의 경우 중요 채팅방에 올라오는 대화들을 개별적으로 확인할 필요 없이 한눈에 볼 수 있도록 대화방의 최근 채팅 내용 정보를 추가 배치하여 화면 펼침 전 대비 화면 펼침에 따른 긍정적인 이점을 강화하였다.