다크 모드
다크모드는 어두운 환경에서 더 나은 시각적 환경을 제공하기 위한 시스템 화면 모드 설정
밝은색은 어둡게 어두운색(220~)은 약간 밝게 조정된다.
모범 사례
- 화면 모드 설정은 공통으로 사용하게. 개별설정하지 않도록
- 다크모드, 라이트모드를 모두 설정
- 콘텐츠 대비를 확인하기.
- 경우에 따라서 다크모드만 지원해도 괜찮음
색상
- 설정색상 사용
- 충분한 대비(4.5:1)를 사용하기. 작은텍스트는 7:1
- 흰색 배경색상의 명도를 다크모드에서 낮추기
아이콘 및 이미지
- SF Symbols을 사용해서 동적색상 사용
- 필요한 경우 아이콘은 별도로 디자인하기
- filled 아이콘인 경우, 다크모드에서는 line 아이콘으로 디자인
- 풀컬러 이미지와 아이콘은 두 화면에서 모두 확인
레이블
- 시스템 색상 사용
- 직접 텍스트를 그리는 대신 시스템 제공보기를 사용
플랫폼 고려 사항
ios,ipados
- 다크모드는 기본 / 저심도 - 어두운색이 덜 어두움
- 다크모드는 시스템 배경색으로 만들기 꼭
mac
- 가능하면 배경에 약간의 투명도로 시각적 조화를 계속 유지할 수 있음
- 색상을 따로 하지 않는 경우에만 추가하기
frontend developer