아티클

CSS로 그리는 그림, Pure CSS Drawing

2014-10-06 13:56:50

안녕하세요. NHN Technology Services 접근성개발실 윤원진입니다.

 

Pure CSS Drawing 이란?

 

여러분은 혹시 Pure CSS Drawing에 대해 들어보신적이 있으신가요?

우리가 잘 알고 있듯이 CSS는 HTML로 작성된 웹 문서에 스타일을 입혀 디자인을 표현하는 역할을 합니다.

텍스트에 색상을 지정해주고, 테두리 선을 그어주고, 배경 색상을 칠해주고, 적절한 위치에 요소를 배치해주는 등이 CSS가 흔히 활용되는 부분이지요.

하지만 CSS를 적극적으로 활용하면 이미지 파일을 사용하지 않아도 CSS 만으로도 그림을 그릴 수 있습니다.

 

로만 코르테즈(Román Cortés)라는 해외의 유명 디자이너는 오래전부터 CSS의 가능성을 극대화 하는 다양한 실험을 해왔는데요. 

그러한 실험 중 하나로 여러 개의 텍스트를 겹쳐서 만화 심슨에 나오는 캐릭터를 그린 작품이 있었습니다.

당시는 CSS3가 등장하기도 전이었지만, 이미 활용되고 있는 CSS의 속성만을 이용해서도 충분히 그림을 그릴 수 있다는 것을 보여준 것이었지요. 이 작품이 Pure CSS Drawing이 시작된 최초의 작품이라고 할 수 있을 것 같습니다.

 


Román Cortés의 Homer CSS

 

 

그 이후 CSS3가 새롭게 등장하면서 border-radius, CSS gradient, box-shadow, CSS transform 과 같이 그리기에 활용 할 수 있는 속성들이 많아져 곡면과 그래디언트, 그림자등을 표현하기가 수월해 지면서 CSS 만으로 그림을 그리는 다양한 시도들이 활발해지기 시작했습니다.

 


CSS로 그릴 수 있는 그림들

 

그렇다면 CSS로는 어떻게 그림을 그릴 수 있을까요?

그림을 그리는데 필요한 도형을 만드는 방법을 하나씩 살펴보도록 하겠습니다.

 

삼각형

CSS는 애초에 Drawing 하도록 고안된 코드가 아니기 때문에 일반적인 방법으로는 삼각형을 그릴 수가 없습니다.

하지만 border 속성을 사용하여 두꺼운 테두리를 만들고, 각 방향마다 색상을 다르게 주면 경계면이 대각선으로 생성되는 것을 볼 수 있습니다. 이를 활용하여 한 쪽이나 두 쪽에만 색상을 두고 나머지 쪽에는 투명으로 색상을 주면 이등변 삼각형이나 직각 삼각형을 만들 수 있습니다.

transparent 컬러를 지원하는 IE7 이상의 브라우저에서 만들 수 있습니다.

 

 

 

원

CSS3에 새로 추가된 border-radius 속성을 사용하면 원을 쉽게 만들 수 있습니다.

디자이너들이 흔히 R값 이라고 부르는 모서리 둥글림 값인 border-radius를 50%로 주면 원이 만들어집니다.

border가 있는 경우 50%보다 border-width 값이 더해져야 완전한 원이 만들어지기 때문에, 저는 100%의 값을 주는 방식을 사용하고 있습니다.

border-radius를 지원하는 IE9 이상의 브라우저에서 만들 수 있습니다.

 

 

 

평행사변형

CSS3에 새로 추가된 transform:skew 속성을 사용하면 평행사변형을 쉽게 만들 수 있습니다.

skew 속성에 기울임 각도 값을 주면 사각형인 박스가 기울어져 평행사변형이 됩니다.

transform을 지원하는 IE9 이상의 브라우저에서 만들 수 있습니다.

