[스타트업 끄적끄적 - 1] 현실적인 디자인시스템과 다크모드

디자이너, PdM으로써 브랜드 리뉴얼을 드디어 오늘 끝 마쳤다(비전공자 출신 신입이지만 어찌어찌 돌파한 이 안도감..) 나는 주로 디자인시스템을 새롭게 정의하고 개발 스쿼드의 오너로써 각 OS별 UI디자인과 그에 대한 개발 매니지먼트를 담당하였다. 새롭게 작성하는 이번 글에서는 리소스와 서비스가 한정적인 스타트업의 디자인시스템을 만들면서 참고가 될지도 모르는 나의 경험과 하면서 아쉬웠던 점들을 공유하고자 한다. (디자인시스템에 대한 정의는 다루지 않겠습니다! 워낙 좋은 글들이 많으니..!) 내가 담당하고 있는 서비스는 일본의 레시피 앱이다. 비즈니스 모델은 유저가 콘텐츠를 보면서 표시되는 구글 앱광고나 tie-up광고를 통한 수익구조이다. 즉, 유저가 보다 콘텐츠에 집중할 수 있는 UX설계가 필요하다. 기존 서비스는 컴포넌트에 많은 색이 사용되었기 때문에 그레이 컬러를 적용시켜서 콘텐츠에 관람에 방해가 되지 않는 디자인으로써 달성하고 싶은 목표는 이하의 2개였다. ・다크모드 대응 ・블랙/화이트 테마의 UI디자인 (왜 이 두가지인지는 다음글에 보다 자세히 설명하고자 합니다) 사실 다크모드의 적용은 기존서비스에 적용할때 주의해야할 것들이 많다(빨리 알지 못해서 매우 고생을 하였다.. 내가 아닌 우리 엔지니어들..고멘네..) 기존 UI의 레이어가 많거나 색이 복잡하다면 그레이 컬러의 적용이 어려워진다. 그레이 컬러와 다크모드는 투명도가 존재하고 UI에서의 사용이유에 따라서 명칭을 각각 지정해야하기 때문이다. 링크로 올린 우버의 디자인시스템 피그마 파일을 보면 라이트/다크 모드의 컬러에서 같은 색이여도 정의가 엄청나게 많은 것도 그에 따른 이유이다. 다크모드와 시스템그레이 컬러 이용을 고려하고 있다면 레이어가 적은 UI구성을 해야 할 것이며 기존 색을 적은 수의 컬러로 대응할 수 있어야 할 것이다. 그의 방법은 링크의 우버 디자인시스템을 참고하자. 그렇다면 한정적인 컬러를 어떤식으로 정의하여야 할까. [스타트업 끄적끄적 - 2]에서는 Airbnb의 사례를 통해서 한정적인 컬러를 분류하는 기준에 대해서 설명하고자 한다.