[번역] Apple 다이나믹 아일랜드 디자인
해외 UXUI 관련 콘텐츠 번역글
이 글은 해외 UXUI 관련글을 번역 한 콘텐츠입니다. 원문 제목은 [How to design for Apple iOS Dynamic Island]이며 다이나믹 아일랜드 상, 라이브 액티비티의 목적, 크기, UX 팁, 접근성 팁 등을 소개합니다.
다이나믹 아일랜드는 아이폰 상단에 있는 새로운 알약 모양의 펀치홀 디스플레이로, 2022년 9월 아이폰 14 시리즈의 런칭부터 시작되었다. 다이나믹 아일랜드는 FaceID 센서와 전면부 카메라를 둘러싸고 있으며, 만약 앱이 다이나믹 아일랜드 기능을 제공한다면, 유저는 실시간 액티비티들을 보고 상호작용할 수 있다.
이 기사는 다이나믹 아일랜드를 디자인할 때 참고할 가이드를 간단히 소개한다.
어떻게 다이나믹 아일랜드를 디자인할까?
1. 다이나믹 아일래드의 사용 목적을 정의하라 | Define the purpose of using Dynamic Island
2. 콤팩트 뷰, 최소화 뷰, 확장 뷰를 제공하라 | Design for compact view, minimal view expanded view
3. 세부정보와 마진 값을 따르라 | Follow the specifications and margins closely
4. 사용자에게 다이나믹 아일랜드 사용 권한을 넘기라 | Give usesrs control over the Dynamic Island
5. 사용자 경험과 접근성을 염두하라 | Don't forget about user experience and accessibility
6. 온라인 리소스를 활용하라 | Learn from online resources
1. 다이나믹 아일랜드의 사용 목적을 정의하라
Define the purpose of using Dynamic Island
라이브 액티비티는 앱의 최신의 정보를 표출하여, 사용자가 태스크의 진행도를 한눈에 체크할 수 있게 한다.
라이브 액티비티를 디자인하기 전에, 사용자가 이것으로부터 얻을 베네핏을 먼저 생각하라. 만약 당신의 사용자가 빈번한 업데이트를 요구하는 시간에 민감한 태스크 중이라면, 당신은 다이나믹 아일랜드로 태스크의 업데이트를 보여줄 것이다.
다이나믹 아일랜드가 쓰이는 예시:
우버 택시가 목적지에 도착하기까지 남은 시간
Doordash 앱(한국의 배민)에서 음식 배달 단계
보이스 레코더의 타이머
피트니스 앱과 상호작용
파일 다운로드 혹은 업로드 남은 시간
2. 콤팩트 / 최소 / 확장 뷰를 디자인하라
Design for compact view, minimal view expanded view
다이나믹 아일래드를 사용해야겠다고 결정했다면, 3가지 방식으로 라이브 액티비티를 표출하는 것에 익숙해져라.
Compact veiw: 라이브 액티비티가 단 하나일 때
Minimal: 라이브 액티비티가 2개 일 때
Expanded: compact 혹은 minimal 뷰를 클릭하여 확장할 때
3. 세부정보와 마진 값을 따르라
Follow the specifications and margins closely
아래는 아이폰 14 프로와 프로맥스에서 다이나믹 아일랜드와 라이브 액티비티의 크기를 정리한 표이다.
다이나믹 아일랜드 너비:
라이브 액티비티 사이즈:
4. 사용자에게 다이나믹 아일랜드 사용 권한을 넘기라
Give usesrs control over the Dynamic Island
라이브 액티비티는 유저에게 한 앱에서 최우선의 상호작용의 결과물이 여야 한다. 예를 들어, 당신이 음식 배달 앱을 예약했다면, 라이브 액티비티는 음식이 도착하는 잔여 시간을 보여주는 기능이 활성화될 수 있다.
라이브 액티비티가 활성화되면, 라이브 액티비티에서 무언가를 누르면 앱의 한 페이지로 인도되는 것처럼, 항상 유저는 무슨 일이 일어나고 있는지 알 수 있어야 한다. 만약 태스크가 끝나기 전에 유저가 라이브 액티비티를 종료하고 싶어 한다면, 그렇게 할 수 있는 옵션을 열어둬야 한다.
하지만, 어떤 유저는 그들의 아이폰 설정에서 라이브 액티비티를 비활성화하고 싶어 하며 iOS는 그것을 지원하기 때문에 당신은 라이브 액티비티를 디자인할 때 이것 또한 고려해야 한다.
5. 사용자 경험과 접근성을 염두하라
Don't forget about user experience and accessibility
다이나믹 아일랜드 기능을 사용하기 전에, 유저의 니즈와 정보를 파악하기 위한 리서치를 진행하는 것은 중요하다.
라이브 액티비티를 활용하기로 결정했다면, 공식 배포 전 새로운 기능에 대한 사용성 테스트를 먼저 진행하라
아래와 같은 라이브 액티비티의 접근성을 또한 놓치지 말고 고려하라.
다크 모드 지원
현행 앱과 라이브 액티비티의 디자인과 레이아웃 일관성 유지
고대비 색상 (밝은 배경에 어두운 글씨 혹은 어두운 배경에 밝은 글씨)
6. 온라인 리소스를 활용하라
Learn from online resources
아이디어가 고갈됐다면 dribbble에서 Dynamic Island를 검색해 보라. 다른 디자이너와 개발자들이 다이나믹 아일랜드로 무엇을 했는지 들여다보라.
부족한 번역글을 읽어주셔서 항상 감사합니다. 좋아요와 스크립에 큰 힘을 얻고 있습니다
