[Apple HIG] iOS Design Themes

안녕하세요! joy 입니다.

회사를 다니면서 블로그에 글을 써야지 써야지 하다가, 이제야 한가지 제대로 된 주제를 잡고

이제부터 글을 정성들여서 업로드 해보려고 해요. 오랜만에 글을 쓰다 보니 사담이 많은 점 이해 부탁드립니다 😌

 

이번에 다뤄볼 주제는 바로 Apple에서 제공하는 Human Interface Guide 입니다.

디자이너 분들에게도 필수적인 문서겠지만.. 개발자도 알아두어야 하겠죠?! 

그치만 저는 아직까지 제대로 해당 문서를 공부해본 적이 없고...

영어로 작성되어 있기 때문에.. (물론 파파고나 구글 번역으로 자동 번역도 가능하지만)

하루에 한 페이지 정도를 직접 해석하면서 (네 물론 번역기 도움도 받았습니다..)

제대로 공부를 해보려고 해요! 

 

아마 이 주제가 끝나면.. iOS를 차근차근 복습하면서 다시 게시글을 올릴 것 같습니다..

최근에 CircleCI / Fastlane을 회사에서 적용한 적이 있는데 그 과정과 이슈 트래킹 했던 과정들도 공유하고 싶고요!

현재는 안드로이드 개발도 병행하고 있기 때문에 뭔가 꿀팁이 생긴다면 안드로이드 글도 써보려고 해요 :)

 

그럼 오늘은 HIG 문서 파헤치기를 시작해볼게요! 

 

 

언제나 오류에 대한 지적은 환영입니다.

의역/오역이 있을 수 있습니다. 문제시 댓글로 살짝쿵 알려주세요 :) 

 

iOS Design Themes

As an app designer, you have the opportunity to deliver an extraordinary product that rises to the top of the App Store charts. To do so, you'll need to meet high expectations for quality and functionality.

앱 디자이너로서, 당신은 앱 스토어 차트의 상위권에 오르는 특별한 제품을 제공할 수 있는 기회가 주어집니다.

---

Three primary themes differentiate iOS from other platforms:

iOS를 다른 플랫폼과 차별화하는 세 가지 주요 테마는 :

---

Clarity.

Throughout the system, text is legible at every size, icons are precise and lucid, adornments are subtle and appropriate, and a sharpened focus on functionality motivates the design. Negative space, color, fonts, graphics, and interface elements subtly highlight important content and convey interactivity.

 

명확성. (명료함)

시스템 전체에 걸쳐서, 텍스트는 모든 크기로 읽을 수 있고, 아이콘들은 정확하고 명료하며, 장식은 미묘하고 적절하며 기능성에 대한 명확한 디자인에 동기를 부여합니다.

네거티브 공간(?), 색, 폰트, 그래픽 그리고 인터페이스 요소들은 미묘하게 중요한 컨텐츠를 강조하고 상호작용을 전달합니다.

---

Deference.

Fluid motion and a crisp, beautiful interface help people understand and interact with content while never competing with it. Content typically fills the entire screen, while translucency and blurring often hint at more. Minimal use of bezels, gradients, and drop shadows keep the interface light and airy, while ensuring that content is paramount.

 

존중.

유동적인 모션(움직임)과 선명하고 아름다운 인터페이스는 사람들이 컨텐츠를 이용하고 상호작용 할 수 있도록 하고 동시에 컨텐츠와 경쟁하지 않도록 도와줍니다. 컨텐츠는 일반적으로 전체 스크린을 채우고, 반투명과 블러효과는 종종 더 많은 힌트를 줍니다. 베젤, 그라데이션, 드롭 섀도우를 최소한으로 사용하면 인터페이스를 가볍고 통기성 있게 유지하고 컨텐츠가 중요한지 보장합니다.

---

Depth.

Distinct visual layers and realistic motion convey hierarchy, impart vitality, and facilitate understanding. Touch and discoverability heighten delight and enable access to functionality and additional content without losing context. Transitions provide a sense of depth as you navigate through content.

 

깊이.

구별되는 (뚜렷한) 시각적 레이어와 사실적인 모션 (움직임)은 계층을 전달하고, 활력을 전달하며 이해를 쉽게 도와줍니다. 터치와 검색가능성이 기쁨을 높이고 컨텍스트를 잃지 않고 기능 및 추가 컨텐츠에 액세스할 수 있습니다. 전환은 컨텐츠를 탐색할 때 깊이감을 제공합니다.

 

Design Principles

To maximize impact and reach, keep the following principles in mind as you imagine your app’s identity.

영향력과 도달력을 극대화하기 위해, 당신이 앱의 정체성을 상상할 때 아래의 원칙들을 명심하세요.

---

Aesthetic Integrity

Aesthetic integrity represents how well an app’s appearance and behavior integrate with its function. For example, an app that helps people perform a serious task can keep them focused by using subtle, unobtrusive graphics, standard controls, and predictable behaviors. On the other hand, an immersive app, such as a game, can deliver a captivating appearance that promises fun and excitement, while encouraging discovery.

 

미적 무결성

