욤찌의 개발 일기
[HIG] Human Interface Guidelines(1) - Designing for iOS 본문
처음으로 기획자, 디자이너님과 함께 하는 프로젝트를 진행하고 있숨다👏
물론 기획자님과 디자이너님이 좋은 아이디어를 매주 뿜뿜 해주시지만
개발자로 UI/UX 관점에서 의견을 제시할 때 더 효과적으로 소통할 수 있는 방법이 뭘까 생각하다 보니!
앱스쿨에서 살짝 찍먹 했던 HIG🎨가 생각이 났댜💡
그래서 겸사겸사 공부해 보는 HIG 공식문서📝
오늘은 iOS 전체적인 설계에 대해서 본 후에 세부적인 내용들도 슬쩍 보려고 한닷
HIG (Human Interface Guidelines)
모든 Apple 플랫폼에서 탁월한 사용자 경험을 제공하기를 원하는 개발자와 디자이너를 위한 종합 Resources.
Apple이 Apple다운 앱을 만들 수 있는 기술과 디자인을 다룬 문서라고 생각하면 될 듯!
Designing for iOS
사람들은 어디에서나, 그리고 이동하는 중에도 연결 상태를 유지하고, 게임을 하고, 미디어를 시청하고, 작업을 수행하고, 개인 데이터를 추적하기 위해 iPhone에 의존한다.
iOS용 앱이나 게임을 설계하기 시작할 때, iOS 경험을 구분하는 기본적인 장치 특성과 패턴을 이해하는 것부터 시작하자.
당신의 디자인 결정에 대해 알릴 때 이러한 특성과 패턴을 사용하는 것은 iPhone 사용자가 좋아하는 앱이나 게임을 제공하는데 도움이 될 수 있다.
아이폰을 사용하는 대부분의 사람들은 정말 모든 시간에 어떤 작업을 수행하든 아이폰에 의존할 것이다.
그래서 아이폰에서 구동되는 앱이나 게임을 설계할 때, 아이폰 기기의 특성과 패턴을 이해한다면 사용자에게 더 나은 앱이나 게임과 같은 서비스를 제공할 수 있다는 뜻!
그렇다면 iOS 경험을 구분 짓는 기본적인 장치 특성과 패턴을 알아보쟈쟛
📍Display (디스플레이)
✔️ iPhone은 중간 사이즈와 고해상도 디스플레이를 가지고 있다.
📍Ergonomics (인체공학)
✔️ 사용자들은 일반적으로 iPhone을 한 손 혹은 양손으로 들고 상호작용하며, 필요에 따라 가로 방향과 세로 방향으로 전환한다. 사람들이 디바이스(iPhone)와 상호작용하는 동안, 그들의 시야 거리는 한 두 피트를 넘지 않는다. (1 피트: 30.48 cm)
📍Inputs (입력)
✔️ 멀티터치 제스처, 화면 키보드, 음성제어는 사람들이 이동하는 중에도 그들이 행동을 수행하고 의미 있는 작업을 완료할 수 있도록 한다. 게다가 사람들은 종종 앱이 그들의 개인 데이터나 기기의 자이로스코프 및 가속도계로부터 입력을 사용하기를 원하며, 공간적 상호작용에 참여하기를 원하기도 한다.
🔎 자이로스코프 및 가속도계: 앱이나 게임에서 사용자의 실시간 움직임에 기반한 경험을 제공할 수 있도록 하는 데이터라고 합미다. Core Motion이 예시라고 하네용!
🔎 공간적 상호작용: 근접 상호작용. 예를 들어, 에어팟이 iPhone이나 맥북에 가까이 있을 때 에어팟을 인식해서 연결되는 것 같은 것을 말합니당
📍App interactions(앱 상호작용)
✔️ 때때로 사람들은 이벤트나 소셜 미디어 업데이트를 확인하거나 데이터를 추적하고 메시지를 보내는데 단 1-2분만 사용한다. 반면에 웹을 탐색하거나 게임을 하거나 혹은 미디어를 즐기는 데에는 한 시간 이상 사용하기도 한다. 사람들은 일반적으로 동시에 여러 개의 앱을 사용하고, 여러 앱들끼리 자주 전환하기도 한다.
📍 System features(시스템 기능)
✔️ iOS는 사람들이 시스템과 그들의 앱을 친숙하고 일관된 방식으로 상호작용 할 수 있도록 돕는 몇 가지 방식을 제공한다.
▪️ Widgets (위젯)
▪️ Home Screen quick actions : 홈 배경에서 앱 아이콘 길게 탭 하면 나오는 동작 메뉴
▪️Spotlights : 홈 화면에서 검색하고 앱을 빠르게 찾을 수 있도록 하는 기능
▪️Shortcuts (단축어)
▪️Activity views (공유시트라고 알려진 이 view라고 하네용)
Best Practices
훌륭한 iPhone 경험은 사람들이 가장 중요하게 여기는 플랫폼과 장치 기능들을 통합한다. iOS에서 당신의 디자인이 자연스럽게 느껴지도록 하기 위해서, 이러한 기능들과 특징들을 통합하는 방법을 우선시해야 한다.
📍사람들이 주요한 작업과 콘텐츠에 집중할 수 있도록 화면의 컨트롤 수를 제한하고, 최소한의 상호작용으로 이차적인 세부사항과 작업을 발견할 수 있도록 한다.
🔎 사람들이 가장 중요한 작업과 내용에 집중할 수 있도록 화면에 불필요한 기능(예를 들면 버튼과 같은)들을 제한하고, 보조적인 정보들은 화면에 주요한 작업과 함께 노출시키기보다 필요할 때 쉽게 찾을 수 있는 방법으로 설계한다.
📍기기 방향, 다크 모드, 동적 타입과 같은 외관 변화에 매끄럽게 적용해서 사람들이 자신에게 가장 잘 맞는 구성(UI)을 선택할 수 있도록 한다.
🔎 동적 타입 : 시스템 설정을 통해 텍스트 크기를 조절할 수 있게 해주는 기능
📍사람들이 보통 기기(iPhone)를 들고 있는 방식을 수용하는 상호작용을 지원하도록 하자. 예를 들어, 사람들은 컨트롤이 화면의 중간이나 하단 영역에 위치할 때 도달하기가 더 쉽고 편안하다고 생각하기 때문에 사람들이 스와이프 해서 뒤로 넘기거나 목록행에서 작업을 시작할 수 있도록 하는 것은 특히 중요하다.
🔎 보통 사람들이 아이폰을 잡을 때 엄지손가락이 편하게 터치할 수 있는 부분이 화면의 중앙이나 하단 영역이기 때문에, 스와이프를 하는 동작이나 목록에서 작업을 시작하는 작업을 할 때 이런 부분을 고려하면 좋다는 의미!
📍사람들의 허가를 받아서, 사람들이 데이터를 입력하지 않는 경험을 향상시킬 수 있는 방식으로 플랫폼 기능을 통해 사용할 수 있는 정보를 통합해라. 예를 들어, 결제를 수락하거나 생체 인증을 통해 보안을 제공하고, 기기의 위치를 사용하는 기능을 제공할 수 있다.
🔎 결제를 하거나 생체 인증이 필요한 상황과 같이 사용자의 데이터가 필요할 때, 이미 아이폰에 입력된 정보를 활용하여 사용자의 입력을 최소화할 수 있도록 한다.
Why should we know about the HIG?
HIG 공식문서와 여러 블로그를 찾아보면서 느낀 것들은
💡 HIG를 통해 기획자/개발자/디자이너는 iOS 환경과 통합되는 Apple만의 앱을 만들 수 있다.
모든 Apple의 플랫폼에서 사용자가 익숙한 방식으로 앱을 사용할 수 있고, 이를 통해 사용자에게 안정적이고 일관된
사용자 경험을 제공할 수 있다. 한마디로 사용자가 "Apple 스러운" 서비스를 경험할 수 있다!
💡 그래서 HIG를 기반으로 한다면, 여러 직군이 협업할 때 함께 참고할 수 있는 좋은 Resource이다.
Apple Developer 웹 사이트 디자인 카테고리 첫 화면에는 이런 문장이 있다
Learn how to design great apps and games that integrate seamlessly with Apple platforms.
✨ Apple 플랫폼과 완벽하게 통합되는 훌륭한 앱과 게임을 설계하는 방법을 배워보자! ✨
이 문장이 굉장히 흥미로웠다.
그저 앱이나 게임과 같은 기능적인 서비스를 잘 만드는 방법을 넘어서서 Apple의 "플랫폼(아이폰, 아이패드 등)"과 잘 맞는 앱을 만드는 설계 방법이라니,,
사용자가 플랫폼을 손으로 만지는 순간부터 앱 서비스를 이용하는 그 모든 과정에서 Apple의 정체성을 느낄 수 있도록 세심하게 설계한 것 같다는 생각이 들었다.
사실 개발자로 전향하기 전 간호사로 일했을 때도 환자 경험이 정말 중요했다. 진짜 환자가 된 것처럼 병원복도 입고 병상에 누워서 실제 간호서비스를 받아보는 교육도 받았었다.
그런 경험이 있어서 그런 건지,, 사용자 경험을 중요시하는 이런 애플의 철학이 신기하고 정말 흥미롭다.
그리고 Apple만의 정체성을 가지고 일관되고 통일된 UX를 주겠다는 것도,,!!!
그래서 HIG 문서를 읽는 게 너무 재밌고,, 뭐랄까,, 모든 영역에서 사용자 경험을 중심으로 문서화해놓은 애플,, 멋져,,
뭔가 iOS를 선택한 게 정말 잘한 일인 것 같은 기분도 든다 허허,,🤔
HIG 블로깅은 정말 재미있게 할 수 있을 것만 같은 너낌~.~🔥
📖 reference(늘 감사합니당) ♥️
https://developer.apple.com/design/human-interface-guidelines/designing-for-ios
Designing for iOS | Apple Developer Documentation
People depend on their iPhone to help them stay connected, play games, view media, accomplish tasks, and track personal data in any location and while on the go.
developer.apple.com