iPad 앱 디자인 향상하기

안녕하세요 Apple Design Team의 디자이너 Rene Lee입니다 오늘 iPad의 새 업데이트로 앱 디자인 개선 방법을 공유하게 되어 기쁩니다 iPad의 핵심은 심플함에 있습니다 그리고 iPadOS 26은 튼튼한 기반 위에 만들어졌죠 새 제스처로 쉽게 멀티태스킹하고 창 크기를 자유롭게 조절합니다

도구 모음에서 창 제어가 더 크게 표시되어 그 기능을 드러냅니다

새로운 포인터는 이전보다 더 정확하고 반응이 빠릅니다 마지막으로 새로운 메뉴 바가 도입되었습니다 앱을 더욱 독특하고 강력하게 만드는 기능이 모두 있죠

새 기능으로 필요한 모든 구성 요소를 갖추게 됐죠 iPad 앱을 한 단계 더 끌어올릴 수 있게 된 거죠 본 세션에서는 여정을 단계별로 안내해 드리겠습니다 먼저 앱 탐색부터 시작한 후 iPad에서 멀티태스킹 시 창의 작동 방법을 살펴 보죠 iPad의 새 포인터와 호버 효과도 설명해 드리죠

iPad의 새로운 메뉴 바에 대해 알아보겠습니다 그럼 탐색 창부터 시작해 볼게요 향상된 iPad 앱 제작은 적절한 탐색 패턴 선택에서 시작됩니다 첫 옵션은 사이드바입니다 사이드바는 여러 하위 뷰가 있는 앱에 적합하며 Mail처럼 중첩된 구조의 콘텐츠를 다루기에도 알맞습니다

Mail의 사이드바 내부를 살펴보겠습니다 Mail 사이드바로 메일박스와 여러 계정을 보도록 나열합니다 콘텐츠 계층 구조도 최상위까지 바로 확인하죠 사이드바가 탐색을 병렬화해 iPad에서 Mail을 더 빨리 보냅니다 다른 예시를 보겠습니다 음악 앱엔 메일상자 대신 탭, 라이브러리, 재생 목록이 있죠 따라서 음악에서 이러한 목적지는 사이드바 내부에 배치됩니다 그래서 탐색 속도가 매우 빨라지죠

음악의 사이드바에는 탭 바 모양의 버튼이 하나 더 있습니다 탭하면 사이드바가 유연하게 변형됩니다 탭 바에 말이죠

탭 바는 더 간결하고 유연한 탐색 패턴을 제공합니다 사이드바보다 훨씬 작기 때문이죠 앱은 이전보다 훨씬 더 많은 콘텐츠를 보여줄 수 있습니다 더욱 몰입감을 느낄 수 있죠 탭 바의 사이드바 재전환도 자연스레 이루어집니다 유연한 탭 바로 사람들은 원하는 탐색 방식을 쉽게 선택하죠

앱의 적합한 탐색 모드를 모르면 탭 바부터 시도해 보세요

점차 앱을 확장하며 사이드바로 쉽게 전환할 수 있죠 각 탐색 방식이 더 작은 화면에서 반응하는 방법입니다 iPad를 세로로 돌리면 사이드바가 이에 맞게 반응합니다 탭 바로 다시 변형되죠 그러나 레이아웃 관점에서 방향 변경은 단순히 앱이 너비 변화에 맞게 반응해야 한다는 뜻입니다 탐색 기능이 적응형이면 앱은 원하는 너비로 리플로우됩니다

떠 있는 창에도 확장될 수 있죠 창의 너비도 더 좁아지기 때문입니다 탭 바 사용 시 크기 상관없이 자연스레 조정됩니다

탭 바를 사용하지 않는 앱도 탐색 방식을 조정할 수 있습니다 세로 열을 안보이게 하는 방식으로요

크기가 변경될 때마다 레이아웃의 변화를 확인하세요 앱의 레이아웃이 변형되지 않도록이요 앱 크기 조정 시, 레이아웃을 영구적으로 변경해서는 안 됩니다 가능하다면 시작 상태로 되돌릴 수 있음을 염두에 두세요

