brunch

라이킷 129 댓글 4

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 직장인 K Oct 19. 2021

다크모드의 UI 컬러

다크모드에선 컬러를 어떻게 사용해야 할까요?

다크모드는 사용자를 위해 있어야해요

다크모드를 지원해야 하는 이유는 사용자에게 좋은 경험을 제공하기 위해서예요.

다크모드 OS UI 사용 유저가 앱에 진입했을 때 라이트 모드 화면을 보게 되면 당황스러울 거예요. 이렇게 사용자가 느낄 수 있는 이질감을 없애기 위해 다크모드를 제공해야 해 합니다.

라이트모드 화면은 방출되는 빛의 양이 많아 시각적 피로를 유발해요. 그리고 라이트모드 화면을 출력할 때, 눈 건강에 좋지 않은 블루라이트가 더욱 나와요. 그래서 사용자 눈의 편안함을 위해 다크모드를 지원해야 합니다.

다크모드는 색상으로 높이차를 나타내요. 위로 갈수록 점점 밝아진답니다

배경은 가장 밑에 있는 base BG와 그 위의 elevated BG로 나눌 수 있어요.

다크모드에선 elevated BG에 base BG보다 밝은 색상을 사용해요. 상단으로 갈수록 레이어 색상이 점점 밝아지는 형태이죠. 그 이유는 라이트 모드에선 높이차를 레이어의 그림자로 표현할 수 있지만 다크모드에선 그림자의 표현이 두드러질 수 없기 때문입니다. 그래서 다크모드에선 색상을 활용해 높이차를 나타냅니다.

라이트 모드는 그림자로, 다크모드는 색상으로 레이어를 구분해요

이렇게 라이트모드는 그림자로 다크모드는 색상으로 레이어를 구분하기 때문에, 같은 화면이지만 모드에 따라 UI가 조금씩 다르기도 해요.

상황에 따라 완전히 다르게 적용되기도 해요.

에버노트의 text input field를 볼게요. 라이트모드는 노란색 100% input field에 그림자로 레이어를 구분하고 있어요. 반면 다크모드는 노란색 30% input field에 라인으로 레이어를 구분하고 있네요. 다크모드에서 색상으로만 레이어를 분리시키기 어려워 라인을 추가한 것으로 보입니다.

또한 에버노트에서 레이어가 상단으로 갈수록 어두워졌다가 다시 밝아지는 것을 볼 수 있습니다. contents를 더욱 명확히 보여주고자 elevated BG에 검정 사용한 것으로 보여요.

base BG에 블랙은 잘 사용하지 않아요. BG 명도의 기준은 자유...?

애플은 base BG에 블랙을 사용해 배경 위에 올라가는 컴포넌트과 명확한 대비를 주고 있어요. 하지만 애플의 HIG를 제외하고는 base BG에 순수 블랙인 #000000을 사용하고 있지 않아요. 그 이유는 블랙 BG에서 색상이 더욱 두드러져 보여 물체가 떨리는 것처럼 보일 수 있기 때문이에요.

이때 저는 base BG의 명도를 설정하는 기준이 궁금해졌어요. 블랙 base BG의 텍스트 가시성이 낮으니, 텍스트를 많이 소비하는 서비스일수록 BG 명도가 높지 않을까?라는 가설을 바탕으로 리서치를 진행했어요.

리서치의 결론은 'BG 명도 설정의 기준은 없다'입니다. 글을 많이 읽는 서비스를 보았을 때 네이버와 노션은 높은 명도의 BG를, 미디엄과 트위터에는 낮은 명도의 BG를 사용하고 있기 때문이에요.

다크모드에선 컬러 채도를 낮춰요

다크모드에선 어두워진 배경에 맞춰 컬러 채도를 죽이거나 좀 더 어둡게 바꿔줘야 해요. 다크모드 UI에서는 색상이 더욱 두드러져 보여, 떨리는 것처럼 보일 수 있기 때문이라고 해요.

채도를 조절하는 방법으로는 기존 색상에 오퍼시티를 준 흰색 레이어를 더하거나 RGB의 %를 변경하는 방법이 있어요.

유동적으로 변경하는 main, sub 컬러

앱에서 모드에 따라 색상을 어떻게 사용하고 있는지 보았어요. main컬러의 채도는 모드에 따라 유동적으로 동일하게 가져가거나, 다르게 가져가요. main컬러가 로고나 강조 버튼에 사용될 경우에 색상이 동일하고, 주변 환경에 따라 그 외의 영역인 배지 등에 사용될 경우 색상이 다르기도 해요.

구글 캘린더는 특이하게 메인 컬러의 색상을 완전히 다르게 사용하고 있었습니다. 라이트모드와 다크모드에 최적화된 컬러를 사용해 가시성을 높이고자 한 것 같습니다.

sub컬러도 유동적으로 동일하게 가져가거나, 다르게 가져가고 있었습니다. 대체로 채도는 낮게 명도는 밝게 바뀌는 것을 볼 수 있어요.

1. 색상 영역이 넓은 면에서는 같은 색상을 사용하고 있었는데요. 같은 색상을 사용하고 있지만 다크모드에서는 오퍼시티를 더욱 줘 다른 색상처럼 보이네요.

2. 다크모드에서 무작정 명도가 밝아지는 것은 아니에요. 네이버 상단 탭은 다크모드에서 명도가 어두워지고 있었어요. 이는 상단 탭의 텍스트가 흰색으로 되어 가시성이 떨어지는 것을 막기 위함입니다.

3. 네이버의 하단 탭은 모드에 따라 활성화되는 아이콘이 달라요. 왼쪽 탭을 클릭했을 시 라이트 모드에서는 모든 아이콘이 활성화되어있지만 다크모드에서는 클릭한 왼쪽 탭의 아이콘만 활성화되어있어요. 다크모드에서는 색상이 더욱 잘 보이기 때문에 누른 탭의 아이콘만 활성화한 것으로 보입니다.

일러스트는 동일하게, 배경은 오퍼시티를 줘서