사이드 프로젝트의 디자인시스템
1인 디자이너로서 다크모드/라이트모드 대응하기
약 1년 전, 처음 마인디 서비스를 오픈할 때는 화면 테마 기능을 생각하지 않았다. 그리고 흔히 알고 있는 [다크모드] 컨셉만 존재했다. 아무래도 기존 마인디의 [블랙배경 - 흰색(밝은 회색) 글씨]는 유저가 느끼기에 [다크모드]라고 느끼는 경우가 많을 수밖에 없다고 생각했고, 당연하게도 라이트모드가 있었으면 좋겠다는 유저 보이스도 꽤 있었다.
팀원들 또한 라이트 모드에 대한 니즈가 있었다. 하지만 마인디 팀 내 디자이너는 필자 혼자였기 때문에, [다크모드/라이트모드] 칼라 시스템을 선뜻 만들기엔 두려움이 있었다.
따라서 여러 기업들이 만든 공개된 디자인 시스템을 많이 참고하고, 만들어 보기로 마음먹었다!
리소스를 최소화로 줄이는 칼라 시스템이 되려면?
첫 번째로 가장 신경 쓴 부분은 리소스 최소화였다.
처음부터 화면 테마를 변경할 수 있는 옵션을 생각하지 않았기 때문에 리소스를 최소화하며 다크와 라이트 모드 모두 대응될 수 있는 컬러 시스템이 필요했다.
따라서 피그마 Local Variable 기능을 활용해 [라이트/다크 모드]를 대응할 수 있는 칼라 시스템을 만들었다.
마인디의 Color System 중 일부다크모드의 gray_10은 라이트모드의 gray_90과 HEX 값이 같으며, 같은 이름을 가진 칼라들끼리 대응되도록 만들었다. 따라서 이젠 다크/라이트모드 어떤 것이든 하나의 디자인만 하면 클릭 한 번으로 칼라 변경이 가능하다.
여기서 Common을 둔 경우는, 색상 태그 내에 텍스트가 들어간 경우가 있기 때문이다. 홈 화면에서 볼 수 있듯이 초록색 태그 내에 있는 흰색 글씨는, 검은색 글씨로 변경이 될 시에 가독성이 떨어지는 문제가 발생한다.
따라서 Common 색상값을 만들어 [라이트모드/다크모드] 모두에서 동일하게 대응될 수 있도록 했다.
(물론 변경 과정에서 개발자님들이 많은 고생을 하시긴 했다... 그래도 비교적 빠르게 라이트 모드를 출시할 수 있었고, 라이트 모드 출시를 빠르게 해 주신 개발자님께 감사를 드립니다..)
캐릭터 칼라 시스템 고도화
마인디에는 현재 7개의 감정 캐릭터가 있다. 감정 캐릭터의 경우, 모드별로 다른 색상을 사용하기에 문제가 있었다.
1. 캐릭터의 고유 이미지가 사라지는 점
2. 라이트모드의 경우 너무 밝아지며, 다크모드의 경우 너무 탁해진다.
3. 대응해야 하는 칼라값이 예상할 수 없는 수준으로 늘어난다.
1개의 캐릭터 당 사용할 수 있는 색상별 명도차를 최대 10개로 제한했다. (현재 존재하는 대부분 캐릭터의 경우 5-6개가 사용된다.)
Grayscale을 제외한 칼라들은 한 색상당 10개만 존재하지만, 라이트모드/다크모드가 다르게 대응되어야 할 경우 2배로 늘어나게 된다. 따라서 Grayscale을 제외한 칼라 시스템은 두 개의 모드에 모두 대응될 수 있는 공통 색상을 만들었다.
마인디의 Color System 중 일부그중 주로 사용하는 50/60의 색상을 Primary Color로 설정하고 앱 내 태그에 색상이 사용된다면 60을 사용하는 걸로 공통화된 규칙을 설정했다.
새로운 Color System을 만들고 기존 디자인을 기반으로 한 개발에 적용을 한 뒤, 문제가 있는 부분들을 확인해 일부 색상 변경을 진행했다. 아직 고칠 것도 많고, 디자인시스템을 디벨롭하는 과정에 있지만 [라이트 모드]를 제공할 수 있다는 것에 의의를 둔다. 또한 각자의 본업이 있는 사이드 프로젝트 팀 내에서, 리소스를 최소화할 수 있는 방법에 대해 끊임없이 고민을 하고 있다.
나에게 있어 마인디팀은 오히려 본업에 집중할 수 있는 힘을 주고, 내가 회사에서 해보지 못한 것들에 대해 자유롭게 도전할 수 있도록 한다. 앞으로도 마인디를 통해 필자가 얻은 인사이트와 디자인 팁, 유저 인터뷰 내용 등을 공유해 보려고 한다.
