폴더블에 맞춘다고 앱 화면을 억지로 늘리지 마세요

*원문을 번역한 글입니다.

*원문은 발행 이후 수정될 수 있으며, 본 번역은 발송 시점 기준으로 작성되었습니다.

폴더블폰은 2019년 삼성 갤럭시 폴드가 출시된 이후 시장에 존재해 왔지만, 사실상 안드로이드만의 영역이었습니다. 앱의 주 사용자가 미국에 있다면 폴더블 디자인은 우선순위가 낮았을 겁니다. 미국에서는 스마트폰 사용자 대부분이 iOS를 쓰기 때문입니다. 안드로이드 사용자 중에서도 폴더블 기기를 쓰는 사람은 소수였고요.

하지만 애플의 ‘아이폰 듀오’ 발표로 상황이 달라졌습니다. 이 제품 하나가 지금까지의 안드로이드 폴더블 생태계 전체보다 더 큰 화제를 모았습니다.

다양한 기기 형태에 맞춰 화면을 조정한 에어비앤비와 스포티파이 앱 사례

그동안 네이티브 앱을 설계하면서 폴더블을 고려하지 않았다면 충분히 이해할 만합니다. 특이한 형태의 기기에서 앱을 사용할 사람이 적다 보니 디자인과 개발에 투자할 필요성을 설득하기 어려웠으니까요.

이제는 고려해야 할 이유가 커졌습니다. 아이폰 듀오의 판매 전망은 밝으며, 2026년 말까지 폴더블 시장의 25%를 차지한 뒤 점유율이 더 높아질 것으로 예상됩니다.

폴더블 디자인을 어디서부터 시작해야 할지 막막하다면, 먼저 기기의 특성과 iOS·안드로이드에서 기대하는 사용 경험을 이해하는 것이 좋습니다. 두 플랫폼의 폴더블을 디자인 과정에 반영할 때 도움이 되는 원칙을 살펴보겠습니다.

핵심 원칙

폴더블이 복잡하게 느껴지는 이유는 한 기기에 여러 화면 크기와 가로세로 비율, 방향, 접힌 상태가 공존하기 때문입니다. 좋은 사용 경험을 유지하려면 사용 가능한 공간과 기기를 사용하는 방식에 따라 정보의 우선순위, 화면 구성, 조작 요소를 조정해야 합니다.

기기보다 사용 가능한 공간을 기준으로 설계하세요

“이 화면이 갤럭시 Z 폴드나 아이폰 듀오에서 어떻게 보일까?”보다 “앱에 주어진 창이 넓어지거나 좁아지고, 길어지거나 분할될 때 이 경험은 어떻게 작동해야 할까?”를 물어야 합니다.

하나의 디자인 체계가 다음 환경에 대응할 수 있어야 합니다.

일반 스마트폰

플립형 및 바카라처럼 펼치는 폴더블

태블릿이나 멀티태스킹 창

모바일부터 데스크톱까지 창 크기에 따라 달라지는 레이아웃. 출처: Android 개발자 문서

정보의 위계를 유지하세요

사용 가능한 공간이 바뀌어도 UI가 시각적으로 똑같을 필요는 없습니다.

달라져도 되는 것

탐색 메뉴와 조작 요소의 위치

화면에 표시하는 콘텐츠의 양과 밀도

열의 개수

보조 정보와 이미지의 크기

유지해야 하는 것

사용자의 주요 작업과 핵심 동작

콘텐츠의 정보 위계

탐색 방식과 사용자가 보고 있던 맥락

예를 들어 아이폰 듀오를 접었을 때는 ‘목록 → 항목 선택 → 상세 화면’ 순서로 콘텐츠를 보여줄 수 있습니다. 펼쳤을 때는 같은 콘텐츠를 왼쪽 목록과 오른쪽 상세 화면에 동시에 보여줄 수 있죠.

UI를 무작정 늘리지 마세요

큰 화면을 채우려고 기존 UI를 그대로 확장하면 간단해 보일 수 있습니다. 하지만 안드로이드는 화면을 여러 영역으로 나누고, 공간에 맞춰 레이아웃을 조정하도록 권장합니다.

권장하는 방식

콘텐츠의 최대 너비를 정하고 요소 사이 간격을 넓히기

여러 열과 보조 화면 영역 활용하기

화면 크기에 따라 격자형 배치가 달라지도록 만들기

피해야 할 방식

지나치게 긴 텍스트 줄(한 줄에 약 50자 정도가 적당합니다)

과도하게 커진 카드, 모달, 하단 시트, 이미지

태블릿 크기의 화면을 가로로 가득 채우는 버튼

