디자인 챌린지 (Asia Pacific) - Part 1

소개

---

2023년 3월 6일~7일 동안 진행되는 세션입니다.

Apple Developer 자격이 있는 개발자나 디자이너를 대상으로 하며 Apple 에반젤리스트를 만나 디자인 원칙의 핵심을 배웁니다.

저는 3월 6일 오전 10시 세션에 참가했습니다.

 

내용

 

---

길 찾기, 멘탈 모델, 80/20 규칙, 점진적 공개와 같은 디자인 원칙에 대한 소개와 앱에서 어떻게 적용되는지를 배웁니다.

디자인 원칙에 대한 소개와 챌린지 액티비티를 통해 예시 앱을 개선해 봅니다.

강의자료를 캡처하지 않아 챌린지 액티비티와 관련된 내용은 작성이 어렵네요.

---

길 찾기

길을 찾기 위해 표지판을 보는 상황을 먼저 생각해 봤습니다.

좋은 길 찾기는 다음 질문에 대한 답을 줍니다.

• "내가 어디에 있지?"
• "어디로 가야 하지?"
• "거기로 가면 무엇을 찾을 수 있지?"
• "근처에 무엇이 있지?"
• "어떻게 나갈 수 있지?"

길을 찾는 과정과 마찬가지로 앱에서도 사람들이 원하는 것을 쉽게 찾을 수 있어야 합니다.

여기에서도 위의 5가지 원칙이 고스란히 적용됩니다.

• "내가 어디에 있지?" : Strava
• "어디로 가야 하지?" : Apps
• "거기로 가면 무엇을 찾을 수 있지?" : App Conents and Download Button
• "근처에 무엇이 있지?" : App Conents and Download Button
• "어떻게 나갈 수 있지?" : < Apps

---

멘탈 모델

사람들은 결국 익숙한 방식을 원합니다.

위의 수도꼭지에서 왼쪽의 수도꼭지가 온수를 오른쪽 수도꼭지가 냉수를 의미하는 것은 모두가 잘 아는 사실입니다.

만약 왼쪽 수도꼭지가 온도 조절이고 오른쪽 수도꼭지가 수압을 조절한다면 다들 혼란을 겪을 것입니다.

이러한 부분을 유념해 디자인을 해야 합니다.

 

앱에서는 이에 해당되는 부분으로

탭 바, 계층적 내비게이션, 모달 프레젠테이션이 있습니다.

 

탭바

 

탭 바는 우리에게 정말 익숙하며 계층에서 가장 최상단에 위치하고 있습니다.

앱의 의도를 잘 전달해야 하며 현재 사용자가 어디에 있는지, 어디로 갈지, 거기에 가면 무엇을 찾을 수 있는지 보여줍니다.

모양

• 이미지 & 레이블
• 동일한 가중치
• 앱 틴트 컬러

상호작용

• 탭

트랜지션

• 없음

설계에 대한 팁

• 탭을 사용하여 앱 구조의 계층을 반영할 수 있도록 설계하세요
• 탭들 간의 기능을 밸런스 있게 구성하세요.
• 중복되는 기능을 여러 탭에 넣지 마세요.
• 앱 전체에서 탭을 지속적으로 유지해 주세요.
• 명확하고 간결한 레이블을 사용해 주세요.
• 자동으로 내비게이셔닝 되지 않게 설계하세요.
• 모달을 띄우지 마세요.(단 독립적인 작업이나 처음부터 끝까지 한 개의 과정임을 강조할 때는 사용)

계층적 내비게이션

모양

• 테이블 뷰 Row: 레이블 + 오른쪽 꺽쇠
• 컬렉션 뷰: 둥근 모서리의 네모 모양
• 뒤로가기 버튼: 왼쪽 꺽쇠, 이전 뷰의 이름

상호작용

• 탭으로 앞/뒤 이동
• Edge 스와이프로 뒤로가기

트랜지션

 

• 오른쪽에서 왼쪽 스와이프로 Forward
• 왼쪽에서 오른쪽 스와이프로 Backward

설계에 대한 팁

• 앱의 계층을 탐색해야 할 때 사용하세요.
• 내비게이션 바를 통해 현재 위치를 제공하세요
• 꺽쇠와 같은 인디케이터를 사용하세요.

모달 프레젠테이션

다음 3가지 상황 주로 사용합니다.

• 간단한 작업
• 여러 스탭이 포함된 일련의 작업
• 전체화면(동영상)

모양

• 틴트 컬러의 액션 버튼

상호작용

• 스와이프 다운으로 끝내기

트랜지션

• 아래에서부터 위로 슬라이드 업

설계에 대한 팁

• 간단하거나 여러 단계의 작업, 혹은 전체화면을 보여줄 때 사용하세요
• 적절한 취소 액션을 사용하세요
• 모달 위에 모달을 띄우지 마세요

 

내비게이션 리뷰

1. 내비게이션 타입 확인(탭 바, 내비게이션 컨트롤러, 모달)

2. 적절한 내비게이션 시스템을 사용하였는지 확인

3. 인터랙션이 시스템 인터렉션과 어떻게 다른지 확인

4. 개선점 확인

---

점진적 공개

워크플로우의 복잡함을 의도적으로 숨깁니다.

모든 메뉴를 한 번에 보여주는 것이 아니라 조금씩 점진적으로 보여주는 것

ex) 카페에서 커피를 주문하기

  1. 에스프레소가 들어가는지 선택

  2. 에스프레소 메뉴 중에 원하는 거 선택 

  3. 그런 뒤에 원두, 우유, 시럽 등을 선택한다.

 

여기에 80/20 규칙을 적용한다면?

80% Benefit + 20% Actions

 

=> 복잡함을 줄이고 의사결정 과정을 단순화시킨다.

 

