애매한 앱 구조, 내비게이션, 콘텐츠를 개선하는 꿀팁

애플이 파운데이션을 앱에 적용하는 방법

by 김현준

Aug 11. 2025

실무에 적용할 수 있는 앱 개선 방식을 알아봅니다.

애플이 앱을 설계하는 방법

애플은 WWDC25에서 특정 앱 디자인을 구조 → 내비게이션 → 콘텐츠 → 비주얼 디자인에 이르는 과정에서 명료하고 직관적으로 개선하는 방법을 설명하고 있습니다.

본 글에서는 앱 디자인이 기능을 고도화하고 목적을 명확히 전달하며, 사용자가 콘텐츠를 자연스럽게 탐색하도록 이끌고, 구성 요소를 신중하게 활용해 간결함을 유지하면서도 임팩트를 잃지 않는 방법을 알아봅니다.

또한 그 안에 담긴 애플의 파운데이션과 디자인 철학에 대해서도 살펴보도록 하겠습니다. 이번 글은 실제 디자인 과정에서 적용시킬 수 있는 실무적인 내용을 많이 포함하고 있으므로 참고하시면 좋을 것 같습니다.

애매한 앱을 개선하는 순서

우리는 앱이 '그냥 잘 작동할 때'와 '그렇지 않을 때'의 느낌을 압니다. 그러나 디자이너로서 그 매끄러운 경험을 만드는 건 까다롭습니다.

애매한 중간 지점을 명확히 파악하고 개선하는 방법을 알아봅시다.

애플은 앱에서 뭔가 제대로 맞아떨어지지 않을 때 그 '애매한 중간 지점'을 어떻게 다루는지 안내합니다. 다음과 같은 순서로 말이죠.

앱을 설계하는 순서

1. 구조(Structure) 정보를 어떻게 조직하고, 앱이 무엇이며 무엇을 하는지 정의합니다.

2. 내비게이션(Navigation) 사람들이 앱을 자신감 있고 통제감 있게 이동하도록 명확한 방식을 설계합니다.

3. 콘텐츠(Content) 의미를 강화하고, 명확히 보여주며, 행동을 이끌도록 어떻게 구성할지 다룹니다.

4. 비주얼 디자인(Visual Design) 올바른 스타일링이 사용성을 지원하면서 앱의 개성과 톤을 어떻게 형성하는지 살펴봅니다.

그럼 이제 어떤 앱을 어떻게 개선할지 이어서 알아보도록 하겠습니다.

바이닐 관리 앱을 구조, 내비게이션, 콘텐츠, 비주얼 디자인의 순서로 개선해 봅시다.

앱 개선하기

이 앱은 임의로 만들어진, 음악 애호가들이 바이닐 컬렉션을 관리하도록 돕는 앱입니다. 사용자는 자신의 컬랙션을 스크롤하여 무엇을 틀지 영감을 얻을 수 있습니다.

이 앱에서 혼동되거나 자연스럽지 않은 부분이 있나요? 이제 순서대로 앱을 개선해 보겠습니다.

1. 구조(Structure)

구조에서 찾아야 할 것은 '명확성'입니다. 이는 경험을 친근하게 만들고 자신감 있게 사용할 수 있게 해 줍니다. 그 시작은 내가 어디에 있는지 아는 것에서 출발합니다. 앱은 내가 어디에 있는지 즉시 알려줘야 하며, 무엇을 할 수 있는지 추측할 필요가 없어야 하고, 어디로 갈 수 있는지 명확히 알 수 있어야 합니다.

모호하고 예측이 어려운 메뉴

처음 마주치는 건 메뉴입니다. 사용자에게 필요한 건 '맥락'이지만 모호하고 예측하기 어렵습니다.

브랜딩에 가까운 불필요한 타이틀 · 이로 인해 묻히게 되는 추천 콘텐츠

