CSS와 뗄 수 없는 웹 디자인

취향의 흔적
- IT/웹, 2007-07-02, resistan

웹과 디자인

디자인이란 인간 생활에 필요한 조형 활동이다. 디자인은 숟가락 하나에서부터 초대형 빌딩까지 사람이 사용하는 모든 물건에 적용되는 것이다. 그래서 디자인에는 미학적인 면과 함께 그 실용적인 면이 반드시 강조된다. 웹 디자인 역시 마찬가지라 그 아름다움과 더불어 사용자 경험에 근거했을 때 얼마나 페이지를 가독성이나 사용성이 높게 구성하느냐가 매우 중요해지는 것이다. UI나 UX가 웹 디자인에서 대두되는 이유는 바로 웹 페이지가 예술품이 아니라 사용했을 때 인간의 생활이 더 편리해지는 하나의 도구로 인식되고 있기 때문이다.

웹이 인간의 도구라는 점을 굳이 장황하게 설명할 필요는 없을 것이다. 다만, 그 도구가 어떤 용도로 사용되고 있는지는 짚어볼 필요가 있다. 2006년 한국정보문화진흥원의 조사에 따르면 우리 나라 사람들이 웹을 이용하는 가장 큰 목적이 정보나 자료를 찾는데 있는 것으로 나타났다. 사람들이 웹을 정보를 쉽게 얻을 수 있는 곳으로 인식하고 있다는 증거라 하겠다. 그런데도, 국내 웹에 올라와 있는 정보들은 형태적으로는 그럴 듯해도 구조적으로 정리되지 않은 경우가 훨씬 많아서 단일 웹 페이지 이외에서 그 페이지의 정보를 재활용하거나 기계적으로 내용을 파악하기 어렵다.

웹 페이지를 더욱 보기 좋게

웹 페이지를 구성하는데 필요한 많은 도구가 있지만, CSS는 웹 사이트의 디자인을 해주는 아주 중요한 도구라고 할 수 있다. CSS는 기본적으로 혼자서 사용될 수는 없는 언어이다. HTML과 같은 Markup 언어가 있어야만 동작하며, 이는 CSS의 역할이 Markup 언어를 보조하는 것이라는 점을 분명히 알려준다. HTML이 웹 페이지의 뼈대를 만들어준다면, CSS는 그 뼈대 위에 장식을 해주는 역할을 한다. 그래서 HTML이 어떻게 작성되어 있느냐에 따라 CSS를 사용하는 방법이 달라지게 된다.

예를 들어, 기존에 흔히 하던대로 table 태그만을 이용해 웹 페이지를 작성한다면, 각각 다른 영역과 구성 요소에 굉장히 많은 종류의 클래스를 사용하여 각 영역을 구별하고, 별도의 속성을 지정해줘야 한다. 이는 콘텐트 간의 구분을 지어주는 요소가 없기 때문이다.
반대로 6월호에서 소개한 방식으로 웹 표준을 지켜서 HTML을 작성한다면 사용해야 하는 클래스는 굉장히 적어지고 HTML 코드 역시 더 간결해진다. 이는 HTML 태그가 CSS를 적용해야 하는 지점을 명확하게 구별해주기 때문이라 할 수 있다.

웹 디자인은 구조 디자인

아래에 나올 선택자의 종류를 자세히 살펴보면 알 수 있겠지만, 웹은 문장이나 그림을 나열하는 것이 아니라 정보를 구조화해서 배치할 수 있도록 만들어져 있다. Cascading Style Sheet라는 이름에서 Cascading(계층적)이라는 말이 바로 이런 점을 그대로 드러내고 있다. 그래서 CSS는 HTML 문서의 상하 구조 순서와 요소에 따라 그 속성을 상속할 수 있다.

일례로 많이 쓰고 있는 바와 같이 body 태그에 CSS로 글자 크기를 지정할 경우, body 안에 들어가는 요소의 글자도 같은 속성을 상속받게 된다. 일부의 태그는 경우에 따라 상위 요소의 속성을 그대로 상속받지 않기도 한다. CSS에서 상속은 매우 중요한 특징이며, 이로 인해 CSS는 많은 부분을 중복하여 사용하지 않아도 사이트의 스타일을 지정할 수 있게 된다. 이런 이유 때문에 HTML에서 상하 구조를 잘 설계해서 작성하는 것이 중요해지는 것이다.

