[HIG] Dark Mode 다크모드

 

 🗣 05. H.I.G에서 읽어본 Dark Mode

본 내용은 H.I.G - Foundations - Dark Mode를 편역 한 것입니다.
 

1) 다크 모드

다크 모드는 어두운 색상 팔레트를 사용해 적은 빛을 제공하여 편안한 시각 경험을 제공한다. iOS, iPadOS, macOS, and tvOS에서 사람들은 종종 다크 모드를 기본 설정으로 하며 선호에 따라 모드를 설정한다. 다크 모드에서 시스템은 화면, 메뉴, 조작에 어두운 색상 팔레트를 사용하여 대비 효과를 활용해 더 어두운 배경에서 내용들을 돋보기에 할 수 있다.

Dark Mode is a systemwide appearance setting that uses a dark color palette to provide a comfortable viewing experience tailored for low-light environments. In iOS, iPadOS, macOS, and tvOS, people often choose Dark Mode as their default interface style, and they generally expect all apps and games to respect their preference. In Dark Mode, the system uses a dark color palette for all screens, views, menus, and controls, and may also use greater perceptual contrast to make foreground content stand out against the darker backgrounds.

 
 

2) 좋은 예시

각각의 앱별로 설정을 바꿀 수 있도록 하지 마라. 앱에서 각각 설정을 바꿀 수 있는 것은 사용자들로 하여금 더 많은 일을 하게 만든다. 사용자들이 원하는 모드를 위해 두 가지 이상의 설정을 선택해야 하기 때문이다. 이러한 상황에서 사용자는 앱에 문제가 있다고 생각할 수 있다. 시스템 전체의 모드에 각각의 앱이 반응하지 않는다고 생각할 수도 있기 때문이다.
각각의 모드에서 앱이 잘 보이는지 확인하라. 또한 자동 모드 변환 버튼을 통해 언제든지 앱이 실행되는 과정에서도 모드 변환(기본모드-다크모드)이 자유롭게 돼야 한다.
각각의 모드에서 내용이 읽기 쉽게 잘 보이는지 확인하라. 예를 들어 다크 모드에서 증가된 대비와 줄어든 투명도는 어두운 배경에서 글자가 쉽게 읽히지 않는 부분을 찾을 수 있다. 다크 모드에서 대비를 강조하여 설정하면 어두운 배경과 어두운 글자 간의 시각적 대비를 감소시킬 수 있다. 시력이 좋은 사람들은 여전히 대비가 낮은 텍스트를 읽을 수 있겠지만, 일반적인 사람들은 그런 텍스트를 읽지 못할 것이다.
드문 경우 오직 다크 모드만 지원하는 경우도 있다. 몰입형 미디어를 예시로 들 수 있다. 이러한 경우에는 사람들이 시청 자체에 집중할 수 있도록 영구적으로 다크 모드만을 지원하는 것이 의미 있을 수 있다.

Best practices

Avoid offering an app-specific appearance setting. An app-specific appearance mode option creates more work for people because they have to adjust more than one setting to get the appearance they want. Worse, they may think your app is broken because it doesn’t respond to their systemwide appearance choice.

Ensure that your app looks good in both appearance modes. In addition to using one mode or the other, people can choose the Auto appearance setting, which switches between light and dark appearances as conditions change throughout the day, potentially while your app is running.

Test your content to make sure that it remains comfortably legible in both appearance modes. For example, in Dark Mode with Increase Contrast and Reduce Transparency turned on (both separately and together), you may find places where dark text is less legible when it’s on a dark background. You might also find that turning on Increase Contrast in Dark Mode can result in reduced visual contrast between dark text and a dark background. Although people with strong vision might still be able to read lower contrast text, such text could be illegible for many. For guidance, see Color and effects.

In rare cases, consider using only a dark appearance in the interface. For example, it can make sense for an app that supports immersive media viewing to use a permanently dark appearance that lets the UI recede and helps people focus on the media.

 
 

3) 다크 모드 색상

다크 모드에서 색상 영역은 배경의 깊은 색과 배경 앞에 보일 조금 더 밝은 색을 포함한다. 중요한 것은 이런 색상이 반드시 라이트 모드의 반전 색상이 아니라는 것이다. 일부 색상의 경우 반드시 반전된 색상은 아니다.
현재의 모습에 어울리는 색상을 사용하라. macOS의 labelColor 또는 controlColor 그리고 iOS와 iPadOS의 경우 자동적으로 색상을 적용한다. 커스텀 색상을 사용할 때 Xcode에 색상 관련 에셋을 추가해야 한다. 그리고 밝은 색상과 색상의 깊이감에 관해 구체화해야 한다. 하드 코딩화된 색상 값은 사용하지 말아야 한다.
충분한 색상 대비를 목표로 하라. 시스템 적용 색상을 활용한다면 배경색과 전경 색의 대조를 하는 데 도움이 될 것이다. 최소한 색상 간의 명암비가 4.5 대 1 이상이어야 한다. 커스텀 된 배경색과 전경 색의 경우 작은 텍스트에서는 7 대 1의 대비 비율을 유지할 수 있도록 노력해야 한다. 이러한 비율은 배경색과 전경 색을 확실하게 구분해 줄 수 있으며 콘텐츠가 권장된 애플의 지침에 따를 수 있게 해 준다.
흰색 배경을 활용하여 부드럽게 하라. 만약 흰색 배경이 포함된 이미지를 표시하는 경우 다크 모드에서 해당 이미지가 눈에 띄지 않도록 약간 어둡게 하라.