다음으로, 탐색 주변으로 콘텐츠를 확장해보세요

사용자들은 콘텐츠 때문에 당신의 앱을 찾습니다 최대한 넓게 화면을 사용해 강력한 몰입형 경험을 만드세요 도구 모음 아래에 콘텐츠를 배치하여 시작할 수 있습니다 새 ‘스크롤 에지 효과’를 활용해서 말이죠 특히 플로팅 창에서 콘텐츠 확장 시 유용합니다 플로팅 창이 전체 화면 앱보다 작으니까요

사이드바 아래로 콘텐츠를 확장할 수도 있습니다 이처럼 콘텐츠가 경계를 넘어 확장될 때 어느 행이 얼마나 스크롤됐는지도 알 수 있죠 탐색을 요약하면 이렇습니다 콘텐츠에 가장 적합한 탐색 모드를 선택합니다

탭 바부터 시작해 보세요 탐색 모드의 크기를 더 작게 조정하세요

그리고 탐색 바 주변으로 콘텐츠 범위를 확장하세요

다음은 창에 대해 알아보겠습니다 iPad OS26엔 새 창 관리 시스템이 있습니다 한편으로는 더 간단해졌지만 동시에 더 강력해졌습니다! 이제 멀티태스킹을 지원하는 모든 앱은 우측 하단에 핸들을 표시합니다

드래그 시, 배경화면 위에 떠 있는 창으로 앱 크기 조정이 시작됩니다

모든 창의 좌측 상단에는 새로운 창 제어가 있습니다 탭하면 크기가 커지면서 기능이 드러납니다 길게 누르고 있으면 더욱 확장되고 여러 창 레이아웃을 빨리 생성하는 단축어 세트를 보여주죠 창 제어 장치에는 많은 기능이 포함되어 있습니다 iPad에서 멀티태스킹 구현 시 핵심 역할을 하죠 모든 창에서 보이는 방법을 자세히 알아보죠 창 제어는 도구 모음의 앞부분에 표시됩니다 기존 제어는 공간 및 혼란 방지를 위해 우측으로 이동합니다

iPad OS26으로 업데이트하지 않은 앱의 경우 시스템이 도구 바 위의 안전 구역을 늘려 줍니다 그리고 창 앞쪽 가장자리에 제어 기능을 배치합니다

도구 바 위 배치는 호환성 때문입니다

도구 바 바로 위에 영구적인 안전 영역을 생성하는 것은 앱 콘텐츠 효과 극대화에 바람직하지 않죠 대신 도구 바로 창 제어 주위를 감싸야 합니다 이렇게 하면 도구 바가 일렬로 나타나죠 창 제어가 표시되는 위치에 도구 바를 감싸면 안전 영역을 확보하지 않아도 됩니다

확보한 추가 공간은 더 많은 콘텐츠 표시에 활용하죠 창 크기를 늘리지 않고 말이죠

다음으로 중요한 변경 사항이 있습니다 앱이 새로운 문서를 여는 방식인데요 문서를 열면 기본 앱이 위에서 실행되고 해당 창에서 문서가 열립니다 앱을 숨기거나 닫을 때까지 앱의 현재 상태를 유지한다고 가정하는 게 좋습니다 두 번째 문서를 열고 싶다면 어떻게 해야 할까요?

멀티태스킹 중심 워크플로 이전에는 앱에서 다른 문서를 열도록 요청하면 기존의 열려 있던 문서를 닫고 하나뿐인 창에서 파일을 열어 기존의 모든 컨텍스트가 사라졌죠 'Open in Place' 방식은 더 이상 권장되지 않습니다 멀티태스킹에 참여하는 앱의 경우에 말이죠 앞으로는 각 문서를 열 때마다 앱이 새 창을 생성합니다 멀티태스킹이 활성화되면 앱은 각 문서를 해당 창에서 열어야 합니다 창이 닫힐 때까지 유지돼 더 편리합니다 하지만 이로 인해 창이 과도하게 누적될 수 있죠 그리고 창을 찾기 어렵게 만들죠 새로운 창이 계속 추가되는 동작으로 시간이 지날수록 창이 많이 열려 관리가 어려울 수 있죠

