폴더블

폴더블은 화면을 반으로 접었다 펼 수 있는 휴대 기기입니다. 접은 채로는 주머니에 들어갑니다. 펼친 채로는 작은 태블릿만큼 넓습니다. 앱을 만드는 쪽에서는 쓰는 도중에 화면 크기와 모양이 바뀐다는 점이 가장 큰 차이입니다.

쉽고 빠른 이해

무슨 일을 하나 — 휴대폰 크기의 기기에 접히는 화면을 달아, 펼치면 큰 화면으로 쓰게 합니다. 책처럼 펼치면 작은 태블릿이 되는 기기가 대표적입니다.

왜 이렇게 하나 — 큰 화면은 보기 편하지만 들고 다니기 불편합니다. 작은 화면은 그 반대입니다. 화면을 접으면 두 크기를 한 기기에서 고를 수 있습니다.

어떻게 도나

1. 사용자가 앱을 쓰다가 기기를 펼치거나 접습니다
2. 운영체제가 이를 알아채고 앱에 화면 크기가 바뀌었다고 알립니다
3. 앱은 하던 일을 잃지 않고 새 크기에 맞춰 화면을 다시 짭니다

대가 — 앱이 맞춰야 할 화면 모양이 늘어납니다. 접은 화면, 펼친 화면, 반쯤 접은 화면을 모두 만들고 시험해야 합니다. 기기를 고르는 쪽에서는 무게와 두께, 접히는 부분이 닳는 것을 감수할 만큼 큰 화면이 필요할 때 이 기기를 고릅니다. 앱이 크기 변화에 맞추지 않으면 넓어진 화면을 못 쓰고 가운데에 작게 남습니다.

상세

지하철에서 신문을 읽는 사람은 신문을 반으로 접어 듭니다. 옆 사람과 붙어 설 때는 접은 채로 한 면만 봅니다. 넓은 데 앉으면 다시 펼쳐 두 면을 한눈에 봅니다.

폴더블은 화면을 이 신문처럼 씁니다. 이 절은 먼저 화면이 어떻게 접히는지를 봅니다. 그다음 앱을 만드는 쪽에서 무엇이 달라지는지를 펼치는 순간, 넓어진 화면, 접힌 선의 차례로 따라갑니다. 끝에서는 그 대가를 봅니다.

접히는 화면과 힌지

보통 휴대폰 화면은 단단한 유리판 위에 만듭니다. 이런 화면은 조금만 구부려도 깨집니다.

폴더블은 휘어도 깨지지 않는 화면을 씁니다. 이런 화면을 플렉서블 디스플레이라고 합니다. 얇고 휘는 재료 위에 화면을 만들어서 종이처럼 굽힐 수 있습니다.

기기의 두 쪽은 경첩으로 이어져 있습니다. 이 경첩을 힌지라고 부릅니다. 여러 기기에서 힌지는 기기를 중간 각도로 벌린 채 세워 둘 수 있게 잡아 줍니다.

화면을 여러 번 접었다 펴면 화면이 접히는 줄, 곧 접힌 선을 따라 옅은 자국이 보이기도 합니다. 이 자국을 주름이라고 부릅니다.

접는 방향에 따라 모양이 둘로 갈립니다.

두 모양 모두 화면이 안쪽으로 맞닿게 접힙니다. 접은 채로는 안쪽 화면을 볼 수 없어서 바깥쪽에 작은 화면을 하나 더 다는 기기가 많습니다. 이 바깥 화면을 커버 화면이라고 합니다.

접힘 상태

폴더블은 완전히 닫히거나 완전히 펼쳐진 채로만 있지 않습니다. 힌지를 중간쯤 벌린 채 세워 둘 수도 있습니다. 기기가 지금 얼마나 접혀 있는지를 접힘 상태라고 부릅니다.

기기는 힌지 쪽의 센서로 벌어진 각도를 잽니다. 운영체제는 이 값으로 접힘 상태를 정하고 앱에 알려 줍니다. 앱이 이 값을 알아야 상태마다 다른 화면을 보여 줄 수 있습니다.

접힘 상태는 셋으로 나뉩니다.

반쯤 접힘은 폴더블에만 있는 쓰임새를 만듭니다. 기기를 노트북처럼 책상에 세우면 아래쪽 절반이 받침이 됩니다. 이 쓰임새를 테이블톱 모드라고 부릅니다.