Selector

HTML의 구조에 따라 CSS는 어떤 부분을 어떻게 꾸밀지를 결정할 수 있고, Selector(선택자)라는 도구가 이를 이용할 수 있게 해준다. 흔히 사용하는 클래스 역시 이 Selector의 한 종류에 불과하다.

Element Selector(요소 선택자)

요소 선택자란 HTML Element인 태그를 선택자로 사용하는 경우이다. 예를 들어 아래와 같이 CSS를 사용한다면, 이 CSS가 적용되는 문서에서 P 태그가 쓰인 모든 곳의 글자 색상은 검정색이 될 것이다.

p    {    color:black;    }

ID Selector(아이디 선택자)

특정 ID가 부여되어있는 요소에 대해 속성을 적용하게 된다. CSS에서 ID는 # 부호를 이용하여 구별한다.

#MENU    {    border:1px solid #333;    }
<h2 class="menu">내용</h2>
<p class="menu">내용</p>

윗 줄은 CSS의 코드이고 아랫줄은 HTML의 코드이다. 클래스와 사용하는 방법은 유사하지만, HTML 문서 내에서 동일한 ID는 중복 사용할 수 없다.

Class Seleotor(클래스 선택자)

특정 class에 해당하는 모든 요소에 속성을 적용한다. Class는 . 부호를 이용하여 구별한다.

