10. 색상 스키마와 디자인 목업

웹 디자이너가 사이트의 구조 또는 와이어프레임을 가지고 클라이언트의 승인을 받았다면, 다음 단계는 색상과 그래픽을 가지고 사이트의 형태와 느낌을 결정하는 단계입니다. 이 글에서는, 나 자신과 클라이언트를 위해서 이러한 과정을 가능한 한 단순하게 하는 것을 보여줄 것입니다. 단순하게 해야 하는 것에는 두가지 이유가 있습니다. 첫째, 이러한 문제를 제외하더라도 삶은 이미 충분히 복잡합니다. 둘째, 단순하게 계획하는 것은 사이트를 좀 더 접근성있고 사용하기 쉽게 만듭니다. 이 글에서 당신은:
  • 제목, 부제목, 본문 텍스트에 사용할 폰트 선택과 다른 타이포그래피 문제들을 볼 것입니다.
  • 웹 사이트에 사용할 서로 다른 색상 조합에 대한 계획을 세워 볼 것입니다.
  • 클라이언트가 색상과 그래픽에 대해 결정할 목업을 만들 것입니다.
  • 사이트를 오픈하기 전에 어떻게 테스트할 것인지 고려할 것입니다.

차례는 다음과 같습니다.

  • 1단계: 폰트 선택
    • 타입페이스와 폰트
    • 가독성(readability)과 판독성(legibility)1
  • 2단계: 타이포그래피 적용
    • 정렬방식에 대한 주의
  • 3단계: 색상
  • 4단계: 테스트
  • 요약
  • 연습문제

1단계: 폰트 선택

타이포그래피의 기술적인 면에 대해서는 이 글 다음의 타이포그래피 글 에서 더 많이 배우게 될 것입니다. 이 글에서는 그중 일부만을 다룰 것이며, 이 단계에서는 그것만으로도 유용할 것입니다.2

폰트는 달리 “타입페이스typefaces” 라고도 하며, 텍스트, 숫자, 문자, 기타 심볼을 표시하기 위해 사용합니다. 달리 “글리프glyphs” 라고도 하는 이러한 심볼, 글자들, 숫자들은 패밀리family, 스타일(이탤릭, 노멀, 오블리크 등), 변형variant(노멀 또는 작은 대문자), 두께weight, 장평stretch(높이나 폭을 줄이거나 늘리는 것), 크기(포인트 또는 픽셀)로 분류됩니다. 타이포그래피는 텍스트의 정렬과 외형입니다. 즉 타이포그래피는 이러한 글리프glyphs 의 형태와, 그것들이 페이지에 어떻게 배치되어있는지(단, 문단, 정렬 등) 를 생각하는 것입니다. 웹 페이지에서 타이포그래피가 어떻게 보일 지를 컨트롤하는 가장 효과적인 방법은 캐스케이딩 스타일시트 (CSS) 입니다.

웹 디자인을 마무리하는 과정 중 첫단계는 사이트 전반에서 사용할 폰트 를 결정하는 일입니다. 많은 연구 결과, 사이트에서 폰트를 다양하게 사용할 경우 사용자를 혼란시킬 가능성이 있다는 점이 증명되었습니다. 반면에, 한가지 폰트만 사용한다면 그 사이트는 단조로워 보일 것입니다.

제목과 부제목에 한가지 타입페이스typeface를 사용하고, 본문에는 다른 것을 사용할 것을 권합니다. 특히 사이트에 광고를 추가할 생각이라면 더 그렇습니다. 사이트에 사용하는 폰트의 수를 제한하게 되면, 읽는 이가 빠르게 훑어 내려가면서도 본문과 제목을 구분할 수 있고, 그러면서도 디자인의 연속성을 유지할 수 있습니다. 광고주들은 여기에 변화를 추가할 것입니다 – 광고주가 어떤 폰트를 사용할 지 당신이 미리 알 방법은 없습니다.

개인적으로, 나는 본문에는 Verdana, 그리고 제목에는 Times Roman 또는 Georgia를 사용하는 편입니다. Times Roman 과 Georgia 는 세리프체이고, Verdana는 산세리프체입니다.

곧 보겠지만, 예제 사이트에서는 본문에 Verdana 를 사용할 것입니다. 하지만 로고가 Arial Black에 기반해서 만들어졌으므로, 모든 제목들에도 산세리프를 사용하기로 했습니다. 이따금씩 당신 자신의 규칙을 위반해야 할 경우가 생길 것이며, 이 레이아웃은 그러한 위기 대비에 대한 예제가 될 것입니다. 하지만 우선, 타입페이스들 사이의 차이점을 설명하고, 단순한 선택을 선호하는 이유에 대해 이야기하겠습니다.

타입페이스와 폰트