책형을 세로로 들고 반쯤 접으면 책을 펼쳐 든 모양이 됩니다. 왼쪽과 오른쪽 절반에 서로 다른 내용을 띄우기 좋습니다. 이 쓰임새는 북 모드라고 부릅니다.

펼치는 순간 바뀌는 화면

이 소절은 사용자가 앱을 쓰다가 기기를 펼치는 순간을 따라갑니다. 앱을 만드는 쪽에서 폴더블이 까다로운 까닭이 대부분 이 순간에서 나옵니다.

보통 휴대폰에서 앱의 화면 크기는 거의 안 바뀝니다. 바뀌는 때는 기기를 가로로 돌릴 때 정도입니다. 이 경우를 화면 방향 전환이라고 부릅니다.

폴더블에서는 앱을 쓰는 도중에 화면이 바뀝니다. 커버 화면에서 지도를 보다가 기기를 펼치면, 같은 지도가 안쪽 큰 화면으로 옮겨 가야 합니다. 너비와 높이와 화면비가 한꺼번에 달라집니다. 화면비는 가로 길이와 세로 길이의 비입니다.

백엔드 개발자에게 가까운 장면은 브라우저 창 크기를 끌어서 바꾸는 일입니다. 웹 페이지는 창이 넓어지면 메뉴를 펼치고 좁아지면 접습니다. 폴더블의 앱도 같은 일을 합니다. 폴더블에서는 이 변화가 기기를 펼치는 한 번의 동작으로 크게 일어납니다.

화면 크기나 방향처럼 앱이 도는 환경이 바뀌는 일을 구성 변경이라고 합니다. 운영체제는 펼침을 알아채면 앱에 구성이 바뀌었다고 알립니다. 앱은 이 알림을 받고 새 크기에 맞춰 화면을 다시 짭니다.

운영체제에 따라서는 앱 화면을 한 번 없앴다가 새 크기로 다시 만들기도 합니다. 그러면 입력하던 글이나 보던 위치가 함께 사라질 수 있습니다. 그래서 앱은 바뀌기 직전에 지금 상태를 적어 둡니다. 화면을 다시 만든 뒤에 그 상태를 되살립니다. 이 일을 상태 보존이라고 합니다.

화면을 없앴다가 다시 만드는 운영체제에서 펼칠 때 오가는 순서는 아래와 같습니다.

sequenceDiagram
    participant 사용자
    participant 운영체제
    participant 앱
    사용자->>운영체제: 기기를 펼친다
    운영체제->>운영체제: 힌지 각도로 펼침을 알아챈다
    운영체제->>앱: 구성이 바뀌었다고 알린다
    앱->>앱: 지금 상태를 적어 둔다
    운영체제->>앱: 안쪽 화면 크기로 다시 만든다
    앱->>앱: 상태를 되살리고 화면을 다시 짠다

사용자에게는 같은 앱이 끊김 없이 커지는 것으로 보여야 합니다. 화면이 바뀌어도 하던 일이 이어지는 성질을 앱 연속성이라고 부릅니다.

크기가 바뀌는 것을 못 견디는 앱도 있습니다. 운영체제는 그런 앱을 원래 비율대로 화면 가운데에 띄우고 남는 쪽을 검게 비워 두기도 합니다. 이렇게 띄우는 방식을 레터박스라고 합니다. 앱은 깨지지 않지만 넓어진 화면을 못 씁니다.

넓어진 화면에 맞춘 배치

이 소절은 펼친 넓은 화면을 앱이 어떻게 쓰는지 봅니다. 휴대폰 화면을 옆으로 늘리기만 하면 글줄이 지나치게 길어지고 빈 곳이 커집니다.

화면 크기에 맞춰 버튼과 목록을 다시 놓는 방식을 반응형 레이아웃이라고 합니다. 너비가 조금씩 달라질 때마다 요소의 크기와 간격을 늘리고 줄입니다.

화면 너비를 좁음·중간·넓음 같은 구간으로 나눌 수도 있습니다. 구간마다 전혀 다른 배치를 고릅니다. 이 방식을 적응형 레이아웃이라고 부릅니다.

넓은 구간에서 흔히 쓰는 배치가 목록-상세 레이아웃입니다. 좁은 화면에서는 메일 목록을 보다가 하나를 누르면 화면이 본문으로 넘어갑니다. 넓은 화면에서는 왼쪽에 목록을, 오른쪽에 본문을 함께 띄웁니다.

