채널톡 다크모드 도입

오늘은 채널톡 프론트엔드 플러그인에 다크모드를 적용하면서 UI 가시성을 최적화하기 위해 우리가 어떻게 고민하고 적용했는지 소개하려고 합니다.

프론트 다크모드 적용

채널톡 프론트는 고객사의 아이덴티티를 살리기 위해 테마 컬러를 사용합니다. 이 글에서는 테마 컬러를 유지하면서도 UI 요소가 제대로 보이게 만들기 위한 과정을 설명하겠습니다.

Color Contrast

테마 색상을 설정하면 채널톡 UI에 다음과 같이 반영됩니다.

• 채널톡 버튼 (채널톡 버튼의 구조)

• 설정/닫기 아이콘

• 새 문의하기 버튼

만약 테마 색상을 흰색(#FFFFFF)로 설정한다면 어떻게 될까요?

아마 흰색을 그대로 아이콘에 사용한다면 식별할 수가 없을겁니다.

그래서 이런 경우 다음과 대체 색상을 적용합니다. 어두운 회색을 쓰고 있죠!

그런데 흰색(#FFFFFF) 뿐만 아니라, 흰색과 가까운 밝은 색(#FFFCD2 등)들도 같은 문제가 있겠죠.

그래서 대체 색상을 보여줘야 하는 테마 색상의 범위를 정해주어야 합니다.

밝기 계산

rgb 색상 경우의 수는 16,777,216(=256 ^ 3)가지 입니다.

모든 색상에 대해 ‘얘는 그대로 보여줘, 얘는 fallback으로 보여줘’를 결정할 수 없기 때문에, 각 색상에 범위 속성을 부여해야 합니다.

그래서 색상에 ‘밝기’를 부여하는데요. 밝기를 계산하는 수식은 정말 다양한데, 그 중에서 우리는 HSP Color Model을 사용하고 있습니다.

https://alienryderflex.com/hsp.html

여기서 잠깐만 다른 이야기로 새겠습니다. 저는 이 수식이 재밌었거든요.

사람의 눈에는 3개 종류의 원추세포(L, M, S)가 있는데, 두 종류의 원추세포가 가장 민감하게 반응하는 구간이 녹색과 가까이 있습니다.

그래서 우리는 녹색 빛에 가장 민감하게 반응하고, 파란색에 가장 둔감하게 반응합니다.

이런 인간의 생물학적 특성이 위 알고리즘에도 반영이 되어있는데요.

위 수식에서 Green의 계수가 가장 크고 Blue의 계수가 가장 작은 것을 볼 수 있죠.

컴퓨터에서는 0~255로 표기되는 R/G/B를 인간의 특성에 맞추기 위해 가중치를 부여한 것이라고 볼 수 있습니다.

다시 돌아와서, color를 랜덤으로 1000개 생성해서 위 brightness에 따라 정렬해보겠습니다.

라이트모드(상)에서 아래쪽 아이콘 몇 개는 식별이 어렵고, 다크모드(하)에서 위쪽 아이콘은 거의 보이지 않죠.

이제 어느정도 범위까지 대체 색상을 사용할 것인지 정해야합니다.

디자이너님! 눈이 되어주세요!

엔지니어인 저보다는 디자이너 분이 색을 더 잘 볼 것 같습니다.

그래서 가시성이 확보되는 밝기 영역을 정하기 위해 채널톡 프로덕트 디자이너 MK와 커뮤니케이션했습니다.

스펙 결정을 위해 Storybook으로 간단한 실험환경을 만들었습니다.

MK와 저는 직접 영역을 수정해보면서 fallback 밝기 영역을 정할 수 있었습니다.

라이트모드와 다크모드에서 사용할 밝기 영역이 각각 결정되었습니다!

최종적으로 아이콘의 컬러를 결정하는 로직은 다음과 같은 코드로 표현됩니다.

이렇게 적용한 결과, 채널톡 프론트의 다크모드는 고객사의 테마 컬러를 유지하면서도 UI 요소가 명확하게 보이게 되었습니다.

결론

채널톡 프론트엔드의 다크모드 적용 과정에서 UI 가시성을 최적화하기 위해 밝기 계산과 디자이너의 도움을 받아 범위를 결정하는 과정을 소개했습니다.

이렇게 적용된 다크모드와 UI 가시성 개선은 사용자들에게 더 나은 경험을 제공하고, 고객사에게도 더 나은 브랜딩 기회를 제공할 것입니다.

[이런 글도 추천드려요]

• 피그마 플러그인으로 아이콘 업데이트 자동화하기

• 프론트엔드 프로젝트 최신화 - 1편 : Yarn berry

• 채널톡 프론트엔드 개발자 제프, 티거를 만나다