brunch

You can make anything
by writing

C.S.Lewis

by Lawn Mar 31. 2024

[HIG] Windows

사용자 인터페이스를 표시하는 창

본 문서는 Apple의 Human Interface Guideline(이하 HIG) 문서를 한글로 번역한 것입니다. iOS 생태계 내에서 HIG를 읽으시는 분들이 번역본이 없어 불편함을 겪는 것을 알게 되었고, 이에 한글로 번역을 하게 되었습니다. iOS 커뮤니티 Async Swift에서 자율적으로 모인 9명이 함께 번역했으며, 일체의 상업적인 목적을 띄지 않습니다. 이 문서를 학습에 적극적으로 이용해 주시돼, 상업적인 용도로 이용하시는 것은 지양해 주시기 바랍니다. 감사합니다.

Introduction

창(window)에는 앱 또는 게임의 사용자 인터페이스를 표시하는 보기와 구성 요소가 포함되어 있습니다.

플랫폼, 디바이스 및 상황에 따라 창(또는 뷰)이 사용자에게 감지되지 않을 수 있습니다. 예를 들어 iOS, tvOS, watchOS와 같이 기본이 전체 화면으로 구성된 플랫폼에서는 사람들이 창(window) 안의 콘텐츠를 보고 상호 작용할 뿐 창(window) 자체를 보거나 상호 작용하지 않습니다. 이러한 경우 앱이나 게임에서 창(window)이나 장면 자체의 스타일을 디자인할 필요가 없습니다. 개발자 가이드라인은 Scene 및 UIWindow를 참고하세요.

Note : SwiftUI에서 장면(scene)은 창(window)과 뷰(view)의 계층구조를 포함할 수 있는 앱 인터페이스의 일부입니다. 창(window)과 장면(scene)이라는 용어는 특히 디자인 가이드에서 동의어로 사용되는 경우가 많지만, 사람들에게 앱을 설명하는 도움말 및 기타 콘텐츠에서 이러한 상위 수준의 콘텐츠 컨테이너를 참조해야 하는 경우 장면(scene)이 아닌 창(window)을 사용하는 것이 좋습니다.

iOS, tvOS 및 watchOS와 달리 visionOS, iPadOS 그리고 macOS 에서는 일반적으로 개별 창을 열고, 닫고, 크기를 조정하고, 재배치할 수 있을 뿐만 아니라 여러 창을 동시에 볼 수 있기 때문에 사람들은 창을 시각적으로 구분되는 하나의 개체로 인식합니다. 또한 비전 OS에서는 사람들이 어느 각도에서나 볼 수 있는 3D 콘텐츠를 표시하는 데 최적화된 컨테이너인 볼륨(volume)과 상호 작용할 수 있습니다(자세한 내용은 Volumes을 참고하세요).

macOS에서 사람들은 앱의 창을 사용하는 것에 익숙합니다. Mac 사용자는 일반적으로 동시에 여러 앱을 실행하며 하나의 데스크톱에서 여러 앱의 창을 보고 작업 스타일에 맞게 창을 이동, 크기 조정, 최소화 및 표시하는 등 서로 다른 창을 자주 전환합니다. 사람들이 일반적으로 창의 프레임(frame)을 숨기는 전체 화면 모드를 선택하더라도 전체 화면 전환과 도구 모음 등은 창이 있음을 사용자들에게 알려줍니다.

아래 사항은 사용자들이 별도의 객체로 보고 조작할 수 있는 창(window)에 적용되는 내용입니다. 플랫폼에서 창(window)과 유사한 다른 유형의 뷰(view)는 Alerts, Panels, Popovers 그리고 Sheets를 참고하세요.

창(window) 또는 장면(scene) 내에서 콘텐츠를 배치하는 방법은 Layout을 참고하고, Apple Vision Pro 공간에서 콘텐츠를 배치하는 방법은 Spatial layout을 참고하세요.

Platform considerations

No additional considerations for iOS, tvOS, or watchOS.

iPadOS

iPadOS에서 사람들은 앱의 창(window)을 시각적으로 구별되는 개체로 인식할 수 있기에 멀티태스킹 및 다중 창 기능을 사용합니다. 예를 들어, 사용자는 화면에서 두세 개의 앱을 동시에 보거나 동일한 앱에서 여러 개의 창(window)을 열 수 있습니다. 훌륭한 iPadOS 환경을 만들려면 창(window)과 장면(scene)이 사람들이 기대하는 방식으로 보이고 작동하도록 해야 합니다. 개발자 가이드라인은 Scene을 참고하세요.

