[Prolog 시즌3] 색상 상수화하기

🏃‍♀️ 들어가며

본격적으로 프로젝트에 들어가기 앞서, 프론트엔드끼리 모여서 전체 디자인에 대해서 논의를 하던 중, 색상이 아직 상수화가 안되어 있다는 것을 알게 되었다. 사실 메인 컬러를 알고 있다면, theme컬러가 정해져있고 그 안에서만 사용하게 된다면 직접 색상코드를 그때그때 입력하는 것이 나쁘지 않다고 생각한다.그러나, 주요한 컬러가 아니지만 그림자, 테두리, 글자색과 같이 자주 쓰이는 회색이나 검정, 흰색은 같이 약속을 하더라도 #000, #000000, black 등 모두가 다르게 사용할 여지가 있다. 또 저렇게 정해져있는 색이 아니더라도 회색과 같은 경우에는 엄청 예리한 사람이 아니면 잘 구분이 안간다. 암튼 다들 하나씩 맡아서 리팩토링을 진행하고 뭔가를 하고 있는 것 같아서 리포트 기능을 하기 전 색상 상수화를 진행하겠다고 했다. *사실상 내가 편하려고 하는 것

 

🌈 색상 상수화

처음에 색을 상수화하는 방향에서 굳이 RED_100, RED_200이런식으로 나누는 것이 이해가 가지 않았다. 저렇게 나누는 기준은 무엇이며 '그냥 메인 컬러를 지정해두면 되는 거 아닌가?', 'theme를 사용하면 되는게 아닌가?' 하는 생각도 들었다.

 

하지만 메인 컬러가 정해져있는 상황이라고 해도 메인 컬러에서 조금 연하게 사용을 하고 싶을 때, 좀 더 진하게 사용하고 싶을 때를 고려하면 사용할 컬러를 정한 후에 연함과 진함을 수치로 만들어두고 사용하면 어떤 화면에서든지 동일한 서비스의 무드를 느낄 수 있다.

 

🛠 구현하기

사용하는 쪽에서 COLOR.RED.100 이렇게 쓸 수 있도록 객체를 만들 수도 있지만,  epth가 깊어지는게 싫어서 취향에 따라 COLOR.RED_100 와 같이 쓸 수 있도록 코드를 사용했다. 큰 차이는 없으므로 정말 취향의 문제인 것 같다.

// 방법 1.
const COLOR = {
  RED : {
    100: ...,
    200: ....
  }
}

// 방법 2.
const COLOR = {
  RED_100: ...,
  RED_200: ...,
}

 

처음에 기준이 되는 색이 연하다면 작은 수(내 입장에선 50) -> 큰 수 로 늘려나가면서 색을 입력하면 되고, 색이 진하다면 큰 수(나는 900을 기준으로) -> 작은수로 줄여나가면서 색을 입력하면 된다. 이때 좀 더 객관적인 수치를 얻기 위해서 Remain에서 제공하는 컬러 생성기를 사용했다. 10퍼센트로 하기에는 너무 큰 범위인 것 같아서 적당히 5%로 지정하고 앞뒤로 진해지고, 연해지고를 따지면서 필요한 범위의 색을 입력했다.

Sass Color Generator

 

이렇게 해서 만들어진 Color.js 파일은 아래와 같다. 주석처리가 되어 있는 부분은, 기존의 색들을 모두 포함할 수 없어서 입력된 색으로 통합했다는 의미다. 이렇게 보니 정말 많은 색들이 통일성을 가질 수 있게 된 것 같아서 뿌듯..!!

흰색은 진해지는 것을 표현하는 게 의미가 없을 것 같아서 기본 색만 지정하고, 검정색도 더이상 연해지면 회색과 혼란이 올 것 같아서 600~900 정도만 생성했다. 그리고 LIGHT, DARK로 나뉘는 색의 경우에는 모두를 담기에는 범위가 일관성이 없어지게 되어서 나눈건데, 단순하게 vscode 익스텐션에서 진한 배경에는 흰색으로 컬러를 보여주는데 그걸 기준으로 진하고 연함을 나눴다 👀