CSS: 컬러 변수를 설정하는 방법

발생일: 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": [
                // https://packagecontrol.io/packages/CSS3
                "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
        }
    ]
}




참고:


저작자 표시 비영리 변경 금지
신고

카테고리

분류 전체보기 (682)
About me. (6)
Daylogs (647)
비공개 (0)
영어공부 (0)
My works - 추억 (29)