지나치게 넓은 빈 공간

구글 픽셀 프로 폴드를 펼쳤을 때 화면 전체에 걸쳐 표시되는 유나이티드항공의 알림 설정

힌지를 고려해 설계하세요

기기에 따라 접히는 부분인 힌지는 터치 조작, 콘텐츠 가독성, 실제로 쓸 수 있는 화면 공간에 영향을 줍니다.

다음과 같은 중요한 요소가 힌지를 가로지르지 않게 배치하세요.

버튼이나 입력란, 특히 중요한 탐색 버튼

대화상자나 메뉴

중요한 텍스트나 이미지

일부 폴더블에서는 접힌 자국이 뚜렷하게 보입니다. 따라서 힌지를 화면의 ‘자연스러운 경계’로 생각하는 편이 좋습니다. 안드로이드와 iOS 모두 힌지 위치를 고려해 레이아웃을 조정하도록 권장합니다.

화면 중앙에 접힌 자국이 보이는 삼성 갤럭시 Z 폴드 4. 출처: The Verge

화면을 ‘영역’ 단위로 생각하세요

폴더블을 설계할 때는 다음처럼 생각하면 도움이 됩니다.

일반 스마트폰 → 주요 화면 영역 1개

펼친 폴더블·태블릿 → 서로 연관된 화면 영역 2개 이상

일반적인 레이아웃 패턴은 다음과 같습니다.

목록 → 상세 정보: 검색 결과, 메시지·이메일, 설정에 적합합니다.

탐색 메뉴 → 콘텐츠: 넓은 화면에서 탐색 메뉴를 계속 표시할 때 유용합니다.

주요 콘텐츠 → 보조 콘텐츠·조작 요소: 미디어, 지도, 양식에 유용합니다.

폴더블의 상태를 이해하세요

폴더블은 기기를 어떻게 놓거나 접느냐에 따라 사용 경험이 달라집니다. iOS에서는 이를 pose, 안드로이드에서는 posture라고 부릅니다.

접은 상태

이 기기는 기존 휴대폰처럼 작동하며, 접이식 기기의 외부 디스플레이를 사용합니다.

네이티브 모바일 환경에서 일반적으로 우선시하는 사항들을 고려하세요.

필수 정보와 주요 동작·빠른 실행

간결한 탐색 메뉴

한 손 조작

화면 구성 예: 받은편지함 목록 → 항목 선택 → 개별 이메일 상세 화면

완전히 펼친 상태

이 장치는 닫힌 상태에 비해 더 넓은 공간을 제공하며, 내부 디스플레이를 사용합니다 (바카라이나 조개껍질처럼 열립니다).

추가 공간을 다음과 같이 활용하세요:

화면을 오가는 단계는 줄이고 한눈에 보이는 콘텐츠는 늘리기

탐색 메뉴를 계속 표시하고 추가 조작 요소 보여주기

두 번째 화면 영역에 보조 정보 표시하기

화면 구성 예(바카라처럼 펼치는 기기): 받은편지함 목록(왼쪽) | 개별 이메일 상세 화면(오른쪽)

아이폰 듀오를 펼쳤을 때 왼쪽에는 채팅 목록, 오른쪽에는 개별 채팅을 보여주는 슬랙. 출처: Apple

반쯤 접은 상태: 탁상형

세로 방향의 힌지를 따라 기기를 반쯤 접으면 위쪽과 아래쪽에 별도의 영역이 생깁니다.

상단 영역: 콘텐츠, 비디오 또는 정보를 표시하는 데 사용됩니다.

하단 영역: 상단 영역에 대응하는 제어 또는 추가 상호 작용에 사용됩니다.

화면 구성 예:

상단 영역에는 비디오가 있고, 하단 영역에는 재생 제어 버튼이 있습니다(넷플릭스가 나타나는 방식과 유사).

참고: 모든 앱에 이 상태가 필요한 것은 아닙니다. 동영상 시청이나 게임처럼 활용도가 높은 제품에서 추가로 지원할 만한 형태입니다.

위쪽에는 게임 화면, 아래쪽에는 조작 버튼을 배치한 안드로이드 폴더블의 탁상형 사용 예. 출처: Digital Trends

반쯤 접은 상태: 바카라형

가로 방향의 힌지를 따라 기기를 반쯤 접으면 왼쪽과 오른쪽 화면이 뚜렷하게 구분됩니다.

다음과 같은 경험에 잘 맞습니다.

서로 관련된 정보를 읽거나 참고하기

목록 → 상세 화면

탐색 메뉴 → 콘텐츠 화면

