9. 사이트 와이어프레임 만들기

소개

모든 웹 디자이너들이 사이트 디자인에 손가락이라도 대기 전에 알고 또 이해해야만 하는 것이 있습니다. 이 글에서는 비즈니스 웹 사이트 디자인을 시작할 때 필요한 기본적인 것들을 배우게 될 것입니다. 이러한 정보들이 다른 이들을 위한 사이트를 만들 때 유용하기는 하지만, 당신 자신을 위한 것을 만들때에도 체크리스트 구실을 해 줄 것입니다. 이것은 보통 정보 구조 다음에 위치합니다. 클라이언트가 자신의 사이트에서 무엇을 원하는지, 그러한 것을 어떻게 구조화할 것인지, 그 회사가 사용하는 브랜드가 어떤 것인지를 먼저 파악해야 합니다. 그런 후에 그 정보를 가지고 시각적인 디자인 목업을 만들고, 그것에 대해 클라이언트의 동의를 얻은 후 그 위에 그래픽과 색상 스키마를 입히는 것입니다. 좀 더 자세히 말하자면, 다음과 같은 것들을 다룰 것입니다:

  • 색상과 디자인이 중요하기는 하지만, 클라이언트가 자신의 웹 사이트에서 무엇을 원하는지를 이해해야 합니다. 이 정보가 사이트의 형태와 느낌에 많은 영향을 줄 것입니다.
  • 따라서 디자인을 시도하기 전에, 클라이언트의 웹 사이트에 관한 체크리스트를 만들고 관리할 필요가 있습니다.
  • 또한 그 회사의 이전 마케팅 – 브랜딩(브랜드 이름 부여 작업)을 포함하여 – 에 대해 좀 더 알아야 합니다. 이 정보가 사이트의 디자인에 영향을 줄 것입니다.
  • 클라이언트로부터 얻은 정보에 기초하여 사이트의 시각적 디자인을 만들게 될 것입니다. 클라이언트는 이러한 디자인을 토대로, 자신이 이후에 추가하게 될 그래픽과 컨텐츠를 시각화1할 수 있게 될 것입니다.

차례는 다음과 같습니다:

  • 당신이 알아야 하는 것
  • 첫 단추
    • 가상의 예제 사이트
    • 로고
    • 레이아웃
    • 사이트의 광고에 관해
    • 유효성 검사와 클라이언트의 체크
  • 요약
  • 더 읽어볼 것
  • 연습문제

당신이 알아야 하는 것

일반적으로 웹 사이트 디자인이 결정되기 전에, 웹 사이트에서 이루어져야 할 것들에 대해 계획을 세워야 합니다. 색상과 그래픽이 중요하지만, 예산, 시장, 목표와 함께 이러한 작업을 처리해 나갈 자원에 대해서 계획을 세워야 합니다. 단순히 사용자에게 정보를 전달할 목적인지, 아니면 상품과 서비스를 판매할 목적인지? 이 웹 사이트가 계속 확장될 것인지, 아니면 한정된 시장(정치적 캠페인 사이트 또는 현재의 트렌드에 끼어들 목적을 갖고 있는 사이트)을 위한 단기적인 시도인지? 사이트에 블로그, 법적 페이지, 정보 페이지, 사진 갤러리, 이메일 연락 양식 등이 포함될 것인지? 더 필요한 것이 무엇인지? 경쟁자들과 어떻게 경쟁할 것인지?

마지막, 하지만 위의 질문들만큼 중요한 것은, 회사에 마케팅 가이드라인이 있느냐 하는 것입니다. 그렇지 않다면, 사이트 디자인을 시도하기 전에 먼저 그것에 관한 작업을 해야 합니다. 로고, 특정 시장을 겨냥한 물품과 서비스의 브랜딩, 시장에 도달하기 위한 전략 등은 당신의 능력을 뛰어넘는 일일 수 있습니다. 이러한 일을 시도해 본 일이 없다면, 마케팅 분야 전문가의 조언을 받아서 비즈니스가 올바른 방향으로 진행되도록 할 수 있습니다. 그러한 계획들이 이미 세워져 있다면, 웹 사이트가 다른 마케팅 매체들과 어울릴 수 있도록 회사의 방침을 따르는 것이 중요합니다.

이러한 정보들 중 상당수가, 디자이너에게 사이트를 제안하기 전에 결정되었을 수 있지만, 이러한 질문들에 대한 답 들은 사이트 디자인의 종류, 사용해야 할 색상이나 포함시켜야 할 그래픽의 종류 등을 결정하는데 도움을 줄 수 있습니다. 모든 경우에 먼저 염두에 두어야 할 것은 접근성과 사용성입니다. 따라서, 주의깊게 코딩하고 내비게이션을 만드는 것이 항상 매우 중요합니다. 접근성에 관해서는 이 코스에서 좀 더 배울 수 있을 것이며, 제이콥 닐슨 이 말하는 사용성 이슈들에 대해서도 알게 될 것입니다.

요점은 HTML로 코딩하고 CSS로 디자인을 함으로서 사이트를 단순하게 유지하는 것입니다. 사이트의 몇몇 요소에 플래시가 적합하다면 그것을 써야 하겠지만 남용해서는 안됩니다(플래시를 좀 더 접근성있게 만들려는 많은 노력 이 있었고, 비디오 같은 몇몇 분야에서는 성공적이었습니다). 자바스크립트나 기타 기술적인 뭔가가 들어가야 할 곳도 잘 생각해 보십시오. 이렇게 하면 디자이너는 더 쉽게 사이트 디자인을 할 수 있고, 프로그래머도 더 쉽게 뭔가를 만들 수 있으며(디자이너가 프로그래머인 경우에는 특히 더), 또한 사이트가 모든 브라우저에서 좀 더 잘 호환될 것입니다.