넓은 화면에서는 앱 두 개를 나란히 띄우는 일도 쓸 만해집니다. 운영체제가 화면을 칸으로 나눠 앱마다 한 칸씩 주는 기능을 분할 화면이라고 합니다. 이때 앱이 받는 창은 화면 전체보다 좁습니다. 그래서 앱은 기기 크기가 아니라 자기가 받은 창 크기를 보고 배치를 골라야 합니다.

접힌 선을 피하는 배치

이 소절은 화면 한가운데를 지나는 접힌 선을 봅니다. 펼친 화면은 평평해 보여도 그 선 위의 내용은 보기 불편할 때가 있습니다.

반쯤 접은 상태에서는 접힌 선을 따라 화면이 꺾입니다. 그 선 위에 버튼이나 글자가 걸리면 누르기도 읽기도 어렵습니다. 펼친 상태에서도 주름 때문에 접힌 선이 눈에 띄기도 합니다.

그래서 운영체제는 접힌 선이 화면 어디에 있는지 앱에 알려 줍니다. 선의 위치와 방향, 기기가 지금 반쯤 접혔는지가 함께 옵니다. 앱은 이 정보로 중요한 요소를 선 양쪽으로 비켜 놓습니다.

테이블톱 모드라면 접힌 선을 경계로 위아래를 나눕니다. 위에는 볼 것을, 아래에는 손으로 만질 것을 둡니다. 영상 앱이라면 위에 영상이, 아래에 재생 막대와 버튼이 갑니다.

화면 하나를 접는 대신 화면 두 개를 힌지로 이은 이웃 기기도 있습니다. 이런 기기를 듀얼 스크린이라고 부릅니다. 두 화면 사이의 틈에는 아무것도 안 보여서 거기 걸친 그림이나 글자는 잘려 나갑니다. 그래서 앱은 이 틈도 접힌 선처럼 비켜 배치합니다.

앱이 구성 변경 알림을 받을 때 배치를 고르는 갈림은 아래와 같습니다. 반쯤 접혔는지를 먼저 봅니다. 그다음 너비를 봅니다.

flowchart TD
    A["구성 변경 알림"] --> B{"반쯤 접혔나"}
    B -->|예| C["접힌 선을 경계로 두 쪽에 나눠 배치"]
    B -->|아니오| D{"창 너비가 넓은 구간인가"}
    D -->|예| E["목록과 상세를 나란히"]
    D -->|아니오| F["한 화면에 하나씩"]

폴더블 지원에 드는 비용

이 소절은 폴더블에 맞추느라 늘어나는 일을 봅니다. 앱을 만드는 쪽의 짐과 기기를 만드는 쪽의 짐이 다릅니다.

앱을 만드는 쪽에서는 확인할 화면 모양이 늘어납니다. 커버 화면, 펼친 화면, 반쯤 접은 화면, 분할 화면 속 좁은 창을 따로따로 봐야 합니다. 펼치고 접는 순간에 상태가 사라지지 않는지도 시험해야 합니다.

이 시험을 실물 기기만으로 다 하기는 어렵습니다. 그래서 기기를 소프트웨어로 흉내 내는 에뮬레이터에서 접힘 상태를 바꿔 가며 확인하기도 합니다.

기기 쪽에서는 접히는 구조가 무게와 두께를 늘립니다. 힌지는 움직이는 부품이라 오래 쓰면 닳습니다. 접힌 선의 주름도 이 구조에서 생기는 대가입니다.

관련 항목

폴더블을 이루는 하드웨어 부품

플렉서블 디스플레이 · 힌지 · 커버 화면 · 주름 · 센서

폴더블과 나란히 놓이는 기기 형태

스마트폰 · 태블릿 · 듀얼 스크린 · 롤러블 · 플립폰

폴더블이 앱에 일으키는 화면 변화

접힘 상태 · 구성 변경 · 화면 방향 · 화면비 · 상태 보존 · 앱 연속성 · 레터박스

폴더블 화면에 맞추는 배치 기법

반응형 레이아웃 · 적응형 레이아웃 · 목록-상세 레이아웃 · 테이블톱 모드 · 북 모드 · 분할 화면 · 멀티 윈도

폴더블 앱을 시험하는 도구

에뮬레이터 · 실기기 테스트 · UI 테스트 · 스크린샷 테스트

폴더블이 속하는 상위 분야

모바일 개발 · 모바일 운영체제 · 안드로이드 · 크로스 플랫폼