앱 메뉴에 새로 생긴 섹션에서 열려 있는 모든 창 목록을 확인할 수 있게 되었습니다 창 이름이 구체적이지 않으면 별로 도움이 되지 않습니다 앱의 창 구체적인 이름을 제공하는 게 중요하죠

각 창에 문서 제목처럼 고유한 이름을 지정해야 합니다 앱에서 각 창에 구체적인 이름을 제공하면 특정 창을 훨씬 쉽게 찾을 수 있죠

마무리해 볼까요? 창 제어 주위에 도구 모음을 배치하고

각 문서마다 창을 생성하고 마지막으로 앱 창에 직관적인 이름을 부여합니다 iPad 포인터에 적용될 변화를 살펴보죠

iPad의 모든 기능은 터치를 위해 설계되었습니다 원래 포인터는 원형 모양을 하고 있었습니다 크기와 정확도 면에서 손가락과 가장 유사한 형태를 찾은 결과였죠 하지만 기술적 원리로 보자면 포인터가 손가락보다 훨씬 더 정확하게 움직일 수 있습니다 iPad OS26에서 포인터는 새 모양으로 진정한 잠재력을 발휘합니다 새 포인터는 더 정확하고 빠르게 반응하는 것 같습니다 입력 내용을 일대일로 직접적으로 항상 추적하기 때문이죠 새로워진 디자인 외에도 변경 사항이 있는데요 바로 버튼과 제어 기능 위에서 포인터가 동작하는 방식입니다 새로운 하이라이트 효과는 포인터를 올려 놓은 버튼 바로 위에 나타나는 Liquid Glass입니다

Liquid Glass 제어 기능 위에 떠 있는 하이라이트는 아래 요소를 휘도록 하거나 굴절시켜 현재 선택된 버튼을 나타냅니다 두 개 이상의 버튼이 있는 Liquid Glass 제어 기능에 올리면 하이라이트 효과가 나타나 포인터로 어떤 버튼을 누르는지 표시합니다

클러스터를 이동하면 하이라이트가 포인터를 따라가죠 대상이 변경될 때마다 새로운 하이라이트 효과는 원래의 호버 효과를 대체하며 포인터가 하이라이트로 바뀝니다

새로운 포인터는 더 이상 자석처럼 달라붙거나 또는 고무줄처럼 붙지 않고 항상 입력을 직접 추적하죠

예상치 않은 결과 확인을 위해 새 포인터로 앱을 테스트하세요 포인터 상호 작용을 개선하고 다듬는 과정에서 참고 및 지침이 필요하면 언제든지 이 섹션을 참고하세요 마지막으로 iPad의 메뉴 바를 살펴보겠습니다 메뉴 바는 항상 macOS의 핵심 요소였으며 iPad의 메뉴 바와 많은 핵심 원칙을 공유합니다 이 섹션에서는 iPad의 메뉴 바의 특징적인 요소에 집중하죠 iPad에서 포인터를 상단 에지로 이동하면 메뉴 바가 나타납니다 손가락으로 아래로 쓸어내려 표시할 수도 있습니다 모든 메뉴 바에서 앱 메뉴를 찾을 수 있으며 그 뒤로 시스템에서 제공하는 기본 메뉴 및 앱이 제공하는 맞춤형 메뉴가 있습니다 앞으로 iPad의 모든 앱에는 자체 메뉴 바가 추가됩니다 멋진 메뉴 바 디자인을 위한 몇 가지 팁을 알려드리죠 먼저, 메뉴 항목을 구성하세요