다음으로 타이틀이 보이지만, 브랜딩에 더 가까운 느낌입니다. 보기에는 좋지만 별 도움은 안되고 그냥 지나치고 싶어 집니다. 그러다 보니 앱이 추천하는 유용해 보이는 콘텐츠를 쉽게 놓칠 수도 있습니다.

현재 위치, 해야 할 동작 불분명 · 현재 위치에 대한 정보가 어렵게 제시

아래로 스크롤하면 앨범들이 보이지만 둘러보는 것 외에는 할 수 있는 게 없습니다. 여전히 내가 어디에 있고 여기서 무얼 해야 하는지 알기 어렵습니다. 맨 아래에서야 탭 이름이 'Records'라고 되어 있는 걸 보고 비로소 '어디에 있는지'에 대한 답을 얻지만, 너무 늦게 발견하게 됩니다.

정보 구조 설계

처음 열었을 때 덜 복잡해 보였다면 앱이 더 단순하게 느껴졌을지도 모릅니다. 그게 바로 정보 구조(Information Architecture)의 목표입니다. 사람들이 마찰 없이 필요한 것을, 필요할 때 쉽게 찾을 수 있도록 정보를 조직하고 우선순위를 정하는 과정이죠.

앱이 하는 모든 일 적어보기

이때 가장 먼저 하는 일은 앱이 하는 모든 일을 적어 보는 겁니다. 기능, 워크플로, 심지어 있으면 좋은 것들까지 말이죠. 이때는 판단하거나 빼지 않습니다. 그다음, 다른 사람이 이 앱을 어떻게 쓸지 상상해 봅니다. 언제, 어디서 사용할까요? 그들의 루틴에 어떻게 들어맞을까요? 실제로 도움이 되는 건 무엇이고 방해가 되는 건 무엇일까요? 이런 답들을 목록에 계속 더합니다.

정리하기

그다음 정리를 시작합니다. 핵심이 아닌 기능을 제거하고, 모호한 이름을 명확히 바꾸고, 자연스럽게 함께 묶이는 것들을 그룹화하죠. 이 과정을 거치면, 핵심이 무엇인지 제가 명확히 알지 못한다면 앱 안에서 그것을 제대로 전달할 수 없다는 사실이 분명해집니다.

단순화는 앱의 목적을 더 날카롭게 해 줍니다. 또한 사람들이 기능을 어디에서, 언제 발견할지에 대한 분명한 출발점을 줍니다.

2. 내비게이션 (Navigation)

탭이 늘어나면 사용자가 내려야 할 결정도 늘어납니다.

iOS에서는 내비게이션을 위해 탭 바(Tab bar)를 사용하게 됩니다. 이는 앱의 다른 섹션을 탐색할 수 있도록 해주며 항상 표시되기 때문에 언제든 쉽게 접근할 수 있습니다. 단순화가 중요한 이유는 탭이 늘어나면, 사용자가 내려야 할 결정도 늘어나며 앱이 훨씬 더 복잡하게 보이게 합니다.

여기서 잠시 멈춰 질문을 할 필요가 있습니다.

정말 필수적인 것은 무엇인가?

무엇을 탭으로 만들어야 하는가?

정말 필요한 기능만을 정확하게 표현하는 것이 중요합니다.

먼저 Crates는 레코드를 그룹화하는 화면에 불가하므로 탭으로 만들 필요가 없습니다. 이어서 Add가 있는데, 탭은 동작을 위한 것이 아닌 탐색을 위한 것입니다. 그러므로 Add가 많이 사용될 곳인 Records로 이동시킵니다.

이제 탭 바에는 서로 뚜렷이 구분되는 세 섹션만 남았습니다. 더 예측 가능하게 만들고 있으니, 탭의 이름을 더 개선할 필요가 있습니다. ‘Swaps’와 ‘Saves’는 더 직설적인 레이블인 'Sharing'과 'Wishlist'로 바꾸고 더욱 일관된 아이콘으로 수정합니다.