.menu { background:#EEE;  }

ID와 class가 다른 점이라면, 동일한 ID는 문서당 한번만 사용할 수 있지만, class는 동일한 이름을 여러 번 사용해도 된다는 점이다.

Contextual Selector(문맥 선택자)

문맥 선택자란 페이지의 구조에 따라 태그나 ID, 클래스 등을 상위 요소부터 차례대로 찾아나가는 방식이다. 이 때 문맥 선택자임을 나타내기 위해 요소와 요소 사이에 공백 문자를 넣어주게 된다.

blockquote strong {  color:red;  }
<blockquote>
    <p>인용 문장에서 <strong>강조</strong>되어야 할 부분</p>
</blockquote>
<p>이 문장에서 <strong>강조</strong>되어야 할 부분</p>

위의 예제에서 빨간색으로 나타나는 부분은 인용 문장에 있는 강조라는 단어이다. 위의 CSS 코드는 blockquote라는 요소의 하위에 있는 strong에만 해당 속성을 적용하도록 하고 있다.

Pseudo-class Selector(가상 클래스 선택자)

가상 클래스 선택자는 특정 요소의 특정한 상태에 대해 속성을 부여할 수 있도록 하는 수단이다. 태표적으로 사용되는 곳은 링크를 나타내는 a 태그이며, 사용자가 링크를 방문한 적이 있는지, 마우스로 선택한 상태인지 등을 나타내주곤 한다. 이 가상 클래스 선택자를 사용하기 위해서는 : 을 이용하여 해당 요소의 상태를 정의하고 필요한 속성을 정의할 수 있다.

a, a:link, a:visited  { color:black;  }
a:hover, a:active     { color:red;    }

이 예제에서는 일반 링크 요소와 방문한 적이 있는 링크의 텍스트 색상은 검정색, 마우스를 가져다 대거나 링크가 활성화된 상태일 때는 텍스트의 색상이 빨간색이 되도록 정의하고 있다.

Pseudo-element Selector(가상 요소 선택자)

가상 요소 선택자는 특정 요소 중의 일부만을 골라 속성을 정의할 수 있도록 한다. 가상 클래스 선택자와 마찬가지로 : 부호를 이용하여 특정 부분을 골라낼 수 있다.

p:first-line    {    font-weight:bold;    }
p:first-letter    {    font-size:2em;    }

이 예제의 첫 행은 문단의 첫 번째 줄의 글자를 굵게 하고, 두 번째 행은 문단의 첫 번째 글자의 크기를 두 배의 크기
가 되도록 한다.

Specification

CSS가 어디에 기술되는가, 또는 어떤 선택자를 사용하고 있는가에 따라 HTML 요소에 적용되는 스타일은 달라질 수 있다.

CSS를 사용하는 방식에는 크게 세가지가 있는데 이는 각각 inline style, embedded(internal) CSS, external CSS라 한다. 이중 inline style은 HTML의 태그 요소에 style 속성을 이용해 직접 스타일을 적용하는 방법이고, embedded는 문서 상단에 style 태그를 사용한다. 또, external은 외부에 별도의 파일로 작성하여 link 태그로 불러오는 방식이다.

Inline style

<p style="color: red">내용</p>

Embedded CSS

<style type="text/css">
p    {    color:green;    }
</style>

External CSS

<link type="text/css" rel="stylesheet" />

각각의 예제가 하나의 문서에 있고, style.css에서 p 요소에 대한 색상을 검정색으로 지정했을 경우, 문서에서 사용된 p 요소의 색상은 무엇일까? 바로 초록색이다. 물론 inline style로 지정한 문단의 경우 빨간색으로 나오게 될 것이다. 또 어떤 선택자를 사용했는가에 따라 그 우선 순위가 달라진다. 예를 들어 같은 태그 요소라고 하더라도 ID와 class가 동시에 부여되어 있다면, ID로 지정한 스타일 속성이 해당 요소에 우선 적용된다.

#A    {    color:red;    }
.B    {    color:green;    }
p    {    color:black;    }
<p class="B" id="A">내용</p>

이 예제에서 p 요소 안에 있는 글자의 색상은 빨간색으로 적용된다. ID 선택자는 class 선택자보다 우선하고, class 선택자는 요소 선택자보다 우선 순위가 높다. 이것을 공식화 하면 요소 선택자는 1단위, class 선택자는 100단위, ID 선택자에는 10000단위를 부여해 합산하는 방식이라 할 수 있으며 이 때 합계가 높은 쪽이 우선 순위를 갖는다.

#A .b p    {  color:red;  }  /* 10000+100+1 = 10101 */
.b p .c    {  color:blue; }  /* 100 + 1 + 100 = 201 */

단, 이것은 예제를 들기위해 각각 1, 100, 10000 단위를 부여한 것이지 하나의 요소를 정의하기 위해 class 선택자가 100개 사용된다고 해서 ID 선택자와 우선 순위에서 동등해지는 것은 아니라는 점을 알아둘 필요가 있다.

CSS를 이용한 웹 디자인

페이지 콘텐트가 확정된다면, 나뉘어 있는 콘텐트 부분 부분의 중요도를 판단하고 디자인을 하게 될 것이다. 콘텐트를 파악하고, 전체적인 레이아웃을 정하고, 각각의 요소에 특징을 부여하고, 그 요소 요소를 좀 더 읽기 편하고 사용하기 쉽게 만드는 일이 웹 디자인이 아닌가.

여러 방면의 디자이너들이 많이 사용하는 포토샵이라는 툴은 그림을 그릴 수 있는 도구지만, 직접 웹 페이지를 만들어주는 도구는 아니다. 웹 디자인을 한다면 PSD 파일을 만들기 전에 CSS가 무엇을 할 수 있는지, 웹 페이지에서 어떤 표현을 할 수 있는지를 알아둘 필요가 있다 하겠다.

CSS는 HTML과 용도가 다르다.

많은 사람들이 HTML의 속성으로 이미 디자인적 요소를 정의하고, HTML에서 정의할 수 없는 부분만을 CSS에서 정의해서 사용하는 방식을 취하고 있다. 그래서 링크의 색상 등에 대한 스타일만을 사용하는 경우가 많다. 하지만 이는 분명히 잘못된 방식이다.

앞서도 설명한 바와 같이, CSS와 HTML은 그 목적이 다르다. HTML이 문서의 내용과 구조를 분명히 하기 위한 수단이라면 CSS는 HTML이 해주지 않는 시각적 효과를 만들어내는 도구다. 따라서 HTML에는 디자인적 요소를 최대한 배제하고 CSS에서 모든 디자인적 요소를 처리하는 것이 옳다.

구조와 디자인 요소의 분리는 사이트 제작 이후에도 내용과 디자인의 관리를 이원화할 수 있게 만들어준다. 구조, 디자인, 양식(스크립트 등의 Behavior)을 분리해서 사용하는 이런 방식은 디자인 리뉴얼이 잦은 우리 나라의 풍토에서는 오히려 효율적이 될 수 있을 것이다.

이 글은 월간 w.e.b. 7월호에 기고된 글입니다.

아무리봐도 글의 질적인 측면이 너무 떨어져, 내놓기 많이 힘들었습니다. 창피...; ㅠㅠ