사다리꼴
삼각형 만들기와 동일한 방법을 사용하면서 width, height 모두를 0으로 하는 대신 한 쪽의 값을 주게 되면 사다리 꼴을 만들 수 있습니다.
transparent 컬러를 지원하는 IE7 이상의 브라우저에서 만들 수 있습니다.

육각형 별
기본적으로 하나의 HTML 요소는 화면에 하나의 요소를 그리지만, 가상컨텐츠(CSS generated contents)를 활용하면 추가로 2개의 요소를 더 그릴 수 있습니다. 위에서 살펴보았던 삼각형 만들기 방법과 가상컨텐츠를 사용하여 이등변 삼각형을 두개 만든 뒤, 두개의 요소를 겹치면 육각형 별을 만들 수 있습니다.

가상컨텐츠를 만드는 선택자인 :before, :after를 지원하는 IE8 이상의 브라우저에서 만들 수 있습니다. 

 

 

 

그 외의 다양한 모양들

이러한 방법들을 응용하면 하나의 HTML 요소만을 가지고도 오각형, 육각형, 마름모꼴, 말풍선, 초승달, 태극무늬 등등 다양한 도형들을 만들 수 있습니다.

 

해외의 유명 개발자인 Nicolas Gallagher는 하나의 HTML 요소만으로 만들 수 있는 다양한 아이콘 셋을 만들어 공개하기도 하였습니다.
 

 


Nicolas Gallagher의 Pure CSS GUI icons

 

 

CSS Drawing의 장점

 

다른 모든 기술 기법들이 그러하듯이, CSS Drawing도 장점과 단점이 있습니다.

먼저 어떤 장점이 있는지 살펴볼까요?

 

용량 절감을 통한 로딩속도 개선

일반적으로 웹에서 사용하는 gif, png, jpg와 같은 이미지 파일들은 픽셀 하나 하나의 색상 정보를 담고 있는 래스터 방식을 사용합니다. 화면에 표시해야 할 그림의 크기가 크면 커질 수록, 용량도 함께 늘어나게 되지요. 반면, CSS Drawing은 일러스트레이터로 그리는 벡터방식의 이미지 포맷들과 유사한 방식으로 그림을 그립니다. 그 때문에 이미지 파일을 사용 할 때보다 훨씬 용량을 절약 할 수 있게 되고, 절감된 용량은 페이지 로딩속도 개선에 도움이 될 수 있습니다.

 

사이즈, 형태, 색상 변형이 가능

벡터방식으로 이미지를 그릴 때 취할 수 있는 장점 중 가장 먼저 꼽히는 것은 사이즈 변경이 자유롭다는 점입니다.

마찬가지로 CSS Drawing도 입력된 값을 변경하여 자유롭게 사이즈를 변경 할 수 있습니다.

또한 transform이나 width, height 값 등의 변경을 통해 형태를 변경 할 수도 있고, 색상도 자유롭게 변경 할 수 있습니다.

 

Transition을 이용한 트위닝 애니메이션

CSS3에서는 값이 변화 할 때 시간을 두고 부드럽게 변화하여 애니메이션 효과가 생기도록 하는 Transition 이라는 속성이 있습니다.

Transition을 활용하면 요소의 형태나 색상, 투명도 등이 자연스럽게 변화하는 트위닝 애니메이션을 만들 수 있습니다.

 


CSS Drawing의 단점

장점만을 본다면 CSS Drawing을 적극 활용해야 하겠지만, 안타깝게도 CSS Drawing은 약점도 함께 가지고 있는 방법이기에 다음과 같은 사항들을 잘 고려해서 사용해야 합니다.

작업자의 숙련도와 비용 문제
포토샵과 같은 그래픽 에디터를 잘 다루는 작업자라고 하더라도, CSS 코드를 작성하는 것이 능숙하지 않으면 CSS로 그림을 그리는 것은 쉽지 않을 수 있습니다.
디자이너가 CSS를 직접 다루는 경우라면 한 번의 작업으로 끝날 수 있지만, 국내와 같이 디자이너와 마크업 개발자가 서로 역할을 나누어 협업을 하는 경우에는 디자이너가 그래픽 에디터로 만든 그림을, 마크업 개발자가 다시 그려야 하는 일도 발생합니다.
이러한 이유로 작업에 필요한 비용이 증가 할 수 있습니다.

