├── .gitignore ├── Inputs ├── Digital-Crown.md └── Eyes.md ├── README.md ├── Components ├── Menus-and-actions │ └── Ornaments.md └── Presentation │ └── Windows.md ├── Foundations ├── Branding.md ├── Motion.md ├── Dark-Mode.md ├── Spatial-layout.md ├── Immersive-experiences.md ├── Writing.md ├── Materials.md ├── Images.md ├── Inclusion.md ├── App-icons.md ├── Icons.md ├── Privacy.md ├── Accessibility.md └── Layout.md ├── Platforms └── Designing-for-visionOS.md ├── Technologies └── SharePlay.md └── Patterns └── Playing-audio.md /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .obsidian/ -------------------------------------------------------------------------------- /Inputs/Digital-Crown.md: -------------------------------------------------------------------------------- 1 | # Digital Crown 2 | [원문 보기](https://developer.apple.com/design/human-interface-guidelines/digital-crown) 3 | 4 | ### 디지털 크라운은 Apple Vision Pro 및 Apple Watch의 중요한 하드웨어 입력 장치입니다. 5 | 6 | ![](https://i.imgur.com/ofPyngb.png) 7 | Apple Vision Pro와 Apple Watch 모두에서 사용자는 디지털 크라운을 사용하여 시스템과 상호 작용할 수 있으며, Apple Watch에서는 디지털 크라운을 사용하여 앱과 상호 작용할 수도 있습니다. 8 | 9 | 10 | ## Apple Vision Pro 11 | Vision Pro에서 사람들은 디지털 크라운을 사용하여 다음과 같은 작업을 수행합니다: 12 | 13 | - 볼륨 조절 14 | - 포털 또는 환경의 몰입도 조정 15 | - 최신 콘텐츠가 가장 앞에 표시되도록 하기 16 | - 접근성 설정(Accessibility settings) 열기 17 | - 앱을 종료하고 홈 보기로 돌아가기 18 | 19 | 완전 몰입형 앱(즉, [FullImmersionStyle](https://developer.apple.com/documentation/SwiftUI/FullImmersionStyle) 을 사용하는 앱)에서는 디지털 크라운을 사용하여 앱을 종료할 수 있지만 몰입도에는 영향을 미치지 않습니다. 20 | 21 | 자세한 내용은 [Immersive experiences(몰입형 경험)](../Foundations/Immersive-experiences.md)을 참조하세요. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![title_frame](https://github.com/i-colours-u/Human-Interface-Guidelines-KR/assets/60260284/3e6b3608-6284-401f-afb7-ecbc0032af32) 2 | > Apple에서는 **일관된 사용자 경험**을 제공하기 위해, Human Interface Guidelines 문서를 통해 필요한 **디자인 동작과 포함한 여러 규칙**을 안내합니다. 3 | 4 | - 해당 Repo는 Apple의 [Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines) 문서를 한글로 번역한 문서이며, 자유롭게 PR 오타 수정 및 내용 추가가 가능합니다. 5 | - H.I.G의 내용 중, 문맥 상 자연스러움을 위해 용어를 다루는 부분은 직접 영어로 표기를 하였습니다. 어색하거나, 오타가 있는 경우 PR 및 Issue로 남겨주세요. 6 | 7 | ## 새롭게 업데이트 된 내용 8 | 9 | (가장 먼저 `visionOS`에 관련한 내용부터 번역을 진행하고, 이후부터 내용을 채워나가는 중입니다.) 10 | | Designing for visionOS | Spatial layout | Immersive experiences | 11 | | ---- | ---- | ---- | 12 | | [![](https://i.imgur.com/2wZAL5F.png)](Platforms/Designing-for-visionOS.md) | [![](https://i.imgur.com/FcVD32n.png)](Foundations/Spatial-layout.md) | [![](https://i.imgur.com/97QVR3r.png)](Foundations/Immersive-experiences.md) | 13 | 14 | | Ornaments | Eyes | SharePlay | 15 | | ---- | ---- | ---- | 16 | | [![](https://i.imgur.com/LQQ4U7P.png)](Components/Menus-and-actions/Ornaments.md) | [![](https://i.imgur.com/mvxXPGn.png)](Inputs/Eyes.md) | [![](https://i.imgur.com/lWTV4Nr.png)](Technologies/SharePlay.md) | 17 | -------------------------------------------------------------------------------- /Components/Menus-and-actions/Ornaments.md: -------------------------------------------------------------------------------- 1 | # Ornaments 2 | [원본 링크](https://developer.apple.com/design/human-interface-guidelines/ornaments) 3 | 4 | ### 비전OS에서 `Ornaments`는 `window` 내용을 복잡하게 만들거나 가리지 않고 `window`과 관련된 제어 및 정보를 표시합니다. 5 | 6 | ![](https://i.imgur.com/ieNE6jN.png) 7 | 8 | 9 | `ornaments`은 연결된 `window`와 평행한 평면에서 Z축을 따라 약간 앞쪽에 떠 있습니다. 연결된 `window`가 이동하면 `ornaments`도 함께 이동하여 상대적인 위치를 유지하며, `window`의 콘텐츠가 스크롤되는 경우 `ornament`의 컨트롤이나 정보는 변경되지 않고 유지됩니다. 10 | 11 | `ornament`는 `window`의 모든 가장자리에 표시할 수 있으며 버튼, 세그먼트 컨트롤 및 기타 보기와 같은 UI 구성 요소를 포함할 수 있습니다. 시스템 `ornament`를 사용하여 [toolbars](https://developer.apple.com/design/human-interface-guidelines/toolbars), [tab bars](https://developer.apple.com/design/human-interface-guidelines/tab-bars), 비디오 재생 컨트롤과 같은 구성 요소를 만들고 관리하며, `ornament`를 사용하여 사용자 지정 구성 요소를 만들 수 있습니다. 12 | 13 | 14 | ## Best practices 15 | 16 | - ### 자주 사용하는 컨트롤이나 정보를 `window`을 어지럽히지 않는 일관된 위치에 표시하려면 `ornament`를 사용하는 것이 좋습니다. 17 | `ornament`는 `window` 가까이에 있기 때문에 사람들은 항상 어디에서 찾을 수 있는지 알 수 있습니다. 예를 들어 음악에서는 `ornament`를 사용하여 지금 재생 중 컨트롤을 제공함으로써 이러한 컨트롤이 찾기 쉬운 예측 가능한 위치에 유지되도록 합니다. 18 | 19 | - ### 보조 컨트롤과 정보를 제공하려면 별도의 `window`이 아닌 `ornament`를 선호합니다. 20 | `ornament`를 사용하여 관련 기능을 제공하면 사용자가 별도로 관리해야 하는 추가 `window`을 열지 않아도 됩니다. 21 | 22 | - ### 일반적으로 `ornament`을 계속 표시합니다. 23 | 동영상을 보거나 사진을 볼 때와 같이 사람들이 `window`의 콘텐츠에 몰입할 때는 `ornament`을 숨기는 것이 합리적일 수 있지만, 대부분의 경우 사람들은 `ornament`을 통해 일관되게 컨트롤에 액세스할 수 있는 것을 좋아합니다. 24 | 25 | - ### `ornament`의 너비를 관련 `window`의 너비와 같거나 좁게 유지하는 것을 목표로 하세요. 26 | `ornament`을 `window`보다 넓게 만들면 `window` 옆의 탭 표시줄이나 기타 세로 콘텐츠를 가릴 수 있습니다. 27 | 28 | - ### `ornament`에 테두리가 없는 버튼을 사용하는 것이 좋습니다. 29 | 기본적으로 `ornament`의 배경은 [glass](https://developer.apple.com/design/human-interface-guidelines/materials#visionOS)이므로 버튼을 배경에 직접 배치하면 테두리가 보이지 않을 수 있습니다. 사람들이 `ornament`에서 테두리가 없는 버튼을 보면 시스템에서 자동으로 호버 효과를 적용합니다(자세한 내역은 [Eyes](https://developer.apple.com/design/human-interface-guidelines/eyes)을 참조하세요). 30 | 31 | - ### 사용자 지정 구성 요소를 만들어야 하는 경우가 아니라면 시스템에서 제공하는 `toolbar`과 `tab bar`을 사용하세요. 32 | visionOS에서는 `toolbar`과 `tab bar`가 자동으로 `ornament`으로 표시되므로 이러한 구성 요소를 만들기 위해 추가적으로 `ornament` 요소를 사용할 필요가 없습니다. [Toolbars](https://developer.apple.com/documentation/SwiftUI/Toolbars)와 [TabView](https://developer.apple.com/documentation/SwiftUI/TabView) 개발자 문서를 참조하세요. 33 | 34 | 35 | ### 플랫폼 고려 사항 36 | - iOS, iPadOS, macOS, watchOS, tvOS는 해당되지 않습니다. 37 | 38 | --- 39 | ### 연관 내용 40 | - [Layout](https://developer.apple.com/design/human-interface-guidelines/layout) 41 | 42 | ### 개발자 문서 참고 43 | - [ornament(visibility:attachmentAnchor:contentAlignment:ornament:)](https://developer.apple.com/documentation/SwiftUI/View/ornament(visibility:attachmentAnchor:contentAlignment:ornament:)) 44 | 45 | ### 영상 46 | 47 | | [Design for spatial user interfaces](https://developer.apple.com/videos/play/wwdc2023/10076) | [Principles of spatial design](https://developer.apple.com/videos/play/wwdc2023/10072) | 48 | | -------- | -------- | 49 | | ![](https://i.imgur.com/kTIL2Ke.png)| ![](https://i.imgur.com/PD74ZGq.png) 50 | 51 | -------------------------------------------------------------------------------- /Foundations/Branding.md: -------------------------------------------------------------------------------- 1 | # Branding 2 | ## 앱, 게임에서 고유한 브랜드 가치를 많은 플랫폼에서 일관되게 제공한다면 사람들은 안정감, 일관된 경험을 느낄 수 있습니다. 3 | 4 | ![](https://i.imgur.com/erAz9xi.png) 5 | 6 | [app icon](https://developer.apple.com/design/human-interface-guidelines/app-icons)뿐만 아니라 브랜드를 강조할 수 있는 여러 기회가 있습니다. 자세한 내용은 [App Store Marketing Guidelines](https://developer.apple.com/app-store/marketing/guidelines/)을 참조하세요. 7 | 8 | ## Best practices 9 | - ### 표시하는 UX Writting에 일정한 톤을 유지하세요. 10 | 예를 들어, 특정 브랜드는 평범한 단어, 이모티콘, 간단한 문장 구조를 사용하여 사용자에게 격려와 낙관적인 느낌을 전달할 수 있습니다. 11 | 12 | - ### 강조 색상을 선택하는 것도 고려하세요. 13 | 대부분의 플랫폼에서 인터페이스 아이콘, 버튼, 텍스트와 같은 앱 요소에 시스템이 적용하는 색상을 지정할 수 있습니다. macOS에서는 앱이 지정한 색상 대신 시스템에서 사용할 수 있는 고유한 강조 색상을 선택할 수도 있습니다. 지침은 [Color](https://developer.apple.com/design/human-interface-guidelines/color)을 참조하세요. 14 | 15 | - ### 사용자 지정 글꼴 사용을 고려하세요. 16 | 브랜드가 특정 글꼴과 강하게 연관되어 있다면 모든 크기에서 가독성이 뛰어나고 굵은 텍스트 및 큰 글꼴과 같은 접근성 기능을 지원하는지 확인하세요. 시스템 글꼴은 작은 크기에서도 최적의 가독성을 제공하도록 설계되었기 때문에 헤드라인과 부제목에는 사용자 지정 글꼴을 사용하고 본문 카피와 캡션에는 시스템 글꼴을 사용하는 것이 효과적일 수 있습니다. 자세한 내용은 [Typography](https://developer.apple.com/design/human-interface-guidelines/typography)를 참조하세요. 17 | 18 | - ### 브랜딩이 항상 콘텐츠에 우선하도록 하세요. 19 | 특정 화면에 브랜드을 표시하는 것 외에는 다른 기능을 제공하지 않는다면, 사람들이 관심을 갖는 콘텐츠를 위한 공간이 줄어들 수 있습니다. 사람들의 경험을 방해하지 않는 세련되고 눈에 거슬리지 않는 방식으로 브랜딩을 통합하는 것을 목표로 하세요. 20 | 21 | - ### 표준 패턴을 일관되게 사용하여 사람들이 편안함을 느낄 수 있도록 하세요. 22 | 고도로 양식화된 인터페이스도 익숙한 동작을 유지하면 친근하게 다가갈 수 있습니다. 예를 들어, UI 구성 요소를 예상되는 위치에 배치하고 표준 기호를 사용하여 일반적인 동작을 표현하세요. 23 | 24 | - ### 맥락을 제공하는 데 필수적인 경우가 아니라면 앱이나 게임 전체에 로고를 표시하고 싶은 유혹을 뿌리치세요. 25 | 사람들은 자신이 어떤 앱을 사용하고 있는지 상기시킬 필요가 거의 없으며, 일반적으로 중요한 정보와 제어 기능을 제공하는 데 공간을 사용하는 것이 좋습니다. (불필요하게 헤더나 본문에 로고 삽입 필요 X) 26 | 27 | - ### 시작 화면(런치 스크린, 스플래시)을 브랜딩 기회로 활용하지 마세요. 28 | 일부 플랫폼에서는 시작 화면을 사용하여 시작 경험을 최소화하는 동시에 앱이나 게임에 리소스를 로드하는 데 약간의 시간을 제공합니다(자세한 내용은 [Launch screens](https://developer.apple.com/design/human-interface-guidelines/launching#Launch-screens) 참조). 시작 화면은 너무 빨리 사라져 정보를 전달하기 어렵습니다. 대신에 브랜드 가치를 담은 온보딩을 사용하는 방식을 고려해보세요. 지침은 [Onboarding](https://developer.apple.com/design/human-interface-guidelines/onboarding)을 참조하세요. 29 | 30 | - ### Apple의 상표 가이드라인을 준수하세요. 31 | 앱 이름이나 이미지에 Apple 상표가 표시되어서는 안 됩니다. [Apple Trademark List](https://www.apple.com/legal/intellectual-property/trademark/appletmlist.html)및 [Guidelines for Using Apple Trademarks](https://www.apple.com/legal/intellectual-property/guidelinesfor3rdparties.html)을 참조하세요. 32 | 33 | ## 플랫폼 고려사항 34 | - iOS, iPadOS, watchOS, tvOS, macOS 해당 사항 없습니다. 35 | 36 | --- 37 | 38 | ### 연관 내용 39 | - [Marketing resources and identity guidelines](https://developer.apple.com/app-store/marketing/guidelines/) 40 | - [Show more with app previews](https://developer.apple.com/app-store/app-previews/) 41 | - [Color](https://developer.apple.com/design/human-interface-guidelines/color) 42 | 43 | 44 | ### 영상 45 | 46 | | [How to Pick a Custom Font](https://developer.apple.com/videos/play/wwdc2017/815) | 47 | | -------------------------------------------------------------------------------------------- | 48 | | ![](https://i.imgur.com/zLQi6Ki.png) | 49 | 50 | 51 | -------------------------------------------------------------------------------- /Inputs/Eyes.md: -------------------------------------------------------------------------------- 1 | 2 | # Eyes 3 | [원본 링크](https://developer.apple.com/design/human-interface-guidelines/eyes) 4 | 5 | ### visionOS에서는 사람들이 가상의 물체를 바라보며 초점을 맞추고 상호작용할 수 있는 대상으로 식별합니다. 6 | 7 | ![](https://i.imgur.com/or8kxnD.png) 8 | 9 | 10 | 사람들이 대화형 개체를 보면 visionOS가 해당 개체를 강조 표시하여, 내가 보고있는 것이 원하는 개체인지 확인할 수 있도록 시각적 피드백을 제공합니다. 11 | 12 | 시각적 피드백 또는 호버 효과는 개체에 초점이 맞춰져 있음을 나타내는 용도로 사용합니다. 13 | 14 | 사용자는 탭과 같은 [indirect gesture(간접적인 제스처)](https://developer.apple.com/design/human-interface-guidelines/gestures#visionOS)를 사용하여 해당 개체와 상호 작용할 수 있습니다. 15 | 16 | 예를 들어 Safari에서 뒤로 버튼을 보고 초점을 맞춘 다음 탭하여 이전 웹 페이지로 돌아갈 수 있습니다. 마찬가지로 사용자는 사진 라이브러리에서 개별 사진을 보고 탭하여 열 수 있습니다. 17 | 18 | 드물게는 초점을 맞춘 후 시스템이 자동으로 구성 요소의 확장된 보기를 표시할 수 있습니다. 19 | 20 | 예를 들어 사용자가 탭 표시줄을 볼 때 컴포넌트의 크기가 조정되어 각 탭 옆에 텍스트 레이블이 표시됩니다. 21 | 22 | 이 시나리오에서는 탭 표시줄이 확장되기 전에 개별 탭이 강조 표시되어 레이블이 표시되기 전에 사용자가 탭을 선택할 수 있습니다. 시스템에서 제공하는 버튼을 클릭하면 툴팁을 표시할 수도 있습니다. 23 | 24 | 25 | > 중요 26 | > 27 | > 사용자의 개인 정보를 보호하기 위해 visionOS는 사용자가 탭하기 전에 어디를 보고 있는지에 대한 직접적인 정보를 제공하지 않습니다. 시스템에서 제공하는 구성 요소를 사용하는 경우, 사용자가 구성 요소를 탭할 때 visionOS가 자동으로 알려줍니다. 자세한 내역은 [Adopting best practices for privacy and user preferences](https://developer.apple.com/documentation/visionOS/adopting-best-practices-for-privacy) 문서를 참조하세요. 28 | 29 | focus에 대한 자세한 지침을 확인하고 싶은 경우, [Focus and selection](https://developer.apple.com/design/human-interface-guidelines/focus-and-selection) 문서를 참조하세요. 30 | 31 | ## Best practices 32 | 33 | - ### 항상 사람들이 앱과 상호 작용할 수 있는 다양한 방법을 제공하세요. 34 | 사람들이 기기와 상호 작용하는 방식을 개인화하기 위해 사용하는 접근성 기능을 지원하도록 앱을 디자인하세요. 지침은[Accessibility(접근성)](../Foundations/Accessibility.md)을 참조하세요. 35 | 36 | - ### 시각적으로 편안하게 디자인하세요. 37 | 사람들이 사용해야 하는 개체가 [filed of view(시야)](../Foundations/Spatial-layout.md#Field-of-view)내에 있는지 확인하여 사람들이 주요 작업을 수행할 수 있도록 도와주세요. 38 | 39 | 앱이 공유 공간에서 실행되는 경우 시스템은 창과 볼륨을 편리한 위치에 자동으로 배치하고, 40 | 41 | 앱이 전체 공간에서 실행되는 경우 앱 콘텐츠를 적절하게 배치할 수 있도록 사람의 머리 자세에 대한 정보에 대한 액세스를 요청해야 할 수 있습니다. 42 | 43 | 또한 넓은 영역이나 여러 단계의 깊이를 통해 사람들이 여러 번 빠르게 눈을 조정하지 않도록 하면 시각적으로 편안한 환경을 제공할 수 있습니다. 자세한 내용은 [Depth](..Foundations/Spatial-layout.md#Depth)를 참조하세요. 44 | 45 | - ### 콘텐츠를 편안한 시청 거리에 배치합니다. 46 | 예를 들어, 사람들이 오랜 시간 동안 콘텐츠를 읽거나 참여하는 동안 편안함을 유지하도록 하려면 콘텐츠를 최소 1미터 이상 떨어진 곳에 배치하세요. 47 | 48 | 일반적으로 콘텐츠를 잠시만 보거나 상호 작용할 것이 아니라면 콘텐츠를 너무 가까이 배치하지 않는 것이 좋습니다. 49 | 50 | - ### 아이템 주변에 충분한 공간을 확보하여 사람들이 아이템에 쉽게 집중할 수 있도록 하세요. 51 | 52 | 시선은 자연적으로 한 곳을 바라보는 동안에도 방향을 조금씩 빠르게 조정하는 경향이 있기 때문에 UI 개체를 한데 모으면 다른 곳으로 이동하지 않고는 한 개체를 보기가 어려울 수 있습니다. 53 | 54 | 각 항목의 경계에 최소 16포인트의 여백을 사용하거나 항목의 중심이 항상 60포인트 이상 떨어져 있도록 배치하여 대화형 항목 사이에 충분한 공간을 확보할 수 있습니다. 55 | 56 | 추가적인 레이아웃 가이드는 [Layout](https://developer.apple.com/design/human-interface-guidelines/layout) 및 [Spatial layout](..Foundations/Spatial-layout.md)을 참조하세요. 57 | 58 | 59 | - ### 미묘한 시각적 단서를 사용하여 사람들이 가장 원할 것 같은 항목을 보도록 유도하세요. 60 | 예를 들어, 아이템을 시야 중앙 근처에 배치하거나 부드러운 움직임, 대비 증가, 색상이나 배율의 변화와 같은 기법을 사용하여 사람들의 주의를 끄는 것이 효과적일 수 있습니다. 61 | 62 | 일반적으로 화려하거나 거칠지 않으면서도 눈에 띄는 단서를 선호합니다. 63 | 64 | - ### 시각적 방해 요소를 최소화하세요. 65 | 시각적 소음이 많으면 사람들이 원하는 물체를 찾기가 어려울 수 있습니다. 66 | 시각적 움직임은 더욱 주의력을 분산시킬 수 있습니다: 사람들은 특히 주변 시야에서 움직임을 감지하면 자동으로 반응하는 경향이 있어 관심 있는 물체에 집중하기 어렵습니다. 67 | 68 | - ### 시야를 가득 채우는 반복되는 패턴이나 텍스처를 사용하지 마세요. 69 | 경우에 따라 사람의 눈은 패턴이나 텍스처의 여러 요소에 고정되어 요소가 서로 다른 깊이를 가진 것처럼 보일 수 있습니다. 이러한 효과를 방지하려면 패턴을 더 작은 영역에 사용하는 것이 좋습니다. 70 | 71 | - ### 표준 UI 컴포넌트를 사용하는 것을 선호합니다. 72 | 시스템에서 제공하는 컴포넌트는 사용자가 볼 때 일관된 시각적 피드백을 제공하고 초점을 맞췄을 때 일관되게 작동합니다. 사용자 지정 (커스텀) 컴포넌트가 시각적 피드백을 제공하기 위해 서로 다른 시각적 단서를 사용하는 경우, 사람들이 앱에서 이러한 컴포넌트가 어떻게 작동하는지 배우고 기억하기 어려울 수 있습니다. 73 | 74 | - ### 일반적으로 대화형 항목은 둥근 모양으로 만듭니다. 75 | 사람들의 시선은 도형의 모서리 쪽으로 쏠리는 경향이 있어 도형의 중앙에 초점을 맞추기가 어렵습니다. 항목의 모양이 둥글수록 사람들이 더 쉽게 초점을 맞출 수 있습니다. 76 | 77 | 78 | ## 플랫폼 고려사항 79 | - iOS, iPadOS, watchOS, tvOS, watchOS에는 해당되지 않습니다. 80 | 81 | --- 82 | 83 | 84 | ### 연관 내용 85 | - [Focus and selection](https://developer.apple.com/design/human-interface-guidelines/focus-and-selection) 86 | - [Immersive experiences](../Foundations/Immersive-experiences.md) 87 | - [Gestures](https://developer.apple.com/design/human-interface-guidelines/gestures) 88 | - [Spatial layout](..Foundations/Spatial-layout.md) 89 | 90 | ### 개발자 문서 참고 91 | - [Adopting best practices for privacy and user preferences](https://developer.apple.com/documentation/visionOS/adopting-best-practices-for-privacy) 92 | ### 영상 93 | 94 | | [Design for spatial input](https://developer.apple.com/videos/play/wwdc2023/10073) | [Design considerations for vision and motion](https://developer.apple.com/videos/play/wwdc2023/10078) | [Principles of spatial design](https://developer.apple.com/videos/play/wwdc2023/10072) | 95 | | -------- | -------- | -------- | 96 | | ![](https://i.imgur.com/jxMan0M.png) | ![](https://i.imgur.com/2HWO6zp.png) | ![](https://i.imgur.com/PD74ZGq.png) | 97 | 98 | -------------------------------------------------------------------------------- /Platforms/Designing-for-visionOS.md: -------------------------------------------------------------------------------- 1 | 2 | # Designing for visionOS 3 | [원본 링크](https://developer.apple.com/design/human-interface-guidelines/designing-for-visionos) 4 | 5 | ### `Apple Vision Pro`를 착용하면 무한한 3D 공간에 들어가 주변 환경과 연결 상태를 유지하면서 앱과 게임을 즐길 수 있습니다. 6 | 7 | ![](https://i.imgur.com/bqt0iGU.jpg) 8 | 9 | `visionOS`용 앱이나 게임 디자인을 시작할 때는 플랫폼을 구분하는 기본적인 디바이스 특성과 패턴을 이해하는 것부터 시작하세요. 이러한 특성과 패턴을 활용하여 디자인 결정을 내리고 몰입도 높고 매력적인 경험을 제작할 수 있습니다. 10 | 11 | ### Space 12 | Apple Vision Pro는 [Windows](../Components/Presentation/Windows.md#Windows), [Volumes](../Components/Presentation/Windows.md#Volumes), 3D 물체와 같은 가상 콘텐츠를 볼 수 있는 무한한 캔버스를 제공하며, 다른 장소로 이동할 수 있는 [Immersive experiences(몰입도 높은 경험)](../Foundations/Immersive-experiences.md)을 선택할 수 있습니다. 13 | 14 | ### Immersion 15 | visionOS 앱에서 사람들은 서로 다른 수준의 [immersion(몰입도)](../Foundations/Immersive-experiences.md) 사이를 유동적으로 전환할 수 있습니다. 16 | 기본적으로 앱은 여러 앱을 나란히 실행할 수 있는 공유 공간에서 실행되며 사용자는 `window`를 열고, 닫고, 재배치할 수 있습니다. 또한 하나의 앱만 실행되는 전체 공간으로 전환하도록 선택할 수도 있습니다. 전체 공간 앱에서 사람들은 주변 환경과 혼합된 3D 콘텐츠를 보거나 포털을 열어 다른 장소를 보거나 다른 세계로 들어갈 수 있습니다. 17 | 18 | ### Passthrough 19 | [Passthrough](../Foundations/Immersive-experiences.md#Immersion-and-passthrough)는 기기의 외부 카메라에서 라이브 비디오를 제공하며, 사람들이 실제 주변 환경을 보면서 가상 콘텐츠와 상호 작용할 수 있도록 도와줍니다. 사람들이 주변 환경을 더 많이 또는 더 적게 보고 싶을 때 [Digital Crown](../Inputs/Digital-Crown.md)을 사용하여 `Passthrough`의 양을 조절할 수 있습니다. 20 | 21 | ### Spatial Audio 22 | 비전 프로는 음향 및 시각 감지 기술을 결합하여 주변 환경의 음향 특성을 모델링하여 자동으로 공간에서 자연스러운 오디오 사운드를 만들어냅니다. 앱이 사용자의 주변 환경에 대한 정보 액세스 권한을 받으면 [Spatial Audio](../Patterns/Playing-audio.md#visionOS)를 미세 조정하여 맞춤형 경험을 생생하게 구현할 수 있습니다. 23 | 24 | ### Focus and gestures 25 | 일반적으로 사람들은 [눈](../Inputs/Eyes.md)과 [손](https://developer.apple.com/design/human-interface-guidelines/gestures.md#visionOS)을 사용하여 Vision Pro와 상호 작용합니다. 사람들은 가상 개체를 바라보며 [focus](https://developer.apple.com/design/human-interface-guidelines/focus-and-selection)을 맞추고 탭과 같은 간접적인 제스처를 취하여 활성화하는 방식으로 대부분의 작업을 수행합니다. 또한 직접 제스처를 사용하여 손가락으로 터치하여 가상 객체와 상호 작용할 수도 있습니다. 26 | 27 | ### Ergomics 28 | Vision Pro를 착용하는 동안 사람들은 현실과 가상의 모든 것을 기기의 카메라에 전적으로 의존하기 때문에 시각적 편안함을 유지하는 것이 가장 중요합니다. 이 시스템은 사용자의 키나 앉은 자세, 서 있는 자세, 누워 있는 자세에 관계없이 콘텐츠를 착용자의 머리에 맞춰 자동으로 배치하여 편안함을 유지하도록 도와줍니다. visionOS는 사용자가 콘텐츠에 도달하기 위해 움직이지 않고 콘텐츠를 사용자에게 제공하기 때문에 사용자는 앱과 게임에 몰입하는 동안 편안하게 휴식을 취할 수 있습니다. 29 | ### **Accessibility** 30 | Apple Vision Pro는 보이스오버, 스위치 제어, 드웰 제어, 가이드 액세스, 헤드 포인터 등과 같은 [Accessibility(접근성)](../Foundations/Accessibility.md) 기술을 지원하므로 사용자가 자신에게 적합한 상호작용을 사용할 수 있습니다. 모든 플랫폼과 마찬가지로 비전OS에서도 시스템에서 제공하는 UI 구성 요소는 기본적으로 접근성을 지원하며, 시스템 프레임워크는 앱이나 게임의 접근성을 향상시킬 수 있는 방법을 제공합니다. 31 | 32 | > 드웰 제어(Dwell Control): 일반적인 제어가 아닌 시선 또는 머리등 추적 기술을 사용해 마우스 동작을 수행하는 것 33 | 34 | 35 | --- 36 | 37 | ## Best practices 38 | 39 | 훌륭한 visionOS 앱과 게임은 친숙하고 접근하기 쉬우면서도 아름다운 콘텐츠, 확장된 기능, 매혹적인 모험으로 사람들에게 특별한 경험을 제공합니다. 40 | 41 | ### Apple Vision Pro의 고유한 기능을 활용하세요. 42 | 공간, 공간 오디오 및 몰입감을 활용하여 경험에 생동감을 불어넣는 동시에 [Passthrough](../Foundations/Immersive-experiences.md#Immersion-and-passthrough), [focus](https://developer.apple.com/design/human-interface-guidelines/focus-and-selection) 및 제스처를 기기에서 집처럼 편안한 방식으로 통합할 수 있습니다. 43 | 44 | ### 앱의 가장 특별한 순간을 표현하는 방법을 설계할 때 몰입감의 전체 스펙트럼을 고려하세요. 45 | `window` 중심의 UI 중심 컨텍스트, 완전 몰입형 컨텍스트 또는 그 중간 정도의 컨텍스트에서 경험을 제공할 수 있습니다. 앱의 각 주요 순간에 대해 가장 적합한 최소 [immersion(몰입도)](../Foundations/Immersive-experiences.md)를 찾아야 합니다. 모든 순간이 완전 몰입형이어야 한다고 가정하지 마세요. 46 | 47 | ### UI를 중심으로 구성된 경험을 제공하고 싶다면 `window`를 사용하세요. 48 | 사람들이 표준 작업을 수행할 수 있도록 공간에서 평면으로 표시되고 익숙한 컨트롤이 포함된 표준 [windows](../Components/Presentation/Windows.md#Windows)를 선호합니다. visionOS에서는 사용자가 원하는 위치에 `window`를 재배치할 수 있으며, 시스템의 [dynamic scaling](../Foundations/Spatial-layout.md#Scale) 기능을 통해 `window` 콘텐츠가 가까이 있든 멀리 있든 가독성을 유지할 수 있습니다. 49 | 50 | ### 편안함을 우선시하세요. 51 | 사람들이 앱이나 게임과 상호 작용할 때 편안하고 신체적으로 안정된 상태를 유지할 수 있도록 다음 기본 사항을 염두에 두세요. 52 | 53 | - 콘텐츠를 사람의 [filed of view(시야)](../Foundations/Spatial-layout.md#Field-of-view) 내에 표시하고 머리를 기준으로 배치합니다. 콘텐츠와 상호 작용하기 위해 고개를 돌리거나 자세를 바꿔야 하는 위치에 콘텐츠를 배치하지 마세요. 54 | - 압도적이거나, 흔들리거나, 너무 빠르거나, 정지된 기준 프레임이 누락된 [motion(모션)](https://developer.apple.com/design/human-interface-guidelines/motion#visionOS)을 표시하지 마세요. 55 | - 사용자가 무릎이나 옆구리에 손을 얹은 상태에서 앱과 상호 작용할 수 있는 [indirect gestures(간접 제스처)](https://developer.apple.com/design/human-interface-guidelines/gestures#visionOS)를 지원하세요. 56 | - 직접 제스처를 지원하는 경우, 인터랙티브 콘텐츠가 너무 멀리 떨어져 있지 않고 사람들이 장시간 인터랙션할 필요가 없는지 확인하세요. 57 | - 완전하게 [Immersive experiences(몰입도 높은 경험)](../Foundations/Immersive-experiences.md)에 있는 경우,사람들이 너무 많이 움직이도록 유도하지 마세요. 58 | 59 | ### 사람들이 다른 사람들과 활동을 공유할 수 있도록 지원하세요. 60 | [SharePlay](../Technologies/SharePlay.md)를 사용하여 공유 활동을 지원하면 사람들은 다른 참가자의 공간 페르소나를 볼 수 있어 모두가 같은 공간에 함께 있는 것처럼 느낄 수 있습니다. 61 | 62 | ### 연관 내용 63 | - [Apple Design Resources](https://developer.apple.com/design/resources/#visionOS-apps) 64 | 65 | ### 개발자 문서 참고 66 | - [Creating your first visionOS app](https://developer.apple.com/documentation/visionOS/creating-your-first-visionos-app) 67 | 68 | ### 영상 69 | 70 | | [Design for spatial user interfaces](https://developer.apple.com/videos/play/wwdc2023/10076) | [Principles of spatial design](https://developer.apple.com/videos/play/wwdc2023/10072) | [Design for spatial user interfaces](https://developer.apple.com/videos/play/wwdc2023/10072) | 71 | | -------- | -------- | -------- | 72 | | ![](https://i.imgur.com/kTIL2Ke.png)| ![](https://i.imgur.com/PD74ZGq.png) | ![](https://i.imgur.com/lqNmxbv.png) | 73 | -------------------------------------------------------------------------------- /Foundations/Motion.md: -------------------------------------------------------------------------------- 1 | # Motion 2 | ## 모든 플랫폼에서 아름답고 유연한 모션은 인터페이스에 생동감을 불어넣어 상태를 전달할 수 있습니다. 또한, 모션은 피드백과 가이드를 제공하며, 사용자의 시각적 경험을 풍부하게 합니다.![A sketch of three overlapping diamonds, suggesting the movement of an element from left to right. The image is overlaid with rectangular and circular grid lines and is tinted yellow to subtly reflect the yellow in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/1a0efd7807cfcba7a5821be86b20bafc/foundations-motion-intro@2x.png) 3 | 4 | 많은 시스템 구성 요소에 모션이 자동으로 포함되므로 앱이나 게임 전체에서 친숙하고 일관된 경험을 제공할 수 있습니다. 사용자 지정 모션을 디자인할 때는 사람들이 방향을 잃지 않고 편안하게 사용할 수 있도록 의도적인 애니메이션을 선호하고, 사용자의 행동에 대한 명확한 피드백을 제공하며, 사용자가 부담스럽지 않게 인터페이스를 익힐 수 있도록 도와야 합니다. 5 | 6 | ## Best practices 7 | 8 | ### - 사소한 디테일을 담은 애니메이션을 사용하여 소통하세요. 9 | 모션은 상황이 어떻게 변화하는지, 사람들이 어떤 작업을 수행하면 어떤 일이 일어나는지, 다음에 무엇을 할 수 있는지 보여줌으로써 피드백과 이해도를 높일 수 있는 좋은 방법입니다. 예를 들어, macOS에서 윈도우을 최소화하면 바탕화면에서 Dock으로 부드럽게 이동하여 윈도우이 어디로 갔는지 정확히 알 수 있고, Face ID를 설정하면 시스템이 스캔하는 동안 얼굴을 둘러싼 체크 표시를 시각적으로 변경하여 사용자가 해야 할 일을 간략하게 설명하고 도움을 주며, visionOS에서는 사용자가 초점을 맞추면 창 컨트롤이 부드럽게 확장됩니다. 10 | 11 | - ### 사용자 경험을 해치지 않는 선에 모션을 추가하세요. 12 | 모션을 추가하기 위해 모션을 추가하지 마세요. 불필요하거나 과도한 애니메이션은 사람들의 주의를 분산시키고 단절감을 느끼거나 신체적으로 불편하게 만들 수 있습니다. 13 | 14 | ### - 모션을 선택 사항으로 설정하세요. 15 | 사람들이 앱에서 모션을 경험하지 못할 수 있는 이유는 여러 가지가 있으므로 중요한 정보를 전달하는 유일한 방법으로 모션을 사용하지 않는 것이 중요합니다. 예를 들어 사용자가 수동으로 모션 접근성 감소 설정을 켜서 애니메이션을 최소화하거나 제거할 수 있습니다. 자세한 내용은 [Accessibility >> 모션](./Accessibility.md#Motion)을 참조하세요. 16 | 17 | ### - 사용자가 납득이 되는 모션을 사용하세요. 18 | 게임 앱이 아닌 경우 정확하고 사실적인 모션은 사람들이 작동 방식을 이해하는 데 도움이 되지만, 현실적이지 않거나 물리 법칙을 거스르는 듯한 모션은 방향 감각을 잃게 만들 수 있습니다. 예를 들어, 위에서 아래로 슬라이드하여 뷰를 표시할 때 옆으로 슬라이드하면 뷰가 사라질 것이라고 사람들은 쉽게 예상하지 못합니다. 19 | 20 | ### - 사용자는 짧고 정확한 애니메이션을 선호합니다. 21 | 간결함과 정확성을 결합한 애니메이션은 더 가볍고 방해가 덜 되는 경향이 있으며, 종종 정보를 더 효과적으로 전달하는 경향이 있습니다. 예를 들어, iPhone의 날씨에서 목록 버튼을 탭하면 현재 도시의 전체 화면 보기가 목록 보기로 빠르게 전환되어 목록에서 해당 도시의 위치를 정확히 알려줍니다. 비전OS에서는 사용자가 사진에서 파노라마를 탭하면 보기가 부드럽게 확장되어 앞쪽 공간을 채우므로 시각적으로 화면 전환을 추적할 수 있습니다. 22 | 23 | ### - 일반적으로 자주 발생하는 상호작용에 모션을 추가하는 것은 피하세요. 24 | 시스템에서는 이미 표준 UI 요소와의 상호작용을 위한 미니멀한 애니메이션을 제공하고 있습니다. 사람들이 콘텐츠와 상호 작용할 때마다 불필요한 동작에 주의를 기울이지 않도록 하는 것을 권장합니다. 25 | 26 | ### - 적절한 경우 애니메이션 심볼을 사용하는 것이 좋습니다. 27 | `SF Symbol 5` 이상을 사용하는 경우 `SF Symbol` 또는 사용자 정의 심볼에 애니메이션을 적용할 수 있습니다. 자세한 내용은 [애니메이션](https://developer.apple.com/design/human-interface-guidelines/sf-symbols#Animations)을 참조하세요. 28 | 29 | 30 | ## 플랫폼 별 고려사항 31 | - iOS, iPadOS, macOS, tvOS는 해당 사항이 없습니다. 32 | 33 | ## visionOS 34 | visionOS에서 모션은 현재 상황(컨텍스트)을 미묘하게 전달하고, 정보에 주의를 집중시키고, 몰입형 경험을 풍부하게 만들 수 있습니다. [깊이](./Spatial-layout.md#Depth)와 결합된 모션은 사람들이 요소에 [집중(focus)](https://developer.apple.com/design/human-interface-guidelines/focus-and-selection)할 때 필수적인 피드백도 제공합니다. 주의 분산, 혼란, 불편함을 유발하지 않으면서도 사람들이 받아들일 수 있는 방식으로 모션을 사용하는 것이 중요합니다. 35 | 36 | 사람들은 Apple Vision Pro를 착용한 상태에서 [패스스루](./Immersive-experiences.md#Immersion-and-passthrough)를 사용하여 가상 콘텐츠와 상호 작용하는 동안 실제 주변 환경을 볼 수 있습니다. 주변 환경과 앱 콘텐츠를 동시에 볼 수 있기 때문에 가상 콘텐츠의 움직임으로 인해 자신이나 주변 환경이 움직이는 것처럼 느껴지면 불편함을 느낄 수 있습니다. 일반적으로 움직이는 가상 물체의 크기가 클수록 안정감을 유지하기가 더 어려울 수 있습니다. 37 | 38 | ### - 큰 가상 객체의 움직임을 보여줄 때 사람들이 편안함을 느낄 수 있도록 도와주세요. 39 | 물체가 [시야](./Spatial-layout.md#Field-of-View)의 대부분 또는 전부를 가릴 정도로 충분히 커서 시야를 가득 채우면 사람들은 자연스럽게 그 물체를 주변 환경의 일부로 인식할 수 있습니다. 사람들이 자신이나 주변 환경이 움직인다고 생각하지 않고 물체의 움직임을 인식하도록 하려면 물체의 반투명도를 높여 사람들이 물체를 투과하여 볼 수 있도록 하거나 대비를 낮추어 물체의 움직임이 덜 눈에 띄게 만들 수 있습니다. 큰 물체 사이의 전환을 표시해야 하는 경우 fade out/fade in (밝기가 어두워지고 밝아지는 효과) 또는 콘텐츠의 초점이 들어오고 나가는 효과를 사용하여 방향 감각을 잃을 위험성을 최소화하는 것이 좋습니다. 40 | 41 | 42 | > 참고 43 | > 44 | > 사람들은 window와 같은 큰 가상 물체를 움직이는 경우에도 불편함을 느낄 수 있습니다. 이 경우에서도 반투명도와 대비를 조정하면 조금 불편함을 해소 할 수 있지만, window 크기를 상당히 작게 유지하는 것이 좋습니다. 45 | 46 | ### - Window 대부분을 차지하는 움직이는 콘텐츠를 표시할 때는 주의하세요. 47 | 이 경우에서는 사람들은 때때로 window의 콘텐츠를 주변 세계로 인식하고 움직임을 자신의 것으로 인식할 수 있습니다. window에 움직이는 콘텐츠를 표시해야 하는 경우 사람들이 주변 환경을 계속 볼 수 있도록 window 또는 콘텐츠 영역의 크기를 제한하는 것이 좋습니다. Window에 표시되는 모션을 만들 때는 수평을 유지하고, 속도를 낮게 유지하며, 갑작스럽거나 예상치 못한 카메라 움직임을 피하는 것이 좋습니다. 또한 대비가 낮은 텍스처를 사용하면 모션이 덜 눈에 띄게 만들 수 있습니다. 48 | 49 | > 여기서 언급하는 Window는 visionOS의 [Window](../Components/Presentation/Windows.md) 링크를 참고하세요. 50 | 51 | 52 | ### - 회전 동작은 부드럽게 하세요. 53 | 카메라를 회전하거나 사람 주위의 큰 가상 물체를 회전하는 등 가상 세계를 회전할 때, 특히 회전이 빠르거나 너무 오래 지속되면 사람의 안정감을 깨뜨릴 수 있습니다. 대신 빠른 페이드 아웃 중에 즉각적인 방향 전환을 사용하는 것이 좋습니다. 54 | 55 | ### - 지속적으로 진동하는 물체를 표시하지 마세요. 56 | 특히 진동 주파수가 약 0.2Hz인 진동은 사람들이 이 주파수에 매우 민감하게 반응할 수 있으므로 표시하지 않는 것이 좋습니다. 진동하는 물체를 표시해야 하는 경우 진폭을 낮게 유지하고 콘텐츠를 반투명하게 만드는 것을 고려하세요. 57 | 58 | ### - 불필요한 모션을 제거합니다. 59 | 사람들은 상호 작용하려는 물체를 바라보기 때문에 한 눈을 팔게 할 수 있는 곳에 모션을 표시하면 불쾌감을 줄 수 있습니다. 사람들이 중요한 것을 보도록 유도해야 할 때만 모션을 사용하는 것이 좋습니다. 60 | 61 | ### - 가급적 사람의 시야 가장자리에는 모션을 표시하지 마세요. 62 | 사람들은 주변 시야에서 발생하는 움직임에 특히 민감할 수 있습니다. 주변부 움직임은 주의를 산만하게 할 뿐만 아니라 자신이나 주변 환경이 움직이는 것처럼 느껴져 불편함을 유발할 수도 있습니다. 63 | 64 | ### - 사람들에게 고정된 기준 프레임을 제공하는 것이 좋습니다. 65 | 시각적 움직임이 움직이지 않는 영역에 포함되면 사람들이 시각적 움직임을 처리하기가 더 쉬워질 수 있습니다. 반대로 주변의 모든 것이 움직이는 것처럼 보이면 사람들은 불쾌감을 느낄 수 있습니다. 66 | 67 | ### - 시각적 회전을 경험하는 동안 고개를 움직이도록 유도하지 마세요. 68 | 가상 물체가 주변에서 회전하는 것처럼 보일 때 사람들은 일반적으로 불쾌감을 느끼지 않기 위해 눈을 일정한 방향으로 유지해야 합니다. 69 | 70 | ### - 물체의 위치를 변경해야 할 때는 페이드 기능을 사용하는 것이 좋습니다. 71 | 물체가 한 위치에서 다른 위치로 이동하면 사람들은 자연스럽게 그 움직임을 주시하게 됩니다. 이러한 움직임이 사람들에게 유용한 정보를 전달하지 않는다면 물체를 이동하기 전에 fade-out 했다가 새 위치에 도착한 후 다시 fade-in할 수 있습니다. 72 | 73 | ## watchOS 74 | SwiftUI는 앱에 모션을 추가할 수 있는 강력하고 간소화된 방법을 제공합니다. WatchKit을 사용하여 레이아웃 및 모양 변경에 애니메이션을 적용하거나 애니메이션 이미지 시퀀스를 만들어야 하는 경우 [`WKInterfaceImage`](https://developer.apple.com/documentation/watchkit/wkinterfaceimage#1652345) 참조하세요. 75 | 76 | > 참고 77 | > 78 | > 모든 레이아웃 및 모양 기반 애니메이션에는 애니메이션의 시작과 끝에서 재생되는 easing(애니메이션 완화) 기능이 자동으로 포함됩니다. easing(애니메이션 완화)를 끄거나 사용자 지정할 수 없습니다. 79 | 80 | --- 81 | 82 | 83 | ### 연관 내용 84 | - [Feedback](https://developer.apple.com/design/human-interface-guidelines/feedback) 85 | - [Accessibility](https://www.apple.com/accessibility/) 86 | - [Spatial layout](./Spatial-layout.md) 87 | - [Immersive experiences](./Immersive-experiences.md) 88 | 89 | ### 개발자 문서 90 | [Animating Views and Transitions](https://developer.apple.com/tutorials/SwiftUI/animating-views-and-transitions) 91 | 92 | ### 영상 93 | 94 | | [Design considerations for vision and motion](https://developer.apple.com/videos/play/wwdc2023/10078) | [Principles of spatial design](https://developer.apple.com/videos/play/wwdc2023/10072) | [Designing Fluid Interfaces](https://developer.apple.com/videos/play/wwdc2018/803) | 95 | | -------- | -------- | -------- | 96 | | ![](https://devimages-cdn.apple.com/wwdc-services/images/D35E0E85-CCB6-41A1-B227-7995ECD83ED5/2C47B638-090D-4CBB-9E9E-EBE8114536D9/8132_wide_250x141_1x.jpg)| ![](https://devimages-cdn.apple.com/wwdc-services/images/D35E0E85-CCB6-41A1-B227-7995ECD83ED5/15489B11-8744-483D-AD38-EF78D8962FF4/8126_wide_250x141_1x.jpg) | ![](https://devimages-cdn.apple.com/wwdc-services/images/42/E55D60D2-C7D7-4F96-9A9D-8AF4C7D6BB49/2247_wide_250x141_1x.jpg) | 97 | 98 | 99 | -------------------------------------------------------------------------------- /Foundations/Dark-Mode.md: -------------------------------------------------------------------------------- 1 | # Dark Mode 2 | 3 | 다크 모드는 어두운 색상 팔레트를 사용하여 저조도 환경에 맞는 편안한 시청 환경을 제공하는 시스템 설정입니다.![A sketch of concentric circles with half-filled areas, suggesting the presence of light and dark. The image is overlaid with rectangular and circular grid lines and is tinted yellow to subtly reflect the yellow in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/f354bd96f1890df83e7f8e31835f80bc/foundations-dark-mode-intro@2x.png) 4 | 5 | iOS, iPadOS, macOS 및 tvOS에서 사람들은 기본 인터페이스 스타일로 다크 모드를 선택하는 경우가 많으며, 일반적으로 모든 앱과 게임이 다크 모드에 대응하기를 기대합니다. 다크 모드에서는 모든 화면, 보기, 메뉴 및 컨트롤에 어두운 색상 팔레트를 사용하며, 어두운 배경에서 메인 콘텐츠를 돋보이게 하기 위해 더 큰 배경 대비를 사용할 수도 있습니다. 6 | 7 | 8 | ## Best practices 9 | 10 | ### - 앱 내에서 모드(라이트/다크) 설정을 제공하지 마세요. 11 | 앱내에서 모드 옵션을 제공하면, 사용자들은 원하는 스타일을 세팅하기 위해 두 가지 이상의 설정을 조정해야 하므로 사용자에게 더 많은 작업을 유발합니다. 더 나쁜 것은 시스템 전체에서 선택한 모드에 반응하지 않아 앱이 고장났다고 생각할 수 있다는 것입니다. 12 | 13 | - ### 앱이 두 가지 모드(라이트/다크) 모두에서 보기 좋게 표시되는지 확인하세요. 14 | 단순히 다크/라이트 모드를 사용하는 것 외에도, 하루 종일 또는 앱이 실행되는 동안 조건이 변할 때 밝게 또는 어둡게 표시되도록 전환하는 자동 표시 설정을 선택할 수 있습니다. 15 | 16 | - ### 콘텐츠를 테스트하여 두 가지 표시 모드에서 모두 편안하게 읽을 수 있는지 확인합니다. 17 | 예를 들어, 다크 모드에서 대비 증가와 투명도 감소를 설정 했을 경우, 어두운 배경에 어두운 텍스트가 있을 때 가독성이 떨어지는 부분을 발견할 수 있습니다. 또한 다크 모드에서 대비 증가를 켜면 어두운 텍스트와 어두운 배경 사이의 시각적 대비가 감소할 수 있습니다. 시력이 좋은 사람은 여전히 대비가 낮은 텍스트를 읽을 수 있지만, 많은 사람이 이러한 텍스트를 읽을 수 없을 수도 있습니다. 자세한 내용은 [Color and effects(색상 및 효과)](https://developer.apple.com/design/human-interface-guidelines/accessibility#Color-and-effects)를 참조하세요. 18 | 19 | ### - 드문 경우지만 인터페이스에 어두운 UI만 사용하는 것도 고려해 보세요. 20 | 예를 들어, 몰입형 미디어 시청을 지원하는 앱의 경우 UI가 사라지고 사람들이 미디어에 집중할 수 있도록 영구적으로 어두운 UI 요소를 사용하는 것이 좋습니다. 21 | 22 | ## 다크 모드 색상 23 | 24 | 다크모드의 색상 팔레트에는 더 어두운 배경색과 더 밝은 메인 색이 포함되어 있습니다. 이러한 색상이 반드시 밝은 색상과 반전되는 것은 아니며, 반전되는 색상도 많지만 반전되지 않는 색상도 있다는 점을 알아두는 것이 중요합니다. 자세한 내용은 [Specifications](https://developer.apple.com/design/human-interface-guidelines/color#Specifications)을 참조하세요. 25 | 26 | ### - 현재 모양에 맞는 색상을 사용하세요. 27 | 시맨틱 색상(예: macOS의 [`labelColor`](https://developer.apple.com/documentation/appkit/nscolor/1534657-labelcolor) 및 [`controlColor`](https://developer.apple.com/documentation/appkit/nscolor/1524856-controlcolor) 또는 iOS 및 iPadOS의 [`separator`](https://developer.apple.com/documentation/uikit/uicolor/3173139-separator))은 현재 모양에 맞게 자동으로 조정됩니다. 사용자 지정 색상이 필요한 경우 Xcode에서 앱의 에셋 카탈로그에 색상 세트 에셋을 추가하고 색상의 밝고 어두운 변형을 지정합니다. 하드 코딩된 색상 값이나 적응되지 않는 색상을 사용하지 마십시오. 28 | 29 | ### - 모든 UI요소에서 충분한 색상 대비를 목표로 합니다. 30 | 시스템에서 정의한 색상을 사용하면 메인 컨텐츠와 배경 콘텐츠 간의 대비 비율을 적절하게 맞출 수 있습니다. 최소한 색상 간의 대비 비율이 4.5:1 이상이어야 합니다. 사용자 정의 메인 색상(foreground color)과 배경색의 경우, 특히 작은 텍스트의 경우 대비 비율이 7:1이 되도록 노력하세요. 이 비율은 메인 콘텐츠가 배경에서 눈에 잘 띄도록 하고 콘텐츠가 권장 접근성 가이드라인을 충족하는 데 도움이 됩니다. 31 | 32 | ### - 흰색 배경의 색상을 약간 어둡게 처리하세요. 33 | 흰색 배경이 포함된 콘텐츠 이미지를 표시하는 경우 주변 다크 모드 상황에서 배경이 빛나지 않도록 이미지를 약간 어둡게 하는 것이 좋습니다. 34 | 35 | ## 아이콘 및 이미지 36 | 37 | 이 시스템은 다크 모드에 자동으로 적응하는 [SF Symbols](https://developer.apple.com/design/human-interface-guidelines/sf-symbols)과 밝은 곳과 어두운 곳 모두에 최적화된 풀컬러 이미지를 사용합니다. 38 | 39 | ### - 가능하면 SF 심볼을 사용하세요. 40 | 심볼은 동적 색상을 사용하여 색조를 지정하거나 생동감을 더할 때 두 가지 모드(라이트/다크) 모두에서 잘 작동합니다. 지침은 [Color(색상)](https://developer.apple.com/design/human-interface-guidelines/color)을 참조하십시오. 41 | 42 | ### - 필요한 경우 라이트 모드와 다크 모드를 위한 인터페이스 아이콘을 별도로 디자인합니다. 43 | 예를 들어 보름달을 나타내는 아이콘은 밝은 배경과 잘 대비되도록 미묘한 어두운 윤곽선이 필요하지만 어두운 배경에 표시할 때는 윤곽선이 필요하지 않을 수 있습니다. 마찬가지로 기름 한 방울을 나타내는 아이콘은 어두운 배경에서 가장자리가 잘 보이도록 약간의 테두리가 필요할 수 있습니다. 44 | 45 | ### - 풀컬러 이미지와 아이콘이 두 가지 모드 모두에서 잘 보이는지 확인하세요. 46 | 밝은 배경과 어두운 배경 모두에 잘 어울리는 경우 동일한 에셋을 사용합니다. 자산이 한 가지 모드에서만 잘 보이는 경우 이미지를 수정하거나 라이트 모드용 이미지와 다크 모드용 이미지를 별도로 만듭니다. 자산 카탈로그(asset catalogs)를 사용하여 이미지를 1개의 세트로 묶을 수 있습니다. 47 | 48 | ## 텍스트 49 | 50 | 이 시스템은 다크 모드에서 텍스트의 가독성을 유지하기 위해 생동감과 대비를 높입니다. 51 | 52 | ### - 시스템에서 제공하는 라벨 컬러를 사용합니다. 53 | 1~4 순위 (제목1,제목2,제목3,제목4) 레이블 색상은 밝고 어두운 배경에 따라 자동으로 조정됩니다. 54 | 55 | ### - 텍스트 뷰, 텍스트 필드를 사용할 때는 시스템 뷰를 활용하세요. 56 | 시스템에서 제공하는 뷰 및 컨트롤을 사용하면 앱의 텍스트가 모든 배경에서 보기 좋게 표시되며, 생동감의 유무에 따라 자동으로 조정됩니다. 가능하면 텍스트 뷰를 직접 그리는 대신 시스템에서 제공하는 보기를 사용하여 텍스트를 표시하세요. 57 | 58 | ## 플랫폼 별 고려사항 59 | - tvOS에는 해당사항이 없습니다. 60 | - watchOS와 visionOS에는 다크모드가 없습니다. 61 | 62 | ## iOS, iPadOS 63 | 64 | 다크 모드에서는 어두운 인터페이스가 다른 인터페이스 위에 겹쳐져 있을 때 깊이감을 향상시키기 위해 기본 색상 (Base) 과 하이라이트 색상(Elevated) 이라는 두 가지 배경 색상 세트를 사용합니다. 기본 색상(Base)은 더 어둡기 때문에 배경 인터페이스가 뒤로 물러나는 것처럼 보이고, 하이라이트(Elevated) 색상은 더 밝기 때문에 전경 인터페이스가 앞으로 나아가는 것처럼 보입니다. 65 | 66 | 67 | | 기본 색상(Base) | 하이라이트 색상(Elevated) | 라이트 모드 | 68 | | ------ | -------- | -----| 69 | | ![A diagram that shows a stack of 4 terms on top of a black background. The term at the top shows the most contrast with the background and the term at the bottom shows the least.](https://docs-assets.developer.apple.com/published/0d71ac9f5186541dce35b5f702311bd0/base-with-four-semantic-colors@2x.png) | ![A diagram that shows a stack of 4 terms on top of a nearly black background. The term at the top shows the most contrast with the background and the term at the bottom shows the least.](https://docs-assets.developer.apple.com/published/0dacc182adc819b08eb8cdcc897b08a4/elevated-with-four-semantic-colors@2x.png)|![A diagram that shows a stack of 4 terms on top of a white background. The term at the top shows the most contrast with the background and the term at the bottom shows the least.](https://docs-assets.developer.apple.com/published/cbbe9a39049fd3d3d2122876de64d207/light-with-four-semantic-colors@2x.png) | 70 | 71 | 72 | ### - 시스템 배경색을 사용하세요. 73 | 다크 모드는 동적 모드이므로 팝오버나 모달 시트와 같이 인터페이스가 전면에 표시될 때 배경색이 기본에서 고조도로 자동 변경됩니다. 또한 멀티태스킹 환경에서 앱 간, 다중 창 환경에서 창 간 시각적 구분을 제공하기 위해 시스템에서 배경색을 높여서 사용합니다. 사용자 지정 배경색을 사용하면 사람들이 시스템에서 제공하는 이러한 시각적 구분을 인식하기 어려울 수 있습니다. 74 | 75 | ## macOS 76 | 77 | 일반 설정에서 강조 색상(graphite accent color)을 선택하면 macOS에서 창 배경이 현재 바탕 화면 사진의 색상을 선택하게 됩니다. 바탕 화면 색조라고 하는 이 효과는 창이 주변 콘텐츠와 더욱 조화롭게 어우러지도록 도와주는 미묘한 효과입니다. 78 | 79 | ### - 적절한 경우 사용자 지정 컴포넌트 배경에 투명도를 포함할 수 있습니다. 80 | 투명도를 사용하면 바탕 화면 색조가 활성화되어 있을 때 구성 요소가 창 배경의 색상을 가져와 바탕 화면 그림이 변경되어도 시각적 조화를 유지할 수 있습니다. 이러한 조화를 이루려면 배경이나 베젤이 보이는 사용자 지정 컴포넌트에만 투명도를 추가하고 컴포넌트가 색상을 사용하지 않는 상태와 같이 중립 상태에 있을 때만 투명도를 추가하세요. 컴포넌트가 색상을 사용하는 상태일 때 투명도를 추가하면 창 배경이 바탕 화면의 다른 위치로 조정되거나 바탕 화면 그림이 변경될 때 컴포넌트의 색상이 변동될 수 있으므로 투명도를 추가하지 않으려는 것이 좋습니다. 81 | 82 | ## 연관 문서 83 | 84 | - [Color](https://developer.apple.com/design/human-interface-guidelines/color) 85 | - [Materials](https://developer.apple.com/design/human-interface-guidelines/materials) 86 | - [Typography](https://developer.apple.com/design/human-interface-guidelines/typography) 87 | 88 | ## 연관 영상 89 | 90 | | [What's New in iOS Design](https://developer.apple.com/videos/play/wwdc2019/808) | [Implementing Dark Mode on iOS](https://developer.apple.com/videos/play/wwdc2019/214) | 91 | | ------ | ------ | 92 | | ![](https://devimages-cdn.apple.com/wwdc-services/images/48/0F960683-D91F-4CA9-9658-6FBB11F0683D/3272_wide_250x141_1x.jpg) | ![](https://devimages-cdn.apple.com/wwdc-services/images/48/174747D6-8723-4194-A932-7765179F1108/2949_wide_250x141_1x.jpg) | 93 | 94 | -------------------------------------------------------------------------------- /Components/Presentation/Windows.md: -------------------------------------------------------------------------------- 1 | # Windows 2 | [원본 링크](https://developer.apple.com/design/human-interface-guidelines/windows) 3 | 4 | > `Window`는 앱 또는 게임의 사용자 인터페이스를 표시하는 UI 요소가 포함되어 있습니다. 5 | 6 | 7 | ![A stylized representation of a window with close, minimize, and full-screen buttons. The image is tinted red to subtly reflect the red in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/e678408ee6b4eb19f2cfed9a9e4cef47/components-window-intro@2x.png) 8 | 9 | 플랫폼, 디바이스 및 상황에 따라 `Window` (또는 `Scene`)가 사용자에게 감지되지 않을 수 있습니다. 10 | 예를 들어 iOS, tvOS, watchOS와 같이 기본 환경이 전체 화면인 플랫폼에서는 사람들이 `Window` 안의 콘텐츠를 보고 상호 작용할 뿐 `Window` 자체를 보거나 상호 작용하지 않습니다. 11 | 이러한 경우 앱이나 게임에서 `Window` 이나 `Scene` 자체의 모양을 디자인할 필요가 없습니다. 12 | 개발자 지침은 [Scene](https://developer.apple.com/documentation/SwiftUI/Scene) 및 [UIWindow](https://developer.apple.com/documentation/uikit/uiwindow)를 참조하세요. 13 | 14 | > Note 15 | > 16 | > SwiftUI에서 `Scene`이라는 개념은 `Window`와 뷰 계층 구조를 모두 포함하는 앱 인터페이스의 일부 개념입니다. 17 | > `Window`와 `Scene` 이라는 용어는 동의어로 (특히 디자인 가이드에서) 사용되는 경우가 많습니다. 18 | > 하지만 여러분이 만약, 사람들에게 앱을 설명하는 도움말을 작성하는 경우 + 높은 level의 컨텐츠를 설명 해야 하는 경우, `Scene` 보다 `Window` 라는 용어를 사용하기를 권장합니다. 19 | 20 | iOS, tvOS 및 watchOS와 달리 visionOS, iPadOS 및 macOS에서는 일반적으로 개별 `window` 을 열고, 닫고, 크기를 조정하고, 재배치할 수 있을 뿐만 아니라 동시에 여러 개의 `window`을 볼 수 있기 때문에 사람들은 `window`을 시각적으로 구분되는 개체로 인식합니다. 21 | 또한 visionOS에서는 사람들이 어느 각도에서나 볼 수 있는 3D 콘텐츠를 표시하는 데 최적화된 컨테이너인 `volume`과 상호 작용할 수 있습니다. 22 | 23 | 아래 나와있는 가이드라인은 사용자가 별도의 개체로 보고 조작할 수 있는 `window`에 적용되는 사항입니다. 모든 플랫폼에서 `window`와 비슷하게 사용 할 수 있는 요소로는 [Alerts](https://developer.apple.com/design/human-interface-guidelines/alerts), [Panels](https://developer.apple.com/design/human-interface-guidelines/panels), [Popovers](https://developer.apple.com/design/human-interface-guidelines/popovers), [Sheets](https://developer.apple.com/design/human-interface-guidelines/sheets)가 있습니다. 24 | 25 | `Window`또는 `Scene` 내에 콘텐츠를 배치하는 방식은 [Layout](https://developer.apple.com/design/human-interface-guidelines/layout) 문서를 참고하세요. Apple Vision Pro 공간에 콘텐츠를 배치하는 지침은 [Spatial layout](../../Foundations/Spatial-layout.md)문서를 참고하세요. 26 | 27 | --- 28 | 29 | ## visionOS 30 | visionOS 앱은 `window` 또는 `volume`을 사용하여 컨테이너에 콘텐츠를 표시할 수 있습니다. 31 | 일반적으로 2D 또는 3D 콘텐츠를 표시하려면 Mail의 받은 편지함이나 USDZ 개체가 포함된 Safari의 웹 페이지와 같이 `window`를 사용합니다. 32 | 게임 보드나 지구본과 같은 3D 콘텐츠 및 개체를 표시하려면 일반적으로 `volume`을 사용합니다. 33 | 34 | > USDZ: 애플과 픽사가 같이 만든 AR content를 표시하는 3D file format 입니다. 35 | 36 | | `window` | `volume` | 37 | | -------- | -------- | 38 | | ![](https://i.imgur.com/R2qTH4o.png)| ![](https://i.imgur.com/UqihxBc.png) 39 | 40 | > Note 41 | > 42 | > 시스템은 사람들이 여는 각 `window`과 `volume`의 초기 위치를 정의합니다. 공유 공간과 전체 공간 모두에서 사람들은 `window`와 `volume`을 원하는 새로운 위치로 옮길 수 있습니다. 43 | 44 | visionOS의 `window`은 다른 플랫폼의 고유한 `window`와 모양과 동작이 비슷하기 때문에 사람들은 즉시 익숙해집니다. 45 | 예를 들어, visionOS `window`은 직립형(바로 서 있는 형태) 평면에 정렬되고 공유 공간에서 다른 앱 `window`와 나란히 표시될 수 있습니다. 46 | 또한, 사용자가 이동, 크기 조정, 닫을 수 있는 시스템 정의 컨트롤을 제공합니다. `window` 관리 컨트롤 외에도 `window`에는 공유 메뉴, [tab bar](https://developer.apple.com/design/human-interface-guidelines/tab-bars), [toolbar](https://developer.apple.com/design/human-interface-guidelines/toolbars) 및 하나 이상의 [Ornaments](https://developer.apple.com/design/human-interface-guidelines/ornaments)을 포함할 수 있습니다. 47 | 48 | 49 | ![](https://i.imgur.com/mULr0tq.jpg) 50 | 51 | > `window` 1개를 띄워놓은 상황입니다. 52 | 53 | visionOS `window`는 수정할 수 없는 배경 [material](https://developer.apple.com/design/human-interface-guidelines/materials)인 [glass](https://developer.apple.com/design/human-interface-guidelines/materials#visionOS) 를 사용하여 빛과 실제 및 가상 물체를 모두 투과할 수 있습니다. 54 | [glass](https://developer.apple.com/design/human-interface-guidelines/materials#visionOS) `window`는 콘텐츠가 주변 환경의 일부처럼 느껴지도록 도와주며, 스페큘러(물체 표면에서의 반사광을 의미함) 반사와 그림자를 사용하여 `window`의 크기와 위치를 전달할 수 있습니다. 55 | 기본 스타일을 사용하여 `window`을 만들면 자동으로 유리 배경이 적용됩니다. 개발자 지침은 [DefaultWindowStyle](https://developer.apple.com/documentation/SwiftUI/DefaultWindowStyle)을 참조하세요. 56 | 57 | 기본적으로 `window` 크기는 1306 x 734pt입니다. `window`가 처음 열리면 시스템은 착용자의 약 2미터 앞에 창을 배치하여 약 3미터의 가로 길이(width)를 제공합니다. 58 | 59 | 또한 이 시스템은 표준 `window` 내의 보기 및 컨트롤에 하이라이트와 그림자를 추가하여 [depth(깊이)](../../Foundations/Spatial-layout.md#Depth)을 부여하고 특히 사람들이 `window`를 비스듬히 볼 때 더욱 실감나게 느껴지도록 도와줍니다. 60 | 표준 창에 3D 콘텐츠를 표시할 수 있지만 콘텐츠가 `window` 표면에서 너무 멀리 확장되면 시스템에서 잘립니다. 더 깊은 3D 콘텐츠를 표시하려면 `volume`을 사용하십시오. 61 | 62 | ![](https://i.imgur.com/tDKlGkp.png) 63 | 64 | > 3D 컨텐츠가 포함된 `window`를 띄워놓은 상황입니다. 65 | 66 | #### 익숙한 인터페이스를 제공하고 익숙한 작업을 지원하려면 표준 `window`을 사용하는 것을 권장합니다. 67 | 68 | 사람들이 이미 익숙한 인터페이스를 표시하고 의미 있는 콘텐츠와 활동을 위해 더 몰입도 높은 경험을 예약하여 앱에서 집과 같은 편안함을 느낄 수 있도록 하세요. 69 | 자세한 내용은 [Immersive experiences](../../Foundations/Immersive-experiences.md) 을 참조하세요. 게임 보드와 같이 경계가 있는 3D 콘텐츠를 표시하려면 `volume`을 사용하는 것이 좋습니다. 70 | 71 | #### `window` 안의 빈 공간을 최소화 할 수 있는 초기 `window` 크기를 선택합니다. 72 | 빈 공간이 너무 많으면 `window`가 불필요하게 커 보일 뿐만 아니라 사람들의 공간에 있는 다른 콘텐츠를 가릴 수 있습니다. 73 | 74 | #### `window`의 콘텐츠에 적합한 기본 모양을 표기 할 수 있도록 설계해야 합니다. 75 | 예를 들어 슬라이드 창은 넓기 때문에 기본 Keynote 창은 넓고, 76 | 대부분의 웹 페이지가 너비보다 훨씬 길기 때문에 기본 Safari 창은 높습니다. 77 | 78 | #### 가능하면 사람들이 앱 `window` 크기를 조정할 수 있도록 허용해야 합니다. 79 | 사람들은 공간을 맞춤 설정할 때 `window` 크기를 조정할 수 있다는 점을 높이 평가합니다. 80 | 적절한 경우 최소 및 최대 크기 값을 설정하여 사람들이 `window` 크기를 조정할 때 `window`가 계속 작동하고 보기 좋게 유지되도록 할 수 있습니다. 81 | 82 | #### 앱에서 사람들이 몰입하고 싶어할 만한 순간이나 콘텐츠를 찾아보세요. 83 | 앱이 대부분 `window`를사용하더라도 몰입형 기능을 제공 했을 때 더 효과적인 기능이 있을 수 있습니다. 84 | 예를 들어 사진 앱에서 파노라마 사진을 확장된 보기로 열면 사용자가 사진 속에 있는 것처럼 느낄 수 있습니다. 85 | 자세한 내용은 [Immersive experiences](../../Foundations/Immersive-experiences.md)을 참조하세요. 86 | 87 | #### 항상 `window`의 시각적 경계가 포함된 `scene`의 크기와 일치하는지 확인하세요. 88 | `scene`이 `window`의 가시적 크기를 초과하면 `window` 컨트롤이 잘못 배치되고 `window`가 예상한 대로 표시되지 않아 상호 작용이 어려워질 수 있습니다. 89 | 개발자 지침은 [Scene](https://developer.apple.com/documentation/SwiftUI/Scene)을 참조하십시오. 90 | 91 | 92 | ### Volumes 93 | `volume`은 수평 베이스가 있으며 지구본처럼 사람들이 어느 각도에서나 볼 수 있는 3D 콘텐츠를 표시하는 데 도움이 됩니다. 94 | 95 | ![](https://i.imgur.com/hmvZ1yK.jpg) 96 | 97 | `volume`과 `window`는 몇 가지 유사점이 있습니다: 98 | 99 | 공유 공간에서는 `window` 에서와 마찬가지로 시스템이 `volume`의 초기 위치를 결정합니다. 100 | 101 | - `volume`은 사람들이 `window` 위치를 변경하거나 닫을 때 사용하는 것과 동일한 관리 제어 기능을 제공합니다. 102 | 103 | - `volume`은 [glass](https://developer.apple.com/design/human-interface-guidelines/materials#visionOS) 배경을 사용할 수 있습니다. 104 | 105 | 하지만, `volume`과 `window`는 시스템에서 적용하는 크기 조정 유형이 다릅니다. 비전OS는 `window`에서는 동적 크기 조정을 자동으로 사용하지만 `volume`에서는 고정 크기 조정을 사용합니다. 106 | 107 | 108 | 풍부한 3D 콘텐츠를 표시하려면 `volume`을 사용하는 것이 좋습니다. 109 | 친숙한 UI 중심의 인터페이스를 표시하려면 일반적으로 `window`을 사용하는 것이 가장 적합합니다. 110 | 111 | --- 112 | 113 | ### 연관 내용 114 | - [Split views](https://developer.apple.com/design/human-interface-guidelines/split-views) 115 | - [Multitasking](https://developer.apple.com/design/human-interface-guidelines/multitasking) 116 | 117 | ### 개발자 문서 참고 118 | - [`Scene`](https://developer.apple.com/documentation/SwiftUI/Scene) 119 | - [`WindowGroup`](https://developer.apple.com/documentation/SwiftUI/WindowGroup) 120 | - [`NSWindow`](https://developer.apple.com/documentation/appkit/nswindow) 121 | 122 | ### 영상 123 | 124 | | [Design for spatial user interfaces](https://developer.apple.com/videos/play/wwdc2023/10076) | [Principles of spatial design](https://developer.apple.com/videos/play/wwdc2023/10072) | 125 | | -------- | -------- | 126 | | ![](https://i.imgur.com/kTIL2Ke.png)| ![](https://i.imgur.com/PD74ZGq.png) 127 | -------------------------------------------------------------------------------- /Foundations/Spatial-layout.md: -------------------------------------------------------------------------------- 1 | # Spatial layout 2 | [원문 링크](https://developer.apple.com/design/human-interface-guidelines/spatial-layout) 3 | 4 | ## Spatial Layout을 사용하면 Apple Vision Pro의 무한한 캔버스를 활용하고 콘텐츠를 매력적이고 편안한 방식으로 표현할 수 있습니다. 5 | 6 | ![](https://i.imgur.com/5BDRZ2y.png) 7 | 8 | ## Field-of-view 9 | 시야(field of view)는 고개를 움직이지 않고 볼 수 있는 공간입니다. Vision Pro를 착용한 상태에서 개인의 시야 크기는 라이트 씰을 구성하는 방식과 주변 시력의 정도와 같은 요인에 따라 달라집니다. 10 | 11 | ![](https://i.imgur.com/90AcD8V.png) 12 | 13 | > 중요 14 | > 15 | > 시스템은 사용자의 시야 (field of view) 정보를 제공하지 않습니다. 16 | 17 | 18 | - ### 중요한 콘텐츠를 시야 중앙에 배치하세요 19 | 기본적으로 visionOS는 앱을 사용자 바로 앞에서 실행하여 사용자의 시야 내에 배치합니다. 사람들이 장시간 콘텐츠와 상호 작용해야 하는 경우, 콘텐츠를 시야 내에 편안하게 배치하고 싶을 것입니다. 20 | 21 | 22 | #### 똑바로 봤을 경우 23 | https://github.com/i-colours-u/Human-Interface-Guidelines-KR/assets/60260284/a9cf924f-00ed-42fc-8386-9c52e08bd9ba 24 | 25 | #### 비스듬히 봤을 경우 26 | https://github.com/i-colours-u/Human-Interface-Guidelines-KR/assets/60260284/4dce5f32-8984-4a00-8c6c-634151fd703f 27 | 28 | - ### 콘텐츠를 착용자의 머리에 고정하지 마세요. 29 | 일반적으로 앱이 시야에 들어오는 것을 원하지만, 콘텐츠를 고정시켜 정면에 고정된 상태로 유지하면 특히 콘텐츠가 시야를 많이 가리고 주변 환경의 안정성을 떨어뜨리는 경우 사용자가 갇힌 느낌, 답답함, 불편함을 느낄 수 있습니다. 30 | 31 | 대신 콘텐츠를 사람들의 공간에 고정하여 자연스럽게 주변을 둘러보고 다양한 위치에서 다양한 사물을 볼 수 있는 자유를 제공하세요. 32 | 33 | 34 | ## Depth 35 | 사람들은 거리, 오클루전(occlusion), 그림자와 같은 시각적 단서에 의존하여 깊이를 인식하고 주변 환경을 이해합니다. 36 | 37 | Vision Pro에서는 시스템이 색온도, 반사, 그림자와 같은 시각 효과를 자동으로 사용하여 사람들이 가상 콘텐츠의 깊이를 인식할 수 있도록 지원합니다. 38 | 39 | 공간에서 가상 오브젝트를 움직이거나 오브젝트에 대한 상대적인 위치를 변경하면 시각 효과가 오브젝트의 겉보기 깊이를 변경하여 더욱 생생한 경험을 제공합니다. 40 | 41 | > 오클루전(occlusion): 빛의 차폐 정도를 의미함. 예를 들어, 방의 구석 부분은 훨씬 더 어둡고, 중앙 부분은 훨씬 더 밝은 현상을 의미함 42 | 43 | 44 | 사람들은 어떤 각도에서든 콘텐츠를 볼 수 있으므로 표준 창에서도 인터페이스 전체에 약간의 깊이를 더하면 더욱 자연스럽게 보일 수 있습니다. 45 | 46 | SwiftUI를 사용하면 2D 창에서 보기에 시각 효과를 추가하여 깊이감이 있는 것처럼 보이도록 합니다. 더 자세히 보고 싶다면 [Adding 3D content to your app(앱에 3D 컨텐츠 추가하기)](https://developer.apple.com/documentation/visionOS/adding-3d-content-to-your-app) 개발자 문서를 참조하세요. 47 | 48 | ![](https://i.imgur.com/i4Z3rAK.jpg) 49 | 50 | 51 | 추가 깊이가 있는 콘텐츠를 표시해야 하는 경우 [RealityKit](https://developer.apple.com/documentation/RealityKit)을 사용하여 3D 객체를 만들 수 있습니다. 52 | 3D 객체를 어디에나 표시하거나 3D 콘텐츠를 표시하는 컴포넌트인 `volume`을 사용할 수 있습니다. 53 | volume은 창과 비슷하지만 눈에 보이는 프레임이 없습니다. 자세한 내용은 [Volumes](Windows.md#Volumes)을 참조하십시오. 54 | 55 | https://github.com/i-colours-u/Human-Interface-Guidelines-KR/assets/60260284/d204786c-a27e-4ae2-8b2b-9351c5ba9984 56 | 57 | 58 | - ### 콘텐츠의 깊이를 정확하게 전달할 수 있는 시각적 단서를 제공하세요. 59 | 시각적 단서가 누락되거나 실제 경험과 충돌하면 사람들은 시각적으로 불편함을 느낄 수 있습니다. 60 | 61 | - ### 깊이를 사용하여 계층 구조를 전달하세요. 62 | 깊이는 개체가 주변 콘텐츠에서 눈에 띄게 보이도록 하여 더 눈에 띄게 만듭니다. 예를 들어 시트가 창 위에 나타나면 창이 Z축을 따라 뒤로 물러나면서 시트가 앞으로 나와 시각적으로 눈에 띄게 되는 등 사람들은 깊이의 변화를 알아차리는 경향이 있습니다. 63 | 64 | - ### 일반적으로 텍스트에 깊이를 추가하지 마십시오. 65 | 배경 위에 떠 있는 것처럼 보이는 텍스트는 읽기 어렵기 때문에 속도가 느려지고 때때로 시력에 불편함을 줄 수 있습니다. 66 | 67 | - ### 깊이가 가치를 더하는지 확인하세요. 68 | 일반적으로 깊이는 명확하고 즐거움을 주기 위해 사용하는 것이지 모든 곳에 사용할 필요는 없습니다. 69 | 70 | 디자인에 깊이를 더할 때는 사물의 크기와 상대적 중요도에 대해 생각해 보세요. 깊이는 tab bar나 toolbar를 창에서 돋보이게 만드는 등 앱에서 크고 중요한 요소를 시각적으로 구분하는 데 유용하지만, 작은 개체에는 잘 작동하지 않을 수 있습니다. 71 | 72 | 예를 들어, 배경에서 버튼의 기호를 돋보이게 하기 위해 깊이를 사용하면 버튼의 가독성이 떨어지고 사용하기가 어려워질 수 있습니다. 또한 앱 전체에서 얼마나 자주 다른 깊이를 사용하는지 검토하세요. 사람들은 각각의 깊이 차이를 인식하기 위해 눈의 초점을 다시 맞춰야 하는데, 너무 자주 또는 빠르게 초점을 맞추면 피곤할 수 있습니다. 73 | 74 | ## Scale 75 | visionOS는 두 가지 유형의 scale을 정의하여 깊이감을 유지하면서 사용성을 최적화합니다. 76 | 77 | `Dynamic scale(동적 배율)`은 콘텐츠가 사람과의 거리에 관계없이 편안하게 가독성을 유지하고 상호 작용할 수 있도록 도와줍니다. 특히, visionOS는 window가 착용자로부터 멀어지면 자동으로 창 배율을 높이고 창이 가까워지면 배율을 낮추어 모든 거리에서 window가 동일한 크기를 유지하는 것처럼 보이도록 합니다. 78 | 79 | https://github.com/i-colours-u/Human-Interface-Guidelines-KR/assets/60260284/b776f244-cd84-450e-83bf-0241a1039e83 80 | 81 | --- 82 | 83 | `Fixed scale(고정 배율)`은 물체가 사람과의 거리에 관계없이 동일한 배율을 유지한다는 의미입니다. 고정 배율 객체는 Z축을 따라 뷰어에서 멀어질수록 더 작게 표시되며, 이는 사람의 실제 주변 환경에 있는 객체가 가까이 있을 때보다 멀리 있을 때 더 작게 보이는 것과 유사합니다. 84 | 85 | https://github.com/i-colours-u/Human-Interface-Guidelines-KR/assets/60260284/54b1dee9-353f-4452-ab94-dd46289ecd8c 86 | 87 | 88 | --- 89 | 90 | visionOS가 아닌 다른 플랫폼에서는 2D 디스플레이의 [resolution(해상도)](https://developer.apple.com/design/human-interface-guidelines/images#Resolution)에 따라 달라질 수 있는 픽셀 수로 점(point)을 정의하고 있지만, visionOS에서는 동적 스케일링 및 깊이 표현을 지원하기 위해 점(point)을 각도로 정의합니다. 91 | 92 | #### 가상 객체를 실제 객체와 똑같이 보이게 하려면 고정 배율을 사용하는 것이 좋습니다. 93 | 예를 들어, 사람들이 자신의 공간에서 제품을 볼 때 더욱 사실적으로 보이도록 제공하는 제품의 실제 크기 축척을 유지하고 싶을 수 있습니다. 94 | 95 | 인터랙티브 콘텐츠는 가까워지거나 멀어질 때 사용성을 유지하기 위해 스케일을 조정해야 하므로 고정 스케일을 적게 적용하고 필요한 비인터랙티브 객체를 위해 남겨 두는 것이 좋습니다. 96 | 97 | ## Best practices 98 | 99 | - ### 너무 많은 창을 표시하지 마세요. 100 | 창이 너무 많으면 주변 환경이 가려져 사람들이 압도당하고 답답함을 느끼며 심지어 불편함을 느낄 수 있습니다. 또한 많은 창 크기를 조정하거나 위치를 변경하지 않고는 사람들이 원하는 콘텐츠에 집중하기 어려울 수 있습니다. 101 | 102 | - ### 표준적이고 간접적인 제스처를 우선시하세요. 103 | 사람들은 시야에 손을 대지 않고도 간접적인 제스처를 취할 수 있습니다. 반면 직접 제스처를 사용하려면 손가락으로 가상 개체를 터치해야 하는데, 특히 개체가 시야에 있거나 시야 위에 있는 경우 피곤할 수 있습니다. visionOS에서는 간접 제스처를 사용하여 이미 알고 있는 표준 제스처를 수행합니다. 간접 제스처를 우선순위로 지정하면 사람들은 거리에 상관없이 초점을 맞출 수 있는 모든 물체와 상호 작용할 수 있습니다. 직접 제스처를 지원하는 경우 짧은 시간 동안 자세히 살펴보거나 조작해야 하는 가까운 물체에 적용해야 합니다. 자세한 내용은 [Gestures > visionOS](https://developer.apple.com/design/human-interface-guidelines/gestures#visionOS)을 참조하세요. 104 | 105 | - ### 디지털 크라운을 통해 사용자의 시야에 최신 창을 표시할 수 있습니다. 106 | 사람들이 움직이거나 고개를 돌리면 원하는 위치에 콘텐츠가 더 이상 표시되지 않을 수 있습니다. 107 | 이 경우 사람들은 눈앞에 있는 콘텐츠를 최신 상태로 표시하고 싶을 때 [Digital Crown](../Inputs/Digital-Crown.md)을 누를 수 있습니다. 앱은 이 동작을 지원하기 위해 아무것도 할 필요가 없습니다. 108 | 109 | - ### 사람들이 쉽게 집중할 수 있도록 인터랙티브 구성 요소 주변에 충분한 공간을 확보하세요. 110 | 사용자가 [눈](../Inputs/Eyes)을 사용하여 인터랙티브 요소에 [focus(초점)](https://developer.apple.com/design/human-interface-guidelines/focus-and-selection)을 맞추면 visionOS는 시각적 호버 효과를 표시하여 원하는 요소임을 확인할 수 있도록 지원합니다. 인터랙티브 요소 주위에 충분한 공간을 확보하여 쉽고 편안하게 초점을 맞출 수 있도록 하는 동시에 호버 효과로 인해 다른 콘텐츠가 가려지는 것을 방지하는 것이 중요합니다. 예를 들어, [buttons](https://developer.apple.com/design/human-interface-guidelines/buttons#visionOS)의 중심이 60포인트 이상 떨어져 있도록 배치합니다. 111 | 112 | - ### 사람들이 신체적 움직임을 최소화하거나 전혀 하지 않고 앱을 사용할 수 있도록 하세요. 113 | 신체적 움직임이 필수적인 경우가 아니라면, 모든 사람이 고정된 상태에서 앱을 즐길 수 있도록 하세요. 114 | 115 | - ### 바닥을 활용하여 대형 몰입형 경험을 배치할 수 있습니다. 116 | 몰입형 경험에 바닥에서 위로 확장되는 콘텐츠가 포함된 경우 평평한 수평면(flat horizontal)을 사용하여 콘텐츠를 배치합니다. 이 평면을 바닥과 정렬하면 주변 환경과 매끄럽게 어우러져 보다 직관적인 경험을 제공할 수 있습니다. 117 | 118 | visionOS의 window 및 volume에 대해 자세히 알아보려면 [Windows > visionOS](https://developer.apple.com/design/human-interface-guidelines/windows#visionOS)를 참조하고, 창 내에 콘텐츠를 배치하는 방법에 대한 지침은 [Layout > visionOS](https://developer.apple.com/design/human-interface-guidelines/layout#visionOS)를 참조하세요. 119 | 120 | ## 플랫폼 고려사항 121 | - iOS, iPadOS, watchOS, tvOS, watchOS에는 해당되지 않습니다. 122 | 123 | 124 | 125 | --- 126 | 127 | ### 연관 내용 128 | - [Eyes](../Inputs/Eyes.md) 129 | - [Layout](https://developer.apple.com/design/human-interface-guidelines/layout) 130 | - [Immersive experiences](Immersive-experiences.md) 131 | 132 | ### 개발자 문서 참고 133 | - [Presenting windows and spaces](https://developer.apple.com/documentation/visionOS/presenting-windows-and-spaces) 134 | - [Positioning and sizing windows](https://developer.apple.com/documentation/visionOS/positioning-and-sizing-windows) 135 | - [Adding 3D content to your app](https://developer.apple.com/documentation/visionOS/adding-3d-content-to-your-app) 136 | 137 | ### 영상 138 | 139 | | [Design for spatial user interfaces](https://developer.apple.com/videos/play/wwdc2023/10076) | [Principles of spatial design](https://developer.apple.com/videos/play/wwdc2023/10072) | [Design for spatial input](https://developer.apple.com/videos/play/wwdc2023/10073) | 140 | | -------- | -------- | -------- | 141 | | ![](https://i.imgur.com/kTIL2Ke.png)| ![](https://i.imgur.com/PD74ZGq.png) | ![](https://i.imgur.com/c47Exth.png)| 142 | 143 | -------------------------------------------------------------------------------- /Foundations/Immersive-experiences.md: -------------------------------------------------------------------------------- 1 | # Immersive experiences 2 | [원본 링크](https://developer.apple.com/design/human-interface-guidelines/immersive-experiences) 3 | 4 | ### visionOS에서는 `window`과 `volume`을 넘어 확장되는 앱과 게임을 디자인하고 사람들이 콘텐츠에 몰입할 수 있도록 할 수 있습니다. 5 | 6 | ![](https://i.imgur.com/97QVR3r.png) 7 | 8 | `visionOS`에서는 공유 공간에서 여러 앱을 동시에 실행하거나 전체 공간에서 한 번에 하나의 앱에 집중할 수 있습니다. 기본적으로 앱은 공유 공간에서 실행되며, 사용자는 Mac에서와 마찬가지로 실행 중인 여러 앱 간에 전환할 수 있습니다. 9 | 10 | 보다 몰입감 있는 환경을 원할 경우 다른 앱은 숨겨지고 앱은 어디서나 콘텐츠를 표시할 수 있는 전체 공간으로 앱을 전환할 수 있습니다. 11 | 12 | ## Immersion-and-passthrough 13 | visionOS는 사람들이 앱이나 게임을 경험할 수 있는 다양한 방법을 제공하는 데 도움이 되는 몰입도 스펙트럼을 지원합니다. 이 스펙트럼에서 사람들의 물리적 환경의 가시성은 경험의 몰입도에 중요한 역할을 합니다. 14 | 15 | https://github.com/i-colours-u/Human-Interface-Guidelines-KR/assets/60260284/ca651903-4499-43e2-8dac-f002c121fafa 16 | 17 | 18 | Apple Vision Pro를 착용한 상태에서는 기기의 외부 카메라에서 실시간 비디오를 제공하는 패스스루를 사용하여 주변 환경을 볼 수 있습니다. 19 | 20 | 주변 환경을 얼마나 많이 볼 수 있는지 변경하려면 [Digital Crown](Digital-Crown.md)을 사용하여 [Passthrough](Immersive-experiences.md#Immersion-and-passthrough)의 양을 조정합니다. 예를 들어, 근처의 물리적 물체와 상호 작용하거나 다른 디바이스에서 텍스트를 읽고 싶을 때는 [Passthrough](Immersive-experiences.md#Immersion-and-passthrough)를 늘리고, 환경을 불러오고 싶을 때는 [Passthrough](Immersive-experiences.md#Immersion-and-passthrough)를 줄일 수 있습니다. 21 | 22 | https://github.com/i-colours-u/Human-Interface-Guidelines-KR/assets/60260284/8bef9fe5-d61e-4e16-82ae-e197ee33ce1f 23 | 24 | 25 | 26 | > **중요** 27 | > 28 | > 앱은 현재 비전프로에서 투과되는 수준이나 사용자 위치 시점에 대한 직접적인 정보를 수신하지 않으므로 사용자가 기기 주변 환경을 얼마나 잘 볼 수 있는지 알 수 없습니다. 29 | 30 | ## 사람들이 경험에 몰입하고 콘텐츠에 참여하도록 돕기 위해 다음과 같은 기술을 고려하세요. 31 | 32 | - ### 공유 공간에 있는 동안 Passthrough를 사용해 주변 환경을 어둡게 하세요. 33 | > 시스템에 Passthrough 및 기타 보이는 콘텐츠를 미묘하게 어둡게 하여 다른 앱을 숨기지 않고 방해 요소를 최소화하고 특정 창이나 볼륨을 강조하도록 요청할 수 있습니다. [SurroundingsEffect(주변 환경 효과)](https://developer.apple.com/documentation/SwiftUI/SurroundingsEffect) 개발자 문서를 참조하세요. 34 | 35 | - ### 주변 환경과 통합된 환경을 제공하세요. 36 | > 전체 공간에서 실행할 때 앱은 주변의 실제 물체 및 공간 레이아웃에 대한 정보에 대한 액세스를 요청하여 사람들의 주변 환경과 조화를 이루는 가상 콘텐츠를 표시할 수 있습니다. [mixed](https://developer.apple.com/documentation/SwiftUI/ImmersionStyle/mixed) 및 [ARKit](https://developer.apple.com/documentation/arkit) 개발자 문서를 참조하세요. 37 | 38 | - ### Portal을 제공하세요. 39 | > 전체 공간에서 실행되는 앱은 `Portal`을 사용하여 사람들을 주변 환경으로부터 완전히 분리하지 않으면서 더욱 몰입감 있는 경험을 제공할 수 있습니다. `Portal`이 열리면 사람들은 몰입형 콘텐츠를 대략 180도로 볼 수 있으며, 디지털 크라운을 사용하여 포털의 크기를 조정할 수 있습니다. [progressive](https://developer.apple.com/documentation/SwiftUI/ImmersionStyle/progressive) 개발자 문서를 참조하세요. 40 | 41 | - ### 완전히 몰입형 환경(Immersive experience)를 제공하세요. 42 | >  완전한 몰입형 환경(Immersive experience)를 제공하기 위해 전체 공간에서 실행되는 앱은 사람들을 완전히 둘러싸는 콘텐츠를 표시하여 새로운 장소로 이동하는 동안 시스템에 `Passthrough`를 숨기도록 요청할 수 있습니다. [full](https://developer.apple.com/documentation/SwiftUI/ImmersionStyle/full) 개발자 문서를 참조하세요. 43 | 44 | 45 | ## visionOS는 사람들이 앱을 사용하는 동안 다음과 같은 기능을 제공합니다. 46 | 47 | - #### 사람이 약 1미터 이상 움직이면 시스템이 자동으로 표시되는 모든 콘텐츠를 반투명하게 만들어 주변 환경을 탐색할 수 있도록 도와줍니다. 48 | - #### 완전 몰입형 환경이 시작되면 시스템은 착용자 머리의 초기 위치에서 1.5m까지 확장되는 보이지 않는 영역을 정의합니다. 머리가 이 영역을 벗어나면 체험이 자동으로 중지되고 패스스루로 돌아가 실제 주변 환경의 물체와 충돌을 피할 수 있습니다. 49 | - #### 이 시스템은 사용자가 실제 물체에 너무 가까이 다가가거나 너무 빠르게 움직이면 몰입형 경험을 중단할 수 있습니다. 50 | 51 | 52 | ## Best practices 53 | - #### 다양한 앱 사용 방법을 제공하세요 54 | 사람들이 자신의 경험을 자유롭게 선택할 수 있도록 하는 것 외에도, 사람들이 기기와 상호 작용하는 방식을 개인화할 수 있도록 [Accessibility(접근성)](../Foundations/Accessibility.md) 기능을 앱에 설계하는 것이 중요합니다.[Accessibility(접근성)](../Foundations/Accessibility.md) 문서를 참조하세요. 55 | 56 | - #### 의미 있는 순간과 콘텐츠를 위해 Immersion(몰입) 상황을 잘 설계하세요. 57 | 앱에서 모든 상황에서 몰입(Immersion)을 제공한다고 해서 이점을 누릴 수 있는 것은 아닙니다. 58 | 59 | 사람들은 때때로 다른 세계로 들어가기를 원하지만, 앱을 사용하는 동안에는 주변 환경에 집중하고 싶어 할 수 있습니다. 만약 해당 앱이 이러한 기능을 제공한다면, 다른 앱과 시스템 기능을 동시에 사용할 수 있다는 점을 높이 평가할 수 있습니다. 60 | 61 | 앱의 모든 상황에서 몰입(Immersion) 상태에 들어가야 한다고 설계하기 보다는, 사람들이 앱의 고유한 개별 작업과 콘텐츠에 몰입할 수 있는 방법을 설계하세요. 62 | 63 | 예를 들어, 사용자는 공유 공간에서 익숙한 앱 창을 사용하여 사진에서 앨범을 탐색할 수 있지만, 사진 한 장을 살펴보고 싶을 때는 사진을 확장하고 세부 정보를 감상할 수 있는 전체 공간에서 일시적으로 더 몰입감 있는 환경으로 전환할 수 있습니다. 64 | 65 | 66 | - #### 몰입도에 관계없이 사람들이 앱의 주요 순간에 몰입할 수 있도록 도와주세요. 67 | 디밍, [motion(모션)](https://developer.apple.com/design/human-interface-guidelines/motion), [scale(스케일)](https://developer.apple.com/design/human-interface-guidelines/spatial-layout#Scale), [Spatial Audio(공간 오디오)](../Patterns/playing-audio#visionOS)와 같은 요소를 사용해서 사용자에게 힌트를 제공하세요. 68 | 69 | 힌트를 제공한다면, 공유 공간의 `window`나 전체 공간의 완전 몰입형 경험 등 콘텐츠의 특정 영역에 사람들의 주의를 끌 수 있습니다. 사람들의 주의를 부드럽게 유도하는 미묘한 단서(힌트)부터 시작하여 앱의 중요한 순간에서 힌트를 더 강조하세요. 70 | 71 | > 디밍(dimming): 빛의 세기를 조절하는 것 72 | 73 | - #### 몰입도 높은 환경으로 전환할 시기를 사용자가 선택할 수 있도록 하는 것이 좋습니다. 74 | 사용자의 동의 없이 더 몰입도 높은 환경으로 이동시키거나 예기치 않게 큰 창이나 물체를 표시하여 사용자를 압도하고 싶지 않을 것입니다. 75 | 76 | 대신 명확한 진입 및 종료 제어 기능을 제공하여 사람들이 콘텐츠에 더 몰입할 수 있는 시기를 결정할 수 있도록 하세요. 77 | 78 | - #### 자연스럽고, 예측 가능한 전환이 되도록 설계하세요. 79 | 80 | 사람들이 시각적으로 변화를 추적할 수 있는 자연스러운 전환을 제공하여 다양한 경험에 대비할 수 있도록 하세요. 방향을 잃게 하거나 불편함을 줄 수 있는 갑작스럽고 혼란스러운 전환은 피하세요. 81 | 82 | - #### 몰입형 경험을 쉽게 종료할 수 있도록 하세요. 83 | 예를 들어, Keynote는 사람들이 극장 경험을 종료하고 슬라이드 보기 창으로 돌아갈 수 있도록 눈에 잘 띄는 종료 버튼을 제공합니다. 84 | 85 | 버튼이 사용자를 이전의 덜 몰입적인 컨텍스트로 되돌리는지 아니면 게임과 같은 경험을 종료하는 것인지 명확하게 표시해야 합니다. 86 | 87 | 몰입형 경험을 종료하면 앱도 종료되는 경우, 종료하기 전에 진행 상황을 저장할 수 있는 위치로 돌아가거나 일시 중지할 수 있는 컨트롤을 제공하는 것을 고려하세요. 88 | 89 | - #### 완전 몰입형 환경에서는 사람들이 움직이도록 유도하지 마세요. 90 | 완전 몰입형 환경에서는 시스템이 `Passthrough`를 숨기므로 사람들이 콘텐츠에 몰입하는 동안 주변 상황을 파악하지 못할 수 있습니다. 91 | 92 | 사람들이 앱을 사용하는 동안 안전하고 편안한 상태를 유지하도록 유도하는 것이 중요합니다. 93 | 94 | 사람들이 한 곳에 머무르도록 돕는 한 가지 방법은 사람들이 콘텐츠를 향해 이동하도록 설계하는 방법보다, 직접적인 콘텐츠를 제공하는 것입니다. 95 | 96 | - #### 앱 콘텐츠를 사용자의 주변 환경과 혼합하려면 ARKit을 채택하세요 97 | 예를 들어, 가상 콘텐츠를 사용자의 주변 환경에 통합하거나 착용자의 손 위치를 사용하여 사용자에게 경험을 제공하고자 할 수 있습니다. 98 | 99 | 이러한 유형의 민감한 데이터에 액세스해야 하는 경우 반드시 사용자의 허가를 요청해야 합니다. 100 | 101 | 자세한 내용은 [Privacy(개인정보 보호)](https://developer.apple.com/design/human-interface-guidelines/privacy)를 참조하고 [SceneReconstructionProvider](https://developer.apple.com/documentation/arkit/scenereconstructionprovider) 개발자 문서를 참조하세요. 102 | 103 | - #### 가상 객체를 주변 환경과 혼합할 수 있는 앱에서는 `PassThrough`가 완전히 가려지지 않도록 도와주세요. 104 | 사람들은 종종 `PassThrough`의 존재를 통해 주변에서 조심스럽게 움직일지 여부를 결정합니다. 105 | 106 | 가상 객체를 주변에 있는 실제 객체가 보이지 않도록 배치할 수 있다면 사람들은 주변에서 이동하는 것이 어려울 수 있다는 사실을 깨닫지 못할 수 있습니다. 107 | 108 | 이러한 상황을 피하려면 올바른 API를 사용하여 몰입형 환경을 구현해야 사람들이 움직일 때 시스템이 적절하게 반응할 수 있습니다. [ImmersionStyle](https://developer.apple.com/documentation/SwiftUI/ImmersionStyle) 개발자 문서를 참조하세요. 109 | 110 | - #### 사람들의 시각적 편안함을 염두에 두어야 합니다. 111 | 예를 들어, 앱이 전체 공간에서 실행되는 동안 3D 콘텐츠를 어디에나 배치할 수 있지만, 사람들의 [field of view(시야)](Spatial-layout#Field-of-view) 내에 배치하는 것을 선호합니다. 112 | 113 | 또한 앱이 전체 공간에서 실행되는 동안에는 사람들이 익숙한 기준 프레임에 익숙하지 않을 수 있으므로 모션을 편안한 방식으로 표시해야 합니다. 자세한 내용은 [Motion](https://developer.apple.com/design/human-interface-guidelines/motion)을 참조하세요. 114 | 115 | ### 플랫폼 지원 사항 116 | - iOS, iPadOS, macOS, tvOS, watchOS 에서는 해당 내용이 제공되지 않습니다. 117 | 118 | --- 119 | 120 | ### 연관 내용 121 | - [Spatial layout](Spatial-layout) 122 | - [Motion](https://developer.apple.com/design/human-interface-guidelines/motion) 123 | 124 | ### 개발자 문서 참고 125 | - [Creating fully immersive experiences in your app](https://developer.apple.com/documentation/visionOS/creating-fully-immersive-experiences) 126 | - [Incorporating real-world surroundings in an immersive experience](https://developer.apple.com/documentation/visionOS/incorporating-surroundings-in-an-immersive-experience) 127 | - [Immersive spaces](https://developer.apple.com/documentation/SwiftUI/Immersive-spaces) 128 | 129 | ### 영상 130 | 131 | | [Principles of spatial design](https://developer.apple.com/videos/play/wwdc2023/10072) | [Explore immersive sound design](https://developer.apple.com/videos/play/wwdc2023/10271) | [Design spatial SharePlay experiences](https://developer.apple.com/videos/play/wwdc2023/10075) 132 | | -------- | -------- | -------- | 133 | | ![](https://i.imgur.com/PD74ZGq.png) | ![](https://i.imgur.com/TjJ9YrZ.png) | ![](https://i.imgur.com/7zOSV1g.png) | -------------------------------------------------------------------------------- /Foundations/Writing.md: -------------------------------------------------------------------------------- 1 | # Writing 2 | 3 | ## 앱 내에서 선택하는 워딩(단어)는 사용자 경험에서 매우 큰 부분을 차지합니다. 4 | 5 | ![A sketch of a document and pencil, suggesting written content. The image is overlaid with rectangular and circular grid lines and is tinted yellow to subtly reflect the yellow in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/5bd05331c62b850b25ac62f8581b97b6/foundations-writing-intro@2x.png) 6 | 7 | 8 | 여러분이 만드는 앱은 사용자 경험의 중요한 부분입니다. 온보딩 경험을 설계하거나 경고 메시지를 작성하거나 접근성을 고려해 이미지를 설명할 때, 언어의 선택은 여러분의 앱이나 게임을 최대한 활용할 수 있도록 돕습니다. 9 | 10 | ## Getting Started 11 | 12 | ### 여러분의 앱에서 사용할 무드(어조, 톤)을 정하세요. 13 | 누구에게 말하는지 생각하여 사용할 어휘를 선택하세요. 사용자들이 익숙한 용어는 무엇인가요? 어떤 느낌을 주고 싶으세요? 은행 앱에서는 신뢰와 안정성을 나타내는 단어를 사용할 수 있고, 게임에서는 흥미와 즐거움을 전달하는 어휘를 고려할 수 있습니다. 공통 용어 목록을 만들어서 일관된 언어를 사용하고, 앱의 가치를 반영하는 어조를 유지하세요. 일관된 언어와 앱의 가치를 반영하는 어조는 모든 것이 보다 일관성 있게 느껴지도록 도와줍니다. 14 | 15 | ### 맥락에 맞게 어조를 조절하세요. 16 | 앱의 어조를 설정한 후에는 상황에 따라 어조를 다르게 적용하세요. 사용자가 앱을 사용하는 동안 물리적 세계와 앱 내부에서 무엇을 하는지 고려하세요. 그들이 운동을 하며 목표를 달성했을까요? 아니면 지불을 시도하다 오류 메시지를 받았을까요? 상황적인 요인은 말하는 내용과 화면에 표시되는 텍스트의 방식에 모두 영향을 미칩니다. 17 | 18 | 애플 워치의 2가지 예시를 비교해보세요. 19 | 첫 번째 예시에서는 상황의 심각성을 반영하여 직접적이고 단호한 어조를 사용합니다. 두 번째 예시에서는 상황의 가벼움과 축하의 느낌을 전달하기 위해 부드럽고 축하하는 어조를 사용합니다. 20 | 21 | 22 | | | | 23 | | --- | --- | 24 | | ![A screenshot of a Fall Detection message that reads: it looks like you've taken a hard fall.](https://docs-assets.developer.apple.com/published/58f94ca509ec5b915b6c3b8ea21aaf9f/fall-detection-message@2x.png) | ![A screenshot of an Activity message that reads: you set a personal record for your longest daily Move streak, 35 days!](https://docs-assets.developer.apple.com/published/54d5ea9ec7d50374459f8ab01ee6b9ea/move-streak-message@2x.png) | 25 | 26 | 27 | ### 명확하게 표현하세요. 28 | 이해하기 쉬운 단어를 선택하고 올바른 내용을 전달하세요. 각 단어가 필요한지 확인하고, 불필요한 단어를 줄일 수 있다면 줄이세요. 의심스러운 경우 글을 읽어 보면서 확인하세요. 29 | 30 | ### 모든 사람을 위해 문장을 작성해보세요. 31 | 여러분의 앱이 최대한 많은 사람들에게 유용하려면 최대한 많은 사람들에게 말하도록 해야 합니다. 간단하고 명확한 언어를 선택하고 접근성과 로컬라이징을 고려하여 쓰세요. 전문 용어와 성별화된 용어를 피하고, 도움말이 필요하다면 [Writing inclusively](https://help.apple.com/applestyleguide/#/apdcb2a65d68)와 [VoiceOver](https://developer.apple.com/design/human-interface-guidelines/accessibility#VoiceOver)를 참고하세요. 개발자 안내는 [Localization](https://developer.apple.com/documentation/xcode/localization)를 참고하세요. 32 | 33 | ## Best practices 34 | 35 | ### 각 화면의 목적을 고려하세요. 36 | 화면의 순서에 주의하고, 가장 중요한 정보를 먼저 표시하세요. 텍스트 형식을 조정하여 읽기 쉽게 만드세요. 하나 이상의 아이디어를 전달하려고 할 때, 텍스트를 여러 화면으로 나누고 그 화면 간 정보의 흐름을 고려하세요. 37 | 38 | ### 행동 중심으로 쓰세요. 39 | 명확한 문장과 명확한 레이블은 사용자들이 한 단계에서 다음 단계로 이동하거나, 한 화면에서 다른 화면으로 앱을 탐색하는 데 도움이 됩니다. 버튼과 링크에 레이블을 달 때 동사 형태의 워딩을 사용하는 것이 가장 좋습니다. 명확성을 우선하고, 레이블을 너무 키치하거나, 귀엽거나, 재치있는 워딩을 사용하는 유혹에서 벗어나세요 😁 예를 들어, "다음"이라고 말하는 것이 "한번 해볼까요?!" 보다 더 잘 작동하는 경우가 많습니다. 링크에 대해서도 "여기를 클릭하세요" 대신 "UX Writing에 대해 자세히 알아보기"와 같은 더 구체적인 단어나 구문을 사용하세요. 특히 스크린 리더를 사용하여 앱에 접근하는 사람들에게 이것은 매우 중요합니다. 40 | 41 | ### 언어 패턴을 만드세요. 42 | 일관성은 익숙함을 만들어주며, 여러분의 앱이 통합되고 직관적이며 신중하게 디자인되었다는 느낌을 줍니다. 또한 여러분의 앱을 위해 UX 라이팅을 쓸 때 이러한 패턴을 반복해서 사용할 수 있어서 편리합니다. 여기 몇 가지 고려해야 할 언어 패턴이 있습니다: 43 | 44 | 45 | - #### 대문자로 시작하는 제목 혹은 문장으로 결정하세요. 46 | 경고, 페이지 제목, 헤드라인, 버튼 레이블 및 링크에 대해 대문자로 시작하는 형태로 문장을 작성하세요. HIG에서는 특정 구성 요소에 대한 지침을 찾을 수 있지만 텍스트를 사용하는지는 여러분의 앱 스타일에 따라 달려 있습니다. 대문자로 시작하는 제목은 더 공식적인 느낌을 주며, 문장으로 시작하는 제목은 더 캐주얼한 느낌을 줍니다. 여러분의 앱에 맞는 스타일을 선택하세요. 47 | 48 | > 해당 HIG 문서는 영어를 기반으로 작성되어, 한국어와 어느정도 맞지 않는 부분(대문자로 작성과 같은 부분)이 있습니다. 이를 감안하고 읽어주세요. 49 | 50 | 51 | - #### 1인칭 또는 2인칭 형태의 워딩을 사용하세요. 52 | 여러분의 앱이 사람들에게 즐겨찾기를 저장하거나 항목을 즐겨찾기로 표시할 수 있게 한다면, 이러한 항목은 "나의 즐겨찾기" 또는 "(여러분이) 저장한 항목" 라는 워딩으로 표현 할 수 있습니다. 하지만 2가지 방식을 동시에 사용하는 것은 피하세요. 1인칭 혹은 2인칭 중에 1가지 방식만 채택해서 통일하는 것이 좋습니다. 53 | 54 | - #### "계속하기" 혹은 "다음" 둘 중 하나만 사용하세요. (Continue or Next) 55 | 여러 화면에 걸쳐있는 앱의 흐름이 있다면, 다음 단계로 이동하는 버튼 또는 링크에 어떻게 레이블을 지정할지 결정하세요. "계속" 또는 "다음" 이라는 워딩 중 1가지만 선택해서 통일성 있게 사용하는 것으 권장합니다. 특정 화면 플로우 끝에는 "완료하기" 또는 "완료" 라는 특별한 라벨을 통해 플로우가 끝났다는 점을 사용자에게 알려주는 것이 좋습니다. 56 | 57 | 58 | ### 사람들이 휴대폰(기기)를 사용하는 방식에 따라 워딩을 다르게 사용하세요. 59 | 사람들은 여러 종류의 디바이스에서 여러분의 앱을 사용할 수 있습니다. 언어는 이러한 디바이스 간에 일관성이 있어야 합니다. 특정 디바이스에 맞게 텍스트를 조절하는 것이 여러분의 앱에 어떻게 도움이 될지 고려해보세요. 각 디바이스에서 제스처를 올바르게 설명하는지 확인하세요. 예를 들어, iPhone이나 iPad와 같은 터치 디바이스에서 "탭"을 의미하는데, "클릭"이라는 워딩을 사용하지 않도록 주의하세요. 60 | (각 디바이스의 사용 방식에 맞춰 워딩을 작성하라는 의미) 61 | 62 | 디바이스를 사용하는 위치, 화면 크기 및 환경은 여러분의 앱을 위해 어떻게 쓸 지에 영향을 미칩니다. 예를 들어, iPhone과 Apple Watch는 맞춤화 기회를 제공하지만 작은 화면 크기로 인해 사용시에 간결함이 필요합니다. 반면 TV는 일반적으로 공용 거실에 있으며 여러 명이 화면에 표시되기 상대적으로 쉽습니다. 물론, 해당 컨텐츠를 보는 대상을 고려해야 합니다. 큰 화면도 간결함(심플함)이 필요하며, 텍스트는 멀리서 볼 수 있도록 커야 합니다. 63 | 64 | ### 빈 화면에 대한 명확한 다음 단계를 제공하세요. 65 | 완료된 할 일 목록이나 아무 것도 없는 즐겨찾기 폴더와 같은 빈 상태는 유저들에게 앱에 대해 잘 알려줄 수 있고, 안내 할 수 있는 새로운 기회를 줄 수 있습니다. 빈 상태는 여러분의 앱 어조를 강조할 수도 있지만, 콘텐츠가 유용하고 문맥에 맞는지 확인하세요. 빈 화면은 다음에 무엇을 해야 할지 명확하지 않다면 오히려 사용자들에게 어려울 수 있으므로 사람들이 할 수 있는 조치를 안내하고 가능하면 버튼이나 링크를 제공하세요. 특정 화면에서 빈 상태는 보통 일시적이므로 사라질 수 있는 중요한 정보를 표시하지 않아야 합니다. 66 | 67 | ### 명확한 오류 메시지를 작성하세요. 68 | 항상 사람들이 오류를 피하도록 돕는 것이 가장 좋습니다. 오류 메시지가 필요한 경우 문제와 가장 가까운 곳에 표시하고, 사용자가 잘못했다는 지적을 나타내기를 피하고 어떻게 고칠 수 있는지 명확하게 표시하세요. 예를 들어, "비밀번호가 너무 짧습니다"보다는 "최소 8자 이상의 비밀번호를 선택하세요"가 더 도움이 됩니다. 오류는 짜증을 유발할 수 있으므로 "어이쿠!" 또는 "우와!"와 같은 감탄사는 일반적으로 필요하지 않으며 어떻게 솔루션을 재고해야 하는지 다시 고려하는 기회로 활용할 수 있습니다. 69 | 70 | ### 적절한 메세지 전달 방법 선택하기 71 | 여러분의 앱을 활용하고 있지 않더라도, 사람들의 주의를 끄는 여러 가지 방법이 있습니다. 전달하려는 메시지의 긴급성과 중요성을 고려하세요. 앱을 사용하지 않는 사람들이 메시지를 볼 수 있는 상황을 고려해서, 즉각적인 조치가 필요한지 여부 및 지원 정보가 얼마나 필요한지 고려하세요. 이러한 상황 속에서 최대한 적절한 전달 방법을 선택하고 상황에 적절한 어조를 사용하세요. 자세한 가이드는 [Notifications](https://developer.apple.com/design/human-interface-guidelines/notifications), [Alerts](https://developer.apple.com/design/human-interface-guidelines/alerts), [Action sheets](https://developer.apple.com/design/human-interface-guidelines/action-sheets) 문서를 참조하세요. 72 | 73 | ### 설정 레이블을 명확하고 간단하게 유지하세요. 74 | 가능한 한 실용적으로 레이블을 달아서 필요한 설정을 쉽게 찾을 수 있도록 도와주세요. 설정 레이블만으로는 충분하지 않은 경우 설명을 추가하세요. 특정 설정 옵션이 켜진 상태에서 이 설정이 무엇을 하는지 설명하면, 옵션이 꺼진 상태에서는 이 설정이 동작하지 않음을 사람들이 추론할 수 있습니다. 예를 들어 Apple Watch의 손 씻기 타이머 설정에서는 타이머가 손 씻기 중에 시작할 수 있다는 설명이 있습니다. 이 설정이 꺼져 있을 때 타이머가 시작되지 않는다는 것을 설명하는 것은 필요하지 않습니다. (굳이 부가적으로 꺼졌을 떄 어떻게 할 지에 대한 설명이 필요 없다는 뜻) 75 | ![A partial screenshot showing the Handwashing Timer description, which reads: Apple Watch can detect when you're washing your hands and start a 20-second timer.](https://docs-assets.developer.apple.com/published/d313580ca52395f9227953797ce98537/handwashing-settings@2x.png)' 76 | 77 | 만약 누군가에게 특정 설정을 안내해야 한다면, 그 위치를 설명하려고 노력하기보다는 직접 링크나 버튼을 제공하세요. 지침은 [Settings](https://developer.apple.com/design/human-interface-guidelines/settings)을 참조하세요. 78 | 79 | ### 텍스트 필드에 힌트 표시하세요. 80 | 여러분의 앱이 사람들이 자신의 텍스트를 입력할 수 있도록 허용한다면, 모든 필드를 명확하게 레이블을 작성하고 힌트나 플레이스홀더 텍스트를 사용하여 정보를 어떻게 형식화해야 하는지 알 수 있도록 도와주세요. 힌트 텍스트에 예제를 제공할 수 있습니다. 예를 들어, "[name@example.com](mailto:name@example.com)"과 같은 예제를 힌트 텍스트에 표시하거나 "이름을 작성해주세요"과 같이 정보를 설명할 수 있습니다. 필드 옆에 오류를 표시하고 사람들에게 정보를 올바르게 입력하는 방법을 안내하세요. 해당 규칙 및 룰을 따르지 않아서 경고하거나, 강한 어투로 표현하지 말고 정보를 입력하는 방법을 알려주세요. "이름에는 문자만 사용하세요"는 "숫자나 기호를 사용하지 마세요"보다 더 좋습니다. 유용한 정보가 없는 로봇 같은 오류 메시지("잘못된 이름"과 같은)를 피하세요. 자세한 지침은 [Text fields](https://developer.apple.com/design/human-interface-guidelines/text-fields)를 참조하세요. 81 | 82 | 83 | ## 플랫폼별 고려사항 84 | - iOS, iPadOS, watchOS, tvOS, visionOS, macOS들은 해당사항이 없습니다. 85 | 86 | --- 87 | 88 | ### 참고 문서 89 | 90 | - [Apple Style Guide](https://help.apple.com/applestyleguide/#/) 91 | - [Writing inclusively](https://help.apple.com/applestyleguide/#/apdcb2a65d68) 92 | - [Inclusion](https://developer.apple.com/design/human-interface-guidelines/inclusion) 93 | - [Accessibility](https://developer.apple.com/design/human-interface-guidelines/accessibility) 94 | - [Color](https://developer.apple.com/design/human-interface-guidelines/color) 95 | 96 | 97 | ### 연관 영상 98 | | [Writing for interfaces](https://developer.apple.com/videos/play/wwdc2022/10037) | 99 | | --------------------------------------------------------------------------------------------------------------------------- | 100 | | ![](https://devimages-cdn.apple.com/wwdc-services/images/124/E58B8A59-15C1-4FB4-B61A-23DBA2AF6D28/6530_wide_250x141_1x.jpg) | 101 | 102 | 103 | -------------------------------------------------------------------------------- /Foundations/Materials.md: -------------------------------------------------------------------------------- 1 | 2 | ## Apple 플랫폼에서 Material 특성은 기본 시각적 콘텐츠의 색상 값을 흐리게 하거나 수정하여 반투명도를 부여합니다. 3 | 4 | 5 | ![](https://docs-assets.developer.apple.com/published/b47eb524ca1170cd60312070b9822dd4/foundations-materials-intro~dark@2x.png) 6 | 7 | 8 | 9 | 반투명은 전경 요소(Foreground) 와 배경(Background) 요소의 통합을 개선하여 레이어 간의 구분을 시각적으로 전달하고 사람들이 장소감을 유지할 수 있도록 도와줍니다. 반투명도를 높이기 위해 Material 특성을 생동감과 같이 사용 할 수 있습니다. 생동감은 소재의 뒤쪽에서 색상을 앞으로 당겨 텍스트, 기호 및 채우기와 같은 전경 콘텐츠의 깊이감을 증폭시킵니다. 10 | 11 | 12 | > 참고 13 | > 생동감은 모든 앱과 게임, 심지어 생동감 을 지원하는 UI를 표시하지 않는 앱과 게임에도 영향을 미칠 수 있습니다. macOS의 menu, 비전OS의 window, iOS의 labels과 같은 일부 구성 요소는 기본적으로 생동감이 있으므로 생동감은 모든 앱과 게임에 영향을 미칠 수 있습니다. 14 | 15 | ## Best practices 16 | 17 | 시스템은 밝고 어두운 외관에 자동으로 적응할 수 있는 여러 가지 Material 특성을 제공합니다. 또한 시스템에서 제공하는 흐림 및 생동감 효과를 UI 컴포넌트에 적용하여 Material 특성과 잘 통합되고 원하는 눈에 잘 띄도록 할 수 있습니다. 시스템에서 정의한 Material 특성과 효과를 사용하면 앱이나 게임에 일관된 시각적 요소를 부여하고 사용자가 앱 간에 전환할 때 부드러운 전환을 만들 수 있습니다. 18 | 19 | - #### 맥락과 권장 사용법에 따라 시스템 Material 특성 및 효과를 선택하세요. 20 | 시스템 설정에 따라 인터페이스의 모양과 동작이 달라질 수 있으므로 Material 이나 효과가 인터페이스에 부여하는 겉으로 보이는 색을 기준으로 선택하지 마세요. 대신 특정 사용 사례에 맞게 Material 특성 또는 생동감 스타일을 일치시키세요. 예를 들어, 비전OS 앱의 대화형 구성 요소를 강조하려면 밝은 Material 특성을 사용하고, macOS 앱의 메뉴에는 [menu](https://developer.apple.com/documentation/appkit/nsvisualeffectview/material/menu) Material 특성을, iOS 앱의 기본 레이블에는 [label](https://developer.apple.com/documentation/uikit/uivibrancyeffectstyle/label) 생동감 스타일을, tvOS 앱의 적응형 전체 화면 배경에는 [prominent](https://developer.apple.com/documentation/uikit/uiblureffect/style/prominent) Material 특성을 사용하세요. 21 | 22 | - #### Material 특성 위에 강조 색상을 사용하여 가독성을 높일 수 있습니다. 23 | 시스템에서 정의한 생생한 색상을 사용하면 다양한 상황에서 색상이 너무 어둡거나, 밝거나, 채도가 높거나, 대비가 낮게 보일까 걱정할 필요가 없습니다. 예를 들어, iOS에서는 텍스트, 채우기, 기호 및 구분 기호에 대해 동적 시스템 색상을 정의하여 반투명 배경에서 이러한 항목이 멋지게 보이도록 합니다. macOS에서는 모든 표준 시스템 색상에 생생한 버전이 있습니다. 비전OS에서는 macOS에서 사용하는 것과 동일한 어둡고 생생한 색상을 사용하여 다양한 시각적 컨텍스트에서 대비를 유지하도록 자동으로 조정합니다. 자세한 지침은 [색상](https://developer.apple.com/design/human-interface-guidelines/color)을 참조하세요. 24 | 25 | - #### 흐림 및 생동감 효과와 결합할 Material을 선택할 때는 대비와 시각적 분리를 고려하세요. 26 | 27 | 예를 들어 다음과 같이 생각해 보세요: 28 | 29 | 두꺼운 Material 특성은 텍스트 및 미세한 특징이 있는 기타 요소에 더 나은 대비를 제공할 수 있습니다. 30 | 31 | 반투명은 배경에 있는 콘텐츠를 눈에 잘 띄게 하여 사람들이 맥락을 유지하는 데 도움이 될 수 있습니다. 32 | 33 | 시스템에서는 콘텐츠를 방해하지 않으면서 깊이감과 계층 구조를 전달하는 데 사용할 수 있는 여러 가지 Material 특성을 제공합니다. 일부 Material은 다크/라이트 모드에 맞게 조정되며 일부 Material은 항상 밝거나 항상 어둡습니다. 어떤 재질을 선택하든 그 위에 생동감 없는 색상을 사용하지 않는 것이 좋습니다. 34 | 35 | 개발자 지침은 [UIBlurEffect.Style](https://developer.apple.com/documentation/uikit/uiblureffect/style)을 참조하십시오. 36 | 37 | ### 플랫폼별 고려사항 38 | 39 | ### iOS, iPadOS 40 | 41 | iOS 및 iPadOS는 각 Material에 맞게 특별히 설계된 레이블, 채우기 및 구분 기호에 대한 생동감 값을 정의하며, 표준 시스템 색상은 생동감(vibrant) 버전으로 제공되지 않습니다. 42 | 43 | 레이블과 색상 채우기 요소는 각각 여러 단계의 생동감을 제공하며 구분선은 한 단계의 생동감을 제공합니다. 레벨의 이름은 요소와 배경 사이의 상대적인 대비 정도를 나타냅니다: 기본 수준은 대비가 가장 높은 반면, 4번째 단계(존재하는 경우)는 대비가 가장 낮습니다. 44 | 45 | 4번째 단계를 제외한 모든 자료의 레이블에 다음 생동감 값을 사용할 수 있습니다. 일반적으로 얇거나 매우 얇은 재질에는 대비가 너무 낮으므로 4번째 단계를 사용하지 않는 것이 좋습니다. 46 | 47 | 1. [UIVibrancyEffectStyle.label](https://developer.apple.com/documentation/uikit/uivibrancyeffectstyle/label) (기본 값) 48 | 49 | 2. [UIVibrancyEffectStyle.secondaryLabel](https://developer.apple.com/documentation/uikit/uivibrancyeffectstyle/secondarylabel) 50 | 51 | 3. [UIVibrancyEffectStyle.tertiaryLabel](https://developer.apple.com/documentation/uikit/uivibrancyeffectstyle/tertiarylabel) 52 | 53 | 4. [UIVibrancyEffectStyle.quaternaryLabel](https://developer.apple.com/documentation/uikit/uivibrancyeffectstyle/quaternarylabel) 54 | 55 | 모든 Material 특성의 색상 채우기 요소에 다음 vibrant(강조) 색상값을 사용할 수 있습니다. 56 | 57 | 1. [UIVibrancyEffectStyle.fill](https://developer.apple.com/documentation/uikit/uivibrancyeffectstyle/fill) (기본 값) 58 | 59 | 2. [UIVibrancyEffectStyle.secondaryFill](https://developer.apple.com/documentation/uikit/uivibrancyeffectstyle/secondaryfill) 60 | 61 | 3. [UIVibrancyEffectStyle.tertiaryFill](https://developer.apple.com/documentation/uikit/uivibrancyeffectstyle/tertiaryfill) 62 | 63 | 시스템은 모든 Material 특성에서 어울리는 구분자(separator)에 사용하기 위한 기본 vibrant 값을 제공합니다. 64 | 65 | ### macOS 66 | 67 | macOS는 모든 표준 색상의 생생한 버전을 제공하며, 인터페이스에 적용되는 반투명도, 흐림 및 생동감의 정도를 정의하는 Material을 제공합니다. 시스템에서는 각각 지정된 용도가 있는 여러 가지 표준 재질을 제공합니다. 예를 들어 창, 메뉴, 팝오버, 사이드바, 제목 표시줄 등의 기본 모양과 일치하는 재질을 선택할 수 있습니다. 개발자 가이드는 [NSVisualEffectView.Material](https://developer.apple.com/documentation/appkit/nsvisualeffectview/material)을 참조하세요. 68 | 69 | 70 | | 라이트 모드 | 다크 모드 | 71 | | -------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | 72 | | ![The sidebar, window background, and selection materials display different amounts of transparency and blending in a light appearance.](https://docs-assets.developer.apple.com/published/904108c5cb735b367707dc286d473417/macos-light-appearance@2x.png) | ![The sidebar, window background, and selection materials display different amounts of transparency and blending in a dark appearance.](https://docs-assets.developer.apple.com/published/dbf9234c84a8b4193936b2336a2b9165/macos-dark-appearance@2x.png) | 73 | 74 | 75 | 76 | #### 사용자 지정 보기 및 제어에서 생동감(vibrant)을 허용할 시기를 선택하세요. 77 | 구성 및 시스템 설정에 따라 시스템 보기 및 컨트롤은 vibrant을 사용하여 전경 콘텐츠를 어떤 배경에서도 돋보이게 합니다. 다양한 상황에서 인터페이스를 테스트하여 vibrant 요소가 언제 외관을 개선하고 사용자 경험을 향상 시키는지 확인해 보세요. 78 | 79 | #### 인터페이스 디자인을 보완하는 배경 블렌딩 모드를 선택하세요. 80 | macOS는 배경 콘텐츠를 블렌딩하는 두 가지 모드, 즉 behind window / within window 을 정의합니다. 개발자 지침은 [NSVisualEffectBlendingMode](https://developer.apple.com/documentation/appkit/nsvisualeffectblendingmode)를 참조하십시오. 81 | 82 | ![](https://docs-assets.developer.apple.com/published/288b0f72176d3b99b5a453c0c51619e7/macos-behind-window-blending~dark@2x.png) 83 | 84 | #### Behind window 블렌딩 모드 85 | 86 | 이 모드에서는 창 뒤의 콘텐츠가 표시되어 사람들이 앱이나 게임을 둘러싼 컨텍스트의 일부를 유지할 수 있습니다. 메뉴, 시트, 사이드바 등의 컴포넌트는 이 모드를 자동으로 사용합니다. 87 | 88 | 89 | ![](https://docs-assets.developer.apple.com/published/93a6509635727880b77d6d72863511e4/macos-in-window-blending~dark@2x.png) 90 | 91 | #### In-window 블렌딩 모드 92 | 93 | 이 모드를 사용하면 창 콘텐츠를 다른 창 구성 요소를 통해 표시할 수 있습니다. 예를 들어, 툴바에서 이 모드를 사용하면 콘텐츠가 툴바 아래로 스크롤될 때 연속성을 느낄 수 있습니다. 94 | 95 | 96 | 97 | https://developer.apple.com/design/human-interface-guidelines/materials#tvOS 98 | 99 | 100 | ### tvOS 101 | 102 | #### 더 밝고 반투명한 소재를 사용하여 콘텐츠를 돋보이게 하고 신선한 느낌을 줄 수 있습니다. 103 | 어두운 Material은 그림자를 숨겨 깊이가 줄어들고 콘텐츠를 명확하게 구분하기 어렵게 만드는 경향이 있습니다. 더 무거운 느낌을 주거나 콘텐츠가 오래되었음을 암시하려는 경우 어두운 Material을 사용하는 것이 좋습니다. 104 | 105 | 예를 들어 다음과 같은 방식으로 시스템 자료를 사용하는 것을 고려해 보세요: 106 | 107 | 108 | |Material|권장 |반응형 효과| 109 | |---|---|---| 110 | |Prominent|Full-screen 배경|라이트 모드에서는 밝은 material 효과를 제공하며, 다크 모드에서는 어두운 material 효과를 제공합니다.| 111 | |Regular|화면 컨텐츠를 부분적으로 가리는 overlay 형태|라이트 모드에서는 밝은 material을, 다크 모드에서는 어두운 material을 표기합니다.| 112 | |Extra light|밝은 색상 테마를 사용하는 full-screen 배경 |–| 113 | |Light|밝은 색상 테마를 사용하며, 화면 컨텐츠를 부분적으로 가리는 overlay 형태|–| 114 | |Extra dark|다크 색상 테마를 사용하는 full-screen 배경|–| 115 | |Dark|다크 색상 테마를 사용하며, 화면 컨텐츠를 부분적으로 가리는 overlay 형태|–| 116 | 117 | ### visionOS 118 | 119 | 비전OS에서 window는 일반적으로 빛, 현재 환경, 가상 콘텐츠, 주변 사물이 잘 보이도록 하여 사용자가 중심을 잡을 수 있도록 도와주는 시스템 타입 재질(Material)인 유리를 사용합니다. 글라스는 배경색 정보의 범위를 제한하는 적응형 재질로, window가 앱 콘텐츠의 대비를 계속 제공하면서 사용자의 물리적 환경과 기타 가상 콘텐츠에 따라 더 밝아지거나 어두워질 수 있도록 합니다. 120 | 121 | 122 | https://github.com/i-colours-u/Human-Interface-Guidelines-KR/assets/60260284/a7201d95-3098-4c1d-ac34-8de1d6298dfb 123 | 124 | > 참고 125 | > 비전OS에는 별도의 다크 모드 설정이 없습니다. 대신, Glass Material는 그 뒤에 있는 물체와 색상의 휘도에 따라 자동으로 조정됩니다. 126 | 127 | ### Window에 불투명한 색상을 사용하지 마세요. 128 | 불투명한 영역은 사람들의 시야를 가려서 답답함을 느끼게 하고 주변의 가상 및 실제 물체에 대한 인식을 떨어뜨릴 수 있습니다. 129 | 130 | ### 필요한 경우 앱에서 시각적 구분을 만들거나 상호 작용을 나타내는 데 도움이 되는 재질(Material)을 선택하세요. 131 | 사용자 지정 컴포넌트를 만들어야 하는 경우 시스템 Material을 지정해야 할 수도 있습니다. 다음 예시를 참고하세요. 132 | 133 | - 밝은 소재는 버튼이나 선택한 항목과 같은 인터랙티브 요소에 주의를 집중시킵니다. 134 | - 어두운 머티리얼은 사이드바 또는 그룹화된 테이블 보기와 같이 앱의 섹션을 시각적으로 구분하는 데 도움이 될 수 있습니다. 135 | - 가장 어두운 머티리얼은 텍스트 필드와 같은 구성 요소에 텍스트 입력을 허용하는 영역임을 나타내는 오목한 모양을 줄 수 있습니다. 136 | 137 | > 참고 138 | >비전OS 앱은 흰색 텍스트도 사용하지만 기본적으로 밝은 색상의 콘텐츠를 사용합니다. 139 | 140 | 141 | 전경(foreground) 콘텐츠가 Material 위에 표시될 때 가독성을 유지하기 위해 비전OS는 텍스트, 기호 및 색상 채우기 요소에 생동감을 적용합니다. 생동감은 가상 환경과 실제 환경 모두에서 빛과 색을 앞으로 끌어내어 깊이감을 향상시킵니다. 142 | 143 | 비전OS는 텍스트, 심볼, 채우기의 계층 구조를 전달하는 데 도움이 되는 세 가지 생동감 값을 정의합니다. 144 | 145 | - 표준 텍스트에는 [`UIVibrancyEffectStyle.label`](https://developer.apple.com/documentation/uikit/uivibrancyeffectstyle/label)을 사용합니다. 146 | - 각주 및 자막과 같은 설명 텍스트에는 [`UIVibrancyEffectStyle.secondaryLabel`](https://developer.apple.com/documentation/uikit/uivibrancyeffectstyle/secondarylabel)을 사용합니다. 147 | - 텍스트의 가독성이 높을 필요가 없는 경우에만 비활성 요소에 [`UIVibrancyEffectStyle.tertiaryLabel`](https://developer.apple.com/documentation/uikit/uivibrancyeffectstyle/tertiarylabel)을 사용합니다. 148 | 149 | ### watchOS 150 | 151 | ### Material을 사용하여 전체 화면 모달 보기에서 컨텍스트를 제공하세요. 152 | 전체 화면 모달 보기는 watchOS에서 일반적이므로 Material 레이어가 제공하는 대비를 통해 앱에서 사용자의 방향을 파악하고 컨트롤 및 시스템 요소를 다른 콘텐츠와 구분할 수 있습니다. 모달 시트의 Material 배경이 기본적으로 제공되는 경우 제거하거나 바꾸지 마십시오. 153 | 154 | --- 155 | 156 | ### 관련 문서 157 | 158 | [Color](./color.md) 159 | [Accessibility](./Accessibility.md) 160 | 161 | 162 | ### 개발자 문서 163 | 164 | [`Material`](https://developer.apple.com/documentation/SwiftUI/Material) — SwiftUI 165 | [`UIVisualEffectView`](https://developer.apple.com/documentation/uikit/uivisualeffectview) — UIKit 166 | [`NSVisualEffectView`](https://developer.apple.com/documentation/appkit/nsvisualeffectview) — AppKit 167 | 168 | 169 | ### 관련 영상 170 | 171 | | What's New in iOS Design | 172 | | ------------------------ | 173 | | ![](https://devimages-cdn.apple.com/wwdc-services/images/48/0F960683-D91F-4CA9-9658-6FBB11F0683D/3272_wide_250x141_1x.jpg) | 174 | 175 | -------------------------------------------------------------------------------- /Technologies/SharePlay.md: -------------------------------------------------------------------------------- 1 | # SharePlay 2 | 3 | [원문 보기](https://developer.apple.com/design/human-interface-guidelines/shareplay) 4 | 5 | ## SharePlay를 사용하면 여러 사람이 FaceTime 통화 또는 메시지 대화 중에 영화 보기, 음악 듣기, 게임 플레이, 화이트보드에 아이디어 스케치 등의 Activity을 공유할 수 있습니다. 6 | 7 | ![](https://i.imgur.com/15h95pt.jpg) 8 | 9 | 이 시스템은 참여하는 모든 기기에서 앱 재생을 동기화하여 모든 사람이 동시에 경험을 즐길 수 있는 원활한 미디어 및 콘텐츠 공유를 지원합니다. visionOS에서 SharePlay는 사람들이 동일한 가상 공간에 함께 있는 동안 이러한 경험을 즐길 수 있도록 지원합니다. 10 | 11 | 누군가가 FaceTime 통화 중에 콘텐츠를 공유하면 시스템은 각 참가자에게 앱을 실행하여 경험을 시작하도록 요청합니다. 참여자가 앱을 설치하지 않은 경우 SharePlay 알림을 통해 앱 스토어에서 앱을 다운로드하도록 유도합니다. 플랫폼별 버전의 앱을 [Universal Purchase](https://developer.apple.com/support/universal-purchase/)로 사용할 수 있도록 설정하면, 사람들은 한 번의 구매로 지원하는 모든 플랫폼에서 앱과 인앱 구매를 사용할 수 있습니다. 12 | 13 | ## Best practices 14 | - ### 앱에서 SharePlay를 지원한다는 사실을 사람들에게 알려주세요. 15 | 사람들은 미디어 재생 경험을 공유할 수 있기를 기대하는 경우가 많으므로 인터페이스에 이 기능을 표시하세요. 예를 들어 SharePlay SF 심볼을 사용하여 앱에서 SharePlay를 지원하는 콘텐츠 또는 경험을 식별할 수 있습니다. 16 | 17 | - ### 앱의 일부에 구독이 필요한 경우 비구독자 참가자가 그룹 Acitivty에 빠르게 참여할 수 있는 방법을 고려하세요. 18 | 예를 들어, 비구독자에게 임시 또는 임시 액세스 권한을 제공하거나 기존 구독자가 친구에게 일회성 패스를 보낼 수 있도록 할 수 있습니다. 가족 구성원이 SharePlay 환경에서 콘텐츠를 쉽게 공유할 수 있도록 [Family Sharing(가족 공유)](https://developer.apple.com/design/human-interface-guidelines/in-app-purchase#Supporting-Family-Sharing)를 지원할 수 있습니다. 사람들이 SharePlay 환경 중에 구독을 시작할 수 있는 경우, 간소화된 버전의 가입 절차를 제시하여 다른 사람들이 기다리지 않고 activity에 참여할 수 있도록 하세요. 자세한 내용은 [Autorenewable subscriptions(자동 갱신 구독)](https://developer.apple.com/design/human-interface-guidelines/in-app-purchase#Autorenewable-subscriptions)을 참조하세요. 19 | 20 | - ### 가능한 경우 PiP(Picture in Picture)를 지원하세요. 21 | iPhone 및 iPad에서는 공유 동영상을 PiP 창에서 열 수 있습니다. Mac에서는 공유 동영상이 백그라운드 창에서 열리며, 사람들이 보고 싶을 때 포어그라운드로 이동할 수 있습니다. 22 | 23 | - ### SharePlay라는 용어를 올바르게 사용하세요. 24 | SharePlay는 "Join SharePlay"와 같이 명사로 사용할 수도 있고, 인터페이스에서 직접 동작을 설명할 때 동사로 사용할 수도 있습니다. 예를 들어, 사람들이 영화 보기 activity을 공유할 수 있는 버튼이나 시트에서 "SharePlay Movie"와 같은 문구를 사용할 수 있습니다. SharePlay에 형용사를 사용하지 마세요. 예를 들어, visionOS 앱에서 `virtual` 또는 `spatial`과 같은 용어를 추가하지 마세요. SharePlay라는 용어를 어떤 식으로든 변경하지 마세요. 예를 들어 SharePlayed, SharePlays 또는 SharePlaying과 같은 변형을 사용하지 마세요. 25 | 26 | ## Sharing activities 27 | `activity`는 앱에서 정의한 공유 가능한 경험 유형입니다. 예를 들어 사람들이 동영상을 볼 수 있는 앱에서는 영화, TV 프로그램, 업로드된 동영상 등 각 유형의 콘텐츠를 보기 위한 별도의 `activity`를 정의하고 각 `activity`에 대해 다른 설명을 표시할 수 있습니다. 앱에 적합한 만큼 다양한 activity를 정의할 수 있습니다.[Inviting Participants to Share an Activity](https://developer.apple.com/documentation/GroupActivities/inviting-participants-to-share-an-activity) 개발자 문서를 참조하세요. 28 | 29 | - ### 각 활동을 간략하게 설명합니다. 30 | 사람들이 activity에 참여하라는 초대를 받을 때 설명은 공유하려는 경험을 이해하는 데 도움이 됩니다. 예를 들어, 동영상 보기 앱은 설명이 포함된 영화 보기를 영화 보기 activity와 연결할 수 있습니다. 이 경우 설명 보기에는 영화 제목, 줄거리 요약 및 포스터 이미지가 표시될 수 있습니다. 간단하고 의미 있는 설명을 잘리지 않도록 충분히 짧게 작성하세요. 31 | 32 | - ### 활동 공유를 쉽게 시작할 수 있도록 합니다. 33 | 사람들이 공유 가능한 activity를 시작할 때 사용할 수 있는 세션이 없는 경우, 그룹 activity를 시작할 수 있는 UI를 표시할 수 있습니다. 그러면 시스템은 사람들에게 경험을 공유할 것인지 아니면 혼자서 계속할 것인지 묻습니다. 34 | 35 | | Choose Content to Use SharePlay | Alert | 36 | | ------------------------------------ | ------------------------------------ | 37 | | ![](https://i.imgur.com/8vUWTRv.png) | ![](https://i.imgur.com/PJuHiMg.png) | 38 | 39 | - ### 활동을 표시하기 전에 사람들이 세션에 참여할 준비를 할 수 있도록 알려주세요. 40 | 예를 들어, 사람들이 참여하기 전에 로그인, 콘텐츠 다운로드 또는 결제를 해야 하는 경우 activity UI를 표시하기 전에 이러한 작업을 수행하는 데 도움이 되는 보기를 표시합니다. 사람들이 그룹 activity에 빠르게 참여할 수 있도록 이러한 작업을 최대한 간단하고 쉽게 만들 수 있도록 하세요. 41 | 42 | - ### 가능하면 공유 활동을 지연시킬 수 있는 앱 작업을 연기하세요. 43 | 예를 들어, 앱에서 참가자의 프로필을 알아야 하는 경우 재생이 일시 중지되거나 완료될 때와 같이 편리한 시간에 이 정보를 요청하는 것이 좋습니다. 44 | 45 | 46 | ## 플랫폼 고려사항 47 | - iOS, iPadOS, watchOS, tvOS, watchOS에는 해당되지 않습니다. 48 | 49 | 50 | ## visionOS 51 | 52 | 사람들은 대부분의 visionOS 앱이 SharePlay를 지원할 것으로 기대합니다. Apple Vision Pro를 착용한 상태에서 사람들은 다른 사람들과 콘텐츠와 활동을 공유하기 위해 FaceTime에서 공간 옵션(Spatial Option)을 선택합니다. 53 | 54 | Shared activity(공유 활동)에서 FaceTime은 각 착용자의 공간 내에 공간 페르소나라고 하는 다른 참가자의 모습을 표시하여 모든 사람이 같은 장소에서 같은 경험을 공유하고 있는 것처럼 느낄 수 있도록 합니다. 55 | 56 | FaceTime에서 경험을 공유하는 동안 사람들은 공간 페르소나를 통해 자연스럽게 서로 상호 작용할 수 있습니다. 예를 들어, 사람들은 다른 사람에게 직접 말하거나 제스처를 취하고, 다른 사람이 자신에게 주의를 기울이고 있는지 알 수 있으며, 어떤 사람이 공유 도구 또는 리소스를 사용하고 있는지 알 수 있습니다. 57 | 58 | visionOS는 `shared context(공유 컨텍스트)` 개념을 사용하여 사람들이 동일한 콘텐츠를 통해 연결되는 동안 다른 사람들과 물리적으로 함께 있다고 느낄 수 있도록 도와주는 공유 활동의 특성을 설명합니다. `shared context(공유 컨텍스트)`는 사람들이 다른 사람들과 같은 것을 경험하고 있다는 확신을 갖도록 도와줍니다. 59 | 60 | 사람들이 진정으로 경험을 공유하고 있다고 느낄 때, 진정성 있고 직관적인 상호작용을 장려할 수 있습니다. 예를 들어, 사람들은 구두 및 비언어적 의사소통을 통해 계획을 세우고, 돌아가며 리소스를 공유할 수 있습니다. 61 | 62 | > 참고 63 | > 64 | > Share activity(공유 활동) 중에 시스템은 착용자에 대한 일부 시각적 세부 정보를 가림으로써 사람들의 프라이버시를 보호합니다. 또한 원하는 경우 공간 페르소나를 조정할 수 있습니다. 시스템은 공간 페르소나를 어깨에 나란히 배치할 수 있고 악수나 하이파이브와 같은 공유 제스처를 지원하지만, 공간 페르소나는 서로 떨어져 있습니다. 65 | 66 | ### 공유 활동에 적합한 공간 페르소나 템플릿을 선택합니다. 67 | 공유 활동을 디자인할 때 공간 페르소나 템플릿을 사용하여 공유 활동 공간에 공간 페르소나를 배치하기 위한 레이아웃을 지정할 수 있습니다. 시스템에서는 side-by-side, surround, conversational 등 세 가지 공간 페르소나 템플릿을 제공합니다. 68 | 69 | side-by-side 템플릿은 참가자를 곡선 세그먼트를 따라 나란히 배치하여 모두 공유 콘텐츠를 향하도록 합니다. side-by-side 템플릿은 모든 사람이 콘텐츠를 잘 볼 수 있으므로 여러 사람이 함께 미디어를 시청하는 데 적합합니다. 이 배열에서는 사람들이 서로 마주 보지 않기 때문에 side-by-side 템플릿은 다른 공간 페르소나 템플릿보다 비언어적 상호 작용을 덜 장려할 수 있습니다. 70 | 71 | ![](https://i.imgur.com/zkRUOtU.jpg) 72 | 73 | 시스템에 적용된 surround 템플릿은 참가자를 중앙의 공유 콘텐츠를 중심으로 배치합니다. 이 공간 페르소나 템플릿은 각 참가자가 다른 각도에서 콘텐츠를 보기 때문에 콘텐츠가 3D일 때 특히 효과적입니다. surround 템플릿에서는 참가자가 테이블 주위에 둘러앉은 것처럼 서로 마주보고 있어 언어적 및 비언어적 상호 작용을 촉진합니다. 74 | 75 | 76 | ![](https://i.imgur.com/YKLgcF9.jpg) 77 | 78 | 또한 대화(conversational) 템플릿은 참가자를 중심점을 중심으로 그룹화하지만 콘텐츠는 중심이 아닌 원을 따라 배치합니다. 이 위치 때문에 모든 사람이 콘텐츠를 동일하게 보는 것은 아니며 모든 사람이 콘텐츠와 상호 작용하는 것이 편리하지 않을 수 있습니다. 앱이 백그라운드에서 음악 재생과 같은 작업을 수행하는 동안 사람들이 함께 있는 경험을 제공하는 경우 대화형 배열을 사용하는 것이 좋습니다. 79 | 80 | ![](https://i.imgur.com/u0f2XFg.jpg) 81 | 82 | 자세한 내용을 확인하려면 [`SystemCoordinator`](https://developer.apple.com/documentation/GroupActivities/SystemCoordinator) 와 [`SpatialTemplatePreference`](https://developer.apple.com/documentation/GroupActivities/SpatialTemplatePreference)을 참조하세요. 83 | 84 | ### Shared Activity로 바로 시작할 수 있도록 준비하세요. 85 | 한 사람이 FaceTime 통화에서 다른 사람과 내 활동을 공유하면 시스템이 자동으로 모든 사람을 위해 앱을 실행하여 마찰을 최소화합니다. 이 시나리오에서는 공유 활동과 관련이 없는 창이 표시되지 않도록 해야 합니다. 예를 들어, 사람들이 활동에 참여하기 전에 로그인을 해야 하는 경우, 이 작업은 사람들이 필요한 입력을 완료하는 즉시 사라지는 자동 해제 가능한 창에 표시해야 합니다. 86 | 87 | ### 사람들이 함께 Shared Activity에 참여할 수 있도록 도와주되, 강제로 참여시키지 마세요. 88 | 한 참가자가 몰입 수준을 변경하면 시스템에서 이를 알려주므로 모든 참가자의 경험을 동기화할 수 있습니다. 동기화하기 전에 참여자의 몰입 수준을 변경하면 현재 작업에 방해가 되는지 확인하고, 방해가 되는 경우 업데이트된 경험에 참여할 수 있는 선택권을 제공하세요. 예를 들어, 누군가가 공유되지 않은 창에서 콘텐츠를 편집하는 경우 전환을 선택할 수 있도록 경고를 표시할 수 있습니다. 자세한 내용은 [Immersive experiences(몰입도 높은 경험)](../Foundations/Immersive-experiences.md)을 참조하세요. 89 | 90 | ### 새 참가자가 참여할 때 Shared activity를 원활하게 업데이트합니다. 91 | 진행 중인 활동에 누군가가 참여하면 다른 모든 사람의 경험을 방해하지 않으면서 이들을 통합해야 합니다. 예를 들어, 공유된 몰입형 콘텐츠를 업데이트하여 모든 참가자가 동기화된 상태를 유지하는 것이 중요합니다. 또한 최대 5명의 참가자를 배치에 수용하고 필요에 따라 참가자의 위치를 업데이트할 수 있는 방법을 설계하는 것도 고려하세요. 92 | 93 | ## 공유된 컨텍스트(context)를 유지하기 94 | 95 | Shared Activity가 전체 공간에서 실행되면 시스템은 단일 좌표계를 사용하여 콘텐츠와 모든 참가자를 정렬하고 각 사람에 대한 앱의 크기, 위치 및 방향을 자동으로 동기화하여 앱이 공유 컨텍스트를 유지하도록 도와줍니다. 여러분은 경험을 공유하는 느낌을 향상시키는 방식으로 객체를 표시하고, 사운드를 재생하고, 상호 작용을 지원할 책임이 있습니다. 96 | 97 | ### 모든 사람이 앱의 동일한 상태를 볼 수 있도록 하세요. 98 | 미니멀 모드와 극장과 같은 시청 모드를 모두 제공하는 미디어 앱과 같이 앱에 두 가지 이상의 상태가 있는 경우, 공유 공간에서 사람들이 함께 있다는 느낌을 감소시킬 수 있으므로 서로 다른 참가자가 서로 다른 상태를 보지 않도록 해야 합니다. 단, 누군가가 일시적으로 공유 활동을 종료해야 하는 경우는 예외입니다. 자세한 내용은 [Adjusting a shared context](https://developer.apple.com/design/human-interface-guidelines/shareplay#Adjusting-a-shared-context)를 참조하세요. 99 | 100 | ### 공간 오디오를 사용하여 공유 활동을 더욱 풍성하게 만드세요. 101 | 공간 오디오를 재생하면 공유 환경의 현실감을 강화하는 데 도움이 될 수 있습니다. 지침은 [Playing audio](../Patterns/Playing-audio.md)를 참조하세요. 102 | 103 | ### 가능하면 사람들이 공유 경험 중에 발생할 수 있는 혼란이나 갈등에 대해 자연스러운 해결책을 찾도록 하세요. 104 | 예를 들어, 한 번에 한 명의 참가자만 가상 도구를 사용할 수 있는 경우, 도구 사용 컨트롤이나 알림과 같은 UI를 표시하지 않고 대신 사람들이 도구를 사용하고자 할 때 그룹에 말하거나 제스처를 취하도록 하세요. 105 | 106 | 공유 활동 중에 여러 사람이 동시에 동일한 콘텐츠를 변경하려고 시도하는 등 충돌이 발생할 수 있는 경우, 마지막 변경자의 행위가 적용되는 것과 같은 간단한 규칙을 구현하고 사람들이 이 규칙을 사용하여 그룹에서 허용되는 행동을 정의할 수 있도록 하는 것이 좋습니다. 107 | 108 | ### 사람들이 비공개 콘텐츠와 공유 콘텐츠를 구분하여 보관할 수 있도록 지원하세요. 109 | 기본적으로 시스템은 공유 창과 공유되지 않는 창을 명확하게 구분합니다. 110 | 111 | 예를 들어, 사람들이 함께 음악을 들을 때 공유된 음악 창은 모든 사람에게 새 창으로 표시되지만, 개인의 열려 있는 라이브러리 창은 공유되지 않고 분리된 상태로 유지됩니다. 112 | 113 | 앱에서 여러 개의 창을 열 수 있는 경우, 사람들이 원하는 창을 공유할 수 있도록 하고 공유된 창과 공유되지 않은 창을 쉽게 구분할 수 있도록 하세요. 114 | 115 | 가능하면 사람들이 공유하려는 콘텐츠를 비공개 창에서 공유 창으로 드래그할 수 있도록 하세요. 116 | 117 | ## 공유된 컨텍스트를 조정하기 118 | 각 참가자가 편안함이나 접근성 등을 위해 자신의 경험을 맞춤 설정할 수 있도록 공유 활동의 공유 컨텍스트를 조정하는 것이 합당한 경우도 있습니다. 119 | 120 | 다른 상황에서는 공유 컨텍스트를 엄격하게 유지하면 사람들의 경험에 대한 즐거움이 감소할 수 있습니다. 121 | 122 | 예를 들어, 콘텐츠에 이상적인 시야각이 하나만 있는 경우 각 참가자는 자신만의 시야각이 필요할 수 있습니다. 123 | 124 | ### 다른 사람의 경험을 변경하지 않고도 사람들이 자신의 경험을 개인화할 수 있도록 하세요. 125 | 예를 들어, 사람들은 보기 및 상호 작용에 접근하기 쉽도록 하거나 자신을 더 편안하게 만들기 위해 볼륨이나 자막과 같은 다양한 설정을 조정해야 할 수 있습니다. 126 | 127 | ### 각 참가자에게 공유 콘텐츠의 고유한 시각 환경을 제공할 타이밍을 고려하세요. 128 | 일부 콘텐츠는 사람들이 특정 관점에서 볼 때 가장 잘 보입니다. 예를 들어, 사람들은 표준 창에서 다른 사람의 공간 페르소나를 볼 수 있는 공간 캡처를 공유할 수 있습니다. 129 | 130 | 하지만 공간 캡처의 깊이를 인식하려면 각 사람이 올바른 각도에서 캡처를 봐야 합니다. 이 시나리오에서는 다른 사람들이 표준 창과 서로를 계속 보는 동안에도 한 사람이 다른 참가자를 숨기고 올바른 시야각을 보장하는 전체 공간으로 일시적으로 전환할 수 있습니다. 131 | 132 | 공유 콘텐츠의 개인별 버전을 제공하는 것이 합리적이라면, 공유 환경을 유지하기 위해 사람들의 위치와 앱 컨텍스트를 계속 동기화해야 합니다. 133 | 134 | ### 사람들이 공유 활동을 쉽게 종료하고 다시 참여할 수 있도록 하세요. 135 | 때때로 사람들은 앱에서 관련 없는 작업을 수행하거나 다른 작업을 수행해야 하거나 물리적 환경에 참여해야 할 수 있습니다. 이러한 경우 사람들이 공유 활동에 빠르게 다시 참여할 수 있는 컨트롤이나 기타 구성 요소를 제공해야 합니다. 136 | 137 | 또한 사람들이 공간 페르소나를 숨기는 동안에도 공유 콘텐츠를 계속 표시하여 진행 중인 공유 경험에 대한 정보를 계속 확인할 수 있도록 할 수 있습니다. 138 | 139 | 140 | 141 | 142 | --- 143 | 144 | 145 | ### 연관 내용 146 | - [Autorenewable subscriptions](https://developer.apple.com/design/human-interface-guidelines/in-app-purchase#Autorenewable-subscriptions) 147 | 148 | ### 개발자 문서 참고 149 | - [GroupActivities](https://developer.apple.com/documentation/GroupActivities) 150 | 151 | ### 영상 152 | 153 | | [Design spatial SharePlay experiences](https://developer.apple.com/videos/play/wwdc2023/10076) | [Design for Group Activities](https://developer.apple.com/videos/play/wwdc2023/10072) | [Bulid custom experiences with Group Activities](https://developer.apple.com/videos/play/wwdc2023/10073) | 154 | | -------- | -------- | -------- | 155 | | ![](https://i.imgur.com/QENBVoV.png)| ![](https://i.imgur.com/ZxPJuww.png)| ![](https://i.imgur.com/iWqgdFQ.png)| 156 | 157 | 158 | 159 | -------------------------------------------------------------------------------- /Patterns/Playing-audio.md: -------------------------------------------------------------------------------- 1 | 2 | # Playing audio 3 | [원문 보기](https://developer.apple.com/design/human-interface-guidelines/playing-audio) 4 | 5 | ### 사람들은 기기에서 상황에 따라 자동으로 조정되는 풍부한 오디오 경험을 기대합니다. 6 | 7 | ![](https://i.imgur.com/L7D2EYU.jpg) 8 | 9 | 장치는 내부 또는 외부 스피커, 헤드폰, Bluetooth 또는 AirPlay를 사용하는 장치를 통한 무선 등 다양한 방법으로 오디오를 재생할 수 있습니다. 10 | 11 | 사람들은 장치에서 소리를 조작하기 위해 볼륨 버튼, iPhone의 벨소리/무음 스위치, 헤드폰 컨트롤, 제어 센터 볼륨 슬라이더, 타사 액세서리의 사운드 컨트롤 등 여러 유형의 컨트롤을 사용합니다. 12 | 13 | 사운드가 사용자 경험의 주요 부분이든 장식용이든, 볼륨과 출력을 변경할 때 사람들이 기대하는 대로 작동하는지 확인해야 합니다. 14 | 15 | 16 | ### Silence 17 | 벨소리나 메시지 수신음과 같은 예기치 않은 소리에 방해받지 않고 싶을 때 사람들은 디바이스를 무음으로 전환합니다. 18 | 19 | 이 시나리오에서는 키보드 클릭 소리, 음향 효과, 게임 사운드트랙, 기타 가청 피드백 등 불필요한 소리도 무음으로 설정합니다. 20 | 21 | 디바이스가 무음 모드에 있으면 미디어 재생, 알람, 오디오/비디오 메시징 등 사용자가 명시적으로 시작한 오디오만 재생합니다. 22 | 23 | ### Volume 24 | 25 | 사람들은 볼륨을 조절하는 방법에 관계없이 볼륨 설정이 음악 및 앱 내 음향 효과를 포함하여 시스템의 모든 사운드에 영향을 미칠 것으로 기대합니다. 26 | 27 | 예외적으로 iPhone의 벨소리 볼륨은 설정에서 별도로 조정할 수 있습니다. 28 | 29 | ### Headphones 30 | 31 | 사람들은 헤드폰을 사용하여 사생활을 보호하고(다른 사람에게 들리지 않도록) 경우에 따라서는 손을 자유롭게 사용할 수 있습니다. 32 | 33 | 헤드폰을 연결할 때 사람들은 중단 없이 사운드가 자동으로 다시 라우팅되고 헤드폰을 분리할 때 재생이 즉시 일시 중지되기를 기대합니다. 34 | 35 | 36 | ## Best practices 37 | 38 | ### 전체 볼륨을 조정하지 말고 필요할 때 자동으로 레벨을 조정하세요. 39 | 앱에서 상대적이고 독립적인 볼륨 레벨을 조정하여 오디오의 훌륭한 믹스를 얻을 수 있지만, 최종 출력은 항상 시스템 볼륨이 결정합니다. 40 | 41 | ### 가능하면 오디오 출력 장치 변경을 지원하세요. 42 | 사람들은 종종 다른 오디오 출력 장치를 선택하고자 합니다. 예를 들어 거실 스테레오, 자동차 라디오 또는 Apple TV를 통해 음악을 듣고 싶을 수 있습니다. 특별한 이유가 없는 한 이 기능을 지원하세요. 43 | 44 | ### 시스템에서 제공하는 볼륨 보기를 사용하여 사람들이 오디오를 조정할 수 있도록 하세요. 45 | 볼륨 view에는 볼륨 레벨 슬라이더와 오디오 출력 경로 변경을 위한 컨트롤이 포함되어 있습니다. 슬라이더의 모양을 사용자 지정할 수 있습니다. [`MPVolumeView`](https://developer.apple.com/documentation/mediaplayer/mpvolumeview) 개발자 문서를 참조하세요. 46 | 47 | ### 앱이나 게임의 사운드 사용 방식에 맞는 오디오 카테고리를 선택하세요. 48 | 선택한 오디오 카테고리에 따라 앱의 사운드가 다른 오디오와 믹스되거나, 앱이 백그라운드에서 재생되거나, 벨소리/무음 스위치를 무음으로 설정하면 중지될 수 있습니다. 49 | 50 | 가급적 앱이 사람들의 기대치를 충족하는 데 도움이 되는 카테고리를 선택하세요. 예를 들어, 필요하지 않은 경우 사람들이 다른 앱에서 듣고 있는 음악을 중단하도록 만들지 마세요. 자세한 내용은 [`AVAudioSession.Category`](https://developer.apple.com/documentation/avfaudio/avaudiosession/category) 개발자 문서를 참조하세요. 51 | 52 | | Category | Meaning | Behavior | 53 | | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------- | 54 | | Solo ambient | 사운드가 필수적인 것은 아니지만 다른 오디오를 중단시킵니다. 예를 들어 사운드트랙이 있는 게임을 들 수 있습니다. | 무음 스위치에 반응합니다. 다른 소리와 섞이지 않습니다. 백그라운드에서 재생되지 않습니다. | 55 | | Ambient | 사운드가 필수적인 것은 아니며 다른 오디오를 중단시키지 않습니다. 예를 들어, 게임 플레이 중에 게임 사운드트랙 대신 다른 앱의 음악을 재생할 수 있는 게임을 예로 들 수 있습니다. | 무음 스위치에 반응합니다. 다른 사운드와 혼합됩니다. 백그라운드에서 재생되지 않습니다. | 56 | | Playback | 사운드는 필수적이며 다른 오디오와 섞일 수 있습니다. 예를 들어, 외국어를 가르치는 오디오북이나 교육용 앱의 경우 사람들이 앱을 종료한 후에도 계속 듣고 싶어할 수 있습니다. | 무음 스위치에 반응하지 않습니다. 다른 소리와 섞일 수도 있고 섞이지 않을 수도 있습니다. 백그라운드에서 재생할 수 있습니다. | 57 | | Record | 소리가 녹음됩니다. 예를 들어 오디오 녹음 모드를 제공하는 노트 필기 앱이 있습니다. 이러한 성격의 앱은 녹음된 노트를 재생할 수 있는 경우 카테고리를 재생으로 전환할 수 있습니다. | 무음 스위치에 반응하지 않습니다. 다른 소리와 섞이지 않습니다. 백그라운드에서 녹음할 수 있습니다. | 58 | | Play and record | 사운드는 녹음과 재생이 동시에 이루어질 수 있습니다. 예를 들어, 오디오 메시징 또는 영상 통화 앱이 있습니다. | 무음 스위치에 반응하지 않습니다. 다른 소리와 섞일 수도 있고 섞이지 않을 수도 있습니다. 백그라운드에서 녹음 및 재생할 수 있습니다. | 59 | 60 | 61 | ### 적절한 경우에만 오디오 컨트롤에 응답하세요. 62 | 사람들은 앱이 포어그라운드에 있든 백그라운드에 있든 관계없이 제어 센터나 헤드폰의 컨트롤 등 앱 인터페이스 외부에서 오디오 재생을 제어할 수 있습니다. 63 | 64 | 앱이 오디오를 적극적으로 재생 중이거나, 오디오 관련 컨텍스트가 명확하거나, Bluetooth 또는 AirPlay를 사용하는 디바이스에 연결되어 있는 경우 오디오 제어에 응답해도 좋습니다. 65 | 66 | 그렇지 않은 경우에는 사용자가 컨트롤을 활성화할 때 다른 앱에서 현재 재생 중인 오디오를 중지하지 않도록 하세요. (웬만해서는 오디오를 중지하지 말라는 뜻) 67 | 68 | ### 오디오 컨트롤의 용도를 변경하지 마세요. 69 | 70 | 사람들은 오디오 컨트롤이 모든 앱에서 일관되게 작동하기를 기대하므로 앱에서 오디오 컨트롤의 의미를 재정의하지 않는 것이 중요합니다. 앱에서 특정 컨트롤을 지원하지 않는 경우 해당 컨트롤에 응답하지 마세요. 71 | 72 | ### 시스템이 지원하지 않는 명령을 제공해야 하는 경우에만 사용자 지정 오디오 플레이어 컨트롤을 만드는 것이 좋습니다. 73 | 예를 들어, 앞으로 또는 뒤로 건너뛰기 위한 사용자 지정 playback 컨트롤을 정의하거나 스포츠 스코어와 같이 재생 중인 오디오와 관련된 콘텐츠를 표시할 수 있습니다. 74 | 75 | 위 기능처럼 특별하게 Feature가 필요한 경우, 커스텀 오디오 플레이어 컨트롤을 만들 수 있음. 76 | 특별히 필요한 경우가 아니라면, 시스템 오디오 컨트롤 기능만 사용해도 충분하다는 뜻. 77 | 78 | ### 앱에서 일시적으로 잠시 재생되는 오디오 재생이 완료되면 다른 앱에 알립니다. 79 | 앱이 다른 앱의 오디오를 일시적으로 중단할 수 있는 경우, 다른 앱이 언제 다시 시작할 수 있는지 알 수 있도록 오디오 세션에 플래그를 지정해야 합니다. [`notifyOthersOnDeactivation`](https://developer.apple.com/documentation/avfaudio/avaudiosession/setactiveoptions/1616603-notifyothersondeactivation) 개발자 문서를 참조하세요. 80 | 81 | 82 | ## Handling interruptions 83 | 대부분의 앱과 게임은 시스템의 기본 중단 동작에 의존하지만, 필요에 따라 이 동작을 사용자 지정할 수 있습니다. 84 | 85 | ### 오디오 세션 중단에 대응하는 방법을 결정합니다 86 | 예를 들어, 앱에서 사람들이 중단을 원하지 않는 녹음 또는 기타 오디오 관련 작업을 지원하는 경우, 사용자가 수락하지 않는 한 수신 전화에 대해 현재 재생 중인 오디오를 중단하지 않도록 시스템에 지시할 수 있습니다. 87 | 88 | 또 다른 예로는 내장 마이크를 사용 중일 때 iPad의 Smart Folio를 닫으면 통화가 종료되어야 하는 VoIP 앱이 있습니다. 89 | 90 | 스마트 폴리오를 닫으면 iPad 마이크가 자동으로 음소거되고 기본적으로 연결된 오디오 세션이 중단됩니다. 91 | 92 | 사용자가 스마트 폴리오를 다시 열 때 VoIP 앱이 오디오 세션을 다시 시작하면 사용자 모르게 마이크 음소거가 해제되어 사용자의 개인 정보가 침해될 위험이 있습니다. 93 | 94 | 오디오 세션 중단을 검사하여 올바른 대응 방법을 결정할 수 있으며, 자세한 내역은 [Handling audio interruptions](https://developer.apple.com/documentation/avfaudio/handling_audio_interruptions) 개발자 문서를 참조하세요. 95 | 96 | ### 중단이 끝나면 오디오 재생을 자동으로 재개할지 여부를 결정합니다. 97 | 때때로 다른 앱의 오디오가 앱에서 재생 중인 오디오를 방해할 수 있습니다. 98 | 99 | 중단은 전화가 걸려오는 경우처럼 다시 시작할 수도 있고, 새 음악 재생 목록을 시작할 때처럼 다시 시작할 수 없는 경우도 있습니다. 100 | 101 | 중단 유형과 앱의 유형을 사용하여 자동으로 재생을 재개할지 여부를 결정합니다. 102 | 103 | 예를 들어, 중단이 발생했을 때 오디오를 재생 중인 미디어 재생 앱은 중단이 끝나면 재생을 계속하기 전에 해당 유형이 재개 가능한지 확인할 수 있습니다. 104 | 105 | 반면 게임은 사용자가 명시적으로 선택하지 않아도 오디오를 재생하므로 자동으로 재생을 재개하기 전에 중단 유형을 확인할 필요가 없습니다. [`shouldResume`](https://developer.apple.com/documentation/avfaudio/avaudiosession/interruptionoptions/1616528-shouldresume) 개발자 가이드 문서를 참조하세요. 106 | 107 | --- 108 | 109 | ### 플랫폼별 고려 사항 110 | ### iOS, iPadOS 111 | 시스템의 사운드 서비스를 사용하여 짧은 소리와 진동을 재생할 수 있습니다. [Audio Services](https://developer.apple.com/documentation/audiotoolbox/audio_services) 개발자 문서를 참조하세요. 112 | 113 | ### macOS 114 | macOS에서는 기본적으로 알림 소리가 다른 오디오와 섞일 수 있습니다. 115 | 116 | ### tvOS 117 | tvOS에서는 사용자가 앱 및 게임 내에서 상호 작용을 통해 오디오를 시작하거나 디바이스 보정을 수행할 때만 시스템이 오디오를 재생합니다. 118 | 119 | 예를 들어, tvOS는 경고나 알림과 같은 구성 요소에 수반되는 사운드를 재생하지 않습니다. 120 | 121 | ### visionOS 122 | 미묘하고 표현력이 풍부한 사운드는 visionOS의 모든 곳에서 사람들이 가상 객체를 보고 제스처를 사용하여 상호 작용할 때 경험을 향상시키고 필수적인 피드백을 제공합니다. 123 | 124 | 이 시스템은 오디오 알고리즘과 사람의 물리적 주변 환경에 대한 정보를 결합하여 스피커뿐만 아니라 공간의 특정 위치에서 나오는 것으로 인식할 수 있는 소리인 공간 오디오를 생성합니다. 125 | 126 | > 중요 127 | > 128 | > 모든 플랫폼에서와 마찬가지로 비전OS에서도 중요한 정보를 소리로만 전달하지 마세요. 항상 사람들이 앱을 이해하는 데 도움이 되는 추가 방법을 제공하세요. 지침은 [Accessibility(접근성)](../Foundations/Accessibility.md)을 참조하십시오. 129 | 130 | visionOS에서는 사용자가 앱 창을 닫으면 지금 재생 중 앱의 오디오 재생이 자동으로 일시 중지되고, 지금 재생 중 앱이 아닌 앱의 오디오는 사용자가 다른 앱으로 시선을 돌리면 사라질 수 있습니다. 131 | 132 | - #### 소리 재생을 선호합니다. 133 | 134 | 사람들은 일반적으로 디바이스를 착용하고 있는 동안에는 소리가 들리기를 원하기 때문에 특히 몰입할 때 소리가 재생되지 않는 앱은 생동감이 없고 심지어 고장난 것처럼 보일 수도 있습니다. 135 | 136 | 디자인 프로세스 전반에 걸쳐 탐색을 돕고 사람들이 앱의 공간적 특성을 이해하는 데 도움이 되는 의미 있는 사운드를 만들 수 있는 기회를 찾아보세요. 137 | 138 | - #### 사용자 지정 UI 요소를 위한 사용자 지정 (커스텀) 사운드를 디자인하세요. 139 | 일반적으로 시스템에서 제공하는 요소는 사람들이 요소를 찾고 상호 작용할 때 피드백을 받을 수 있도록 사운드를 재생합니다. 140 | 141 | 사람들이 사용자 지정 요소와 상호 작용할 수 있도록 피드백을 제공하고 앱의 공간적 경험을 향상시키는 사운드를 디자인하세요. 142 | 143 | - #### 공간 오디오를 사용하면 직관적이고 매력적인 경험을 만들 수 있습니다. 144 | 공간 오디오는 사람들이 주변 어디에서나 들리는 것으로 인식할 수 있기 때문에 몰입형 환경에서 특히 실감나는 경험을 제공하는 데 효과적입니다. 145 | 146 | 주변 오디오는 사람들을 가상 세계에 고정시키는 데 도움이 되는 pervasive 사운드를 제공하며, 오디오 소스가 특정 물체에서 나오는 것처럼 들릴 수 있습니다. 앱의 soundscape을 구축할 때 두 가지 유형(일반 오디오, 공간 오디오)의 오디오를 모두 사용하는 것이 좋습니다. 147 | 148 | > pervasive: 구석구석 스며드는 느낌 149 | > soundscape: 사운드 환경 150 | 151 | - #### 앱 사운드가 발생할 수 있는 장소의 범위를 정의해 보세요. 152 | 공간 오디오는 사람들이 공간에서 정지해 있거나 움직이는 물체 등 소리를 내는 물체의 위치를 찾을 수 있도록 도와줍니다. 153 | 154 | 예를 들어, 오디오가 재생되는 앱 창을 움직이면 사용자가 창을 어디로 이동하든 소리가 창에서 직접 계속 나옵니다. 155 | 156 | - #### 시간이 지남에 따라 사람들이 반복적으로 인식할 수 있는 다양한 소리를 고려해보세요. 157 | 158 | 예를 들어, 가상 키보드 소리의 높낮이와 볼륨을 미묘하게 변화시켜 사람들이 타이핑의 속도와 강약을 자연스럽게 변화시키면서 실제 키보드가 낼 수 있는 다양한 소리를 제안할 수 있습니다. 159 | 160 | 다양한 파일을 생성하는 대신 재생 중에 사운드 파일의 피치와 볼륨을 무작위로 변경하는 것이 소리의 변화를 효과적으로 구현하는 방법입니다. 161 | 162 | 163 | - #### 착용자에게 고정된 사운드를 재생할지 아니면 착용자가 추적하는 사운드를 재생할지 결정합니다. 164 | 사람들은 고정된 사운드를 바라보는 방향이나 움직이는 가상 물체에 관계없이 자신을 향하고 있는 것처럼 인식합니다. 165 | 166 | 반대로 추적 사운드는 특정 물체에서 나오는 것으로 인식하는 경향이 있으므로 물체를 가까이 또는 멀리 이동하면 듣는 소리가 달라집니다. 167 | 168 | 일반적으로 트래킹 사운드를 사용하여 경험의 사실감을 높이고 싶지만, 고정 사운드가 좋은 선택인 경우도 있을 수 있습니다. 169 | 170 | 예를 들어, `Mindfulness` (마음 챙기기 앱) 은 고정 사운드를 사용하여 착용자를 몰입감 있고 평화로운 환경으로 감싸줍니다. 171 | 172 | ### watchOS 173 | watchOS에서는 시스템이 오디오 재생을 관리합니다. 앱이 활성화되어 전경에서 실행되는 동안 짧은 오디오 클립을 재생하거나, 사용자가 손목을 내리거나 다른 앱으로 전환해도 계속되는 긴 오디오를 재생할 수 있습니다. 174 | 175 | [Playing Background Audio](https://developer.apple.com/documentation/watchkit/storyboard_support/playing_background_audio) 개발자 문서를 참조하세요. 176 | 177 | - #### 미디어 리소스에 권장 인코딩 방식을 사용합니다. 178 | 특히, 데이터 요구량을 줄이면서 좋은 품질의 오디오를 생성하려면 64kbps HE-AAC(고효율 고급 오디오 코딩) 형식을 사용하세요. 179 | 180 | - #### 앱을 종료하지 않고도 현재 재생 중이거나 최근에 재생한 오디오를 제어할 수 있도록 지금 재생 중 보기를 표시하는 것이 좋습니다. 181 | 182 | 시스템에서 제공하는 지금 재생 중 보기는 현재 오디오 소스(사용자의 Apple Watch 또는 iPhone에 있는 다른 앱일 수 있음)에 대한 정보를 표시하고 현재 또는 가장 최근에 사용한 소스를 자동으로 선택합니다. [Adding a Now Playing View](https://developer.apple.com/documentation/watchkit/storyboard_support/adding_a_now_playing_view) 개발자 문서를 참조하세요. 183 | 184 | --- 185 | 186 | ### 연관 내용 187 | - [Playing video](https://developer.apple.com/design/human-interface-guidelines/playing-video) 188 | - [Feedback](https://developer.apple.com/design/human-interface-guidelines/feedback) 189 | 190 | ### 개발자 문서 참고 191 | - [Configuring your app for media playback](https://developer.apple.com/documentation/avfoundation/media_playback/configuring_your_app_for_media_playback) 192 | - [AVAudioSession](https://developer.apple.com/documentation/avfaudio/avaudiosession) 193 | ### 영상 194 | 195 | | [Explore immersive sound design](https://developer.apple.com/videos/play/wwdc2023/10271) | [Principles of spatial design](https://developer.apple.com/videos/play/wwdc2023/10072) | [Immerse your app in Spatial Audio](https://developer.apple.com/videos/play/wwdc2021/10265) | 196 | | -------- | -------- | -------- | 197 | | ![](https://i.imgur.com/v63CeCe.png) | ![](https://i.imgur.com/PD74ZGq.png) | ![](https://i.imgur.com/VKS92Yq.png) | 198 | 199 | 200 | 201 | 202 | 203 | 204 | -------------------------------------------------------------------------------- /Foundations/Images.md: -------------------------------------------------------------------------------- 1 | 2 | ## 모든 디바이스에서 아트워크 이미지가 사용자들에게 멋지게 보이도록 하기 위해 시스템에서 콘텐츠를 표시하는 방법과 적절한 배율로 아트워크를 제공하는 방법을 알아보세요. 3 | 4 | ![A sketch of a photo, suggesting imagery. The image is overlaid with rectangular and circular grid lines and is tinted yellow to subtly reflect the yellow in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/b0a68ac859ddb098858e92609997d307/foundations-images-intro@2x.png) 5 | 6 | ## 해상도 7 | 8 | 장치마다 해상도가 다른 이미지를 표시할 수 있습니다. 예를 들어 2D 디바이스는 화면의 해상도에 따라 이미지를 표시합니다. 9 | 10 | point(단위)는 시각적 콘텐츠가 표시되는 방식에 관계없이 일관성을 유지하는 데 도움이 되는 추상적인 측정 단위입니다. 2D 플랫폼에서 포인트는 디스플레이의 해상도에 따라 달라질 수 있는 픽셀 수에 매핑되며, visionOS에서 point는 시청자와의 거리에 따라 시각적 콘텐츠의 크기를 조정할 수 있는 각도 값입니다. 11 | 12 | 생성한 이미지의 해상도를 식별하려면 배율을 지정합니다. 다양한 해상도의 2D 디스플레이에서 포인트당 픽셀 밀도를 고려하여 배율을 시각화할 수 있습니다. 예를 들어 @1x은 1:1 픽셀 밀도를 나타내며, 여기서 1픽셀은 하나의 포인트와 같습니다. 고해상도 2D 디스플레이는 2:1 또는 3:1과 같이 픽셀 밀도가 더 높습니다. @2x의 배율은 2이고, @3x의 배율은 3입니다. 픽셀 밀도가 높기 때문에 고해상도 디스플레이는 더 많은 픽셀을 가진 이미지를 요구합니다. 13 | 14 | | 1x (10x10) px | 2x (20x2x px) | 3x (30x30 px) | 15 | | ------------- | ------------- | ------------- | 16 | | ![Image of a circle that is in standard resolution at scale factor 1 and has 10 x 10 pixels.](https://docs-assets.developer.apple.com/published/a9b04545f30aff45ca503e263c02d464/image-resolution-1x@2x.png) | ![Image of a circle that is in high resolution at scale factor 2 and has 20 x 20 pixels.](https://docs-assets.developer.apple.com/published/cf203acc0ee6299833fb2e5b5c4a7348/image-resolution-2x@2x.png) | ![Image of a circle that is in high resolution at scale factor 3 and has 30 x 30 pixels.](https://docs-assets.developer.apple.com/published/0de9ee5144fc2278682eb211ac8f571d/image-resolution-3x@2x.png) | 17 | 18 | 19 | ## 이미지 형식 20 | 다양한 유형의 이미지를 만들 때 다음 권장 사항을 고려하세요. 21 | 22 | | 이미지 타입 | 형식 | 23 | | ----------------------------------------------------------------------------- | --------------------------------------------- | 24 | | 비트맵/래스터 작업물 | 인터레이싱 기능이 적용되지 않는 PNG 파일 형식 | 25 | | 24비트 컬러가 필요하지 않은 PNG | 8비트 컬러 팔레트 | 26 | | 사진 | 최적화된 JEPG 파일 또는 HEIC 파일 | 27 | | 평면 아이콘, 인터페이스 아이콘 및 고해상도 스케일링이 필요한 기타 평면 아트워크 | PDF 또는 SVG 파일 28 | 29 | > 인터레이싱: PNG는 기본적으로 인터레이스 기능이 포함되어 있음. 인터레이스는 이미지를 다운로드하거나, 점진적으로 로드 할 때, 이미지 전체 모습 (흐릿하게) 보여줄 수 있는 기능을 의미함. 30 | 31 | 32 | ## Best practices 33 | 34 | 지원하는 모든 디바이스에 대해 앱의 모든 아트워크에 고해상도 이미지를 제공하세요. 프로젝트의 에셋 카탈로그에 각 이미지를 추가할 때 파일 이름에 "@1x", "@2x" 또는 "@3x"를 이름 뒤에 추가하여 해당 이미지의 배율을 식별하세요. 다음 값을 참고하고, 추가적인 배율에 대한 정보를 참고하고 싶다면 [레이아웃](https://developer.apple.com/design/human-interface-guidelines/layout)을 참조하세요. 35 | 36 | | 플랫폼 | 스케일 배율 | 37 | | ------------------------- | ----------- | 38 | | iPadOS, visionOS, watchOS | @2x | 39 | | iOS | @2x, @3x | 40 | | macOS, tvOS | @1x, @2x 41 | 42 | - ### 일반적으로 이미지를 가장 낮은 해상도로 디자인한 후 스케일 업하여 고해상도 에셋을 만듭니다. 43 | 크기 조정이 가능한 벡터화된 도형을 사용하는 경우 제어점을 전체 값으로 배치하여 1배로 깔끔하게 정렬할 수 있습니다. 44 | 45 | 2x와 3x는 1x의 배수이므로 이 위치를 사용하면 더 높은 해상도에서 래스터 그리드에 포인트를 깔끔하게 정렬된 상태를 유지할 수 있습니다. 반대로 도형을 래스터 그리드에 완벽하게 정렬해서 맞추지 않기를 원할 수 있습니다. 예를 들어 그런 경우에는 원을 그리드에 정렬하면 위쪽과 아래쪽이 평평하게 보일 수 있습니다. 46 | 47 | - ### 각 이미지에 색상 프로필(컬러 프로필) 을 포함하세요. 48 | 색상 프로필을 사용하면 앱의 색상이 다양한 디스플레이에서 의도한 대로 표시되도록 할 수 있습니다. 자세한 가이드는 [Color management(색상 관리)](https://developer.apple.com/design/human-interface-guidelines/color#Color-management)를 참조하십시오. 49 | 50 | - ### 항상 다양한 실제 기기에서 이미지를 테스트하세요. 51 | 디자인 혹은 개발 당시에는 보기 좋았던 이미지가 다양한 기기에서 보면 픽셀이 깨지거나 늘어나거나 압축된 것처럼 보일 수 있습니다. 52 | 53 | ## 플랫폼 별 고려사항 54 | 55 | - iOS, iPadOS, macOS는 특별한 해당 사항이 없습니다. 56 | 57 | 58 | ## tvOS 59 | 60 | 레이어드 이미지(Layered Image)는 Apple TV 사용자 경험의 핵심입니다. 이 tvOS 시스템은 레이어드 이미지, 투명도, 크기 조정 및 모션을 결합하여 사람들이 화면 콘텐츠와 상호 작용할 때 사용자에게 사실감과 생동감을 느낄 수 있는 경험을 전달 할 수 있습니다. 61 | 62 | ### Parallax effect 63 | 64 | `Parallax`는 요소가 초점을 맞출 때 깊이와 역동성을 전달하기 위해 시스템이 사용하는 미묘한 시각 효과입니다. 요소가 초점이 맞춰지면 시스템은 해당 요소를 사용자 앞으로 끌어올려 부드럽게 흔들면서 요소의 표면이 빛나는 것처럼 보이도록 조명을 적용합니다. 65 | 일정 시간 동안 활동이 없으면 아웃 포커싱된 콘텐츠는 어두워지고 초점이 맞춰진 요소는 확장됩니다. 66 | 67 | 68 | ### Layered Images 69 | `Layered Images`는 2~5개의 서로 다른 레이어가 모여 하나의 이미지를 형성합니다. 투명도 사용과 함께 레이어 간의 분리는 깊이감을 만들어냅니다. 사용자가 이미지와 상호 작용할 때 표면에 가까운 레이어가 위로 올라가고 크기가 조정되며, 낮은 레이어가 멀리 떨어진 레이어와 겹쳐져 3D 효과를 만들어냅니다. 70 | 71 | > 중요 72 | > 73 | > tvOS [앱 아이콘](./App-icons.md)은 레이어 이미지를 사용해야 합니다. [Top Shelf](https://developer.apple.com/design/human-interface-guidelines/top-shelf) 이미지를 포함하여 앱에서 초점을 맞출 수 있는 다른 이미지의 경우 레이어드 이미지를 사용하는 것이 좋지만 필수가 아니고 선택 사항입니다. 74 | 75 | 76 | #### 표준 인터페이스 요소를 사용하여 레이어드 이미지를 표시합니다. 77 | 표준 보기와 시스템에서 제공하는 포커스 API(예: [`FocusState`](https://developer.apple.com/documentation/SwiftUI/FocusState))를 사용하면 레이어 이미지에 초점을 맞출 때 자동으로 시차 처리가 적용됩니다. 78 | 79 | #### Foreground, middle 및 background 요소를 식별하세요. 80 | - foreground 레이어에는 게임 속 캐릭터나 앨범 표지 또는 영화 포스터의 텍스트와 같이 눈에 띄는 요소를 표시합니다. 81 | - middle 레이어는 그림자와 같은 보조 콘텐츠 및 효과에 적합합니다. 82 | - background 레이어는 foreground 레이어와 middle 레이어를 돋보이게 하는 불투명한 배경입니다. 83 | 84 | #### 일반적으로 텍스트는 foreground에 배치합니다. 85 | 텍스트를 가리고 싶지 않다면 선명하게 보이도록 foreground 레이어로 가져와야 합니다. 86 | #### Background 레이어는 불투명하게 유지합니다. 87 | 다양한 수준의 불투명도를 사용하여 콘텐츠가 상위 레이어를 통해 빛나도록 하는 것은 좋지만 background 레이어는 불투명해야 하며 그렇지 않으면 오류가 발생합니다. 불투명한 background 레이어는 아트워크가 시차, 그림자 및 시스템 배경과 함께 멋지게 보이도록 합니다. 88 | 89 | #### 레이어링을 단순하고 섬세하게 유지하세요. 90 | 패럴랙스는 거의 눈에 띄지 않도록 설계되었습니다. 과도한 3D 효과는 비현실적이고 어색해 보일 수 있습니다. 콘텐츠에 생동감을 불어넣고 즐거움을 더하려면 깊이를 단순하게 유지하세요. 91 | 92 | #### 콘텐츠 주변에 Safe Area를 두세요. 93 | 초점과 시차를 적용하면 이미지의 크기와 움직임에 따라 일부 레이어의 가장자리 주변 콘텐츠가 잘리거나 선명하게 보이지 않을 수 있습니다. 기본 콘텐츠가 항상 표시되도록 하려면 가장자리에 너무 가깝게 배치하지 마세요.Safe Area는 이미지 크기, 레이어 깊이 및 움직임에 따라 달라질 수 있으며 foreground 레이어가 background 레이어보다 더 많이 잘릴 수 있다는 점에 유의하세요. 94 | 95 | ![Image of an icon with a dotted line inside the outer border, which indicates the safe zone.](https://docs-assets.developer.apple.com/published/941fcf33660f94464f60403ad7b3dd17/icons-and-images-icon-safe-zone@2x.png) 96 | 97 | #### 항상 레이어 이미지를 미리 테스트 해보세요. 98 | 레이어드 이미지가 Apple TV에서 멋지게 보이도록 하려면 디자인 프로세스 전반에 걸쳐 Xcode, macOS용 Parallax Previewer 앱 또는 Adobe Photoshop용 Parallax Exporter 플러그인을 사용하여 이미지를 미리 봅니다. 99 | 크기 조정 및 클리핑이 발생할 때 특히 주의하고, 중요한 콘텐츠를 안전하게 유지하기 위해 필요에 따라 이미지를 재조정하세요. 레이어드 이미지가 최종적으로 완성되면 실제 TV에서 미리 보고 사람들에게 가장 정확하게 표시되는지 확인하세요. 패럴랙스 미리보기 및 패럴랙스 내보내기를 다운로드하려면 [Resources](https://developer.apple.com/design/resources/#tvos-apps)를 참조하세요. 100 | 101 | > 이미지 클리핑: 이미지가 일정 범위를 벗어나서 잘려보이는 현상 102 | 103 | #### 초점이 맞지 않은 상태와 초점이 맞춰진 상태를 모두 사용하여 레이어 이미지의 적절한 크기를 결정합니다. 104 | 패럴랙스 효과를 적용하는 동안 시스템에서 background 레이어가 약간 잘릴 수 있으므로 필수 콘텐츠는 Safe Area 내에 유지하고 콘텐츠가 보기 좋게 보이도록 추가 공간을 확보하세요. 105 | 106 | 107 | 108 | ![Diagram of a layered image, which shows the outermost, actual size, the inner focused or safe zone size, and the innermost unfocused size. The diagram also shows the 35 point side margins between the unfocused and focused areas.](https://docs-assets.developer.apple.com/published/51bbe8a18e9f50356087bd7b8d9692a4/layered-image-zones@2x.png) 109 | 110 | 다음 공식을 사용하면 초점이 맞지 않을 때 이미지의 크기를 기준으로 레이어 이미지의 크기를 계산할 수 있습니다. 111 | 112 | | 이미지 Side 위치 | Focused/Safe Zone 크기 | 실제 크기 | 113 | | ---------------- | ------------------------------------------- | --------------------------------- | 114 | | 긴 부분 | unfocused 된 영역의 긴 부분+ 70pt | focused된 영역의 긴 부분 * 106% | 115 | | 짧은 부분 | 긴 부분의 크기에 비례 | 긴 부분의 크기에 비례 116 | 117 | 118 | 레이어 이미지를 앱에 포함하거나 런타임에 콘텐츠 서버에서 검색할 수 있습니다. 앱에 포함할 레이어드 이미지를 만들려면 다음 도구 중 하나를 사용합니다: 119 | 120 | - macOS용 Parallax previewer 앱을 사용하세요. 121 | - Parallax Previewer는 PNG 파일을 가져와 개별 레이어로 사용할 수 있으며, Parallax Exporter 플러그인으로 생성한 레이어 이미지(.lsr), 레이어 Photoshop 이미지(.psd)도 사용할 수 있습니다. Parallax Previewer는 Xcode 프로젝트로 직접 가져올 수 있는 LSR 파일을 내보낼 수 있습니다. 122 | 123 | - Parallax Exporter Adobe Photoshop 플러그인을 사용하세요. 124 | - 이 플러그인을 사용하여 Photoshop에서 레이어 이미지를 테스트하고 Xcode 프로젝트로 직접 가져올 수 있는 LSR 파일로 내보낼 수 있습니다. 125 | 126 | - Xcode를 사용하세요. 127 | - 표준 PNG 파일을 앱의 에셋 카탈로그로 드래그하여 Xcode에서 이미지 스택의 개별 레이어로 사용할 수 있습니다. 이미지 스택은 LSR 파일로 내보낼 수 있습니다. Xcode에서 LSR 파일을 임포트할 수도 있습니다. 128 | 129 | 130 | 앱이 런타임에 콘텐츠 서버에서 레이어드 이미지를 검색하는 경우 해당 이미지를 런타임 레이어드 이미지(.lcr) 형식으로 제공해야 합니다. 런타임 레이어드 이미지는 직접 생성하지 않고 Xcode에서 제공하는 `layerutil` 명령줄 도구를 사용하여 LSR 파일 또는 Photoshop 파일에서 생성합니다. 런타임 레이어 이미지는 다운로드용이므로 앱 내에 첨부해서는 안됩니다. 131 | 132 | ## visionOS 133 | 비전OS에서 이미지가 차지하는 영역은 일반적으로 사람들이 이미지를 보는 거리와 각도에 따라 시스템이 동적으로 크기를 조정할 때 달라집니다. 즉, 다른 플랫폼에서처럼 이미지가 화면 픽셀과 1:1로 정렬되지 않습니다. 134 | 135 | - 비전OS 앱 아이콘을 위한 다층 이미지를 만듭니다. 136 | - 자세한 가이드는 [앱 아이콘](./App-icons.md) 문서를 참조하세요. 137 | 138 | - 벡터 기반 아트워크를 권장합니다. 139 | - 비트맵 콘텐츠는 시스템에서 확장할 때 보기 좋지 않을 수 있으므로 피하십시오. 핵심 애니메이션 레이어를 사용하는 경우 개발자 지침은 [Drawing sharp layer-based content in visionOS](https://developer.apple.com/documentation/visionOS/drawing-sharp-layer-based-content)를 참조하세요. 140 | 141 | - @2x 이미지 만들기를 권장합니다. 142 | - 고해상도를 사용하면 시스템에서 이미지 크기를 조정할 때 이미지가 선명하게 표시되는 데 도움이 됩니다. 자세한 내용은 [Scale](https://developer.apple.com/design/human-interface-guidelines/spatial-layout#Scale)을 참조하십시오. 143 | 144 | 145 | ## watchOS 146 | 147 | ### - 일반적으로 이미지 파일을 작게 유지하려면 투명도를 피하세요. 148 | 항상 동일한 단색 배경색에 이미지를 합성하는 경우 이미지에 배경을 포함하는 것이 더 효율적입니다. 그러나 컴플리케이션 이미지, 메뉴 아이콘, 템플릿 이미지로 사용되는 기타 인터페이스 아이콘과 같은 경우에는 시스템이 어디에 색상을 적용할지 결정하기 위해 투명도가 필요합니다. 149 | 150 | > 컴플리케이션: 워치 페이스에 추가적인 정보나 기능을 제공하는 작은 위젯 요소 151 | ### - 자동 크기 조정 PDF를 사용하면 모든 화면 크기에 맞는 단일 이미지를 제공할 수 있습니다. 152 | 40mm 및 42mm 화면에 맞게 이미지를 2배로 디자인하세요. PDF를 로드하면 WatchKit은 아래 표시된 값을 사용하여 장치의 화면 크기에 따라 이미지의 크기를 자동으로 조정합니다: 153 | 154 | 155 | 156 | | 스크린 사이즈 | 이미지 배율 | 157 | | ------------- | ----------- | 158 | | 38mm | 90% | 159 | | 40mm | 100% | 160 | | 41mm | 106% | 161 | | 42mm | 100% | 162 | | 44mm | 110% | 163 | | 45mm | 119% | 164 | | 49mm | 119% | 165 | 166 | 167 | --- 168 | ### 연관 문서 169 | - [Apple Design Resources](https://developer.apple.com/design/resources/) 170 | ### 개발자 연관 문서 171 | - [Drawing sharp layer-based content in visionOS](https://developer.apple.com/documentation/visionOS/drawing-sharp-layer-based-content) 172 | - [`UIImageView`](https://developer.apple.com/documentation/uikit/uiimageview) 173 | - [`NSImageView`](https://developer.apple.com/documentation/appkit/nsimageview) 174 | - [`FocusState`](https://developer.apple.com/documentation/SwiftUI/FocusState) 175 | 176 | ### 영상 177 | 178 | | [Get Started with Display P3](https://developer.apple.com/videos/play/wwdc2017/821) | 179 | | ----------------------------------------------------------------------------------- | 180 | | ![](https://devimages-cdn.apple.com/wwdc-services/images/7/09438FDD-3E8B-42A3-A364-78E1A7F2CE6B/1915_wide_250x141_1x.jpg) | 181 | 182 | 183 | 184 | 185 | -------------------------------------------------------------------------------- /Foundations/Inclusion.md: -------------------------------------------------------------------------------- 1 | # Inclusion 2 | ## 많은 사람들을 포용(포괄)할 수 있는 앱(Inclusion App)은 앱과 사용자가 커뮤니케이션 하는 것을 우선시하며, 모든 사람이 이해하고 접근 할 수 있는 컨텐츠를 제공합니다. 3 | 4 | ![A sketch of two people, suggesting inclusion. The image is overlaid with rectangular and circular grid lines and is tinted yellow to subtly reflect the yellow in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/498c87708887321ec79abcf0c45abc66/foundations-inclusion-intro@2x.png) 5 | 6 | > 참고 7 | > 8 | > 문서에서 사용하는 `Inclusion` 이라는 용어를 "포용"으로 해석해서 문서를 작성하였습니다. 9 | 10 | Inclusive(포용적인)한 앱을 디자인하는 데 도움이 되도록 사용하는 단어와 이미지, 제공하는 경험을 검토할 때 다음 목표를 고려하세요. 11 | 12 | 모든 디자인이 그렇듯이 포용적인 앱을 디자인하는 것은 시간이 걸리는 반복적인 과정입니다. 이 과정에서 다른 사람들이 어떻게 생각하고 느끼는지에 대한 가정을 검토할 준비를 하고, 발전하는 지식과 이해에 열린 자세로 임하세요. 13 | 14 | ## 디자인에서의 포용성 15 | 16 | 단순하고 직관적인 경험은 잘 디자인된 앱의 핵심입니다. 직관적인 경험을 디자인하려면 먼저 사람들의 목표와 관점을 조사하여 공감할 수 있는 콘텐츠를 제시해야 합니다. 17 | 18 | 공감은 다양한 관점을 가진 사람들이 여러분이 만든 콘텐츠와 경험에 어떻게 반응할지 이해하는 데 도움이 되므로 앱을 살펴보고 조사하는데 있어서 중요한 도구입니다. 예를 들어, 어떤 관점에서는 앱의 단어나 이미지가 이해할 수 없거나 의도하지 않은 의미를 가지고 있다는 것을 발견할 수 있습니다. 19 | 20 | 각 사람의 관점은 독특하고 역동적인 특징으로 구성되어 있지만, 모든 관점은 모든 사람이 공유하는 다음과 같은 사람의 특성과 경험에서 비롯됩니다: 21 | - 나이 22 | - 성별 및 성 정체성 23 | - 인종 및 민족 24 | - 성적 취향 25 | - 신체적 특성 26 | - 인지적 속성 27 | - 영구적, 일시적 및 상황적 장애 28 | - 언어 및 문화 29 | - 종교 30 | - 교육 31 | - 정치적 또는 철학적 의견 32 | - 사회 및 경제적 맥락 33 | 34 | 다양한 관점에서 앱을 검토할 때 단순히 불쾌감을 줄 수 있는 콘텐츠를 검색하는 것으로만 생각하지 마세요. 어떤 앱도 불쾌감을 주는 자료나 경험을 포함해서는 안 되지만, 불쾌감을 주지 않는 앱이라고 해서 반드시 포용성을 갖춘 앱은 아닙니다. 포용성에 초점을 맞추면 잠재적으로 불쾌감을 줄 수 있는 콘텐츠를 피하는 동시에 모두가 즐길 수 있는 환영하는 경험을 만들 수 있습니다. 35 | 36 | ## 모든 사람에게 포용적인 언어를 사용하세요 37 | 38 | 평이하고 포용적인 언어를 사용하면 모든 사람을 환영하고 앱을 이해하는 데 도움이 됩니다. 앱의 문구를 주의 깊게 검토하여 어조와 단어가 사람들을 배제하지 않는지 확인하세요. 다음은 직접적이고 이해하기 쉬우며 포괄적인 텍스트를 작성하기 위한 몇 가지 팁입니다. 39 | 40 | ### - 다양한 관점에서 텍스트의 어조를 고려하세요. 41 | 글의 스타일은 사용하는 단어만큼이나 많은 것을 전달합니다. 앱마다 서로 다른 커뮤니케이션 스타일을 사용하지만, 사용하는 어투가 의도하지 않은 메시지를 전달하지 않도록 주의하세요. 예를 들어, 학술적인 어조는 앱이 높은 수준의 교육 수준만 환영하는 것처럼 보일 수 있습니다. 앱에 적합한 스타일을 찾을 때 명확하고 직접적이며 존중하는 태도를 유지하는 데 중점을 두세요. 42 | 43 | ### - 사람들을 지칭하는 방식에 주의를 기울이세요. 44 | 일반적으로 'you'과 'your'을 사용하여 사람을 직접 지칭하는 것이 효과적입니다. 사람들을 사용자 또는 회원이라고 간접적으로 지칭하면 앱이 멀고 친근하지 않게 느껴질 수 있습니다. 또한 앱이나 회사를 나타낼 때는 우리, 당사의 등의 단어를 사용하는 것이 좋습니다. 이러한 용어는 모욕적이거나 비하하는 것으로 해석될 수 있는 사람과의 개인적인 관계를 암시할 수 있기 때문입니다. 45 | 46 | ### - 전문 용어나 기술 용어에 대한 정의 없이 사용하지 마세요. 47 | 전문 용어나 기술 용어를 사용하면 글을 더 간결하게 작성할 수 있지만, 그렇게 하면 해당 용어가 무엇을 의미하는지 모르는 사람들이 글을 읽을 수 없게 됩니다. 이러한 용어를 사용해야 하는 경우 먼저 용어를 정의하고 사람들이 그 정의를 쉽게 찾을 수 있도록 하세요. 사람들이 문장에서 전문 용어나 기술 용어의 정의를 알고 있더라도 그 대신 일반 언어를 사용하면 문장을 읽고 번역하기가 더 쉽습니다. 48 | 49 | ### - 구어체 표현을 일반 언어로 바꾸세요. 50 | 구어체 표현은 종종 문화에 따라 다르며 번역하기 어려울 수 있습니다. 더 나쁜 것은 일부 구어체 표현에는 사용자가 모르는 배타적인 의미가 포함되어 있다는 것입니다. 예를 들어, "peanut gallery"와 "grandfathered"라는 표현은 모두 억압적인 맥락에서 생겨났으며 계속해서 사람들을 배제하는 의미를 담고 있습니다. 구어체 표현에 배타적인 의미가 없더라도 해당 표현을 이해하지 못하는 모든 사람을 배제할 수 있습니다. 51 | 52 | 53 | > peanut gallery: 극장에서 가장 싼 좌석을 말하는 미국의 속어 54 | > grandfathered: 예외를 적용받다는 뜻 55 | 56 | ### - 유머를 포함하기 전에 신중하게 고려하세요. 57 | 유머는 매우 주관적이며 구어체 표현과 마찬가지로 문화에 따라 번역하기 어렵습니다. 앱에 유머를 포함하면 유머를 이해하지 못하는 사람들에게 혼란을 주고, 유머를 반복적으로 접하는 사람들을 짜증나게 하며, 유머를 다르게 해석하는 사람들을 모욕할 위험이 있습니다. 추가 지침은 [Writing inclusively(포괄적인 글쓰기)](https://help.apple.com/applestyleguide/#/apdcb2a65d68)를 참조하세요. 58 | 59 | ## 접근하기 쉬운 앱을 만드세요. 60 | 61 | 접근하기 쉬운 앱은 사람들이 특별한 기술이나 지식이 없어도 사용할 수 있으며, 시간이 지남에 따라 이해도를 높일 수 있는 명확한 경로를 제공합니다. 62 | 63 | 앱이 다양하고 강력한 기능을 제공하든 하나의 간단한 작업을 수행하든, 접근성을 높이는 두 가지 방법은 다음과 같습니다. 64 | 65 | ### - 명확하고 직관적인 인터페이스를 제공하세요. 66 | 각 플랫폼의 다른 앱과 잘 어울리는 간단한 인터페이스를 디자인하는 데 도움이 필요하면 [Designing for visionOS](https://developer.apple.com/design/human-interface-guidelines/designing-for-visionos), [Designing for iOS](https://developer.apple.com/design/human-interface-guidelines/designing-for-ios), [Designing for iPadOS](https://developer.apple.com/design/human-interface-guidelines/designing-for-ipados), [Designing for macOS](https://developer.apple.com/design/human-interface-guidelines/designing-for-macos), [Designing for watchOS](https://developer.apple.com/design/human-interface-guidelines/designing-for-watchos), [Designing for tvOS](https://developer.apple.com/design/human-interface-guidelines/designing-for-tvos)을 참조하세요. 67 | 68 | 앱 사용 방법을 학습할 수 있는 방식으로 설계하세요. 앱을 처음 사용하는 사람들이 원하는 콘텐츠로 바로 건너뛸 수 있도록 단계별로 접근하는 데 도움이 되는 첫 실행 환경을 디자인하는 것을 고려하세요. 지침은 [Onboarding](https://developer.apple.com/design/human-interface-guidelines/onboarding)을 참조하세요. 69 | 70 | ## 성 정체성 71 | 역사를 통틀어 전 세계 문화권에서는 여성과 남성이라는 이분법적 구분을 넘어 확장된 자기 정체성과 표현의 스펙트럼을 인정해 왔습니다. 72 | 73 | 특정 성별에 대한 불필요한 언급을 피함으로써 모든 사람이 앱에서 환영받는다고 느끼도록 도울 수 있습니다. 예를 들어 "You can let a subscriber post his or her recipes to your shared folder"와 같은 문구를 사용하는 레시피 공유 앱의 경우 "Subscribers can post recipes to your shared folder."와 같은 대체 문구를 사용하여 불필요한 성별 언급을 피할 수 있습니다. 수정된 카피는 성 중립적인 명사 '구독자'를 사용할 뿐만 아니라 불필요한 단수 대명사 'his' 및 'her'를 피하여 성별 대명사를 사용하는 언어에 맞게 로컬라이즈할 때 문장을 포괄적으로 유지할 수 있도록 도와줍니다. 74 | 75 | > 참고 76 | > 77 | > 영어 문장의 뉘앙스를 그대로 살리기 위해 문장을 그대로 사용했습니다. 78 | > 한글로 번역하기에는 조금 무리가 있네요. 79 | 80 | 특정 성별에 대한 불필요한 언급의 또 다른 예는 아바타, 이모티콘 또는 글리프 아이콘입니다. 모든 사용자를 환영하려면 사용자를 정확하게 표현하는 아바타와 이모티콘을 만드는 데 필요한 도구를 제공하세요. 일반인을 묘사해야 하는 경우에는 성별이 없는 사람 이미지를 사용하여 일반인이 남자나 여자가 아닌 인간을 의미한다는 메시지를 강조하세요. SF 심볼은 여기에 표시된 그림 및 사람 심볼과 같이 사용할 수 있는 다양한 성별이 지정되지 않은 문양을 제공합니다: 81 | 82 | | 예시 1 | 예시 2 | 예시 3 | 83 | | ------ | ------ | ------ | 84 | | ![A solid silhouette of a person from the shoulders up, within a circle.](https://docs-assets.developer.apple.com/published/22f3909c1b433ca2181d2fdcf193fff7/person-crop-circle@2x.png) | ![Solid silhouettes of three people, with the left silhouette in the foreground and the other two in the background, all from the shoulders up.](https://docs-assets.developer.apple.com/published/5edbc84a409deb59e72f4d780b8e7b94/person-3-fill@2x.png) | ![A solid silhouette of a person standing with an arm raised high on the left side of the image.](https://docs-assets.developer.apple.com/published/ea7ebde0ec424a8dc74961a3670724b2/figure-wave@2x.png) | 85 | 86 | 87 | 88 | 대부분의 앱에서는 사용자의 성별을 알 필요가 없지만, 건강 또는 법적 이유 등으로 인해 이 정보가 필요한 경우에는 비이분법, 자가 식별(self-identify), 명시 거부 등의 포괄적인 옵션을 제공하는 것이 좋습니다. 이러한 상황에서는 사람들이 사용하는 대명사를 지정할 수 있도록 하여 필요할 때 적절하게 대응할 수 있도록 할 수도 있습니다. 89 | 90 | ## 사람 및 설정 91 | 92 | 인간의 다양성을 묘사하는 것은 앱이 모든 사람을 포용할 수 있는 가장 눈에 띄는 방법 중 하나입니다. 사람들이 앱과 관련 자료에서 자신과 비슷한 사람들을 인식할 때, 소외감을 덜 느끼고 본인에게 효과적인 앱이라고 생각할 가능성이 높아집니다. 93 | 94 | 사람을 표현하는 텍스트와 이미지를 만들 때 다양한 인간의 특성과 활동을 묘사하세요. 예를 들어, 피트니스 앱에서는 다양한 인종, 체형, 연령, 신체 능력을 가진 사람들이 운동 동작을 시연하는 모습을 보여줄 수 있습니다. 일반적인 직업을 묘사해야 하는 경우, 남성 의사나 여성 간호사만 보여주는 등 고정관념적인 표현은 피하세요. 95 | 96 | 또한 표시하는 설정과 오브젝트도 검토하세요. 예를 들어, 높은 수준의 부유함을 보여주는 것은 일부 시나리오에서는 합리적일 수 있지만 다른 경우에는 환영받지 못하고 앱이 현실과 동떨어진 것처럼 보일 수 있습니다. 앱에 적합하다면 대부분의 사람들에게 친숙하고 공감할 수 있는 장소, 집, 활동 및 품목을 표시하는 것이 좋습니다. 97 | 98 | ## 고정관념 피하기 99 | 누구나 무의식적으로 편견과 고정관념을 가지고 있으며, 이러한 편견과 고정관념이 자신의 생각에 어떤 영향을 미치는지 알아내는 것은 어려운 일입니다. 포용적 디자인의 목표는 자신의 편견과 일반화를 인식하여 디자인 결정에 영향을 미칠 수 있는 부분을 인식하는 것입니다. 100 | 101 | 예를 들어, 다양한 가족 구성원의 계정 액세스를 관리하는 데 도움이 되는 앱을 생각해 봅시다. 이 앱이 여성, 남성, 친자식 등 가족에 대한 고정관념적인 정의를 사용하는 경우, 텍스트와 이미지에서 이러한 관점을 전달할 가능성이 높습니다. 이 앱은 좁은 개념의 가족을 가정하기 때문에 배제되는 구성원이 발생 할 수 있습니다. 102 | 103 | 계정 액세스 앱의 가정은 명백한 실수처럼 보일 수 있지만, 모든 가정이 그렇게 쉽게 발견되는 것은 아니라는 점을 인식하는 것이 중요합니다. 예를 들어, 사용자가 향후 신원 확인을 위해 답변할 수 있는 보안 질문을 선택하도록 하는 앱을 생각해 보세요: 104 | 105 | - 대학에서 가장 좋아했던 과목은 무엇인가요? 106 | - 첫 번째 자동차의 제조사는 무엇인가요? 107 | - 무지개를 처음 봤을 때 기분이 어땠나요? 108 | 109 | 어떤 관점에서는 이러한 질문이 일상적인 사건을 언급하는 것처럼 보이지만, 모두 모든 사람이 경험하지 못한 경험을 기반으로 합니다. 특정 맥락의 경험을 사용하여 무언가를 전달하는 것은 그 맥락을 공유하지 않는 모든 사람들에게는 쓸모가 없으며, 이 경험을 하지 못한 사람들은 배제됩니다. 110 | 111 | 아래 예시를 통해 보다 보편적인 경험을 물어보는 질문을 만드는데 참고해보세요. 112 | 113 | - 가장 좋아하는 취미가 무엇인가요? 114 | - 첫 번째 친구의 이름은 무엇이었나요? 115 | - 자신을 가장 잘 묘사하는 특성은 무엇인가요? 116 | 117 | 고정관념이나 가정에 근거하여 디자인 결정을 내리면 일반화는 인간의 다양한 관점을 반영할 수 없기 때문에 필연적으로 배제로 이어질 수밖에 없습니다. 가정을 피하고 대신 포용에 초점을 맞추면 모두에게 도움이 되는 경험을 만들 수 있습니다. 118 | 119 | ## 접근성 120 | 포용적인 앱은 모든 사람이 액세스할 수 있습니다. 사람들은 보이스오버, 디스플레이 조정, 자막, 스위치 제어, 화면 말하기와 같은 Apple의 접근성 기능을 사용하여 각자의 필요에 맞게 기기를 맞춤 설정하므로 앱에서 이러한 기능을 지원하는 것이 필수적입니다. 121 | 122 | 또한 장애가 있는 사람이 앱을 사용하지 못할 것이라고 가정하지 않는 것이 중요합니다. 이러한 가정은 앱의 잠재 고객을 제한하는 디자인으로 이어질 수 있습니다. 반대로 각 앱 환경을 접근 가능하게 만드는 데 집중하면 모든 사람이 자신에게 적합한 방식으로 앱의 혜택을 누릴 수 있습니다. 123 | 124 | 모든 사람이 즐길 수 있는 앱을 디자인하려면 다음 사항을 기억하세요: 125 | 126 | - 각 장애는 하나의 스펙트럼입니다. 예를 들어 시각 장애는 저시력부터 전맹까지 다양하며 색맹, 흐릿한 시야, 빛에 대한 민감성, 주변부 시력 상실 등이 포함됩니다. 127 | 128 | - 누구나 장애를 경험할 수 있습니다. 대부분의 사람들이 나이가 들면서 경험하는 장애 외에도 감염으로 인한 단기 청력 상실과 같은 일시적인 장애와 시끄러운 기차 안에서 듣지 못하는 것과 같은 상황적 장애가 있으며, 이러한 장애는 다양한 시기에 모든 사람에게 영향을 미칠 수 있습니다. 129 | 130 | 다양한 능력을 가진 사람들을 환영하는 콘텐츠를 디자인할 때 다음 팁을 고려하세요. 131 | 132 | ### - 장애인을 배제하는 이미지와 언어를 피하세요. 133 | 예를 들어 다양한 사람들을 표현할 때는 장애인을 포함시키고, 장애를 사용하여 부정적인 특성을 표현하는 언어는 피하세요. 134 | 135 | ### - 장애인에 대해 글을 쓸 때는 사람을 우선시하는 접근 방식을 취하세요. 136 | 예를 들어, 장애를 언급하기 전에 개인의 업적과 목표를 먼저 설명할 수 있습니다. 특정 개인이나 커뮤니티에 대해 글을 작성하는 경우 해당 개인이 스스로를 어떻게 식별하는지 알아보고, 자세한 지침은 [Writing about disability(장애에 대한 글쓰기)](https://help.apple.com/applestyleguide/#/apd49cbb2b06)를 참조하세요. 137 | 138 | ### - 단순성과 인지 가능성을 우선시합니다. 139 | 작업을 간단하게 수행할 수 있는 친숙하고 일관된 상호 작용을 선호하고 시각, 청각, 촉각 등 모든 사용자가 콘텐츠를 인지할 수 있도록 하세요. 140 | 141 | 앱 접근성을 높이는 방법에 대해 자세히 알아보려면 [접근성](./Accessibility.md)을 참조하세요. 142 | 143 | ## 언어 144 | 145 | 사람들은 텍스트에 사용할 언어를 선택하고 날짜, 시간, 돈과 같은 값의 서식을 지정할 지역을 선택하여 기기를 맞춤 설정하기를 기대합니다. 전 세계 사용자를 맞이하려면 먼저 앱이 자국어 이외의 언어와 지역을 처리할 수 있도록 준비하고(국제화,internationalization), 특정 지역에 대해 번역된 텍스트와 리소스를 제공해야 합니다. 국제화에 대한 개요는 [Expanding your app to new markets](https://developer.apple.com/localization/)를 참조하고, 현지화에 대한 개발자 지침은 [Localization](https://developer.apple.com/documentation/Xcode/localization)를 참조하세요. 146 | 147 | 포용성에 초점을 맞추면 현지화를 준비하는 데 도움이 될 수 있습니다. 예를 들어, 평이한 언어를 사용하고, 불필요한 성별 참조를 피하고, 다양한 사람들을 표현하고, 고정 관념과 문화권별 콘텐츠를 피하면 더 많은 언어로 현지화된 앱 버전을 만들 수 있는 유리한 위치를 차지할 수 있습니다. 앱의 글리프에 [SF 심볼](https://developer.apple.com/design/human-interface-guidelines/sf-symbols)을 사용하면 로컬라이제이션을 간소화하는 데 도움이 될 수 있습니다. SF 심볼은 다양한 언어별 글리프를 제공할 뿐만 아니라 왼쪽에서 오른쪽 및 오른쪽에서 왼쪽 컨텍스트에서 모두 사용할 수 있는 글리프(아랍 문화권)도 포함합니다(지침은 [Right to left](https://developer.apple.com/design/human-interface-guidelines/right-to-left)을 참조하세요). 148 | 149 | 앱 및 관련 콘텐츠를 로컬라이즈할 때 색상을 사용하는 방법도 주의해야 합니다. 색상은 문화에 따라 강한 의미를 갖는 경우가 많으므로 지원하는 각 지역에서 사람들이 특정 색상에 대해 어떻게 반응하는지 파악하는 것이 중요합니다. 예를 들어, 어떤 지역에서는 흰색이 죽음이나 슬픔과 관련이 있는 반면, 다른 지역에서는 순결이나 평화와 관련이 있습니다. 색상을 커뮤니케이션 수단으로 사용하는 경우, 앱의 각 버전에서 선택한 색상이 동일한 의미를 전달하는지 확인해야 합니다. 150 | 151 | ## 플랫폼별 고려사항 152 | - 각 플랫폼 별 특별한 고려사항은 없습니다. 153 | 154 | --- 155 | 156 | ### 연관 문서 157 | - [접근성](./Accessibility.md) 158 | - [Writing about disability(장애에 대한 글쓰기)](https://help.apple.com/applestyleguide/#/apd49cbb2b06) 159 | 160 | ### 개발자 문서 161 | - [Localization](https://developer.apple.com/documentation/Xcode/localization) 162 | 163 | ### 영상 164 | 165 | | [The practice of inclusive design](https://developer.apple.com/videos/play/wwdc2021/10275) | [The process of inclusive design](https://developer.apple.com/videos/play/wwdc2021/10304) | 166 | | ------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------- | 167 | | ![](https://devimages-cdn.apple.com/wwdc-services/images/119/90B67086-3A99-49A5-965A-D35DB6552AE0/5206_wide_250x141_1x.jpg) | ![](https://devimages-cdn.apple.com/wwdc-services/images/119/30932E3E-C589-4804-B16E-D0003DEF0F02/5247_wide_250x141_1x.jpg) 168 | 169 | 170 | 171 | 172 | -------------------------------------------------------------------------------- /Foundations/App-icons.md: -------------------------------------------------------------------------------- 1 | # App Icons 2 | 3 | ## 잘 만든 아이콘은 앱이나 게임의 목적과 개성을 쉽게 전달하고, 사람들이 앱 스토어와 기기에서 제품을 한 눈에 알아볼 수 있도록 도와줍니다. 4 | 5 | ![](https://i.imgur.com/jvSZXsT.png) 6 | 7 | 아름다운 앱 아이콘은 모든 Apple 플랫폼에서 사용자 경험의 중요한 부분이며 모든 앱과 게임에는 반드시 앱 아이콘이 있어야 합니다. 각 플랫폼마다 앱 아이콘의 스타일이 조금씩 다르기 때문에 시각적 일관성과 메시지의 일관성을 유지하면서 다양한 모양과 디테일에 잘 어울리는 디자인을 만들어야 합니다. 각 플랫폼에 맞는 아이콘을 만드는 데 도움이 되는 템플릿을 다운로드하려면 [Apple Design Resources(애플 디자인 리소스)](https://developer.apple.com/design/resources/)를 참조하세요. 다른 유형의 아이콘을 만드는 방법에 대한 지침은 [Icons](https://developer.apple.com/design/human-interface-guidelines/icons) 문서를 참조하세요. 8 | 9 | ## Best practices 10 | 11 | - ### 단순함을 유지하세요. 12 | 단순한 아이콘은 사람들이 이해하고 인식하기 쉬운 경향이 있습니다. 앱이나 게임의 본질을 파악할 수 있는 컨셉이나 요소를 찾아 아이콘의 초점으로 삼고 이를 단순하고 독특한 방식으로 표현하세요. 너무 많은 디테일을 추가하면 식별하기 어렵습니다. 13 | 14 | 특히 작은 크기에서는 아이콘이 흐릿하게 보일 수 있으므로 작은 사이즈는 피하세요. 아이콘 전체를 콘텐츠로 채울 필요 없이 기본 이미지에 중점을 두는 단순한 배경을 선호합니다. 15 | 16 | - ### 모든 플랫폼에 친화적인 앱 아이콘을 만드세요. 17 | 앱이나 게임이 두 개 이상의 플랫폼에서 실행되는 경우 모든 아이콘에 유사한 이미지와 색상 팔레트를 사용하되 각 플랫폼에 적합한 스타일로 렌더링하세요. 예를 들어, iOS 및 watchOS에서는 Safari 앱 아이콘이 파란색 배경에 흰색과 빨간색 나침반 바늘을 간결한 그래픽 스타일로 표현하고, macOS에서는 동일한 요소를 표시하되 그림자와 디테일을 추가하여 나침반에 사실적인 무게와 질감을 부여합니다. 마찬가지로 visionOS의 Safari 앱 아이콘은 동일한 색 구성표와 콘텐츠를 사용하지만 더욱 정교한 3D 모양을 제공합니다. 18 | 19 | - ### 경험이나 브랜드에 필수적인 부분인 경우에만 텍스트를 포함하는 것이 좋습니다. 20 | 아이콘의 텍스트는 너무 작아서 쉽게 읽을 수 없고, 아이콘이 어수선해 보일 수 있으며, 접근성이나 로컬라이제이션(다국어 처리)을 지원하지 않는 경우가 많습니다. 일부 상황에서는 앱 이름이 아이콘 근처에 표시되어 아이콘 안에 이름을 표시하는 것이 중복되는 경우도 있습니다. 앱 이름의 첫 글자와 같은 심볼을 사용하면 사람들이 앱이나 게임을 인식하는 데 도움이 될 수 있지만, "Watch" 또는 "Play"와 같이 앱으로 무엇을 해야 하는지 알려주는 불필요한 단어나 "New" 또는 "For visionOS"과 같은 상황별 용어는 포함하지 않는 것이 좋습니다. 21 | 22 | - ### 사진보다는 그래픽 이미지를 선호하고 아이콘에 UI 구성 요소를 복제하지 마세요. 23 | 사진은 작은 크기로 볼 때 잘 보이지 않는 디테일로 가득 차 있습니다. 사진을 사용하는 대신 사람들이 주목할 만한 기능을 강조하는 그래픽으로 콘텐츠를 표현하세요. 마찬가지로, 표준 UI 구성 요소(시스템 아이콘)를 복제하거나 앱 스크린샷을 아이콘에 사용하지 마세요. 24 | 25 | - ### 필요한 경우 Spotlight 검색 결과, 설정, 알림 등의 위치에 표시되는 특정 크기에 맞게 아이콘을 최적화하세요. 26 | iOS, iPadOS 및 watchOS의 경우, 1024×1024 픽셀 App Store 아이콘에서 모든 크기를 생성하도록 Xcode를 사용하거나 일부 또는 모든 개별 아이콘 크기에 대한 에셋을 제공할 수 있습니다. macOS 및 tvOS의 경우 모든 크기를 제공해야 하며, visionOS의 경우 단일 1024x1024 픽셀 에셋을 제공해야 합니다. 앱 아이콘의 자체 버전을 생성하는 경우 모든 크기에서 이미지가 뚜렷하게 유지되도록 해야 합니다. 예를 들어, 세밀한 디테일과 불필요한 기능을 제거하여 이미지를 단순화하고 주요 기능을 강조할 수 있습니다. 이러한 변경이 필요한 경우 앱 아이콘이 모든 상황에서 시각적으로 일관성을 유지할 수 있도록 미묘하게 유지하세요. 27 | 28 | ![](https://i.imgur.com/0DED3bK.png) 29 | 30 | 512x512픽셀 Safari 앱 아이콘(왼쪽)은 원형의 눈금 표시를 사용하여 각도를 나타내지만, 16x16픽셀 버전의 아이콘(오른쪽)에는 이 디테일이 포함되어 있지 않습니다. 31 | 32 | - ### 아이콘을 여백 없는 정사각형 이미지로 디자인합니다. 33 | 대부분의 플랫폼에서 시스템은 플랫폼의 미학에 맞게 아이콘 모서리를 자동으로 조정하는 마스크를 적용합니다. 예를 들어, visionOS와 watchOS는 자동으로 원형 마스크를 적용합니다. 시스템에서는 Mac Catalyst로 만든 앱의 아이콘에 둥근 사각형 모양을 적용하지만, macOS 앱 아이콘은 올바른 둥근 모양으로 만들어야 합니다(지침은 [macOS](https://developer.apple.com/design/human-interface-guidelines/app-icons#macOS)를 참조하세요). 각 플랫폼에 맞는 앱 아이콘을 만드는 데 도움이 되는 다운로드 가능한 제작 템플릿은 [Apple Design Resources](https://developer.apple.com/design/resources/)를 참조하세요. 34 | 35 | - ### 앱 아이콘을 바꿀 수 있는 기능 제공도 고려해보세요. 36 | iOS, iPadOS, tvOS 및 visionOS에서는 사용자가 새로운 아이콘 버전을 선택할 수 있으므로 앱 또는 게임과의 연결을 강화하고 경험을 향상시킬 수 있습니다. 예를 들어 스포츠 앱의 경우 팀마다 다른 아이콘을 제공할 수 있습니다. 디자인하는 새로운 앱 아이콘은 콘텐츠 및 경험과 밀접한 관련이 있어야 하며, 사람들이 다른 앱의 아이콘으로 착각하지 않도록 유의해야 합니다. 사람들이 새로운 아이콘으로 전환하고 싶을 때 앱 설정으로 이동하게 설계하세요. 37 | 38 | > 참고 39 | > 40 | > 기본 앱 아이콘과 마찬가지로 대체 앱 아이콘도 앱 심사를 받아야 하며 [App Store Review Guidelines(앱스토어 심사 가이드라인)](https://developer.apple.com/app-store/review/guidelines/#design)을 준수해야 합니다. 41 | 42 | - ### Apple 하드웨어 제품의 모형을 사용하지 마세요. 43 | Apple 제품은 저작권이 있으며 앱 아이콘에 복제할 수 없습니다. 44 | 45 | ## 플랫폼별 고려사항 46 | 47 | ### iOS, iPadOS 48 | - ### 설정 아이콘에 오버레이나 테두리를 추가하지 마세요. 49 | iOS는 모든 아이콘에 1픽셀 획을 자동으로 추가하여 설정의 흰색 배경에 잘 보이도록 합니다. 50 | 51 | ### macOS 52 | 53 | macOS에서 앱 아이콘은 54 | - 둥근 직사각형 모양, 55 | - 정면 원근감 효과, 56 | - 동일한 수평 위치, 57 | - 균일한 그림자 효과 등 58 | 공통된 시각적 속성을 공유합니다. macOS 디자인 언어에 뿌리를 둔 이러한 속성은 사람들이 macOS에서 기대하는 실제와 같은 렌더링 스타일을 보여주면서 조화로운 사용자 경험을 제공합니다. 59 | 60 | - ### 사람들이 앱을 사용하여 무엇을 하는지 전달하기 위해 친숙한 도구를 사용해보세요. 61 | - 앱의 용도에 대한 컨텍스트를 제공하기 위해 아이콘 배경을 사용하여 도구의 환경이나 도구가 영향을 미치는 항목을 묘사할 수 있습니다. 예를 들어, 텍스트 편집 아이콘은 기계식 연필과 줄이 그어진 종이를 결합하여 실용적인 글쓰기 경험을 제안합니다. 도구의 상세하고 사실적인 이미지를 만든 후에는 배경 바로 위에 떠서 아이콘 경계를 약간 넘어 확장하는 것이 효과적입니다. 이 경우 도구가 배경과 시각적으로 통일성을 유지하면서 둥근 직사각형 모양을 압도하지 않도록 하세요. 62 | 63 | ![](https://i.imgur.com/lkydlTh.png) 64 | 65 | 66 | - ### 앱 아이콘에 실제 물체를 묘사하는 경우 실제 재질로 만들어져 있고 실제 질량이 있는 것처럼 보이도록 하세요. 67 | 천, 유리, 종이, 금속과 같은 물질의 특성을 재현하여 물체의 무게와 느낌을 전달하는 것이 좋습니다. 예를 들어, Xcode 앱 아이콘의 망치는 강철 머리와 손잡이 그립이 있는 것처럼 보입니다. 68 | 69 | ![](https://i.imgur.com/bxOZCMC.png) 70 | 71 | 72 | - ### 아이콘 디자인 템플릿에서 그림자를 사용합니다. 73 | 앱 아이콘 [템플릿](https://developer.apple.com/design/resources/#macos-apps)에는 앱 아이콘이 다른 macOS 아이콘과 조화를 이루도록 도와주는 시스템 정의 그림자가 포함되어 있습니다. 74 | 75 | - ### 내부 그림자와 하이라이트를 사용하여 선명도와 사실감을 더하는 것이 좋습니다. 76 | 예를 들어 메일 앱 아이콘은 그림자와 하이라이트를 모두 사용하여 봉투에 사실감을 부여하고 입구가 약간 열려 있음을 나타냅니다. TextEdit 또는 Xcode와 같이 배경 위에 떠 있는 도구가 포함된 아이콘의 경우 내부 그림자를 사용하면 깊이감을 강화하고 도구가 실제처럼 보이게 할 수 있습니다. 광원이 아이콘을 향하고 있고 중앙 바로 위에 위치하며 약간 아래쪽으로 기울어져 있음을 암시하는 그림자와 하이라이트를 사용합니다. 77 | 78 | - ### 앱 아이콘 모양을 만들때, 둥근 테두리가 아닌 다른 모양은 지양해주세요. 79 | - 드물게 기본 앱 아이콘 모양을 미세 조정하고 싶을 수도 있지만, 그렇게 하면 macOS에 어울리지 않는 아이콘이 만들어질 위험이 있습니다. 모양을 변경해야 하는 경우 라운드가 있는 사각형 형태로 만들어주세요. 80 | 81 | ![](https://i.imgur.com/zgFaDlz.png) 82 | - ### 기본 콘텐츠는 아이콘 그리드 경계 영역 안에 유지하고 모든 콘텐츠는 외부 영역 안에 유지합니다. 83 | 아이콘의 기본 콘텐츠가 아이콘 그리드 경계 상자를 벗어나면 아이콘이 어색해 보일 수 있습니다. 아이콘에 도구를 오버레이하는 경우 아래 그림과 같이 도구의 위쪽 가장자리를 바깥쪽 경계 영역(`outer bounding box`)에 맞추고 아래쪽 가장자리를 내부 경계 영역 `inner bounding box`에 맞추는 것이 좋습니다. 격자를 사용하면 아이콘 내에서 항목을 배치하고 원과 같은 중앙의 내부 요소가 시스템의 다른 아이콘과 일관된 크기를 사용하도록 할 수 있습니다. 84 | 85 | ![A diagram that shows various placement lines within a rounded rectangle shape. Centered in the diagram is a grid of horizontal and vertical lines, overlaid with three concentric circles and two diagonal lines. The outer boundary of the grid is a rounded rectangle labeled the icon grid bounding box. Outside the icon grid bounding box are two additional concentric rounded rectangles labeled the inner bounding box and outer bounding box. A long, narrow, shaded lozenge shape is on top of the grid, representing an approximate layout location for a tool. The tool shape extends from the inner bounding box to the outer bounding box, slanting from vertical at about 25 degrees to the right.](https://docs-assets.developer.apple.com/published/353174b1dba1274a8d43713b097862a5/app-icon-layout-guides@2x.png) 86 | 87 | ## tvOS 88 | 89 | tvOS 앱 아이콘은 2~5개의 레이어를 사용하여 사람들이 초점을 맞출 때 깊이감과 생동감을 느낄 수 있습니다. 자세한 내용은 [Layered images](https://developer.apple.com/design/human-interface-guidelines/images#Layered-images)를 참조하세요. 90 | 91 | - ### 적절한 레이어 분리를 사용합니다. 92 | 아이콘에 로고가 포함된 경우 로고와 배경을 분리합니다. 아이콘에 텍스트가 포함된 경우 Parallax Scrolling가 발생할 때 다른 레이어에 가려지지 않도록 텍스트를 전면으로 가져옵니다. 93 | 94 | > Parallax Scrolling: 시차를 이용한 효과, 멀리 있는 물체는 천천히 움직이고, 가까이 있는 물체는 빨리 움직이는 것 처럼 보이는 효과 95 | 96 | 97 | ![](https://i.imgur.com/hp488VZ.png) 98 | 99 | 100 | https://github.com/i-colours-u/Human-Interface-Guidelines-KR/assets/60260284/164d2276-7878-4626-9135-5e548e56c073 101 | 102 | - ### 그라디언트와 그림자는 신중하게 사용하세요. 103 | 배경 그라데이션과 비네팅은 Parallax 효과(시차 효과)와 충돌할 수 있습니다. 그라디언트의 경우 위에서 아래로, 밝은 곳에서 어두운 곳으로 이동하는 스타일을 선호합니다. 그림자는 일반적으로 배경 레이어에 병합되어, 앱 아이콘이 정지되어 있을 때는 보이지 않는 선명하고 딱딱한 색조로 가장 잘 보입니다. 104 | 105 | - ### 다양한 불투명도(opacity level) 수준을 활용하여 깊이감과 생동감을 높일 수 있습니다. 106 | 불투명도를 창의적으로 사용하면 아이콘을 돋보이게 만들 수 있습니다. 예를 들어 사진 아이콘은 중앙 부분을 반투명 조각이 포함된 여러 레이어로 분리하여 디자인에 생동감을 더합니다. 107 | 108 | - ### 홈 화면 아이콘이 safe-zone을 준수하는지 확인하세요. 109 | 초점이 맞고 시차가 있는 동안에는 아이콘의 크기와 이동에 따라 앱 아이콘의 가장자리 주변 콘텐츠가 잘릴 수 있습니다. 아이콘의 콘텐츠가 너무 꽉 잘리지 않도록 하려면 [tvOS app icon sizes](https://developer.apple.com/design/human-interface-guidelines/app-icons#tvOS-app-icon-sizes)에 표시된 대로 약간의 추가 공간을 확보하세요. 110 | 111 | ## visionOS 112 | 113 | 비전OS 앱 아이콘은 원형이며 배경 레이어와 그 위에 한두 개의 레이어가 포함되어 있어 사람들이 볼 때 미묘하게 확장되는 입체적인 개체를 만들어냅니다. 114 | 115 | ![](https://i.imgur.com/ugRvCxQ.png) 116 | 117 | 118 | https://github.com/i-colours-u/Human-Interface-Guidelines-KR/assets/60260284/1c40c82a-2013-49b0-b18a-227edd30c01f 119 | 120 | 이 시스템은 레이어 사이에 깊이감을 전달하기 위해 그림자를 추가하고 상위 레이어의 알파 채널을 사용하여 엠보싱(도드라지는 패턴) 모양을 만들어 앱 아이콘의 시각적 차원을 향상시킵니다. 121 | 122 | 123 | https://github.com/i-colours-u/Human-Interface-Guidelines-KR/assets/60260284/bca5fa55-34fd-4dc3-8507-3ff45a473aab 124 | 125 | - ### 아이콘의 배경 레이어에는 여백이 없고, 투명하지 않은 이미지를 사용하세요. 126 | 반대로 배경 레이어가 아닌 레이어에는 여백이 없는 이미지를 사용하지 마세요. 배경 레이어가 아닌 레이어에 투명한 영역을 사용하면 기본 레이어의 시각적 정보를 볼 수 있습니다. 127 | 128 | - ### 각 레이어를 정사각형 이미지로 제공하세요. 129 | 시스템은 원형 마스크를 사용하여 앱 아이콘의 모든 레이어를 자르므로 이미 잘린 레이어를 제공하면 원하는 결과를 얻지 못합니다. 130 | 131 | 132 | - ### 반투명 영역의 넓은 영역을 사용하지 마세요. 133 | 반투명 픽셀을 사용하여 도형을 anti-alias(계단 현상 제거)하면 잘 작동하지만, 반투명 영역이 크면 알파가 잘 섞이지 않고 시스템에서 제공하는 그림자와 결합하여 어두운 결과를 만들 수 있습니다. 도형에 anti-alias을 적용하지 않는 한, 픽셀을 완전히 불투명하거나 투명하게 유지하세요. 134 | 135 | ![](https://i.imgur.com/p2WPGSL.png) 136 | 137 | 138 | - ### 배경이 아닌 레이어에서는 완전히 불투명하거나 투명한 픽셀로 된 뚜렷한 영역 사이의 가장자리가 잘 정의된 것을 선호합니다. 139 | 배경이 아닌 레이어에 가장자리가 명확하게 정의된 도형이 포함될 때 시스템에서 그려진 하이라이트와 그림자가 가장 잘 보입니다. 테두리 효과가 있는 이미지를 사용하지마세요. 140 | 141 | 142 | ![](https://i.imgur.com/rNeKj77.png) 143 | 144 | 145 | - ### 배경 레이어에 구멍이나 오목한 부분처럼 보이도록 의도된 모양을 추가하지 마세요. 146 | - 시스템에서 추가한 그림자와 반사광으로 인해 이러한 모양이 사라지지 않고 눈에 띄게 될 수 있습니다. 147 | 148 | - ### 배경이 아닌 레이어에서 뚜렷한 도형이나 이미지를 중앙에 가깝게 유지합니다. 149 | 원형 마스크는 도형이나 이미지가 가장자리에 너무 가까울 때 잘려서 도형이 중심에서 벗어난 것처럼 보이고 아이콘의 입체적인 모양이 손상될 수 있습니다. 150 | 151 | - ### 고정된 시점에서 깊이감이 있는 것처럼 보이는 시각적 요소는 피하세요. 152 | 사람들이 레이어 내부 요소의 깊이를 한 가지 관점에서만 인식할 수 있는 경우 아이콘에 초점을 맞추면 이 깊이감이 사라집니다. 레이어 요소의 하단 가장자리를 돌출시키는 방법을 지양해주세요. 해당 방법은 다른 앱 아이콘의 원근감과 충돌하므로 사용하지 마세요. 153 | 154 | - ### 비전OS 앱 아이콘에 커스텀한 광원 효과 또는 그림자를 추가하지 마세요. 155 | 시스템에서 제공하는 시각 효과를 방해할 뿐만 아니라 사용자 지정 광원 효과와 그림자는 고정인 반면에, visionOS는 동적인 효과를 제공합니다. 156 | 157 | ## watchOS 158 | 159 | watchOS 앱 아이콘은 원형이며 함께 제공되는 텍스트가 표시되지 않습니다. 160 | 161 | 162 | ![](https://i.imgur.com/EaoyawM.png) 163 | 164 | - ### 아이콘의 배경에 검은색을 사용하지 마세요. 165 | 검은색 배경을 밝게 하거나 테두리를 추가하여 아이콘이 디스플레이 배경에 섞이지 않도록 합니다. 166 | 167 | ## 아이콘 스펙 168 | 169 | 170 | ### 아이콘 속성 171 | - 모든 플랫폼의 앱 아이콘은 `png` 형식을 사용하며, 다음과 같은 컬러 형식을 지원합니다. 172 | - sRGM (color) 173 | - Gray Gamma 2.2 (grayscale) 174 | 또한 iOS, iPadOS, macOS, tvOS 및 watchOS의 앱 아이콘은 디스플레이 P3(와이드 가멋 색상)를 지원합니다. 175 | 176 | 177 | 178 | 각 플랫폼 별 앱 아이콘 스펙 정보입니다: 179 | 앱 아이콘의 레이어, 투명도 및 corner radius은 플랫폼마다 다를 수 있습니다. 180 | 181 | | 플랫폼 | 레이어 | 투명도 | 에셋 모양 | 182 | | ----------- | ----------- | ------- | ---------------------------- | 183 | | iOS, iPadOS | 단일 레이어 | X | 사각형 | 184 | | macOS | 단일 레이어 | O(가능) | 둥근 사각형 (rounded corner) | 185 | | tvOS | 다중 레이어 | X | 정사각형 | 186 | | visionOS | 다중 레이어 | O(가능) | 사각형 | 187 | | watchOS | 단일 레이어 | X | 사각형 | 188 | 189 | ## 앱 아이콘 사이즈 190 | ### iOS, iPadOS 191 | 앱 스토어에 표시하려면 1024x1024픽셀 크기의 대형 앱 아이콘을 제공해야 합니다. 시스템이 대형 앱 아이콘을 자동으로 축소하여 다른 모든 크기를 생성하도록 하거나 사용자가 직접 여러가지 버전 사이즈에 대해 아이콘을 제공 할 수 있습니다. 192 | 193 | | @2x | @3x (iPhone only) | 사용도 | 194 | | ------- | ----------------- | ----------------------------------------------------- | 195 | | 120x120 | 180x180 | 아이폰 홈스크린 표기용 | 196 | | 167x167 | - | 아이패드 프로 홈스크린 표기용 | 197 | | 152x152 | 0 | 아이패드, 아이패드미니 홈스크린 표기용 | 198 | | 80x80 | 120x120 | 아이폰,아이패드 모든 시리즈 Spotlight 용 | 199 | | 58x58 | 87x87 | 아이폰, 아이패드 모든 시리즈 설정 표기용 | 200 | | 76x76 | 114x114 | 아이폰, 아이패드 모든 시리즈 push alarm 아이콘 표기용 | 201 | 202 | ### macOS 203 | 앱 스토어에 표기하기 위해 1024x1024 사이즈를 사용해야 합니다. 또한 다음 크기의 아이콘도 제공해야 합니다. 204 | 205 | | @1x | @2x | 206 | | ------- | --------- | 207 | | 512x512 | 1024x1024 | 208 | | 256x256 | 512x512 | 209 | | 128x128 | 256x256 | 210 | | 32x32 | 64x64 | 211 | | 16x16 | 32x32 | 212 | 213 | ### tvOS 214 | 앱 스토어용에 표기하기 위해 1280x768 px 사이즈를 사용해야 합니다. 추가적으로 다음 크기의 아이콘도 제공해야 합니다. 215 | 216 | 217 | | @1x | @2x | 사용도 | 218 | | ------- | ----------------- | ---------------------- | 219 | | 400x240 | 800x480 | 홈 스크린 표기용 | 220 | 221 | **홈 화면 아이콘에 safe zone을 허용하는 것이 좋습니다**. 초점이 맞거나 시차가 있을 때 아이콘의 크기와 이동에 따라 앱 아이콘 가장자리 주변의 콘텐츠가 잘릴 수 있습니다. 아이콘의 콘텐츠가 너무 꽉 잘리지 않도록 하려면 약간의 여유 공간을 두는 것이 좋습니다. 222 | 223 | ### visionOS 224 | 홈 뷰에 표기하기 위해 1024x1024 사이즈의 아이콘이 필요합니다. 225 | 226 | ### watchOS 227 | 앱 스토어에 표기하기 위해 1024x1024 사이즈의 아이콘이 필요합니다. 228 | 229 | watch의 모든 기기에 대응하기 위해 다음과 같은 아이콘 사이즈가 필요합니다. 230 | - 시스템을 통해 자동으로 변환할 수 있으며, 231 | - 직접 일일히 각 사이즈별로 이미지를 넣는 것도 가능합니다. 232 | 모든 아이콘 크기는 @2x 픽셀로 표시됩니다. 233 | 234 | | 38mm | 40mm | 41mm | 42mm | 44mm | 45mm | 49mm | 사용도 | 235 | | ------- | ------- | ------- | ------- | ------- | ------- | ------- | ------------------ | 236 | | 80x80 | 88x88 | 92x92 | 80x80 | 100x100 | 102x102 | 108x108 | 홈 스크린 표기용 | 237 | | 48x48 | 55x55 | 58x58 | 55x55 | 58x58 | 66x66 | 66x66 | 알림 메세지 표기용 | 238 | | 172x172 | 196x196 | 196x196 | 196x196 | 216x216 | 234x234 | 258x258 | Short look 표기용 | 239 | 240 | 241 | 해당 워치앱과 연동되는 아이폰 앱이 있다면, 해당 사이즈의 앱 아이콘도 필요합니다. 242 | 243 | | @2x | @3x | 244 | | ----- | ----- | 245 | | 58x58 | 87x87 | 246 | 247 | --- 248 | 249 | ### 연관 문서 250 | - [Apple Design Resources](https://developer.apple.com/design/resources/) 251 | 252 | ### 참고 개발자 문서 253 | - [Configuring your app icon](https://developer.apple.com/documentation/Xcode/configuring-your-app-icon) 254 | 255 | ### 연관 영상 256 | 257 | | [App Icon Design](https://developer.apple.com/videos/play/wwdc2017/822) | 258 | | ----------------------------------------------------------------------- | 259 | | ![](https://i.imgur.com/xgE919x.png) | 260 | 261 | 262 | -------------------------------------------------------------------------------- /Foundations/Icons.md: -------------------------------------------------------------------------------- 1 | 2 | https://developer.apple.com/design/human-interface-guidelines/icons 3 | 4 | ## 아이콘을 효과적으로 사용한다면, 특정 단일 개념을 사람들에게 효과적으로 전달 할 수 있게 됩니다. 5 | 6 | 7 | 8 | ![A sketch of the Command key icon. The image is overlaid with rectangular and circular grid lines and is tinted yellow to subtly reflect the yellow in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/e71f139e5e50d9d10d91830b0af405c1/foundations-icons-intro@2x.png) 9 | 10 | 11 | 12 | 앱과 게임은 사람들이 선택할 수 있는 항목, 동작 및 모드를 이해하는 데 도움이 되는 다양한 간단한 아이콘을 사용합니다. [앱 아이콘](./App-icons.md)은 앱의 개성을 나타내기 위해 그림자, 질감 및 강조와 같은 풍부한 시각적 세부 정보를 사용할 수 있지만, 인터페이스 아이콘은 일반적으로 간결한 모양과 색상의 터치를 사용하여 명확한 개념을 전달합니다. 13 | 14 | 인터페이스 아이콘 또는 글리프 또는 템플릿 이미지라고도 하는 것을 디자인하거나 SF Symbols 앱에서 심볼을 선택하여 필요에 맞게 사용하거나 사용자 정의할 수 있습니다. 인터페이스 아이콘과 심볼 모두 그림자를 정의하기 위해 검은 색과 투명한 색을 사용하며, 시스템은 각 이미지의 검은 영역에 다른 색상을 적용할 수 있습니다. 자세한 내용은 [SF Symbols](https://developer.apple.com/design/human-interface-guidelines/sf-symbols)를 참조하십시오. 15 | 16 | ## Best practices 17 | ### - 인식하기 쉽고, 간결한 디자인을 사용하세요. 18 | 너무 많은 디테일은 인터페이스 아이콘을 혼란스럽거나 읽기 어렵게 만들 수 있습니다. 대부분의 사람들이 빠르게 인식할 수 있는 간단하고 보편적인 디자인을 지향해야 합니다. 일반적으로, 아이콘은 그들이 시작하는 동작이나 표현하려는 내용과 직접적으로 관련된 익숙한 시각적 비유를 사용할 때 가장 잘 작동합니다. 19 | 20 | ### - 앱의 모든 인터페이스 아이콘에서 시각적 일관성을 유지하세요. 21 | 사용자 정의 아이콘만 사용하든지 사용자 정의 아이콘과 시스템 제공 아이콘을 혼합하든지, 앱의 모든 인터페이스 아이콘은 일관된 크기, 디테일 수준, 선 굵기(또는 무게) 및 원근법을 사용해야 합니다. 아이콘의 시각적 무게에 따라 다른 아이콘과 시각적으로 일관되게 보이도록 아이콘의 크기를 조정하는 것을 권장합니다. 22 | 23 | 24 | | ![Diagram of four glyphs in a row. From the left, the glyphs are a camera, a heart, an envelope, and an alarm clock. Two horizontal dashed lines show the bottom and top boundaries of the row and a horizontal red line shows the midpoint. All four glyphs are solid black; some include interior detail lines in white. Parts of the alarm clock extend above the top dashed line because its lighter visual weight requires greater height to achieve balance with the other glyphs.](https://docs-assets.developer.apple.com/published/e879a59791ad2a7f010a675cb1e91294/custom-icon-sizes@2x.png) | ![Diagram of the same four glyphs shown above and the same horizontal dashed lines at top and bottom and horizontal red line through the middle. In this diagram, all four glyphs are solid gray; the interior detail lines are black to emphasize that all lines use the same weight.](https://docs-assets.developer.apple.com/published/88adc00800efc1523a27779b952ab348/custom-icon-line-weights@2x.png) | 25 | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | 26 | | 시각적 일관성을 유지하기 위해, 필요한 대로 개별 아이콘 크기를 조정해주세요. | 같은 weight의 선(stroke)를 사용해서 아이콘을 구성해주세요. | 27 | 28 | 29 | 30 | ### - 일반적으로, 인터페이스 아이콘과 인접한 텍스트의 두께를 일치시켜주세요. 31 | 아이콘 또는 텍스트 중 어느 하나를 강조하려는 경우가 아니라면, 둘 다 동일한 두께를 사용하면 컨텐츠가 일관된 UI와 일관된 강조 수준을 유지할 수 있습니다. 32 | 33 | ### - 필요한 경우, 사용자 정의 인터페이스 아이콘에 패딩을 추가하여 시각적 정렬을 유지하세요. 34 | 특히 비대칭적인 아이콘 중 일부는 기하학적인 중심으로 정렬하는 대신, 시각적으로 중심 정렬하는 것이 더 균형잡힌 모습을 보일 수 있습니다. 예를 들어 아래에 나온 다운로드 아이콘은 아래쪽에 시각적 무게가 더 많기 때문에 기하학적인 중심으로 정렬하는 대신 시각적으로 중심 정렬하는 것이 좋습니다. 35 | 36 | 37 | ![Two images of a white arrow that points down to a white horizontal line segment within a black disk. The image on the right includes two horizontal pink bars — one between the top of the glyph and the top of the disk and the other between the bottom of the glyph and the bottom of the disk — that show the glyph is geometrically centered within the disk.](https://docs-assets.developer.apple.com/published/1c13eed753a1ebcfd6d35929738476c7/asymmetric-glyph@2x.png) 38 | 39 | _비대칭적인 아이콘은 중심에 위치한 것처럼 보일 수 있지만 실제로 그렇지 않을 수도 있습니다._ 40 | 41 | 이러한 경우에는 아이콘의 위치를 약간 조정하여 시각적으로 중심에 위치하도록 할 수 있습니다. 아이콘 주위를 패딩으로 조정해서 (하단 오른쪽에 표시된 아이콘과 같이), 이 아이콘을 기하학적으로 중심 정렬하여 시각적으로 중앙에 배치할 수 있습니다. 42 | 43 | 44 | ![Two images of a white arrow that points down to a white horizontal line segment within a black disk. The image on the left includes the two horizontal pink bars in the same locations as in the previous illustration, but the glyph has been moved up by a few pixels. The image on the right includes a pink rectangle overlaid on top of the glyph to represent a padding area, which includes the extra pixels below the glyph.](https://docs-assets.developer.apple.com/published/c31bce31456820badff997c95db264c6/asymmetric-glyph-optically-centered@2x.png) 45 | 46 | _아이콘을 약간 더 위로 몇 픽셀 이동하면 시각적으로 중심에 위치시킬 수 있으며, 패딩에 포함된 픽셀은 중앙 정렬을 쉽게 할 수 있도록 도와줍니다._ 47 | 48 | 시각적 중앙 정렬을 위한 조정은 일반적으로 매우 작고, 사소 할 수 있지만, 앱의 외관에 큰 영향을 미칠 수 있습니다. 49 | 50 | ![Two images of a white arrow that points down to a white horizontal line segment within a black disk. The glyph on the left is geometrically centered and the one on the right is optically centered.](https://docs-assets.developer.apple.com/published/5d9da37476ee3225a29ce3efbfd86cac/asymmetric-glyph-before-and-after@2x.png) 51 | _왼쪽이 before, 오른쪽이 after 아이콘 예시입니다._ 52 | 53 | 54 | ### - 인터페이스 아이콘의 선택된 상태는(selected) 필요한 경우에만 제공하세요. 55 | 선택 상태를 자동으로 표시하는 컨트롤 및 영역에 사용되는 아이콘에 대해 selected / unselected 상태를 별도로 제공할 필요는 없습니다. 예를 들어, visionOS 및 iOS의 사이드바 및 탭 바, 그리고 macOS의 툴바는 앱의 강조 색상을 적용하거나 배경 외관을 추가하여 자동으로 선택 상태를 나타낼 수 있습니다. 56 | 57 | | ![Two images of a white glyph within a solid rounded rectangle shape. The glyph shows a heart above two horizontal left-aligned lines. On the left, the rounded rectangle is blue; on the right, it’s gray.](https://docs-assets.developer.apple.com/published/be9e174b3988f2938cee0d1233ac976d/selected-deselected-right-2@2x.png) | ![Two images of an envelope glyph. On the left, the glyph uses an almost black stroke and appears within a gray rounded rectangle shape. On the right, the glyph uses a dark gray stroke.](https://docs-assets.developer.apple.com/published/001cf4adccc467ed87102eca849b27b1/selected-deselected-right-1@2x.png) | 58 | | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | 59 | | iOS에서는 탭바 아이콘의 선택 상태는 app 자체의 accent color를 사용합니다. | macOS에서는 selected 상태의 아이콘은 자동으로 어두운 스트로크와, 어두운 백그라운드 색상을 적용합니다 60 | 61 | iOS 또는 visionOS의 툴바나 네비게이션 바에서 selected / unselected 아이콘을 직접 제공하려고 할 수 있지만, 상태에 따라 배경 외관이 변경되는 버튼을 사용하는 것이 더 일반적입니다. 62 | 63 | ### - 포괄적인 디자인을 만드세요. 64 | 특정 성별에 대한 불필요한 참조 없이 인간 모습을 그리는 것을 선호하고, 아이콘이 모든 사람에게 환영받고 이해하기 쉬운 것이 중요합니다. 지침을 위해서 [inclusion](./Inclusion.md) 문서를 참조하세요. 65 | 66 | 67 | ### - 의미 전달에 필수적인 경우가 아니라면 디자인에 텍스트를 포함하지 마세요. 68 | 예를 들어, 텍스트 서식을 나타내는 인터페이스 아이콘에 문자를 사용하는 것은 개념을 가장 직접적으로 전달하는 방법일 수 있습니다. 아이콘에 개별 문자를 표시해야 하는 경우, 지역화(localize)해야 합니다. 텍스트의 일부를 나타내야 하는 경우, 추상적인 표현을 디자인하고, 오른쪽에서 왼쪽으로(아랍권에서는 텍스트가 오른쪽에서 왼쪽) 환경일 때 사용할 반전된 아이콘을 포함하세요. 지침을 위해서 [Right to left](https://developer.apple.com/design/human-interface-guidelines/right-to-left)을 참조하세요. 69 | 70 | #### 예시 71 | | ![A partial screenshot of the SF Symbols app showing the info panel for the character symbol, which looks like the capital letter A. Below the image, the following seven localized versions of the symbol are listed: Latin, Arabic, Hebrew, Hindi, Japanese, Korean, and Thai.](https://docs-assets.developer.apple.com/published/370ee6f0af700e77278bee88e4a934b5/character-in-glyph@2x.png) | ![A partial screenshot of the SF Symbols app showing the info panel for the doc dot plaintext symbol, which looks like three left-aligned horizontal lines inside a rounded rectangle. Below the image, the left-to-right and right-to-left localized versions are shown.](https://docs-assets.developer.apple.com/published/6c9e4d5aaf8ef75e31c7ea322a370a1f/abstract-text-in-glyph@2x.png) | 72 | | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | 73 | | 각 나라에 맞는 문자 아이콘을 사용할 수 있습니다. | 문서 아이콘을 사용할 때, RTL(Right to Left), LTR(Left to right)에 따라 아이콘이 달라질 수 있습니다. 74 | 75 | 76 | 77 | ### - 사용자 정의 인터페이스 아이콘을 만들 때는 PDF 또는 SVG와 같은 벡터 형식을 사용하세요. 78 | 시스템은 벡터 기반의 인터페이스 아이콘을 고해상도 디스플레이에 자동으로 크기 조정하므로 고해상도 버전을 제공할 필요가 없습니다. 반면, 그림자, 질감 및 강조 효과와 같은 효과를 포함하는 앱 아이콘 및 기타 이미지에 사용되는 PNG는 크기 조정을 지원하지 않으므로 각 PNG 기반 인터페이스 아이콘에 대해 여러 버전을 제공해야 합니다. 또는 사용자 정의 SF Symbol을 만들고 해당 심볼의 강조가 인접 텍스트와 일치하도록 크기를 지정할 수 있습니다. 지침을 위해서 [SF Symbols](https://developer.apple.com/design/human-interface-guidelines/sf-symbols)을 참조하세요. 79 | 80 | 사용자 정의 인터페이스 아이콘에 대체 텍스트 레이블을 제공하세요. 대체 텍스트 레이블 또는 접근성 설명은 보이지 않지만 VoiceOver를 통해 화면 상에 있는 내용을 음성으로 설명하므로 시각 장애가 있는 사람들에게 내비게이션을 간편하게 만들어줍니다. 자세한 내용은 [Content descriptions](https://developer.apple.com/design/human-interface-guidelines/accessibility#Content-descriptions)을 참조하세요. 81 | 82 | Apple 하드웨어 제품 모양을 사용한 아이콘을 사용하지 않도록 하세요. 하드웨어 디자인은 자주 변경되며 인터페이스 아이콘 및 기타 콘텐츠가 오래된 것처럼 보이게 할 수 있습니다. Apple 하드웨어를 표시해야 하는 경우 [Apple Design Resources](https://developer.apple.com/design/resources/) 또는 다양한 Apple 제품을 나타내는 SF Symbols에서 제공되는 이미지만 사용하세요. 83 | 84 | ## 플랫폼별 고려사항 85 | 86 | - iOS, iPadOS, tvOS, visionOS, watchOS에 대한 특별한 고려사항은 없습니다. 87 | 88 | ## macOS 89 | 만약 macOS 앱에서 사용자 정의 문서 유형을 사용할 수 있다면, 해당 문서를 나타내는 문서 아이콘을 만들 수 있습니다. 전통적으로, 문서 아이콘은 오른쪽 위 구석이 접힌 종이 조각처럼 보입니다. 이 독특한 외관은 아이콘 크기가 작은 경우에도 사람들이 문서를 앱 및 다른 콘텐츠와 구별할 수 있도록 도와줍니다. 90 | 91 | 지원하는 파일 유형에 대한 문서 아이콘을 제공하지 않는 경우, macOS는 앱 아이콘과 파일의 확장자를 캔버스 위에 합성하여 자동으로 문서 아이콘을 생성합니다. 예를 들어, Preview는 JPG 파일을 나타내기 위해 시스템에서 생성한 문서 아이콘을 사용합니다. 92 | ![An image of the Preview document icon for a JPG file.](https://docs-assets.developer.apple.com/published/4d2bb68768914a965a16d08842109013/doc-icon-generated@2x.png) 93 | 94 | 95 | 어떤 경우에는 앱이 처리하는 파일 유형 범위를 나타내기 위해 일련의 문서 아이콘 세트를 만드는 것이 유용할 수 있습니다. 예를 들어, Xcode는 프로젝트, AR 객체 및 Swift 코드 파일을 구별하는 데 도움을 주기 위해 사용자 정의 문서 아이콘을 사용합니다. 96 | 97 | 98 | | ![Image of an Xcode project document icon.](https://docs-assets.developer.apple.com/published/8094308ae64abe362b2b5fb9ba971adc/doc-icon-custom-1@2x.png) | ![Image of a document icon for an AR object.](https://docs-assets.developer.apple.com/published/268405d8ea0825a3ac4cebaa50314d24/doc-icon-custom-2@2x.png) | ![Image of a document icon for a Swift file.](https://docs-assets.developer.apple.com/published/fa7a4c636ef449243f13f1cbd3324838/doc-icon-custom-3@2x.png) | 99 | | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | 100 | | | | | 101 | 102 | 103 | 104 | 사용자 정의 문서 아이콘을 만들려면 배경 채우기 / 중앙 이미지 / 텍스트의 조합을 사용할 수 있습니다. macOS 11부터 시스템은 이러한 요소들을 필요한 대로 레이어링하고 위치시키며 마스크를 적용하며, 이를 시스템 아이콘과 비슷하게 구석이 접힌 문서 아이콘 모양 위에 합성합니다. 105 | 106 | | ![](https://docs-assets.developer.apple.com/published/2aed446834a2dc6e8275b6bd7a797ca9/doc-icon-parts-background-fill@2x.png) | ![](https://docs-assets.developer.apple.com/published/b59c836903d1b409ab9e21f81762df3e/doc-icon-parts-center-image@2x.png) | ![](https://docs-assets.developer.apple.com/published/b132452b7a66fabbfafc6461763cc179/doc-icon-parts-text~dark@2x.png) | 107 | |--|--|--| 108 | | 배경색 채우기| 중앙에 이미지 배치하기 | 텍스트 | 109 | 110 | 111 | 112 | ![A custom document icon that displays the pink heart and the word heart on top of the pink grid and white EKG line.](https://docs-assets.developer.apple.com/published/d56b7712318a95ad77f000c052a852aa/doc-icon-parts@2x.png) 113 | 114 | macOS 11은 제공한 요소들을 결합하여 사용자 정의 문서 아이콘을 생성합니다. 115 | 116 | [Apple Design Resources](https://developer.apple.com/design/resources/#macos-apps)는 문서 아이콘을 만들기 위해 사용할 수 있는 배경 채우기 및 중앙 이미지를 만들기 위한 템플릿을 제공합니다. 이 템플릿을 사용하면 아래의 지침을 따를 수 있습니다. 117 | 118 | ### - 문서 유형을 명확하게 전달하는 간단한 이미지를 디자인하세요. 119 | 배경 채우기, 중앙 이미지를 둘 다 사용하더라도, 복잡하지 않은 형태와 구분되는 색상 팔레트를 선호하세요. 문서 아이콘은 최소한 16x16 픽셀 크기로 표시될 수 있으므로 모든 크기에서 인식할 수 있는 디자인을 만들어야 합니다. 120 | 121 | ### - 배경 채우기 및 표현력 있는 이미지를 사용해 문서 아이콘을 디자인하는 것은 문서 유형을 이해하고 인식하는 데 큰 도움이 될 수 있는 방법입니다. 122 | 예를 들어, Xcode와 TextEdit은 center 이미지를 포함하지 않는 풍부한 배경 이미지를 사용합니다. 123 | 124 | 125 | 126 | 127 | | ![Image of an Xcode project document icon.](https://docs-assets.developer.apple.com/published/8094308ae64abe362b2b5fb9ba971adc/doc-icon-custom-1@2x.png) | ![Image of a TextEdit rich text document icon.](https://docs-assets.developer.apple.com/published/f32709a5ff5742e79fd03a58ae1dd9c6/doc-icon-fill-only@2x.png) | 128 | | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | 129 | | | | 130 | 131 | 문서 아이콘의 작은 버전에서 복잡도를 줄이는 것을 고려하세요. 큰 버전에서 명확한 아이콘 세부사항이 작은 버전에서는 흐릿하게 보이고 인식하기 어려울 수 있습니다. 예를 들어, 사용자 정의 하트 문서 아이콘의 그리드 라인이 중간 크기에서 명확하게 유지되도록 하려면 더 적은 라인을 사용하고 픽셀 그리드를 축소된 크기에 맞춰 두껍게 만들 수 있습니다. 16x16 픽셀 크기에서는 라인을 완전히 제거할 수도 있습니다. 132 | 133 | | ![](https://docs-assets.developer.apple.com/published/1f8bc7946a75363224f373924b557a3a/doc-icon-fewer-details-1@2x.png) | ![](https://docs-assets.developer.apple.com/published/e46ac887801d9a16393948c3f2098715/doc-icon-fewer-details-2@2x.png) | ![](https://docs-assets.developer.apple.com/published/fd0d2afcd76a9b25c1217ef2ffb1ad0e/doc-icon-fewer-details-3@2x.png) | 134 | |--|--|--| 135 | | 32x32 픽셀 아이콘은 더 적은 그리드 라인과 더 두꺼운 EKG 라인을 가지고 있습니다. | 16x16 픽셀 @2x 아이콘은 EKG 라인을 유지하지만 그리드 라인은 없습니다. | 16x16 픽셀 @1x 아이콘은 EKG 라인과 그리드 라인이 없습니다. | 136 | 137 | > EKG 라인 : 심전도 그래프 (예시에서 사용하고 있는 그래프 모양) 138 | 139 | ### - 중요한 내용을 배경 채우기의 오른쪽 상단 구석에 배치하지 않도록 해야 합니다. 140 | 시스템은 이미지를 자동으로 문서 아이콘 모양에 맞게 마스크하고, 흰색으로 접힌 모서리를 배경 위에 그립니다. 다음 크기의 배경 이미지 세트를 생성하세요. 141 | 142 | - 512x512 px @1x, 1024x1024 px @2x 143 | - 256x256 px @1x, 512x512 px @2x 144 | - 128x128 px @1x, 256x256 px @2x 145 | - 32x32 px @1x, 64x64 px @2x 146 | - 16x16 px @1x, 32x32 px @2x 147 | 148 | ### - 만약 익숙한 객체가 문서 유형이나 앱과의 연결을 나타낼 수 있다면, 해당 객체를 나타내는 중앙 이미지를 만들어보세요. 149 | 모든 크기에서 명확하고 인식하기 쉬운 간단하고 명확한 이미지를 디자인하세요. 중앙 이미지는 전체 문서 아이콘 캔버스의 반 크기를 가집니다. 예를 들어, 32x32 px 문서 아이콘에 대한 중앙 이미지를 만들려면 16x16 px 크기의 이미지 캔버스를 사용하세요. 중앙 이미지는 다음 크기로 제공할 수 있습니다. 150 | 151 | - 256x256 px @1x, 512x512 px @2x 152 | - 128x128 px @1x, 256x256 px @2x 153 | - 32x32 px @1x, 64x64 px @2x 154 | - 16x16 px @1x, 32x32 px @2x 155 | 156 | 이미지 캔버스의 약 10%를 측정하는 여백을 정의하고 대부분의 이미지를 여백 내에 유지하세요. 시각적 정렬을 위해 이미지의 일부가 이 여백으로 확장될 수 있지만 이미지가 이미지 캔버스의 약 80%를 차지할 때 가장 좋습니다. 예를 들어, 256x256 px 캔버스의 중앙 이미지의 대부분은 205x205 px 크기의 영역에 맞을 것입니다. 157 | 158 | 159 | ![Diagram of the solid pink heart shape within blue margins that measure 10 percent of the canvas width.](https://docs-assets.developer.apple.com/published/04bd3e5a8003adb03e8c39634700c4cb/doc-icon-parts-margins@2x.png) 160 | 161 | 162 | ### - 만약 사람들이 문서 유형을 이해하는 데 도움이 되는 간결한 용어가 있다면 명시하세요. 163 | 기본적으로 시스템은 문서 아이콘의 하단 가장자리에 문서의 확장자를 표시하지만, 확장자가 익숙하지 않다면 더 구체적인 용어를 제공할 수 있습니다. 예를 들어, SceneKit 씬 파일의 문서 아이콘은 파일 확장자 scn 대신 scene이라는 용어를 사용합니다. 시스템은 확장자 텍스트를 자동으로 문서 아이콘에 맞게 크기 조정하므로 작은 크기에서도 가독성이 있는 충분히 짧은 용어를 사용하세요. 기본적으로 시스템은 텍스트의 모든 글자를 대문자로 표시합니다. 164 | 165 | ![Image of a SceneKit scene document icon.](https://docs-assets.developer.apple.com/published/c0b6383ac5c8bf64952799ebca9b950c/doc-icon-custom-extension@2x.png) 166 | 167 | --- 168 | 169 | ### 관련 문서 170 | 171 | - [App icons](https://developer.apple.com/design/human-interface-guidelines/app-icons) 172 | - [SF Symbols](https://developer.apple.com/design/human-interface-guidelines/sf-symbols) 173 | 174 | 175 | ### 영상 176 | | [Designing Glyphs](https://developer.apple.com/videos/play/wwdc2017/823) | 177 | | ------------------------------------------------------------------------ | 178 | | ![](https://devimages-cdn.apple.com/wwdc-services/images/7/597D59A1-F123-4B08-BEE1-6D79A4C22268/1914_wide_250x141_1x.jpg) | 179 | 180 | -------------------------------------------------------------------------------- /Foundations/Privacy.md: -------------------------------------------------------------------------------- 1 | # Privacy 2 | 3 | ## 개인 정보 보호는 매우 중요합니다. 필요한 개인 정보 관련 데이터와 자원에 대해 투명하게 공개하는 것이 중요하며, 유저들이 허용한 데이터를 보호하는 것이 필수적입니다. 4 | 5 | 6 | ![A sketch of an upright hand, suggesting protection. The image is overlaid with rectangular and circular grid lines and is tinted yellow to subtly reflect the yellow in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/161fec1d77c705ccf076fb4c67d32f5c/foundations-privacy-intro@2x.png) 7 | 사람들은 매우 개인적인 방식으로 기기를 사용하며, 앱이 유저들의 개인 정보를 보호하는 데 도움을 줄 것을 기대합니다. 8 | 9 | 새로운 앱이나 업데이트된 앱을 제출할 때, App Store가 귀하의 제품 페이지에 정보를 표시할 수 있도록 여러분 앱의 개인 정보 관련 지침과 개인 정보 관련 데이터 수집에 대한 세부 사항을 제공해야 합니다. (이 정보는 [App Store Connect](https://help.apple.com/app-store-connect/#/dev1b4647c5b)에서 언제든지 관리할 수 있습니다.) 사람들은 귀하의 제품 페이지의 개인 정보 세부 사항을 사용하여 앱을 다운로드하기 전에 정보를 기반으로 한 결정을 내립니다. 자세한 내용은 [App privacy details on the App Store(앱스토어의 앱 개인 정보 지침))](https://developer.apple.com/app-store/app-privacy-details/)을 참고하세요. 10 | 11 | ![A screenshot of the App Privacy screen in an app’s App Store product page. The top card in the screen is titled Data Used to Track You and lists contact info, location, and identifiers. The bottom card is titled Data Linked to You and lists financial and contact info, location, purchases, identifiers, and browsing history.](https://docs-assets.developer.apple.com/published/6b45cc81a35043309fac0da19d280cd5/privacy-practices@2x.png) 12 | 13 | _앱의 앱 스토어 제품 페이지는 사람들이 앱을 다운로드하기 전에 앱의 개인정보 처리방침을 이해하는 데 도움이 됩니다._ 14 | 15 | 16 | 17 | ## Best practices 18 | 19 | ### - 실제로 필요한 데이터에만 접근을 요청하세요. 20 | 기능이 필요로 하는 것보다 더 많은 데이터를 요청하거나, 사람들이 기능에 관심을 보이기 전에 데이터를 요청하는 것은 사람들이 여러분의 앱을 신뢰하기 어렵게 만듭니다. 권한 요청을 최대한 구체적으로 하여 사람들이 데이터에 대한 정확한 제어권을 갖게 하세요. 21 | 22 | ### - 앱이 어떻게 사람들의 데이터를 수집하고 사용하는지에 대해 투명하게 공개하세요. 23 | 여러분이 데이터를 어떻게 사용할 계획인지 정확하게 이해하지 못한다면 사람들은 앱과 데이터를 공유하는데 불편함을 느낄 수 있습니다. 애플 로그인 시, 'Hide My Email'과 'Mail Privacy Protection'과 같은 시스템 기능을 사용하는 사람들의 선택을 항상 존중하고, 앱 추적과 관련하여 권장 사항들을 지켜주세요. Apple의 개인 정보 보호 기능에 대해 더 알고 싶다면 [Privacy](https://www.apple.com/privacy/)를 참고하고, 개발자 지침에 대해서는 [User privacy and data use](https://developer.apple.com/app-store/user-privacy-and-data-use/)를 참조하세요. 24 | 25 | ### - 가능한 경우 기기 내에서 데이터를 처리하세요. 26 | 예를 들어 iOS에서는 Apple Neural Engine과 custom CreateML 모델을 활용하여 기기 내에서 직접 데이터를 처리할 수 있습니다. 이로 인해 원격 서버로의 긴 및 잠재적으로 위험한 왕복을 피할 수 있습니다. 27 | 28 | ### - 시스템에서 정의한 개인 정보 보호를 채택하고 보안 모범 사례를 따르세요. 29 | 예를 들어, iOS 15 이후 버전에서는 CloudKit을 사용해서 문자열, 숫자 및 날짜와 같은 추가 데이터 유형에 대한 암호화 및 키 관리를 제공받을 수 있습니다. 30 | 31 | ## 권한 요청하기 32 | 33 | #### 다음은 접근 권한을 요청해야 하는 여러 예시입니다: 34 | 35 | - 개인 데이터, 위치, 건강, 금융, 연락처 및 기타 개인 식별 정보 포함 36 | - 사용자가 생성한 내용, 이메일, 메시지, 캘린더 데이터, 연락처, 게임 플레이 정보, Apple Music 활동, HomeKit 데이터, 오디오, 비디오, 사진 콘텐츠 등 37 | - Bluetooth 주변 기기, 홈 자동화 기능, Wi-Fi 연결 및 로컬 네트워크와 같은 보호된 리소스 38 | - 카메라 및 마이크와 같은 기기 기능 39 | - Full Space에서 실행되는 visionOS 앱에서의 ARKit 데이터, 손 추적, 평면 추정, 이미지 앵커링 및 월드 추적 등 40 | - 앱 추적을 지원하는 기기의 광고 식별자 41 | 42 | 시스템은 사용자가 여러분의 각 요청을 볼 수 있게 표준 알림을 제공합니다. 앱이 접근 권한이 필요한 이유를 설명하는 복사본을 제공하면, 시스템은 알림에 설명을 표시합니다. 사용자는 또한 설정 >> 개인 정보 보호에서 설명을 보고 권한 설정 선택을 업데이트할 수 있습니다. 43 | 44 | ### -데이터나 리소스에 접근이 명확히 필요할 때만 권한을 요청하세요. 45 | 개인 정보나 기기 기능에 대한 접근 권한을 요청받을 때, 그것이 명백히 필요하지 않다면 사람들은 의심스러워 할 것입니다. 이상적으로는, 접근이 필요한 앱 기능을 실제로 사용할 때까지 권한을 요청하는 것이 좋습니다. 예를 들어, 위치 정보가 필요한 기능에 관심을 보인 후에 그들의 위치를 공유할 방법으로 위치 버튼을 사용할 수 있습니다. 46 | 47 | ### - 앱이 작동하기 위해 데이터나 리소스가 필수적이지 않다면 앱 시작 시 권한을 요청하는 것을 피하세요. 48 | 권한 요청의 이유가 명확할 경우 시작 시 요청에 불편함을 느끼지 않을 가능성이 높습니다. 예를 들어, 내비게이션 앱이 위치 정보에 접근해야만 사용자들은 해당 권한을 허용했을 때 스스로 이점을 볼 수 있음을 사람들은 이해합니다. 마찬가지로, 주변의 벽에 가상 물체를 튕기는 visionOS 게임을 하려면 그들의 주변 환경 정보에 접근할 권한을 부여해야 합니다 49 | 50 | ### - 앱이 요청하는 기능, 데이터 또는 리소스를 어떻게 사용하는지 명확하게 설명하는 내용을 작성하세요. 51 | 표준 알림은 앱 이름 다음, 권한을 승인하거나 거부하는 버튼 전에 여러분의 내용("_purpose string_" 또는 "_usage description string_"이라고 함)을 표시합니다. 간결하고, 구체적이며 이해하기 쉬운 완전한 문장을 목표로 하세요. 문장 형식을 사용하고, 수동태를 피하며 (영어 한정), 마지막에 마침표를 포함하세요. 개발자 지침에 대해서는 [Requesting access to protected resources(보호된 리소스에 대한 접근 요청)](https://developer.apple.com/documentation/uikit/protecting_the_user_s_privacy/requesting_access_to_protected_resources) 및 [App Tracking Transparency(앱 추적 투명성)](https://developer.apple.com/documentation/apptrackingtransparency)을 참조하세요. 52 | 53 | | | 문구 예시 | 참고 | 54 | | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ | --------------------------------------------------------------------- | 55 | | ![A checkmark in a circle to indicate a correct example.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark@2x.png) | 앱에서 밤 동안 코골이 소리를 감지하기 위해 녹음합니다. | 앱이 데이터를 수집하는 방법과 이유를 명확하게 설명하는 문장입니다. | 56 | | ![An X in a circle to indicate an incorrect example.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout@2x.png) | 더 나은 사용자 경험을 위해 마이크 권한이 필요합니다. | 모호하고 제대로 목적이 정의되지 않았으며, 정당성이 부족한 설명입니다. | 57 | | ![An X in a circle to indicate an incorrect example.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout@2x.png) | 마이크 권한을 사용합니다. | 어떤 목적 및 정당성도 없는 명령형 문장입니다. | 58 | 59 | 60 | #### 다음은 표준 시스템 알림 메세지 몇 가지 예시입니다. 61 | 62 | | 예시 1 | 예시 2 | 예시 3 | 63 | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------ | 64 | | ![A screenshot of a permission alert for the Pal About app displaying a purpose string that reads Allow Pal About to access your location? Turning on location services allows us to show you when pals are nearby. Below the string is a small map image containing the Precise On notice and below the map are three buttons in a stack. From the top, the buttons are titled Allow Once, Allow While Using App, and Don’t Allow.](https://docs-assets.developer.apple.com/published/7606b1f491c09048bf8bd03b45ed36f8/permission-request-1@2x.png) | ![A screenshot of a permission alert for the Pal About app displaying a purpose string that reads Pal About would like to access your photos. Allow access to photos to upload photos from your library. The string is followed by three buttons in a stack. From the top, the buttons are titled Select Photos, Allow Access to All Photos, and Don’t Allow.](https://docs-assets.developer.apple.com/published/6c22cace0599c2630e86cebb50f28ba8/permission-request-2@2x.png) | ![A screenshot of a permission alert for the Pal About app displaying a purpose string that reads Allow Pal About to access your contacts? Find friends using Pal About and add them to your pal network. The string is followed by two side-by-side buttons: Don’t Allow and Allow.](https://docs-assets.developer.apple.com/published/7e87848e5908661a78eb73aee3976e73/permission-request-3@2x.png) 65 | 66 | 67 | ### 사전 알림 화면, 창 또는 뷰 (Pre-alert screens, windows or views) 68 | 이상적으로 현재 앱 내에서 사람들에게 권한을 요청하는 이유를 이해시켜야 합니다. 추가적인 세부사항을 제공하는 것이 필수적이라면, 시스템 알림이 나타나기 전에 사용자 정의(직접 만든) 뷰 또는 window를 표시할 수 있습니다. 다음 가이드 라인은 카메라, 마이크, 위치, 연락처, 캘린더, 추적을 포함하여 보호된 데이터와 리소스에 대한 접근 권한을 요청하는 시스템 알림 앞에 표시되는 사용자 정의 뷰에 적용 할 수 있습니다. 69 | 70 | ### - 버튼은 하나만 포함하고, 이 버튼을 눌렀을 때 시스템 권한 허용 알림이 발생한다는 맥락을 정확하게 전달하세요. 71 | 사용자 정의 뷰 또는 창에 있는 버튼을 눌렀을 때 시스템 권한 허용 알림이 뜨지 않을 경우, 평소 경험에서 벗어나는 느낌을 받아 혼란을 야기할 수 있습니다. 72 | 73 | 또 좋지 않은 예시 중 하나는, 버튼의 타이틀로 "허용"과 같은 용어를 사용하는 것입니다. 사용자 정의 버튼이 시각적으로 알림 내의 허용 버튼과 유사한 의미와 중량을 가진 것처럼 보이면, 사람들은 의도하지 않게 알림의 허용 버튼을 선택할 가능성이 더 높아집니다. "계속" 또는 "다음"과 같은 용어를 사용하여 사용자 정의 화면 또는 창의 단일 버튼의 제목을 지정하고, 그것의 동작이 시스템 알림을 열 것임을 명확히 하세요. 74 | 75 | | ![A checkmark in a circle to indicate a correct example.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark@2x.png) | ![A checkmark in a circle to indicate a correct example.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark@2x.png) | 76 | | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | 77 | | ![A screenshot of an app’s pre-alert screen that reads Allow tracking on the next screen for special offers and promotions just for you, advertisements that match your interests, an improved personalized experience over time. You can change this option later in the Settings app. Below the text is a button titled Continue.](https://docs-assets.developer.apple.com/published/fc7f233de9ee89f9dbdb48c175225a59/custom-messaging-correct-1@2x.png) | ![A screenshot of the Pal About app’s pre-alert screen that reads Turning on location services allows us to provide features like: alerts when your pals are nearby, news of events happening near you, tagging and sharing your location. Below the text is a button titled Next and below the button is text that reads You can change this later in the Settings app.](https://docs-assets.developer.apple.com/published/237274110e00048cc265d0f0042dd0c8/custom-messaging-correct-2@2x.png) 78 | 79 | 80 | ### - 화면에 추가적인 동작을 넣지 마세요. 81 | 예를 들어, 시스템 알림을 띄우지 않고 화면이나 창을 떠나는 방법을 제공하지 마세요. (종료나 취소 옵션을 제공하는 것) 82 | 83 | 84 | | ![An X in a circle to indicate an incorrect example.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout@2x.png) | ![An X in a circle to indicate an incorrect example.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout@2x.png)| 85 | | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | 86 | | ![A screenshot of an app’s pre-alert screen highlighted to show a button titled Cancel that appears below the Continue button.](https://docs-assets.developer.apple.com/published/6ff09ed38ef7b3823347bc240c48b347/custom-messaging-incorrect-5@2x.png) | ![A screenshot of an app’s pre-alert screen highlighted to show a Close button in the top-left corner and a More button in the top-right corner. The Continue button appears near the bottom of the screen.](https://docs-assets.developer.apple.com/published/6910c5e5f213833465fb3d06c6e9689a/custom-messaging-incorrect-6@2x.png) 87 | 88 | ## 트래킹 요청 (Tracking) 89 | 90 | 앱 추적은 민감한 문제입니다. 경우에 따라 추적의 이점을 설명하는 커스텀 화면이나 창을 표시하는 것이 타당할 수 있습니다. 앱을 시작하는 즉시 앱 추적을 수행하려면 추적 데이터를 수집하기 전에 시스템에서 제공하는 알림을 표시해야 합니다. 91 | 92 | ### 사람들을 혼란스럽게 하거나 오해하게 할 수 있는 커스텀 화면이 시스템 알림보다 먼저 나와서는 안됩니다. 93 | 사람들은 때로 빠르게 알림을 읽지 않고 닫기 위해 탭하기도 합니다. 그러한 행동을 이용하여 선택을 영향을 주려는 커스텀 메시지 화면, 창이 있다면 앱 스토어 리뷰에 의해 거부될 것입니다. 94 | 95 | 거절되는 몇 가지 예시는 하단을 참고해주세요. 96 | 97 | - 사용자에게 특정 이익을 제공 98 | - 요청처럼 보이는 화면을 제공 99 | - 시스템 알림 창 이미지 제공 100 | - 시스템 알림 창 설명 및 주석 달기 101 | 102 | 의 경우들을 피해야 합니다. 103 | 104 | 자세한 지침을 참고하고 싶다면, [앱스토어 리뷰 가이드 5.1.1(iv)](https://developer.apple.com/app-store/review/guidelines/#data-collection-and-storage)을 참조해주세요. 105 | 106 | #### 1. 금전적 이익 제공 107 | 108 | 109 | ![A screenshot of an app’s pre-tracking message that reads Allow tracking and get a $100 credit toward your next purchase. Below the text is an image of a dollar sign inside a circle. Below the image is a button titled Get $100 credit.](https://docs-assets.developer.apple.com/published/cd97429e2555ad384979258c510fcf30/custom-messaging-incorrect-1@2x.png) 110 | 111 | 요청을 승인하는 대가로 인센티브를 제공하지 마세요. 사람들이 권한을 부여하는 것에 대한 보상을 제공할 수 없으며, 사람들이 추적을 허용할 때까지 기능이나 콘텐츠를 보류하거나 앱을 사용할 수 없게 만들어선 안됩니다. 112 | 113 | #### 2. 요청처럼 보이는 화면을 제공 114 | ![A screenshot of an app’s pre-tracking message that reads Allow tracking for a better experience. Below the text is a bar graph image that shows four bars increasing in height from left to right. Below the graph is a button titled Allow Tracking.](https://docs-assets.developer.apple.com/published/754adf94fd632793b649b54acaac0ecd/custom-messaging-incorrect-2@2x.png) 115 | 116 | 117 | 시스템 알림의 기능을 반영하는 커스텀 화면을 표시하지 마세요. 특히, 사전 알림 화면에서는 어떠한 허용도 이루어지지 않기 때문에 "허용" 또는 유사한 용어를 사용해서 버튼 타이틀을 작성하지 마세요. 118 | 119 | 120 | #### 3. Alert 이미지 제공 121 | 122 | 123 | 124 | ![A screenshot of an app’s pre-tracking message that reads Choose Allow when prompted. Below the text is an image of the system-provided alert. Below the image is a button titled Continue. An Allow button in the system-provided alert image is circled.](https://docs-assets.developer.apple.com/published/7a5177d4bc1460b472577ea5e93ae61e/custom-messaging-incorrect-3@2x.png) 125 | 126 | 표준 알림의 이미지를 표시해서는 안되며, 어떤 방식으로든 해당 이미지를 수정하지 마세요. 127 | 128 | 129 | #### 4. Alert 화면 설명 및 주석 달기 130 | 131 | ![A screenshot of an app’s pre-tracking message that reads Allow tracking for a better experience. The app’s custom screen also includes an upward-pointing arrow and the words Choose Allow in the lower third of the screen. Because the system-provided alert displays on top of the custom screen, the arrow appears to be pointing to the alert’s Allow button.](https://docs-assets.developer.apple.com/published/e3f463b819afea891f0e7cab188e466b/custom-messaging-incorrect-4@2x.png) 132 | 133 | 시스템 알림의 허용 버튼에 사람들의 주의를 끌 수 있는 시각적 단서를 표시하지 마세요. 134 | 135 | 136 | ## 위치 버튼 137 | 138 | 139 | iOS, iPadOS 및 watchOS에서는 Core Location 프레임워크가 버튼을 제공하여 작업이 필요한 순간에 앱이 사용자의 위치에 임시로 접근할 수 있는 권한을 부여받게 합니다. 위치 버튼의 모양은 앱의 UI와 일치하도록 다양해질 수 있고, 이는 항상 위치 공유의 동작을 즉시 인식할 수 있는 방식으로 전달합니다. 140 | ![An image of a lozenge-shaped blue button that displays a white location indicator — that is, a narrow arrow head shape that points to the top right — followed by the text Current Location.](https://docs-assets.developer.apple.com/published/2d4e44adec80170cec96d3446617e700/location-button@2x.png) 141 | 142 | 143 | 사용자가 처음으로 앱을 열고 위치 버튼을 탭하면, 시스템은 표준 알림을 팝업으로 보여줍니다. 이 알림은 앱의 위치 접근 권한을 어떻게 제한하는지 사용자에게 안내합니다. 또한, 공유가 시작될 때 나타나는 위치 아이콘을 통해 사용자의 위치를 알려줍니다. 144 | 145 | 146 | ![A screenshot of the alert displayed by the location button that appears on top of a background image showing a partial map of Northern California. The alert reads Park Finder can only access your location when you choose to share it. When you share your location with this app, a blue location indicator will appear in the status bar. Below this text the alert displays a small image of the map, zoomed in to show part of Cupertino. Below the map are two buttons; from the top the titles are OK and Not Now.](https://docs-assets.developer.apple.com/published/465bee128d71f71d03d20d6d9bb175db/location-button-alert@2x.png) 147 | 148 | 버튼의 동작에 대해 사용자가 이해를 확인한 후, 위치 버튼을 간단히 탭하는 것만으로 앱에 사용자의 위치에 대한 일회성 권한이 부여됩니다. 사용자가 앱 사용을 중단할 때마다 일회성 권한은 만료되지만, 앱에서 사용자들에게 버튼의 목적을 설명할 필요는 없습니다. 149 | 150 | > 참고 151 | > 152 | > 앱의 권한이 없는 경우 위치 버튼을 탭하면 - 시스템 권한 허용 창에서 "한 번만 허용"을 선택했을 때와 동일한 효과가 있습니다. 이전에 사용자가 "앱 사용 중에는 위치 권한 허용"을 선택한 경우, 위치 버튼을 탭해도 앱의 상태가 변경되지 않습니다. 개발자 지침은 [`LocationButton`](https://developer.apple.com/documentation/corelocationui/locationbutton)(SwiftUI) 및 [`CLLocationButton`](https://developer.apple.com/documentation/corelocationui/cllocationbutton)(Swift)을 참조하세요. 153 | 154 | 155 | 특정 앱 기능에 대해 사용자에게 위치 정보를 간편하게 공유할 수 있는 방법을 제공하기 위해 위치 버튼의 사용을 고려하세요. 예를 들면, 앱을 통해 사용자가 메시지나 게시물에 자신의 위치를 첨부하거나, 매장을 찾거나, 자신의 위치에서 마주한 건물, 식물 또는 동물을 식별하는 데 도움을 줄 수 있습니다. 사용자가 자주 '한 번만 위치 권한 허용' 권한을 앱에 부여하는 경우, 알림과 반복적으로 상호작용하지 않고도 위치 공유의 이점을 누릴 수 있도록 위치 버튼을 사용하는 것을 고려하세요. 156 | 157 | UI와 조화를 이루도록 위치 버튼을 커스텀하는 것을 고려하세요. 구체적으로 다음과 같이 할 수 있습니다: 158 | 159 | - 기능과 가장 잘 어울리는 제목을 선택합니다. ex) “현재 위치” 또는 “내 현재 위치 공유”. 160 | - 색이 채워지거나 (fill), 테두리가 있는 (outlined) 위치 아이콘을 사용하세요. 161 | - 배경색 및 제목 색상을 선택합니다. 162 | - 버튼의 corner Radius 반경을 조절합니다. 163 | 164 | 165 | 위치 버튼을 인식하고 신뢰하기 위해, 버튼의 다른 시각적 속성은 커스텀 할 수 없습니다. 위치 버튼이 읽기 쉬운지 확인하기 위해 낮은 대비 색상 조합이나 지나치게 투명한 문제에 대해 시스템에서 경고 메세지를 제공합니다. 또한, 텍스트가 버튼에 맞게 들어가도록 조정을 해야 합니다. 접근성 모드 및 다른 언어를 사용했을 때에도, 버튼 안에 모든 텍스트가 표기되도록 확인해야 합니다. 166 | 167 | > 중요 168 | > 169 | > 시스템이 커스텀한 위치 버튼에 지속적인 문제가 있다고 판단하면, 사용자가 그것을 탭할 때 앱에 기기의 위치에 대한 접근 권한을 부여하지 않습니다. 이러한 버튼은 다른 앱 특정 작업을 수행할 수 있지만, 위치 버튼이 사용자의 예상대로 작동하지 않으면 사용자는 앱에 대한 신뢰를 잃을 수 있습니다. 170 | 171 | ## 데이터 보호 172 | 173 | 사람들의 정보를 보호하는 것은 매우 중요합니다. 로컬에 정보를 저장하거나, 특정 작업에 대한 권한을 부여하거나, 네트워크를 통해 정보를 전송할 때 시스템 제공 보안 기술을 활용하여 사용자들의 개인 정보를 보호하세요. 174 | 175 | 다음은 몇가지 가이드 라인입니다. 176 | 177 | ### - 인증을 위해 비밀번호에만 의존하지 마세요. 178 | 가능한 경우 [passkeys](https://developer.apple.com/documentation/authenticationservices/public-private_key_authentication/supporting_passkeys/)를 사용하여 비밀번호를 대체하세요. 인증을 위해 비밀번호 사용을 계속해야하는 경우, 두 단계 인증을 필요로 함으로써 보안을 강화하세요(개발자 가이드를 위해서는 [Securing Logins with iCloud Keychain Verification Codes(iCloud Keychain 검증 코드로 로그인 보호하기)](https://developer.apple.com/documentation/authenticationservices/securing_logins_with_icloud_keychain_verification_codes)를 참조하세요). 기기에서 로그인 상태를 유지하는 앱에 대한 접근을 추가로 보호하기 위해 Face ID, Optic ID 또는 Touch ID와 같은 생체 인식을 사용하세요. 개발자 가이드를 위해서는 [Local Authentication](https://developer.apple.com/documentation/localauthentication)을 참조하세요. 179 | 180 | ### - 민감한 정보는 키체인에 저장하세요. 181 | 키체인은 누군가의 개인 정보를 처리할 때 안전하고 예측 가능한 사용자 경험을 제공합니다. 개발자 가이드를 위해서는 [Keychain Services](https://developer.apple.com/documentation/security/keychain_services)을 참조하세요. 182 | 183 | ### - 비밀번호나 기타 보안 내용을 일반 텍스트 파일에 저장하지 마세요. 184 | 파일 권한을 사용하여 접근을 제한하더라도 민감한 정보는 암호화된 키체인에서 훨씬 안전합니다. 185 | 186 | ### - 사용자 정의 인증 체계를 만드는 것을 피하세요. 187 | 앱이 인증을 필요로 할 경우, [passkeys](https://developer.apple.com/documentation/authenticationservices/public-private_key_authentication/supporting_passkeys/), [Sign in with Apple(애플 로그인)](https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple) 또는 [Password AutoFill(비밀번호 자동입력)](https://developer.apple.com/documentation/security/password_autofill)과 같은 시스템 제공 기능을 사용하세요. 관련 가이드를 위해서는 계정 관리를 참조하세요. 188 | 189 | 190 | ## 플랫폼 별 고려사항 191 | - iOS, iPadOS, tvOS, watchOS는 해당 사항이 없습니다. 192 | 193 | ## macOS 194 | ### - 유효한 개발자 ID로 앱에 서명을 등록해야 합니다. 195 | 스토어 외부에 앱을 배포하기로 선택한 경우 개발자 ID로 앱에 서명하면 Apple 개발자로 식별되고 앱이 안전하게 사용할 수 있음을 확인할 수 있습니다. 개발자 지침은 [Xcode Help](https://developer.apple.com/go/?id=ios-app-distribution-guide)을 참조하십시오. 196 | 197 | ### - 앱 샌드 박스를 활용해서 유저들의 데이터 보호하세요. 198 | 샌드박싱은 악성 코드로부터 앱을 보호하면서 시스템 리소스 및 사용자 데이터에 대한 접근 권한을 앱에 제공합니다. Mac App Store에 제출되는 모든 앱에는 샌드박싱이 필요합니다. 개발자 지침은 [Configuring the macOS App Sandbox](https://developer.apple.com/documentation/Xcode/configuring-the-macos-app-sandbox)을 참조하세요. 199 | 200 | ### - 로그인한 사용자를 추측하지 마세요. 201 | 사용자 전환이 빠르기 때문에 여러 사람이 동일한 시스템에서 활동할 수 있습니다. 202 | 203 | ## visionOS 204 | 기본적으로, visionOS는 지속성, 월드 맵핑, 세그멘테이션, 매팅, 환경 조명과 같은 기능을 처리하기 위해 ARKit 알고리즘을 사용합니다. 이러한 알고리즘은 항상 실행되어 있어 앱과 게임이 Shared Space(공유 공간)에서 ARKit의 장점을 자동으로 누릴 수 있습니다. 205 | 206 | ARKit은 Shared Space 내의 앱에 데이터를 전송하지 않습니다; ARKit API에 접근하려면 앱이 Full Space를 열어야 합니다. 또한, Plane 추정, Scene 재구성, Image 앵커링, Hand 추적과 같은 기능은 정보에 접근하기 위해 유저들의 권한 허용을 필요로 합니다. 개발자 가이드를 위해서는 [Setting up access to ARKit data(ARKit 데이터에 대한 접근 설정)](https://developer.apple.com/documentation/visionOS/setting-up-access-to-arkit-data)을 참조하세요. 207 | 208 | visionOS에서는 사용자 입력이 디자인에 의해 개인적으로 처리됩니다. 시스템은 자동으로 사람들이 SwiftUI 또는 RealityKit을 사용하여 만든 컴포넌트에 초점을 맞출 때 호버 효과를 표시하여, 탭하기 전에 그들의 시선 방향을 노출하지 않고 필요한 시각적 피드백을 제공합니다. 가이드를 위해서는 [Focus and selection](https://developer.apple.com/design/human-interface-guidelines/focus-and-selection) 및 [Gestures > visionOS](https://developer.apple.com/design/human-interface-guidelines/gestures#visionOS)를 참조하세요. 209 | 210 | 개발자의 장치 카메라 접근 방식은 visionOS에서 다른 플랫폼에서와는 다르게 작동합니다. 구체적으로, 후면 카메라는 빈 입력을 제공하며 호환성 편의성으로만 사용할 수 있습니다; 전면 카메라는 Spatial Personas의 입력을 제공하지만 유저들이 권한 허용을 한 이후에만 가능합니다. iOS 또는 iPadOS 앱을 visionOS로 가져오려는데 카메라 접근이 필요한 기능이 포함되어 있다면, 그것을 제거하거나 대체할 수 있는 옵션으로 교체하세요. 개발자 가이드를 위해서는 [Checking whether your existing app is compatible with visionOS(visionOS와 호환되는 기존 앱을 확인하는 방법)](https://developer.apple.com/documentation/visionOS/checking-whether-your-app-is-compatible-with-visionos)을 참조하세요. 211 | 212 | --- 213 | 214 | ## 참고 215 | 216 | ### 개발자 문서 217 | 218 | - [Requesting access to protected resources](https://developer.apple.com/documentation/uikit/protecting_the_user_s_privacy/requesting_access_to_protected_resources) 219 | - [Security](https://developer.apple.com/documentation/security) 220 | 221 | ### 영상 222 | 223 | | [Design for location privacy](https://developer.apple.com/videos/play/wwdc2020/10162) | [Meet the Location Button](https://developer.apple.com/videos/play/wwdc2021/10102) | [Apple's privacy pillars in focus](https://developer.apple.com/videos/play/wwdc2021/10085) | 224 | | ------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | 225 | | ![](https://devimages-cdn.apple.com/wwdc-services/images/49/B39F07BE-4E7A-4530-8BB9-B1C319F262EE/3354_wide_250x141_1x.jpg) | ![4998_wide_250x141_1x.jpg](https://devimages-cdn.apple.com/wwdc-services/images/119/03EB5BF9-AF52-4140-BBCA-4B3D4DD99C96/4998_wide_250x141_1x.jpg) | ![](https://devimages-cdn.apple.com/wwdc-services/images/119/A6395752-EED6-4F4D-9910-6D7B5867BC28/4978_wide_250x141_1x.jpg) | 226 | 227 | -------------------------------------------------------------------------------- /Foundations/Accessibility.md: -------------------------------------------------------------------------------- 1 | # Accessibility 2 | [원문 링크](https://developer.apple.com/design/human-interface-guidelines/accessibility) 3 | 4 | ## 사람들은 Apple의 접근성 기능을 사용하여 자신에게 적합한 방식으로 기기와 상호 작용하는 방식을 개인화할 수 있습니다. 5 | 6 | ![](https://i.imgur.com/swqPAx8.png) 7 | 8 | 접근성이 뛰어난 앱이나 게임은 접근성 맞춤 설정을 지원하며, 기능이나 기기 사용 방식에 관계없이 모든 사람이 훌륭한 경험을 할 수 있도록 설계되었습니다. 9 | 10 | 약 7명 중 1명은 세상 및 디바이스와 상호 작용하는 방식에 영향을 미치는 장애를 가지고 있습니다. 사람들은 나이와 기간에 관계없이 다양한 수준의 장애를 경험할 수 있습니다. 예를 들어, 낙상으로 인한 손목 부상이나 과도한 사용으로 인한 음성 손실과 같은 상황적 장애는 거의 모든 사람이 다양한 시간에 디바이스와 상호 작용하는 방식에 영향을 미칠 수 있습니다. 11 | 12 | ## Best practices 13 | 14 | - ### 접근성을 염두에 두고 디자인하세요. 15 | 접근성은 단순히 장애가 있는 사람이 정보를 이용할 수 있도록 하는 것이 아니라, 능력이나 상황에 관계없이 모든 사람이 정보를 이용할 수 있도록 하는 것입니다. 접근성을 염두에 두고 앱을 디자인한다는 것은 단순성과 인지 가능성을 우선시하고 모든 디자인 결정을 검토하여 다른 능력을 가지고 있거나 다른 방식으로 디바이스와 상호 작용하는 사람들을 배제하지 않도록 하는 것을 의미합니다. 16 | 17 | - ### 단순성 18 | 친숙하고 일관된 상호 작용을 지원하여 복잡한 작업도 간단하고 쉽게 수행할 수 있습니다. 19 | 20 | - ### 인지 할 수 있어야 합니다. 21 | 시각, 청각, 촉각 등 어떤 방식으로든 모든 콘텐츠를 인지할 수 있어야 합니다. 22 | 23 | - ### 개인화를 지원하세요. 24 | 사람들이 어떤 상황과 지원되는 모든 기기에서든 경험을 즐길 수 있도록 기기 방향, 디스플레이 크기, 해상도, 색 영역, 분할 보기 등 다양한 환경에 맞게 환경을 설계해야 합니다. 최소한의 추가 노력으로 사람들이 기기와 상호 작용하는 방식을 개인화하기 위해 사용하는 접근성 기능을 지원하도록 앱을 디자인할 수 있습니다. 25 | 26 | 표준 컴포넌트를 사용하여 인터페이스를 구현하면 텍스트와 컨트롤이 굵은 텍스트, 큰 텍스트, 색상 반전, 대비 증가와 같은 여러 접근성 설정에 자동으로 맞춰집니다. 27 | 28 | - ### 앱 또는 게임의 접근성을 검증하고 테스트하세요. 29 | 검증을 통해 경험의 모든 요소를 검사하고 수정해야 할 포괄적인 문제 목록을 제공합니다. 테스트를 통해 모든 사람이 기기와 상호 작용하는 방식에 관계없이 앱에서 가장 중요한 작업을 완료할 수 있도록 보장할 수 있습니다. 30 | 31 | 접근성 기능을 켠 상태에서 중요한 사용자 흐름(유저 플로우)을 테스트하면 다양한 방식으로 디바이스와 상호 작용할 때의 어려움을 이해할 수 있습니다. 또한 앱이 우수한 사용자 경험을 제공하지 못할 수 있는 부분을 발견할 수 있습니다. 32 | 33 | 예를 들어 소셜 미디어 앱의 일반적인 사용자 흐름은 "답글 달기"일 수 있습니다. 이 플로우를 구성하는 작업에는 다음이 포함될 수 있습니다: 34 | 35 | - 게시된 댓글 읽기 36 | - 응답할 댓글 고르기. 37 | - 답글 뷰 열기 38 | - 답글 편집 및 작성하기 39 | - 답글 게시하기 40 | 41 | 앱이나 게임의 각 중요한 유저 플로우에 대해 보이스오버, 모션 줄이기(저사양 디바이스를 위한 애니메이션 줄이기) 또는 큰 텍스트 크기와 같은 접근성 기능을 켜고 앱의 모든 작업을 어려움 없이 완료할 수 있는지 확인합니다. 발견한 문제를 해결한 후에는 다른 접근성 기능을 켜고 사용자 플로우를 다시 실행합니다. 앱 또는 게임을 감사, 테스트 및 수정하는 데 도움을 받으려면 Xcode의 `Accessibility Inspector`를 사용하는 것이 좋습니다. 42 | 43 | ## 상호작용 44 | 45 | 보이스오버, 보조 터치, 포인터 제어, 스위치 제어와 같은 보조 기술은 사람들이 디바이스와 상호 작용할 수 있는 방법을 확장합니다. 이러한 기술은 시스템에서 제공하는 상호 작용과 통합되므로 앱에서 시스템 상호 작용을 올바르게 지원하는 것이 필수적입니다. 46 | 47 | ## 제스처 48 | 49 | - ### 플랫폼 제스처를 재정의하지 마세요. 50 | 사람들은 아래로 스와이프하여 알림 센터를 표시하는 것과 같이 시스템 기능을 대상으로 하는 제스처가 사용 중인 앱과 관계없이 작동하기를 기대합니다. 51 | 52 | - ### 일반적인 상호 작용에는 단순화된 제스처를 선호합니다. 53 | 여러 손가락 또는 여러 손을 사용하는 제스처, 길게 누르기, 반복적인 동작이 필요한 제스처와 같은 복잡한 제스처는 많은 사람들에게 어려울 수 있습니다. 가능한 한 간단한 제스처를 사용하면 앱과 상호 작용하는 모든 사람의 경험이 향상됩니다. 54 | 55 | - ### 제스처 기반 작업을 수행할 수 있는 대체 방법을 제공하세요. 56 | 특정 제스처를 수행할 수 없는 사용자를 위한 옵션을 포함하세요. 예를 들어, 제스처를 사용하여 표의 행을 삭제할 수 있는 경우 편집 모드를 통해 항목을 삭제하거나 항목 세부 정보 보기에서 삭제 버튼을 제공하여 항목을 삭제할 수 있는 방법을 제공할 수도 있습니다. 57 | 58 | | 편집 모드를 통해 항목 삭제 | 스와이프 제스처를 통해 항목 삭제 | 59 | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | 60 | | ![An illustration of a list-based app on iPhone. The list is in edit mode, and each list item displays a circular Delete button on the left.](https://docs-assets.developer.apple.com/published/0ef69eb127a1f8225ebbd5ba6786fb63/tap-to-delete@2x.png) | ![An illustration of a list-based app on iPhone. The Delete button for the first item is revealed, as if someone swiped the item to the left.](https://docs-assets.developer.apple.com/published/7180d8c6c9a19832cebdfb515b0dbfea/swipe-to-delete@2x.png) | 61 | 62 | 63 | - ### 가능하면 두 가지 이상의 물리적 상호 작용 유형을 통해 앱의 핵심 기능에 액세스할 수 있도록 하세요. 64 | 예를 들어 iPhone 및 iPad의 카메라에서는 화면의 버튼을 탭하거나 기기의 볼륨 작게 버튼을 눌러 사진을 찍을 수 있습니다. 이러한 대체 상호 작용은 모든 사람이 더 편리하게 사진을 찍을 수 있도록 할 뿐만 아니라, 그립 강도나 손재주가 부족한 사람들에게도 옵션을 제공합니다. 65 | 66 | - ### 사용자 지정 제스처를 정의하는 경우, 사람들이 앱과 상호 작용할 수 있는 대체 방법을 제공하는 보조 기술을 지원해야 합니다. 67 | 예를 들어, 포인터 컨트롤을 사용하면 손목, 검지 또는 머리 기반 포인터를 사용할 수 있고, 드웰 컨트롤을 사용하면 눈만 사용하여 개체를 선택하고 활성화할 수 있습니다. 보이스오버, 드웰 컨트롤, 스위치 컨트롤과 같은 기술을 지원하는 한 가지 방법은 사용자 지정 동작(`custom action`)을 구현하는 것입니다. 자세히 알아보고 싶다면, [`UIAccessibilityCustomAction`](https://developer.apple.com/documentation/uikit/uiaccessibilitycustomaction) 개발자 문서를 참조하세요. 68 | 69 | > 드웰 컨트롤: 드웰 제어(Dwell Control): 일반적인 제어가 아닌 시선 또는 머리등 특정 부위 추적 기술을 사용해 마우스 동작을 수행하는 것. 70 | 71 | - ### iOS 또는 iPadOS 앱에서 드래그 앤 드롭에 액세스할 수 있도록 설정하세요. 72 | Accessibility API를 사용하여 앱에서 특정 개체가 드래그 대상임을 식별 할 수 있도록 지정하세요. 해당 항목을 지정한다면, 보조 기술을 통해 사람들이 항목을 드래그 앤 드롭하는 데 도움을 받을 수 있습니다. 자세한 내용은 [`accessibilityDragSourceDescriptors`](https://developer.apple.com/documentation/objectivec/nsobject/2891001-accessibilitydragsourcedescripto) 문서와, [`accessibilityDropPointDescriptors`](https://developer.apple.com/documentation/objectivec/nsobject/2891048-accessibilitydroppointdescriptor) 문서를 참조하세요. 73 | 74 | ## Buttons-and-controls 75 | - ### 모든 컨트롤과 인터랙티브 요소에 충분히 큰 타겟을 지정합니다. 76 | 예를 들어 터치스크린 기기에서 타겟의 크기는 최소 `44x44pt`여야 하며, 비전OS에서는 컨트롤의 중심이 최소 `60pt` 간격이 되도록 배치합니다. 거동이 불편한 사람들은 앱과 상호 작용할 수 있도록 더 큰 타겟이 필요합니다. 포인터를 사용하는 경우에도 모든 플랫폼에서 너무 작은 컨트롤과 상호 작용하는 것은 불편할 수 있습니다. 77 | 78 | - ### 사용자 지정 요소(custom elements)의 접근성을 특성화하세요. 79 | 시스템 API를 사용하여 보조 기술에 구성 요소의 동작 방식을 알려줄 수 있습니다. 예를 들어 [`button`](https://developer.apple.com/documentation/uikit/uiaccessibilitytraits/1620194-button) 또는 [`NSAccessibilityButton`](https://developer.apple.com/documentation/appkit/nsaccessibilitybutton)을 사용하여 뷰를 버튼으로 특성화하면 VoiceOver가 뷰의 설명을 말한 다음 버튼이라는 단어를 말하여 뷰가 버튼처럼 작동한다는 것을 사용자에게 알릴 수 있습니다. 80 | 81 | - ### 일관된 스타일 계층 구조를 사용하여 버튼의 상대적 중요성을 전달합니다. 82 | 예를 들어 iOS, iPadOS 및 tvOS에서는 뷰에서 가장 가능성이 높은 작업을 수행하는 버튼에 시각적으로 눈에 잘 띄는 채워진 스타일을 사용하고 덜 중요한 작업을 수행하는 버튼에는 회색 또는 일반과 같이 덜 눈에 잘 띄는 스타일을 사용할 수 있습니다. (개발자 지침은 [`UIButton.Configuration`](https://developer.apple.com/documentation/uikit/uibutton/configuration)을 참조하세요.) visionOS에서 시스템 제공 버튼은 일반적으로 기본적으로 보이는 배경을 포함합니다. iOS, iPadOS, visionOS 및 macOS의 일부 버튼의 경우 버튼 모양을 켜서 활성 버튼을 주변 콘텐츠와 쉽게 구분할 수 있습니다. 83 | 84 | - ### 시스템에서 제공하는 스위치 컴포넌트를 사용해보세요. 85 | SwiftUI에서는 토글의 위치와 색상으로 상태를 표시하는 스위치를 제공합니다. 그러나 일부 사용자에게는 레이블을 추가하면 스위치가 켜져 있는지 꺼져 있는지 더 쉽게 알 수 있습니다. 시스템에서 제공하는 스위치를 사용하는 경우 iOS, iPadOS, tvOS, visionOS 및 watchOS는 사용자가 켜기/끄기 레이블을 켜면 그 안에 문자가 자동으로 표시됩니다. 86 | 87 | | on/off 레이블을 끈 경우 | on/off 레이블을 킨 경우 | 88 | | ----------------------- | ----------------------- | 89 | | ![An illustration of two switches. The on/off labels are turned off.](https://docs-assets.developer.apple.com/published/a8ffdabefeb92d1f9c364a973ff3a9dc/switches-without-labels@2x.png) | ![An illustration of two switches. The on/off labels are turned on.](https://docs-assets.developer.apple.com/published/8020de55fd585edbf1d0733b518a7a7e/switches-with-labels@2x.png) | 90 | 91 | 92 | ## 링크에 밑줄과 같은 색상 외에 시각적 힌트(표시)를 추가하는 것도 고려해 보세요. 93 | 색상을 사용하여 링크를 식별하는 것은 좋지만 색상을 유일한 표시로 사용하면 색맹이나 인지 또는 상황 주의력 장애가 있는 사람은 구분을 인식하지 못할 수 있습니다. 94 | 95 | ## 유저 입력(User-input) 96 | - ### 사람들이 타이핑이나 제스처 대신 음성으로 정보를 입력할 수 있도록 하세요. 97 | 텍스트 입력 필드에 받아쓰기 버튼을 추가하면 사람들이 선호하는 입력 방법으로 음성을 선택할 수 있습니다. 사용자 지정 키보드를 만드는 경우 받아쓰기용 마이크 키를 포함해야 합니다. 98 | 99 | - ### 음성만으로 중요한 작업을 수행할 수 있도록 Siri 또는 바로가기를 지원하세요. 100 | 사람들이 앱에서 Siri 상호 작용을 사용하도록 돕는 방법에 대해 자세히 알아보려면 [Siri](https://developer.apple.com/design/human-interface-guidelines/siri)를 참조하세요. 101 | 102 | - ### 가능하면 사람들이 일반 텍스트를 선택할 수 있도록 해주세요. 103 | 많은 사람들이 번역 및 정의에 대한 입력으로 선택한 텍스트를 사용하는 데 의존합니다. 104 | 105 | ## 햅틱(Haptics) 106 | - ### 사용 가능한 경우 시스템 정의 햅틱을 지원하세요. 107 | 많은 사람들이 디스플레이를 볼 수 없을 때 앱과 상호 작용하기 위해 햅틱에 의존합니다. 예를 들어, 시스템 앱은 작업이 성공 또는 실패했거나 이벤트가 곧 발생할 때 사람들에게 알리기 위해 햅틱을 재생합니다. 사람들이 혼동하지 않도록 앱에서 시스템에서 정의한 햅틱을 **일관되게** 사용해야 합니다. 지침은 햅틱 재생하기를 참조하세요. 108 | 109 | > 참고 110 | > 111 | > 햅틱을 지원하지 않는 플랫폼에서는 사람들이 사용자 지정 개체와 상호 작용할 때 사운드와 같은 다른 방법을 사용하여 피드백을 제공하세요. 112 | 113 | ## VoiceOver 114 | 보이스오버는 보이는 콘텐츠에 대한 음성 설명을 제공하여 디스플레이를 볼 수 없을 때 정보를 얻고 탐색할 수 있도록 도와줍니다. visionOS에서 VoiceOver는 공간 오디오를 사용하여 접근 가능한 개체의 위치를 알려줍니다. 115 | > 중요 116 | > 117 | > visionOS에서 VoiceOver가 켜져 있으면 사용자 지정 제스처를 정의하는 앱은 기본적으로 손 입력을 수신하지 않습니다. 대신 사용자는 앱이 손 입력을 해석하는 것에 대해 걱정할 필요 없이 VoiceOver 제스처를 수행하여 앱을 탐색할 수 있습니다. VoiceOver의 직접 제스처 모드에서는 표준 제스처를 처리하지 않고 앱이 손 입력을 직접 처리하도록 합니다. [Improving accessibility support in your visionOS app](https://developer.apple.com/documentation/visionOS/improving-accessibility-support-in-your-app) 개발자 문서를 참조하세요. 118 | 119 | ## 컨텐츠 설명 120 | - ### 의미를 전달하는 모든 이미지에 대체 설명을 제공하세요. 121 | 콘텐츠에 의미 있는 이미지를 설명하지 않으면 VoiceOver 사용자가 앱을 충분히 경험하지 못하게 됩니다. 유용한 설명을 작성하려면 이미지를 볼 수 있는 사람에게 자명하게 설명할 수 있는 내용을 보고하는 것부터 시작하세요. 보이스오버는 이미지와 캡션을 둘러싼 텍스트를 읽으므로 이미지 자체에서 전달되는 정보에 초점을 맞춰 설명하세요. 122 | 123 | 124 | ![A partial screenshot of a summary screen in the Activity app on iPhone. The activity rings element has a frame around it, representing the active element in VoiceOver.](https://docs-assets.developer.apple.com/published/c6b54e401411a6488486e5b960f05ab5/image-with-alt-text@2x.png) 125 | > 이 화면의 경우, 대체 설명은 "Moving: 125 percent; Exercise: zero percent; Standing: 58 percent."입니다. 126 | 127 | - ### 인포그래픽에 완전히 액세스할 수 있도록 하세요. 128 | 인포그래픽이 전달하는 내용을 설명하는 간결한 설명을 제공하세요. 사람들이 인포그래픽과 상호 작용하여 더 많은 정보나 다른 정보를 얻을 수 있다면 VoiceOver 사용자도 이러한 상호 작용을 사용할 수 있도록 해야 합니다. 접근성 API는 사용자 지정 대화형 요소를 표현하는 방법을 제공하므로 보조 기술을 사용하는 데 도움이 될 수 있습니다. 129 | 130 | - ### 이미지가 순전히 장식용이고 중요한 내용을 전달하기 위한 것이 아니라면 보조 기술에서 이미지를 숨기세요. 131 | 보이스오버가 순전히 장식적인 이미지를 설명하도록 하면 사람들의 시간을 낭비하고 아무런 이점 없이 인지 부하만 가중시킬 수 있습니다. 132 | 133 | - ### 각 페이지에 고유한 제목을 부여하고 정보 계층 구조에서 섹션을 식별할 수 있는 제목을 제공하세요. 134 | 사람들이 페이지에 도착하면 제목은 보조 기술을 통해 가장 먼저 접하는 정보입니다. 사람들이 앱의 구조를 쉽게 이해할 수 있도록 각 페이지마다 콘텐츠나 목적을 간결하게 설명하는 고유한 제목을 만드세요. 마찬가지로, 사람들이 각 페이지의 정보 계층 구조에 대한 마인드맵을 구축하는 데 도움이 되는 정확한 섹션 제목이 필요합니다. 135 | 136 | - ### 모든 사람이 비디오 및 오디오 콘텐츠를 즐길 수 있도록 지원하세요. 137 | 폐쇄 자막(Closed captions), 오디오 설명 및 자막을 제공하면 사람들이 자신에게 적합한 방식으로 오디오 및 비디오 콘텐츠를 활용할 수 있도록 도울 수 있습니다. 138 | 139 | > Closed Caption: 자막의 표시 여부를 설정 할 수 있는 자막을 뜻함 140 | 141 | 142 | Closed Caption은 사람들에게 비디오의 청각적 정보를 텍스트와 동등한 수준으로 제공합니다. 또한 Closed Caption을 사용하여 동일한 콘텐츠에 대해 여러 번역을 제공함으로써 시스템이 디바이스의 현재 설정과 일치하는 버전을 선택하도록 할 수도 있습니다. Closed Caption을 항상 사용할 수 있는 것은 아니므로 자막도 함께 제공하는 것이 중요합니다. 143 | 144 | 오디오 설명은 시각적으로만 표시되는 중요한 정보를 음성 내레이션으로 제공합니다. 145 | 146 | Transcript은 청각 및 시각 정보를 모두 포함하여 동영상에 대한 완전한 텍스트 설명을 제공하므로 사람들이 다양한 방식으로 동영상을 즐길 수 있습니다. 147 | 148 | 개발자 가이드를 보고 싶다면, [Selecting Subtitles and Alternative Audio Tracks](https://developer.apple.com/documentation/avfoundation/media_playback/selecting_subtitles_and_alternative_audio_tracks) 문서를 참조하세요. 149 | 150 | ## Navigation 151 | - ### VoiceOver 사용자가 모든 요소를 탐색할 수 있는지 확인하세요. 152 | VoiceOver는 UI 요소의 접근성 정보를 사용하여 사람들이 각 요소의 위치와 해당 요소가 수행할 수 있는 작업을 이해하는 데 도움을 줍니다. 시스템에서 제공하는 UI 구성 요소에는 기본적으로 이 접근성 정보가 포함되어 있지만, 사용자가 정보를 제공하지 않으면 VoiceOver가 사용자 지정 요소를 검색하고 사용하는 데 도움을 줄 수 없습니다. 개발자 지침은 [Accessibility modifiers](https://developer.apple.com/documentation/SwiftUI/View-Accessibility)을 참조하세요. 153 | 154 | - ### 요소의 그룹화, 순서 지정 또는 연결 방법을 지정하여 VoiceOver 환경을 개선하세요. 155 | 근접성, 정렬 및 기타 문맥적 단서는 시각 장애인이 보이는 요소 간의 관계를 인식하는 데 도움이 될 수 있지만 이러한 단서는 VoiceOver 사용자에게는 잘 작동하지 않습니다. 앱에서 요소 간의 관계가 시각적으로만 표시되는 부분이 있는지 살펴보고 이러한 관계를 VoiceOver에 적용하세요. 156 | 157 | 예를 들어, 아래 레이아웃은 각 문구가 그 위에 있는 이미지의 캡션임을 암시합니다. 그러나 각 이미지가 해당 문구와 함께 그룹화되어야 한다는 것을 VoiceOver에 알려주지 않으면 VoiceOver는 "다양한 망고가 들어 있는 큰 용기. 녹색 아티초크가 많이 들어 있는 큰 용기. 망고는 망기페라 속에 속하는 나무에서 나옵니다. 아티초크는 다양한 종류의 엉겅퀴에서 나옵니다." 보이스오버는 기본적으로 요소를 위에서 아래로 읽기 때문에 이런 일이 발생합니다. 개발자 지침은 [`shouldGroupAccessibilityChildren`](https://developer.apple.com/documentation/objectivec/nsobject/1615143-shouldgroupaccessibilitychildren)을 참조하세요. 158 | 159 | ![OGggCaX.png](https://i.imgur.com/OGggCaX.png) 160 | 161 | - ### 표시되는 콘텐츠나 레이아웃이 변경되면 VoiceOver에 알리세요. 162 | 콘텐츠나 레이아웃이 예기치 않게 변경되면 콘텐츠에 대한 머릿속 지도가 더 이상 정확하지 않다는 것을 의미하므로 VoiceOver 사용자는 매우 혼란스러워할 수 있습니다. VoiceOver 및 기타 보조 기술이 콘텐츠에 대한 이해를 업데이트하는 데 도움이 될 수 있도록 눈에 보이는 변경 사항을 보고하는 것이 중요합니다. 개발자 지침은 [`UIAccessibility.Notification`](https://developer.apple.com/documentation/uikit/uiaccessibility/notification)(UIKit) 또는 [`NSAccessibility.Notification`](https://developer.apple.com/documentation/appkit/nsaccessibility/notification)(AppKit)을 참조하세요. 163 | 164 | - ### 컨트롤이 다른 웹 페이지 또는 앱을 열 때 사용자가 예측할 수 있도록 지원하세요. 165 | 컨텍스트가 예기치 않게 변경되면 혼란을 야기하고 사람들이 현재 경험에 대한 마인드 맵(정신적 모델, 추론할 수 있는 정보)을 갑자기 다시 구축해야 할 수 있습니다. 컨텍스트의 잠재적 변화에 주의를 환기시키는 한 가지 방법은 버튼의 제목에 줄임표를 추가하는 것입니다. 시스템 전체에서 제목 뒤에 줄임표를 붙이는 것은 버튼이 사람들이 작업을 완료할 수 있는 다른 창이나 보기를 연다는 것을 알리는 표준 방법입니다. 예를 들어 iOS 및 iPadOS의 Mail에서는 메시지 이동 버튼에 줄임표를 추가하여 사람들이 선택할 수 있는 대상 목록을 나열하는 별도의 보기가 열렸음을 알립니다. 166 | 167 | - ### 모든 중요한 인터페이스 요소에 대체 텍스트 레이블을 제공하세요. 168 | 대체 텍스트 레이블은 눈에 보이지는 않지만 VoiceOver가 앱 요소를 음성으로 설명해 주므로 시각 장애가 있는 사용자가 더 쉽게 탐색할 수 있습니다. 시스템에서 제공하는 컨트롤에는 기본적으로 유용한 레이블이 있지만 사용자 지정 요소에 대한 레이블을 만들어야 합니다. 예를 들어 사용자 지정 평점 버튼을 나타내는 접근성 요소를 만드는 경우 "Rate"이라는 레이블을 제공할 수 있습니다. 169 | 170 | - ### 필요한 경우 VoiceOver 로터를 지원합니다. 171 | VoiceOver 사용자는 로터라는 컨트롤을 사용하여 제목, 링크 또는 기타 섹션 유형별로 문서 또는 웹 페이지를 탐색할 수 있습니다. 로터는 점자 키보드를 불러올 수도 있습니다. 로터로 이러한 항목을 식별하여 VoiceOver 사용자가 앱에서 관련 항목 사이를 탐색할 수 있도록 도울 수 있습니다. 개발자 지침은 [`UIAccessibilityCustomRotor`](https://developer.apple.com/documentation/uikit/uiaccessibilitycustomrotor) 및 [`NSAccessibilityCustomRotor`](https://developer.apple.com/documentation/appkit/nsaccessibilitycustomrotor)를 참조하십시오. 172 | 173 | > 로터: 실제 다이얼을 돌리는 것 처럼, iOS 또는 iPadOS 기기의 화면에서 손가락을 돌리는 것. 174 | 175 | ![](https://support.apple.com/library/content/dam/edam/applecare/images/en_US/iOS/ios13-iphone-xs-safari-voiceover-rotor-hero.jpg) 176 | 177 | - ### iPadOS, macOS 및 visionOS에서는 키보드를 사용하여 앱의 모든 구성 요소를 탐색하고 상호 작용할 수 있도록 해야 합니다. 178 | 전체 키보드 액세스를 켜고 키보드만 사용하여 환경의 모든 작업을 수행할 수 있는 것이 가장 이상적입니다. [accessibility keyboard shortcuts(접근성 키보드 단축키)](https://support.apple.com/en-us/HT204434) 외에도 많은 사람들이 항상 사용하는 수많은 다른 [keyboard shortcuts(키보드 단축키)](https://support.apple.com/en-us/HT201236)를 정의합니다. 모든 사용자를 지원하려면 앱에서 시스템에서 정의한 키보드 단축키를 재정의하지 않는 것이 중요합니다. 자세한 내용은 [Keyboards](https://developer.apple.com/design/human-interface-guidelines/keyboards)를 참조하세요. 179 | 180 | ## 텍스트 표기 181 | 182 | - ### iOS, iPadOS, tvOS, visionOS 및 watchOS에서 동적 유형(Dynamic Type)을 사용하여 앱 레이아웃이 모든 글꼴 크기에 맞게 조정되는지 테스트합니다. 183 | 동적 유형을 사용하면 사용자가 자신에게 적합한 글꼴 크기를 선택할 수 있습니다. 디자인이 크기를 조정할 수 있는지, 텍스트와 글리프가 모든 글꼴 크기에서 가독성이 있는지 확인합니다. 예를 들어 iPhone 또는 iPad의 경우 설정 > 접근성 > 디스플레이 및 텍스트 크기 > 더 큰 텍스트에서 더 큰 접근성 텍스트 크기를 켜고 앱이 편안하게 읽을 수 있는지 확인하세요. 각 플랫폼에 대한 동적 유형 크기 표는 [Apple Design Resources](https://developer.apple.com/design/resources/)에서 다운로드할 수 있습니다. 184 | 185 | 186 | 187 | 188 | 189 | | 작은 테스트 | 큰 텍스트 | 190 | | ----------- | --------- | 191 | | ![](https://i.imgur.com/b2Kcb8l.png) | ![](https://i.imgur.com/VyaXQfo.png) | 192 | 193 | - ### 글꼴 크기가 커질수록 텍스트 잘림을 최소화하세요. 194 | 일반적으로 가장 큰 글꼴 크기를 가장 큰 접근성 글꼴 크기로 표시하는 것을 목표로 합니다. 사용자가 별도의 보기를 열어 나머지 콘텐츠를 읽을 수 있는 경우가 아니라면 스크롤 가능한 영역에서 텍스트를 잘라내지 마세요. 유용한 양의 텍스트를 표시하는 데 필요한 만큼의 줄을 사용하도록 레이블을 구성하여 레이블에서 텍스트가 잘리는 것을 방지할 수 있습니다(개발자 지침은 [`numberOfLines`](https://developer.apple.com/documentation/uikit/uilabel/1620539-numberoflines)를 참조하세요). 195 | 196 | - ### 큰 글꼴 크기에서 레이아웃을 조정하는 것을 고려합니다. 197 | 가로로 제한된 환경에서 글꼴 크기가 커지면 인라인 항목과 컨테이너 경계로 인해 텍스트가 혼잡해져 가독성이 떨어질 수 있습니다. 예를 들어 글리프나 타임스탬프와 같은 보조 항목과 함께 텍스트를 인라인으로 표시하는 경우 텍스트의 가로 공간이 줄어듭니다. 글꼴 크기가 큰 경우 인라인 레이아웃으로 인해 텍스트가 잘리거나 텍스트와 보조 항목이 겹칠 수 있습니다. 이 경우 텍스트가 보조 항목 위에 표시되는 스택형 레이아웃을 사용하는 것이 좋습니다. 마찬가지로 여러 열의 텍스트는 각 열이 가로 공간을 제약하기 때문에 큰 글꼴 크기에서는 가독성이 떨어질 수 있습니다. 이 경우 글꼴 크기가 커지면 열 수를 줄여 텍스트 잘림을 방지하고 전체적인 가독성을 개선하는 것이 좋습니다. 개발자 지침은 [`isAccessibilityCategory`](https://developer.apple.com/documentation/uikit/uicontentsizecategory/2897444-isaccessibilitycategory)를 참조하세요. 198 | 199 | 200 | | 작은 텍스트 크기에서는 메일에 발신자 이름과 함께 날짜가 인라인으로 표시됩니다. | 가장 큰 접근성 텍스트 크기에서 메일은 받는 사람 이름 아래에 날짜를 표시합니다. | 201 | | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | 202 | | ![](https://i.imgur.com/VdQMbt5.png) | ![](https://i.imgur.com/uR8Eh1a.png) | 203 | 204 | - ### 글꼴 크기가 커지면 의미 있는 인터페이스 아이콘의 크기도 커집니다. 205 | 중요한 정보를 전달하기 위해 인터페이스 아이콘을 사용하는 경우 큰 글꼴 크기로도 쉽게 볼 수 있도록 하세요. [SF Symbols](https://developer.apple.com/design/human-interface-guidelines/sf-symbols)을 사용하면 동적 유형 크기 변경에 따라 자동으로 크기가 조정되는 아이콘을 사용할 수 있습니다. 206 | 207 | ![](https://i.imgur.com/kLI9kZF.png) 208 | 209 | - ### 현재 글꼴 크기에 관계없이 일관된 정보 계층 구조를 유지합니다. 210 | 예를 들어 글꼴 크기가 매우 큰 경우에도 기본 요소를 뷰의 맨 위에 유지하여 사람들이 이러한 요소를 놓치지 않도록 합니다. 211 | 212 | - ### 앱에서 일반 또는 무거운 글꼴 가중치를 선호합니다. 213 | 일반, 중간, 세미볼드 또는 굵게 글꼴 가중치를 사용하는 것이 눈에 더 잘 띄므로 이를 고려하세요. 보기 어려울 수 있는 초경량, 엷음, 옅은 글꼴 가중치는 피하세요. 214 | 215 | - ### 사람들이 굵은 텍스트를 켰을 때 앱이 올바르게 반응하고 보기 좋게 표시되는지 확인하세요. 216 | iOS, iPadOS, tvOS, visionOS, watchOS에서는 굵은 텍스트 접근성 설정을 켜서 텍스트와 기호를 더 쉽게 볼 수 있도록 합니다. 이에 따라 앱은 모든 텍스트를 더 굵게 만들고 모든 글리프에 스트로크(획) 가중치를 높여야 합니다. 시스템 글꼴과 SF 기호는 굵은 텍스트 접근성 설정에 맞게 자동으로 조정됩니다. 217 | 218 | ![](https://i.imgur.com/QditMmf.png) 219 | 220 | - ### 사용자 지정 글꼴이 읽기 쉬운지 확인하세요. 221 | 사용자 지정 서체는 때때로 읽기 어려울 수 있습니다. 브랜딩 목적이나 몰입감 있는 게임 환경을 만들기 위해 사용자 지정 글꼴이 꼭 필요한 앱이 아니라면 일반적으로 시스템 글꼴을 사용하는 것이 가장 좋습니다. 사용자 지정 글꼴을 사용하는 경우 작은 크기라도 읽기 쉬운 글꼴인지 확인하세요. 222 | 223 | - ### 전체 텍스트 정렬(justication)은 피하세요. 224 | 전체 정렬 텍스트에 의해 생성된 공백은 많은 사람들이 텍스트를 읽고 집중하기 어렵게 만드는 패턴을 만들 수 있습니다. 왼쪽 정렬(또는 오른쪽에서 왼쪽으로 쓰는 언어의 경우 오른쪽 정렬)은 난독증과 같은 학습 및 문해력 문제가 있는 사람들에게 프레임 참조를 제공합니다. 225 | 226 | - ### 긴 텍스트 구절에는 이탤릭체나 모두 대문자를 사용하지 마세요. 227 | 이탤릭체와 대문자는 가끔 강조하기에는 좋지만 이러한 스타일을 과도하게 사용하면 텍스트를 읽기 어렵게 만듭니다. 228 | 229 | ## 색상 및 효과 230 | - ### 사물을 구분하거나 중요한 정보를 전달할 때 색상에만 의존하지 마세요. 231 | 색상을 사용하여 정보를 전달하는 경우 모든 사람이 정보를 인식할 수 있도록 텍스트 레이블이나 글리프 모양을 제공해야 합니다. 232 | 233 | - ### 텍스트에 시스템 색상을 선호합니다. 234 | 텍스트에 시스템 색상을 사용하면 색상 반전 및 대비 증가와 같은 접근성 설정에 올바르게 반응합니다. 235 | 236 | - ### 두 상태 또는 값을 구분하는 유일한 방법으로 색상 조합을 사용하지 마세요. 237 | 많은 색맹은 파란색과 주황색을 구분하기 어렵고, 빨간색과 녹색, 빨간색과 검은색, 빨간색 또는 녹색과 회색을 조합하는 것도 문제가 될 수 있습니다. 상태나 값을 전달하기 위해 색상 조합을 사용하는 것이 합리적이라면 모든 사람이 정보를 인식할 수 있도록 추가적인 시각적 표시를 포함하세요. 예를 들어 빨간색과 녹색 원을 사용하여 오프라인과 온라인을 표시하는 대신 빨간색 사각형과 녹색 원을 사용할 수 있습니다. 일부 이미지 편집 소프트웨어에는 색맹을 증명하는 데 도움이 되는 도구가 포함되어 있습니다. 238 | 239 | | 일반 모드 | 색약 모드 | 240 | | --------- | --------- | 241 | | ![A screenshot of the History view of the Activity app. The default colors of red, green, and blue are visible.](https://docs-assets.developer.apple.com/published/d543ffc547c6d078b7ff74958c641b88/color-blindness-full-color@2x.png) | ![A screenshot of the History view of the Activity app. The color red is replaced by dark gray, green is replaced by yellow, and blue is replaced by light gray.](https://docs-assets.developer.apple.com/published/9cca1cf0b16eaaae605b89d4c16c126c/color-blindness-protanopia@2x.png) | 242 | 243 | - ### View가 색상 반전에 올바르게 반응하는지 확인합니다. 244 | 어두운 배경에서 항목을 보는 것을 선호하는 경우 색상 반전 기능을 켤 수 있습니다. 색상 반전의 스마트 반전 모드에서는 이미지, 동영상 및 풀컬러 아이콘(예: 앱 아이콘 및 테마가 없는 이미지)이 반전되지 않으며 어두운 UI는 어두운 상태로 유지됩니다. 앱 또는 게임을 테스트하여 사용자 지정 보기의 사진 등 이미지가 반전되지 않도록 해야 하는 위치를 찾아보세요. 245 | 246 | - ### 가독성을 높이려면 대비가 강한 색상을 사용하세요. 247 | 글꼴 크기 및 굵기, 색상 밝기, 화면 해상도, 조명 조건 등 다양한 요소가 색상을 인식하는 데 영향을 미칩니다. 텍스트, 글리프, 컨트롤과 같은 시각적 요소의 색상 대비를 높이면 더 많은 사람들이 더 많은 상황에서 앱을 사용할 수 있습니다. UI에서 인접한 색상의 대비가 최소 허용 수준을 충족하는지 확인하려면 Xcode의 접근성 검사기(Accessibility Inspector) 또는 [Web Content Accessibility Guidelines (WCAG, 웹 컨텐츠 접근성 지침)](https://www.w3.org/TR/WCAG21/) 색상 대비 공식에 기반한 온라인 색상 계산기를 사용할 수 있습니다. 일반적으로 작거나 가벼운 텍스트는 가독성을 높이기 위해 대비가 더 커야 합니다. 다음 값을 참고하세요. 248 | 249 | | 텍스트 사이즈 | 텍스트 가중치(Weight) | 최소 명암비 | 250 | | --------------- | --------------------- | ----------- | 251 | | Up to 17 points | All | 4.5:1 | 252 | |18 points and larger| All | 3:1 | 253 | | All | Bold | 3:1 | 254 | 255 | - ### 사람들이 투명도 감소를 켤 때 흐림 및 투명도를 변경합니다. 256 | 예를 들어 흐린 콘텐츠 및 투명도 영역을 대부분 불투명하게 만듭니다. 최상의 결과를 얻으려면 불투명 영역에 흐림 또는 반투명 영역에 사용한 원래 색상 값과 다른 색상 값을 사용하십시오. 257 | 258 | ## Motion 259 | 260 | - ### 경험에 필수적인 경우가 아니라면 애니메이션을 요구하지 마세요. 261 | 일반적으로 사람들이 애니메이션에 의존하지 않고 앱을 사용할 수 있도록 하세요. 262 | 263 | - ### 모션 감소가 켜져 있을 때는 애니메이션을 강화하여 재생합니다. 264 | 확대/축소, 회전 또는 주변 동작과 같은 효과가 포함된 애니메이션을 볼 때 주의가 산만해지거나 어지러움이나 메스꺼움을 느끼는 경우 모션 감소를 설정할 수 있습니다.문제를 일으키는 애니메이션을 끄거나 줄여야 합니다(자세한 내용은 [Responsive design for motion(모션에 대한 반응형 디자인)](https://webkit.org/blog/7551/responsive-design-for-motion/)을 참조하세요). 문제가 있는 애니메이션을 사용하여 중요한 정보를 전달하는 경우 다른 대안을 설계하거나 애니메이션의 효과를 강화하여 동작을 줄이는 것이 좋습니다. 265 | 266 | 예를 들어, 다음과 같이 적용 할 수 있습니다. 267 | 268 | - 바운스 효과를 줄이거나 제스처를 추적하기 269 | - Z축 레이어에서 depth 변화를 애니메이션으로 처리하지 않기 270 | - 블러효과 안팎으로 애니메이션을 적용하지 않기 271 | - 슬라이드 효과를 fade 효과로 바꾸기 272 | 273 | - ### 사람들이 비디오 및 기타 모션 효과를 제어할 수 있도록 합니다. 274 | 버튼이나 다른 제어 방법을 제공하지 않고 동영상이나 효과를 자동 재생하지 않도록 합니다. 275 | 276 | - ### 움직이거나 깜박이는 요소를 표시할 때는 주의하세요. 277 | 미묘한 움직임과 깜박임은 사람들의 주의를 끌 수 있지만, 이러한 효과는 산만할 수 있으며 시각 장애가 있는 사람에게는 유용하지 않습니다. 더 심각한 문제는 일부 깜박임 요소가 간질 발작을 유발할 수 있다는 점입니다. 어떤 경우에도 움직임과 깜빡임을 유일한 정보 전달 수단으로 사용하지 마세요. 278 | 279 | 사용자가 비전OS 앱에서 동작을 경험하는 동안 편안함을 유지하는 데 도움이 되는 추가 지침은 [Motion > visionOS](https://developer.apple.com/design/human-interface-guidelines/motion#visionOS)를 참조하세요. 개발자를 위한 지침은 [Improving accessibility support in your visionOS app](https://developer.apple.com/documentation/visionOS/improving-accessibility-support-in-your-app)를 참조하세요. 280 | 281 | ## 플랫폼 고려사항 282 | - iOS, iPadOS, macOS, tvOS, watchOS는 해당되지 않습니다. 283 | 284 | ### visionOS 285 | - ### 콘텐츠를 착용자의 머리에 고정하지 마세요. 286 | 콘텐츠를 머리에 고정하면 갇힌 느낌을 줄 뿐만 아니라 포인터 컨트롤을 사용하여 콘텐츠와 상호 작용하는 데 방해가 될 수 있습니다. 또한 머리에 고정된 콘텐츠는 시력이 낮은 사람이 가까이 다가가거나 확대경 안쪽에 배치할 수 없기 때문에 사용자가 콘텐츠를 읽지 못할 수도 있습니다. 287 | 288 | #### 손으로 포인트 컨트롤하기 289 | https://github.com/i-colours-u/Human-Interface-Guidelines-KR/assets/60260284/23c7330f-cf78-4bce-85f8-d88379c65842 290 | 291 | 292 | #### 머리로 포인트 컨트롤하기 293 | https://github.com/i-colours-u/Human-Interface-Guidelines-KR/assets/60260284/f84e930a-0e6a-4bee-9ca3-74982676973b 294 | 295 | #### 확대경 (줌 렌즈) 296 | ![visionos-accessibility-zoom-lens@2x](https://github.com/i-colours-u/Human-Interface-Guidelines-KR/assets/60260284/d1241dfe-0c4b-45fa-9f2b-86328809dee7) 297 | 298 | 299 | --- 300 | 301 | ### 연관 내용 302 | - [Inclusion](https://developer.apple.com/design/human-interface-guidelines/inclusion) 303 | 304 | ### 개발자 문서 참고 305 | - [Accessibility](https://developer.apple.com/documentation/accessibility) 306 | - [Accessibility for developers](https://developer.apple.com/accessibility/) 307 | - [Accessibility modifiers](https://developer.apple.com/documentation/SwiftUI/View-Accessibility) 308 | - [Accessibility for UIKit](https://developer.apple.com/documentation/uikit/accessibility_for_uikit) 309 | - [Accessibility for AppKit](https://developer.apple.com/documentation/appkit/accessibility_for_appkit) 310 | 311 | ### 영상 312 | 313 | | [Create accessible spatial experiences](https://developer.apple.com/videos/play/wwdc2023/10034) | [Design considerations for vision and motion](https://developer.apple.com/videos/play/wwdc2023/10078) | [The practice of inclusive design](https://developer.apple.com/videos/play/wwdc2021/10275) | 314 | | -------- | -------- | -------- | 315 | | ![](https://i.imgur.com/0vTInHi.png) | ![](https://i.imgur.com/BOR3KFC.png) | ![](https://i.imgur.com/pRuJIGO.png) | 316 | 317 | 318 | 319 | -------------------------------------------------------------------------------- /Foundations/Layout.md: -------------------------------------------------------------------------------- 1 | # Layout 2 | 3 | ## 다양한 상황에 맞게 조정되는 일관된 레이아웃은 사용자 경험을 더욱 즐겁게 만들고 많은 사람들이 모든 기기에서 좋아하는 앱과 게임을 즐길 수 있도록 도와줍니다. 4 | 5 | ![A sketch of a small rectangle in the upper-left quadrant of a larger rectangle, suggesting the position of a user interface element within a window. The image is overlaid with rectangular and circular grid lines and is tinted yellow to subtly reflect the yellow in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/fe3e14f290a6986d2490634a9e2fab0c/foundations-layout-intro@2x.png) 6 | 7 | 다음 가이드라인은 모든 플랫폼에 맞는 콘텐츠 레이아웃을 디자인하는 데 도움이 됩니다. Apple Vision Pro 공간 전체에 윈도우 및 기타 콘텐츠를 표시하는 방법에 대해 알아보려면 [공간 레이아웃](./Spatial-layout.md)을 참조하세요. 8 | 9 | ## Safe Area 및 레이아웃 가이드 10 | 레이아웃 가이드는 화면에 내용을 위치, 정렬 및 간격을 조절하는 데 도움을 주는 직사각형 영역을 정의합니다. 시스템에는 내용 주변에 표준 여백을 적용하고 최적의 가독성을 위해 텍스트의 너비를 제한하기 쉽게 만드는 미리 정의된 레이아웃 가이드가 포함되어 있습니다. 커스텀 레이아웃 가이드도 만들 수 있습니다. 11 | 12 | Safe Area는 보기 내에서 네비게이션 바, 탭 바, 툴바 또는 윈도우가 제공할 수 있는 다른 UI 요소에 의해 가려지지 않는 영역을 정의합니다. Safe Area는 iPhone의 Dynamic Island이나 일부 Mac 모델의 카메라 하우징과 같은 기기들의 요소들을 피하기 위해 중요합니다. 13 | 14 | iOS, iPadOS, tvOS 및 visionOS에서 시스템은 앱의 시각적 요소에 영향을 미칠 수 있는 시스템 환경 요소들을 정의하고 있습니다. SwiftUI 또는 Auto Layout을 사용하여 인터페이스가 다양한 특성과 상황에 동적으로 적용하도록 할 수 있습니다. 15 | 다음과 같은 상황에 적용이 가능합니다 : 16 | 17 | - 다양한 기기 화면 크기, 해상도 및 색 공간 18 | - 다른 기기 방향 (세로/가로) 19 | - 스플릿 뷰 (아이패드) 20 | - iPad에서의 외부 디스플레이 지원, 디스플레이 줌 및 멀티태스킹 모드 21 | - Dynamic Type 텍스트 크기 변경 22 | - 로컬라이징 기반 국제화 기능, 왼쪽에서 오른쪽 또는 오른쪽에서 왼쪽 레이아웃 방향(LTR, RTL), 날짜/시간/숫자 형식, 글꼴 변형 및 텍스트 길이 23 | - 시스템에서 제공하는 기능이 적용 될 때 24 | 25 | 26 | ## Best practices 27 | 28 | ### - 사용자 경험을 원활하게 유지하면서 콘텐츠가 최대한 동일하게 표시되는 일관된 레이아웃을 설계해야 합니다. 29 | 기기를 회전하거나 window 크기를 조절하거나 다른 디스플레이를 추가하거나 다른 기기로 전환하는 경우에도 사용자는 여전히 잘 작동하고 익숙한 경험을 기대합니다. 시스템에서 정의한 Safe Area, 여백 및 가이드를 존중하고 (사용 가능한 경우) 레이아웃을 조절하기 위한 modifier를 명확하게 지정하여 적응 가능한 인터페이스를 구축하는 데 도움을 줄 수 있습니다. 30 | 31 | 32 | ### - 각 플랫폼에서 중요한 디스플레이 및 시스템 기능을 고려하세요. 33 | Safe Area는 다양한 기기의 코너 반경 및 센서 하우징과 같은 기능을 고려하고 iPhone의 Dynamic Island 또는 iPhone 및 iPad의 홈 인디케이터 및 앱 전환과 같은 시스템 요소와의 간섭을 피하는 데 도움이 됩니다. 또한 Safe Area의 크기가 변경되면 콘텐츠를 동적으로 재배치하여 상호작용하는 구성 요소를 고려하는 데 도움이 됩니다. 34 | 35 | ### - 상대적인 중요성을 전달하기 위해 배치를 활용하세요. 36 | 사람들은 일반적으로 위에서 아래로, 왼쪽에서 오른쪽으로 항목을 읽는 경향이 있으므로 주요 항목을 윈도우, 디스플레이 또는 [시야](https://developer.apple.com/design/human-interface-guidelines/spatial-layout#Field-of-view)의 상단 및 왼쪽에 배치하는 것이 효과적일 수 있습니다. 37 | 38 | ### - 중요한 정보에 충분한 공간을 제공하여 쉽게 찾을 수 있도록 하세요. 39 | 사람들은 가장 중요한 정보를 즉시 보고 싶어하므로 중요하지 않은 세부 사항으로 지저분하게 만들지 않도록 주의해야 합니다. 보조 정보는 window나 디스플레이의 다른 부분에서 사용할 수 있도록 만들 수 있습니다. 40 | 41 | ### - 사람들이 원하는 정보를 찾는 데 도움이 되도록 시각적 그룹을 만드세요. 42 | 예를 들어 빈 공간, 배경 모양, 색상, 소재 또는 구분선을 사용하여 요소가 관련되어 있는 때를 나타내고 정보를 구분 짓는 데 도움이 됩니다. 43 | 44 | ### - 정렬을 사용하여 시각적 스캐닝을 용이하게 하고 조직과 계층을 표현하세요. 45 | 정렬은 앱을 깔끔하고 조직적으로 보이게 만들며, 사람들이 스크롤하거나 눈을 이동하면서 콘텐츠를 추적하는 데 도움을 줄 수 있어 정보를 쉽게 찾을 수 있습니다. 들여쓰기와 함께 정렬은 정보 계층을 이해하는 데도 도움을 줄 수 있습니다. 46 | 47 | 48 | ### - 텍스트 크기 변경에 대비하세요. 49 | 사용자는 다른 텍스트 크기를 선택할 때 대부분의 앱이 응답할 것으로 기대합니다. 텍스트 크기 변경을 수용하기 위해 레이아웃을 조정해야 할 수도 있습니다. 앱에서 텍스트를 표시하는 가이드에 대한 지침은 [Typography](https://developer.apple.com/design/human-interface-guidelines/typography)를 참조하세요. 50 | 51 | ### - 사람들이 현재 숨겨진 콘텐츠를 찾을 수 있도록 시각적 힌트를 제공하는 것을 고려하세요. 52 | 예를 들어 큰 컬렉션에 모든 항목을 한 번에 표시할 수 없는 경우 현재 보이지 않는 추가 항목이 있다는 것을 나타내야 합니다. 플랫폼에 따라 사람들이 뷰와 상호작용함으로써 추가 콘텐츠를 공개할 수 있다는 힌트를 제공하기 위해 항목 일부를 표시할 수도 있습니다. 53 | 54 | ### - 상호작용하는 구성 요소 주변에 충분한 공간을 제공함으로써 사용자가 이를 쉽게 발견할 수 있도록 하세요. 55 | 상호작용하는 구성 요소가 너무 가까이 있거나 다른 콘텐츠가 구성 요소를 가리면 구성 요소를 식별하기 어려울 수 있으며, 이로 인해 앱이나 게임을 사용하기 어려워질 수 있습니다. 56 | 57 | 58 | ### - 여러 기기에서 앱을 미리 보고, 다양한 방향, 로컬라이제이션(언어 및 지역 설정), 텍스트 크기를 사용해 테스트하세요. 59 | 일반적으로 와이드 컬러 같은 기능은 실제 기기에서 미리 보는 것이 가장 좋지만, Xcode Simulator를 사용하여 자르기 및 레이아웃 문제를 확인할 수도 있습니다. 예를 들어 iOS 앱이 가로 모드를 지원하는 경우, 시뮬레이터를 사용하여 기기가 왼쪽 또는 오른쪽으로 회전하는지에 관계없이 레이아웃이 훌륭하게 보이는지 확인할 수 있습니다. 60 | 61 | ### - 필요한 경우 디스플레이 변경에 대응하여 아트워크를 조절하세요. 62 | 예를 들어 다른 환경에서 앱을 보는 경우 - 예를 들어 화면의 종횡비가 다른 경우 - 아트워크가 잘려 보이거나 레터박스(letterboxed) 또는 필러박스(pillarboxed) 모양으로 나타날 수 있습니다. 이런 경우에 아트워크의 종횡비를 변경하지 말고 중요한 시각적 콘텐츠가 보이도록 아트워크를 조절하세요. visionOS에서는 window가 z-축을 따라 이동할 때 시스템이 자동으로 창을 축소합니다. 63 | 64 | 65 | > 레터박스: 상단 하단에 여백이 생기는 현상 66 | > 필러박스: 레터박스와 반대로, 좌우에 여백이 생기는 현상 67 | > 68 | > 디스플레이 크기와 컨텐츠 비율이 맞지 않아서 두 현상이 일어나게 됨. 69 | 70 | ## 플랫폼 별 고려사항 71 | ## iOS, iPadOS 72 | ### - 세로 및 가로 방향을 모두 지원하도록 노력하세요. 73 | 사람들은 다양한 이유로 다른 방향을 선택하며, 일반적으로 앱이 모든 상황에서 잘 작동하기를 기대합니다. 앱이 특정 방향에서만 실행되어야 하는 경우에는 사용자에게 디바이스를 맞추도록 지시하지 마세요. 만약 지원되지 않는 방향으로 디바이스를 들고 있을 때 앱이 자동으로 회전하지 않는다면, 사용자는 직감적으로 회전시키라고 판단할 것입니다. 앱이 가로 방향만 지원하는 경우, 사용자가 디바이스를 왼쪽 또는 오른쪽으로 회전시킬 때 모두 잘 작동하도록 확인하세요. 74 | 75 | 76 | ### - 앱이 특정 디바이스에서 실행되는 경우 해당 디바이스의 모든 화면 크기에서 작동함을 보장하세요. 77 | 다시 말해, iPhone 전용 앱은 모든 iPhone 화면 크기에서 작동해야 하며 iPad 전용 앱은 모든 iPad 화면 크기에서 작동해야 합니다. 자세한 내용은 [Device screen sizes and orientations](https://developer.apple.com/design/human-interface-guidelines/layout#Device-screen-sizes-and-orientations)을 참조하세요. 78 | 79 | ### - 전체 너비(full width) 버튼에 여백을 추가하세요. 80 | 전체 너비 버튼 측면에 표준 시스템 정의 여백을 적용하세요. 화면 하단에 있는 전체 너비 버튼은 일반적으로 둥근 모서리를 가짐과 동시에 Safe Area 하단에 정렬되는 것이 가장 좋으며, 이렇게 함으로써 홈 인디케이터와 충돌하지 않도록 할 수 있습니다. 81 | 82 | ### - 시각적 콘텐츠를 화면 가득 채우도록 하세요. 83 | 배경이 디스플레이 가장자리까지 확장되고, 횡스크롤 가능한 레이아웃(표 및 컬렉션과 같은)이 하단까지 계속되도록 하세요. 84 | 85 | ### - iPad에서는 가로 방향에서 화면 양쪽에 컨트롤을 배치하는 것을 고려하세요. 86 | 화면의 왼쪽과 오른쪽에 컨트롤을 배치하면 사용자가 디바이스를 들고 있는 동안 양손으로 쉽게 접근할 수 있습니다. 87 | 88 | ### - 가능한 경우 화면 하단 가장자리에 상호작용형 요소를 배치하지 마세요. 89 | 방향과 관계없이 사람들은 디스플레이 하단 가장자리에서 시스템 제스처를 사용하여 홈 화면 및 앱 전환기와 같은 기능에 액세스합니다. 이러한 제스처는 이 영역에 구현한 사용자 정의 제스처를 취소할 수 있으므로 주의해야 합니다. 90 | 또한 화면의 모서리에 컨트롤을 배치하는 것은 사용자가 편안하게 접근하기 어려울 수 있으므로 피하세요. 게임에서 컨트롤을 화면 하단 Safe Area 아래에 배치해야 하는 경우 상단과 하단에 배치할 때 일치하는 여백을 사용하세요. 91 | 사용자가 컨트롤과 상호 작용하려고 할 때 실수로 홈 인디케이터를 클릭하지 않도록 충분한 공간을 남겨 두세요. 92 | 93 | ### - Status bar(상태바) 높이가 달라지는 상황에 대비하세요. 94 | 상태 바 아래에 콘텐츠를 표시하는 경우, 필요에 따라 콘텐츠를 동적으로 재배치하는 데 안전 영역을 사용할 수 있습니다. 95 | 96 | ### - 특정한 이점을 주거나 사용자 경험을 향상시킬 때에만 상태창을 숨기세요. 97 | 상태 바는 사람들이 유용하게 여기는 정보를 표시하며 대부분의 앱이 완전히 활용하지 않는 화면 영역을 차지하기 때문에 일반적으로 보이도록 유지하는 것이 좋습니다. 98 | 99 | ## iOS, iPadOS Safe Area 100 | 101 | Safe Area는 뷰 내에서 네비게이션 바, 탭 바, 툴바와 같이 뷰 컨트롤러 자체적인 UI요소들에 의해 가려지지 않는 영역을 정의합니다. 102 | 103 | | iPhone 세로 모드 | iPhone 가로 모드 | 104 | | ---------------- | ---------------- | 105 | |![An illustration of an iPhone in portrait orientation that displays a shaded rectangle, representing the safe area, and two vertical red strips at the left and right edges of the rectangle that represent margins.](https://docs-assets.developer.apple.com/published/d0c4b02329ef3e73ef068c00dd9aba3e/layout-guides-portrait@2x.png) | ![An illustration of an iPhone in landscape orientation that displays a shaded rectangle, representing the safe area, and two vertical red strips at the left and right edges of the rectangle that represent margins.](https://docs-assets.developer.apple.com/published/3ac1ce8a02dc0a3babc7931748d62964/layout-guides-landscape@2x.png) 106 | 107 | 108 | | iPad 세로 모드 | iPad 가로 모드 | 109 | | -------------- | -------------- | 110 | | ![An illustration of an iPad in portrait orientation that displays a shaded rectangle, representing the safe area, and two vertical red strips at the left and right edges of the rectangle that represent margins.](https://docs-assets.developer.apple.com/published/3f8a6632514396967be535fd7ec6e77d/safe-area-portrait@2x.png) | ![An illustration of an iPad in landscape orientation that displays a shaded rectangle, representing the safe area, and two vertical red strips at the left and right edges of the rectangle that represent margins.](https://docs-assets.developer.apple.com/published/1bdc77161228ce6ed4fb5ef4105add66/safe-area-landscape@2x.png) | 111 | 112 | ## iOS 키보드 레이아웃 가이드 113 | iOS 15 이후 버전에서는 현재 키보드가 차지하는 공간을 나타내고 안전 영역 여백을 고려하는 키보드 레이아웃 가이드를 제공합니다. 이 가이드를 사용하면 사용자가 어떤 유형의 키보드를 사용하거나 어디에 위치시키더라도 키보드가 앱의 중요한 부분처럼 느껴지도록 도와줍니다. 개발자 가이드는 [`UIKeyboardLayoutGuide`](https://developer.apple.com/documentation/uikit/uikeyboardlayoutguide)에서 확인할 수 있습니다. 114 | 115 | 116 | | ![An illustration of an iPhone in portrait orientation. A shaded box labeled 'Safe area' appears over the top half of the screen. A shaded box labeled 'Keyboard layout guide' appears over the bottom half of the screen.](https://docs-assets.developer.apple.com/published/c4839fd59dcda19187412f2e7a68ff79/keyboard-layout-guide-keyboard-visible@2x.png) | ![An illustration of an iPhone in portrait orientation. A shaded box labeled 'Safe area' appears over most of the screen. A shaded box labeled 'Keyboard layout guide' appears over the very bottom of the screen.](https://docs-assets.developer.apple.com/published/a6497b7e936917ab450d89501add1cc6/keyboard-layout-guide-keyboard-dismissed@2x.png) | 117 | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | 118 | | 키보드가 표시될 때 레이아웃 가이드는 해당 영역과 위치를 나타냅니다. | 키보드가 해제될 때, 키보드 레이아웃 가이드의 상단은 Safe Area 레이아웃 가이드의 하단과 일치합니다. | 119 | 120 | ## macOS 121 | ### - Window의 하단에 컨트롤 또는 중요한 정보를 배치하는 것을 피하세요. 122 | 사람들은 종종 창을 이동하여 하단 가장자리가 화면 하단 아래로 이동하는 경우가 있습니다. 이렇게 하면 컨트롤이나 중요한 정보가 화면의 하단 가장자리 밖으로 벗어나지 않도록 합니다. 123 | 124 | 125 | ## tvOS 126 | 127 | 텔레비전의 크기는 다양합니다. Apple TV에서 앱 레이아웃은 iPhone이나 iPad에서처럼 화면 크기에 자동으로 적응하지 않습니다. 대신, 앱은 모든 디스플레이에서 동일한 인터페이스를 보여줍니다. 따라서 레이아웃을 설계할 때 다양한 화면 크기에서 훌륭하게 보이도록 특별한 주의를 기울이세요. 128 | 129 | ### - 화면의 Safe Area를 준수하세요. 130 | 주요 콘텐츠를 화면 위 아래에서 60픽셀, 양쪽에서는 80픽셀 내로 들어가도록 설계하세요. 화면 가장자리에 가까운 콘텐츠는 사람들이 볼 때 어려울 수 있으며, 오래된 텔레비전에서 오버스캐닝으로 인해 의도하지 않은 컨텐츠 잘림이 발생할 수 있습니다. 부분적으로 표시되는 화면 밖 콘텐츠 및 의도적으로 화면 밖으로 흐르는 요소만 이 영역 외부에 나타나도록 허용하세요. 131 | 132 | > 오버스캐닝: 텔레비전 화면에서 화면의 가장자리 부분이 잘리는 현상 133 | 134 | ![An illustration of a TV with a safe zone border on all sides. In width, the top and bottom borders measure 60 points, and the side borders both measure 80 points.](https://docs-assets.developer.apple.com/published/d70b487ffcb4619669866e367ef3abd4/visual-design-safe-zone@2x.png) 135 | 136 | ### 포커스 가능한 UI 요소들 사이에 적절한 간격을 포함시키세요. 137 | UIKit과 포커스 API를 사용할 때 UI 요소는 포커스를 받을 때 크기가 커집니다. UI 요소가가 포커스를 받았을 때 요소들이 어떻게 보이는지 고려하고, 중요한 정보와 의도치 않게 겹치지 않도록 주의하세요. 138 | 139 | ![An illustration that uses vertical shaded rectangles to show padding between focusable items.](https://docs-assets.developer.apple.com/published/77f8f9af61ff8a2ccedf54808192c41b/visual-design-padding@2x.png) 140 | 141 | ### 미디어 중심 앱을 만들 때 레이아웃 템플릿을 사용하고 컨텐츠의 모음을 제공하기 위해 그리드를 사용하세요. 142 | 만약 미디어 앱의 레이아웃이 최소한의 레이아웃 사용자 정의로 아름답게 콘텐츠를 표시하기만 하면, 사전 설계된 레이아웃 템플릿을 사용하세요. 만약 앱이 컨텐츠의 모음을 보여줘야 한다면, 원격 제어로 쉽게 탐색하고 빠르게 이동할 수 있도록 콘텐츠를 그리드로 표시하세요. 143 | 144 | 145 | ## 레이아웃 템플릿(Layout templates) 146 | 147 | ### - 애플 TV 템플릿은 깔끔하고 일관된 레이아웃을 제공하여 콘텐츠가 중심에 놓이도록 합니다. 148 | 이러한 템플릿들은 JavaScript와 Apple TV 마크업 언어 (TVML)를 기반으로 하며, 사람들이 앱을 열 때 동적으로 콘텐츠를 로드하고 채웁니다. 이러한 템플릿은 TV 화면에서 멋지게 보이며 스트리밍 미디어에 이상적인 미리 정의된 레이아웃을 가지고 있어서 콘텐츠가 중요한 앱을 만드는 데 유용합니다. 149 | 150 | ### 템플릿을 선택할 때 그 목적을 고려하세요. 151 | 템플릿의 배경, 색상, 크기, 레이아웃 등을 사용자 정의할 수 있지만, 사용자 정의 사항이 템플릿을 불편하게 만들거나 알아보기 어렵게 만든다면 다른 템플릿을 사용하거나 사용자 정의 인터페이스를 디자인하는 것을 고려하세요. 152 | 153 | (tvOS 문서 번역 진행 중) 154 | 155 | --- 156 | 157 | ## visionOS 158 | 159 | 160 | 아래의 지침은 visionOS 앱 또는 게임의 window 내에서 콘텐츠를 배치하는 데 도움이 되며, 사용자에게 익숙하고 사용하기 쉽게 느끼게 할 수 있습니다. 공간에 window을 표시하고 visionOS 앱에서 깊이, 크기 및 시야를 사용하는 데 대한 지침과 최선의 방법에 대한 내용은 [공간 레이아웃(Spatial Layout)](./Spatial-layout.md)을 참조하세요. visionOS window 구성 요소에 대해 더 자세히 알아보려면 [Windows > visionOS](https://developer.apple.com/design/human-interface-guidelines/windows#visionOS)를 참조하세요 161 | 162 | > 참고 163 | > 164 | 표준 window에 깊이를 추가할 때, 콘텐츠는 z-축을 따라 window의 경계를 벗어납니다. 그러나 콘텐츠가 z-축을 따라 너무 멀리 확장되면 시스템이 이를 자르게 됩니다. 165 | 166 | 167 | ### - Window의 콘텐츠를 window의 경계 내에 유지하세요. 168 | visionOS에서 시스템은 window의 XY 평면을 따라 window의 경계 바로 밖에 window 컨트롤을 표시합니다. 예를 들어, 공유 메뉴는 window 위에 나타나고 window 크기 조정, 이동 및 닫기 컨트롤은 그 아래에 나타납니다. 2D 또는 3D 콘텐츠가 이러한 영역을 침범하게 되면, 특히 Window 아래에 있는 컨트롤을 사용하기 어렵게 만들 수 있습니다. 169 | 170 | ### - 일반적으로, Window의 모서리에 중요한 콘텐츠와 컨트롤을 배치하는 것을 피하세요. 171 | 콘텐츠가 Window의 중심으로부터 멀어질수록, 특히 window이 큰 경우 사용자가 해당 콘텐츠를 보고 상호 작용하기 어려워질 수 있습니다. 172 | 173 | ### - Window의 인터렉티브형 구성 요소를 사용자가 쉽게 집중할 수 있도록 만드세요. 174 | 대화형 구성 요소 주변에 충분한 공간을 포함하여 포커스를 쉽고 편안하게 할 수 있도록하고, 시스템에서 제공하는 호버 효과가 다른 콘텐츠를 가리지 않도록하세요. 예를 들어, 버튼을 배치할 때 버튼의 중심이 최소한 60 포인트 떨어져 있도록 하세요. 지침은 [Eyes](https://developer.apple.com/design/human-interface-guidelines/eyes), [Spatial layout](https://developer.apple.com/design/human-interface-guidelines/spatial-layout), [Buttons > visionOS](https://developer.apple.com/design/human-interface-guidelines/buttons#visionOS)을 참조하세요. 175 | 176 | 177 | ### - window 내에 속하지 않는 추가적인 컨트롤을 표시해야 하는 경우, 오너먼트(ornament)를 사용하세요. 178 | 오너먼트를 사용하면 시스템에서 제공하는 컨트롤과 충돌하지 않으면서 window와 시각적으로 연결된 앱 컨트롤을 제공할 수 있습니다. 예를 들어, window의 툴바와 탭 바는 오너먼트로 나타납니다. 지침은 [Ornaments](https://developer.apple.com/design/human-interface-guidelines/ornaments)를 참조하세요. 179 | 180 | ## watchOS 181 | 182 | ### - 화면의 한 가장자리부터 다른 가장자리까지 콘텐츠를 확장하도록 디자인하세요. 183 | Apple Watch 베젤은 콘텐츠 주위에 자연스러운 시각적 패딩을 제공합니다. 소요되는 공간을 최소화하려면 요소 사이의 패딩을 최소화하는 것을 고려하세요. 184 | 185 | ![An illustration of the Workout app’s main list of workouts on Apple Watch. A callout indicates that the currently focused workout item spans the full width of the available screen area.](https://docs-assets.developer.apple.com/published/180d82ec20b9f85908474cc931d4707e/layout-full-width@2x.png) 186 | 187 | 188 | ### - UI 인터페이스에는 두 개 이상 또는 세 개 이상의 컨트롤을 나란히 배치하지 않도록 하세요. 189 | 일반적으로, 한 행에는 글리프를 포함하는 버튼을 최대 세 개나 텍스트를 포함하는 버튼을 최대 두 개까지만 표시하는 것이 좋습니다. 텍스트 버튼이 화면 전체 너비에 걸쳐 있는 것이 일반적으로 더 나은 방법이지만, 짧은 텍스트 레이블을 가진 두 개의 옆에 나란히 있는 버튼도 화면이 스크롤되지 않는 한 잘 작동할 수 있습니다. 190 | 191 | 192 | ![A diagram of an Apple Watch screen showing two side-by-side buttons beneath three lines of text.](https://docs-assets.developer.apple.com/published/aa5904c73a0b5295604bb551c164325c/layout-controls@2x.png) 193 | 194 | 195 | ### - 사람들이 다른 사람에게 보여주려고 할 수 있는 뷰에서 자동 회전을 지원하세요. 196 | 손목을 뒤로 젖힐 때 앱은 일반적으로 디스플레이를 슬립 상태로 전환하게 되지만, 어떤 경우에는 콘텐츠를 자동으로 회전하는 것이 합리적일 수 있습니다. 예를 들어, 착용자가 친구에게 이미지를 보여주거나 QR 코드를 리더에게 표시하려고 할 수 있습니다. 개발자 가이드는 [`isAutorotating`](https://developer.apple.com/documentation/watchkit/wkextension/2868464-isautorotating)을 참조하세요. 197 | 198 | 199 | ## 제품 스펙 200 | 201 | ### iOS, iPadOS 202 | 203 | |Device|Dimensions (portrait)| 204 | |---|---| 205 | |12.9” iPad Pro|1024x1366 pt (2048x2732 px @2x)| 206 | |11” iPad Pro|834x1194 pt (1668x2388 px @2x)| 207 | |10.5” iPad Pro|834x1194 pt (1668x2388 px @2x)| 208 | |9.7” iPad Pro|768x1024 pt (1536x2048 px @2x)| 209 | |7.9” iPad mini|768x1024 pt (1536x2048 px @2x)| 210 | |10.5” iPad Air|834x1112 pt (1668x2224 px @2x)| 211 | |9.7” iPad Air|768x1024 pt (1536x2048 px @2x)| 212 | |10.2” iPad|810x1080 pt (1620x2160 px @2x)| 213 | |9.7” iPad|768x1024 pt (1536x2048 px @2x)| 214 | |iPhone 15 Pro Max|430x932 pt (1290x2796 px @3x)| 215 | |iPhone 15 Pro|393x852 pt (1179x2556 px @3x)| 216 | |iPhone 15 Plus|430x932 pt (1290x2796 px @3x)| 217 | |iPhone 15|393x852 pt (1179x2556 px @3x)| 218 | |iPhone 14 Pro Max|430x932 pt (1290x2796 px @3x)| 219 | |iPhone 14 Pro|393x852 pt (1179x2556 px @3x)| 220 | |iPhone 14 Plus|428x926 pt (1284x2778 px @3x)| 221 | |iPhone 14|390x844 pt (1170x2532 px @3x)| 222 | |iPhone 13 Pro Max|428x926 pt (1284x2778 px @3x)| 223 | |iPhone 13 Pro|390x844 pt (1170x2532 px @3x)| 224 | |iPhone 13|390x844 pt (1170x2532 px @3x)| 225 | |iPhone 13 mini|375x812 pt (1125x2436 px @3x)| 226 | |iPhone 12 Pro Max|428x926 pt (1284x2778 px @3x)| 227 | |iPhone 12 Pro|390x844 pt (1170x2532 px @3x)| 228 | |iPhone 12|390x844 pt (1170x2532 px @3x)| 229 | |iPhone 12 mini|375x812 pt (1125x2436 px @3x)| 230 | |iPhone 11 Pro Max|414x896 pt (1242x2688 px @3x)| 231 | |iPhone 11 Pro|375x812 pt (1125x2436 px @3x)| 232 | |iPhone 11|414x896 pt (828x1792 px @2x)| 233 | |iPhone XS Max|414x896 pt (1242x2688 px @3x)| 234 | |iPhone XS|375x812 pt (1125x2436 px @3x)| 235 | |iPhone XR|414x896 pt (828x1792 px @2x)| 236 | |iPhone X|375x812 pt (1125x2436 px @3x)| 237 | |iPhone 8 Plus|414x736 pt (1080x1920 px @3x)| 238 | |iPhone 8|375x667 pt (750x1334 px @2x)| 239 | |iPhone 7 Plus|414x736 pt (1080x1920 px @3x)| 240 | |iPhone 7|375x667 pt (750x1334 px @2x)| 241 | |iPhone 6s Plus|414x736 pt (1080x1920 px @3x)| 242 | |iPhone 6s|375x667 pt (750x1334 px @2x)| 243 | |iPhone 6 Plus|414x736 pt (1080x1920 px @3x)| 244 | |iPhone 6|375x667 pt (750x1334 px @2x)| 245 | |4.7” iPhone SE|375x667 pt (750x1334 px @2x)| 246 | |4” iPhone SE|320x568 pt (640x1136 px @2x)| 247 | |iPod touch 5th generation and later|320x568 pt (640x1136 px @2x)| 248 | 249 | > 참고 250 | > 위의 표에 나와 있는 모든 스케일 배율(scale factor)는 UIKit 기준 배율이며, 기본 스케일 팩터와 다를 수 있습니다. 개발자 지침은 [`scale`](https://developer.apple.com/documentation/uikit/uiscreen/1617836-scale) 및 [`nativeScale`](https://developer.apple.com/documentation/uikit/uiscreen/1617825-nativescale)을 참조하세요. 251 | 252 | ## Device size classes 253 | 각각 다른 디바이스에서는 화면 크기를 기준으로 전체 화면에 대한 다른 size 클래스 들이 적용됩니다. 254 | ![An illustration of an iPad and an iPhone in both portrait and landscape orientations. Each device in each orientation includes a red screen and arrowed lines that indicate the full height and width of the screen.](https://docs-assets.developer.apple.com/published/ea27d20bc28241ad815bbca4b92b9b71/layout-size-classes@2x.png) 255 | 256 | 257 | 258 | |Device|Portrait orientation|Landscape orientation| 259 | |---|---|---| 260 | |12.9” iPad Pro|Regular width, regular height|Regular width, regular height| 261 | |11” iPad Pro|Regular width, regular height|Regular width, regular height| 262 | |10.5” iPad Pro|Regular width, regular height|Regular width, regular height| 263 | |9.7” iPad|Regular width, regular height|Regular width, regular height| 264 | |7.9” iPad mini|Regular width, regular height|Regular width, regular height| 265 | |iPhone 15 Pro Max|Compact width, regular height|Regular width, compact height| 266 | |iPhone 15 Pro|Compact width, regular height|Compact width, compact height| 267 | |iPhone 15 Plus|Compact width, regular height|Regular width, compact height| 268 | |iPhone 15|Compact width, regular height|Compact width, compact height| 269 | |iPhone 14 Pro Max|Compact width, regular height|Regular width, compact height| 270 | |iPhone 14 Pro|Compact width, regular height|Compact width, compact height| 271 | |iPhone 14 Plus|Compact width, regular height|Regular width, compact height| 272 | |iPhone 14|Compact width, regular height|Compact width, compact height| 273 | |iPhone 13 Pro Max|Compact width, regular height|Regular width, compact height| 274 | |iPhone 13 Pro|Compact width, regular height|Compact width, compact height| 275 | |iPhone 13|Compact width, regular height|Compact width, compact height| 276 | |iPhone 13 mini|Compact width, regular height|Compact width, compact height| 277 | |iPhone 12 Pro Max|Compact width, regular height|Regular width, compact height| 278 | |iPhone 12 Pro|Compact width, regular height|Compact width, compact height| 279 | |iPhone 12|Compact width, regular height|Compact width, compact height| 280 | |iPhone 12 mini|Compact width, regular height|Compact width, compact height| 281 | |iPhone 11 Pro Max|Compact width, regular height|Regular width, compact height| 282 | |iPhone 11 Pro|Compact width, regular height|Compact width, compact height| 283 | |iPhone 11|Compact width, regular height|Regular width, compact height| 284 | |iPhone XS Max|Compact width, regular height|Regular width, compact height| 285 | |iPhone XS|Compact width, regular height|Compact width, compact height| 286 | |iPhone XR|Compact width, regular height|Regular width, compact height| 287 | |iPhone X|Compact width, regular height|Compact width, compact height| 288 | |iPhone 8 Plus|Compact width, regular height|Regular width, compact height| 289 | |iPhone 8|Compact width, regular height|Compact width, compact height| 290 | |iPhone 7 Plus|Compact width, regular height|Regular width, compact height| 291 | |iPhone 7|Compact width, regular height|Compact width, compact height| 292 | |iPhone 6s Plus|Compact width, regular height|Regular width, compact height| 293 | |iPhone 6s|Compact width, regular height|Compact width, compact height| 294 | |iPhone SE|Compact width, regular height|Compact width, compact height| 295 | |iPod touch 5th generation and later|Compact width, regular height|Compact width, compact height| 296 | 297 | 아이패드에서는 app 혹은 게임을 실행할 때, [multitasking](https://developer.apple.com/design/human-interface-guidelines/multitasking) 상태에서도 size class가 적용이 됩니다. 298 | 299 | 300 | ![](https://i.imgur.com/GYJzSld.png) 301 | 302 | 303 | | 2/3 split view | 1/2 split view | 1/3 split view | 304 | | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | 305 | | ![An illustration of iPad in landscape orientation with the left two-thirds of its screen shaded.](https://docs-assets.developer.apple.com/published/e2c436a11b4dd3636828c6c3844465b2/layout-two-thirds@2x.png) | ![An illustration of iPad in landscape orientation with the left half of its screen shaded.](https://docs-assets.developer.apple.com/published/976669fb0a060433ac179c23d4728186/layout-half@2x.png) | ![An illustration of iPad in landscape orientation with the left one-third of its screen shaded.](https://docs-assets.developer.apple.com/published/f25f319072f994822c92d9ffa63bf9c8/layout-thirds@2x.png) | 306 | 307 | |Device|Mode|Portrait orientation|Landscape orientation| 308 | |---|---|---|---| 309 | |12.9” iPad Pro|2/3 split view|Compact width, regular height|Regular width, regular height| 310 | ||1/2 split view|N/A|Regular width, regular height| 311 | ||1/3 split view|Compact width, regular height|Compact width, regular height| 312 | |11” iPad Pro|2/3 split view|Compact width, regular height|Regular width, regular height| 313 | ||1/2 split view|N/A|Compact width, regular height| 314 | ||1/3 split view|Compact width, regular height|Compact width, regular height| 315 | |10.5” iPad Pro|2/3 split view|Compact width, regular height|Regular width, regular height| 316 | ||1/2 split view|N/A|Compact width, regular height| 317 | ||1/3 split view|Compact width, regular height|Compact width, regular height| 318 | |9.7” iPad|2/3 split view|Compact width, regular height|Regular width, regular height| 319 | ||1/2 split view|N/A|Compact width, regular height| 320 | ||1/3 split view|Compact width, regular height|Compact width, regular height| 321 | |7.9” iPad mini 4|2/3 split view|Compact width, regular height|Regular width, regular height| 322 | ||1/2 split view|N/A|Compact width, regular height| 323 | ||1/3 split view|Compact width, regular height|Compact width, regular height| 324 | 325 | ### watchOS 326 | 327 | |Series|Screen size|Width (pixels)|Height (pixels)| 328 | |---|---|---|---| 329 | |Apple Watch Ultra (1st and 2nd generation)|49mm|410|502| 330 | |7 and later|41mm|352|430| 331 | |7 and later|45mm|396|484| 332 | |4, 5, 6, and SE|40mm|324|394| 333 | |4, 5, 6, and SE|44mm|368|448| 334 | |1, 2, and 3|38mm|272|340| 335 | |1, 2, and 3|42mm|312|390| 336 | 337 | --- 338 | 339 | ## 관련 문서 340 | - [Right to left](https://developer.apple.com/design/human-interface-guidelines/right-to-left) 341 | 342 | ### 개발자 문서 343 | 344 | - [`UITraitCollection`](https://developer.apple.com/documentation/uikit/uitraitcollection) 345 | - [`UITraitEnvironment`](https://developer.apple.com/documentation/uikit/uitraitenvironment) 346 | - [Responding to changing display modes on Apple TV](https://developer.apple.com/documentation/uikit/app_and_environment/responding_to_changing_display_modes_on_apple_tv) 347 | 348 | 349 | ### 영상 350 | 351 | | [What's New in iOS Design](https://developer.apple.com/videos/play/wwdc2019/808) | [Essential Design Principles](https://developer.apple.com/videos/play/wwdc2017/802) | 352 | | -------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | 353 | | ![](https://devimages-cdn.apple.com/wwdc-services/images/48/0F960683-D91F-4CA9-9658-6FBB11F0683D/3272_wide_250x141_1x.jpg) | ![](https://devimages-cdn.apple.com/wwdc-services/images/7/2546ECBD-6443-41EC-921D-6429026F8B67/1700_wide_250x141_1x.jpg) | 354 | 355 | 356 | --------------------------------------------------------------------------------