iOS 다크모드에 관하여

 

다크모드

 

라이트모드	다크모드

iOS13부터 다크모드가 나왔습니다.

핸드폰의 밝기테마인데, 어두운 곳에서 라이트모드면 눈이 부셔서 다크모드를 자주 애용했습니다.

이에 따라 앱도 다크모드를 지원하게 되었는데, 앱을 만들면서 다크모드를 어떻게 적용시킬까에 대해 알아보려고 합니다.

 

시도해 본 방법: UserDefaults를 이용한 다크모드 설정값 저장

다크모드라 해서 크게 생각하지 않고, 밝은 테마를 어둡게, 어두운 테마를 밝게 UI를 그려보자고 생각했습니다.

사용자가 원하는 테마에 맞춰서 뷰가 그려질 때, 입맛에 맞게끔 그리는 것이지요

그래서 뷰마다 다크모드 설정값을 불러오기 위해 싱글톤구조로 불러오기 쉽게끔 구현했습니다.

 

싱글톤을 통해 UserDefaults값을 불러와 viewdidLoad() 혹은 viewWillAppear()에 UI를 그리는 함수를 넣어놓았습니다.

 

<결과 화면>

 

결과는 위와 같이 실행시켜 보았을 때, 문제 되는 점은 없어 보였습니다.

다크모드에 따라 뷰 색상도 잘 적용되었고, 스위치를 통해 ON 시키면 바로 적용되는 점도 문제 될 점은 딱히 보이지 않았습니다.

 

하지만 이렇게 구현해도 문제가 없지만 이게 과연 좋은 방법일까? 에 대해서는 자신이 없었습니다.

여기서 뷰컨은 총 5개가 존재합니다.

상단 코드 중 settingUI() 함수는 뷰컨을 이동할 때마다 실행되어 다크모드인지 판단합니다.

 

만약 뷰컨트롤이 50개 100개가 넘어간다면?

-> 뷰에서 다른 뷰로 이동할 때 매번 확인해야 합니다.(호출빈도가 매우 많아짐)

 

그리고 뷰는 앱과 사용자 사이에서 가장 먼저 접근하는 객체라고 생각합니다.

사용자는 앱 안에서 시스템이 어떻게 돌아가는지 모르지만, 뷰를 통해 알 수 있죠.

그래서 디자인과 관련된 버그는 치명적일 수 있다고 생각합니다.(작은 버그하나가 앱의 완성도를 크게 떨어트린다고 생각합니다.)

앱은 혼자서 만들 수 있지만 협업을 하게 된다면, 기준이 되는 테마가 있기 마련입니다.(라이트/다크모드부터 커스텀모드까지)

이렇게 뷰가 로드되면서 다크모드를 확인하고 색상을 지정해 준다면, 어디 한 곳은 놓치기 쉽고, 버그가 발생할 우려가 있습니다.

 

뷰를 불러올 때, 다크모드색상을 일일이 지정한다면?

-> 여러 개의 뷰컨이 존재한다면, 색상지정을 놓칠 수 있게 되고 버그로 발생될 수 있습니다.

 

위와 같은 고민이 들어 더 효율적인 방법이 없을까 고민해 보다가 다른 방법을 찾게 되었습니다.

 

Color Assets을 이용하자

Assets은 프로젝트를 만들 때 자동으로 만들어집니다.

Asset은 이미지파일, 색, 데이터파일까지 넣어 앱이 실행되는 동안 쉽게 불러오도록 도와줍니다.

https://developer.apple.com/documentation/xcode/managing-assets-with-asset-catalogs

Managing assets with asset catalogs | Apple Developer Documentation

이렇게 프로젝트를 만들면 자동으로 Assets이 만들어집니다.

 

색상 테마를 만들면, 해당 색상이 다크모드와 일반모드에 맞춰서 대응하도록 설정합니다.

레이블이나 뷰의 배경색의 디폴트값은 보통 시스템컬러입니다.(아닌 객체들도 있으니 주의해 주세요!)

그래서 따로 색상을 지정하지 않는다면 다크모드와 라이트모드에 따라서 색이 반전됩니다.

이 방법은 코드를 추가하지 않아서 편할 수 있지만, 예기치 못한 곳에서 의도했던 것과 다른 색이 나올 수 있습니다.

 

세 가지의 대응하는 색상을 에셋에 넣고 지정해 주었습니다.

 

 

 

<결과 화면>

따로 다크모드 설정 여부를 확인하고 UI 색상을 지정하지 않고도 해당 핸드폰의 다크모드 여부에 대응하게 됩니다.

 

아래 링크는 HIG 색상의 대표적인 예와 여러 가지 테마를 확인해 볼 수 있습니다.

https://developer.apple.com/design/human-interface-guidelines/color#dynamic-system-colors

Color | Apple Developer Documentation

 

 

다음번엔 세 가지 옵션을 이용한 모드 설정을 해보겠습니다.

• 사용자지정(핸드폰의 테마에 따라서)
• 라이트모드
• 다크모드

<세가지 옵션으로 모드 설정 구현 예시>

https://jenikeju.tistory.com/306

iOS 다크모드 설정을 3개 옵션으로 나눠서 적용하자