HIG읽기 : iOS Design Theme

➯ Black 컬러는 공식 문서에 적혀있는 것을 해석해서 적은 것이고 Gray 컬러는 저의 개인적인 생각을 추가로 작성한 것입니다 :)

 

보라색은 잘 모르겠거나 이야기 나눠보고 싶은 point들 입니다

 1)  iOS Design Theme  

 

앱 스토어 상단에 있는 앱을 만들기 위해서는

앱의 품질과 기능에 대한 기대를 충족시켜야 한다.

 

iOS에는 다른 플랫폼과 구별되는 세 가지 theme 이 있다.

theme : 대 주제

 

 💡 Clarity  

text는 모든 크기에서 쉽게 읽혀야 한다.

-> font 13 이렇게 하는 것보다 .title 처럼 coding을 해서 사용자가 시스템에서 폰트 크기를 바꿨을때 같이 변경이 되어야 한다..? 

 

icon은 명확하게 표현되고 이해하기 쉬워야 한다.

-> 프로필 "추가"를 나타내는 icon을 고른다고 했을 때 좌측의 icon 보다는 우측의 symbol이 그 의미를 더 정확하게 전달한다. 사용자가 " 프로필 추가를 위해 이 버튼을 누르라는 거겠지?" 라고 생각하게 하는 것보다 " 이걸 누르면 프로필 추가가 되겠군" 이라는 생각이, 그리고 최선의 방법으로는 이런 사고 방식 없이 그냥 누르도록 icon을 선정하는 것이 좋다. 

 

adornments은 미묘하고 적절해야 합니다...? -> 뭔 뜻인지 모르겠다.

adornments...?

 

[음영, 색상, 폰트, 그래픽, 인터페이스 요소]는 미묘하게 콘텐츠를 강조하고, interactivity를 제공한다.

interactivity는 모바일과 사용자 간의 상호작용을 의미한다.

-> 하단의 이미지를 보면 같은 내용을 작성한 텍스트이더라도, 폰트와 색상을 다르게 했을 때 제목이 강조되는 것을 확인할 수 있다. 간단한 예시를 통해 나타냈지만, UI를 만들 때, 이런 하나하나의 요소들의 디테일들이 합쳐져서 전달하고자 하는 의미가 분명하게 전달이 된다.

 

 💡 Deference  

Deference는 사용자에 대한 배려와 친절을 의미한다.

 

흐르는 듯한(fluid) 모션과 견고하고(crisp) 아름다운 인터페이스는 사용자가 그것에 대해 고민하는 대신 앱을 이해하고 콘텐츠와 상호작용 하게 해 준다.

전체 화면을 꽉 채우는 것이나, 투명도와 블러 처리를 하는 것은 때론 더 많은 의미를 담는다.

bezels, gradients, drop shadows을 최소화 시켜서 interface에 좀 더 집중할 수 있게끔 한다.

-> 모달 창이 떴을 때 뒷 배경이 반투명 해지면서 모달에 집중할 수 있게 하거나, content를 방해하는 요소들을 최소하 시킴으로 사용자가 기능의 본질에 더욱 집중할 수 있게끔한다.

 

 💡 Depth  

분명한 레이어와 모션을 통해 계층구조를 표현(convey)하고, 생동감을 전달(impart)하고, 이해를 돕는다.

터치와 발견 가능성(discoverability) 은 기능과 추가적인 콘텐츠를 context를 잃지 않고 확인 가능하게끔 한다.

 

Discoverability is the degree to which something, especially a piece of content or information, can be found in a search of a file, database, or other information system.

검색 가능성(Discoverability)은 파일, 데이터베이스 또는 기타 정보 시스템의 검색에서 특정 항목, 특히 내용 또는 정보를 찾을 수 있는 정도를 말한다.

-> 여기서는 navigationbar에 표시되는 현재 위치 정도라고 생각하면 될 듯하다.

 

ex) 환경 설정에서 기능을 클릭할 때 화면이 좌측으로 넘어가면서 다음 기능(아래 계층)의 화면이 보인다. 또 상단에 보면 현재 사용자가 해당하는 위치를 분명하게 알려주고 있다. Depth가 커지더라도 이렇게 분명한 모션으로 다음 계층으로 넘어갔음을 알려주고 현재 위치를 알려줌으로 사용자의 앱 사용 이해를 돕는다.

 

