6. 정보 설계 — 웹 사이트 기획

소개

전통적으로 웹사이트 설계를 할 때는 약간(또는 많이) 스트레스를 받을 때가 있다. 누구나 웹사이트 설계시 많은 생각들을 이야기 하는데 이런 생각들로 인하여 다른 이들과 대립을 하고는 한다. 이런 일들은 당신의 최종 목표인 사람들이 유용하게 이용할 사이트들을 구축하는 한가지 과정에 포함된다. 당신의 사장의 말이나, 권위있는 소프트웨어 엔지니어의 말 또는 당신의 개인적인 취향조차도 그리 큰 문제가 아니다. 결국에는 이 모든 것들은 당신이 유별난 사람들1을 위한 웹사이트를 구축할 때 그들의 의견은 단지 여러 문제중에 한가지일 뿐이다.

이 문서에는 일반적으로 기획 초기에 통상적으로 말하는 정보설계 또는 IA에 대해 살펴볼 것이다. 이 정보설계에서는 당신이 생각하는 핵심 이용자(메인 타겟 또는 코어 타겟)에게 그들이 웹사이트 내에서 어떤 정보와 서비스를 필요로 하고 그리고 그들에거 어떤식으로 조직화하여 그들에게 제공을 할것인가를 포함하고 있다. 우리는 사이트에 필요에 의하여 구체화된 정보 전체를 어떻게 분해하고 조각낼 것인가를 생각하고 그리고 이렇게 나누어진 정보를 서로 연관 관계를 갖게하여 할 것인가를 살펴 볼 것이다. 이번 장의 내용은 다음과 같다.

  • 사이트 구축시 면밀한 계획이 필요하다.
    • “The Dung Beatles:쇠똥구리 밴드”를 소개합니다.
    • 이제 뭘하지? 사이트맵 그리기
    • 페이지에 이름을 붙이자.
    • 추가 내용
  • 요약
  • 연습 문제

사이트 구축시 면밀한 계획이 필요하다.

당신은 문득 생각한 이 기괴한 프로젝트에 사전 준비 없이 바로 뛰어 들 것이다. 그러나 이런 경우는 가끔 일어나는 예외가 아니고, 일반적으로 발생되어 왔다. 우리는 가상의 음악 밴드를 살펴 볼 것이며 이 밴드명을 “The Dung Beatles:쇠똥구리 밴드”라 부를 것이다. 그리고 그들의 초기 단계인 웹사이트 계획(기획)을 도울 것이다. 우리는 그 밴드와 그들의 목표를 확인하며 그리고 그들이 자신들의 웹사이트에서 무엇을 보여 주고 보여질지를 이야기 할 것이다. 그럼 이제부터 우리는 그 밴드의 정보를 구성하는 일을 시작 할 것이다.

“The Dung Beatles:쇠똥구리 밴드”를 소개합니다.

“The Dung Beatles:쇠똥구리 밴드”(이하 TDB)는 문제점을 가지고 있다. 그들은 Moose Jaw, Saskatchewan2 지역에서 인기있는 비틀즈 모방 밴드 이지만 그러나, 그들은 다가오는 여름 북아메리카 투어를 위해서 인지도를 높일 필요가 있다. 그들은 캐나다와 미국 전역 개최 예정인 투어 스케줄이 있지만, 불행이도 그들은 현재의 지역 외에는 거의 알려지지 않았다. 몇가지 기술을 이용 한다면, 그들은 많은 비용을 쓰지 않고 수많은 비틀즈 팬들에게 그들을 알릴 수 있다.

그들은 운이 좋다. 우리는 월드와이드웹이라 불리는 것을 알고 있다. 웹은 그들이 찾던 해답이며, 그들은 망설임 없이 웹사이트를 구축하기로 결정 하였다. TDB 밴드는 투어 일정을 홍보하는 장소가 필요하고, 다른 도시에 팬들을 확보하고 밴드의 이미지를 제고할 필요가 있다. 당신은 그들의 아이디어를 공유할 수 있고, 차트를 통해 그들의 웹사이트 계획을 확인 할 수 있다.

당신은 신규 고객과 회의 일정을 통해 그들이 구체적으로 원하는 것이 무엇인지 알아야 한다. 그리고 납기 및 비용에 대해 충분한 회의와 협의를 통해 결정한다. 고객의 목표에 대한 회의를 제의하고, 고객이 원하는 웹사이트의 목표를 위한 아이디어를 회의를 통해 도출해야 한다.

밴드(TDB)가 온라인에서 돋보이는 존재로 달성하기를 희망하나?