폰트에는 크게 네가지가 있습니다:

  1. 그림 1. 세리프체의 예제, Times New Roman 18포인트 일반(볼드나 이탤릭이 아닌) 입니다.

    세리프: 세리프체는 출력물에서 본문의 활자로 널리 사용되었는데, 출력물에서는 이것이 읽기 쉽기 때문입니다. 하지만 웹은 출력물과는 다르며, 폰트의 가독성 에 관한 몇몇 연구 결과, 그림 2 처럼 웹 페이지의 본문에 사용되었을 때 더 읽기 쉬운 산세리프체가 있음이 밝혀졌습니다.

  2. 그림 2. 산세리프의 예제, Verdana 18포인트 일반 입니다.

    산세리프: 삐침 같은 특별한 것 없이 평이하게 끝나는 폰트입니다. 몇몇 저자들 이 주장하기로는 폰트 가독성에 관한 연구에서 산세리프체가 가독성 면에서 결함이 있음이 증명되었다고 하지만, 그 사이트에서조차 본문체로는 산세리프를 사용하고 있었습니다. 심지어 세리프체가 더 판독성이 좋다 고 주장하는 글 들 조차, 웹 페이지 수록본에서는 산세리프를 사용하고 있습니다. 따라서 나는 그림 2에 보여지는 산세리프를 사용합니다. 이것은 이제 웹에서 전형적인 본문 폰트입니다.

  3. 그림 3. 필기체의 예제, Staccato 18포인트입니다.

    필기체: 그림 3에서 보이는 바와 같이, 이러한 폰트들은 프린트된 것이라기 보다는 펜이나 붓을 가지고 손으로 직접 쓴 것 처럼 보입니다. 웹 페이지, 특히 본문에서 이런 폰트를 쓰지 않는 이유는, 이런 폰트로 씌어진 문단이 클 경우 읽기가 매우 어렵기 때문입니다. 추가적으로, 모든 브라우저들이 동일한 폰트를 보여주는 것은 아니므로, 만약 이러한 폰트를 사용하기로 결정했다면 누군가의 브라우저에서는 세리프체로 나타날수도 있습니다.

  4. 그림 4. 특수 폰트의 예제, Jokewood 18포인트입니다.

    특수한 것들, 고정폭 문자를 포함하여: 고정폭 문자는 모든 문자들이 동일하게 고정된 폭을 가진 문자이며, 타자기로 친 것과 흡사하게 보입니다. 다른 폰트들은 그림 4에 보여지는 것과 같이, 마치 팬터지처럼 보일 수 있으며, 일반적으로 장식 목적으로만 사용됩니다. 고정폭 문자들은 웹 사이트에서 일반적인 쓰임새가 있는데, 특히프로그램 코드를 보여주려는 목적 으로 사용됩니다. 이 폰트는 코드에서 사용된 각각의 문자와 심벌 들을 명확하게 표현하므로, 종종 그러한 목적으로 사용됩니다.

위에 예를 든 것들을 보면 폰트들이 서로 다르게 만들어졌음을, 심지어는 같은 크기라고 하더라도 서로 다른 것을 보여줍니다. 포인트는 문자의 높이를 기준으로 한 것인데, 어떤 폰트들은 같은 18포인트라고 해도 다른 것보다 큰 경우가 있습니다. 다른 변형들도 있는데, 예를 들어 글자나 단어들 사이의 간격이라든가, Jokewood 같은 특정 폰트들은 소문자가 없는 경우도 있습니다. Jokewood와 Staccato 에서 보듯, 이러한 것이 본문에 사용된다면 읽기가 어려울 것입니다. 이러한 폰트들은 제목, 혹은 광고 같은 한정된 용도로 사용될 수 있을 것입니다.

한가지 고려해야 할 점은, 이러한 폰트들이 모든 브라우저에서 서로 다르게 보일 수 있다는 것입니다. “모든 브라우저가 동일한 폰트를 보여주는 것은 아닙니다” 라고 위에서 첨언했던 것을 기억할지 모르겠습니다. 이러한 문제가 발생하는 이유는, 모든 운영체제가 동일한 폰트를 지원하는 것은 아니기 때문입니다. 혹은, 같은 폰트를 지원하고 있지만 변형, 두께, 기타 다른 인자들이 브라우저들마다 서로 다르게 보일 수 있습니다. 이러한 이유로, 기본적인 폰트 를 사용할 수도 있으며, 단순히 “세리프” 또는 “산세리프” 라는 선언으로 웹 페이지의 타이포그래피를 정의할 수도 잇습니다. 혹은, 기본적인 이름과 당신이 선택한 폰트의 이름을 모두 사용하고 최선의 것이 보여지기를 희망하는 것도 가능합니다 – 사용자 역시 당신이 지정한 폰트, 혹은 그것이 렌더링되는 방식을 바꿀 수 있기 때문입니다.

모든 브라우저에서 특정한 폰트를 특정한 스타일, 변형, 두께, 장평으로 완전히 동일하게 표시하는 방법은, 그래픽 프로그램에서 그 폰트를 가지고 이미지를 만드는 방법 이외에는 없습니다. 하지만 여러가지 이유로 이러한 것을 추천할수는 없습니다 – 스크린 리더에서 그래픽이 표현하는 텍스트를 읽을 수 없으므로 접근성이 없고, 모든 브라우저가 풀 페이지 리사이즈를 지원하는 것은 아니므로 크기 조절이 어렵고, 내용을 바꾸려고 할 때 마다 이미지를 다시 만들어야 하므로 관리하기가 어렵습니다. 제 말을 믿고, 그런 방식은 쓰지 마세요.

웹 디자이너로서, 웹이란 것은 기본적으로 대단히 가변적 – 모든 의도와 목적에서 – 이라는 사실을 받아들여야 합니다. 당신은 웹 사이트 디자인을 하면서 아주 많은 것을 컨트롤 할 수 있지만, 모든 것은 아닙니다. 폰트 역시 당신이 어느정도 조절할 수 있는 것이긴 하지만, 가능한 한 단순하게 유지할 때에만 그렇습니다. 이러한 이유로, 나는 오랫동안 본문 폰트로는 Verdana, 제목으로는 Times Roman과 Georgia 만을 사용하고 있습니다.

또한 위와 같은 이유로, 폰트 디자이너와 프로그래머들은 좀 더 아름답고 판독성 있는 폰트를 만들려는 노력을 끊임없이 하고 있습니다. 그러니 내가 말하는 것을 상식이라고 받아들이고, 만약 다른 새로운 것이 될 거라고 생각한다면 시도해보기 바랍니다. 스스로 여러 브라우저에서 웹 페이지를 테스트 해 본 후 당신의 생각대로 진행되지 않는 것을 발견한다면 곧 깨닫게 될 것입니다.

가독성과 판독성