Dark Mode colors

The color palette in Dark Mode includes dimmer background colors and brighter foreground colors. It’s important to realize that these colors aren’t necessarily inversions of their light counterparts: while many colors are inverted, some are not. For more information, see Specifications.

Embrace colors that adapt to the current appearance. Semantic colors (like [labelColor](<https://developer.apple.com/documentation/appkit/nscolor/1534657-labelcolor>) and [controlColor](<https://developer.apple.com/documentation/appkit/nscolor/1524856-controlcolor>) in macOS or [separator](<https://developer.apple.com/documentation/uikit/uicolor/3173139-separator>) in iOS and iPadOS) automatically adapt to the current appearance. When you need a custom color, add a Color Set asset to your app’s asset catalog in Xcode, and specify the bright and dim variants of the color. Avoid using hard-coded color values or colors that don’t adapt.

Aim for sufficient color contrast in all appearances. Using system-defined colors can help you achieve a good contrast ratio between your foreground and background content. At a minimum, make sure the contrast ratio between colors is no lower than 4.5:1. For custom foreground and background colors, strive for a contrast ratio of 7:1, especially in small text. This ratio ensures that your foreground content stands out from the background, and helps your content meet recommended accessibility guidelines.

Soften the color of white backgrounds. If you display a content image that includes a white background, consider slightly darkening the image to prevent the background from glowing in the surrounding Dark Mode context.

 

아이콘과 사진

시스템은 SF 심볼을 사용하여 다크 모드와 일반 모드 모두에서 최적화된 풀 컬러 영상을 사용한다.
가능하다면 어디에서든지 SF 심볼을 사용하라. SF심볼은 모든 모드에서 잘 작동하며 다채로운 색을 사용하거나 진동을 추가하는 경우에도 잘 작동한다.
다크 모드와 일반 모드에서 필요하다면 아이콘을 각각 다르게 디자인하라. 예를 들어 보름달의 경우 다크 모드에서는 테두리 선이 필요 없지만, 일반 모드에서는 테두리 선이 필요할 것이다. 마찬가지로 기름 방울을 나타내는 아이콘은 다크 모드에서 잘 보일 수 있도록 가장자리에 테두리가 필요할 것이다.
색을 꽉 채운 아이콘을 활용하여 두 모드에서 모두 잘 보이도록 하라. 같은 에셋을 활용하여 두 가지 모드에서 사용하라. 에셋이 한 가지 모드에서만 잘 작동한다면 에셋을 수정하거나 다크 모드와 일반 모드 각각에서 사용될 수 있는 에셋을 다시 만들어라. 에셋 카탈로그를 활용하여 하나의 명칭으로 통일할 수 있다.

Icons and images

The system uses SF Symbols (which automatically adapt to Dark Mode) and full-color images that are optimized for both light and dark appearances.

Use SF Symbols wherever possible. Symbols work well in both appearance modes when you use dynamic colors to tint them or when you add vibrancy. For guidance, see Color.

Design separate interface icons for light and dark appearances if necessary. For example, an icon that depicts a full moon might need a subtle dark outline to contrast well with a light background, but need no outline when it displays on a dark background. Similarly, an icon that represents a drop of oil might need a slight border to make the edge visible against a dark background.

Make sure full-color images and icons look good in both appearances. Use the same asset if it looks good in both light and dark appearances. If an asset looks good in only one mode, modify the asset or create separate light and dark assets. Use asset catalogs to combine your assets into a single named image.

 
 

4) 플랫폼 고려사항

tvOS는 추가적인 고려 사항이 없으며 visionOS와 watchOS는 다크모드를 지원하지 않는다.
 

iOS, iPadOS

다크 모드에서 시스템은 2가지의 배경색을 활용한다. 기본색과 고급 색이다. 이러한 2가지 배경색은 어두운 화면이 다른 화면 위에 겹쳐질 때 깊이에 대한 인식을 향상시킬 수 있다. 기본색은 가장 깊은 색이며, 배경은 좀 옅은 색이다. 고급 색의 경우 더 밝다는 특징이 있다.

시스템에서 제공하는 배경색을 선호하라. 다크 모드는 역동적인데, 팝 오비나 모달 시트와 같이 화면이 전경에 있을 때 배경 색상이 자동으로 변경된다. 단계적인 배경을 제공하는 다크 모드는 시각적으로 분리되어야 하는 상황에서 도움이 된다. 멀티태스킹 환경에서 앱 간 혹은 윈도 간 시각적인 분리를 제공하기 위해 사용된다. 커스텀 된 배경을 사용하는 것은 사용자로 하여금 시각적인 혼선을 제공할 수 있다.
 

macOS

사람들이 일반 설정에서 그라파이트 강조 색상을 선택하면 macOS는 대상 사진에 맞게 배경을 조절한다. 결과적으로 이를 데스크톱 틴팅이라고 부른다. 미묘한 효과지만 창과 대상 이미지를 조화롭게 만들어준다는 장점이 있다.
적절한 경우 투명성의 특징을 배경 요소에 넣을 수 있다. 투명성은 데스크톱 틴팅이 활성화될 때 대상 이미지가 변하더라도 배경과 지속될 수 있도록 시각적이 조화를 만들어준다. 이러한 조화를 얻기 위해서 배경이나 베젤이 보이는 사용자 지정 영역에만 투명도를 추가하거나 색상을 사용하지 않는 상태인 경우에 투명도를 추가하면 된다. 구성 요소가 색상을 사용하는 경우에는 투명도를 사용하지 않는 것이 좋다. 왜냐하면 창 배경이 다른 위치로 조정되거나 사진이 바뀌는 경우 구성 요소의 색상이 변할 수도 있기 때문이다.
 

Platform considerations

No additional considerations for tvOS. Dark Mode isn’t supported in visionOS or watchOS.

iOS, iPadOS

In Dark Mode, the system uses two sets of background colors — called base and elevated — to enhance the perception of depth when one dark interface is layered above another. The base colors are dimmer, making background interfaces appear to recede, and the elevated colors are brighter, making foreground interfaces appear to advance.

Prefer the system background colors. Dark Mode is dynamic, which means that the background color automatically changes from base to elevated when an interface is in the foreground, such as a popover or modal sheet. The system also uses the elevated background color to provide visual separation between apps in a multitasking environment and between windows in a multiple-window context. Using a custom background color can make it harder for people to perceive these system-provided visual distinctions.

macOS

When people choose the graphite accent color in General settings, macOS causes window backgrounds to pick up color from the current desktop picture. The result — called desktop tinting — is a subtle effect that helps windows blend more harmoniously with their surrounding content.

Include some transparency in custom component backgrounds when appropriate. Transparency lets your components pick up color from the window background when desktop tinting is active, creating a visual harmony that can persist even when the desktop picture changes. To help achieve this harmony, add transparency only to a custom component that has a visible background or bezel, and only when the component is in a neutral state, such as state that doesn’t use color. You don’t want to add transparency when the component is in a state that uses color, because doing so can cause the component’s color to fluctuate when the window background adjusts to a different location on the desktop or when the desktop picture changes.

 
 

+) HIG를 공부하고