TDB는 다가오는 그들의 투어와 그리고 어떻게 밴드의 모든 공연 스케줄이 끝나면 비틀즈 팬들에게 자신들의 밴드의 모습이 어떤식으로 입에 오르내릴 것인가?에 대해 이야기를 시작했다. 지금은 2월이며, 그리고 그들의 투어는 5개월동안 이루어질 예정이다.

잠시만, 웹사이트는 자신만의 의견을 교환하거나 자신을 홍보를 위해 만들지 않는다. 당신은 지금까지 대화를 통해 사이트의 주요 목표는 TDB 팬들을 위한 온라인 공간을 제공하는 것이며 그 공간에서는 TDB에 대한 최신뉴스, 순회공연 날짜 및 장소에 대해 정보를 취할 수 있다는 것을 알수 있다. 팬들의 입에서(입소문), 그리고 몇몇 다른 광고를 통해, 새로운 사람들이 사이트를 방문하여 사이트 어디에선가 샘플 음악을 다운로드 하거나 밴드의 사진(전체 의상 사진)을 확인 할 수 있다. 그리고 언제, 어디서나 그들의 생생한 정보를 확인 할 수 있다.

Raul McCoffee:밴드의 리더는 CD 및 밴드 판촉상품 판매를 통하여 투어를 위한 약간의 여유돈을 모을 수 있다고 이야기 하였다. 당신은 밴드를 중심으로 정보를 추출 하며, 밴드 웹사이트를 방문할 때 사람들이 무엇을 원하는지 간략한 스케치를 통해 도출 한다. 아이디어 브레인스토밍을 하는건 정말 힘든 일이다;그 아이디어 브레인스토밍하는건 쉽지 않을 일이다.;이 시점에서 사이트는 다음 과 같이 큰 틀을 그릴 수 있다.

사이트를 방문하는 사람들은 크게 두 가지 그룹으로 나누어진다. 첫번째 그룹은 TDB에 대해 이미 알고 있고 그들을 좋아하는 그룹(현재의 팬)이며, 나머지는 전혀 TDB에 대해 전혀 알지 못하는 그룹이다. 당신은 두개의 그룹을 다른 방법을 통해 만족을 시켜야 한다;잠재적인 팬들(TDB를 전혀 알지 못하는 그룹)은 세일즈 포인트(:밴드를 알게 하는 컨텐츠)가 필요하며, 이에 반해 현재의 팬들은 밴드에게 보다 더 중독될 수 있는 정보(:밴드에게 보다 중독될 수 있는 컨텐츠)를 원한다. 각각의 사용자 그룹별 그들은 어떤 종류의 정보를 찾고 있을까? 그림 1. 웹사이트 정보의 비율(중요도)을 나타냅니다.—이 스케치는 이 시점에서 확인 나타낼수 있는 전형 적인 스케지 이며, 앞으로 만들어 갈 웹사이트의 큰 모습을 보여 줍니다. 이 순간부터, 당신은 웹사이트에 어떤 정보의 페이지가 필요 하고, 그리고 어떻게 페이지들은 연결 할지 알 수 있다.

그림1: 당신의 사이트 방문자들이 원하는 것.

당신은 예산을 결정하고 한 달간 이 웹 사이트를 제작하는데 동의한다. 밴드에게 며칠 후 다시 만날 것을 약속 하며, 그 때는 앞으로 사이트를 어떻게 어떤 방향으로 할것인 지에 대한 설명을 할 것이다.

사이트 맵을 그리다

많은 사람들이 이 단계에 이르면 사이트 맵을 작성을 할것이다.—이것은 흡사 조직 차트 같이 보인다. 이것은 대게 기초적인 그래픽을 통해 사이트의 각 페이지의 이름을 보여 주고, 어떻게 그것들이 전체적으로 연결된 구조를 보여준다. 나는 개인적으로 이 단계에서 좀 더 상세하게 각각의 페이지의 목적과 간략한 내용에 대해 내용을 추가 한다. 예를 들면, 어떤 페이지의 이름이 “홈”이라고 하면, “홈” 이란 페이지는 무엇인지? 혹시 “우리 웹사이트 방문을 환영합니다.” 메시지를 출력할 것인지?(윽) 또는 새소식을 위해 움직이는 이미지를 사용할 것인지? 페이지 위의 스케치를 통해 어떤 것을 추가 하고, 각 페이지에 포함 시킬 지를 생각하는데는 몃 분 걸리지 않는다.

다음 섹션으로 가기 전에 우선 자신의 사이트 맵을 그려야 한다.

자! 이제 기본적인 것을 시작 하면: 앞서 언급한 차트를 다시 생각해 본다. 그림2.는 그 사이트 차를 다시 생각하고 그리고 내가 어떤 시도(생각)을 보여 준다.

그림2: 첫번째 사이트 구조도 변경.

