brunch

매거진 디자이너 성장일기

라이킷 210 댓글 1

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 서한교 Dec 02. 2016

iOS 디자인 가이드라인 번역(1) - Overview

Overview

이 글은 iOS Human Interface Guidelines를 학습하기 위해 번역한 것이며, 개인적인 이해를 돕기 위한 의역이 포함되어 있습니다. 잘못된 부분은 댓글 남겨주시면 감사하겠습니다. :)

1. Design Principles

세계에서 가장 진보된 모바일 OS는 아름답고 매력적인 앱을 디자인하는 데 필요한 모든 것을 제공합니다.

앱 디자이너는 앱스토어 차트의 최상위로 부상하는 특별한 프로덕트를 만들 수 있습니다. 그렇게 하려면 품질과 기능에 대한 높은 기대치를 충족시켜야 합니다.

세 가지 기본 테마는 iOS를 다른 플랫폼과 차별화합니다.

명쾌함. 시스템 전체에서 텍스트는 모든 기기에서 읽혀야 하고, 아이콘은 정확하고 명쾌하며, 장식은 미묘하고 적절하며, 기능에 초점을 맞추는 것은 디자인에 동기를 부여합니다. Negative space(여백), 색상, 글꼴, 그래픽 및 인터페이스 요소는 중요한 콘텐츠를 강조하며 상호 작용하게 합니다.

존중. 실제같은 동작과 선명하고 아름다운 인터페이스는 사람들이 콘텐츠를 이해하는 데 있어서 헷갈리지 않게 상호 작용하도록 도와줍니다. 일반적으로 콘텐츠는 전체 화면을 채우지만 반투명과 흐림은 더 많은 것을 암시하곤 합니다. 그렇기에 베젤, 그라디언트 및 그림자의 사용을 최소화하여 인터페이스를 밝게 유지하면서 콘텐츠를 최우선으로 해야 합니다.

깊이. 뚜렷한 시각적 레이어와 실제같은 동작은 계층(깊이)을 알기 쉽게 전달하고 활력을 부여하며 이해를 돕습니다. 감동과 최고의 기쁨을 발견할 수 있도록 하고, 맥락을 잃지 않고 기능 및 추가 콘텐츠에 대한 액세스를 가능하게 합니다. 트렌지션은 콘텐츠를 탐색할 때 깊이감을 제공합니다.

*영향력과 도달 범위를 극대화하려면 앱의 정체성을 정할 때 다음 원칙을 염두에 둬야 합니다.

1. Aesthetic Integrity (미적인 진실성)

미적인 진실성은 앱의 모양과 동작이 기능과 얼마나 잘 통합되어 있는지 나타냅니다. 예를 들어, 사람들이 심각한 작업을 수행하는 데 도움이 되는 앱은 눈에 거슬리지 않는 그래픽, 표준 컨트롤(*한번 사용법을 익히면 다른 것도 쉽게 익힐 수 있도록 하는 것)및 예측 가능한 동작을 사용하여 집중력을 유지할 수 있습니다. 반면에 게임과 같은 몰입형 앱은 표준 컨트롤이 아닌 재미있고 매력적인 모습을 제공하고, 이를 발견하는 것을 장려합니다.

2. Consistency (일관성)

일관된 응용 프로그램은 시스템 제공 인터페이스 요소, 보편적으로 쓰이는 아이콘, 표준 텍스트 스타일 및 통일된 용어를 사용하여 익숙한 표준 및 패러다임을 구현합니다. 이러한 앱은 사람들이 기대하는 방식으로 기능과 동작을 통합합니다.

3. Direct Manipulation (직접 조작)

화면상의 콘텐츠를 직접 조작하는 것은 사람들을 끌어들이고 이해를 돕습니다. 사용자는 장치를 회전하거나 제스처를 사용하여 화면 내용에 영향을 줄 때 직접 조작을 경험합니다. 직접 조작을 통해 즉각적이고 가시적인 행동 결과를 볼 수 있습니다.

4. Feedback (피드백)

피드백은 행동에 따른 결과를 보여줘서 사람들에게 정보를 제공합니다. 내장된 iOS 앱은 모든 사용자 행동에 대한 반응으로 인지 가능한 피드백을 제공합니다. 대화형 요소는 탭 하면 잠시 강조 표시되고, 진행률 표시기는 장기 실행 작업의 상태를 전달하며, 애니메이션 및 사운드는 작업 결과를 명확하게 표시합니다.

5. Metaphors (메타포)

