#다크모드 Dark Mode

[yoogail105]

📎 다크모드 Dark Mode

✔︎ WWDC19 이벤트에서 발표된 것으로, iOS13 이상을 사용하는 기기에 지원된다.
✔︎ 시스템 전체적으로, 그리고 모든 앱 내에서 Dark Mode를 사용할 수 있다.
✔︎ Dark Mode 화면에서는 더 어두운 색상 팔레트를 사용하고, 어두운 배경에서 전경 콘텐츠들은 더 강조된다.
✔︎ 세팅에서 Dark Mode를 선택하면, systemwide level에서 선택되는 것이기 때문에 모든 앱에서 적용된다.

📎 다크모드 컬러 Dark Mode Colors

✔︎ Dark Mode의 컬러 팔레트는 더 어두운 백그라운드 컬러와, 밝은 전경 컬러를 포함한다.
✔︎ 모드와 앱 간의 일관된 느낌을 유지하면서, 대비를 나타낼 수 있도록 신중하게 선택해야 한다.
✔︎ 배경은 더 어두워서 후퇴하는 것 같은 느낌, 전경은 더 밝아서 나아오는 것 같은 느낌
✔︎ Dark Mode를 사용할 때, 색상 값들을 다시 지정해야 한다.
✔︎ Dark Mode를 지원할 경우, 값이 많아지므로 컬러나 이미지, 아이콘 등을 별도로 관리해야 한다.

📎 의미적 색채 Semantic Colors와 시스템 컬러 System Colors

✔︎ 의미를 가진 색
✔︎ 컬러를 Hex값이 아니라, 컬러가 사용되는 목적과 적용되는 UI에 따라 네이밍하고 시스템화 하는 것을 의미
✔︎ Custom 대응을 위해서 Asset Catalog 사용 가능
✔︎ Dynamic Colors: Semantic Colors는 적용하면 자동적으로 모드에 따라 색상이 바뀐다.
✔︎ .label .systemBackground .systemBlue 등
✔︎ iOS 13 이상에서만 사용 가능하다!

‼️ ios12 이하 버전은?

if #available(iOS 13, *) {
    topicLabel.textColor = .label
		dynamicRedColor.textColor = .systemRed
} else {
    topicLabel.textColor = .black
    dynamicRedColor.textColor = .red
}

📎 다크모드 없이 개발하는 방법

Info -> Information Property List -> '+'버튼 -> Appearance: Light

🖇 참고

• SSAC iOS 개발자 강의자료
• https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/dark-mode/
• https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color/#dynamic-system-colors
• http://labs.brandi.co.kr/2019/12/19/kimjh.html