브라우저 지원 문제
광범위하게 지원되지 않는 새로운 CSS 속성을 사용할 경우, 하위 버전의 브라우저에서는 온전한 형태의 이미지를 보지 못 할 수 있습니다.
때문에 CSS Drawing을 할 때는 사용하는 속성들의 브라우저 지원 범위를 정확하게 파악하고, 각 버전마다 어떤 형태로 보여질 지를 머릿속에서 그리며 작업 할 수 있어야 합니다.

성능 최적화 문제
일부 CSS 속성은 성능 저하의 원인이 될 수도 있습니다. 예를들어 box-shadow나 text-shadow와 같이 그림자가 추가되는 기능은, 모바일 기기에서 성능 저하의 원인이 되기도 합니다. 그림자의 퍼짐 정도를 결정하는 blur 값이 클수록 그 효과는 더 커집니다.
보통의 경우라면 사용자가 체감하기 어려운 약간의 성능 저하는 감수하고 사용할 수도 있지만, 빠른 동작 속도를 내는 것이 중요한 웹앱 형태의 프로젝트에서는 큰 문제가 될 수도 있습니다.


실무에서의 적용 가능성

그러면 이러한 CSS Drawing을 어떻게 활용 할 수 있을까요?
실무에서 적용할 수 있는 방법에 대해 생각해봅시다.

간단한 Bullet의 대체
웹페이지에서 작은 삼각형 bullet은 웹페이지를 디자인 할 때 흔하게 사용됩니다.
기존에는 이러한 bullet 하나를 추가하기 위해서 이미지를 자르고 붙여야 했습니다.
하지만 CSS Drawing을 활용하여 삼각형을 추가해주면 번거롭게 이미지를 자를 필요 없이 CSS로 bullet을 추가 할 수 있습니다.
또한 이후 색상이 변경되거나, 형태는 같지만 색상이 다른 bullet을 추가할 때는 간단한 코드 수정으로 손쉽게 처리 해 낼 수 있습니다.
border로 삼각형을 그리는 방법은 IE7 이상의 환경에서 잘 표현이 되기 때문에, 브라우저 지원의 문제도 크지 않습니다.

SVG 그래프의 대체
웹페이지에 그래프를 그릴 때는 보통 SVG(Scalable Vector Graphics)를 활용합니다.
하지만 기존에 사용하지 않았던 SVG를 새롭게 학습하고 자바스크립트로 이를 제어하는 것은 녹록치 않아서 많은 분들이 작업에 어려움을 느끼시기도 합니다.
그렇게 복잡한 그래프가 아니라면 SVG대신 CSS Drawing을 사용하여 그래프를 그려도 충분히 표현이 가능 할 수 있습니다.
IE8 이하 버전의 브라우저들은 CSS로 다양한 도형을 그리는데 한계가 있어 지원하기 어려운 문제가 있지만, SVG 역시 IE8 이하에서는 지원하지 않습니다.
프로젝트 성격에 따라 하위 버전의 브라우저를 지원하지 않아도 되는 성격의 업무라면 CSS Drawing을 활용하여 문제를 해결 할 수도 있을것입니다.

CSS를 활용하여 작업한 원형 그래프

이 처럼 CSS Drawing은 상황에 맞게 잘 활용하면, 여러가지 상황에서 유용하게 사용 할 수 있는 기법입니다.
꼭 CSS Only를 고집한 Pure CSS Drawing이 아니더라도, 상황에 따라 이미지와 조합하여 적절히 활용한다면 더 유용하게 사용 할 수 있을 것입니다.

 

조회수64801
댓글 0
댓글을 작성하려면 해주세요.