첫 단추

이러한 문제들에 관해서 당신을 돕기 위해, 내가 사이트를 디자인할 때 사용하는 가이드라인을 이용해서 간단한 비즈니스 사이트를 만들어 보겠습니다. 이 체크리스트는 비즈니스 관점과 디자인 문제들을 포함합니다. 간편함을 위해, 이미 만들어진 가상의 비즈니스 모델을 이용할 것이므로, 사용중이었던 다른 마케팅 매체들이 존재하는 것입니다. 로고, 브랜딩, 인쇄된 광고물 같은 것들이 이미 있습니다. 만약 당신이 처음부터 시작하는 것이라면, 로고와 브랜딩 계획을 가장 먼저 세워야 합니다.

웹 디자이너로서, 나는 사이트 디자인을 시작하기 전에 다음과 같은 정보들을 필요로 하게 될 것입니다. 후일에 가서야 근본적인 부분을 바꾸게 되는 일이 없게끔, 사이트 디자인에 관해 필요한 모든 것들의 목록을 미리 만들어두고 싶습니다. 이러한 것은 상상속의 상황이 아닙니다. 아래에 있는 토픽들은 비즈니스 오너/결정권자들과 토의하여 당신이 가진 비전이 그들의 비전과 일치하도록 해야 합니다.

  1. 사이트 이름: 사이트 이름이 회사 이름과 그 온라인 이미지를 반영하고 있습니까? 이 경우, 웹 사이트 이름이 회사의 이름과 일치합니다. 그 이름은 “Wiki Whatevers.” 입니다. 만약 회사에서 이미 태그 라인 을 사용하고 있지 않다면, 그것을 만들고 싶어 할 수도 있습니다. 태그 라인은 회사 이름과 로고와 함께 웹 페이지에 포함될 것입니다.
  2. 로고와 브랜딩: 나는 디자인 작업 이전에 개발된 모든 출력물들을 수집하고 싶습니다. 이러한 것에는 로고, 브로셔 같은 것이 포함될 것입니다. 이런 것들을 갖게 되면 전화번호와 주소 같은 정보들이 들어 있는 파일을 만들 수 있을 것입니다. 이러한 아이템들은 또한 내가 “어조”를 이해할 수 있게 해줍니다. 어조라는 말의 의미는 이 비즈니스를 전보다 더 잘 표현할 수 있는 브랜딩과 스타일을 말하는 겁니다. 만약 이러한 것들이 전에 만들어져 있지 않다면, 로고 디자인 팀을 고용해서 로고를 만들게 될 것입니다. (나는 로고 디자이너가 아니므로 외주를 주어야 합니다. 당신은 그러한 비용을 예산에 추가해야 될 것입니다)
  3. 웹 사이트의 도메인 이름: 웹 사이트의 이름과 함께, 도메인 이름이 확보되어 있는지 알고 싶을 것입니다. 도메인 이름이란 웹 사이트를 식별할 수 있는 주소이며, 사용자가 브라우저의 주소창에 입력해서 웹 사이트로 찾아올 수 있는 이름입니다. 도메인 이름은 또한 외부의 자원에서 웹 사이트로 링크하는데에도 사용됩니다. 도메인 이름은 ”.com”, ”.org” 같은 상위 레벨 도메인 을 포함할 수 있습니다. 디자이너는 보통 도메인 이름의 등록을 책임질 필요는 없지만, 그런 이름이 정해졌는지, 등록되어 있는지 알고 있으면 도움이 됩니다. 간혹 도메인 이름을 사용할 수 없어서, 도메인 이름과 몇가지 사이트 컨텐츠를 바꿔야 했던 경우가 있습니다. 이러한 문제가 생기면 클라이언트의 비용 부담이 늘어나게 되는데, 도메인 이름이 먼저 선택되어 있었다면 발생하지 않았을 문제입니다.
  4. 경쟁자 리서치: 경쟁사들의 사이트에 어떤 것이 있는지 알고 있다면, 당신이 디자인하는 사이트가 경쟁사들과 동급, 혹은 더 좋은 위치에 서도록 할 수 있습니다.
  5. 정보 구조: 사이트에 장바구니나 블로그가 필요할 것인가? 사이트 소유자는 확장에 대해 어떤 계획을 갖고 있는가? 페이지들을 링크하기 위해 어떤 구조가 가장 적합할까? 이러한 것들이 중요합니다. 이러한 것들을 한데 모아서 사이트 디자인과 내비게이션을 만드는 근거로 사용해야 하기 때문입니다. 사이트가 이후 어떻게 확장될 지 알아야, 사이트를 어떻게 만들 지 결정할 수 있습니다.
  6. 컨텐츠: 사이트 컨텐츠가 만들어져 있습니까? 그렇다면, 즉시 그 컨텐츠들을 살펴보고 내비게이션, 타입 디자인, 레이아웃을 결정하는 근거로 삼아야 합니다. 컨텐츠들을 분류하는 것이 내비게이션을 만드는 최선의 방법입니다. 컨텐츠는 또한 사이트의 형태와 느낌을 결정하게 됩니다. 만약 컨텐츠가 아직 준비되어 있지 않다면, 디자인을 미루는 것이 현명한 일입니다. 컨텐츠들이 서로 관련성있도록 해야 하고, 업데이트 계획을 세워야 합니다. 사이트 방문자들이 다시 방문하게 하는 것은 컨텐츠입니다.
  7. 웹 호스트 연구: 클라이언트가 웹 호스팅 회사를 내정해 두었을 수 있지만, 호스팅 회사들이 지원하는 것이 서로 다르므로 완전히 다른 회사를 필요로 할 가능성도 있습니다. 웹 호스팅은 웹 사이트를 호스팅하는 비즈니스이며, 경우에 따라 당신은 블로그, 혹은 정보 카탈로그를 위해 데이터베이스를 필요로 할 수도 있습니다. 사이트에 대한 방문자 수를 제한하는 호스팅 업체도 있는데, 사이트가 유명해지면 이러한 것은 문제를 발생시킬 수 있습니다. 호스팅 업체와 능력에 대한 긴 목록을 참고하고 싶다면 웹 호스트 데이터베이스(WHDb)를 방문해 보십시오. 클라이언트가 호스팅 회사에 공간을 할당 받았는지 미리 확인해서 디자인 결정에 참고가 되도록 하십시오.2
  8. 사용자 배웅3: 이 말의 의미는 당신과 클라이언트가, 방문자가 사이트를 떠나는 방법에 대해 제어하게 된다는 뜻입니다. 사용자들은 언젠가 사이트를 떠날 것입니다. 그렇다면 스폰서된 링크를 통해서 사이트를 떠나게끔 할 수도 있을 것입니다. 이런 부분에 대해 계획을 세운다면 방문자가 떠나면서 사이트에 금전적인 이익을 줄 수도 있고, 그리고/또는 방문자에게 추가적인 서비스를 제공할수도 있는 것입니다.
  9. 데드라인: 이제 사이트가 언제 오픈될지 정해야 합니다. 일반적으로 8주 정도의 시간이면 여기서 예를 들고 있는 정도의 작은 프로젝트에는 충분할 것입니다 – 클라이언트가 컨텐츠를 준비해두었고, 당신이 제안하는 색상과 레이아웃 디자인을 잘 받아들이며, 어려운 프로그래밍이 필요하지 않다면 말입니다.