웹 페이지 디자인을 클라이언트에게 보여주면, 그(녀)는 세리프와 산세리프 사이의 차이를 쉽게 알아차리지는 못할 것입니다. 클라이언트가 아는 것은 그(녀)가 페이지의 컨텐츠를 읽을 수 있느냐 없느냐 일 뿐입니다. 따라서, 결국 문제가 되는 것은 판독성입니다. 그러한 목적으로, 다음과 같은 것을 확실히 해야 합니다:

  1. 다양한 해상도의 브라우저에서 읽을 수 있도록 충분히 큰 폰트를 사용해야 합니다. 비록 사용자들이 몇몇 브라우저에서 폰트 크기를 바꿀 수 있지만, 서로 다른 브라우저 해상도 에서 폰트를 조절할 수 있는지 직접 테스트해볼 수 있습니다. 이러한 것이 잘 되도록 하는 한가지 방법은, 폰트 사이즈를 픽셀로 지정하지 말고 em 이나 퍼센트 단위로 지정하는 것입니다.
  2. 본문 텍스트와 배경 사이에 충분한 대비가 있도록 해야 합니다. 검은 배경 위에 흰색의, 혹은 밝은 텍스트를 사용할 경우, 이러한 것이 많이 사용되면 눈에 부담을 줄 수 있습니다. 하지만 만약 이렇게 해야만 한다면, 대체 스타일시트를 제공해서 사용자가 밝은 배경 위에 어두운 텍스트를 볼 수도 있도록 하는게 좋습니다.
  3. 제목은, 당연히, 본문 텍스트와는 다릅니다. 큰 덩어리의 텍스트를 제목과 소제목, 또는 목록으로 분할하게 되면 사용자들이 페이지를 훑어보면서 무엇이 자신에게 중요한 것인지를 쉽게 찾을 수 있습니다. 이미지를 활용해서 페이지를 분할하는 것도 좋지만, 그러한 이미지는 텍스트와 관련이 있는 것이어야 합니다. 그렇지 않다면 단순히 대역폭을 낭비하는 것일 뿐입니다.
  4. 유동 레이아웃을 사용한다면, 본문 텍스트가 페이지 폭 전체로 확장되지 않도록 해야 합니다. 넓은 모니터에서 화면 너비 전체로 확장되는 문단을 읽어 보십시오. 화면의 한쪽 끝에서 다른쪽 끝 까지 보기 위해 당신의 눈 “과” 머리를 사용해야 하므로 쉽게 지치게 될 것입니다. 가독성에 관해 기록된 이 페이지 (그림 5에도 나타나 있습니다)를 읽어 보십시오. 이것은 내가 본 것 중, 가독성 있는 본문 텍스트의 너비를 가장 잘 묘사한 것입니다. 이 페이지는 또한 사람들이 어떻게 페이지를 읽는지 – 웹이든, 프린트된 것이든 – 깊이 있게 설명하고 있습니다. 아래에 보이는 이미지는 1920×1200 해상도의 24인치 모니터에서 캡춰된 것입니다. 이 이미지를, 위의 링크를 클릭했을때 당신이 보는 화면과 비교해 보십시오. 당신의 모니터의 해상도를 참고해서 차이를 살펴 보십시오. 고정된 레이아웃이 좋은 경우도 있습니다. 고정된 레이아웃은 독자들을 위해 본문 텍스트에 몇가지 변수를 설정할 수 있기 때문입니다. 텍스트 주위의 빈 공간을 염려할 필요는 없습니다. 독자의 주의를 분산시킬 염려가 없는 멋진 배경화면을 제공하면, 넓은 스크린에서 사이트를 이용하는 사용자에게도 서비스를 제공하는 것입니다.

일반적으로 한 줄에 40-60 글자 정도가 본문 텍스트로 적합한 길이입니다. 물론 이러한 것은 폰트 크기와 대상 독자층에 따라 달라집니다.

 

그림 5. 본문 텍스트에 적합한 너비의 샘플. 큰 화면에 표시된 것입니다.

 

마지막으로, 텍스트와 제목들에 오타나 맞춤법이 틀린 것이 없는지 꼭 확인해야 합니다. 이 글에서 제공한 링크들을 보았더니, 절반 정도의 링크가 최소한 하나의 오타, 그리고 몇개 정도씩은 맞춤법이 틀려 있었습니다. 사람은 실수를 하기 마련이지만, 기업이나 개인의 신뢰도가 이런 하찮은 것에 좌우될수도 있습니다.

2단계: 타이포그래피 적용

사이트에 사용할 폰트를 결정했다면, 사이트 레이아웃 내부에서 제목, 부제목, 본문 텍스트의 레이아웃을 정해야 합니다. 이전의 글에서 가상의 사이트인 “Wiki Whatevers”를 예로 들었습니다. 클라이언트의 검증을 위해 사이트 구조를 만들었는데, 클라이언트가 내가 제공한 아이디어를 매우 좋아했음을 알리게 되어 기쁘게 생각합니다. 비록 이 와이어프레임이 삭막해 보이긴 하지만, 와이어프레임에 그래픽이나 이미지를 넣는 것은 좋지 못합니다. 클라이언트가 그것을 보고 그런것이 있을수도 있다는 인식을 할 가능성이 있으니까요. 와이어프레임의 이미지는 그림 6에 있습니다.

그림 6. 와이어프레임

이제 로고와, 회사에서 제공한 약간의 텍스트를 추가해서 레이아웃에 잘 들어맞는지 확인하려고 합니다. 이 시점에서 로고와 카피를 추가하는 다른 이유는, 지금 결정하려는 색상이 타이포그래피의 결정에도 영향을 미치기 때문입니다. 본문 텍스트, 제목, 그리고 다른 타이포그래피들이 웹 페이지에 자신만의 “색깔”을 입힙니다. 아래에 있는 그림 7과 위의 그림 6을 비교해보고 차이를 살펴보세요.

그림 7. 와이어프레임에 본문 텍스트와 로고를 추가한 것

