Apple HIG : Foundation-Layout 한글번역

Halogen·2022년 7월 8일

Apple HIG Human Interface Guidelines design iOS

Human Interface Guidelines 한글번역

목록 보기

1/6

WWDC22이후 업데이트된 Human Interface Guigeline(HIG)을 번역한 내용입니다.
Specifications는 번역하지 않았고, tvOS는 추후 번역 업데이트 예정입니다.
오탈자나 오역 알려주시면 감사하겠습니다.

다양한 맥락에 맞는 일관된 레이아웃을 사용하는 것은 이해하기 쉬운 사용자 경험을 만들고, 모든 기기에서 사용자들이 좋아하는 앱과 게임을 즐길 수 있게 해줍니다.

가이드와 안전 영역 Guides and safe areas

레이아웃 가이드(layout guide) 는 화면에 컨텐츠를 위치, 정렬시키고 간격을 주는 것을 도와주는 직사각형 영역입니다. 이 시스템은 컨텐츠 주위에 표준 여백을 쉽게 적용하고 뛰어난 가독성을 위해 텍스트 너비를 제한할 수 있는 사전 정의된 레이아웃 가이드를 포함합니다. 또한 커스텀 레이아웃 가이드를 정의할 수도 있습니다.

안전 영역(safe area) 은 네비게이션 바, 탭 바, 툴바, 또는 화면에 나타나는 다른 뷰(View)에 덮여있지 않는 뷰 안의 영역입니다. 센서 하우징(노치)이나 홈 인디케이터같은 디바이스의 디스플레이나 인터렉티브 기능을 피하기 위해서는 안전 영역이 필수적입니다.

iOS, iPadOS 및 tvOS에서 시스템은 앱이 화면에 표시되는 방식에 영향을 줄 수 있는 디바이스 환경의 변화를 특징짓는 특성(traits) 의 모음을 정의합니다. SwiftUI 혹은 Auto Layout을 사용하면 다음과 같은 다양한 특성(traits)에 인터페이스가 동적으로 적응할 수 있습니다.

다양한 디바이스 화면 크기, 해상도 및 색 영역
다양한 디바이스 방향 (가로/세로)
스플릿 뷰 (Split View)
iPad의 멀티테스킹 모드
동적 텍스트 크기 변화
시스템이 지역(국가)에 따라 활성화할 수 있는 국제화 기능 (왼쪽→오른쪽/오른쪽→왼쪽 레이아웃 방향, 날짜/시간/숫자 포맷, 서체 변형, 텍스트 길이)
시스템 기능 가용성

모범 사례 Best Practices

가능한 한 같은 컨텐츠를 표시하면서도, 컨텍스트 변화에 적절히 맞춰지는 일관된 레이아웃을 설계하십시오. 사람들은 디바이스를 회전시키거나, 창의 크기를 조절하거나, 다른 장치로 전환했을 때 사용자 경험이 매끄럽게 작동하고 익숙하게 유지되기를 기대합니다. 시스템 정의 안전 영역, 여백 및 가이드를 준수하고 계층(hierarchy) 내 뷰들의 배치를 미세 조정할 수 있는 레이아웃 조정자(layout modifier)를 지정해 적응형 인터페이스를 보장합니다.

각 플렛폼의 주 디스플레이 및 시스템 기능들을 존중하십시오. 안전 영역은 다양한 장치의 모서리 곡률 및 센서 하우징과 같은 요소들과 iPhone 및 iPad의 홈 인디케이터와 앱 전환기(App Switcher)와 같은 인터랙티브한 시스템 요소에 간섭하지 않도록 최적화합니다. 안전 영역은 또한 바(bars)와 같은 인터랙티브 구성 요소를 고려하는 데 도움이 되며 크기가 변경되면 컨텐츠를 동적으로 재배치합니다.

배치를 활용해 상대적인 중요도를 보여주십시오. 일반적으로 주요 아이템은 화면, 창의 위쪽 절반, 앞쪽(leading)에 가까운 위치에 배치합니다.화면을 보거나, VoiceOver와 같은 스크린 리더를 사용하는 경우 일반적으로 이 방향에서 시작합니다.

충분한 공간을 주어서 중요 정보를 강조하십시오. 사람들은 가장 중요한 정보를 바로 보기 원하기 때문에 중요하지 않은 세부 정보들로 화면을 어지럽히는 것을 원하지 않습니다. 사람들은 스크롤을 통해 2차 정보(secondary information)에 쉽게 접근할 수 있습니다.

사람들이 원하는 정보를 찾을 수 있도록 시각적 그룹을 생성하십시오. 예를 들어 네거티브 스페이스(Negative Space), 배경의 형태, 색상 및 재질, 또는 구분선을 사용해 별개의 영역들에 관련된 요소 및 정보를 표시할 수 있습니다.