이러한 기본적인 것들이 정해지면, 이제 안심하고 컨텐츠를 검토하며 내비게이션에 대한 계획을 세우고, 사이트가 검색엔진에 대해 최적화될 방법을 결정해야 합니다. SEO(검색 엔진 최적화)에 대해 책임을 질 필요는 없겠지만, 그런 전문가와 함께 일하면서 컨텐츠 속의 키워드들, 제목과 부제목들을 통해 더 많은 방문자들을 만들어 낼 방법으로 사이트의 컨텐츠와 코드 를 사용할 최적의 방법을 결정할 수 있을 것입니다.

새 집을 지을 때 청사진이 만들어지기도 전에 카페트나 소파 따위를 구입하지는 않는 것과 마찬가지로, 사이트의 구조를 계획하기 전에 시각적인 레이아웃을 만드는 것은 넌센스입니다. 초기 단계에서 내비게이션과 SEO 에 대한 계획을 세워 두면 이후 시간을 절약하고 두통을 줄일 수 있을 것입니다. 사이트의 시각적인 부분에 대한 계획을 세울 즈음이면, 이미 사이트의 방향과 컨텐츠에 익숙해져 있을 것이며, 이러한 익숙함을 통해 훨씬 쉽게 색상과 그래픽 작업을 할 수 있을 것입니다.

가상의 예제 사이트