위의 텍스트는 사이트에 “색깔”을 더합니다 – 비록 한가지이긴 하지만. 위의 텍스트는 “값”을 더했습니다. 단지 내용만이 아니라 색조, 어조 및 검은색과 흰색 그리고 회색으로 이루어진 음영을 더하고 있습니다. 나는 사이트에 필수적인 것들 – 로고, 사이트 이름(회사 이름이기도 합니다), 태그 라인(Open Source Wikis), 중앙 컬럼에 링크들과 뉴스 구독/피드, 그리고 회사에 관한 푸터 정보들과 함께 텍스트 링크, 그리고 광고 카피를 추가했습니다. 검색 박스는 한 단에 넣기에는 너무 컸으므로 헤더로 옮겼습니다.
“본문 텍스트” 라고 썼지만, 사실 여기에 넣은 것은 Lorem Ipsum 생성기 에서 제공하는 더미 텍스트입니다. 이러한 더미 텍스트는 사이트의 컨텐츠를 사용할 수 없는 상태에서 사이트를 디자인하려 할 때 실제 텍스트 대신 쓸 수 있습니다.

정렬방식에 대한 주의

이제 정렬에 대한 언급과 함께, 텍스트의 위치를 결정한 방법을 말하고자 합니다. 정렬이라는 것은 특정한 영역에 텍스트가 어떻게 위치할지를 의미하는 것입니다. 전통적인 레이아웃 대로, 왼쪽으로 정렬시킨 후 오른쪽에 들쑥날쑥한 모서리를 남길 수 있습니다. 혹은 중앙으로 정렬할수도 있고, 양쪽 정렬(왼쪽과 오른쪽 모두에 정렬)을 할 수도 있으며, 오른쪽으로 정렬한 후 왼쪽에 들쑥날쑥한 모서리를 만들 수도 있습니다.

나는 전통적인 왼쪽 정렬을 선택했습니다. 이렇게 하면 글자들이 왼쪽에 나란히 붙게 됩니다. 하지만 로고와 같은 선에 있는 제목들과는 달리, 본문 텍스트는 좀 더 오른쪽으로 들어가 있는 것을 느꼈을 것입니다. 내가 이 정렬방식을 고른 이유는 로고 때문입니다. 그림 8에 내가 왜 그런 결정을 하게 되었는지 확대한 그림이 있습니다.

그림 8. 로고와 본문 텍스트 사이의 정렬을 묘사한 것

로고가 상을 받을 만큼 멋진 것이 아니기 때문에, 크기를 작게 하려고 했습니다. 거기에 더해, Arial Black 폰트의 두께로 인해 로고는 더 커 보이고, 페이지의 다른 것들보다 돌출되어 보이는 느낌이 있습니다. 로고를 상당히 작게 줄이긴 했지만, 회사 이름과 태그라인이 로고에 의해 생긴 세로 크기에 맞게 되길 원했습니다. 그림의 붉은 선을 자세히 보면, 회사 이름과 로고의 맨 윗 부분이 나란히 되어 있고, 태그 라인은 로고의 검은색 “W”의 아래쪽에 위치함을 볼 수 있을 것입니다. (또한 그림 7을 다시 보기 바랍니다. 로고의 처음 “W” 에서부터 아래로 내려 보면, “The latest wiki”가 그 글자의 왼쪽 아래에 맞춰져 있음을 볼 수 있습니다. 로고가 기울어져 있으므로, 가장 아래 꼭지점은 내비게이션 아래의 제목을 지목하는 것 처럼 보입니다. 사실, 이렇게 하면 내비게이션이 두번째로 보이게 됩니다 – 제목이 회사 이름만큼 굵은 글씨니까요.)

이렇게 해 놓고 보니, 블로그 항목의 제목에 사용한 Georgia 폰트가 그 영역에서는 좀 번잡해 보인다는 것을 느꼈습니다. 따라서 제목의 폰트를 Arial Black 으로 바꾸었습니다. 이 폰트는 본문에 사용된 Verdana와는 약간 다른 산세리프인데, 혼란을 초래할 만큼 달라 보이지는 않습니다.3

서로 다른 브라우저에서 조금씩 다르게 보일 것이 분명합니다. 오페라나 파이어폭스에서는 완벽하게 정렬되어 보이는 것이 사파리에서는 그정도로 정렬되어 있지는 않을 수도 있습니다. 곧 마주칠 문제이지만, 먼저 사이트에 사용할 색상에 대한 이야기를 한 후 살펴보기로 하겠습니다.

여러분 중 몇몇은 부제목들에는 왜 Arial Black을 사용하지 않았는지 의문을 가질 지도 모릅니다. 내가 충실하게 지켜온 스타일 – 세리프체인 Times New Roman을 사용하면 사이트에 대조적인 느낌을 주는데, 이것은 페이지에서 흥미를 불러 일으키도록 하는 디자인 원칙 중의 하나입니다. 모든 제목들에 Arial Black을 사용하면 페이지가 단조로와 보일 수 있습니다.

 

3단계: 색상

클라이언트에게 보여 줄 사이트 목업을 준비할 때, 나는 와이어프레임이 준비된 후 가능한한 늦게 샘플을 보여주려고 하는 편입니다. 또한 가능하다면, 이미지로 보여주는 대신 마크업을 사용하려고 합니다. 이렇게 하면 완성된 페이지에서 모든 것들 – 로고, 본문 텍스트, 심지어 목업된 광고들까지 – 이 어떻게 보일지 보여줄 수 있습니다. 그러한 완전한 레이아웃을 보여 주면, 클라이언트는 페이지가 어떻게 보일지에 대해 의심을 하지 않게 됩니다. 그런 것을 바탕으로 클라이언트가 페이지에 무엇을 더하고 무엇을 뺄 지 결정할 수 있습니다. 또한, 클라이언트에게 웹 페이지를 웹에서 나타날 것과 마찬가지로 보여 주면, 그(녀)는 자신이 실제로 사이트에 방문했을 때 페이지가 어떻게 보일 지 생생하게 볼 수 있습니다.

