디자인 시스템 구성하기 - 컬러와 다크모드

jh·2024년 4월 27일

디자인 시스템

목록 보기

2/14

참고자료

디자인 시스템이란?

디자인 시스템은 '서비스의 목적에 맞도록 일관되게 구성한 일련의 패턴과 공유된 규칙 언어'라고 합니다. 사람들이 디자인을 시작할 때 공통으로 사용하는 컬러, 폰트, 레이아웃, UI 구성 요소 등 일관된 집합을 두고 이를 어떻게 구성하는지 체계가 이루어져야 디자인 시스템이라고 할 수 있습니다

그동안의 디자인

프로젝트를 진행하면서 사실 디자인에 크게 신경을 쓰지 않았다.
이유는

지금 취준생의 입장에서 디자인보다 기능 구현이 나의 포트폴리오에 더 도움이 될 것 같아서
디자인에 공을 들인다고 엄청나게 더 좋은 결과물이 나올 것 같지는 않아서
시간적인 여유가 없어서

그래서 Chakra UI , MUI 같은 UI 라이브러리를 많이 이용했고, 이를 통해 시간을 많이 단축할 수 있었다.

하지만 라이브러리를 이용하면서 명확한 규칙, 가이드라인이 없었고(정하는 것도 힘들었다), 이 때문에 오는 개인적/팀적인 혼란이 많이 있었다

비슷한 기능, UI를 구현하기 위해 나는 A라는 방식을 사용하는데, 다른 팀원은 B라는 방식을 사용하게 되고 이는 결국 코드를 읽을 때 혼란을 불러오게 된다
명확한 가이드라인이 없기 때문에 비슷한 UI를 표현하더라도 세부구현에서 조금씩 달라지기 때문에, 이는 결국 디자인의 통일성이 떨어지게 된다
이를 해결하기 위해서 공통 컴포넌트를 개발할 필요성이 있어도 당장의 구현이 급하다 보니 더 깊게 생각하고 협의해야 하는 공통 컴포넌트 개발 보다는, 그냥 지금 당장 라이브러리를 이용해서 만드는게 편하니까 라는 생각으로 우후죽순 생겨나는 컴포넌트에 대해서 관리하기가 힘들어졌다

그래서 혼자 리팩토링을 진행하면서, 디자인 시스템을 한번 만들어 볼 계획이다

컬러 시스템

대부분의 UI 라이브러리에서는 컬러에 대한 지원을 다 해주고, 다크모드로 변경에 대해서도 대부분 지원해주는 경우가 많다.

그래서 우리는 단순히 사용할 컬러를 지정해놓고, 이를 글로벌 세팅에 등록해두고 사용했었다.

colors: {
    default: "#ffffff",
    blue: {
      100: "#0C356A",
      200: "#0174BE",
      300: "#1AA7EC",
    },
    yellow: {
      100: "#FFC436",
      200: "#FFF0CE",
    },
    black: {
      100: "#000000",
      200: "#161C1C",
      300: "#1E1E20",
      400: "#222222",
    },
    red: {
      100: "#f1121f",
      200: "#c1121f",
    },
    grey: {
      100: "#F0F0F0",
      200: "#ECECEC",
      300: "#D9D9D9",
      400: "#D4D4D4",
      500: "#7a7a7a",
    },
    whiteSmoke: "#f5f5f5",
  },

단점은
1. 어디에 어떤 색상을 써야하는지 개발하면서 생각해야 한다

만약 시스템의 메인 컬러를 사용해야 하는 UI에서 어떤 사람은 blue.100 을 사용하고, 어떤 사람은 blue.200 을 사용할 수도 있다. 또한 이 색상이 다크모드로 변경될 경우에는 어떤 색으로 변경될지 또한 개발자가 직접 등록해줘야 한다

<div color={isDarkMode ? theme.grey.100 : 'black'}/>

그래서 컬러 시스템을 정할 때 가장 중요하게 생각한 것은

DX적인 관점에서, 개발자가 별 생각 없이 필요한 색상을 간단하게 쓸 수 있게 하자
다크모드를 대비해서 일일이 분기처리 하는 수고를 덜자

시멘틱 컬러 시스템

Sementic을 영어로 직역하자면 의미론적이라는 뜻으로 시멘틱은 색상이 아닌 사용 방법에 따라 색상 이름을 지정하는 방법을 말합니다. 예를 들어 기존의 Blue500 대신 Primary color와 같은 형식으로 지정합니다.
그렇게 사용되는 목적과 UI에 따라 네이밍하고 적용하는 컬러를 말하며, 컬러의 관리와 유지 보수가 쉬워지며 다크 모드에도 최적화된 컬러로 화면을 구성할 수 있습니다.

시멘틱 태그처럼, 컬러를 좀 더 의미론적인 관점에서 보는 방법이라고 생각하면 쉽다.

FFFFFF 는 하얀색을 나타내는 hex code이다.

여기에 white_100 라는 이름을 붙여서 하얀색을 나타내고 싶을 때 FFFFFF 대신 , white_100 을 사용할 수 있다.

여기에서 더 나아가, background_main 이라는 이름을 붙여서 해당 색상을 백그라운드에서 사용하는 색상 이라고 사용할 수도 있다

이렇게 되면 메인 백그라운드 색상을 표현해야 하는 경우 FFFFFF , white_100 이 아닌 background_main 을 사용하면 된다

다크모드를 구현할때도, background_main 이라는 컬러가
라이트 모드일때는 FFFFF , 다크 모드일때는 000000 라고 초기에 선언만 해주게 되면 분기처리할 필요도 없고, 이게 어떤 색으로 변해야 하는지도 고민할 필요가 없어진다

디자인 시스템 구성하기 - 컬러와 다크모드