[웹 퍼블리싱 27] CSS - 색상과 배경

배치의 뼈대를 세우고 나니, 이제 화면에 생기를 불어넣을 차례였다. 그런데 색을 다루는 일이 생각보다 만만치 않았다. 브랜드 색을 정하고 나서 그보다 살짝 어두운 색, 살짝 밝은 색이 필요할 때마다 나는 색상 도구를 열어 눈대중으로 골랐다. 색끼리의 관계를 코드로 다룰 방법을 그때는 몰랐다.

이번 편은 색상과 배경을 다룬다. 색을 표기하는 여러 방식과 투명도를 다루는 법, 요즘 권장되는 지각적으로 균일한 색 공간, 색을 섞어 새 색을 만드는 함수, 그리고 배경 이미지와 그라디언트까지 살펴본다. 색을 눈대중이 아니라 규칙으로 다루는 감각을 여기서 익힌다.

1. 색을 표기하는 여러 방식

CSS에서 색을 적는 방법은 여러 가지다. 가장 익숙한 것은 우물 정 기호 뒤에 여섯 자리 값을 적는 방식이다. 각 두 자리가 빨강, 초록, 파랑의 세기를 나타낸다. 이 방식은 널리 쓰이지만 값만 봐서는 어떤 색인지 직관적으로 알기 어렵다. 나도 여섯 자리 값을 보고 색을 떠올리는 건 지금도 잘 안 된다.

빨강 초록 파랑의 세기를 직접 나열하는 방식도 있다. 각 값을 0에서 255 사이로 적는데, 최근에는 값 사이를 공백으로 구분하는 새 표기가 표준이 되었다. 이 방식은 색을 계산으로 조절할 때 편하지만, 역시 세 숫자만으로 색을 상상하기는 쉽지 않다. 사람의 색 감각과는 거리가 있는 표기다.

색상, 채도, 명도로 색을 적는 방식은 훨씬 직관적이다. 색상은 색상환의 각도로 색의 종류를, 채도는 선명함을, 명도는 밝기를 나타낸다. 나는 이 방식을 알고 나서 색을 조절하기가 한결 쉬워졌다. 같은 색상에서 명도만 낮추면 어두운 색이 되므로, 색끼리의 관계를 만들기에 좋았다.

색에는 미리 정해진 이름들도 있다. 흔한 색들은 영어 이름으로 바로 쓸 수 있어, 시안이나 크림슨 같은 이름을 값 대신 적을 수 있다. 나는 빠른 시안 작업이나 예시 코드에서 이 이름들을 즐겨 쓴다. 정확한 브랜드 색이 아니어도 대략의 색을 빠르게 지정할 때 편리하다.

투명을 뜻하는 특별한 값도 있다. 이 값은 완전히 투명한 색을 나타내어, 배경을 비우거나 그라디언트의 한쪽 끝을 사라지게 할 때 쓴다. 나는 그라디언트가 서서히 사라지는 효과를 만들 때 이 투명 값을 한쪽 끝에 둔다. 색이 없는 것과 투명한 색은 다르다는 점을 기억해두면 유용하다.

이렇게 색 표기 방식이 여럿인 것은 각각 쓸모가 다르기 때문이다. 나는 정해진 브랜드 색은 여섯 자리 값으로, 색을 조절할 때는 색상 채도 명도 방식으로, 빠른 시안에는 이름으로 나눠 쓴다. 방식마다 강점이 달라 상황에 맞게 고르는 것이 색을 다루는 첫 감각이다.

2. 투명도를 다루는 법

색에 투명도를 더하는 방법은 크게 두 가지다. 하나는 색 표기 안에 투명도 값을 함께 넣는 것이고, 다른 하나는 요소 전체의 투명도를 조절하는 별도 속성을 쓰는 것이다. 이 둘은 비슷해 보이지만 결과가 크게 다르다. 나는 이 차이를 몰라 한동안 원치 않는 결과에 시달렸다.

색 안에 투명도를 넣으면 그 색에만 투명도가 적용된다. 예를 들어 배경색만 반투명하게 만들고 그 위 글자는 또렷하게 둘 수 있다. 반투명 덮개 위에 선명한 텍스트를 올리는 흔한 디자인이 이 방식으로 만들어진다. 나는 색 단위로 투명도를 제어하고 싶을 때 이 방식을 쓴다.

반면 요소 전체의 투명도를 조절하는 속성은 그 요소와 모든 자식을 통째로 흐리게 만든다. 배경뿐 아니라 글자, 테두리, 안의 이미지까지 전부 반투명해진다. 나는 요소 하나를 통째로 서서히 나타나거나 사라지게 하는 애니메이션에 이 속성을 쓰지만, 배경만 투명하게 하려는 목적에는 쓰지 않는다.