가상의 사이트는 위키를 위한 오픈소스 코드를 제공하는 비즈니스 사이트이며, 최소한 주 3회 이상 새로운 코드 아이디어를 제공할 것입니다. 코드는 자유롭게 사용하고 수정할 수 있으므로, 클라이언트는 기부, 광고 게제, 프로그래머들의 부가 서비스들을 통해 수익을 얻을 계획입니다. 사이트의 이름은 “Wiki Whatevers,” 이며, 도메인 이름도 선정되었습니다. 컨텐츠는 이미 개발되었는데, 분류될 필요가 있는 코드들, 기사들, 이 프로젝트에 참가하는 프로그래머들의 약력이 포함됩니다. 웹 호스팅 회사는 MySQL 데이터베이스의 사용을 허가하고 있으며, 트래픽이 아무리 많아도 문제가 없게끔 잘 준비되어 있습니다. 이제 우리가 사이트에서 사용할 아이템들을 한데 모을 시간입니다.

  1. 회사에서 이미 사용중인 로고를 사용하기로 결정했으므로, 웹 사이트에서 이용할 디지털 카피를 준비해야 합니다. 스캐너를 사용해서 포토샵이나 Gimp 같은 그래픽 프로그램으로 원본을 스캔할 생각입니다. 사이트 레이아웃이 정해진 후 리사이즈를 할 것입니다. 이미지를 72dpi로 저장하면 다운로드 속도에 좀 보탬이 될 것입니다. 이 로고는 아래의 4번에서도 사용할 생각입니다.
  2. 스탭 페이지(또는 “About” 페이지)에서 사용할 프로그래머들의 사진이 필요합니다. 스캔할 사진, 혹은 디지털 이미지를 받을 것입니다. 최종적으로 사용할 이미지보다 더 디테일한 것을 받는 것이 좋으므로, 300dpi 또는 풀사이즈 이미지를 받을 수 있다면 좋을 것입니다. 실제 사용할 때 dpi를 줄이면 되니까요.
  3. 클라이언트는 블로그를 사용하기로 결정했습니다. 이후 몇 달 동안 이 블로그를 활성화시키기에 충분한 컨텐츠를 이미 갖고 있다고 합니다. 다행히도, 클라이언트가 선택한 호스팅 회사는 블로그에 대해 잘 알고 있으며 높은 트래픽(순간적으로 높아지는 것을 포함해서)을 감당할 수 있다고 합니다. 호스팅 회사는 또한 확장을 위한 몇가지 솔루션을 제공하므로, 클라이언트가 사이트 확장을 계획할 때 많은 도움이 될 것입니다. 호스팅 시간이 보장된다면, 이후 확장을 거치면서 같은 호스팅 회사에 맡길 수 있다면 좋을 것입니다. 몇년간 같은 호스팅 회사를 이용할 수 있다면 여러가지 일들이 훨씬 단순해집니다.
  4. FTP(파일질라FireFTP 같은 오픈소스 제품도 있고, CuteFTP 같은 유료 제품도 있습니다)를 사용해서, 곧 오픈될 사이트를 안내하는 임시 페이지를 업로드할 것입니다. “Under Construction” 같은 문구는 아주 형편없는 것인데, 이런 것을 쓰게 되면 사용자들은 정식 오픈이 언제인지 알 수 없으므로 다시 돌아오지 않을 것입니다. 그런 것 보다는 회사의 이름을 선언하고, 사이트에서 제공하려고 하는 것, 오픈일자, 그리고 연락처(이메일이면 충분할 것입니다. 오프라인 비즈니스라면 주소와 전화번호도 남겨야겠죠)를 남겨야 합니다. 받은 이메일 주소를 활용해서, 사이트가 오픈될 때 그들에게 알려줄 수 있다면 더욱 좋을 것입니다. 이렇게 하면, 심지어 사이트를 오픈하기도 전 부터 클라이언트에게 잠재적인 구매자를 선사할 수 있을 것입니다.
  5. 클라이언트에게서 컨텐츠/구조 정보를 받고, 또한 그들이 모든 페이지에 광고를 게제하길 원한다는 이야기를 들었습니다. 사이트의 구조를 디자인하고, 내비게이션과 텍스트 링크들에 대한 계획을 세울 것입니다. 또한 이 카피를 이용해서 사이트의 검색엔진 최적화 용 키워드들에 대한 계획을 세울 것입니다.
  6. 로고에 사용한 색상을 이용해서 클라이언트에게 보여줄 2~3가지 색상 스키마를 선택할 것입니다.
  7. 다음으로, iStock Comstock 같은 사진 사이트에서 사진이나 일러스트레이션을 고를 것입니다. 판매하는 사진도 있으므로 유의해야 합니다만, 이런 것을 이용하는 것은 큰 비용이 드는 일은 아니며, 저작권 과 관련해서 골치아픈 일을 줄여줄 수 있습니다. 또한 블로그 항목, “따라하기” 글 등에서 사용할 이미지 – 회사에서 이미 준비한 것이든, 앞으로 만들어 낼 것이든 – 를 필요로 할 것입니다.

노트: 마지막 두 단계는 이 시리즈의 다른 글에서 다시 다루어 질 것입니다. 목업에 색상과 그래픽을 입히기 전에, 클라이언트의 동의를 먼저 구해야 한다는 것을 잊지 마십시오!

로고

로고는 모든 기업의 브랜딩에서 핵심적인 부분입니다. 대부분의 기업들이 로고 – 이 아트워크는 그들의 비즈니스를 몇 년 동안 상징할 것입니다 – 에 대해 서두르지 않습니다만, 그다지 관심이 없어 하는 기업들도 있습니다. 그동안의 경험에 비춰 보면, 전문적인 로고에 시간과 돈을 투자하지 않는 기업은, 당신이 아무리 논리적인 근거를 대며 설득해도 그 비용을 쓰지 않을 것입니다.

Wiki Whatevers 회사의 소유자들은 모두 Georgia Tech에 근무하므로, 로고 디자인에서는 Alma Mater의 색상 – 금색과 검은색 – 을 사용했습니다. 이 로고는 단순하면서도, 색상과 레이아웃 작업을 쉽게 해 줄 수 있습니다. 그림 1은 로고를 표시한 것입니다:

그림 1. Wiki Whatevers 로고

여기에서의 문제는 내가 프린트된 로고를 출력해서, 같은 것을 온라인에서 사용하려고 한다는 것입니다. 프린트의 색상은 CMYK이며, 웹에서 사용하는 RGB 색상과는 일치하지 않습니다. 따라서 웹 색상이 가능한 한 프린트된 것과 일치하도록 약간의 조정을 해야 할 것입니다. 이렇게 하는 것에는 4가지 방법이 있습니다:

  1. 인쇄업자에게 연락하여, 회사 로고를 출력했을때 어떤 색상을 사용했었는지 물어 볼 수 있습니다. 일반적으로 인쇄업자들은Pantone 색상을 사용하며, Pantone 은 디자이너들이 프린트 색상과 웹 색상을 일치시키는데 도움을 받을 수 있는 도구를 제공합니다. 인쇄업자가 이 Pantone 색상 매칭 시스템을 이미 가지고 있을 수 있으므로, 이러한 경우에는 추가적인 비용 부담 없이 웹 색상과 프린트 색상을 일치시킬수 있을 것입니다.
  2. Wiki Whatevers에 근무하는 누군가가 Georgia Tech의 색상을 사용했을 것이므로, Georgia Tech 사이트에 가서 웹으로부터 색상을 일치시켜볼 수 있습니다. 웹사이트의 스크린샷을 찍고, 그것을 그래픽 프로그램에 로드한 뒤 아이드로퍼 라든가 그와 흡사한 도구를 사용해서 웹 사이트에 사용된 색상을 알 수 있습니다.
  3. 웹 색상과 출력물의 색상이 가능한한 일치되도록 눈으로 확인합니다. 몇몇 경우에는 색상이 매우 달라질 수 있습니다. 다른 경우라면, 차이점을 식별할 수 없을만큼 일치시킬 수 있을 것입니다.
  4. CMYK 색상을 받아들이는 스캐닝 프로그램에서 출력물을 스캔하고, 포토샵의 Pantone Colour Swatches 를 이용해서 가능한한 일치시킵니다. 이 마지막 경우는, 스캐너에서 CMYK 색상을 인식하고, 당신이 포토샵 프로그램을 갖고 있는 경우에만 사용할 수 있을 것입니다.