미적 무결성은 앱의 외모(겉모습)와 행동이 기능과 얼마나 잘 통합되는지를 나타냅니다. 예를 들어, 사람들이 중요한 작업을 수행하는것을 도와주는 앱은 미묘하고 눈에 띄지 않는 그래픽, 표준 제어 및 예측 가능한 행동을 사용함으로써 집중을 유지할 수 있도록 할 수 있습니다. 반면에, 게임과 같은 몰입형 앱은 발견을 장려하고 재미와 흥분을 약속하면서 마음을 사로잡는 외모를 전달할 수 있습니다.

---

Consistency

A consistent app implements familiar standards and paradigms by using system-provided interface elements, well-known icons, standard text styles, and uniform terminology. The app incorporates features and behaviors in ways people expect.

 

일관성

일관된 앱은 시스템에서 제공하는 인터페이스 요소, 잘 알려진 아이콘 및 표준 텍스트 스타일, 통일된 용어를 사용하여 익숙한 표준과 패러다임을 상속합니다. 그 앱은 사람들이 기대하는 방식으로 특징과 행동을 통합합니다.

---

Direct Manipulation

The direct manipulation of onscreen content engages people and facilitates understanding. Users experience direct manipulation when they rotate the device or use gestures to affect onscreen content. Through direct manipulation, they can see the immediate, visible results of their actions.

 

직접 조작

화면 컨텐츠의 직접적인 조작은 사람들을 참여하게하고 이해를 용이하게 합니다. 사용자들은 그들이 디바이스를 회전할 때 혹은 제스처를 사용하여 화면 컨텐츠에 직접 영향을 줄 때 직접적인 조작을 경험합니다. 직접적인 조작을 통해, 그들은 그들의 행동에 대해 즉각적이고 시각적인 결과를 볼 수 있습니다.

---

Feedback

Feedback acknowledges actions and shows results to keep people informed. The built-in iOS apps provide perceptible feedback in response to every user action. Interactive elements are highlighted briefly when tapped, progress indicators communicate the status of long-running operations, and animation and sound help clarify the results of actions.

 

피드백

피드백은 행동을 인정하고 그 결과를 사람들에게 지속적으로 정보를 제공합니다. 내장된 iOS 앱은 모든 사용자 작업에 대한 인식 가능한 피드백을 제공합니다. 탭하면 인터랙티브 요소가 간략하게 강조 표시 되고, 진행률 지표가 장기 실행 작업의 상태를 전달하며, 애니메이션과 소리가 작업결과를 명확히 하는데 도움이 됩니다.

---

Metaphors

People learn more quickly when an app’s virtual objects and actions are metaphors for familiar experiences—whether rooted in the real or digital world. Metaphors work well in iOS because people physically interact with the screen. They move views out of the way to expose content beneath. They drag and swipe content. They toggle switches, move sliders, and scroll through picker values. They even flick through pages of books and magazines.

 

은유

사람들은 앱의 가상 세계와 동작이 실제 세계에 뿌리를 둔 익숙한 경험에 대한 은유일 때 더 빠르게 학습합니다. 사람들은 화면과 물리적으로 (신체적으로) 상호작용하기 때문에 iOS는 은유가 잘 작동합니다. 그들은 밑에 있는 컨텐츠를 노출시키기 위해 뷰를 이동시킵니다. 그들은 드래그하고 화면을 스와이프합니다. 그들은 스위치를 토글하고, 슬라이더를 움직이고, Picker 값을 스크롤합니다. 그들은 심지어 책과 잡지의 페이지를 휙 넘깁니다.

---

User Control Throughout iOS, people—not apps—are in control. An app can suggest a course of action or warn about dangerous consequences, but it’s usually a mistake for the app to take over the decision-making. The best apps find the correct balance between enabling users and avoiding unwanted outcomes. An app can make people feel like they’re in control by keeping interactive elements familiar and predictable, confirming destructive actions, and making it easy to cancel operations, even when they’re already underway.

 

사용자 제어

iOS에서는 앱이 아닌 사람이 제어합니다. 앱은 행동 방침을 제안하거나 위험한 결과에 대해 경고할 수 있지만 일반적으로 앱이 의사 결정을 대신하는 것은 실수입니다. 최고의 앱은 사용자를 활성화하는 것과 원치 않는 결과를 방지하는 것 사이에서 올바른 균형을 찾습니다. 앱은 대화형 요소를 친숙하고 예측가능하게 유지하고, 파괴된 액션을 확인하고, 진행 중인 작업을 쉽게 취소할 수 있게 만듦으로써 사람들이 통제하고 있다는 느낌을 줄 수 있습니다.

 

 

첫번째 문서는 iOS만의 차별화된 테마와 설계 원칙에 대한 설명이었어요!

앱이라는 플랫폼 자체가 사용자와 직접적으로 의사소통을 해야하기 때문에

(tmi : 저는 앱 개발자가 되려고 결심한 이유가 이 부분 때문이었습니다.. 매력적이야..)

사용자 경험을 중시하고, 디자인적인 측면에서도 사용자가 앱을 잘 이해하고, 앱 이용에 불편함이 없도록 하는것이

모든 항목에서 공통적으로 이야기하는 내용인 것 같지 않나요,,? 저만 그런가요,,!

 

아무튼!!

내일은 Interface Essentials 문서를 한번 같이 읽어볼게요!!

 

읽어주셔서 감사합니다!

 

[ 본문 출처 ] 

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