화면 구성은 완전히 펼친 상태와 비슷하지만, 힌지가 콘텐츠를 둘로 나눕니다. 앱 두 개를 동시에 실행하는 데에도 사용할 수 있습니다.

기기 상태가 바뀔 때도 자연스럽게 이어지게 하세요

사용자는 작업 도중 폴더블의 방향을 가로에서 세로로 바꾸거나, 기기를 접었다 펼 수 있습니다. 이때 앱의 탐색 메뉴, 조작 요소, 시트 등은 새 화면에 맞게 바뀌어야 합니다. 동시에 사용자가 하던 일을 이어갈 수 있어야 하고, 플랫폼의 일반적인 사용 방식도 따라야 합니다.

기기 상태가 바뀌어도 같은 작업을 계속할 수 있어야 합니다. 다만 사용 가능한 공간을 잘 활용하도록 보여주는 방식을 정해야 합니다.

탐색

좁은 화면

하단 탐색 메뉴, 단계별 화면 이동, 뒤로 가기 등 모바일 탐색 방식을 사용합니다.

자주 쓰는 탐색 요소를 손이 닿기 쉬운 곳에 둡니다.

넓은 화면

항상 표시되는 탐색 메뉴, 세로형 탐색 메뉴, 측면 탐색 메뉴를 활용합니다.

모바일 탐색 요소를 넓은 화면에 맞춰 그대로 늘리지 않습니다.

기기 상태가 바뀔 때

사용자가 보고 있던 위치, 정보의 위계, 탐색 상태를 유지합니다.

화면 이동 기록을 예기치 않게 초기화하지 않습니다.

구글 픽셀 프로 폴드를 접거나 펼쳐도 정보의 위계와 탐색 상태를 유지하는 스포티파이

시트, 대화상자, 화면 위에 표시되는 요소

좁은 화면

한 가지 작업에 집중할 수 있도록 하단 시트나 전체 화면을 사용합니다.

조작 버튼을 손이 편하게 닿는 곳에 둡니다.

넓은 화면

가운데 배치한 대화상자, 화면 일부 너비만 차지하는 시트, 측면 패널, 보조 화면 영역을 사용합니다.

모바일용 시트나 대화상자를 화면 전체 너비로 늘리지 않습니다.

중요한 콘텐츠나 조작 요소가 접히는 부분에 걸치지 않게 합니다.

구글 픽셀 프로 폴드를 펼쳤을 때 너비가 조정되는 스포티파이의 하단 시트

화면 전환

기기를 접은 상태에서 펼친 상태로 바뀔 때의 애니메이션은 흐름이 이어지는 느낌을 줘야 합니다. 사용자가 새 화면을 이해하는 데 부담을 더해서는 안 됩니다.

우선할 것

사용 중이던 상태와 맥락 유지하기

사용자의 시선이 이어지도록 의미 있는 위치 변화에 애니메이션 적용하기

콘텐츠의 정보 위계 유지하기

피할 것

전체 화면을 다시 불러오거나 스크롤 위치를 잃는 일

탐색 상태나 입력 중이던 내용을 초기화하는 일

사용자가 하던 작업을 갑자기 바꾸는 일

플랫폼별 가이드

iOS

애플의 새로운 폴더블 가이드에는 디자인 과정에서 고려할 몇 가지 개념이 담겨 있습니다. 애플의 화면 배치 API는 크기와 가로세로 비율에 따라 동적으로 반응하는 레이아웃을 만드는 데 도움이 됩니다.

이 API를 잘 활용하려면 레이아웃 규칙, 크기 클래스, 시스템이 확보해 두는 영역, 기기 상태가 바뀔 때 구성 요소를 다시 배치하는 방식을 정의해야 합니다.

1. ‘크기 클래스’를 사용하세요

크기 클래스는 iOS 앱 화면에 가로와 세로 공간이 얼마나 있는지를 나타냅니다. 폴더블에서는 기기를 접은 각 상태마다 별도의 디자인을 만들기보다 ‘Compact’와 ‘Regular’ 크기 클래스를 기준으로 설계하세요.

Compact: 가로 공간이 좁고 세로 공간이 짧음

Regular: 가로 공간이 넓고 세로 공간이 김

큰 화면에 표시된 iOS의 Compact 및 Regular 크기 클래스. 출처: Apple Layouts

2. 시스템이 확보해 두는 영역을 고려하세요

아이폰 듀오에는 실제로 사용할 수 있는 공간에 영향을 주는 물리적 영역이 있습니다. 애플 생태계에서 시스템 UI 등을 피해 콘텐츠를 배치할 때 고려하는 안전 영역과 비슷한 개념으로, 힌지와 외부·내부 화면의 카메라가 여기에 포함됩니다.