내 경우에는, Georgia Tech의 체육 사이트 에 있는 마스코트 이미지에서 완전히 일치하는 황금색을 얻을 수 있었습니다. 금색은 #eab200 였고, 검은색은, 음, 검은색(#000000)이었습니다. 배경은 어두운 녹청색(#002123) 이었으며, 로고에서는 드롭 쉐도우로 사용되었습니다. 단순한 범블비 마스코트 덕택에, 어려워질뻔 한 문제를 쉽게 해결할 수 있었습니다.

그림 2. 색상 일치 작업에 사용한, Georgia Tech 마스코트의 일부분

노트: 웹사이트, 비즈니스 카드, 편지지 등 어떠한 곳에도 로고나 온라인 브랜딩에 디지털 이미지를 사용하지 않은 경우가 있을 수 있습니다. 하지만 이런 경우에는 대개 굳이 색상을 일치시키기 위해 웹 색상을 바꾸려고 하지 않고 그대로 받아들이는 경우가 많은 것으로 보입니다. 따라서, 회사의 사이트에 사용할 색상을 웹 칼라에만 의존하는 것은 좋지 않은데, 그러한 색상이 브로셔나 편지지 같은 회사의 출력물과 일치하지 않는 경우에는 특히 더 그렇습니다. 그렇게 하는 대신, 어떤 색상을 선호하는지 회사에 직접 물어보십시오 – 그들은 한번 보고서는 색상이 서로 다른 것을 느끼지 못했을수도 있습니다.

레이아웃

이 튜터리얼을 간단하게 하기 위해, 한가지 레이아웃만을 시연할 것입니다. 나는 블로그 레이아웃을 선택했는데, 상단에서는 가장 최근의 변경점을 알려주고, 헤더와 바디 사이에 사용하기 쉬운 내비게이션, 그리고 바디의 “below the fold” 영역에는 오래된 포스트들을 위치시켰습니다. “below the fold” 이라는 단어는 신문 출판에서 널리 쓰이는 단어입니다. 신문이 가판대에 진열되어 있을 때, 구매자들은 보통 “above the fold” 에 위치한 글 만을 보게 됩니다(물리적으로 접혀 있으니까요) 그런 글 – 보통 이미지가 포함된 – 은 매우 중요한 데, 사람들이 그것을 보고 신문을 사기 때문입니다.

동일한 “above the fold” 이론이 웹 사이트 디자인에도 적용됩니다. 방문자가 웹 사이트에 처음 들어왔을 때 보이는 모든 영역은 “above the fold”에 있는 것입니다. 사용자가 스크롤해야 볼 수 있는 모든 글은 “below the fold”에 있는 것입니다. 즉, 이러한 것에 있어서의 요령은, 사용자의 모니터/해상도와 무관하게 볼 수 있는 영역에 사용자의 관심을 끌 수 있는 글과 이미지를 배치한다는 것입니다(이러한 것은 웹 사이트를 테스트할 때 다양한 모니터/해상도에서 테스트해야 하는 좋은 이유가 되며, 이 글의 아래에서 다시 설명할 것입니다). 그림 3에 Wiki Whatevers의 초기 레이아웃을 간단하게 표시한 것이 있습니다:

그림 3. Wiki Whatevers 홈페이지에 적용할 러프 레이아웃(와이어프레임)

