애플 휴먼 인터페이스 가이드라인(38) Bars -4 Status bars

Status Bars
상태 바(스태터스 바)

The status bar appears along the upper edge of the screen and displays useful information about the device’s current state, like the time, cellular carrier, and battery level. The actual information shown in the status bar varies depending on the device and system configuration.

상태 바는 화면의 최상단에 나타나고, 시간, 통신사, 배터리 같은 기기의 현재 상태와 관련한 정보를 포함합니다. 상태 바의 실제 정보는 기기와 시스템 설정에 따라 달라집니다.

 

Use the system-provided status bar. People expect the status bar to be consistent systemwide. Don’t replace it with a custom status bar.

시스템에서 제공되는 상태 바를 사용하세요. 사용자들은 시스템 전반에 걸쳐 상태 바가 항상 동일하기를 기대합니다. 상태 바를 직접 만들어 대체하지 마세요.

Light status bar(좌) Dark status bar(우)

 

Coordinate the status bar style with your app design. The visual style of the status bar’s text and indicators is either light or dark, and can be set globally for your app or individually for different screens. A dark status bar works well above light-colored content and a light status bar works well above dark-colored content.

상태 바를 앱 디자인과 잘 어울리게 만드세요. 상태 바의 텍스트와 인디케이터의 시각적 스타일은 라이트/다크모드를 지원하고, 앱 전체에 통일되게 설정되거나 화면마다 다르게 적용될 수 있습니다. 다크 상태바는 밝은 색의 콘텐츠와 잘 어울리고, 라이트 상태바는 어두운 색의 콘텐츠와 잘 어울립니다.

 

Obscure content under the status bar. By default, the background of the status bar is transparent, allowing content beneath to show through. Keep the status bar readable and don’t imply that content behind it is interactive. There are several common techniques for doing this:

• Use a navigation bar in your app, which automatically displays a status bar background and ensures that content doesn’t appear under the status bar.
• Display a custom image, like a gradient or solid color, behind the status bar.
• Place a blurred view behind the status bar. For developer guidance, see UIBlurEffect.

상태 바 아래에 콘텐츠를 배치하지 마세요. 기본적으로 상태바의 배경은 투명하기 때문에 아래에 깔린 콘텐츠를 볼 수 있습니다. 상태바를 읽을 수 있도록 유지하고, 그 아래의 콘텐츠가 상호작용하는 것 처럼 보이게 하지 마세요. 이를 위한 몇가지 기술이 있습니다:

• 앱에 네비게이션 바를 사용해 자동으로 상태바와 배경을 띄워 콘텐츠가 비치지 않도록 할 수 있습니다.
• 그라디언트나 솔리드 컬러같은 커스텀 이미지를 상태바 뒤에 띄우세요.
• 상태바 뒤에는 흐림처리된 이미지를 배치하세요.

Consider temporarily hiding the status bar when displaying full-screen media. A status bar can be distracting when users are trying to focus on media. Temporarily hide these elements to provide a more immersive experience. The Photos app, for example, hides the status bar and other interface elements when the user browses full-screen photos.

풀스크린 미디어를 보여줄 땐 상태바를 잠시 숨기는 것도 고려해보세요. 상태바는 사용자들이 미디어에 집중하려고 할 때 방해가 될 수 있습니다. 이런 요소들을 잠시 숨기면 보다 몰입감 높은 경험을 제공할 수 있을 것입니다. 사진 앱은 사용자들이 풀스크린 사진 화면을 볼 때 상태바를 포함, 다른 요소들을 숨깁니다.

 

Avoid permanently hiding the status bar. Without a status bar, people must leave your app to check the time or see if they have a Wi-Fi connection. Let people redisplay a hidden status bar by using a simple, discoverable gesture. When browsing full-screen photos in the Photos app, a single tap shows the status bar again.

상태바를 영구히 숨기지 마세요. 앱에 상태바가 없다면, 시간이나 Wi-Fi 연결이 됐는지 확인하기 위해 앱을 나가야 합니다. 사용자들이 간단하고 발견하기 쉬운 제스처로 숨겨진 상태바를 다시 띄울 수 있도록 하세요. 풀스크린 사진 화면에선 탭을 한번 했을 때 상태바가 다시 나옵니다.

 

---

옛날에 GUI 작업해서 보내주면 개발팀이 배경을 쪼개 굳이 스태터스 바 영역만 따로 솔리드컬러를 넣곤 했는데, 요런 이유가 있었다.

안그래도 심볼에는 분명 스태터스바가 투명이었는데... 블러나 이런 효과는 확실히 개발단까지 배우고 싶음...