앱의 가상 객체와 동작이 실제 환경이나 디지털 환경에 뿌리내린 친숙한 경험에 대한 메타포인 경우 사람들은 더 빨리 학습합니다. 메타포는 사람들이 물리적으로 화면과 상호 작용하기 때문에 iOS에서 잘 작동합니다. 사용자는 아래에 있는 콘텐츠를 보기 위해 현재 화면에서 벗어납니다. 사용자는 콘텐츠를 드래그 앤 스와이프 합니다. 스위치를 토글 하고, 슬라이더로 이동하며, 스크롤로 값을 조절합니다. 그들은 심지어 실제 책과 잡지처럼 페이지를 훑어봅니다.

6. User Control (유저 컨트롤)

iOS에서 앱이 아닌 사람이 의사결정을 합니다. 앱은 행동 경로를 제안하거나 위험한 결과에 대해 경고할 수 있지만, 일반적으로 앱이 의사 결정을 맡는 것은 실수입니다. 가장 좋은 앱은 사용자를 활성화하고 원하지 않는 결과를 피하는 것 사이에서 올바른 균형을 찾습니다. 앱은 상호작용 요소를 익숙하고 예측 가능하게 하고 파괴적인 행동을 확인해서, 작업이 이미 진행 중인 경우에도 작업을 취소하기 쉽게 함으로써 사람들이 통제할 수 있는 것처럼 느낄 수 있게 합니다.

2. What's New in iOS 10

검색 화면 및 홈 화면의 위젯.

위젯은 앱을 열지 않아도 시기적절하고 유용한 정보 또는 앱 별 기능을 제공합니다. 과거에는 사람들이 위젯을 Notification Center에 추가하여 신속하게 액세스 했습니다. 이제 사람들은 검색 화면에 위젯을 추가합니다. 홈 화면과 잠금 화면에서 오른쪽으로 스와이프 하여 액세스 할 수 있습니다. 사람들이 3D Touch를 사용하여 홈 화면에서 앱 아이콘을 누르면 나타나는 빠른 액션 목록 위에 위젯을 표시할 수도 있습니다. 위젯의 디자인과 동작 또한 변경되었습니다. 그에 맞게 기존 설계를 검토하고 업데이트하세요.

메시지와 통합.

앱은 메시지의 대화 아래에 표시되는 메시지 확장을 구현하여 메시지와 통합할 수 있으며 사람들이 앱 관련 콘텐츠를 친구와 공유할 수 있습니다. 앱은 텍스트, 사진, 비디오, 스티커 및 메시지 내 게임과 같은 대화형 콘텐츠를 공유할 수 있습니다.

Siri와의 통합.

Apps는 Siri와 통합되어 사람들이 음성을 사용하여 전화 걸기, 메시지 보내기 및 운동 시작과 같은 특정 유형의 응용 프로그램 별 작업을 수행할 수 있습니다.

확장된 알림.

사람들이 3D Touch를 사용하여 알림을 누르거나 잠금 해제된 장치에서 알림을 스와이프 할 때 열리는 확대 상세보기로 알림을 향상할 수 있습니다. 이 보기를 사용하여 사람들이 알림에 대한 추가 정보에 빠르게 액세스 할 수 있게 하고 현재 콘텍스트에서 벗어나지 않고 즉각적인 조치를 취하는 기능을 제공합니다.

3. Interface Essentials

대부분의 iOS 앱은 공통 인터페이스 요소를 정의하는 프로그래밍 프레임워크인 UIKit의 구성 요소를 사용하여 작성됩니다. 이 프레임 워크를 통해 앱은 시스템 전반에서 일관된 모양을 유지하면서 높은 수준의 맞춤 설정을 제공할 수 있습니다. UIKit 요소는 유연하고 익숙합니다. 적응력이 뛰어나므로 iOS 기기에서 멋지게 보이는 단일 앱을 디자인할 수 있으며 시스템에서 모양이 변경되면 자동으로 업데이트됩니다. UIKit에서 제공하는 인터페이스 요소는 크게 세 가지 범주로 나뉩니다.

Bars. 사람들에게 앱의 어느 위치에 있는지 알려주고 탐색 기능을 제공하며 작업을 시작하고 정보를 전달하기 위한 버튼 또는 기타 요소가 포함될 수 있습니다.

Views. 사용자가 텍스트, 그래픽, 애니메이션 및 상호 작용 요소와 같이 앱에 표시되는 기본 콘텐츠를 포함합니다. 뷰를 사용하면 스크롤, 삽입, 삭제 및 정렬과 같은 동작을 사용할 수 있습니다.

Controls. 행동을 시작하고 정보를 전달하세요. 단추, 스위치, 텍스트 필드 및 진행률 표시기는 컨트롤의 예입니다.

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

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