이 레이아웃이 사이트 전체에서 동일하게 적용될 것입니다만, 오래된 기사와 블로그 항목들을 이미지 없이 저장하는 페이지에서는 조금 다를 수 있습니다. 이렇게 일관성있게 레이아웃을 적용하게 되면 독자들이 혼란함을 느끼지 않습니다. 일단 사용자들이 사이트를 사용하는 방법을 “배우면”, 일반적으로는 페이지들 사이의 차이점은 느끼지 못하는 것으로 보입니다. 각각의 디자인에 포함되어야 하는 것들입니다.

  1. 헤더: 헤더는 작으므로, 로고가 페이지에서 너무 큰 공간을 차지하는 것은 원하지 않습니다. 로고는 작은 부분이지만, 그 색상은 사이트의 전체적인 색상 스키마에 관여합니다. 헤더는 전통적으로 페이지의 상단에 위치하며, 로고는 블로그의 홈페이지로 링크될 것입니다. 로고에 링크를 거는 것은 편리한 방법이며, 많은 사용자들이 로고를 눌러서 홈페이지로 돌아가는 것에 익숙해져 있습니다.
  2. 내비게이션: 헤더 바로 다음에 위치한 내비게이션은 직관적이며 사용하기 쉽습니다. 이 내비게이션은 푸터에도 동일하게 나타날 것입니다. 이미지를 끄고 웹을 보는 사람들을 위해 단순한 텍스트 형태의 내비게이션을 별도로 제공하는 것이 좋다고 배웠으므로 내비게이션을 중복시켰습니다. 이 시점에서 페이지 상단의 내비게이션에 이미지를 사용할지를 결정하지 못했으므로, 일단 텍스트 내비게이션을 페이지 어딘가에 – 보통 푸터에 – 넣습니다. 이렇게 텍스트 내비게이션을 넣으면, 스크린 리더를 사용해서 페이지를 “읽는” 맹인 사용자들 에게 도움이 됩니다. 사이트 내비게이션이 위에 있든 아래에 있든, 그런 것은 디자인을 제외한다면 전혀 중요하지 않은 문제입니다. 맹인 사용자들도 시각에 문제가 없는 사람들과 마찬가지로 페이지를 위에서 아래로, 혹은 그 반대로 빠르게 훑어 볼 수 있기 때문입니다. 즉, 내비게이션을 2번 포함시키든 1번 포함시키든, 그것을 위에 놓든 아래에 놓든 그러한 것은 디자이너와 그(녀)의 클라이언트가 원하는대로 하면 된다는 뜻입니다. 내비게이션에 이미지를 사용하면서 텍스트 버전을 포함시키지 않는다고 하면, 내비게이션 이미지들에 alt 텍스트를 반드시 포함시켜야 합니다. 이렇게 하면, 스크린 리더를 쓰는 사람들이나 이미지를 꺼 둔 사람들도 그 이미지의 목적을 알 수 있습니다. alt 속성의 정확한 사용 에 대해서는 17번 글의 관련된 섹션을 참고하십시오.
  3. 가장 최근의 블로그 항목: 가장 최근의 블로그 항목은 하이라이트를 받을 필요가 있으며, 이러한 항목이 페이지의 “above the fold” 에서 포커스를 받게 하면 클라이언트와 방문자 모두에게 이익이 됩니다. 사용자가 이 사이트로 오는 순간 이 항목을 보게 됩니다. 하지만 이러한 분명한 위치 선정은 클라이언트로 하여금 계속해서 일관되게 사이트를 업데이트하게끔 강제하는 면이 있으며, 만약 그렇지 않다면 방문자를 잃게 될 것입니다 – 블로그에 새 컨텐츠가 올라오지 않으면 사용자들이 다시 돌아올 확률은 낮습니다.
  4. 이전의 블로그 항목: 이전의 블로그 항목들이 위치할 곳입니다. 일반적으로 3-5개 정도의 항목이면 사용자들이 이런 것을 훑어보고 사이트가 어떤 방향을 추구하고 있는지 예측하기에 충분합니다. 이미지가 있다면 좋겠지만, 이 영역은 주의가 집중되는 곳이 아니므로 없어도 괜찮습니다. 이미지를 사용할 지의 여부는 다운로드 시간이 문제가 될 것인지, 아니면 이전의 글이 실제로 이미지가 있어야 사용자의 눈길을 끌게 될 것인지 등에 기초해서 판단하게 될 것입니다.
  5. 오른쪽 영역: 방문자들은 이 영역에서 분류, 보존archive 및 기타 사이트 컨텐츠들의 종류를 기준으로 나열된 블로그 항목들에 접근할 수 있습니다. 기타 항목들에는 “about” 페이지, 사이트 색인, 연락처 등이 있을 수 있습니다. 이러한 항목들을 사이드 컬럼에 나열할 방법을 결정하는 것이 중요한데, 블로그는 이러한 분류, 페이지, 보존들에 의해 형성되는 것이기 때문입니다. 사이트가 커져 감에 따라, 이러한 목록들이 점점 더 길어 질 것이고, 어느 시점에서는 “categories” – 이 예제에서 말입니다 – 만이 “above the fold” 영역에 보이게 될 수 있습니다. 클라이언트가 “pages”가 “categories” 보다 중요하다고 판단할 수도 있으며, 그런 경우에는 그런 의견을 반영해서 목록을 수정하게 될 것입니다. 한가지 더 이야기한다면, 이 리스트에 사이드바, 혹은 사이드 컬럼에 있을만한 것들을 전부 포함시키는 것은 아닙니다. 몇몇 클라이언트는 2단 구성이 더 좋다고 느낄 수 있으며 결과적으로는 위에서 보인 것과 다르게 블로그를 3단 구성으로 가져갈 수도 있습니다. 4
  6. 푸터: 푸터 정보는 매우 중요한 것입니다. 푸터는 사용자가 회사와 웹 사이트에 관한 정보를 애써 찾아볼 필요 없이 개괄적으로 알 수 있게끔 합니다. 회사 이름, (선택적으로)로고, 주소, 이메일 주소, 링크들(연락 양식, 개인정보 취급 방침, 책임지지 않는 경우들, 법적 정보), 뉴스 요약 같은 것들이 모두 페이지 푸터에 사용하기 좋은 후보들입니다. 위에서 언급한것과 같이, 내비게이션을 텍스트만으로 다시 제공할수도 있습니다.
  7. 광고: 이 레이아웃에서는 광고가 가장 최근의 블로그 항목 아래와 오래된 블로그 항목 아래에 가로 형태의 배너로 위치하고 있습니다. 이렇게 하면 필요에 따라 광고 텍스트나 배너 그림을 유연하게 선택할 수 있습니다. 이 레이아웃에서는 “above the fold” 에 하나의 광고를, “below the fold”에 다른 광고를 위치시키고 있습니다. 이정도 양의 광고는 대부분의 사이트에서 충분히 많은 수준입니다. 추가적으로, 이런 레이아웃은 광고를 두번째 위치, 즉 사이트 컨텐츠의 바디 아래로 놓는 것입니다.

