오늘은 WWDC25 - 디자인 기초 구축하기 영상을 보고 뛰어난 앱을 제작하기 위한 뛰어난 디자인은 무엇인지 살펴볼 것이다.
개발자가 디자인을 알아야 하는 이유?
개인적인 생각으로
개발자가 직접 디자인을 하는 경우는 잘 없겠지만, 그것을 알아야 하는 이유라면 '판단' 때문이 아닐까?
1인 개발자라면 디자인을 AI에게 맡기더라도, 어떤 것이 좋은 디자인인지 나쁜 디자인인지 '판단'하여 계속해서 프롬포트를 수정해나갈 수 있을것이다. 그리고 이는 사용자의 앱 이탈을 막는데 도움을 줄 것이다.
현업 개발자라면 디자이너가 설계한 UI/UX를 보고 이것이 앱의 목적과 가치에 부합하는지 '판단'하고 사용자에게 더 나은 경험을 제공하기 위해 함께 논할 수 있을 것이다. 그리고 이는 협업의 질을 높이고 서비스의 완성도를 높일 수 있을 것이다.
그렇기에 개발자라도 디자인을 안다면 도움이 될것이다.
그래서 WWDC 영상에서는 디자이너와 개발자가 뛰어난 앱을 제작하기 위해 앱의 4가지 핵심 영역(구조, 탐색, 콘텐츠 구성, 시각적 디자인)에 초점을 맞추어 설명한다.
이러한 요소를 다루면 앱의 목적, 가치, 상호작용 패턴에 대해 더 명확히 설명할 수 있을 것이다.
Structure(구조)
정보의 구성, 무슨 앱인지 그 기능을 정의하는 것
Supports discoverability (발견하기 쉽게 만들어져 있는 상태)
앱을 보았을 때 명확함이 느껴져야한다. 그러면 매력적인 경험이 되고 앱 이용이 수월해질 것이다. 이를 위해 지켜야하는 질문들은
Where am I? 어디에 있는가?
-> 현재 위치가 어디인지 어떻게 왔는지 명확해야한다.
What can I do? 무엇을 할 수 있는가?
-> 추측할 필요 없이 동작이 명확하고 이해하기 쉬워야한다.
Where can I go? 어디로 갈 수 있는가?
-> 다음 단계가 명확하면 흐름이 유지되고 주저하거나 추측하는 일도 없다.
이러한 질문에 쉽게 답할 수 있다면 매력적이고 기초가 탄탄한 앱이다.
예시 : 레코드 앱
언뜻 보기에는 잘 작동할 것이라고 넘겨짓게 된다. 그러나 자세히 보면
- 현재 위치가 확실해야 하는데 처음 보이는것은 메뉴다. 메뉴는 모호하고 예측이 어려워서 적절하지 않다. 먼저 필요한 것은 맥락이다.
- 다음으로 제목 브랜딩이 있는데 보기에는 좋지만 크게 도움이 되지 않는다. 넘겨 버리고 싶은 충동이 들 정도다.
- 때문에 앱의 추천 콘텐츠 조차 쉽사리 놓치고 마는 결과를 낳을 수 있다.
- 앨범들이 보이는데 둘러보기 외에는 가능 동작이 없어 현재 위치가 어디인지 해야 할 동작이 아직 불명확하다. 밑에 Records라는 탭바 이름이 있어서 겨우 현재 위치를 알 수 있지만 정보가 너무 늦게 제시된다.
- 결국 화면이 정확한 안내를 해주지 않아 정보를 찾아 해매야 했다.
- 구조가 불명확할 때 사용자는 머뭇거림, 혼란을 느끼고 포기하기도 한다.
- 앱 내용이 적었다면 열었을 때 간편하게 보였을 것이다.
그리고 이것들이 바로 명확한 정보 구조화의 목표다. ⬇️⬇️⬇️
Clear information architecture (명확한 정보 구조화)
사용자가 필요 시 원하는 것을 쉽게 찾도록 하는 과정이다.
List every feature : 앱의 모든 기능을 적기
-> 기능, 작업 흐름, 있으면 좋은 요소 등 다 적기 (이때, 아무것도 없애려고 하지 않고 모든 기능을 다 적는다)
Learn from people : 다른 사람이 앱을 사용할때를 상상하기
-> 언제 어디서 앱을 사용할 것인가? 앱이 사용자의 일상에 어떻게 들어맞는가? 사용자에게 실제로 도움이 되고 방해가 되는 것은 무엇인가? 이러한 질문의 답을 목록에 기록하기
Organize insights : 목록 완성되면 정리 시작
-> 필요하지 않는 기능은 없애고, 불명확한 이름을 바꾸고, 자연스럽게 모을 수 있는 것들은 그룹화하기
Navigation(탐색)
사용자가 주도적으로 앱을 이용하도록 명확히 디자인하는 법
탐색은 사용자가 앱에서 이동하는 방식이다.
그저 탭하는 동작 그 이상의 의미로 사용자가 방향성과 명확성을 느껴야 한다.
Tab bar
탭을 단순히 가져가야한다. 많을 수록 사용자가 복잡해지고 힘들어함
What deserves a tab? 탭에 정말 필수적인 것은 무엇인가?
예제
- 탭으로 만들 필요가 없는 것은 Crates탭이다. Crates는 레코드를 그룹화하는 화면에 불과하다. 둘 다 있을 필요가 없으므로 병합한다.
- Add탭이 있는데 기본 동작이라 탭 바에 위치하고 있다. 하지만 여기가 가장 좋은 위치인가? 의구심이 든다. 탭의 구성요소를 적절히 사용하는 시점이나 방법이 확실치 않으면 HIG를 살펴보면 된다.
HIG에서는 탭은 동작이 아니라 탐색용이라고 확인된다.
그렇기에 Add를 많이 사용될 곳인 Records로 이동시킨다.
- 각 탭의 내용을 가능하면 더 쉽게 예측할 수 있도록 해야 하므로, 탭에 아이콘 뿐만 아니라 이름을 붙이면 더 좋을 것이다. 무슨 용도인지 몰라 건너뛰지 않도록!
- 이제 탭바의 일부 항목이 이동했기 때문에 콘텐츠가 혼동을 줄 여지가 생겼다 그것을 Toolbar를 통해 해결해 보자
Toolbar
before, after
- Toolbar를 통해 초반에 있었던 두 가지 문제인 현재 위치가 어딘가? 무엇을 할 수 있는가? 라는 문제가 모두 해결된다.
그 이유는 전과 달리 메뉴나 브랜딩 로고가 아닌 화면 이름이 포함된 제목과 도구들이 있기 때문이다. 이를 통해 화면의 콘텐츠를 짐작할 수 있으며 사용자가 탐색하고 스크롤할 때 방향성을 유지할 수 있다.
- 이제 처음에 답하지 못했던 질문들에 답을 할 수 있을 것이다.
-
Where am I? (현재 위치가 어딘지)
-> 젤 위에 Records 타이틀과 젤 밑에 Tabbar를 통해 -
What can I do? (무엇을 할 수 있는지)
-> Toolbar의 도구들을 통해 -
Where can I go? (어디로 갈 수 있는지)
-> Tabbar를 통해
사용자가 처음부터 명확한 경험을 할 수 있게 준비된 것이다.
Content(콘텐츠 구성)
화면의 실제 항목들
Organization
앱의 콘텐츠는 가장 중요한 것이나 먼저 보기를 원하는 것으로 안내하도록 배치해야 한다.
예제
현재 콘텐츠는 Groups, Records로 나뉘어져서 지저분한 느낌을 주고 있다. 두 섹션을 나눌 것이다.
Record Groups 부분에 2가지 콘텐츠만 보여주고 나머지는 더보기를 제공해주고 있다. 이 개념을 Progressive disclosure(단계적 공개)라고 한다.
사용자가 시작하는데 필요한 정도의 내용만 먼저 보여주고 이후에는 상호작용을 통해 추가 정보를 확인하도록 하는 방식이다.
추가 정보가 열릴 때 콘텐츠가 동일하게 정렬되어있으면 좋다. 이전 화면과 연결되어 있으면서 확장되는 느낌이 들도록.
탐색에서 설명했듯이 모든 화면은 방향을 제시해야 하는데 Toolbar를 보면 뒤로가기 버튼과 도구가 있어 어디서 왔는지, 무엇을 할 수 있는지, 어디로 가야하는지 알기 쉽다.
Layout
- 앞에서 단계적 공개는 올바른 수정 방향이었지만 격자 레이아웃은 최선이 아닌거 같다. 두 가지 항목만 담기에는 공간을 너무 많이 차지하기 때문. 또한 긴 텍스트를 표시하지 못해 콘텐츠가 불분명해진다.
그래서 격자 레이아웃에서 리스트로 변환 해주면, 구조화된 정보 표시에 유연하고 빠르게 훑어볼 수 있다는 점에서 훨씬 효과적이다. 또한 이미지보다 수직 공간을 덜 차지하므로 더 많은 항목을 표시할 수 있다.
All Records에서는 모든 것을 미리 보여줘 사용자가 둘러보는 것을 목표로한다. 그러나 선택의 폭이 넓어지면 사용자가 콘텐츠를 탐색하는 대신 부담감을 느껴 앱을 중단할까 걱정되기도 한다. 그래서 대량 콘텐츠 표시를 구상하기 전에 콘텐츠 정리가 필요하다.
- 앱을 정리할 때 사용하는 3가지 테마가 있다.
1. Time : 시간별 콘텐츠 분류
-> 이 방법은 최근 파일을 찾을 때나 스트리밍 중인 프로그램을 이어서 시청할 때 유용하다. 또한 계절과 현재 이벤트를 고려한 그룹화에도 유용하다.
2. Progress : 진행 상황에 따라 그룹화
-> 이메일 초안, 진행 중 수업 등 중단한 곳에서 다시 진행할 수 있다. 앱이 실생활에 반응한다는 느낌을 주기에 좋은 방법인데 누구든 한 번에 모든 것을 끝내는 경우는 드물다.
3. Patterns : 패턴별로 그룹화
-> 관계, 관련 제품처럼 한데 모을 수 있는 항목을 드러내는 방식이다. 패턴을 드러내는 방식에서는 짧은 둘러보기가 긴 탐색이 되는데 사용자가 미처 생각지 못했던 연결 고리를 보여주기 때문이다.
이러한 그룹화로 선택 과부하를 줄이고 선제적 앱을 만들 수 있다.
예제
- Time: 컬렉션을 나눴고, 여기서는 시간 기준으로 여름에 맞는 레코드를 표시한다.
2. Progress: 진행 상황 기준으로는 전집이나 음반 목록을 표시한다.
3. Pattern: 패턴 기준으로는 스타일이나 장르로 구분한다.
- 콘텐츠를 신중히 구성하고 친숙한 플랫폼 요소를 배치하면 사용자가 중요한 것을 쉽게 찾을 수 있기 때문에 직관적이면서 계속 다시 사용하고 싶은 공간이 완성된다.
4. 시각적 디자인
알맞은 스타일링으로 앱의 개성과 분위기를 살리고 사용성을 높이는 법
시각 디자인은 앱의 개성 전달과 사용자의 감정 형성을 한다.
Supports function
계층, 타이포그래피, 이미지, 색상을 세심하게 사용하고 기능을 지원하는 역할을 한다. 앱의 시각 디자인을 발전시키려면 효과적인 부분과 개선이 필요한 부분을 파악해야한다. 활자, 색상 및 이미지가 조화를 이루는 방식에 집중해야한다.
예제
앱을 슬쩍보면 격자 부분 콘텐츠가 제일 눈에 띄는데, 시각적으로 무겁고 다채롭기 때문이다. 콘텐츠의 절반이 빠졌고 공간감도 떨어진다. 여기서 부족한건 '시각적 계층'이다. 관건은 화면에서 시선을 안내하여 중요도 순으로 각종 디자인 요소를 인지하도록 하는 것이다.
시각 디자인을 개선하기 위해 이 추천 카드를 시각 앵커로 바꿔준다. 가장 중요한 것의 크기를 키우거나 대비를 높여주는 것이다.
이렇게 하면 자연스럽게 먼저 시선이 간다. 그리고 시각적으로 제 역할을 다한다. 하지만 텍스트가 길어지거나 언어가 변경되거나 사용자가 큰 텍스트를 사용한다면 지속되기 어려울 것이다. 활자 측면에서 더 유연하게 대응해야 한다.
이럴 때 유용한 것이 시스템 텍스트 스타일이다.
Use text styles
이를 통해 다양한 화면 조건에서도 명확한 계층과 강력한 가독성을 쉽게 구현할 수 있다. 제목부터 자막까지 모든 것을 일관되게 스타일링 할 수 있다.
예제
앨범 커버를 배경에 놓아주면 텍스트에 지속적인 공간이 확보되며, 세 가지 텍스트 스타일로 크기 및 대비 변화를 주어 시선을 유도할 수 있다. 텍스트 스타일은 Dynamic Type도 지원하여 사용자가 자신에게 편안한 텍스트 크기를 선택할 수 있다.
텍스트가 이미지 위에 겹쳐지면 가독성이 문제가 될 수 있으므로 이러한 경우에는 명확성을 우선시해야 한다.
간단한 해결법 중 하나는 텍스트 뒤에 그라데이션, 블러 등 은은한 배경을 추가하는 것이다.
Use images and color intentionally
이미지와 색상이 앱의 개성을 전달하는데 도움이 된다.
목록 부분을 보면 너무 단순화한 나머지 구성요소 사이에서 길을 잃은 감이 있다.
목록을 쉽게 볼 수 있도록 각 그룹에 이미지를 넣는다. 하지만 일부 이미지가 너무 튄다. 모두 색상과 스타일이 크게 다르다. 정말 필요한 것은 일관된 시각 스타일이다.
Use a cohesive style (일관된 스타일 적용)
색상 팔레트를 선택하고 몇 가지 간단한 규칙을 정한다. 네 가지 색상을 선택하고 복고풍 모양을 조합한다. 제목이 표시되는 그룹의 경우 더 굵고 넓은 서체를 사용한다.
그 결과 앱의 개성이 돋보이고 앱을 확장할 때도 일관성 유지가 가능할 거 같다.
추가적으로
이미 색상이 있지만 팔레트에서 고른 것이 아니라 label이나 secondarySystemBackground같은 이름이다. 이것을 Semantic colors(의미 색상)이라 하며 동적인 색상이다. 이러한 속성은 라이트 및 다크 모드에 따라 자동으로 변경된다.
마무리
디자인은 100% 라는 것이 없으며 정해진 답이 없다. 오늘 디자인 기초 사항을 살펴 보았는데 '디자인'이라는 단어가 재해석된 느낌이다.
나는 원래 '디자인'이라는 말을 들으면 무언가를 예쁘게 꾸미거나, 시각적으로 뛰어나게 만드는 등 '미술'에 가깝다고 생각해왔다.
그러나 이 영상을 정리하며 디자인은 사용자가 목적에 도달하기 위해 편안함을 '설계'하는 것이라고 개인적으로 재해석 해볼 수 있었다.
더 나은 개발자가 되기 위해서는 개발뿐만 아니라 앱을 디자인 하는 과정에서 어떤 것이 사용자를 위한 설계인지 판단 할 수 있어야 할 것이고, 이를 위해 디자인에 대해 공부할 필요가 있을 것이다.
🍎 참고
