애플 휴먼 인터페이스 가이드라인(1) iOS

UI 디자인의 뼈대가 되는 HIG의 번역을 시작으로 티스토리를 시작한다.

매번 프로젝트를 시작할 때 가이드라인을 정독하려 하지만 영어여서 그런지 결국 필요한 부분만 조금씩 찾아보게 되는 터라

전체적인 이해를 위해 차근차근 번역하려 한다. 오역과 의역이 있으므로 상단 영문, 하단 국문으로 적어두었다.

 

번역은 2020년 12월 iOS 14 기준이며

매 업데이트는 developer.apple.com/design/whats-new/ 에서 확인할 수 있다.

 

---

원본

Themes - iOS - Human Interface Guidelines - Apple Developer

 

iOS

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에서 잘 기능합니다. 그들은 아래의 내용을 보기 위해 뷰(컴포넌트)를 치워냅니다. 내용을 드래그하고 스와이프합니다. 스위치의 토글을 껐다 켜고, 슬라이더를 움직이며, 피커 리스트의 값을 스크롤합니다. 심지어 책과 잡지의 페이지를 넘기기 위해 휙 손가락을 튀기기도 합니다.

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 전체를 통제합니다. 앱은 동작을 직접 제안하거나, 위험한 결과가 있을것이라며 경고할 수는 있으나 이는 대개 의사결정을 앱에 떠넘기는 실수입니다. 최고의 앱은 사용자가 마음껏 할 수 있게 하는 것과 원치않는 결과가 나오지 않도록 막는 것 사이에서 적정한 균형을 찾습니다. 앱은 상호작용의 요소를 친숙하고 예측 가능하도록 유지하고, 파괴적 행동(삭제 등)을 확인시키며, 심지어 사용자가 이미 진행중에 있다 하더라도 기능을 중단시키는데 쉽게 만드는 것을 통해 사용자가 스스로 통제권을 쥐고 있다고 느끼게 할 수 있습니다. 

 

---

Interface Essentials

Most iOS apps are built using components from UIKit, a programming framework that defines common interface elements. This framework lets apps achieve a consistent appearance across the system, while at the same time offering a high level of customization. UIKit elements are flexible and familiar. They’re adaptable, enabling you to design a single app that looks great on any iOS device, and they automatically update when the system introduces appearance changes. The interface elements provided by UIKit fit into three main categories:

대부분의 iOS 앱은 UIKit라는 공동 인터페이스 요소들을 규정하는 개발 프레임워크를 사용해 설계됩니다. 이 프레임워크(UIKit)는 시스템 전체에 변함없는 모습을 달성하는 동시에, 높은 수준의 커스텀을 가능하게 합니다. UIKit 요소는 유연하며 친숙합니다. 또 적응가능하며, 어떤 iOS 기기에서든 멋져보이는 앱을 디자인할 수 있도록 하고, 시스템이 새 모습을 소개할 때마다 자동적으로 업데이트 됩니다. UIKit에서 제공되는 이 인터페이스 요소들은 세 메인 카테고리에 적용됩니다 : 

 

Bars. Tell people where they are in your app, provide navigation, and may contain buttons or other elements for initiating actions and communicating information.

Views. Contain the primary content people see in your app, such as text, graphics, animations, and interactive elements. Views can enable behaviors such as scrolling, insertion, deletion, and arrangement.

Controls. Initiate actions and convey information. Buttons, switches, text fields, and progress indicators are examples of controls.

 

바. 사용자가 어디에 있는지 알려주며, 네비게이션을 제공합니다. 동작을 시작하거나 정보를 전달하기 위한 버튼이나 다른 요소를 포함할 수 있습니다.

뷰. 텍스트, 그래픽, 애니메이션, 상호작용 요소와 같이 사용자가 앱에서 보는 주요한 내용을 포함합니다. 뷰는 스크롤, 삽입, 삭제나 배치와 같은 동작을 가능케 합니다.

컨트롤. 동작을 시작하며 정보를 전달합니다. 버튼, 스위치, 텍스트 영역, 작업 진행 표시자(인디케이터) 등이 컨트롤의 예입니다.

 

In addition to defining the interface of iOS, UIKit defines functionality your app can adopt. Through this framework, for example, your app can respond to gestures on the touchscreen and enable features such as drawing, accessibility, and printing.

iOS tightly integrates with other programming frameworks and technologies too, such as Apple Pay, HealthKit, and ResearchKit, enabling you to design amazingly powerful apps.

 

iOS의 인터페이스를 정의하는 것 뿐 아니라, UIKit는 당신의 앱에 적용할 수 있는 기능성을 정의합니다. 예를 들어, 이 프레임워크를 통해 앱은 터치스크린 위의 제스처에 응답하고, 그림 그리기, 접근성, 출력과 같은 기능을 할 수 있습니다. iOS는 Apple Pay, HealthKit, ResearchKit와 같은 다른 개발 프레임워크나 기술과 통합될 수 있으며, 이는 놀랍도록 강력한 앱을 디자인 할 수 있게 할 것입니다.