이런 레이아웃을 사용하면 사용자들은 바디 영역을 훑어본 후 스크롤할 필요 없이 빠르게 내비게이션 영역으로 이동할 수 있습니다. 또한 사이트에서 링크를 통해 다루고 있는 다른 토픽들도 볼 수 있습니다. 심지어 사용자가 붉은색의 “접는” 선 아래로 결코 스크롤하지 않는다고 하더라도, 이 레이아웃은 사용자가 필요로 할 수 있는 모든 주요 요소들을 “above the fold” 영역에 위치시키고 있습니다.

사이트의 광고에 관해

컨텐츠와 연관된 광고를 수록하는 것은 클라이언트에게는 이익을, 방문자에게는 서비스를 제공하는 것이 될 수 있습니다. 다르게 말한다면, 만약 사이트의 컨텐츠가 꽃에 관한 것이라면, 이 사이트에 수록될 광고에는 조경, 꽃배달 같은 것이 될 수 있습니다. 따라서, 오픈 소스 컨텐츠를 제공하는 사이트이므로 그에 관련된 광고주를 찾아보게 될 수 있습니다. 한가지 소스로, 구글 애드센스 가 이런 부분에서 도움이 될 수 있습니다. 사이트의 트래픽이 증가하고 다른 광고주들이 이 사이트를 주목하게 되기 전까지는, 이런 종류의 광고가 좋은 아이디어가 될 수 있습니다. 하지만 광고를 받아들이기 전에 항상 SEO에 대해 생각해야 하는데, 몇몇 광고는 검색 페이지에서 클라이언트의(사이트의) 입지에 악영향을 미칠 수도 있기 때문입니다. 다음과 같은 SEO 관련 글들을 읽어 보기 바랍니다:

노트: 당신 자신의 사이트를 디자인하는 것이 아니라면, 디자이너로서 사이트 광고에 책임질 필요는 없을 것입니다. 하지만 이후 광고주와 함께 일하거나 디자인 에이전시에 들어갈 계획이 있다면, 이러한 것에 관해 배우기를 원할 수 있습니다. 사이트를 성공적이게 만드는 것에 관해 많이 알면 알수록, 디자이너로서의 커리어에서 더 많은 성공 사례들을 남길 수 있을 것입니다. 가능하다면, 마케팅(당신과 클라이언트 모두를 위해)과 검색엔진 최적화 전략에 대해 되도록 많이 알아두기를 권합니다.

유효성 검사와 클라이언트의 체크

이 레이아웃을 마크업하기 전에, 레이아웃(또는 와이어프레임)에 대해 클라이언트의 최종 확인을 원합니다. 한가지 레이아웃이 다른것보다 더 낫다는 점을 클라이언트에게 설득시키는 방편으로, 나는 종종 다른 레이아웃을 코딩하면 비용이 늘어난다는 점을 강조하곤 합니다. 이렇게 하면 클라이언트가 한가지 레이아웃을 정하는데 도움을 주고, 이후 약간의 구조 변화를 위해 코드가 수정될 수 있다는 암시를 하게 됩니다.

다음 단계는 레이아웃을 마크업하고, 그것의 유효성을 검사하는 것입니다. 나는 레이아웃에 사용한 HTML과 CSS에 오류가 없는 것을 확인하기 위해 W3C의 마크업 검사 서비스와 CSS 검사 서비스 를 이용합니다. 유효성 검사 서비스를 받으려면 당신의 컴퓨터에서 직접 파일을 업로드하면 되며, 단순히 유효성 검사 목적으로 클라이언트의 사이트에 파일을 올릴 필요는 없습니다. 이런 테스트를 통해 디자이너와 프로그래머들이 프론트엔드의 에러들을 찾아서 너무 늦기 전에 해결할 수 있습니다.

접근성은 또 다른 중요한 주제입니다. 시력에 문제가 있거나 특정 행동에 장애가 있는 사람들도 사이트를 이용할 수 있게끔 해야 합니다. 이러한 것은 HTML이나 CSS의 유효성을 검사하는 것 만큼 쉽지는 않습니다. 이용할 수 있는 검사기 – 예를 들어 TAWDIS가 있기는 하지만, 이상적으로는 실제로 사람이 테스트를 해야 하며 사이트의 접근성에 관해 품질 분석을 해야 합니다. 자동화된 검사기는 잘된 것과 그른 것을 찾아줄수는 있겠지만, 사이트에 접근성이 있는지 아닌지의 결론을 내려 줄 수는 없습니다. 또한 검사기에도 에러는 있습니다. 접근성에 관해 훨씬 많은 정보들이 이 시리즈의 이후에 추가될 것입니다. 그러니 주목해주세요!