정렬을 사용해 시각적 스캔을 용이하게 하고 조직 및 계층 구조를 전달하십시오. 정렬은 앱이 깔끔하고 정돈되어 보이고 스크롤 할 때 집중할 수 있도록 하며 정보를 쉽게 찾을 수 있게 도와줍니다. 또한 들여쓰기와 정렬은 사람들이 정보 계층을 시각화하는 데 도움이 됩니다.

종횡비에 주의하십시오. 화면 크기에 따라 종횡비가 다를 수 있으며, 이로 인해 아트워크가 크롭되거나 레터박스 혹은 필러박스가 표시될 수 있습니다. 이 경우에는 아트워크의 종횡비를 변경하지 말고 중요한 시각 컨텐츠가 모든 디스플레이 사이즈에서 표시되도록 화면을 채울 수 있게 크기를 조정하십시오.

텍스트 크기 변경에 대비하십시오. 사람들은 다른 텍스트 크기를 선택할 때 대부분의 앱이 이에 반응하기를 기대합니다. 텍스트 크기 변경에 대응하기 위해서 레이아웃을 조정해야 할 수도 있습니다. 앱에 텍스트를 표시하는 것에 대한 지침은 타이포그래피(Typography)를 참조하십시오.

가능하다면 화면 밖 요소(offscreen elements)를 일부분 표시하여 숨겨진 컨텐츠를 암시하는 것을 고려하십시오. 컨텐츠가 한 화면에 들어오지 않는 큰 항목들에서는 화면 밖에 있는 항목의 일부를 표시해 추가 컨텐츠를 암시할 수 있습니다.

터치스크린에서는 인터렉티브한 요소에 충분한 터치 영역을 제공하십시오. 모든 컨트롤에 대해 최소 44x44포인트의 터치 가능 영역(tappable area)을 유지합니다.

다양한 화면 방향, 현지화 및 텍스트 크기를 적용해 여러 기기에서 앱을 프리뷰하십시오. 일반적으로 와이드컬러와 같은 기능은 실제 기기에서 프리뷰하는 것이 최선이지만, Xcode Simulator를 사용하여 클리핑 및 기타 레이아웃 문제를 확인할 수 있습니다. 예를 들어 iOS앱이 가로 모드를 지원하는 경우 시뮬레이터를 사용해 기기가 왼쪽 혹은 오른쪽으로 회전하든 상관 없이 레이아웃이 좋게 보이게 할 수 있습니다.

플랫폼에 관한 고려 사항 Platform considerations

iOS, iPadOS

가로와 세로 방향 모두 지원하는 것을 목표로 하십시오. 사람들은 다양한 이유로 다른 방향을 선택하고 일반적으로 모든 상황에서 앱이 잘 작동하기를 기대합니다. 앱이 한 방향으로 실행되는 것이 중요한 경우, 사람들에게 기기를 회전하라고 말하지 마십시오. 사용자가 지원되지 않는 방향으로 기기를 잡았을 때 앱이 자동으로 회전하지 않는다면 본능적으로 기기를 돌려야 한다는 것을 알게 됩니다. 가로로만 사용하는 앱이라면 기기를 왼쪽 혹은 오른쪽 어느 방향으로 돌려도 잘 작동해야 합니다.

앱이 특정 기기에서 실행되는 경우, 해당 기기의 모든 디스플레이 크기로 실행되는지 확인하십시오. 즉, iPhone 전용 앱은 모든 iPhone 화면 크기에서 실행되어야 하며 iPad 전용 앱은 모든 iPad 화면 크기에서 실행되어야 합니다.자세한 내용은 기기 화면 크기 및 방향(Device screen sizes and orientations)을 참조하십시오.

전체 폭 버튼을 삽입하십시오. 전체 폭 버튼 측면에는 시스템 정의 표준 여백을 준수하십시오. 화면 하단의 전체 폭 버튼은 일반적으로 모서리가 둥글도 안전 영역의 하단에 정렬되었을 때 가장 보기 좋습니다. 또한 홈 인디케이터와 겹치지 않는 것을 보장합니다.

화면을 채우도록 시각 컨텐츠를 확장하십시오. 배경이 디스플레이 가장자리까지 확장되고 표나 컬렉션과 같이 수직으로 스트롤할 수 있는 레이아웃이 가장 아래쪽까지 이어지는지 확인합니다.

iPad에서는 화면 측면에 가로 방향으로 컨트롤을 배치하는 것을 고려해보십시오. 화면 좌우에 컨트롤이 있으면, 기기를 들고 있는 동안 양손으로 쉽게 컨트롤에 닿을 수 있습니다.