각각의 앱별로 다크 모드 제어 권한을 주지 말라는 것은 의외의 부분이었다. 많은 선택지를 제공하는 것이 사용자를 귀찮게 할 수 있다는 게 문서의 입장이다. 하지만 나의 생각은 조금 다르다. 일반적인 UI는 다크 모드를 선택하지만, 토스의 증권 앱을 사용할 때는 일반 모드를 사용한다. 바로 오늘 있었던 일인데, 기존 삼성증권의 앱은 UI가 흰색이지만 다크 모드를 기본 설정으로 해둔 탓에 토스 증권 앱은 다크 모드가 적용된 UI가 보였다. 수년간 흰색 배경의 차트를 보던 내가 어두운 배경의 차트를 보니 왠지 모를 어색함이 들기도 했다. 기본 설정은 다크 모드로 하되, 토스 증권 앱만 일반 모드로 할 수 없을까? 찾아보았고 앱의 상세 설정에서 바꿀 수 있었다.

 
디자인에 정답은 없다는 생각이 들었다. 모든 앱의 모드를 사용자가 선택해야 한다는 불편함, 일관된 사용자 경험을 누릴 수 있다는 장점. 뭐가 우선인지 모르겠지만 사용자 개인이 선택할 수 있다는 것이 좀 더 많은 사용자에게 도움이 되지 않을까 하는 생각을 했다. 토스 증권의 경우처럼 기본 설정은 시스템 모드를 따르되 나와 같은 사용자를 위해 추가적으로 시스템 모드와 대비되는 모드를 선택할 수 있게 해주는 것이 최선의 방법 같다.
 
 

다크 모드에서 사진을 보는 경우와 관련된 지침이 있다는 사실도 놀라웠다. 다크 모드에서 흰색 이미지를 본다면 눈이 아프거나 할 텐데 이러한 경우를 대비해서 약간 어둡게 사진을 조정하는 것은 생각지도 못했다. 예시로 유튜브의 다크모드를 찾을 수 있었다. HIG를 공부할수록 개발자가 디자이너와 협업할 때 HIG에 기반하여 소통할 수 있다는 것이 얼마나 큰 메리트인지 알 수 있었다. 말로만 하는 사용자 친화적 개발, 더 나은 사용자 경험이 아닌, 문서에 기반한 협업과 개발이 가능할 것 같다.