A sidebar can help people navigate your app or game, providing quick access to top-level collections of content.
사이드바는 앱이나 게임을 탐색하는 데 도움이 되며 콘텐츠의 최상위 컬렉션에 빠르게 액세스할 수 있게 합니다.
The term sidebar refers to a list of top-level app areas and collections, almost always displayed in the primary pane of a split view. When people choose an item in a sidebar, the split view displays the item’s details in a secondary pane or — if the item contains a list — the secondary pane presents the list and a tertiary pane presents the details. For example, Mail in iOS, iPadOS, macOS, and visionOS uses sidebar styling and behavior to display the list of accounts and mailboxes, typically displaying the message list in a secondary pane and a message’s content in a tertiary pane.
사이드바 라는 용어는 주로 split view의 primary pane에 표시되는 최상위 앱 영역 및 컬렉션 목록을 나타냅니다. 사람들이 사이드바에서 항목을 선택하면 split view가 해당 항목의 세부 정보를 secondary pane에 표시하거나 - list가 item을 포함하는 경우 - secondary pane이 목록을 표시하고 tertiary pane이 세부 정보를 표시합니다. 예를 들어 iOS, iPadOS, macOS 및 visionOS의 Mail은 사이드바 스타일과 동작을 사용하여 계정 및 메일함의 목록을 표시하며 일반적으로 secondary pane에 메시지 목록을 tertiary pane에 메시지 콘텐츠를 표시합니다.
→ 사이드바는 split view의 primary pane에 표시되는 최상위 앱 영역 + 컬렉션 목록
역자 첨언
A sidebar layout can take a lot of horizontal space, especially if you want the sidebar and its accompanying panes to be visible at the same time. In a layout that’s horizontally constrained, you might want to consider an alternative component, like a tab bar.
특히 사이드바와 동반되는 창들이 같이 보이고 싶을 때, 사이드바 레이아웃은 수평 공간을 많이 차지할 수 있습니다. 수평으로 제한된 layout에서는, 탭 바와 같은 대체 구성 요소를 고려하는 것이 좋습니다.
→ 동반되는 창들이 많을 때, sidebar 보단 탭바와 같은 것들을 고려
역자 첨언
Note
When you use SwiftUI to construct a sidebar interface, you automatically get platform-appropriate appearance and behavior. For developer guidance, see NavigationSplitView. If you don’t use SwiftUI, you can instead use UISplitViewController or NSSplitViewController.
SwiftUI를 사용하여 사이드바 인터페이스를 만들 때 플랫폼별 외관과 동작을 자동으로 얻게 됩니다. 개발자 안내를 보려면 NavigationSplitView 를 참조하십시오. SwiftUI를 사용하지 않는 경우 UISplitViewController 또는 NSSplitViewController 를 대신 사용할 수 있습니다.
→ sidebar의 인터페이스 제작 시 참고할만한 사항
Use a sidebar to help people quickly navigate to key areas of your app or top-level collections of content, like folders and playlists. A sidebar can help you flatten your information hierarchy, giving people access to several peer information categories or modes at the same time.
사이드바를 사용하여 앱의 주요 영역이나 폴더 및 재생 목록과 같은 콘텐츠의 최상위 컬렉션으로 빠르게 이동할 수 있도록 도와주세요. 사이드바는 여러 정보 카테고리나 모드에 동시에 액세스할 수 있도록하여 정보 계층 구조를 평탄화하는 데 도움이 될 수 있습니다.
→ 사이드바를 사용해 계층 간 이동을 쉽게 해야 함
When possible, let people customize the contents of a sidebar. A sidebar lets people navigate to important areas in your app, so it works well when people can decide which areas are most important and in what order they appear.
가능한 경우 사이드바의 내용을 customize 할 수 있도록 해주세요. 사용자가 어떤 영역이 가장 중요하고 어떤 순서로 나타날지 결정할 수 있다면, 사이드바는 앱에서 중요한 영역으로 이동할 때 효과적으로 작동합니다.
→ 사이드바의 contents를 customize 할 수 있게 해야 함
Consider letting people hide the sidebar. People sometimes want to hide the sidebar to create more room for content details or to reduce distraction. When possible, let people hide and show the sidebar using the platform-specific interactions they already know. For example, in iPadOS, people expect to use the built-in edge swipe gesture; in macOS, you can include a show/hide button or add Show Sidebar and Hide Sidebar commands to your app’s View menu. In visionOS, a window typically expands to accommodate a sidebar, so people rarely need to hide it. Avoid hiding the sidebar by default to ensure that it remains discoverable.
사람들이 사이드바를 숨길 수 있도록 허용하는 것을 고려하세요. 사이드바를 숨겨서 콘텐츠 세부 정보의 더 많은 공간을 만들거나 혼란을 줄이기 위해 사람들이 원할 때 사이드바를 숨길 수 있도록 하는 것이 좋습니다. 가능한 경우 iPadOS에서는 기본적으로 내장된 가장자리 스와이프 제스처를 사용하는 것이 일반적이며, macOS에서는 앱의 보기 메뉴에 사이드바 표시/숨기기 버튼을 포함하거나 앱의 보기 메뉴에 "사이드바 보이기" 및 "사이드바 숨기기" 명령을 추가할 수 있습니다. visionOS에서 창은 일반적으로 사이드바를 수용하기 위해 확장되므로 사람들이 그것을 숨길 필요가 거의 없습니다. 사이드바가 발견 가능하도록 하기 위해 기본적으로 사이드바를 숨기지 않도록 선택적으로 피하세요.
→ 사이드바는 기본적으로 표시하되, 각각의 OS의 일반적으로 고려되는 동작구조에 따라 숨기는 것을 허용
In general, show no more than two levels of hierarchy in a sidebar. When a data hierarchy is deeper than two levels, consider using a split view interface that includes a content list between the sidebar items and detail view.
일반적으로 사이드바에서 두개의 레벨 이상의 계층을 표시하지 않아야 합니다. 데이터 계층이 두 수준보다 깊을 때는 사이드바 항목 및 상세 보기 사이에 콘텐츠 목록을 포함하는 분할 뷰 인터페이스를 사용하는 것이 좋습니다.
→ 두개 이상의 계층이 존재하면 사이드바와 분할 뷰를 같이 사용해 콘텐츠 목록을 시각화
역자 첨언
If you need to include two levels of hierarchy in a sidebar, use succinct, descriptive labels to title each group. To help keep labels short, omit unnecessary words. For example, Mail omits the word Messages from the title of each mailbox, using more concise terms like Flagged and Drafts.
사이드바에서 두 레벨의 계층을 포함해야 하는 경우 간결하고 설명적인 레이블을 사용하여 각 그룹에 제목을 붙여야 합니다. 레이블을 짧게 유지하도록 하기 위해 불필요한 단어를 생략하십시오. 예를 들어 Mail은 각 메일함의 제목에서 "메시지"라는 단어를 생략하고 "중요 메시지" 및 "드래프트"와 같은 더 간결한 용어를 사용합니다.
→ 사이드바에서 두 레벨의 계층인 구조를 포함한다면, 간결하고 명확한 레이블을 사용하여 그룹을 명명
역자 첨언
No additional considerations for tvOS. Not supported in watchOS.
tvOS에서는 추가적인 고려사항은 없습니다. watchOS에서는 지원하지 않습니다.
In an iOS app, consider using a tab bar instead of a sidebar. A sidebar interface can require a lot of horizontal space, which might make it too crowded on iPhone, especially in portrait orientation. In contrast, a tab bar works well to let people quickly switch between top-level sections in your app while preserving the current navigation state within each section.
iOS 앱에서는 사이드바 대신 탭바를 사용하는 것이 좋습니다. 사이드바 인터페이스는 가로 공간이 많이 필요할 수 있으므로 iPhone에서는 특히 세로 방향에서 지나치게 혼잡할 수 있습니다. 이에 반해 탭 바는 앱의 최상위 섹션 간을 빠르게 전환하면서 각 섹션 내의 현재 탐색 상태를 유지할 수 있어 유용합니다.
→ iOS에서는 가로가 좁기 때문에, 사이드 바보단 탭바를 활용해 탐색
In an iPadOS app, consider using a sidebar instead of a tab bar. Because a sidebar can display a large number of items, it can make navigating an iPad app more efficient. You can also let people customize a sidebar’s items and let them hide it to make more room for content.
iPadOS 앱에서는 탭 바 대신 사이드바를 사용하는 것이 좋습니다. 사이드바는 많은 항목을 표시할 수 있으므로 iPad 앱을 효율적으로 탐색하는 데 도움이 될 수 있습니다. 또한 사용자가 사이드바 항목을 사용자 지정하고 콘텐츠에 대한 더 많은 공간을 만들기 위해 숨길 수 있도록 허용할 수 있습니다.
→ iPadOS에서는 사이드바를 사용해 앱을 탐색하는 것이 더 효율적임
If necessary, apply the correct appearance to a sidebar. If you’re not using SwiftUI to create a sidebar, you can use the sidebar appearance of a collection view list layout. For developer guidance, see UICollectionLayoutListConfiguration.Appearance.
필요한 경우 사이드바에 올바른 외관을 적용하세요. 사이드바를 만들 때 SwiftUI를 사용하지 않는 경우 컬렉션 뷰 목록 레이아웃의 사이드바 외관을 사용할 수 있습니다. 개발자 안내를 보려면 UICollectionLayoutListConfiguration.Appearance를 참조하십시오.
→ SwiftUI를 사용하지 않고 사이드바를 사용하는 경우, 컬렉션 뷰 리스트 레이아웃으로 사이드 바를 사용할 수 있습니다. UICollectionLayoutListConfiguration.Appearance 참고하세요.
In macOS, a sidebar — also known as a source list — extends to the full height of the window, and uses a rounded-corner appearance for the selected-item highlight.
macOS에서 사이드바는 - 또는 source list라고도 하는 - 창의 전체 높이에 걸쳐 확장되며, 선택한 항목은 둥근 모서리의 형태로 강조가 됩니다.
역자 첨언
A sidebar’s row height, text, and glyph size depend on its overall size, which can be small, medium, or large. You can set the size programmatically, but people can also change it by selecting a different sidebar icon size in General settings. The table below shows the default metrics for a sidebar in macOS.
사이드바의 행 높이, 텍스트 및 글리프 크기는 전체 크기에 따라 달라집니다.[ 작음, 중간 또는 큰 크기 ] 프로그램적으로 사이즈를 조절 할 수 있지만, 사람들은 General settings에서 다른 사이드바 아이콘 크기를 선택하여 변경할 수 있습니다. 아래 표는 macOS의 사이드바에 대한 기본 메트릭을 보여줍니다.
→ 사이드바의 행 높이, 텍스트 및 글리프 크기를 조절 할 수 있습니다. 사용자는 설정에서 크기 조절도 가능함
Sidebar size | Sidebar component | Default metrics |
Small | Row height | 24 pt |
SF Symbol scale | Medium * | |
Icon size | 16x16 px @1x | |
Text size (style) | 11 pt (Subhead) | |
Medium | Row height | 28 pt |
SF symbol scale | Medium | |
Icon size | 20x20 px @1x | |
Text size (style) | 13 pt (Body) | |
Large | Row height | 32 pt |
SF Symbol scale | Medium | |
Icon size | 24x24 px @1x | |
Text size (style) | 15 pt (Title 3) | |
All | Horizontal spacing between cells | 17 pt |
Vertical spacing between cells | 0 pt |
In some cases, a small sidebar uses small-scale SF Symbols by default.
특정 경우, 작은 사이드바는 기본적으로 small-scale SF Symbols를 사용합니다.
Consider using familiar symbols to represent items in the sidebar. SF Symbols provides a wide range of customizable symbols you can use to represent items in your app. If you need to use a bitmap image to create a custom interface icon for the sidebar, create the image in both @1x and @2x resolutions and in the small, medium, and large sizes shown in the table above.
익숙한 기호를 사용하여 사이드바에서 item들을 나타내도록 고려하세요. SF Symbols은 앱 내 항목을 나타내기 위해 사용할 수 있는 다양한 맞춤형 기호를 제공합니다. 사이드바에 사용할 custom 인터페이스 아이콘을 만들기 위해 비트맵 이미지를 사용해야 할 경우 @1x 및 @2x 해상도에서 이미지를 작성하고 위의 표에 표시된 크기로 작성하세요.
→ 사이드바에서 item들을 나타낼 때, SF Symbols 또는 custom 아이콘을 활용
Avoid stylizing your app by specifying a fixed color for all sidebar icons. By default, sidebar icons use the current accent color and people expect to see their chosen accent color throughout all the apps they use. Although a fixed color can help clarify the meaning of an icon, you want to make sure that most sidebar icons display the color people choose.
모든 사이드바 아이콘에 대해 고정된 색상을 지정하여 앱을 스타일화 하지 않도록 주의하세요. 기본적으로 사이드바 아이콘은 현재 강조 색상을 사용하며, 사람들은 선택한 강조 색상이 사용된 모든 앱을 볼 것으로 기대합니다. 고정된 색상은 아이콘의 의미를 명확하게 표현하는 데 도움이 될 수 있지만 대부분의 사이드바 아이콘에서 사람들이 선택한 색상을 표시하도록 해야 합니다.
→ 사용자가 선택한 accent color를 사이드 바의 아이콘을 표시할 때 사용하도록 하는 것이 좋음
If necessary, apply the correct background appearance to a sidebar. If you’re not using SwiftUI to create a sidebar in your macOS app, you may need to specify an opaque background for when the window contains more than one sidebar, or when using a sidebar in a panel or settings window. In all other use cases, use a translucent background for the sidebar.
필요한 경우 사이드바에 올바른 배경 외관을 적용하세요. macOS 앱에서 사이드바를 만들 때 SwiftUI를 사용하지 않는 경우 창에 둘 이상의 사이드바가 포함되거나 패널 또는 설정 창에 사이드바를 사용하는 경우 불투명한 배경을 지정해야 할 수 있습니다. 다른 모든 사용 사례에서는 사이드바에 투명 배경을 사용하세요.
→ 둘 이상의 사이드바, 패널 또는 설정 창에서 사이드바에서는 불투명한 배경을 사용하세요. 하지만, 다른 경우 투명한 배경을 사용
Consider automatically hiding and revealing a sidebar when its container window resizes. For example, reducing the size of a Mail viewer window can automatically collapse its sidebar, making more room for message content.
사이드바를 포함하는 창의 크기가 조정될 때 사이드바를 자동으로 숨기고 표시하는 것을 고려하세요. 예를 들어, Mail 뷰어 창의 크기를 줄이면 사이드바가 자동으로 축소되어 메시지 콘텐츠에 더 많은 공간을 만들 수 있습니다.
역자 첨언
In an editable sidebar, avoid placing edit buttons at the bottom edge of the view. Consider providing buttons that add, remove, manipulate, or get information about items. Buttons at the bottom of the sidebar can hide when the bottom edge of the window is offscreen. To let people add a new sidebar group, include an Add (+) button on the trailing side of the group’s label, next to the disclosure triangle. Provide other actions, like remove, in a context menu or in a menu bar menu. For example, in addition to providing the New Mailbox command in a context menu, Mail also lists it in the Mailbox menu.
편집 가능한 사이드바의 경우 뷰의 하단 가장자리에 편집 버튼을 배치하지 않도록 하세요. 항목 추가, 제거, 조작 또는 item의 정보를 가져오는 버튼을 제공하는 것이 좋습니다. 창의 하단 가장자리가 화면을 벗어날 때 사이드바 하단에 있는 버튼이 가려질 수 있습니다. 새 사이드바 그룹을 추가하도록 허용하려면 해당 그룹 레이블의 트레일링 쪽에 접힘 삼각형 옆에 추가 (+) 버튼을 포함하세요. 제거와 같은 다른 작업은 context menu나 menu bar menu에 제공하세요. 예를 들어, Mail은 컨텍스트 메뉴에 New Mailbox 명령을 제공하는 것 외에도 Mailbox 메뉴에 나열합니다.
→ 편집 가능한 사이드바에 동작을 하는 버튼의 위치는 뷰 하단 쪽에 위치하는 것보다, 계층 제목 오른쪽 또는 컨텍스트 메뉴 또는 메뉴바에서 동작을 지원하는 것이 좋음
역자 첨언
If your app’s hierarchy is deep, consider using a sidebar within a tab in a tab bar. In this situation, a sidebar can support secondary navigation within the tab. If you do this, be sure to prevent selections in the sidebar from changing which tab is currently open.
앱 계층 구조가 깊은 경우 탭 바 내의 탭에 사이드바를 사용하는 것을 고려하세요. 이 상황에서 사이드바는 탭 내에서 보조 탐색을 지원할 수 있습니다. 이렇게 할 경우 사이드바에서 선택이 현재 열려 있는 탭을 변경하지 않도록 주의하세요.
→ 앱의 계층구조가 깊을 때, 탭바에 사이드바 기능을 넣어 탐색을 편하게 해야함
역자 첨언
사이드바 활용 예시
Change Log
작성 날짜 | 작성자 | 수정사항 |
2023/10/25 | 고석준 | 초기 번역 |
2023/12/22 | 고석준 | 배포 |