단순하고 명확하게 개선된 탭

단순화된 구조, 익숙한 아이콘, 명시적인 라벨 덕분에 앱의 전체 범위와 목적이 분명해지고, 탭 바가 더 친근하게 느껴집니다.

상단에 툴 바를 사용하여 현재 위치와 할 수 있는 액션을 명확하게 개선

정보 구조 작업으로 인해 탭을 병합하였으므로, 툴 바(Toolbar)를 사용하여 내용을 명확히 할 수 있습니다. 툴 바는 인터페이스 내에서 방향성을 잡는데 도움이 됩니다. 처음에 겪었던 두 가지 문제인 ‘내가 어디에 있는지’와 ‘무엇을 할 수 있는지’를 동시에 해결할 수 있게 됩니다.

툴 바에는 이전처럼 메뉴나 브랜딩 대신 해당 화면의 이름을 담은 제목이 들어가게 됩니다. 이는 화면의 콘텐츠에 대한 기대치를 설정하고, 사람들이 스크롤하고 내비게이션 할 때 방향 감각을 유지하도록 돕습니다.

개선된 구조(Structure)에 대한 기준을 내비게이션(Navigation)을 통해 개선

이제 “어디에 있는지, 무엇을 할 수 있는지, 이 앱에서 가능한 것이 무엇인지”를 분명히 답할 수 있습니다. 처음부터 사람들에게 더 자신감 있는 경험을 제공하는 셈이죠. 이는 모두 구조 작업과 내비게이션 컴포넌트를 의도적으로 사용한 덕분입니다.

3. 콘텐츠(Content)

이제 탐색할 기반이 마련됐으니, 화면에 실제로 무엇이 있는지 자세히 보겠습니다. 앱의 콘텐츠는 사람들이 가장 중요하게 생각하는 것과 가장 먼저 기대하는 것을 향해 안내되도록 구성되어야 합니다.

일반 콘텐츠와 그룹 콘텐츠를 분리하여 그룹핑 · 일부만 화면에 공개하는 '점진적 공개'

두 가지 유형의 콘텐츠 ‘Groups’와 ‘Records’가 섞여 있어 지저분하게 느껴집니다. 그래서 우선 두 섹션을 분리하고 타이틀을 붙여 몇 개의 그룹만을 먼저 보여줍니다. 이 개념을 점진적 공개(Progressive Disclosure)라고 합니다. 시작할 때는 필요한 것만 최소한으로 보여주고 사람들이 상호작용하면서 더 많은 상세 정보나 고급 옵션을 점차 드러내는 방식입니다.

나머지 콘텐츠는 더 보기 버튼을 탭 하여 페이지에 진입 후 확인할 수 있습니다.

따라서 나머지 콘텐츠는 사라진 게 아니라, 제목 옆의 디스클로저 컨트롤(Disclosure Control)을 탭 하면 열리도록 ‘뒤에’ 자리하고 있습니다. 그리고 그 화면이 열렸을 때도 같은 방식으로 콘텐츠가 배열되길 원합니다. 이전 화면과 연결되어, 마치 확장되는 듯한 느낌이 들도록요.

두 항목만을 보여주는 그리드 레이아웃에서 리스트 레이아웃으로 개선

점진적 공개는 올바른 방향이었지만, 그리드 레이아웃은 썩 맞지 않았습니다. 두 항목만 보여주는데도 공간을 너무 많이 차지합니다. 또 긴 텍스트를 잘 처리하지 못해 콘텐츠를 불분명하게 만듭니다.

레코드 그룹 섹션에는 리스트(List)가 훨씬 더 잘 맞습니다. 구조화된 정보를 보여주는 유연하고, 사용성이 높으며, 익숙한 방식이고 빠른 스캐닝을 돕습니다. 또 이미지보다 세로 공간을 덜 차지하기 때문에 한 화면에 더 많은 항목을 담을 수 있습니다.