이 둘을 혼동하면 배경만 흐리게 하려다 글자까지 흐려지는 사고가 난다. 나는 반투명 카드를 만들다 안의 글씨가 함께 흐려져 읽기 어려워진 경험이 있다. 원인은 색 투명도 대신 요소 투명도 속성을 쓴 것이었다. 배경만이면 색 안에 투명도를, 요소 전체면 투명도 속성을 쓰는 것으로 나는 규칙을 세웠다.

요소 투명도 속성에는 또 한 가지 주의점이 있다. 이 속성을 1보다 작게 주면 그 요소가 새로운 쌓임 맥락을 만든다. 그래서 겹침 순서에 예상치 못한 영향을 준다. 나는 겹침이 이상할 때 조상 중에 투명도가 걸린 요소가 있는지 확인하는데, 이 쌓임 맥락 때문에 문제가 생기는 경우가 있다.

투명도는 색을 은은하게 겹치는 디자인의 핵심 도구다. 반투명 덮개, 흐릿한 유리 효과, 서서히 사라지는 전환이 모두 투명도에서 나온다. 나는 투명도를 색 단위로 다룰지 요소 단위로 다룰지를 먼저 정한 뒤 작업한다. 이 판단만 명확하면 투명도로 인한 사고는 대부분 예방된다.

3. 지각적으로 균일한 색 공간

비교적 최근에 실무로 들어온 색 표기 방식이 있다. 지각적으로 균일한 색 공간을 쓰는 방식인데, 사람 눈이 느끼는 밝기와 값이 일치하도록 설계되었다. 기존 방식은 같은 명도 값이라도 색상에 따라 실제 밝기가 달라 보이는 문제가 있었다. 이 새 방식은 그 문제를 상당 부분 해결한다.

이 방식의 큰 장점은 밝기를 조절하기가 직관적이라는 것이다. 밝기 값만 올리거나 내리면 색상은 유지한 채 자연스럽게 밝아지거나 어두워진다. 그래서 하나의 브랜드 색에서 밝기만 바꿔 색조 팔레트를 만들기가 아주 쉽다. 나는 이 방식으로 버튼의 기본, 호버, 눌림 상태 색을 체계적으로 만든다.

기존의 색상 채도 명도 방식으로 팔레트를 만들면, 명도만 바꿨는데도 어떤 색은 칙칙해지고 어떤 색은 튀는 문제가 있었다. 사람 눈의 감각과 수치가 어긋났기 때문이다. 이 새 방식은 그 어긋남을 줄여, 팔레트 전체가 고른 인상을 갖게 한다. 나는 색의 일관성을 중시하는 작업에서 이 방식을 우선한다.

이 방식은 표현할 수 있는 색의 범위도 넓다. 최신 화면이 표현하는 선명한 색까지 다룰 수 있어, 더 생생한 색을 쓸 수 있다. 다만 아주 오래된 환경을 고려한다면 대체 색을 함께 두는 배려가 필요하다. 나는 최신 표준을 쓰되, 필요하면 폴백을 마련해 안전을 확보한다.

이 색 공간은 이제 주요 브라우저에서 널리 지원되어 실무에 쓸 만하다. 나는 새 프로젝트에서 색 시스템을 설계할 때 이 방식을 기본으로 삼는다. 특히 명도 기반으로 팔레트를 생성하는 작업에서 그 진가가 드러난다. 색을 규칙적으로 다루려는 사람에게 이 방식은 강력한 무기다.

색을 눈대중이 아니라 규칙으로 다룬다는 것, 이것이 이 방식이 주는 가장 큰 변화다. 나는 예전에 어두운 색이 필요할 때마다 색상 도구를 열어 감으로 골랐지만, 이제는 밝기 값 하나만 조절하면 된다. 색끼리의 관계를 수치로 관리할 수 있게 된 것이다. 이 감각이 색 디자인을 체계적으로 만든다.

4. 색을 섞어 새 색 만들기

더욱 강력한 도구는 두 색을 섞어 새 색을 만드는 함수다. 이 함수에 두 색과 섞는 비율을 주면, 그 비율대로 혼합된 색이 나온다. 브랜드 색에 검정을 조금 섞어 어두운 변형을, 흰색을 섞어 밝은 변형을 만드는 식이다. 나는 이 함수를 알고 나서 색조 팔레트를 코드만으로 생성하게 되었다.

