[Mobile] Foldable Device Development

Foldable Device 시장의 확대

세계 각 기업들에서 폴더블 폰 개발에 엄청난 돈을 쏟아붓고 있는 와중에 폴더블 폰의 시장 점유율은 꾸준히 늘어나고 있다. 구글 픽셀 폰도, 중국의 다양한 폴더블 폰을 내놓은 회사들도, 그리고 결정적으로 삼성의 갤럭시 z플립과 z폴드도 쉽게 떠오른다. 최근에 나온 z플립5에 반해서 삼성 매장 지나갈때마다 구경하는 중인데 볼때마다 그저 음,,, 저거 외부화면에서 앱들이 잘 실행되나? UI/UX가 다 구겨질 것 같은데라는 생각을 하게 된다. 따라서 폴더블 디바이스의 개발에 대해서 구글 매터리얼 디자인을 기반으로 한 안드로이드 공식 문서를 통해 간단히 알아보도록 하자.

(지금부터 나오는 내용은 https://developer.android.com/guide/topics/large-screens/learn-about-foldables?hl=ko 기반이며 아래에 나오는 대부분의 사진 자료 출처이기도 하다.)

달라진 UI/UX

출처: 구글 / 실제로 시중에 있는 기기들은 아니지만 미래에는 가능할지도?

위에서도 잠깐 언급했던 외부화면과 더불어 내부 화면, 즉 우리가 생각하는 스마트폰의 본 화면말이다, 그 부분에도 큰 차이점이 생겼다. 분명 한손에 들어오는 “핸드”폰인데 말이다. 각 기기가 제공하는 종횡비와 방향이 다양해졌고 이 기기들을 사는 소비자들은 분명히 이 기기들에서만 느낄 수 있는 특별한 경험들을 요구하게 되었다. z폴드처럼 화면이 커지는 경우에 소비자는 영상 스트리밍 앱을 보면서 훨씩 커진 화면에서 추가적인 컨트롤을 할 수 있기를 원하고 캘린더 앱에서는 한주가 아니라 한달의 캘린더를 보며 세부적인 일정을 한눈에 볼 수 있기를 원한다. 혹은 뉴스 앱을 사용하면서 한쪽으로는 텍스트를 읽고 한쪽으로는 기사에 대한 반응이 뜨길 바랄 수 있다. z플립과 같이 외부화면에서 핸드폰을 펴지 않더라도 간단히 상호작용을 통해 간단한 목표들을 해결할 수 있기를 기대한다. 그들은 당연하게도 그것을 기대하면서 폴더블 디바이스를 구매했다. 그리고 이것이 꽤나 높은 퀄리티로 충족되지 않는 다면 이들은 “이게 안되네” 혹은 “왜 이렇게 만들었어”라고 생각하며 하나씩 앱에 대한 부정적인 인식과 불편을 쌓아간다. 따라서 개발자들은 좋은 UX를 선사하기 위해 더 많은 기기에 대한 테스트를 진행하며 개발에 더 많은 시간과 비용을 쏟게 되었다.

반응형 vs 적응형

출처: https://yeon-design.tistory.com/26#googl

다양한 디바이스 환경에 맞춰 사이트를 디자인하는 방식에는 반응형과 적응형 두가지가 있다. 반응형 디자인은 하나의 디자인을 화면 크기에 반응하도록 개발하여 모든 화면 크기에 맞춰 보여주는 디자인이다. 보통 화면의 가로 넓이에 따라 콘텐츠나 디자인 요소를 조정해 제공한다. 따라서 반응형 디자인은 사람들에게 균일한 사용자 경험을 제시하고 적은 수의 레이아웃이 필요하기 때문에 구축이 쉽고 콘텐츠 업데이트가 한번에 이루어질 수 있어 유지보수 비용이 저렴하다는 장점을 가진다. 하지만 반응형은 한번에 모든 컨텐츠를 불러온 후에 화면 크기에 맞춰 자동으로 컨텐츠를 조정하기 때문에 로딩 속도가 느리고 장치별로 최적화되지 않은 디자인을 제공하기 때문에 오히려 떨어지는 UX 경험을 제공할 수 있다. 반대로 적응형 디자인은 특정 화면 크기에 적응할 수 있는 고정의 레이아웃으로 장치별 호환성을 고려해 여러 디자인 버전을 제작한다. 적응형은 각 디바이스의 특성이 고려된 레이아웃과 콘텐츠를 개별적으로 제공하기 때문에 사용자는 고도화된 맞춤형 디자인을 경험할 수 있고 반응형에 비해 빠른 로딩속도를 가진다. 반면 디바이스마다 특화된 디자인을 가지기 위해 숙련된 디자이너가 필요하며 개발 시 고려해야하는 기술적인 측면도 반응형에 비해 까다롭고, 업데이트 시 각 디바이스에 맞는 레이아웃을 모두 수정해야한다는 점에서 유지보수 비용이 많이 들며 인력과 시간이 많이 들어 비싼 구축비용을 가지게 된다.

폴더블 기기를 지원하는 것은 기본적으로 반응형 디자인에서 시작한다. 반응형 레이아웃을 사용하면 앱이 폴더블 기기의 접힌 화면과 펼친 화면의 다양한 디스플레이 크기에서 제대로 표시될 수 있다. 하지만, 접었을 때와 펼쳤을 때 화면 크기와 가로세로 비율의 차이가 매우 큰 경우에는 반응형 레이아웃으로 두 디스플레이를 최적으로 수용할 수 없기에 최적화된 사용자 환경을 제공하기 위해 적응형 디자인이 요구된다.

앱 UI는 다양한 화면 크기, 방향, 폼 팩터를 처리할 수 있도록 반응해야하고, 적응형 레이아웃은 사용할 수 있는 화면의 공간에 따라 변경된다. 이러한 변경은 레이아웃 조정을 통해 공간을 채우는 것에서부터 레이아웃을 완전히 바꾸어 추가공간을 활용하는 것까지 다양하다.

적응형 레이아웃을 짜는데 몇가지 조건이 있는데 간단히 살펴보자면, 먼저 레이아웃을 결정할 때 실제 하드웨어 값을 사용하지 않는다. 실재하는 고정 값을 기반으로 결정하면 UI가 사용할 수 있는 공간을 결정하는데 유용하지 않다. 특히 폴더블 디바이스들은 접었다 펴는 과정에서 하드웨어의 값이 물리적으로 변화하기도 하고, Z폴드와 같이 화면이 커서 태블릿처럼 활용할 수 있는 기기들의 경우에는 앱이 멀티 윈도우 모드로 실행될 수 있다. 이 방법을 따르면 모든 시나리오에서 앱이 제대로 작동하기 때문에 앱이 더욱 유연해진다.

또한, 유연한 중첩 컴포저블들은 재사용이 가능하다. 따라서 컴포저블들은 항상 재사용 되는 것을 고려해 전역 크기 정보에 종속되는 것을 지양해야 한다. 앞에서 말했듯, 컴포저블에 대해 실제 하드웨어 값을 사용하면 안되고, 현재 창 측정항목을 직접 사용해서도 안된다. 패딩 혹은 앱바와 같이 다른 구성요소가 있을 경우에는 컴포저블에 사용할 수 있는 공간의 양이 앱이 사용하는 전체 공간과 다를 수 있다. 따라서 컴포저블이 컴포저블 자체를 랜더링하는데 실제로 제공되는 너비를 사용해야 한다.

폴더블 상태 및 모드

폴더블 기기의 접힘은 화면을 두 부분으로 나누는데, 접힘 부분은 화면에서의 유연한 부분이거나 두 디스플레이를 구분하는 힌지일 수 있다. 이 폴더블 디스플레이에 대한 정보를 DisplayFeature 요소 목록으로 사용할 수 있다.

state: 기기의 접힘 상태(FLAT 또는 HALF_OPENED)

orientation: 접힘 또는 힌지의 방향(HORIZONTAL 또는 VERTICAL)

occlusionType: 접힘 또는 힌지가 디스플레이의 일부를 가리는지 여부(NONE 또는 FULL)

isSeparating: 접힘 또는 힌지가 두 개의 논리 디스플레이 영역을 생성하는지 여부(true 또는 false)

기기가 만약 HALF_OPENED된 상태인 경우에는 수평으로 접힌 탁자 모드 혹은 수직으로 접힌 책 모드가 가능하다. 이 두 모드에서는 앱 사용에 제한사항이 생긴다. 접힘 부분 근처의 UI컨트롤이 불편해 질 수 있으며 이 부분에 오버레이되는 텍스트는 읽기 어려울 수 있다. 따라서 모든 기기 상태에서 UI요소들에 엑세스할 수 있도록 레이아웃이 디자인 되어야 한다. 점힘부분에 오버레이되지 않도록 대화 상자나 팝업 메뉴를 배치하고 콘텐츠의 영역을 분할하는 등 세심한 UI구성이 요구된다.

앱 연속성

기기를 접거나 펼칠 때 앱은 순간적으로 정지되었다가 화면이 전환되면서 다시 시작되게 된다. 사용자가 느끼는 앱의 연속성을 유지하려면 앱 레이아웃을 다시 생성할 때 복원해야한다. 폴더블 기기의 다양한 화면 레이아웃은 서로를 보완하면서도 사용자 UX를 고려하여 설계 되어야 한다.

멀티태스킹

화면이 큰 폴더블은 멀티 윈도우 모드에서 멀티태스킹하는데 적합하고, 폴더블은 화면 분할 모드를 지원한다. 일부 경우 스테이징 매니저와 같이 이동 가능하고 크기 조절이 가능한 자유 형식 모드도 지원된다. Android 12(API 수준 31) 이상 버전은 큰 화면일 때 기본적으로 멀티 윈도우 모드로 설정되고 앱 구성과 관계없이 모든 앱이 멀티 윈도우 모드로 실행된다. 특히 큰 폴더블 폰을 사용하는 사람들은 태블릿과 마찬가지로 멀티태스킹에 대한 수요를 가지고 있을 확률이 높으므로 세 개 이상의 앱이 동시 실행되고 창의 크기가 변경되는 등의 경우를 고려하여 UI를 짜고 구축해야한다. 이 멀티태스킹 기능이 불러오는 또 하나의 기능으로는 드래그 앤 드롭이 훨씬 쉬워진다. 드래그 앤 드롭 상호작용은 생산성과 몰입도가 높은 UX를 가져온다.

앱 테스트

안드로이드 기기는 앱에서 기기 폼 팩터나 화면 크기, 디스플레이 모드, 상태와 관계없이 우수한 사용자 환경을 제공하기 위해 대형 화면 호환성 체크리스트라는 것을 제공한다.

• Tier 3(기본) — 대형 화면 지원: 사용자가 중요한 흐름을 완료할 수 있지만 최적의 사용자 환경은 제공되지 않습니다. 앱이 전체 화면(또는 멀티 윈도우 모드에서 전체 창)을 실행하지만 앱 레이아웃이 이상적이지 않을 수 있습니다. 앱이 레터박스 처리되지 않으며 호환성 모드로 실행되지 않습니다 앱이 키보드, 마우스, 트랙패드를 포함한 외부 입력 장치를 기본적으로 지원합니다.
• Tier 2(우수) — 대형 화면 최적화: 앱이 모든 화면 크기 및 기기 구성에 맞게 레이아웃 최적화를 구현하며 외부 입력 장치에 관한 고급 지원을 제공합니다.
• Tier 1(최고) — 대형 화면 차별화: 앱이 태블릿, 폴더블, ChromeOS용으로 설계된 사용자 환경을 제공합니다. 필요한 경우 앱은 멀티태스킹, 폴더블 상태, 드래그 앤 드롭, 스타일러스 입력을 지원합니다.

앱이 모든 안드로이드 기기에서 우수한 사용자 환경을 제공하게 하기 위해서는 Tier 2의 요구사항을 완료해야 하고, Tier 1의 요구사항은 굉장히 차별화된 앱에 대한 내용으로 특정 유형의 앱에만 적용될 수 있다.

실제 테스트에서 Tier 1의 폴더블 상태를 테스트할 때는 Android Emulator를 통해 듀얼 디스플레이 폴더블: Microsoft Surface Duo로 테스트하며, 아래 항목을 확인한다.

• 탁자 모드, 책 모드, 듀얼 디스플레이(예: Microsoft Surface Duo)를 비롯한 모든 폴더블 상태로 앱을 봅니다. UI 요소가 최적의 위치로 전환되는지 확인합니다(예: 미디어 컨트롤러가 탁자 모드에서 가로 화면 영역으로 이동).
• 앱 내에서 카메라를 활성화합니다. 기기가 접히거나 펼쳐지고 세로 모드 방향과 가로 모드 방향으로 회전할 때 카메라 미리보기가 올바른지 확인합니다. 기기를 펼친 상태로 미리보기가 전면 및 후면 화면에서 올바른지 확인합니다.

 

Reference

• https://developer.android.com/guide/topics/large-screens/learn-about-foldables?hl=ko

폴더블 알아보기  |  Android 개발자  |  Android Developers

• https://imaginovation.net/blog/designing-and-developing-apps-for-foldable-devices/

Foldable Devices: Developing Apps for Multi-Display Phones

• https://yeon-design.tistory.com/26#googl

적응형과 반응형 디자인의 차이점과 제작시 고려사항