티스토리 뷰
발생일: 2017.02.16
키워드: css, color, 변수, css color variable naming
문제:
프로젝트에서 사용하는 컬러를 관리하고 있지 않았더니, 같은 색인데도 컬러 코드가 조금씩 다르다.
컬러를 코드로 직접 쓰는 것보단 대표할 수 있는 이름을 지어 변수를 사용하면 효과적이다. 코드에 일관성을 줄 수 있을 뿐 아니라, 나중에 컬러를 한꺼번에 변경할 때에도 편하다.
이 참에 컬러 코드를 정리해볼까 한다. 기존 방식에 불편한 점이 있기도 했었는데, 더 효율적으로 이름 지어 관리할 수 있는 방법이 있을까?
해결책:
기존 몇몇 프로젝트에서는, 컬러에 이름을 지을 때 용도에 따라 이름 짓거나 접두사/접미사를 붙여 사용했었다.
예를 들어 아래와 같은 식이다.
- 특정 패턴으로 이름을 짓는 방법
base-color
brand-color
brand-80-color
- 특정 영역을 접두사로 이름을 짓는 방법
header-background-color
footer-background-color
- 용도에 맞게 이름을 짓는 방법
$tooltip-color: #8a7dff;
$emphasis-color: #a6a6a6;
$text-color: #595959;
$strong-color: #444;
헌데, 시간이 지나면 그 종류가 많아져서 제대로 관리되지 않았던 것 같다.
- 나중엔 같은 컬러인데도 다른 이름이 붙어있고(용도가 다르니 당연한 일이다),
- 같은 용도인데도 다른 색으로 표현해야 하는 필요가 있어서 자꾸만 드러나게 됐다. (예: tooltip-type-a, tooltip-type-b)
이런 문제 때문에, 그 이후에는 컬러를 단계별로 나눠 명명했었다.
- 컬러의 단계로 이름을 짓는 방법
$darkish-gray: #444;
$dark-gray: #363636;
$darker-gray: #303030;
$darkest-gray: #292929;
$darkester-gray: #111;
이렇게 했더니, 컬러를 단계별로 직관적으로 구분 할 수 있어서 좋았다. 하지만 시간이 흐르고 다른 컬러가 추가되면서 단계의 일관성이 떨어졌다. 어떤 때는 더 헷갈리는 경우도 있었다. (예: blue-3과 orange-3의 농도가 전혀 다르다던가)
검색해보다가 컬러를 어떻게 분류하면 좋을지에 대해 잘 정리한 포스트를 찾았다. 내가 경험했던 기존 방식에 문제점을 잘 정리했을 뿐 아니라, 해결책으로 비슷한 컬러를 대표 컬러 이름으로 그룹핑하자는 아이디어도 제시하고 있다. (이 글에 제시한 예제도 해당 포스트의 것을 차용했다)
즉, 컬러를 그 이름 그대로 사용하자는 아이디어다. 처음엔 '그럼 코드를 직접 사용하는 것과 무슨 차이가 있나'하고 의아했다. 헌데 돌이켜보니, 이 방법을 사용했던 프로젝트가 있었고, 그 프로젝트에서는 컬러가 한번도 문제가 되지 않았었다.
그 땐 디자이너가 프로젝트에서 사용하는 컬러를 컬러의 이름으로 정리해서 관리해줬다 (예: tangerine-orange). 디자인이 적용되지 않은 신규 컴포넌트를 만들 때에도, 컬러 팔레트에서 이름을 가져다 할당해 사용했고, 특별히 어려움을 느끼지 않았다. 디자인 개편으로 전체 컬러를 변경할 때에도 큰 어려움이 없었다.
잘 생각해보면 당연한데, 너무 개발자의 사고로만 해결하려고 했던 모양이다.
가장 효율적으로 지속할 수 있는 방법은,
- 프로젝트에서 사용하는 컬러를 별도의 목록으로 만들어두고,
- 컬러에 직접 색상의 구체적인 이름을 할당해 관리
하는 것 같다.
논의:
#
디자이너가 있어 컬러를 관리해주고 이름을 할당해주면 좋겠지만, 컬러에 특정 이름을 붙이는 건 꽤 너려운 일이다. 이럴 땐 컬러에 이름을 붙여주는 도구를 이용해보면 좋다.
Name that color
특정 컬러를 대표 컬러로 전환해 이름을 반환해주는 모듈
#
나는 서브라임 에디터를 쓰고 있는데 컬러를 미리 파악할 수 있는 편리한 패키지가 있다.
컬러 미리보기용 서브라임 패키지
위 패키지에선 css와 sass을 지원하는데, less 에스 사용하려면 아래 설정을 추가해주면 된다.
{
// Scanning rules
"color_scanning": [
{
"syntax_files": [],
"syntax_filter": "whitelist",
"base_scopes": [
"source.css",
"text.html",
"source.less"
],
"scan_scopes": [
"meta.declaration-list.css -support.type.property-name.css -comment -string",
// CSS, CSS in HTML etc. (based on: Sublime Default)
"meta.property-value.css -comment -string",
// CSS3, CSS3 in HTML etc. (based on: https://packagecontrol.io/packages/CSS3)
"meta.value.css -comment -string",
// HTML attributes (based on: Sublime Default)
"meta.tag.inline.any.html string.quoted",
"meta.tag.any.html meta.attribute-with-value.style.html"
],
"scan_completion_scopes": [],
"extensions": [],
"allowed_colors": ["css3"],
"use_hex_argb": false,
"compress_hex_output": true
}
]
}
참고:
반응형
댓글
공지사항