iPad에서 멀티태스킹 및 다중 창을 지원하기 위해 창이 다양한 크기에 맞게 조정되고 각 창의 스타일이 콘텐츠와 일치하는지 확인해야 합니다. 가이드라인은 Multitasking on iPad을 참고하세요.

macOS

Mac 사용자는 일반적으로 여러 앱을 동시에 실행하며 하나의 데스크톱에서 여러 앱의 창을 보고 작업 스타일에 맞게 창을 이동, 크기 조정, 최소화, 표시하는 등 여러 창(window)을 이동하는 경우가 많습니다. 일반적으로 창(window)의 프레임을 숨기는 full-screen mode를 선택하더라도 내장된 전체 화면 전환 기능과 툴바는 창이 있다는 사실을 상기시켜 줍니다.

macOS window anatomy

macOS 창은 프레임과 본문 영역으로 구성됩니다. 프레임을 드래그하여 창을 이동할 수 있으며 가장자리를 드래그하여 창 크기를 조정할 수도 있습니다.

프레임은 본문 콘텐츠를 둘러싸는 창(window)의 한 부분입니다. 창 프레임에는 제목 표시줄, 도구모음(toolbar), 탭(tabs) 및 (드물게) 하단 표시줄이 포함될 수 있습니다.

창(window)의 본문은 창(window)의 주요 콘텐츠를 보여줍니다. 이 콘텐츠는 Safari 창의 웹사이트나 미리 보기의 이미지처럼 전체 본문 영역을 채우거나 분할 화면(split view)처럼 여러 개의 하위 뷰(view)에 표시될 수 있습니다. 본문 영역을 넘어 확장되는 콘텐츠는 스크롤할 수 있습니다.

macOS window states

macOS 창은 세 가지 상태 중 하나를 가질 수 있습니다:

메인(main) : 사람들이 가장 먼저 보는 창이 앱의 기본 창입니다. 앱당 하나의 기본 창만 있을 수 있습니다.

키(key) : 활성 창이라고도 하는 키 창은 사용자의 입력을 받아들입니다. 화면에는 한 번에 하나의 키 창만 표시될 수 있습니다. 일반적으로 앱의 메인 창이 키 창이지만, 메인 창 위에 떠 있는 패널과 같은 다른 창이 대신 키 창이 될 수도 있습니다. 일반적으로 사람들은 창을 클릭하여 키 창으로 만들지만, 앱의 독 아이콘을 클릭하여 해당 앱의 모든 창을 앞으로 가져오는 경우 가장 최근에 액세스 한 창만 키 창이 됩니다.

비활성(inactive) : 전면에 표시되지 않는 창은 비활성 창입니다.

시스템에서는 주 창(main window), 키 창(key window), 비활성 창(inactive window)을 시각적으로 식별할 수 있도록 각기 다른 스타일을 제공합니다. 예를 들어 키 창은 제목 표시줄의 닫기, 최소화 및 확대/축소 옵션에서 색상을 사용하지만 비활성 창과 키가 아닌 기본 창은 이러한 옵션에서 회색을 사용합니다. 또한 비활성 창은 생동감(창 아래 콘텐츠의 색상을 창으로 끌어오는 효과)을 사용하지 않으므로 차분하게 보이고 주 창과 키 창보다 시각적으로 더 멀어 보입니다.

Note : 일반적으로 색상이나 글꼴과 같은 일부 창은 사용자가 창의 제목 표시줄이나 텍스트 필드와 같이 키보드 입력이 필요한 구성 요소를 클릭할 때만 키 창이 됩니다.

Using windows in a macOS app

사용자 지정 창(window)이 시스템에서 정의한 스타일을 사용하는지 확인하세요. 사람들은 다양한 화면 창들의 시각적 차이에 의존하여 전경 창을 식별하고 어떤 창이 자신의 입력을 받아들일지 알 수 있습니다. 시스템에서 제공하는 구성 요소를 사용하는 경우 창 상태가 변경되면 창의 배경 및 버튼 모양이 자동으로 업데이트되지만 사용자 지정 스타일을 사용하는 경우에는 이 작업을 직접 수행해야 합니다.