콘텐츠를 정돈하는 세 가지 주제

스크롤을 해보면 사람들이 앱에 업로드한 모든 레코드가 보입니다. 하지만 선택지가 늘어날수록 처리해야 할 인지 부담도 커집니다. 둘러보는 대신 압도감을 느끼고 앱을 떠나 버릴까 걱정이 됩니다. 앱들이 정돈을 유지하기 위해 사용하는 몇 가지 주제가 있습니다.

시간(Time)으로 묶기

최근 파일(Recent)을 찾거나, 스트리밍에서 ‘이어 보기(Continue Watching)’가 얼마나 도움이 되는지 떠올려 보세요. 계절성과 시의성을 고려한 묶음은 경험을 더 살아 있고 관련성 있게 만듭니다.

진행 상태(Progress)로 묶기

임시 저장 이메일이나 진행 중인 수업처럼 사람들이 하던 곳에서 다시 이어가기 쉬워집니다. 사람들은 한 번에 모든 걸 끝내지 않기 때문에, 현실 세계에 반응하는 앱처럼 느끼게 하는 훌륭한 방법입니다.

패턴(Pattern)으로 묶기

'연관 상품'과 같이 서로 관련된 것처럼 함께 두어야 할 것들의 관계를 드러내는 것입니다. 패턴을 드러내면 사람들이 찾을 생각도 못했던 연결을 보여주기 때문에, 짧은 훑어보기가 더 긴 탐색으로 바뀝니다.

시간, 진행 상태, 패턴의 유형으로 묶인 콘텐츠

여기서는 시간 기준으로 '여름에 듣기 좋은 레코드', 진행 상태 기준으로 '완성된 세트나 디스코그래피', 패턴 기준으로 '스타일이나 장르' 같은 묶음입니다. 콘텐츠가 사려 깊게 조직되고, 플랫폼에 익숙한 컴포넌트를 사용해 배치되면, 사람들은 중요한 것을 수월하게 찾아낼 수 있습니다.

4. 비주얼 디자인(Visual Design)

마지막으로, 앱을 열었을 때 ‘그냥 딱 맞는’ 느낌을 주는 데는 비주얼 디자인의 역할이 큽니다. 앱의 비주얼 디자인을 한 단계 끌어올리려면, 잘 작동하는 점과 개선할 수 있는 점을 파악해야 합니다.

눈을 조금 가늘게 떠 보면, 시선이 첫 번째 컬렉션으로 곧장 내려갑니다. 시각적으로 더 무겁고 다채롭기 때문이죠. 그 과정에서 절반의 콘텐츠와 위치 감각을 놓치고 있습니다.

여기서 빠진 것은 시각적 위계(Visual Hierarchy)입니다. 화면을 통해 시선을 안내해 중요도 순으로 서로 다른 디자인 요소들을 인지하게 만드는 일 말이죠.

추천 콘텐츠를 크게 만들어 강조하고, 텍스트 시스템을 사용하고, 배경에 블러를 추가

이를 개선하기 위해, 가장 중요한 것을 더 크게 만들거나 대비를 높여 자연스럽게 먼저 주목되도록 하여 이 제안을 시각적으로 잘 느껴지도록 바꾸겠습니다. 하지만 텍스트가 길어지거나, 언어가 바뀌거나, 큰 텍스트 크기를 사용하는 사람이 있다면 어떻게 해야 할까요?

특히 텍스트에 관해 더 유연하게 설계할 필요가 있습니다. 그럴 때 시스템 텍스트 스타일(System Text Styles)이 유용합니다. 풀블리드(Full-bleed) 디자인은 유지하되, 앨범 커버는 배경으로 옮길 수 있습니다. 그렇게 하면 텍스트가 자리 잡을 공간이 항상 확보되고, 세 가지 다른 텍스트 스타일이 크기와 대비의 유용한 변주를 제공해 시선을 효과적으로 이끕니다.