맞춤형 메뉴를 구성하는 과정을 설명해 드리겠습니다 예를 들어, 'Mail'의 'Message' 메뉴를 사용해 보겠습니다 가장 먼저 해야 할 일은 이름과 관련 있는 모든 작업으로 메뉴를 채우는 것입니다 이러한 작업은 사용 빈도에 따라 분류해야 하며 알파벳순으로 분류해서는 안 됩니다 또한 관련 작업은 각 섹션으로 그룹화하여 더 명확하게 구분해야 합니다 메뉴가 너무 길어지기 시작하면 보조 작업을 하위 메뉴로 옮길 수 있습니다 그 다음 각 항목에 앱에 나타나는 것과 일치하는 기호를 지정하는 게 이상적입니다 가장 빈번한 수행 작업에 키보드 단축어를 할당합니다 그러면 개별 명령뿐 아니라 잘 구성된 사용자 정의 메뉴 생성시 사용자가 쉽게 기억하고 앱을 더 잘 이해하게 됩니다 다음으로 '보기' 메뉴를 채웁니다

‘보기’ 메뉴는 시스템에서 기본적으로 제공되지만 앱에 유용한 작업으로 메뉴를 구성할 수도 있습니다 탭으로 구성되면 보기 메뉴에 포함시키는 게 좋습니다

탭 전환 속도를 높이려면 보기 메뉴에서 탭을 항목으로 추가하고 키보드에 단축어를 할당하세요

이제 완벽하게 기능하는 보기 메뉴가 생겼습니다! 또 다른 유용한 항목은 탐색 토글입니다 사이드바 표시 및 숨기는 버튼이 보기 메뉴에 있으면 유용합니다 사이드바 토글 추가시 빨리 탐색을 표시하거나 숨길 수 있죠

맥락에 따라 메뉴나 항목을 절대 숨기지 말아야 합니다 앱의 맥락은 당신의 앱 사용 방식에 따라 계속 달라져 메뉴를 열면 일부 항목이 흐리게 표시될 수 있습니다 실행 가능하지 않기 때문입니다 이건 전적으로 의도된 것입니다 메뉴 항목은 비활성화되어 있어도 항상 같은 위치에 있어야 합니다 메뉴 항목은 실행 가능할 때 완전히 진해집니다 그렇지 않을 때는 희미해지죠 공간 절약을 위해 비활성 작업을 숨기지 않는 이유가 궁금하시죠?

혼란이 될 수 있어 메뉴 항목 숨기기는 권장하지 않습니다 메뉴 내용이 자주 변경되면 전체 메뉴를 다시 훑어봐야 합니다 열 때마다 공간 기억에 의존할 수 없기 때문입니다 메뉴 바가 예측 가능하도록 메뉴 내용은 반드시 고정해야 합니다 사람들 방문 시, 새 기능을 쉽게 발견할 수 있기 때문이죠 맥락에 따라 메뉴에 실행 가능한 내용이 없을 수도 있습니다

이런 경우라도 메뉴 전체를 숨기지 마세요 전체 메뉴가 사라지면 메뉴 바는 예측할 수 없어

내용이 있는 한 메뉴는 항상 유지하는 게 좋습니다 언제나 기대했던 경험을 제공할 수 있기 때문이죠

이제 메뉴 바에 배운 걸 다시 살펴보시죠 먼저, 메뉴 항목을 구성하고 보기 메뉴를 탭과 사이드바 토글로 채우고 메뉴와 메뉴 항목을 숨기지 마세요 이러한 지침을 염두에 두시기 바랍니다 앱 디자인 시, 최상의 결과를 얻으려면 메뉴 바를 사용하세요! 오늘 준비한 내용은 여기까지입니다 유동적인 탐색 기능과 추가 멀티태스킹으로 iPad 앱의 강력해진 모습을 봤습니다 새로운 포인터가 정밀한 입력을 제공하는 방식과 메뉴 바가 앱의 동작을 체계적으로 정리하여 더 쉽게 찾을 수 있도록 돕는 방법에 대해서 알아보았습니다 새로운 디자인 시스템에 대해 더 자세히 알고 싶으시면 다른 세션도 확인해 보시기 바랍니다

이러한 구성 요소를 앱에 적용하면 각 부분의 합 보다 휠큰 시너지를 낼 것이라 확신합니다 오늘 배운 것을 잘 활용하실 것이라 믿습니다 배운 내용을 통해 iPad 앱에서 실질적인 변화를 만들고 경험을 향상시켜 보시기 바랍니다 시청해 주셔서 감사합니다!