토스 증권 클론 디자인! 라이트/다크모드 1:1 테마 적용해보기

 

 

디자이너의 피할수 없는 숙명.. 다크모드...!

 

 

 

우리 회사에서는 app 에서 라이트/다크모드를 지원하기 때문에 리뉴얼에 대해 크게 신경을 쓰지 않고 있었으나.. 스타일 가이드를 살펴봤을 때 큰 문제점이 세 가지 있었다.

 

 

 

 

 

• 라이트/다크 모드 1:1 페어링이 안된다는 단점이 있었고(내 맘대로 컬러~)
• 시맨틱컬러가 정의되지 않은 상태라 개발자가 테마 컬러를 하나하나 바꾸고 있었으며(착한 개발자들 ㅠㅠ)
• 배경 컬러도 마찬가지로 디자이너마다 다르게 사용하고 있었다.(갑자기 이 배경컬러가 나온다고?)

 

 

 

 

 

 

 

 

 

그래서 연습할 겸 실제 토스 증권 클론 디자인을 진행 후 직접 1:1 페어링이 되는 컬러파렛트를 만들어 라이트/다크 테마를 맞춰보았다.

아래 이미지는 실제 라이트/다크 모드의 토스 증권 화면이다.

 

 

 

 

 

 

 

 

 

우선 background color 만들어야 했다. 제일 먼저 바닥에 깔리는 첫번째와, 그 위를 덮는 두번째, 팝업(모달) 마스크, 바텀시트의 컬러 이렇게 네 가지 컬러를 테마별로 정의했다.

 

 

 

 

 

 

그리고 간단하게 만들어 본 테마 컬러 파렛트! 왜 이 컬러를 썼는지? -> just... 시도해봤습니다.

우선 테마가 적용된 화면을 일단 보고 평가해보자!

 

 

 

 

 

 

 

 

 

 

왼편의 실제 토스 증권의 화면과 연습해본 다크모드! 되게 괜찮아 보이는데.. 1:1 페어링이 된 오른쪽 라이트 모드를 봤을 때 배경 컬러가 원본과 다르기에 굉장히 어색해보인다. 그리고 [내 주식 평균]이 보이지 않는 상태라 라이트모드의 가독성이 굉장히 떨어져서 실제 서비스 화면이라면... 유저들 이탈하고 난리 났을듯

 

 

 

 

 

 

 

클론디자인과 1:1 테마를 진행하면서 느낀점은 다크모드와 라이트모드 둘의 테마에서 가독성과 가시성을 고려하여 완벽하게 1:1 페어링을 하려면 컬러를 그냥 지정해서는 안된다는 점을 알게됬다. 또한, 시맨틱 컬러를 사용하여 개발자와 디자인 시스템을 논해야 하는점이 필요하다. 그래야 개발과 디자인을 효율적으로 할 수 있기 때문, 그리고 다크모드를 지원하는 다양한 레퍼런스를 찾아볼 필요성을 느끼게 됨! 테마가 적용된 화면을 보니 단순한 테마여도 가독성, 가시성이 떨어진다면 이러한 이유 하나 때문에 유저가 이탈 할 수 있겠다 싶은 생각이 들더라. 테마는 중요했다.

 

 

 

 

클론디자인으로 라이트/다크 테마 적용해보기 끝

 

 

 

 

 

아래는 내가 다크모드에 관해서 찾아봤을 때 가장 도움 됬던 아티클 세 가지

 

 

 

 

 

 

https://blog.wishket.com/%EB%8B%A4%ED%81%AC%EB%AA%A8%EB%93%9C-ui-%EB%94%94%EC%9E%90%EC%9D%B8%EC%9D%98-%EC%9B%90%EC%B9%99/

다크모드 UI 디자인의 원칙 - wishket

 

 

https://designsystem.line.me/LDSM/foundation/color/line-semantic-colors-ex-ko

LINE Design System for Messenger - Foundation

 

 

https://tech.socarcorp.kr/design/2020/07/10/dark-mode-01.html

[SOCAR FRAME 만들기 #2] 다크 모드 받고 디자인 시스템 더블로 가! (1탄)