최대한 많은 웹 사용자들이 사이트를 볼 수 있도록, 여러가지 브라우저들에서 레이아웃을 테스트해보아야 합니다. 이러한 일을 맥, 윈도우, 리눅스, 모바일 시스템에서 모든 브라우저들을 가지고 해 볼 수도 있고, 하나의 컴퓨터에서 VMWare Fusion 같은 에뮬레이터를 이용해서 할 수도 있지만, 이러한 작업은 상당히 성가시고 장황한 일입니다. 다른 대안은 BrowserCam 같은 브라우저 캡춰 서비스를 이용하는 것입니다. 이러한 서비스는 빠르고 간편하며, 많은 수의 브라우저들(무척 오래된 브라우저도 포함해서)을 지원합니다. 24시간의 무료 서비스를 제공하므로 테스트해 보고 가치가 있다면 비용을 지불하면 됩니다. 큰 규모의 사이트를 다수의 브라우저들에서 테스트해보아야 할 경우 유용할 것입니다.

마지막으로, 레이아웃에 대한 마크업을 마쳤으며 유효성 검사도 통과했음을 클라이언트에게 알리는 것도 좋습니다. 이런 것을 알려주는 경우, 와이어프레임을 많은 브라우저에서 동작하게 하기 위해 몇번 정도의 수정이 필요했는지 역시 알려주어야 합니다. 마크업이 완성되고, 유효성 검사를 통과하고, 클라이언트의 승인까지 받은 이후에만 색상, 이미지, 광고 삽입 같은 추가적인 작업들을 진행해야 합니다. 이러한 흐름이 지루해 보일 수도 있지만, 모든 유효성 검사들을 통과하고 클라이언트의 승인을 받은 후에 마무리 작업을 하는 것이 중요합니다. 추가적으로, 모든 아트웍과 카피들은 클라이언트가 사이트의 실제 구조를 살펴보려고 할 때 주의를 분산시키는 것이 될 수 있습니다.

이러한 과정을 다 끝냈다면, 이제 사이트의 텍스트, 이미지, 색상에 대한 작업을 할 수 있습니다. 이러한 일을 어떻게 시작해야 할까요? 다음의 글에서 살펴보도록 하겠습니다.

요약

웹 디자이너의 역할은 여러가지입니다. 웹 사이트 디자인이라는 것이 여러가지 인자들 위에 서 있기 때문입니다. 사이트가 성장할 것인지, 현 상태에 고착해 있을 것인지? 호스팅 업체가 사이트의 확장을 위한 충분한 서비스와 공간을 제공할 수 있는지, 아니면 사이트에 뭔가 추가가 될 때 마다 호스팅 업체를 바꿔야 하는지? 디자이너가 모든 이슈들을 스스로 해결할 수 없다고 하면, 도움을 받을 수 있는 인맥이 있는지?

즉, 웹 사이트를 완성하기 위해서는 색상과 그래픽 이면에 기반이 필요한 것입니다. 사이트를 만들어내는 과정 역시 디자인에 영향을 미치며, 이후 문제를 발생시킬 가능성이 있는 모든 것들을 가능한 한 계획 단계에서 짚어 내야 합니다. 문제가 생기기 전에 해결할 수 있는 능력이야말로 전문적인 디자이너를 만드는 것입니다.

기반이 다져 지고 구조와 와이어프레임이 만들어지면, 디자이너는 이제 완전한 사이트를 위해 색상 스키마 작업을 할 수 있습니다.

더 읽어볼 것들

연습문제

  • 웹 페이지 디자인을 시작하기 전에 어떤 것들을 파악하고 있어야 합니까?
  • 웹 페이지에 사용하려고 하는 것들의 목록을 만들어야 하는 이유는 무엇입니까?
  • 웹 호스팅 회사들에 대해 파악하는 것이 중요한 이유는 무엇입니까?
  • 디자이너는 여러가지 일을 합니다만, 클라이언트가 로고 디자인을 부탁했고 당신은 무엇부터 시작해야 할 지 모른다고 할 경우 어떻게 해야 되겠습니까?
  • 클라이언트의 경쟁사의 웹 사이트를 연구해야 하는 두가지 이유를 들어 보십시오.
  • CMYK가 무엇이며, 이 글자들(C, M, Y, K)이 무엇을 의미합니까?
  • CMYK를 일치하는 RGB 색상으로 바꾸는 방법을 적어도 2가지 이상 들어 보십시오.
  • 웹 페이지 레이아웃에서 텍스트 내비게이션을 적어도 한 곳 이상에서 사용해야 하는 이유를 말해 보십시오.
  • 사이트 전체에 걸쳐서 일관된 레이아웃을 사용해야 하는 이유는 무엇입니까?
  • 사이트의 마크업을 초기 단계에서 유효성검사를 해야 하는 이유를 들어 보십시오.

 

  1. 역주: 목업이 만들어지면, 클라이언트가 그것을 보고 다른 컨텐츠들이 어떻게 보일 지 상상하게 될 것이라는 의미로 생각됩니다.
  2. 역주: 호스팅 업체의 가용성에 대해 ‘설마 그럴리가..’ 하는 생각을 할 수도 있습니다. 하지만 이 글을 번역하는 시점에서 해외의 유명 호스팅 사이트인 tumblr.com의 장애로 많은 서비스들에 문제가 발생하고 있습니다.
  3. 역주: 원문에서는 directed depature라는 표현을 사용하고 있습니다.
  4. 역주: 블로그 본문에서 2단 구성을 사용하면 우측 영역을 더해서 3단 구성이 된다는 의미로 생각됩니다.
이 글을 다 읽어주셨다면, 댓글을 남겨주세요. 좋았다라는 격려도 좋고, 잘못된 부분을 지적해 주시는 것도 좋습니다. 마음에 드셨다면 아래 Like 버튼을 눌러서 페이스북과 트위터로 소개해 주시면 더욱 좋겠습니다.