가능한 인터렉티브 컨트롤을 화면 하단에 배치하지 마십시오. 방향과 관계없이 디스플레이 하단에 있는 시스템 제스처를 사용해 홈 스크린이나 app switcher등의 기능에 액세스합니다. 이 제스처는 이 영역에 구현된 커스텀 제스처를 취소시킬 수 있습니다. 또, 화면의 먼 구석에 컨트롤을 두지 마십시오. 사람의 손이 편안하게 닿기 어려울 수 있기 때문입니다. 게임에서 화면 하단(안전 영역 아래)에 컨트롤을 배치해야 할 경우 화면 상단과 하단에 배치할 때 일치하는 삽입물을 사용하고, 사람들이 컨트롤과 상호작용을 하려고 할 때 실수로 조작하지 않도록 홈 인디케이터 주위에 충분한 공간을 두십시오.

다양한 상태 표시줄(status bar) 높이에 대비하십시오. 상태 표시줄 아래에 컨텐츠를 표시하는 경우, 안전 영역을 사용해 필요에 따라 동적으로 컨텐츠의 위치를 변경할 수 있습니다.

상태 표시줄이 없는 것이 가치 있거나 사용자 경험을 향상시킬 때만 상태 표시줄을 숨기십시오. 상태 표시줄은 사람들이 유용하다고 생각하는 정보를 표시하며 대부분의 앱이 사용하지 않는 화면 영역을 차지하므로 일반적으로 이를 계속 표시하는 것이 좋습니다.

iOS, iPadOS의 안전 영역 iOS, iPadOS safe areas

안전 영역은 뷰 컨트롤러(view controller)가 제공할 수 있는 네비게이션 바, 탭 바, 툴바 혹은 다른 기타 뷰에 포함되지 않는 뷰 안의 영역을 말합니다.

iOS 키보드 레이아웃 가이드 iOS keyboard layout guide

iOS 15는 키보드가 현재 차지하는 공간과 안전한 영역 삽입을 설명하는 키보드 레이아웃 가이드를 정의합니다. 이 가이드를 사용하면 사람들이 사용하는 키보드 유형이나 위치에 관계없이 키보드가 앱의 필수적인 부분처럼 느껴지도록 할 수 있습니다. 개발자 가이드는 UIKeyboardLayoutGuide를 참조하십시오.


키보드가 나타나면 레이아웃 가이드가 해당 영역과 위치를 나타냅니다.	키보드가 사라지면 레이아웃 가이드의 상단이 안전 영역 레이아웃 가이드의 하단과 일치합니다.

macOS

창 하단에 컨트롤이나 중요한 정보를 배치하지 마십시오. 사람들은 종종 창의 하단 모서리를 화면의 아래쪽으로 움직입니다.

watchOS

텍스트를 시스템 정의 측면 여백(system-defined side margins)에 맞추십시오. Apple Watch Series 4 이상에서, watchOS는 화면 측면 가장자리에 1픽셀 경계를 정의합니다. 텍스트를 한 눈에 알아볼 수 있도록 최소 측면 레이아웃 여백에 맞춰 정렬해야 하지만, 그래픽 요소와 버튼 배경이 여백을 넘어 이 1픽셀 경계까지 확장되도록 할 수 있습니다.


40mm	44mm

화면의 한쪽 가장자리에서 다른 쪽 가장자리로 확장하도록 컨텐츠를 디자인하십시오. Apple Watch의 베젤은 컨텐츠 주위에 자연스러운 시각적 패딩(padding)을 제공합니다. 귀중한 공간을 낭비하지 않으려면 요소 간 패딩을 최소화하는 것이 좋습니다.

인터페이스에 2개 혹은 3개 이상의 컨트롤을 나란히 배치하지 마십시오. 일반적인 규칙은 글리프가 포함된 버튼을 3개 이하로 표시하거나 텍스트를 포함하는 버튼을 2개 이상 표시하지 않는 것입니다. 일반적으로 텍스트 버튼을 화면의 전체 너비로 제공하는 것이 더 좋지만, 화면이 스크롤되지 않는 한 짧은 텍스트 레이블이 있는 두 개의 나란히 있는 버튼도 잘 작동할 수 있습니다.

다른 사람에게 보여주고 싶어할 수 있는 뷰에서 자동 회전을 지원하십시오. 사람들이 손목을 뒤로 돌리면 앱은 일반적으로 잠자기 상태로 들어가는 것으로 동작에 반응하지만, 경우에 따라 콘텐츠를 자동 회전하는 것이 합리적입니다. 예를 들어 착용자는 친구에게 이미지를 보여주거나 점원에게 QR 코드를 보여주기를 원할 수 있습니다. 개발자 가이드는 isAutorotating를 참조하십시오.