---

 

 2)  Design Principles  

앱의 파급력과 한계를 최대화하려면 앱의 정체성을 떠올릴 때 아래의 원칙들을 염두해 둬야 한다.

 

💡 Aesthetic Integrity 

앱의 외형과 동작이 앱의 기능들과 얼마나 잘 결합되어 있는지 나타냅니다.

integrate : the state of being shole and undivided ( 분열되지 않고 완전한 상태, 온전함 )

"Good Design is a language, not a style !"

-> 앱의 전체적인 디자인이 앱이 전달하고자 하는 가치나 기능을 담고 있는지를 의미한다. 즉, 디자인을 통해 이게 어떤 앱인지 유추할 수 있도록 해야 한다. 당연하겠지만, 이 Aesthetic Integrity는 앱의 종류에 따라도 달라진다. 

 

 

예를 들어 진지한 작업을 하는 앱의 경우에는 산만하고 요란하지 않은 그래픽 요소와 표준 control들, 예상 가능한 동작을 통해  사용자가 집중을 유지할 수 있게 해야 한다.

 

 

반면에 게임과 같은 몰입감(immersive) 있는 앱의 경우에는 사람들의 시선을 사로잡는(재미와 흥미를 보장하는) 외형을 줄 수 있다.

 

-> immersive는 이후에 modal에서도 비슷한 내용이 나오는데, 개인적으로 처음 "몰입"이라는 텍스트로는 "immersive" 의 의미가 와닿지 않았던 거 같다.

 

ex) 하단의 (A), (B) 이미지 모두 질문을 선택하고, 질문에 대한 답을 작성하는 View이다. 

(A)에서 한 View에 있던 두가지의 기능을 (B)에서는 다음 단계로 넘겨서 하도록 View를 분할하였다.

한 View에서 많은 기능을 하는 것보다 이렇게 flow를 만들어서 하나의 기능에 집중할 수 있도록 immersive를 높이는 방법이 있었다는 것을 깨달았던 사례였다.

결과적으로도 더 깔끔한 디자인을 만들 수 있었고, 사용자에게 피드백을 들었을 때에도 이 앱이 나에게 뭘 하도록 하는 건지 명확하게 가이드라인을 제시해주는 것 같은 느낌을 받았다고 했다.   " Good Design is a language, not a style ! "

애플 아카데미에서 NC1 프로젝트(AcaR) 프로토타입

 

 💡 Consistency  

system (SwiftUI, UIKit 등) 이 제공하는 인터페이스 요소들, 잘 알려진 아이콘들, 표준 텍스트 스타일, 용어의 통일로 cosistent app 을 구현할 수 있다.

consistent app은 일반적인 사용자들이 예상하는 기능들과 동작방식(behavior)을 가지고 있어야 한다. 

   

ex ) 사용자들은 IOS에서의 modal은 이렇게 하단으로 내리면 화면이 닫힌다거나, cancel 과 save 버튼이 상단에 있다거나, 해당 View의 title이 화면 상단의 정중앙에 있다는 것을 자연스럽게 알고 있다. ( 생각해서 안다기 보다는 "자연스럽게" 이미 알고 있다. ) 이렇게 IOS에서는 하나의 UI 일관성을 가지고 있음으로 사용자들이 어떤 앱을 이용하더라도 "자연스럽고" , "일관성" 있게 사용할 수 있다.

개인적으로 흥미로웠던 점은 사용자들이 이 자연스러움을 느끼지 못하도록 여기서 개발자와 디자이너들이 고뇌를 했다는 것을 느끼지 못할 정도로 Seamless해야 한다.

seamless는 HIG 문서를 보면 만날 수 있는 단어인데, 내용이 굉장히 흥미롭다.

네이버사전에 의하면 seamless는 "아주 매끄러운"의 의미를 가진다. seam은 "의복의 부분과 부분, 천의 끝과 끝을 봉합했을 때 생기는 선"으로 가죽쇼파의 봉제선을 예로 생각할 수 있다. 
그렇기 때문에 seamless라는 말은 쇼파를 어루만졌을 때 그 봉제선이 느껴지지 않는 것이라고 설명할 수 있겠다. 