창(window) 콘텐츠가 제목을 불필요하게 만들 정도로 충분한 컨텍스트를 제공하지 않는 한 제목을 표시합니다. 문서 창의 경우 제목은 문서 이름 또는 제목 없음(새 문서의 경우)입니다. 앱 창의 경우 제목은 앱의 이름입니다.

파일 이름을 제목으로 사용해야 하는 경우에는 이해하기 쉽게 만드세요. 예를 들어, 파일 확장명을 표시하거나 숨기는 사람들의 선호도를 반영하고 현지화할 수 있는 파일 표시명을 사용하세요.

제목 표시줄에 파일 시스템 경로를 포함하지 마세요. 경로는 일반적으로 너무 길어서 잘라내지 않고 제목 표시줄에 넣기 어렵고 사람들이 한눈에 이해하기 어렵습니다. 파일 또는 폴더의 전체 경로를 표시해야 하는 경우에는 인스펙터 창과 같은 다른 방법으로 표시하세요.

숫자 접미사를 사용하여 중복된 제목을 구분하세요. 제목의 첫 번째 인스턴스에는 숫자 접미사가 필요하지 않습니다. 다른 창에 동일한 제목이 있는 경우 2로 시작하는 숫자 접미사를 추가합니다(예: 제목 없음, 제목 없음 2, 제목 없음 3).

제목 표시줄을 숨겨도 사람들이 창(window)과 계속 상호작용할 수 있도록 하세요. 창을 닫고 최소화할 수 있는 메뉴 등의 대체 방법을 제공하세요. 사람들이 프레임을 드래그하여 창을 계속 이동할 수 있는지 확인하세요. 창에 툴바가 있고 제목 표시줄이 없는 경우 툴바 항목을 활성화하지 않고도 창을 끌 수 있도록 툴바에 충분한 공간이 있는지 확인하세요.

일반적으로 수정한 문서를 자동 저장할 수 없는 경우에만 점을 사용하여 저장되지 않은 것으로 표시하세요. 문서를 자동 저장할 수 있는 경우, 창 닫기 버튼이나 창 메뉴의 문서 이름 옆에 점을 표시하면 변경 내용을 저장하기 위해 조치를 취해야 한다는 신호가 되므로 표시하지 않는 것이 좋습니다. 제목 표시줄의 문서 제목에 편집됨과 같은 접미사를 추가하는 것은 괜찮지만 자동 저장되거나 사용자가 수동으로 저장을 수행하는 경우에는 이 접미사를 제거해야 합니다.

하단 표시줄을 사용하여 창(window) 내용 또는 창(window) 내에서 선택한 항목과 직접 관련된 소량의 정보를 표시할 수 있습니다. 예를 들어, Finder는 상태 표시줄이라고 하는 하단 막대를 사용하여 윈도우의 총 항목 수, 선택한 항목 수 및 디스크의 사용 가능한 공간을 표시합니다. 하단 막대는 크기가 작기 때문에 표시할 정보가 더 많으면 일반적으로 분할 보기의 뒤쪽에 정보를 표시하는 인스펙터를 사용하는 것이 좋습니다.

중요한 정보나 작업은 하단 막대에 넣지 마세요. 사람들은 종종 아래쪽 가장자리를 숨기는 방식으로 창을 재배치합니다.

visionOS

비전 OS 앱은 창(window) 또는 볼륨(volume)을 사용하여 컨테이너에 콘텐츠를 표시할 수 있습니다. 일반적으로 2D 또는 3D 콘텐츠를 표시할 때는 Mail의 받은 편지함이나 *USDZ 개체가 포함된 Safari의 웹 페이지와 같이 창을 사용합니다. 게임 보드나 지구본과 같은 3D 콘텐츠 및 개체를 표시하려면 일반적으로 volume을 사용합니다.

역자설명 : *USDZ는 애플과 픽사가 같이 만든 AR content를 표시하는 3D file format입니다. USDZ가 3D계의 PNG 같은 것이라고 하며 storage와 sharing을 최적화했다고 합니다.

Note : 시스템은 사람들이 여는 각 창과 볼륨의 초기 위치를 정의합니다. 공유 공간과 전체 공간 모두에서 사람들은 창과 볼륨을 새로운 위치로 옮길 수 있습니다.