QnA

---

인상적이었던 질문 두 가지가 있었습니다.

Q. 사파리에서 주소창이 아래로 내려간 것은 멘탈 모델에 위배되는 것이 아닌가요?

A. 디자인원칙을 지키는 것은 중요하다. 그렇기 때문에 이렇게 되어야만 한다라는 고정관념을 갖지 않는 것도 중요하다.

새로운 시도가 필요하다. 시스템 모델, 멘탈 모델과는 맞지 않지만 핸드폰이 점점 길어지고 있다.

스티브 잡스가 강조했던 한 손으로 핸드폰을 쓰던 시대에서 더 큰 화면으로 컨텐츠를 보는 것으로 트랜드가 변화한 것.

상단에 위치한 주소창이 한손 사용에 불편하기 때문에 디자인에 변화가 있었다.

비슷한 종류의 앱은 어떻게 하는지, 디자인 원칙은 어떻게 지켜지고 있는지 확인해 보면 좋을 듯.

 

Q. 두 개의 다른 탭에서 동일한 화면으로 이동하는 상황은 탭바 원칙에 어긋나는 건가요?

A. 앱스토어 예시로.. 앱의 상세페이지를 가는 방법은 두 가지가 있다.

게임 탭에서 찾아서 들어가는 방법과 검색 탭에서 검색 후 들어가는 방법.

설루션이라고 할 수 있는 건 없지만 두 개의 화면이 동일하게 보이는 것은 문제가 되지 않는다.

다만 탭바가 어디에 있는지 명시적으로 나와있어야 하며, 콘텐츠를 누르다가 탭바가 전환되는 점은 방지해야 한다.

이렇게만 한다면 괜찮을 것.

동일한 화면이라면 모달을 고려해 보는 것도 괜찮다.

게임

검색

후기

---

이번 디자인 챌린지에 나온 키워드들은 너무나도 중요하지만 그만큼 익숙해진 개념들입니다. 이미 WWDC나 HIG에서 많이 다뤘던 내용이죠. Apple에선 어떠한 관점으로 바라볼까에 대한 부분도 궁금해서 세션에 등록하게 되었습니다.

 

여러 개념들에 대해 먼저 설명해 주시고 각각의 챌린지 액티비티를 진행했는데요

PPT에 앱의 특정 상황을 얘기해 주고 어떻게 개선하면 좋을지 서로 얘기해 보는 시간이었습니다.

 

이 포스트에는 제대로 싣지 못했지만 챌린지 액티비티 관련된 파트가 굉장히 인상적이었는데요.

처음에 봤을 땐 마치 제가 처음에 만들었던 앱 같았습니다.

굉장히 어색하고 부자연스러우며 의미가 모호한 부분이 많았기 때문입니다.

그러한 앱을 여러 원칙을 적용해 보며 개선해 나가는 과정을 보여주며 하니 몰입을 해서 그런가 한 시간이 금방 지나가더라고요.

공부하러 간다는 생각으로 참여했지만 이렇게 재미있게 시간을 보낼 줄은 몰랐네요.

 

이런 게 Apple 에반젤리스트 분들의 파워가 아닐까 싶었습니다.

---

추가적으로 사파리는 저 역시 처음에 많이 불편했던 기억이 있었는데요.

노치 디자인이 생기고 나서 적용되었던 것으로 기억하고 있습니다.

 

저는 이렇게 디자인에 변화를 시도한 이유로..

가장 핵심 콘텐츠가 위치할 공간에 주소바가 위치한 것.

베젤을 줄이기 위해 적용한 노치, 다이내믹 아일랜드의 사용자 경험 증대

이렇게 두 가지라고 생각합니다.

 

첫 번째로, 기존 주소바는 웹에서 적용되는 방식을 그대로 모바일로 갖고 온 것이죠.

모바일에 최적화된 디자인은 아니라 생각합니다.

2006년 닐슨 노먼 그룹의 웹 사이트의 유용성 조사에 따르면 사람의 시선이 위에서 아래, 왼쪽에서 오른쪽으로 'F'의 패턴으로 이동하고 있는 것으로 나타났다고 합니다. (모바일이 아니라 웹 조사입니다.)

가장 시선이 먼저 머무르게 되는 공간에 주소바가 있는 것보단 웹의 콘텐츠가 먼저 보일 수 있도록 한 것이죠.

주소바는 정상적으로 웹에 접속한 이후에는 그리 중요한 부분이 아니기에 아래로 옮겨진 것으로 보입니다.

 

두 번째로, 노치, 다이내믹 아일랜드에서의 사용자 경험 때문입니다.

상단의 영역과 Safe Area의 자연스러운 연결은 사용자들에게 더 좋은 경험을 준다고 생각합니다.

가용 공간에 비해 사용할 수 있는 공간이 더 넓다라라는 생각도 들게 만들어주죠.

 

어디까지나 추측입니다만,,

기존에 아무도 의심하지 않았을 디자인을 의심하고 새롭게 변화를 시도한다는 점이 지금의 애플을 만들었다고 생각합니다.

애플의 iOS 개발을 하다 보면 이런 소소한 재미도 함께 얻는 것 같습니다.

앞으로도 계속 발전하는 애플이 되었으면 좋겠네요. (제 밥그릇 보장 좀..)

 

Resource

---

Essential design principles

https://developer.apple.com/wwdc17/802

 

Explore navigation design for iOS

https://developer.apple.com/videos/play/wwdc2022/10001/

 

Love at first launch

https://developer.apple.com/wwdc17/816

 

Human Interface Guidelines

https://developer.apple.com/design/human-interface-guidelines/guidelines/overview/

 

디자인 챌린지 (Asia Pacific)

 

How People Read Online: New and Old Findings

https://www.nngroup.com/articles/how-people-read-online/