색상은 “모든것이 제자리에 있다” 는 감성의 중요한 일부분을 차지합니다. 이러한 것의 이유는, 여러가지 색상 스키마들이 사이트의 분위기를 완전히 – 모든 요소들의 위치가 동일하다고 하더라도 – 바꿀 수 있다는 것입니다. 이에 더해, 나는 가급적 색상 샘플들을 최소한으로 하는 것을 선호하는데, 샘플이 많으면 혼란스러워질 수 있기 때문입니다. 이 경우에는, 클라이언트의 예산이 한정되어 있었으므로 한가지 색상 스키마만 가지고 작업해 나가기로 설득했습니다.

색상 스키마 생성기 II 를 소개했던 8번 글 에서, 이 도구에 16진수 숫자를 입력해서 특정 색상에 대한 색상 스키마를 생성할 수 있다는 것을 언급하지 않았었습니다. 색상 바퀴의 바로 아래에, “Enter RGB” 라는 링크를 볼 수 있을 것입니다. 내 경우에는 로고의 금색이 가장 강렬한 색상이었으므로 그것의 16진수(#eab304)를 입력해서 내가 선택한 것에 대해 더 많은 것을 보려고 했습니다. 결과로 나타난 모노크롬 같은 스키마는 좀 지루한 것이었지만, 거기에 나타난 대조는 내가 중시하는 것과 일치했습니다. 스키마에는 푸르스름한 보라색이 포함되어 있었는데 이 색은 내가 사용할 수 있는 것이었습니다. 로고 뒤의 그림자가 푸른 색조를 갖고 있었기 때문입니다.

그림 9. #eab304 에 기반한, 대조적인 색상 스키마

여기에 보여진 색상들을 근거로, 로고의 금색을 상단 내비게이션의 배경색으로 쓰기로 결정했습니다. 링크에는 어두운 푸른색(푸르스름한 보라색에 가까운) #2b0da4 를 쓰고, 동일한 색의 불투명도를 조금 줄여서 광고 영역의 바탕색으로 쓰기로 했습니다. 이러한 색상을 추가하면 어떻게 보이는지 그림 10의 레이아웃에서 볼 수 있습니다.

그림 10. 대조적인 색상을 가진 레이아웃

위의 그림을 보면 색상이 너무 어둡고, “무거운” 느낌을 준다는 것을 알 수 있습니다. 따라서 내비게이션 영역의 불투명도를 75%로 낮췄고, 광고 영역은 20%로 바꿨습니다. 즉시 바뀐 모습을 그림 11에서 확인할 수 있습니다.

그림 11. 불투명도를 줄인 레이아웃

내비게이션 바에서 색상을 감소시켰더니 로고의 색상과 좀 더 어울려 보입니다. 광고 영역의 배경에서 불투명도를 줄였더니 링크 색상과 어울려 보입니다. 광고가 링크들로 구성되어 있으므로, 색을 줄여서 사이트의 링크들과 어울리게 하는 것이 적절할 것입니다. 광고의 배경으로 색상이 추가되었다는 것도 좋은 일입니다 – 구글 애드센스 같은 광고 서비스를 사용한다면, 구글에서는 광고가 본문 텍스트보다 돌출되어 보이도록 할 것을 원하는데, 색상을 선택함으로서 이런 기준에 맞게 됩니다. 또한 태그라인에는 #2B0DA4 의 대조적인 어두운 색상을 사용하였는데, 이렇게 하면 푸른색이 페이지 전체에 대해 대조적인 색상이 되게끔 합니다.

이 레이아웃은 일견하기에 만들기 쉬워 보일 수 있지만, 대조를 갖는 색상 스키마에서 배경색, 제목 색을 고르고 배경 레이아웃을 몇차례 변경하면서 꽤 시간을 들였습니다. 각각의 변경 마다, 선택한 색상이 단순한 레이아웃에 비해 과하게 보였으므로, 그런 색은 없애버리고 태그라인을 제외한 모든 글씨들에 검은색을 사용했습니다. “visited” 링크 색상을 사용할수도 있었지만, 단순한 2-색 기반을 고수하는 것이 이미지들을 더 잘 받아들이며 색의 악몽에서 벗어나는 길이라 믿습니다.

한편, 와이어프레임을 만듦으로서 작업이 단순해질 수 있는 것도 깨달았을 것입니다. 일단 “지도” 또는 구조가 갖추어지면, 색상을 더하는 것은 어려운 일이 아닙니다. 한가지 레이아웃을 고수한다면, 그 레이아웃이 당신의 선택을 설명하게 될 것입니다. 이에 더해, 디자인을 단순하게 유지한다면 장기적으로는 우아해 보이면서도 더 쓰기 쉽고 접근성있는 디자인을 만들 수 있습니다.

레이아웃을 단순하게 유지해야 하는 좋은 이유가 하나 더 있습니다. 페이지 내부에서 코드들을 보여주게 될텐데, 최상의 사례에 따라 그런 코드들에는 monospace 폰트를 쓰게 될 것입니다. 이것이 내가 비슷하게 보이는 두개의 산세리프 폰트를 이용한 것의 다른 이유입니다. 사이트에 monospace 폰트를 이용하게 되면, 광고에서 사용될 폰트들 때문에 이미 다양할 폰트에 하나를 더 추가하는 것입니다.

제목과 부제목을 단순히 두껍게(strong), 혹은 기울여(em) 쓰는 것으로 끝내지 말고, 반드시 제목 요소(h1, h2, h3 등)를 써야 합니다. 제목 요소를 사용하면 사이트가 좀 더 접근성있는 것이 됩니다. 이러한 제목들이 표현되는 방법은 CSS를 통해 바꿀 수 있습니다.

위의 페이지에 대해 첨언할 것은:

  • 회사 이름을 페이지 상단에 검은색으로 표현하였는데, 이렇게 하면 로고의 검은색이 페이지의 상단에 자연스럽게 확산되기 때문입니다.
  • 회원 가입 기능에 주의를 끌기 위해서 가운데 단의 맨 위에 중앙 정렬을 사용했습니다. 뉴스 구독을 위한 회원가입 양식이 그 단의 너비에 꽉 차기 때문에, 중앙에 위치한 텍스트는 그 정렬 방식에 의해 균형이 잡히며, 텍스트가 그 양식의 모양에 “속하는” 것 처럼 보이게 합니다.
  • 푸터의 중앙 정렬된 주소는 페이지의 중앙에서는 좀 어긋나 있지만, 나는 그 주소가 본문 텍스트를 담고 있는 영역의 일부로 보이기를 원했습니다. 사이트가 커짐에 따라, 오른쪽 단은 더 많은 링크들과 이미지들을 포함하게 될 수 있으며, 나는 그 영역이 본문 텍스트를 담고 있는 것과는 완전히 분리가 되기를 원했습니다. 이렇게 분리하게 되면 사용자들은 오른쪽 단이 더 많은 정보를 찾을 수 있는 곳이라는 암시를 받게 됩니다.

마무리로, 페이지에 이미지를 더할 것입니다. 클라이언트가 사용할 이미지를 준비하지 않았다면, 레이아웃의 스키마에 “적절한” 이미지를 선택해야 합니다. 달리 말한다면, 사이트에 사용한 색상을 반영하기에 적합한 이미지를 고르라는 것입니다. 이 경우에는, 괴짜의 사진을 사용해서 레이아웃에 약간의 유머를 첨가했습니다. 이 사진을 선택한 이유는, 이미지의 인물이 사용자를 똑바로 보고 있는데, 이렇게 하면 다른 무엇보다도 빠르게 사용자의 눈길을 끌게 되기 때문입니다. 이 이미지가 매우 중요하기 때문에, 셔츠의 색깔이 사이트에 사용된 금색과 푸른색에 잘 어울리는 것이 다행이라고 생각합니다. 마지막으로, 그가 끼고 있는 안경의 검은색은 사이트 제목에 강한 악센트를 더합니다. 그런 것을 감안해서, 포토샵에서 이 사진을 조금 수정하여 사이트의 전반적인 색상 스키마에 더 잘 어울리도록 했습니다.

또한 태그 라인을 추가해서 블로그 포스트의 태그들을 담도록 했고, 날짜/시간 스탬프를 추가해서 사용자가 이 포스트가 얼마나 최근의 것인지 알 수 있도록 했습니다. 아래에서 보겠지만, 이러한 모든 요소들은 사이트에 “무게”와 혼란스러움을 더합니다. 이러한 것 또한, 중요하고 핵심적인 정보를 가능한 한 단순하게 유지하도록 노력해야 하는 이유입니다 – 사용자들은 이 사이트를 클릭하면서 이미 여러가지를 해야 하는 것입니다. 최종적인 결과를 보기 위해 아래의 그림 12를 보세요.

그림 12. 클라이언트의 검사를 받을 준비가 된 마지막 디자인

웹 디자인에서 좋은 점은 이것이 프린트 디자인이 아니라는 것입니다. 출력물은 영속적인 것이지만, 웹은 계속해서 변합니다. 즉, 이 사이트는 회사가 커짐에 따라 계속해서 변하는 것입니다. 실수들은 고쳐질 것이며, 색상도 수정될 수 있습니다. 그런 점에서, 처음부터 완벽한 것을 갖는 것이 최선입니다. 가능한 한 최고의 것을 제공하려는 노력은 당신과 클라이언트의 명망을 높여 줄 것입니다.

4단계: 테스트

웹 페이지를 테스트한다는 것은 디자이너가 매우 미세한 붓을 들고 모든 페이지들을 살펴보면서 다양한 에러를 찾아본다는 것입니다. 여러가지 테스트를 해야 하므로, 선택할 수 있는 몇가지 옵션이 있습니다.

  1. 오탈자 교정과 링크 테스트: 친구, 포럼, 전문 편집자의 도움을 받아 오탈자 교정을 할 수 있습니다. 페이지들을 훑어보면서 링크들이 동작하는지도 함께 살펴볼것을 부탁하면 좋을 것입니다. 한가지 주의할 것은, 사이트가 웹에 “오픈” 되기 전에 공개되는 것을 좋지 않게 생각하는 클라이언트가 많을 것이라는 것입니다. 이런 경우, 편집자 고용에 관한 예산을 세운 후, 편집자가 비공개 협정 NDA 에 서명하도록 해서, 사이트의 텍스트가 보호되도록 책임을 지게 할 수 있습니다.
  2. 마크업 유효성 검사: 페이지에 새로운 코드를 추가할 때 마다 W3C의 유효성 검사기를 사용해서 HTML 과 CSS 를 검사해야 합니다. 이렇게 하지 않으면, 다음 단계에서는 무엇이 문제인지 모르게 되어 버릴 수 있습니다. 하나의 코드 에러가 여러 브라우저에서 그 페이지의 디자인을 망쳐버릴 수 있기 때문입니다. 광고를 위해 추가하는 코드는 유효성검사를 할 수 없다는 점을 깨달았을 수 있습니다만, 광고주의 코드를 수정해서는 안됩니다. 그런 코드에 에러를 일으킴으로서 광고의 효과에 악영향을 미칠 수 있기 때문입니다. 많은 디자이너들이 광고 코드를 있는 그대로 받아들이고, 그것을 바꾸기 위해 할 수 있는 일이 거의 없다는 점을 받아들이고 있습니다. 다행히도, 대부분의 광고 코드들은 당신의 레이아웃에 영향을 미치지 않을 것입니다.
  3. 브라우저 호환성을 테스트합니다: 웹 사이트를 테스트하기 위해 여러개의 컴퓨터를 구입하고, 여러가지 모니터 해상도와 여러가지 운영 체제에서 테스트해봐야 하는건가, 하고 의문을 가질 수 도 있습니다. 그럴 필요는 없습니다. 그정도의 지출을 감당할 수 있는 웹 디자이너는 흔치 않으며, 브라우저들 사이의 호환성을 테스트해볼 수 있는 여러가지 옵션들 이 있습니다. 이러한 옵션들에는 하나의 컴퓨터에서 여러 버전의 운영체제를 유지하는 것, 친구나 포럼의 조언을 받는 것, 화면 캡쳐 서비스를 이용하는 것 등이 있습니다. 화면 캡쳐 서비스는 간단히 말해 한 페이지를 여러가지 컴퓨터에서 캡쳐하는 것입니다. 이러한 서비스를 이용하면 폰트가 어떤 해상도에선 지나치게 크지는 않은지, 다른 해상도에서 지나치게 작지는 않은지 확인해볼 수 있습니다. 또는, 어떤 브라우저에서는 레이아웃이 너무 넓어서 횡스크롤을 강제하게 되는지, 아니면 어떤 브라우저에서는 컬럼 하나가 아예 없어져버리는 일은 없는지 볼 수 있습니다. 나는 거의 모든 경우에서 테스트를 위해 스크린 캡쳐 서비스를 이용합니다. 위에서 예를 든 두가지만으로도 매우 편리하다고 느끼고 있습니다. 이에 더해, 스크린 캡쳐 서비스를 사용하면 클라이언트의 정보를 보호할 수 있습니다. 몇가지 무료 버전이 있지만, 경험에 따르면 이런 무료 버전의 경우 보통 대기열이 너무나 길고, 또한 선택할 수 있는 옵션에도 제한이 있었습니다. 그래서 나는 BrowserCam 에 약간의 돈을 쓰고 있으며, 이 서비스는 몇년동안 나를 충분히 만족시켜 왔습니다. 무료로 테스트해볼 수도 있습니다.
  4. 사용성과 접근성을 테스트합니다: 접근성에 관해 테스트해볼 수 있는 몇가지 온라인 도구 들이 있습니다. 몇몇은 스크린 리더가 페이지를 “읽는” 것을 들어볼 수 있도록 사운드 지원을 필요로 합니다. 몇몇은 약간의 코드 수정, 또는 시력이 낮은 사용자를 위해 더 높은 대비를 갖추도록 조언하는 경우도 있습니다. 사용성에 관해서는, 온라인에서 도구들과 체크리스트들 을 찾을 수 있습니다. 대다수의 사용자들이 사용하기 쉬운 사이트를 만드는데 도움이 될 것입니다.

테스트라는 것은 지루한 작업이며, 당신의 사랑스러운 디자인이 몇몇 브라우저에서는 마치 지난주에 요리했던 스파게티를 데워 온 것 같이 변한 것을 볼지도 모릅니다. 기억해야 할 가장 중요한 점은 내용입니다. 내용이 잘 보이고 판독성이 높다면, 특정 브라우저에서 페이지 맨 꼭대기에 있는 헤더의 약간의 공백 따위가 그렇게 중요한 것은 아닙니다. 사이트의 이용자 대다수가 당신이 디자인한 사이트를 이용하는 것에 아무런 문제를 느끼지 않는다면, 많은 디자이너들이 상을 받을 것이라는 환상에 사로잡혀 종종 방기해버리는 중요한 것을 성취하고 있는 것입니다.

요약

디자이너에게 색상과 레이아웃이 매우 중요하기는 하지만, 다른 디자인 요소들도 잘 다루어야 합니다. 타이포그래피, 이미지, 그리고 광고와 수익 모델에서 클라이언트의 요구를 잘 녹여내는 것 모두가 웹사이트 디자인의 일부분입니다. 클라이언트의 요구에 잘 따르면서도 접근성있고 사용하기 쉬운 사이트를 만드는 동시에 뛰어난 디자인을 만들어내는 것이 디자이너가 할 일입니다.

더 좌절스러운 것은 브라우저들 간의 호환성입니다. 비록 상황이 점점 더 좋아지고는 있지만, 완성된 디자인은 다양한 브라우저에서 제각기 다르다는 것을 이해해야 합니다. 이에 더해, 몇몇 브라우저에서는 사용자가 클릭 한번으로 웹 사이트를 바꿔버릴 수 있다는 점 역시 깨달아야 합니다. 사용자는 이미지를 제거할 수 있고, 배경과 텍스트 색상을 바꿀 수 있으며, 자바스크립트와 관계된 모든 것을 무시해버릴 수 있습니다.

반면에, 더욱 호환성있는 환경과 짜릿한 웹 기능을 위해 진보하고 있는 것은 오늘날의 웹 디자이너들에게 매우 흥분되는 도전이 될 수도 있습니다. 시장에서 컴퓨터를 구입할 수 있게 된 지는 30년이 채 못 되었다는 것도 생각해 보기 바랍니다. 다음 세대가 모든 변화들에 나란히 서려고 하는 디자이너에게 무엇을 선사할지 생각해 보기 바랍니다!

연습문제

  • 폰트의 네가지 주된 타입은 무엇입니까?
  • 본문 텍스트로 가장 어울리는 폰트는 무엇이며, 그 이유는 무엇입니까?
  • 본문 텍스트와 그 배경에 충분한 대비를 만드는 것이 중요한 이유는 무엇입니까?
  • 본문 텍스트로 채워진 페이지를 분할하는 방법을 2가지 이상 말해보세요.
  • 정렬의 4가지 종류를 말해보세요.
  • 정렬이 페이지를 “깔끔하게” 보이도록 도와주는 것을 설명하세요.
  • NDA는 무엇이며, 그 문서를 사용해야 하는 이유는 무엇입니까?
  • 웹 페이지에서 오타를 수정하는 것이 중요한 이유는 무엇입니까?
  • 사이트를 “오픈” 하기 전에 테스트할 방법을 네가지 말해보세요.

저자에 대해서

Linda Goin은 시각적 의사소통에 관한 미술사를 취득하였고 부전공으로 경제학과 마케팅을 공부하였고 미국역사학에 관한 석사를 취득하였고 종교개혁에 관한 부전공을 가지고 있다. 처음의 전공과 석사전공간에 큰 연관성이 없어 보이지만 린다는 재료문화에 관한 연구와 고고학 발굴에 관한 사이트에서 25년간의 디자인 전문가로서의 역량을 발휘하였다. 콘텐츠 개발에 대하여 월스트리트 저널, 시카고 트리뷴, 싸이컬러지 투데이 및 LA타임즈와 인터뷰를 하였고 51회 Colorado Press Association awards 및 다양한 파인아트 및 그래픽 디자인에 관한 시상식에서 그녀의 작품들이 수상을 하였다. 린다는 웹 디자인 및 접근성에 대한 여러 권의 ebook을 저술하였고 이외에도 개인적으로 경제 기사를 쓰기도 하며 검색엔진 최적화에 관한 대필을 하기도 하였다.

 

  1.  역주: 판독성이란 글자의 형태를 알아보기 쉬운 형태를 말하며, 가독성이란 글자나 문장을 빠르게 읽고 의미를 파악할 수 있는 정도를 말합니다. 『「웹 타이포 디자인 적용 분석 가이드」 이현영 저. 영진닷컴. 2002』
  2.  역주: 역자가 디자인 분야에 지식이 매우 부족하여, 단어를 옮길 때 널리 사용되는 어휘를 몰라서 오히려 더 혼란스러워지는 점이 있을 것이라 판단합니다. 그러한 문제를 경감하기 위해 처음 몇 번의 단어 사용에서는 원본에서 사용한 단어를 병기하도록 하겠습니다
  3.  역주: 로고의 산세리프 – 제목의 세리프 – 본문의 산세리프로 폰트 스타일이 계속 바뀌면 시각적으로 혼란스러울 수 있기 때문에 대조를 줄이고 조화롭게 했다는 것 같습니다)

    CSS를 통해, 다양한 요소들을 쉽게 배치할 수 있습니다. 비록 몇몇 브라우저에서 당신이 정렬에 들인 노력을 좌절시킬 수도 있지만, 대부분의 브라우저에서 당신이 정렬을 위해 입력한 포인트를 정확하게 반영할 것입니다. 이러한 것을 통해 검색 박스를 태그라인의 아래 줄에, 또는 검색 박스의 오른쪽 끝을 그 폼의 오른쪽 끝에 일치시킬 수 있습니다.

    제목과 본문 텍스트를 로고의 왼쪽 위 코너에 맞춰서 정렬시킬수도 있었지만, 들여쓰기를 하면 사용자들이 빠르게 훑으면서도 제목과 본문을 쉽게 구분할 수 있으며 중요한 것만 찾아서 읽을 수 있습니다. 각각의 웹 페이지들은 서로 다르고, 다른 로고는 완전히 다른 디자인을 낳을 수도 있습니다. 요점은 페이지의 모든 중요한 요소들을 정렬시켜서 부드럽게 흘러가도록 하라는 것입니다. 사용자(클라이언트 역시)는 당신이 이러한 수고를 했다는 것을 느끼지 못할 것입니다. 하지만 당신이 중요한 요소들을 정렬하는 것에 시간을 투자하지 않는다면, 누군가가 이런 코멘트를 남길 수도 있습니다: “뭔가가 좀 이상하게 보이는데요”

    또한, 본문 텍스트를 약간 옮기면 그 주변에 여백이 생깁니다. 이러한 여백은 읽는 이가 쉽게 텍스트들을 분리해서 인식할 수 있게 해줍니다. 왼쪽에 생긴 여백과 오른쪽에 생긴 여백을 비슷하게 유지해 주는 것이 좋은데, 이렇게 하면 균형잡힌 느낌을 주게 됩니다. 여백은 사이트에 “숨 쉴 틈”을 줌으로서, 너무 빽빽해보이지 않도록 합니다.

    다음에 인터넷을 사용할 때 페이지들을 살펴 보십시오. 당신의 느낌에 잘 디자인된 것, 또는 “이상이 없는” 것들을 찾아보십시오. 본문 텍스트, 제목, 로고, 기타 요소들의 상대적 배치를 잘 살펴 보십시오. 그것들이 정렬되어 있습니까? 하나의 요소에서 다른 요소로 흐르는 것 처럼 보이나요? 아마도 그 페이지의 디자이너는, 페이지 디자인이 내용보다 중요하게 보이지는 않도록 작고 디테일한 것들을 조절하는 것에 상당한 시간을 들였을 것입니다. 이러한 것이, 모든 의도와 의미에서, 좋은 디자인의 목적입니다.[4. 역주: 원문에서 important 라고 하였기에 “디자인이 내용보다 중요하게 보이지는 않도록..” 이라 옮겼습니다만, 아마 저자가 의도한 것은 “페이지의 구성이 사용자의 주의를 분산시켜서 내용에 집중할 수 없도록 해서는 안된다” 는 것이라고 생각됩니다

이 글을 다 읽어주셨다면, 댓글을 남겨주세요. 좋았다라는 격려도 좋고, 잘못된 부분을 지적해 주시는 것도 좋습니다. 마음에 드셨다면 아래 Like 버튼을 눌러서 페이스북과 트위터로 소개해 주시면 더욱 좋겠습니다.