A navigation bar appears at the top of a window or screen, helping people navigate through a hierarchy of content.
네비게이션 바는 창이나 화면의 상단에 위치하고, 컨텐츠 계층을 탐색하는 데 도움을 줍니다.
A navigation bar provides a natural place to display a title that can help people orient themselves in your app or game, and it can also include controls that affect the content below it.
네비게이션 바는 사용자가 앱이나 게임에서 위치를 인식하는 데 도움이 되는 제목을 표시할 수 있는 자연스러운 공간을 제공하며, 그 아래의 콘텐츠에 영향을 미치는 컨트롤을 포함할 수도 있습니다.
macOS는 네비게이션 바가 없습니다. macOS 앱에서 네비게이션을 지원하려면, 사이드바를 사용하거나 툴바의 뒤로가기 버튼처럼 생긴 네비게이션 컨트롤을 사용해야 합니다. 또한 macOS 창의 제목을 타이틀 바에 표시하는 것이 일반적입니다.
→ macOS에서는 사이드바 또는 버튼으로 네비게이션을 지원합니다.
Use the title area to describe the current window if it provides useful context. A title helps people confirm their location as they navigate your app. However, if titling a navigation bar seems redundant, you can leave the title area empty. For example, Notes doesn’t title the current note because the first line of content typically supplies sufficient context. Your app’s name doesn’t provide useful information about your content hierarchy or any window or screen in your app, so it doesn’t work well as a title.
타이틀 영역을 사용해 현재 창에 유용한 컨텍스트를 제공하세요. 타이틀은 사용자가 앱 내에서 위치를 확인하는 데 도움을 줍니다. 그러나 네비게이션 바에 타이틀을 표시하는 것이 중복되는 것처럼 보인다면 타이틀 영역을 비워 둘 수도 있습니다. 예를 들어 메모 앱에서 현재 노트에 제목을 붙이지 않는 이유는 일반적으로 내용의 첫 줄이 충분한 컨텍스트를 제공하기 때문입니다. 앱 이름은 콘텐츠 계층이나 앱 내의 창 또는 화면에 대한 유용한 정보를 제공하지 않으므로 타이틀로 사용하기에는 적합하지 않습니다.
→ 타이틀은 위치를 확인하는 데 도움을 주지만, 이미 충분한 컨텍스트가 제공된다면 표시하지 않아도 됩니다.
Write a concise title. Aim for a word or short phrase that distills the purpose of the window or screen. Using no more than about 15 characters tends to work well in most cases because it leaves enough room for a Back button and optional controls.
간결한 타이틀을 작성하세요. 창 또는 화면의 목적을 요약하는 한 단어 또는 짧은 구문을 목표로 하세요. 대부분의 경우 약 15자 이상을 사용하지 않는 것이 일반적으로 좋습니다. 이렇게 하면 뒤로 가기 버튼과 옵셔널 컨트롤에 충분한 공간이 남기 때문입니다.
Consider temporarily hiding the navigation bar to provide a distraction-free experience. For example, in iOS, iPadOS, and macOS, Photos hides the navigation bar and other interface elements when people view full-screen photos. If you implement this type of behavior, let people restore the navigation bar by using a familiar gesture, like tapping or swiping down. Although a visionOS window can hide its navigation bar, people generally expect different types of immersive experiences while wearing Apple Vision Pro; for guidance, see Immersive experiences.
일시적으로 네비게이션 바를 숨겨서 쾌적한 환경을 제공하는 것을 고려하세요. 예를 들어, iOS, iPadOS 및 macOS에서는 Photos가 사용자가 전체 화면으로 사진을 볼 때 네비게이션 바와 다른 인터페이스 요소를 숨깁니다. 이러한 유형의 동작을 구현하는 경우 탭이나 아래로 스와이프 등 사용자가 익숙한 제스처를 사용하여 네비게이션 바를 복원할 수 있도록 해야 합니다. visionOS 창은 네비게이션 바를 숨길 수 있지만, 일반적으로 사용자는 Apple Vision Pro를 착용하는 동안 다양한 유형의 몰입형 경험을 기대합니다. 자세한 내용은 Immersive experiences을 참조하십시오.
→ 몰입형 경험을 위해 네비게이션 바를 숨겼다면, 제스처를 사용해 복원할 수 있도록 하세요.
Use the standard back button. People know that the standard back button lets them retrace their steps through a hierarchy of information. If you implement a custom back button, make sure it still looks like a back button, behaves as people expect, matches the rest of your interface, and is consistently implemented throughout your app or game. If you replace the system-provided back button chevron with a custom image, you may need to supply a mask for your custom image, too. For example, iOS uses this mask to animate the button title during transitions.
표준 뒤로가기 버튼을 사용하세요. 사용자들은 표준 뒤로가기 버튼을 사용하면 정보의 계층 구조를 통해 단계를 되돌릴 수 있다는 것을 알고 있습니다. 커스텀 뒤로 가기 버튼을 구현하는 경우, 그것이 여전히 뒤로 가기 버튼처럼 보이고 사용자가 예상한 대로 작동하며 인터페이스의 나머지 부분과 일관되게 구현되도록 해야 합니다. 시스템에서 제공하는 뒤로 가기 버튼 chevron을 커스텀 이미지로 대체하는 경우, 이 이미지에 대한 마스크를 제공해야 할 수도 있습니다. 예를 들어, iOS는 이 마스크를 사용하여 전환 중에 버튼 제목을 애니메이션화합니다.
Make sure buttons that use text labels have enough room. If your navigation bar includes more than one text-labeled button, the text of those buttons may appear to run together, making the buttons indistinguishable. Add separation by inserting a fixed-space item between the buttons. For developer guidance, see UIBarButtonSystemItemFixedSpace.
텍스트 레이블을 사용하는 버튼이 충분한 공간을 갖도록 하세요. 네비게이션 바에 두 개 이상의 텍스트 레이블 버튼이 포함된 경우, 이러한 버튼의 텍스트가 섞인 것처럼 보일 수 있어 버튼을 구분하기 어려울 수 있습니다. 버튼 사이에 고정 간격 항목을 삽입하여 버튼들의 텍스트를 구분해야 합니다. 개발자 지침은 UIBarButtonSystemItemFixedSpace를 참조하세요.
No additional considerations for tvOS. Not supported in macOS.
Consider using a segmented control in a navigation bar to flatten the information hierarchy. For example, Phone uses a segmented control in the navigation bar of the Recents tab to let people switch between viewing all recent calls or only missed ones. If a design like this makes sense in your app, place a segmented control in the navigation bar only at the top level of the hierarchy, and be sure to create accurate back-button labels for the second-level screens. For guidance, see Segmented controls.
평평한 정보 계층 구조를 위해 네비게이션 바에서 분할된 컨트롤을 사용하는 것을 고려해 보세요. 예를 들어, 전화 앱은 최근 탭의 탐색 모음에서 분할된 컨트롤을 사용하여 사람들이 모든 최근 통화 또는 부재중 통화 사이를 전환할 수 있도록 합니다. 이와 같은 디자인이 앱에서 의미있는 경우, 계층 구조의 최상위 수준에 있는 탐색 모음에 분할된 컨트롤을 배치하고, 두 번째 레벨 화면에 대한 정확한 백 버튼 라벨을 만들어야 합니다. 지침은 Segmented controls를 참조하세요.
→ 상/하위 개념이 없는 평평한 계층의 경우 분할된 컨트롤을 사용하여 나타낼 수 있습니다.
역자 첨언
Use a large title to help people stay oriented as they navigate and scroll. For example, Phone uses the large title to clarify the active tab, while Music uses large titles to differentiate content areas like albums, artists, playlists, and radio. By default, a large title transitions to a standard title as people begin scrolling the content, and transitions back to large when people scroll to the top, reminding them of their current location. For developer guidance, see prefersLargeTitles.
사람들이 탐색하고 스크롤할 때 방향을 유지할 수 있도록 대형 제목을 사용하세요. 예를 들어, 전화 앱은 대형 제목을 사용하여 활성 탭을 명확히 하는 반면, 음악 앱은 대형 제목을 사용하여 앨범, 아티스트, 재생 목록 및 라디오와 같은 콘텐츠 영역을 차별화합니다. 기본적으로, 사람들이 콘텐츠를 스크롤하기 시작할 때 큰 제목은 표준 제목으로 전환되고, 사람들이 맨 위로 스크롤할 때 큰 제목으로 다시 전환하여 현재 위치를 상기시켜줍니다. 개발자 지침은 prefersLargeTitles를 참조하세요.
Standard title
Large title
역자 첨언
Consider hiding the border of a large-title navigation bar to enhance the sense of connection between title and content. Use caution applying this design to a standard-title navigation bar, though, because the bar’s title and buttons might be harder to distinguish without a visible border. In contrast, you might want to maintain consistency between the primary and secondary views in a Split View on iPad by using the borderless style in both. You can hide the bottom border of a navigation bar by removing the bar’s shadow (the border automatically reappears when people scroll the content area).
제목과 콘텐츠 사이의 연결감을 향상시키기 위해 큰 제목 네비게이션 바의 테두리를 숨기는 것을 고려해 보세요. 그러나 표준 제목 네비게이션 바에 이 디자인을 적용할 때 주의가 필요합니다. 바의 제목과 버튼은 테두리가 없으면 구별하기가 더 어려울 수 있기 때문입니다. 반면, iPad의 스플릿 뷰의 주 및 보조 뷰 간에 일관성을 유지하려면 테두리가 없는 스타일을 사용하는 것이 좋을 수 있습니다. 네비게이션 바의 하단 테두리를 숨기려면 바의 그림자를 제거하면 됩니다 (콘텐츠 영역을 스크롤할 때 테두리는 자동으로 다시 나타납니다).
역자 첨언
To maintain the legibility of navigation bar items as content scrolls behind them, visionOS uses a variable blur in the bar background. The variable blur anchors the bar above the scrolling content while letting the view’s glass material remain uniform and undivided.
네비게이션 바 항목의 뒤로 컨텐츠가 스크롤되어도 가독성을 유지하기 위해, visionOS는 바 배경에 가변 블러를 사용합니다. 가변 블러는 스크롤 콘텐츠 위에 바를 고정하고 뷰의 유리 재질이 일정하고 통일된 상태로 유지되도록 합니다.
Prefer using standard components in a navigation bar. In visionOS, navigation bar corners use a 60-pt continuous curve. By default, standard buttons, text fields, headers, and footers have corner radii that maintain concentricity with bar corners. If you need to create a custom component, you can use the following formula to help ensure that its corner radius is also concentric with the bar’s corners:
네비게이션 바에서 표준 컴포넌트를 사용하는 것이 좋습니다. visionOS에서 네비게이션 바 모서리는 60포인트 연속 곡선을 사용합니다. 기본적으로 표준 버튼, 텍스트 필드, 헤더 및 푸터는 막대 모서리와 동심도를 유지하는 모서리 반경이 있습니다. 커스텀 컴포넌트를 만들어야 하는 경우 코너 반지름이 바 코너와 일치하도록 하기 위한 다음 공식을 사용할 수 있습니다:
radius = 60 pt - padding, where radius is a custom component’s corner radius and padding is the value of the top padding or the bottom padding, if these values are identical.
반지름 = 60pt - padding. 여기서 반지름은 커스텀 컴포넌트의 corner radius이고, padding은 상단 또는 하단 padding의 값입니다.
Use a large title to help people stay oriented as they navigate and scroll. It generally works well when you display a large title in the view that’s at the top of a navigation stack, while centering a standard title in the navigation bar of all other views in the stack. By default, a large title transitions to a standard title as people begin scrolling the content, and transitions back to large when people scroll to the top, reminding them of their current location. For developer guidance, see prefersLargeTitles.
사람들이 탐색하고 스크롤할 때 방향을 유지할 수 있도록 대형 제목을 사용하세요. 일반적으로 네비게이션 스택의 맨 위에 있는 뷰에서 대형 제목을 표시하는 것이 좋습니다. 나머지 뷰의 네비게이션 바에는 표준 제목을 가운데 정렬하는 것이 좋습니다. 기본적으로 대형 제목은 사용자가 콘텐츠를 스크롤하기 시작하면 표준 제목으로 전환하며, 사용자가 맨 위로 스크롤하면 다시 대형으로 전환하여 현재 위치를 상기시킵니다. 개발자 지침은 prefersLargeTitles를 참조하세요.
The navigation bar appears at the top edge of the Apple Watch screen. The system offers space for a title, the time, and two buttons.
네비게이션 바는 애플 워치 화면의 맨 위에 나타납니다. 시스템은 제목, 시간 및 두 개의 버튼을 위한 공간을 제공합니다.
If the navigation bar doesn’t include any buttons, the system displays the time on the top trailing edge, and a large title on the leading edge, just below the time. However, watchOS resizes and relocates the title and time to accommodate top toolbar buttons.
네비게이션 바가 버튼을 포함하지 않는 경우, 시스템은 상단 후행 모서리에 시간을 표시하고, 그 아래 공간의 선행 모서리에 대형 제목을 표시합니다. 그러나, watchOS는 상단 툴바 버튼들을 수용하기 위해 제목과 시간을 조정하고 재배치합니다.
By default, watchOS displays a back button when displaying hierarchical information.
기본적으로 watchOS는 계층적 정보를 표시하기 위해 뒤로가기 버튼을 표시합니다.
Important
The clock appears in the navigation bar of every nonmodal app screen. You can’t remove the clock, so be sure to account for it in your designs.
시계는 모달이 아닌 모든 앱 화면의 네비게이션 바에 표시됩니다. 이 시계는 제거할 수 없으므로, 디자인 시 고려하도록 하세요.
Inset your content so that it aligns it with the navigation bar buttons, title, and time. You can also use the safe area insets to avoid having your content clipped by the rounded corners. For guidance, see Layout.
네비게이션 바 버튼, 제목 및 시간과 정렬되도록 콘텐츠를 삽입하세요. 또한 둥근 모서리로 콘텐츠가 잘리지 않도록 safe area inset을 사용할 수 있습니다. 지침은 Layout을 참조하세요.
Migrating to new navigation types — SwiftUI
UINavigationBar — UIKit
Change log
작성 날짜 | 작성자 | 수정사항 |
2023/10/16 | 디온 | 초기 번역 |