비전 OS의 창은 다른 플랫폼의 창과 모양과 동작이 비슷하기 때문에 사람들은 즉시 익숙해집니다. 예를 들어, 비전 OS 창은 직립형 평면에 정렬되고 공유 공간에서 다른 앱 창과 나란히 표시될 수 있으며 사용자가 이동, 크기 조정, 닫을 수 있는 시스템 정의 컨트롤을 제공합니다. 창 관리 컨트롤 외에도 창에는 공유 메뉴, 탭 바(tab bar), 도구 모음(toolbar) 및 하나 이상의 장식(ornaments)을 포함할 수 있습니다.

A window

비전 OS 창은 수정할 수 없는 배경 재질(material)인 유리를 사용하여 빛과 실제 및 가상 물체를 모두 투과할 수 있습니다. 유리창은 콘텐츠가 주변 환경의 일부처럼 느껴지도록 도와주며, 반사광과 그림자를 사용하여 창의 크기와 위치를 전달합니다. 기본 스타일을 사용하여 창을 만들면 자동으로 유리 배경이 적용됩니다. 개발자 가이드라인은 DefaultWindowStyle을 참고하세요.

기본적으로 창 크기는 1280x720 pt입니다. 창이 처음 열리면 시스템은 창을 착용자 앞 약 2미터 앞에 배치하여 약 3미터의 겉보기 너비를 제공합니다.

또한 이 시스템은 표준 창 내의 보기와 컨트롤에 하이라이트와 그림자를 추가하여 깊이감(depth)을 주고 특히 사람들이 창을 비스듬히 볼 때 더욱 실감 나게 느낄 수 있도록 도와줍니다. 표준 창에 3D 콘텐츠를 표시할 수 있지만 콘텐츠가 창 표면에서 너무 멀리 확장되면 시스템에서 잘립니다. 더 깊이 있는 3D 콘텐츠를 표시하려면 볼륨을 사용합니다.

A window containing 3D content

익숙한 인터페이스를 표시하고 익숙한 작업을 지원하려면 표준 창(window)을 사용하는 것이 좋습니다. 사람들이 이미 익숙한 인터페이스를 표시하고 의미 있는 콘텐츠와 활동을 위해 더 몰입감 있는 경험을 예약하여 사람들이 앱에서 집과 같은 편안함을 느낄 수 있도록 하세요. 가이드라인은 몰입형 경험(Immersive experiences)을 참고하세요. 게임 보드와 같이 경계가 있는 3D 콘텐츠를 표시하려면 볼륨을 사용하는 것이 좋습니다.

창(window) 내의 빈 영역을 최소화하는 초기 창 크기를 선택합니다. 빈 영역이 너무 많으면 창이 불필요하게 커 보일 뿐만 아니라 사람들의 공간에 있는 다른 콘텐츠를 가릴 수 있습니다.

창(window) 콘텐츠에 적합한 기본 모양을 선택하세요. 예를 들어, 슬라이드가 넓기 때문에 기본 Keynote 창은 넓고, 대부분의 웹 페이지가 폭보다 훨씬 길기 때문에 기본 Safari 창은 높습니다.

가능하면 사용자가 앱 창(window) 크기를 조정할 수 있도록 하세요. 사람들은 자신의 공간을 맞춤 설정할 때 창 크기를 조정할 수 있기를 원합니다. 최소 및 최대 크기 값을 설정하여 사람들이 창 크기를 조정할 때 쉽게 사이즈를 조정하고, 보기 좋게 유지되도록 할 수 있습니다. 개발자 가이드라인은 창 위치 지정 및 크기 조정(Positioning and sizing windows)을 참고하세요.

앱에서 사람들이 몰입하고 싶어 할 만한 순간이나 콘텐츠를 찾아보세요. 사용자에게 몰입형 환경 제공할 때 더 좋은 상황이나 콘텐츠가 있습니다. 예를 들어 사진 앱에서 파노라마 사진을 확장된 화면으로 열면 사용자가 사진 속에 있는 것처럼 느낄 수 있도록 보여줍니다. 자세한 내용은 몰입형 환경(Immersive experiences)을 참조하세요.

항상 창(window)의 시각적 경계가 장면(scene)의 크기와 일치하는지 확인하세요. 장면(scene)이 창의 크기를 초과하면 창 컨트롤이 잘못 배치되고 창이 사용자가 예상한 대로 표시되지 않아 상호 작용하기 어려울 수 있습니다. 개발자 가이드라인은 장면(Scene)을 참고하세요.