앱 콘텐츠를 배치할 수 있는 범위를 정할 때 이러한 영역과 힌지, 안전 영역을 모두 고려해야 합니다.

아이폰 듀오 내부 화면의 힌지와 카메라를 위해 확보된 영역. 출처: Apple

아이폰 듀오 디자인을 더 알아보고 싶다면 애플이 공개한 짧은 영상 ‘Get ready for iPhone Duo’를 참고할 수 있습니다.

안드로이드

안드로이드의 반응형 디자인 가이드는 기기의 물리적 화면 크기가 아니라 앱에 주어진 창의 크기를 기준으로 합니다. 기기를 펼치거나 돌리고, 여러 창을 함께 쓰면 앱 창의 크기가 달라질 수 있습니다. 레이아웃은 그때 앱이 실제로 사용할 수 있는 공간에 반응해야 합니다.

1. ‘창 크기 클래스’를 사용하세요

안드로이드의 창 크기 클래스는 앱 창의 크기가 바뀔 때 레이아웃을 어떻게 조정할지 결정하는 기준입니다. iOS의 크기 클래스와 비슷합니다.

Compact: 스마트폰 크기의 좁은 창

Medium: 큰 스마트폰이나 펼친 폴더블 크기의 창

Expanded: 태블릿이나 큰 폴더블 크기의 창

너비에 따른 안드로이드 창 크기 클래스와 가능한 레이아웃. 출처: Android 개발자 문서

2. 화면 가장자리까지 이어지는 레이아웃과 창 여백을 고려하세요

안드로이드는 화면 가장자리까지 콘텐츠를 배치하는 방식을 사용합니다. Android 15(API 35) 이상을 대상으로 하는 앱에서는 이 방식이 적용됩니다. 콘텐츠와 겹칠 수 있는 시스템 UI나 카메라 구멍 등을 피하려면 창 여백(window insets)을 활용하세요. 이는 iOS에서 시스템이 확보해 두는 영역과 비슷한 개념입니다.

다음 요소를 고려해야 합니다.

상태 표시줄과 탐색 표시줄

화면의 카메라 구멍(제조사마다 위치가 다릅니다)

시스템 제스처(화면 끝에서 안쪽으로 밀어 실행하는 안드로이드 ‘뒤로 가기’ 등)

화면 키보드

안드로이드 기기가 없다면 Android Studio를 설치하고 가상 기기 관리자를 사용해 다양한 형태의 구글 픽셀 기기를 시험해 볼 수 있습니다.

폴더블 디자인 점검표

여러 기기 상태를 고려해 디자인할 때 아래 질문을 확인해 보세요. 구현을 마친 뒤에는 접은 상태, 펼친 상태, 반쯤 접은 상태, 분할 화면, 세로·가로 방향에서 각각 앱을 시험해 보는 것이 좋습니다.

레이아웃

콘텐츠를 무작정 늘리지 않도록 최대 너비를 정했나요?

공간이 바뀌면 콘텐츠가 적절하게 다시 배치되나요?

서로 다른 가로세로 비율과 화면 방향을 지원하나요?

접히는 부분과 힌지

중요한 콘텐츠와 UI 조작 요소가 접히는 부분을 피하나요?

대화상자와 시트가 접히는 부분을 피하나요?

모든 기기 상태에서 조작 요소에 손이 닿나요?

탐색

사용 가능한 공간에 맞춰 네비게이션이 달라지나요?

기기를 접거나 펼쳐도 사용자가 보던 위치를 유지하나요?

창 크기를 바꿔도 탐색 방법을 이해할 수 있나요?

콘텐츠

콘텐츠의 위치가 바뀌어도 내용을 이해할 수 있나요?

읽기 편하도록 텍스트 줄의 길이를 제한했나요?

이미지가 적절한 가로세로 비율을 유지하나요?

폴더블은 단순히 화면이 큰 기기가 아닙니다. 사람들은 하나의 기기를 여러 방식으로 사용합니다. 앱은 그 가능성에 맞춰 달라지면서도, 낯설거나 예상 밖의 경험을 주지 않아야 합니다.

그러니 빈 공간을 채우려고 앱을 늘리지 마세요. 실제로 사용할 수 있는 공간에 맞춰 설계하세요.

원문 출처: https://medium.com/user-experience-design-1/please-dont-stretch-your-app-for-foldables-a62f1f8230ac

DEET를 구독하고 커리어 성장을 위한 작은 습관을 시작해 보세요.