Flutter 앱은 iPhone Duo를 지원할 준비가 됐나요?

Apple의 첫 폴더블 iPhone인 iPhone Duo가 지난 10월 23일에 출시됐어요. 이 기기가 등장하면서 앱 개발자에게는 많은 질문이 생겨요. 개발에는 어떤 영향을 미칠까요? 앱을 이 새로운 폴더블 형태에 맞게 반드시 조정해야 할까요? 그렇다면 어떤 어려움이 있을까요? 조정하지 않으면 어떻게 될까요? 기기를 접었을 때와 펼쳤을 때 앱은 어떻게 보일까요? Flutter는 인터페이스를 조정할 수 있도록 어떤 도구를 제공할까요?

이 글에서는 iOS 앱을 배포하고 있다면 앞으로 무엇을 준비해야 하는지 알 수 있도록 이 질문들에 빠르게 답해 볼게요. 마지막에는 적은 노력으로 앱 인터페이스를 조정해 새로운 iPhone Duo에서 보기 좋게 만드는 아주 간단한 방법도 보여드릴게요.

iPhone Duo는 앱이 표시되는 방식을 바꿔요

iPhone Duo에서 앱을 실행하면 어떤 일이 생기는지 쉽게 이해할 수 있도록 아주 간단한 예제 앱을 준비했어요. 노트 목록을 보여주고, 노트를 누르면 내용을 볼 수 있는 화면으로 이동하는 앱이에요.

이제 같은 앱을 iPhone Duo에서 실행하면 어떻게 되는지 살펴볼게요. 먼저 iOS 27.1 SDK로 빌드했지만 인터페이스에는 다른 조정을 전혀 하지 않은 상태를 보여드릴게요.

보이는 것처럼 앱은 사용 가능한 공간을 모두 채우도록 크기가 바뀌어요. 기기를 접었을 때는 외부 디스플레이의 크기와 화면 비율이 일반 iPhone과 비교적 비슷해서 큰 문제가 되지 않아요. 하지만 사용자가 기기를 펼치면 좁은 스마트폰 창을 기준으로 설계한 인터페이스가 내부 디스플레이의 전체 너비에 걸쳐 늘어나요. 동작은 하지만 최적의 경험을 제공하지는 못해요.

Flutter를 iPhone Duo에 맞게 조정하기

다행히 Flutter에는 iPhone Duo뿐 아니라 어떤 창 크기에도 인터페이스를 맞출 수 있는 위젯과 도구가 아주 많아요. 올바른 관점은 ‘Flutter 앱을 iPhone Duo에 맞춘다’가 아니라 ‘Flutter 앱을 새로운 크기에 맞춘다’라고 생각해요. 실제 기기 자체에서 한발 물러나, 사용 가능한 공간에 따라 동적으로 반응하는 반응형 인터페이스를 만드는 거예요.

예를 들어 아주 조금만 조정해도 다음과 같이 바꿀 수 있어요.

보이는 것처럼 Duo를 접었을 때는 이전 레이아웃을 유지해요. 펼치면 내부 디스플레이의 추가 너비를 활용해 왼쪽에는 노트 목록을, 오른쪽에는 선택한 노트의 상세 내용을 보여줘요.

이 효과는 부모 위젯에서 받은 크기 제약을 제공하는 LayoutBuilder를 사용하면 간단히 구현할 수 있어요. 기기 방향이 바뀌거나 iPhone Duo를 접고 펼칠 때처럼 제약이 달라지면 Flutter가 builder를 다시 실행해요. 덕분에 사용 가능한 공간에 맞는 인터페이스를 선택할 수 있어요.

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('Notes')),
    body: SafeArea(
      top: false,
      child: LayoutBuilder(
        builder: (context, constraints) {
          if (constraints.maxWidth >= _wideLayoutWidth) {
            return _WideNotesLayout(
              notes: _notes,
              selectedIndex: _selectedNoteIndex,
              onSelected: _selectNote,
            );
          }

          return _NotesList(notes: _notes, onSelected: _openNote);
        },
      ),
    ),
  );
}

이 예제에서는 LayoutBuilder와 함께 SafeArea를 사용해 시스템 인터페이스, 카메라, 둥근 모서리가 차지하는 영역 밖에 콘텐츠를 배치해요. Flutter에는 적응형 인터페이스를 만들 수 있는 다른 도구도 많아요. MediaQuery.sizeOf()로 현재 앱 창의 크기를 확인할 수 있고, Expanded와 Flexible로 행과 열 안의 공간을 나눌 수 있으며, ConstrainedBox로 최소 또는 최대 크기를 정해 콘텐츠가 지나치게 늘어나는 것을 막을 수 있어요. 이것들은 몇 가지 예일 뿐이에요. Flutter에는 인터페이스를 사용 가능한 공간에 맞추는 도구가 훨씬 더 많아요.

앱을 iPhone Duo에 반드시 맞춰야 할까요? 그럴 가치가 있을까요?

iPhone Duo에 맞게 앱을 조정할 가치가 있는지, 어느 정도까지 정교하게 대응해야 하는지 살펴보기 전에 먼저 알아둬야 할 Apple의 요구 사항을 확인해 볼게요.

이 요구 사항이 iPhone Duo 전용 인터페이스를 명시적으로 강제하는 것은 아니에요. 하지만 기기 전용 스크린샷을 요구한다는 점을 보면 Apple은 앱이 Duo에서 어떻게 동작하는지 확인하고, 최소한 눈에 띄는 조정 문제는 수정하기를 기대하는 것으로 보여요.

그렇다면 이 조정에 어느 정도의 노력을 들일 가치가 있을까요? 답은 앱의 종류와 사용자가 기대하는 바에 따라 크게 달라져요. 제 앱은 주로 스마트폰에서 사용되고 태블릿 사용자는 아주 적어요. iPhone Duo를 쓰는 사용자도 많지 않을 것이라고 보는 게 합리적이에요. 그래서 저는 앱이 Duo에서 제대로 동작하고 기기 전용 스크린샷이라는 새 요구 사항도 충족할 수 있을 정도로 꼭 필요한 최소한의 조정만 할 가능성이 커요.

그렇더라도 iPhone Duo 사용자가 몇 명일지만 보고 노력을 판단하지는 않을 거예요. 앱에 이미 유연한 인터페이스가 있다면 아주 적은 변경만으로도 괜찮은 결과를 얻을 수 있어요. 그렇지 않다면 Duo에 맞추는 과정에서 태블릿, 크기를 바꿀 수 있는 창, 미래의 다른 형태에서도 나타날 문제를 발견할 수 있어요. 그런 의미에서 이 작업은 iPhone Duo 이상의 가치를 가질 수 있어요.

결론

iPhone Duo는 Apple의 새로운 장난감이며, 앱에 훨씬 더 많은 공간이 주어졌을 때 어떻게 동작하는지 다시 살펴볼 이유를 하나 더 만들어 줘요. 앞서 말했듯이 ‘앱을 iPhone Duo에 맞춘다’기보다 ‘앱을 다양한 창 크기에 맞춘다’고 접근하는 것을 추천해요. 그러면 이 작업은 iPhone Duo뿐 아니라 태블릿과 현재 또는 미래의 다른 형태에도 도움이 될 거예요.

다음에 또 만나요!