azhy의 iOS 이야기

[iOS] HIG, Human Interface Guide 본문

iOS

[iOS] HIG, Human Interface Guide

azhy 2024. 11. 14. 20:51

2022년 10월 4일에 작성됨

 

HIG, iOS 개발을 조금이라도 접해봤다면 알고 있거나 어디선가 들어봤을 거라 생각합니다. 저도 중요하다는 것을 인지는 하고 있었지만 정작 행동으로 실천을 하지는 않은.. 흠흠.. 그래서 HIG가 뭔지, 또 추구하는 방향은 뭔지 한번 정리해 보고 시간이 남으면 하나씩 읽어나갈 생각입니다.

 

🙋‍♂️ : 오늘 내용은 뭔가요?

👨‍💻 : Apple이 제공하는 HIG 입니다. 원래 한번 쭉 읽어볼 계획이 있었기도 했고, 찾아보니 WWDC22 이후 2022년 6월 7일 자로 업데이트가 됐길래 이번 기회에 한번 읽어보면서 정리해보려 합니다.

 

 

🙋‍♂️ : HIG가 뭐야 ?

👨‍💻 : Apple은 사용자가 익숙한 방식으로 앱을 사용하는 것을 추구하기 때문에 따라서 앱의 모든 요소에 대해 원칙을 정해둔 게 바로 HIG입니다. 공식문서에 따르면, HIG는 모든 Apple 플랫폼에서 개발하기를 원하는 디자이너와 개발자를 위한 종합 리소스입니다. 쉽게 풀어내면 일관된 사용자 경험, 익숙한 방식을 제공하기 위해 애플의 제품에서 구동될 어플을 제작할 때 지켜야 할 가이드라인이라고 할 수 있어요.**

애플에서는 일관된 사용자 경험을 굉장히 중요시하고 강조하고 있음.

 

무려 1985년 ~ 진행 중..

🙋‍♂️ : 아 ㅇㅋㅇㅋ, 근데 이게 왜 중요한데?

👨‍💻 : 중요한 이유는 너무나도 많습니다. 그중에서 몇 가지만 살펴보면, **

  • 애플의 identity를 이해하여 앱을 설계, 협업 시에도 분명한 기준이 될 수 있어 원활한 소통 가능
  • HIG 기준에 맞추면 사용자들이 쓰기 편한 앱이 된다.
  • 안 지키면 리젝 먹을 수도 있음.
  • 현직자들이 입이 닳도록 이야기함 ( 꾸준히 업데이트되므로 최소 1년에 한 번씩 읽는 걸 권장 ), 회사 공고에도 자격요건이나 우대사항에 명시해 놓은 회사가 많음


Designing for iOS

 

실제 문서에서는 iOS 뿐만 아니라 iPad, mac, tv, watch 별로 구분해서 정리를 해놓았어요. 우리는 iOS부터 정복을 해야 하니 iOS부터 읽어나갑시다.

지금부터 나오는 핵심 가치와 디자인 원칙은 이번에 새로 업데이트된 HIG 문서에는 빠진 내용인 거 같습니다만 ( 제가 못 찾는 건지.. ) 그 내용들이 괜찮아서 가져왔습니다. 해당 내용들은 문서 + 블로그에서 괜찮은 내용들만 추렸습니다.

핵심 가치

  • 명확성 (Clarity)
    • 글자는 어떠한 크기로 설정하든 알아보기 쉬워야 함.
    • 아이콘은 의미가 정확히 전달되어야 하고 뚜렷해야 함.
    • 무례하거나 적절하지 않은 꾸미기는 지양.
    • 기능에 명확히 집중할 수 있는 디자인, 중요한 요소에는 강조.
  • 존중 (Deference)
    • 모든 화면을 활용하여 콘텐츠를 표시.
    • 메인 컨텐츠 이외의 다른 요소가 부각되지 않도록 해야 함.
    • 베젤 그라디언트 (색상효과, 강조?) 및 그림자 사용을 최소화 → 전체적으로 밝은 인터페이스 유지.
    • → 인터페이스는 가볍게, 내용에 집중하도록 만듦.
  • 깊이 (Depth)
    • 레이어와 모션을 활용해 계층을 표현함으로써 사용자에게 계층 구조를 전달하고 이해하기 쉽게 돕는다.
    • 콘텐츠를 이동할 때 깊이감을 더해주도록 (제공하는) 화면 전환.
    • 터치 및 검색 기능으로 콘텐츠에 액세스 할 수 있도록 함.

디자인 원칙

  • 미적 무결성 ( Aesthetic Integrity )
    • 앱의 모양, 동작이 기능과 얼마나 잘 어울리는가?
  • 일관성 ( Consistency )
    • 앱의 아이콘, 텍스트 스타일 등 일관된 디자인으로 사용자에게 편리함 제공.
  • 직접 조작 ( Direct Manipualtion )
    • 사용자들이 앱을 조작함으로 이에 대한 반응을 즉각적이고 가시적인 결과로 확인 가능.
  • 피드백 ( Feedback )
    • 사용자가 발생시킨 동작에 대해 그래픽, 사운드를 통한 작업결과를 보여줌
    • 모든 사용자 작업, 동작에 대한 응답으로 인지할 수 있는 피드백(작업결과)을 제공합니다.
  • 비유, 은유 ( Metahpors )
    • 사용자들이 친숙하게 느낄만한 비유를 통해 이해를 돕는다. → 사람들은 실제 세계든 가상 세계든 친숙한 경험에 대한 내용들을 더 빨리 배우기 때문입니다.
  • 사용자 제어 ( Use Controls )
    • 중요한 작업은 사용자가 직접 결정하여 동작하도록 한다. → 앱은 행동 방침을 제안하거나 위험한 결과에 대해 경고할 수 있지만 일반적으로 앱이 의사 결정을 대신해선 안됩니다.

전체 구성

 

Human Interface Guidelines 공식문서입니다.

 

내용들이 엄청 많죠?? 이걸 다 읽으려면.. 천천히 읽으면 언젠가는 다 읽겠죠.. 시작이 반입니다. 저도 하나씩 읽어서 꼭 완독 할 테니, 다들 하나씩 하나씩 읽어가면서 꼭 완독 하시길 바랍니다!