이미지 설명[:이 이미지는 웹사이트를 구조화하는 최초의 시도를 보여 주는 예를 든 문서이다. 구성 페이지들이 가운데 “홈”을 중심으로 거미줄 처럼 연결되어 있다. 이 페이지들의 링크는 가운데를 중심으로 “Store”, “Biographies”, “Fan Discussion”, “Tour dates and locations”, “Pictures”, “Discography” 그리고 “Contact”. 로 연결되어 있다3. “Discography page has two further sub-pages spidering off it”, “Lyrics”와 “Sample tracks”. “Discography”메뉴는 2개의 “Lyrics”와 “Sample tracks”가 추가로 연결 되어 있다. ] 정확히 말하면 일반적으로 모든 페이지를 나열해야 하지만 지금은 기본적인 큰 틀로만 구성되어 그룹핑되어 있다. 이 시점에서 나는 많은 생각을 통해 많은 변화를 가져 온다. 큰그룹(1DEPTH) 에 정보를 보내는 것을 한번 더 했다. —그림 3 무엇을 한지 보여 준다:

나는 사이트 구조를 좀 수정 하였습니다. “Band News” 페이지를 추가 하여 밴드와 팬이 공유 할수 있는 장소를 묶어서 구성 하였다. 여름 투어가 종료된 후에도. “Tour dates and locations”페이지는 더 이상 그룹의 이야기를 올리는데 적당하지 않다. 여기에 블로그 형식을 취하여 팬들과 다양한 기사 및 콘텐츠를 공유하게 할 것 입니다. 그리고 이런 것을 통해 TDB 의 온라인 커뮤니티 형성에 도움이 됩니다. 또한 그들이 원하는 정보를 페이지를 나누어서 분류를 하여도”brand News”페이지의 “News” 라는 단어에서 느껴지는 심플하고 보다 일반적인 단어를 통해 사람들에게 쉽고 빠르게 기억될 것이다.

“About The Dung Beatles”라는 신규 페이지 에서 그룹이 함께 멤버들의 신상 정보 및 자신들의 사진으로 구성한다. 이 신규 페이지를 통해 우리는 각 밴드 구성원의 신상정보를 바로 찾아 볼수 있는 곳을 제공 한다. 이전부터 일반적으로 “about”은 네이밍은 많은 웹사이트에서 유사한 성격의 페이지에 이름이 붙여졌다. 사이트 방문자가 회사, 제품, 서비스 또는 개인에 대한 자세한 정보를 찾을 때는 일반적으로 “about” 단어가 포함된 링크를 찾는다.

마지막으로 “Discography”는 전문 용어다. “The Music”이란 용어가 보다 많은 사람들이 해당 페이지의 내용을 쉽게 이해 할 수 있는 네이밍이다. 또한, 이 페이지도 자세한 내용을 담은 페이지가 열린다: 당신이 아이디어를 얻은 영감을 얻은 소스, 특정 노래의 역사…등. 우리는 준비는 다 된것 같다. 이제 페이지 이름(네이밍)에 대해 약간의 이야기를 했다. 이제 우리는 좀 더 구체적인 내용을 이야기 할 것이다.

페이지의 이름 붙이기

페이지 이름은 하나의 웹사이트를 구축하는 과정 중에 만들어야 하는 가장 중요한 결정이 될 수 있다. 뿐만 아니라 이것을 통해 당신의 사이트 방문자들이 당신의 웹사이트에서 자신의 길을 찾을 수 있는 것도 중요하다: 또 다른 것은 이것이 검색엔진이 당신의 사이트를 쉽게 찾을 수 있게 이용된다.(여러 가지 검색 엔진 최적화 방법이 언급되어 있다.) 일반적으로 검색엔진은 “중요한 점[how important]”을 결정할때는 웹페이지의 포함된 텍스트, 해당 페이지의 주소:URL, 그리고 링크가 연결된 텍스트를 통해 참고한다. 당신의 페이지에 센스 있는 이름과 주소를 포기하고 대신에 재치있는 설명을 사용하는 것을 권장합니다. 여기에 예제가 있다.

당신이 자동차 회사라고 하고 “The Speedster”라 불리는 모델이 있다. 당신의 자동차를 홍보하는 웹사이트와 그리고 자동차 기능 설명을 나열 한 페이지가 있다. 그럼 당신은 이페이지를 어떻게 불를 것인가 “기능:Features”, “사용가능한 기능:Available Features”, “Speedster의 기능:Features of the Speedster”, 또는“종과 경적:Bells and Whistles”? 나는 “Speedster의 기능:Features of the Speedster”로 이름을 붙이는 것을 제안합니다. 내가 제안한 것은 페이지의 특징을 포함하며, 검색 엔진의 검색 결과 페이지에 가장 먼저 눈에 띄는 곳에 노출될 가능성이 있습니다.(이것은 검색엔진의 색인 생성을 위해 좋다.)그리고 생성되는 URL도 홈페이지에 맞게 할 수 있다. (예를 들면 “www.autocompany.com/speedster/speedster-features/”).

