HIG읽기 : Interface Essentials

 1) Human Interface Guidelines를 공부해야 하는 이유 

대부분의 iOS 앱은 공통 인터페이스 요소를 정의하는 프로그래밍 framework인 UIKit/ SwiftUI의 구성 요소를 사용한다. 이 프레임워크는 높은 수준의 custiom을 가능하게 함과 동시에 시스템 전체에서 앱이 일관된 모습을 나타낼 수 있도록 한다.

사용자들에게는 UIKit 요소는 유연하고 친숙하다. 어떤 iOS 기기에서나 화면이 깨지지 않도록 도와주며, 시스템이 외관 변화를 도입하면 자동으로 업데이트된다. 

 

대부분의 iOS 앱은 UIKit/ SwiftUI의 components를 사용하게 되는데, 이 framework를 통해서 일관된 디자인과 함께 사용자의 흐름을 이끌어낼 수 있다. UIKit 요소는 사용자에게 친숙하면서도 유연성 있게 설계되어졌기 때문에 iOS의 개발자하면 필히 공부를 해야 한다. 

 

- 일관된 디자인

: iOS하면 다들 떠오르는 하얗고 깔끔한 디자인을 위해서 🤩 보통 디자인적인 요소들은 device가 달라지면 모양이 이상해져서 개별적으로 디자인해야 하는데, UIKit의 요소들은 각 device의 크기에 맞게 일관된 디자인으로 자동적으로 업데이트가 된다. 

 

- 사용자에게 친숙하면서도 유연성 있는 기능

: 아이폰 유저라면 navigationView에서 back 하는 거나, modal 창을 끄는 것 등 자연스럽게 알고 있는 기능들이 있다. 이것은 HIG에서 명시되어 있는 interface elements 덕분이라고 할 수 있겠는데, 그것을 "그냥" 사용하기 보다는  어떤 elements들이 있는지를 알아보고 그것들이 기능들을 하는 것이 가장 이상적인지 알아봄으로서 필요한 기능해 필요한 element들을 사용할 수 있을 거라 ㅁ...믿....믿는ㄷ....r.... 

 

- iOS 시스템 업데이트 시에 자동적으로 변경됨 

: 커스터마이징해서 UX,UI를 꾸밀 수도 있지만, iOS 시스템이 업데이트되었을 때 커스터마이징한 요소들은 구시대 버전을 사용하거나 코딩을 해서 직접 고쳐줘야 하는데, 만약 제공하는 UIKit를 사용한다면, 저절로 업데이트가 된다. 그리고 만약 커스터마이징을 하더라도 기본적인 interface elements의 틀을 벗어나는 것은 추천되지 않는 방법이다.

 

ex) 이렇게 title "Alarm"을 처음에는 Big title로 보여주고, 스크롤시에 inline으로 보여주는 기능이 IOS 다음 version에 추가되었을 때 IOS에서 지원해주는 framework를 사용했더라면 자동적으로 해당 기능이 들어와서 따로 코드를 수정하지 않아도 가능하게 된다.

 

 

  2) three main categories  

UIKit에서 제공하는 interface element는 다음 3가지 주요 범주로 분류 된다..

1️⃣ Bars

사용자가 어느 기능을 수행하고 있는지 위치를 알려주며, 네비게이션을 제공해준다. 또한 action을 시작하거나 정보를 전달하기 위한 버튼이나 기타 요소들이 포함된다.

 

2️⃣ Views

text, graphics, animations, and interactive elements 등 앱에서 볼 수 있는 주요 콘텐츠를 포함한다.

Views는 scrolling, insertion, deletion, and arrangement과 같은 동작을 활성화할 수 있다.

 

3️⃣ Controls

Controls는 action을 하거나, 정보를 전달하는 요소들로, Buttons, switches, text fields, and progress indicators들이 예이다.

UIKit은 iOS의 인터페이스를 정의하는 것 외에도 앱이 사용할 수 있는 기능을 define할 수 있다. 예를 들어, 이 프레임워크를 통해 앱은 터치스크린의 제스처에 응답하고 그리기, 접근성 및 인쇄와 같은 기능을 활성화할 수 있다.

iOS는 Apple Pay, HealthKit 및 ResearchKit와 같은 다른 프로그래밍 프레임워크 및 기술과 긴밀하게 통합되어 놀랍도록 강력한 앱을 설계할 수 있다.

 

 NOTE 

앞으로 자세히 요소들 하나하나를 알아볼 예정이지만 해당 요소들의 이름과 공식 문서에 있는 이미지를 기억해두려고 노력했다. 특히 View나 Controls은 Bars과 달리 낯선 용어들이 있어서 조금 더 많은 시간을 할애해서 확인해봤다. 

이번주 동안 HIG 문서를 다 읽는 것을 목표로 링고의 유튜브를 먼저 보고, 공식문서를 읽으면서 정리해 나가려고 한다. 화이팅 ! 이가은 !

 

 출처 

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

Interface Essentials - iOS - Human Interface Guidelines - Apple Developer