하지만 텍스트가 이미지 위에 놓이면, 특히 복잡하거나 대비가 큰 비주얼에서는 가독성이 금방 문제가 될 수 있습니다. 그럴 때는 명료함이 최우선입니다. 간단한 해결책은 텍스트 뒤에 미묘한 배경(그라데이션이나 블러)을 추가하는 것입니다. 가독성을 높이면서도 디자인을 해치지 않고 약간의 입체감을 더해줍니다.

리스트에 썸네일 이미지를 추가하여 콘텐츠 스캔을 보조

마지막으로 집중하고 싶은 것은 이미지와 색이 앱의 개성을 전달하는 데 어떻게 도움이 되는가입니다. 너무 심플하게 만들다 보니 다른 컴포넌트 사이에서 존재감이 희미해졌습니다. 그래서 각 그룹을 대표하는 이미지를 추가해 리스트의 스캔이 더 쉬워지도록 할 수 있습니다.

비주얼 스타일과 컬러 팔레트를 지정하여 일관된 스타일 제공

하지만 모든 이미지가 효과적인 것은 아닙니다. 색과 스타일이 제각각이거든요. 정말 필요한 것은 응집력 있는 비주얼 스타일입니다. 이를 위해 컬러 팔레트를 정하고, 그 사용을 위한 간단한 규칙을 세웁니다. 제목이 노출되는 그룹에는 리스트의 본문 텍스트와 구분되도록, 더 굵고 확장된 서체를 사용했습니다.

시맨틱 컬러 토큰을 통해 다양한 상황에 동적으로 색상을 적용

이 색들은 Black이나 Purple 같은 이름이 아니라 label, secondarySystemBackground처럼 불립니다. 이들은 시맨틱 컬러(Semantic Colors)로, 겉모습이 아니라 용도에 따라 이름이 붙습니다. 동적이기 때문이죠. 대비 설정, 화면 환경, 다크/라이트 모드에 따라 자동으로 변하게 됩니다.

개선을 위한 시스템

이것은 어디에서 시스템에 기대고, 어디에서 개성을 더할지를 연습하는 훌륭한 방법입니다. 각 디자인 요소를 따로따로 작은 프로젝트로 다루고 싶은 유혹이 있을 수 있고, 어떤 면에서는 그게 맞습니다. 하지만 진짜 영향력은 이 요소들이 함께 작동해 인터페이스의 전체적인 의미에 기여할 때 나옵니다.

처음부터 완벽한 디자인을 도출하기는 쉽지 않지만, 반복을 통해 해결할 수 있습니다.

처음에는 제대로 된 디자인을 한 번에 구성하지 못할 수 있습니다. 하지만 그 또한 과정의 일부입니다. 매번의 반복(iteration)이 디자인을 더 지지적이고, 예측 가능하며, 이동하기 쉬운 상태에 가까이 데려다줍니다.

단단한 파운데이션을 기반으로 제품을 개선

또한 애플의 파운데이션이라는 기준이 가장 아래에 자리 잡고 있었기 때문에, 이러한 개선 역시 기준을 가지고 더 나은 제품을 만들 수 있었다는 생각이 듭니다.

본 글의 사례에서는 브랜딩, 컬러, 아이콘, 레이아웃, 서체 등 다양한 파운데이션이 포함되어 있지만, 개별적으로 다루기 보다는 개선의 프로세스에 초점을 두고 살펴보았습니다.

마치며

이번 개선은 구조 · 내비게이션 · 콘텐츠 · 비주얼 디자인을 기능 추가가 아니라 우선순위를 다시 세우는 작업으로 다루는 것이 핵심이었습니다. 화면마다 “어디에 있는지, 무엇을 할 수 있는지, 다음에 어디로 갈 수 있는지”가 더 또렷해졌다는 점이 가장 큰 포인트입니다.