즉, seamless는 자연스러움 조차 모르는 ... 거라고 생각이 든다.. ㅋㅋㅋㅋ 이런 표현 신기해,,,

 

 

 💡 Direct Manipulation  

화면 상 콘텐츠의 즉각적인 조작감은 사용자들이 흥미를 끌게 하고(engage) 이해를 돕는다.

사용자들은 화면 상의 콘텐츠들을 조작하기 위해 기기를 회전시키거나 gesture 를 사용할 때, 즉각적인 조작감을 경험한다.

즉각적인 조작감을 통해, 사용자들은 그들의 행동을 통해 즉각적이고 시각적인 결과를 볼 수 있다.

 

ex) 이렇게 > 버튼을 눌렀을 때 화면이 오른쪽으로 swap되고, < 버튼을 눌렀을 때 왼쪽으로 swap이 되는 현상들이 Direct Manipulation에 속하는 것 같다. 또한, 화면을 가로로 돌렸을 때 끊김이 느껴지는 것보다는 자연스럽게 rotation이 일어나며 돌아가는 현상들도 포함이 된다.

 

 

💡 Feedback 

피드백은 action들을 인지(acknowledge) 시키고 결과를 보여줌으로서 사용자들에게 지속적으로 알려준다.

iOS 내장 앱들은 모든 사용자의 action 에 지각적인(perceptible) 피드백을 제공한다.

interative 요소들을 두드릴 때 짧게 강조되고, progress indicator 들은 오래 실행되는 작업들의 상태를 알려주고, 애니메이션과 소리 는 action 의 결과를 명확하게 해주는데 도움을 준다.

 

ex) 상단의 설정 gif에서 보면 알겠지만 버튼을 눌렀을 때 색이 바뀌며 다음 화면으로 넘어가는 것(버튼 클릭시 소리가 나기도 함), 또 서버에서 정보를 읽어오는 동안 로딩되고 있음을 알려주는 progress indicator 등을 의미한다.

 

 

💡 Metaphors  

사용자들은 앱의 virtual object 와 action 들이 실제 세계나 디지털 세계에서의 친숙한 경험들을 metaphor할 때 앱의 사용법을 빠르게 습득한다.

 

사용자들이 스크린에서 물리적으로 상호작용하기 때문에  iOS에서는 metaphor들은 잘 이용한다.

 

뷰 아래에 위치한 콘텐츠를 보기 위해 뷰를 옆으로 치운다던가, 콘텐츠를 끌고 쓸어내리는 행위, 스위치들을 키고 끄는 행위(toggle), 슬라이더를 움직이는 행위들을 화면 위에서 하는 것이 metaphor의 대한 예시이다.

 

-> 처음에는 뭔가? 싶었는데, 생각해보면 일상생활 속에서 빈번하게 느꼈던 것들인 것 같다. 예를 들어 스위치를 키고 끄는 행위라던가, 이전 페이지를 보기 위해 책장을 앞으로 넘긴다던가 처럼 ? 알고보니 신기한 HIG,,, 잼따 !

 

 💡 User Control  

iOS를 통해 앱이 아닌 "사람들이" 제어하고 있다.

앱은 액션을 제안하거나 위험한 결과에 대해 경고할 수는 있지만, 일반적으로 사람이 아닌 앱이 의사 결정을 맡는 것은 안된다.

최상의 앱은 사용자가 뭔가를 할 수 있도록 하는 것과 앱이 원하지 않는 결과로 가지않도록 하는 것 사이에서 올바른 균형을 찾는다.

앱은 사용자와 소통하는 요소들을 친숙하고 예측 가능한 상태로 유지해야 한다. 뭔가를 삭제할 때에는 한번 더 해당 행동을 확인하고, 이미 진행 중인 작업에서도 쉽게 작업을 취소함으로써 사람들이 앱을 통제하고 있는 것처럼 느끼게 해야 한다.

 

 

 

  Note  

영어 뜻을 분석하고 예시들을 찾아가면서 하나하나 적어 내려가니까 시간이 많이 걸리기는 하지만, 확실히 머릿속에 남는 게 많은 것 같다 ! 동아리 사람들과 함께 HIG 스터디를 시작했는데 다 같이 열심히 해서 많은 것을 얻어가는 과정이길 바란다. 

 

 출처 

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

Themes - iOS - Human Interface Guidelines - Apple Developer