추가 설명

이 단계에서 모든 것을 알 수는 없지만, 적어도 각 페이지에 대해 간단한 설명(힌트)을 제공해야 한다. 그 다음 당신은 사이트 구조, 페이지 넘버 그리고 각 페이지의 설명을 제공 하며,내가 그림4처럼 정의를 할 수 있다.

지금까지 이야기한 페이지의 세부 기능을 설명하기 위해 사이트 구축하면서 이야기된 디자인/레이아웃등 여러 전문 지식은 필요 하지 않다. 단지 클라이언트가 이야기 하고자 하는 중요한 점에 대해 어떻게 쉽게 사용자에게 이야기 할 것인가를 생각 하면 된다.

웹사이트의 수많은 페이지를 일반적이지 않은 전문 용어를 사용 하면, 사용자들을 사이트 이용지 컨텐츠를 찾을 수 없게 장님으로 만드는 것과 같다 . 웹 페이지의 계층 구조를 만들어 보자 예를 들어, 밴드 멤버들이 그들의 짧은 글(잡담)을 쓰고 싶어 하면, 그것을 위해 각각의 멤버들별 독립된 페이지를 만드는 것은 불필요 합니다. 그들 멤버 모두가 한 페이지 같은 공간에서 모든 것이 이루어 지면 된다.

요약

이번 장에서 웹사이트를 구조화를 어떻게 할것인가를 살펴 보았다. 다음 장에서는 훌륭한 웹사이트는 어떤 기능이 있고 그것들이 어디에 포함되어 있는지를 살표 볼 것이다. 8,9,10 장에서는 사이트 디자인에 대해 살펴 볼 것이다. 이제 구조화에 대해 3단계로 나누어서 생각해 보자 (각 단계별로 클라이언트가 가지고 있는 생각 들과 같이 체크 해 보자)

  • 첫번째로는 웹사이트에 어떤 컨텐츠를 보여 줄것인가 결정을 한다. 그리고 사이트에서 어떻게 보여 줄것인지 설계를 한다.
  • 그 다음 사용자가 여러 기능을 사이트 에서 어떻게 사용하게 할 것인지를 결정 할 것이다.
  • 마지막으로 사이트 디자인인 완료 후 페이지 코딩을 하기 전에 페이지 레이아웃 및 컬러 스키마. 기타 등 을 확인 한다.

연습문제

  • 자동차 사이트를 구축하는 것을 생각 하면 서 그림1. 을 다시 살펴 봅니다. (현재 차에 관련된 어떤 이미지를 머리 속에 그려 봅니다.
    • 사용자들이 니즈는 무엇 인지?
    • 다른 자동차 사이트를 보는 것이 필수적인가? 아니면 시시한가?
  • brainstorm을 통해 정보(콘텐츠)를 체계화 하고, 페이지 그룹핑을 어떤 기준으로 할 것인가?
  • 가끔 유용한 웹사이트를 기획을 할때 다른 경재 웹사이트를 살펴 봅니다. 밴드 사이트를 검색하여(모방 밴드로 검색하여 ) 그리고 , 그들이 어떤 것을 제공하는지. 우리가 잊고 있던건 없는지?
  • 그림4를 살펴 봅니다. 그리고 다른 페이지를 그림과 유사한 형태로 발전시키세요면 사이트 아이덴티티를 찾을 수 있다.

저자 소개

Jonathan Lane은 산업 인터렉티브의 대통령이다. Mayne Island에 있는 웹 개발/웹 어플리케이션 개발 회사에 있다. 그는 수년동안 Lethbridge 대학의 커리큘럼 재개발 센터에서 웹 프로젝트 코디네이터 작업을 하면서 일을 시작했다.

그는 Flyingtrol 블로그를 가지고 있고, 현재 Basecamp 프로젝트 메니지먼트 어플리케이션을 위한 이메일 인터페이스 개발을 하고 있다.

 

  1. 문맥상 일반 여러 사용 유저를 말함.
  2. 캐나다 서부에 지역
  3. 1depth의 내용을 보여 주고 있다.
이 글을 다 읽어주셨다면, 댓글을 남겨주세요. 좋았다라는 격려도 좋고, 잘못된 부분을 지적해 주시는 것도 좋습니다. 마음에 드셨다면 아래 Like 버튼을 눌러서 페이스북과 트위터로 소개해 주시면 더욱 좋겠습니다.