이 함수의 가장 큰 가치는 색들 사이의 관계를 코드로 표현한다는 것이다. 예전에는 어두운 색과 밝은 색을 각각 따로 정의해야 했지만, 이제는 기준 색 하나만 두고 나머지를 섞어서 파생시킨다. 기준 색을 바꾸면 파생된 색들이 전부 따라 바뀐다. 이 연동이 색 관리를 획기적으로 편하게 만든다.

호버 상태 색을 만들 때 나는 이 함수를 특히 자주 쓴다. 버튼의 기본 색에 검정을 살짝 섞으면 자연스럽게 어두워진 호버 색이 나온다. 상태마다 색을 따로 정의하지 않아도, 기준 색에서 자동으로 파생시킬 수 있다. 예전에 전처리기로 하던 이런 색 계산을 이제 순수 CSS만으로 한다.

이 함수는 어느 색 공간에서 섞을지도 지정할 수 있다. 앞서 본 지각적으로 균일한 공간에서 섞으면 중간 색이 더 자연스럽게 나온다. 나는 색을 섞을 때 이 공간을 지정해 매끄러운 결과를 얻는다. 어디에서 섞느냐가 결과의 자연스러움을 좌우한다는 점을 알아두면 좋다.

색 섞기 함수는 색 시스템을 설계하는 데 핵심 재료가 된다. 기준 색 몇 개만 정하고 나머지를 전부 섞어서 파생시키면, 색 전체가 하나의 규칙 아래 통일된다. 나는 이 방식으로 색의 수를 최소한으로 유지하면서도 풍부한 팔레트를 얻는다. 적은 기준으로 많은 색을 만드는 것이 관리의 요령이다.

이 함수 덕에 색을 다루는 일이 디자인 도구에서 코드로 옮겨왔다. 나는 이제 색조 변형이 필요할 때 도구를 열지 않고 함수로 처리한다. 색끼리의 관계가 코드에 명시되어 있으니, 나중에 봐도 왜 이 색이 이 색에서 나왔는지가 분명하다. 이 명료함이 색 시스템을 유지보수 가능하게 만든다.

5. 배경과 그라디언트

배경은 색뿐 아니라 이미지, 그라디언트까지 담을 수 있다. 배경 이미지를 넣을 때는 어떻게 크기를 맞추고 반복할지, 어디에 위치시킬지를 함께 정한다. 이미지가 영역을 가득 채우게 하거나, 잘리지 않고 전부 보이게 하는 설정이 있다. 나는 히어로 영역의 배경 이미지에 채움 설정을 즐겨 쓴다.

배경은 여러 겹을 겹쳐 쌓을 수도 있다. 이미지 위에 반투명 색 그라디언트를 얹어 텍스트 가독성을 높이는 기법이 대표적이다. 사진 위에 글자를 올릴 때 그냥 두면 글자가 묻히지만, 어두운 그라디언트를 한 겹 겹치면 글자가 또렷해진다. 나는 이 다중 배경 기법을 배너 디자인에서 자주 활용한다.

그라디언트는 색이 서서히 변하는 배경이다. 한 방향으로 색이 흐르는 선형 그라디언트가 가장 흔하고, 중심에서 퍼지는 원형, 각도를 도는 원뿔형도 있다. 나는 버튼이나 배경에 은은한 선형 그라디언트를 주어 밋밋함을 덜고, 원뿔형 그라디언트로는 간단한 원형 차트 같은 것도 만든다.

그라디언트의 색 중간점을 세밀하게 조절하면 다양한 효과가 나온다. 두 색의 경계를 뚜렷하게 하면 줄무늬가 되고, 부드럽게 하면 자연스러운 전환이 된다. 앞서 본 투명 값을 그라디언트 끝에 두면 배경이 서서히 사라진다. 나는 이런 조절로 그라디언트를 단순한 색 변화 이상으로 활용한다.

배경 이미지를 다룰 때는 성능도 고려해야 한다. 큰 이미지는 로딩을 느리게 하므로, 적절한 크기로 최적화하고 필요하면 포맷을 가려 쓴다. 나는 배경 이미지가 화면 첫인상을 좌우하는 만큼, 화질과 용량의 균형을 신경 쓴다. 예쁜 배경도 느리게 뜨면 인상이 나빠진다.

정리하면 색은 여러 방식으로 표기하고, 투명도는 색 단위와 요소 단위로 나뉘며, 지각적으로 균일한 공간과 색 섞기 함수로 색을 규칙적으로 다룰 수 있다. 배경은 색과 이미지와 그라디언트를 여러 겹으로 담는다. 이제 화면에 색이 입혀졌으니, 다음 편에서는 글자를 다루는 타이포그래피로 넘어간다.