웹사이트기획 및 구축 시 고려하여야 할 정보구조설계

Information architecture

1. 웹 환경의 변화

웹 사이트와 인트라넷의 규모는 점점 커지고 또 복잡해지고 있다.
따라서 사용자들은 사이트 내에서 그들이 찾고자 하는 자료를 제대로 검색하지 못해 혼란스러워 하는 경우를 자주 접하게 된다.
이것은 결국 보다 효과적인 웹 사이트를 개발하는 데 있어 큰 도전거리에 직면하고 있다는 것을 의미하며, 동시에 성장하고 발전하는 사이트를 유지하기 위해서는 웹사이트 설계를 위한 이론적 체계가 필요하다는 것을 말한다.

인터넷은 정보기술 분야에서 가장 발전된 부분이지만, 과거 새로운 기술이 혁신 되었을 때와 마찬가지로 앞으로도 이 분야의 새로운 발전이 지속될 것이며, 많은 기술과 다양한 컨텐트, 그리고 그 표현 형식들이 하나의 단일 인터페이스로 통합되기 때문에 때로는 충분한 검증도 있어야 할 것이다.

일반적으로 웹 사용자들은 라디오나 TV, 신문 등의 매체에는 비교할 수 없을 정도로 매우 짧은 시간 동안만 주의를 집중한다. 새로운 사이트에 방문할 때에는, 사용자들은 종종 메인 페이지가 모두 다운로드되기도 전에 포기해 버리기도 한다.
그러나 인터넷 이용자들의 이러한 특징은 결코 단점이라고 불 수는 없다. 예를 들어, 케이블 TV 시청자들은 잠시도 쉬지 않고 연이어 채널을 돌려 대지만, 60~70개 이상의 채널을 제공하는 시스템은 거의 없다.
그러나 웹에서는 한번의 클릭으로 갈 수 있는 수천 수만 개의 채널이 있다.

2. 정보설계의 필요성

앞서 언급했던 것과 같이 수천 수만 채널을 갖고 있는 웹은 제대로 된 정보설계와 사용성을 고려하지 않으면 외면당하게 되므로 정보설계의 필요성이 요구되어 진다. 사이트의 목적과 비전을 분명히 하고, 스폰서의 요구와 사용자들의 요구사이에서의 균형을 맞추고, 사이트에서 어떤 컨텐트와 기능을 어떻게 제공 할 것인가를 결정한다. 또 사용자들이 사이트의 구조 체계, 네비게이션 시스템,레이블 시스템,검색시스템 등을 이용해서 사이트에서 정보를 제대로 찾을 수 있도록 명확하게 설계할 수 있도록 한다. 또한 시간이 지남에 따라 웹사이트가 변화하고 성장할 수 있게 하는 장기적인 계획을 세워야 한다.

3. IA의 요소

네비게이션 시스템
레이블링 시스템
구조화 시스템
색인,검색...


4. IA
를 고려한 웹사이트

잘 계획된 인포메이션 아키텍처는 웹사이트를 방문하는 고객이나 제작자, 운영자 모두에게 커다란 이득을 준다. 사용자가 신속하게 그들이 원하는 정보를 찾을 수 있고, 그 때문에 정보를 찾는데 걸리는 시간과 비용을 절감 할 수 있다.

웹사이트와 인트라넷의 개발자들도 새로운 자료를 추가하고자 할 경우, 기존의 컨텐트와 사이트 구조를 어지럽히지 않으면서 새로운 컨텐트를 어디에 어떻게 배치할 것인지를 쉽게 알 수 있다. 가장 중요한 것은, 개발자들이 웹사이트를 개발하는 동안에 드러날 수 있는 계획상의 문제점들을 인포메이션 아키텍처를 이용해서 최소화할 수 있다는 점이다.

  • 고객의 관점
    다양한 사용자들은 제각기 다양한 요구를 갖고 있기 때문에, 정보를 찾는 방법을 여러 종류로 지원하게 될 것이다.
  • 제작자의 관점
    인포메이션 아키텍쳐를 재설계하는 것은 웹사이트의 그래픽 네비게이션 바에서부터 컨텐트 그 자체에 이르기까지 다른 모든 면에 있어서 영향을 끼치게 되는데, 이것은 매우 값비싼 대가가 될 것이다.
    숲을 보지 않고 나무만을 보는 디자이너 혼자서 사이트를 만들 때 흔히 벌어지는 일을 생각해 보라
    .
    인포메이션 아키텍처는 어떤 웹 사이트의 조감도를 이해하고 전달하는 일에 대한 것이라고 풀이할 수 있는 것이다
    .
    인포메이션 아키텍처에 대한 문제들은 사이트가 만들어 지기 전 , 즉 설계 단계에서 해결되어야 한다
    .
    이런 문제들은 사이트가 만들어지기 이전, 즉 설계 단계에서 해결되어야 하기 때문이다. 만일 이런 문제들을 해결하는 일을 회피한 채로 사이트의 개발이 진행된다면 , 이 문제들을 결코 사라지지 않을 것이며 나중에는 더욱 큰 문제를 야기시킬 것이다.

5. 정보설계 전문가의 학문적 배경및 전제조건

어떠한 경우든지 한 분야에 대한 지식만으로는 정보설계 전문가로서의 가능성있는 학문이 될 수 없다는 것은 명백하다. 이것은 각 분야들은 나름대로 강점과 약점을 가지고 있기 때문이며 이들을 한번에 볼 수 있는 그래픽디자인,문헌정보학,저널리즘, 시스템공학,마케팅,전산학 등 다양한 학문적 지식이 필요하다.

  • 균형적인 시각의 유지
    모든 사람들은 각각의 분야에 따라 편견을 가지고 있다는 것을 기억해 두어야 한다. 가능한 균형 잡힌 시각을 유지해야 한다.
  • 협력과 커뮤니케이션이 필요
    인포메이션 아키텍처가 매우 추상적인 무형의 것이기 때문에, 의사소통은 쉽지 않다.
    웹의 초장기 시절에는 웹사이트는 종종 한 명의 사람에 의해서 순전히 의지의 힘으로 설계되고, 만들어지고,관리되었다. 그들이 웹마스터였으며, 컨텐트를 모아 정리하는 것과, 그래픽을 디자인 하는 것, 그리고 필요한 CGI 스크립트들을 붙잡고 컴퓨터와 씨름하였다
    .
    그들의 유일한 전제조건은 HTML을 숙지해야 하는 것과 자진해서 일을 배우는 것이었다. 놀랍도록 여러 분야에서 웹마스터들이 되었고, 곧 여러 방향으로 갈라졌다. 그들은 정보설계 전문가나,그래픽디자이너였으며 동시에 편집자이자 프로그래머이기도 했다
    .
    그러나 점차 기업들은 그들의 사이트에 더 많은 것을 요구하게 되었고, 결과적으로더 많은 웹마스터를 필요로 하게 되었다
    .
    단순한 홈페이지는 빠르게 복잡한 웹사이트로 발전하였다. 사람들은 더 많은 컨텐트, 더 좋은 구성, 더 뛰어난 기능, 그리고 더 예쁜 그래픽을 요구하였다. 확장자, 플러그인, 그리고 다양한 언어들이 증가했다. 테이블,VRLM,프레임,쇽웨이브, 자바 , 엑티브엑스 등이 추가되었다. 늘어나는 기대와 더욱 더 복잡해지는 환경으로 가고 있다.

점차 웹마스터들과 기업은 복잡한 웹사이트를 성공적으로 설계하고 만들어 내기 위해서는 다양한 분야의 인원들로 구성된 팀이 필요하다는 것을 깨닫게 되었다.
개인으로서는 작업에 필요한 모든 분야에 전문가가 될 수는 없다. 그보다는 오히려, 상호 보완적인 여러 분야의 전문 기술을 갖춘 개인들로 구성된 팀으로 함께 작업해야한다.
팀의 구성원은 특수한 프로젝트의 필요성, 사용 가능한 예산, 전문기술의 유용성 등에 따라 변할 수 있다. 그러나 대부분의 프로젝트에서는 마케팅,인포메이션아키텍쳐,디자이너,텍스트제작과 편집,프로그래밍 프로젝트 관리에 대한 전문기술이 요구된다.
덧 붙여서 사설을 붙이면 이 모든 이들이 인포메이션 아키텍쳐 마인드를 가지고 있어야 한다. 어쩌면 모두가 IA 스페셜 리스트로서 작업에 임해야 한다.

6. IA에서 요구되는 분야별 역할

  • 마케팅
    웹사이트에 있어 미리 의도된 목적과 사용자 즉 고객에 초점을 맞춘다.
  • 인포메이션 아키텍처
    웹사이트 전체에 대한 브라우징과 검색을 지원한다. 전체 구조의 설계,색인, 레이블링,네비게이션시스템의 설계.
  • 디자인
    독자성과 일관성있는 GUI와 인터렉션의 가능성을 제시해야한다.
    그들은 기능(현실)과 외양(이상)의 균형을 만들어간다.
  • 편집
    사이트 전체를 통한 언어 사용에 초점을 맞춘다. 그들의 일은 원고 텍스트의 편집과 교정, 컨텐트의 조작 및 수정등을 통해서
    사이트에서 일관된 목소리를 내도록 해야 한다.
  • 기술
    테크니컬 디자이너들과 프로그래머들의 역할은 서버 관리와 사이트 개발 툴 및 웹사이트 응용 프로그램들을 개발하거나 통합하는 것이다.
  • 프로젝트 관리
    프로젝트 매니저는 프로젝트가 예산과 일정 내에서 진행되도록 관리한다.

웹사이트 디자인과 구축 프로젝트의 성공은 전문화된 팀 구성원들 간에 커뮤니케이션과 협력이 얼마나 성공적으로 이루어지느냐에 달려 있다고 해도 과언이 아니다. 모든 사람들의 목적을 조망할 수 있는 시각, 그리고 팀의 다른 멤버들의 다양한 접근법에 대해서 이해할 필요가 있다. 정보설계전문가들에게 있어서 의사소통은 중요한 도전거리이다.
왜냐하면 업무 자체가 가진 무형의 성질 때문이다. 이들은 다른 이들이 은유기법에 기초한 아키텍처나 색인 시스템과 같은 추상적인 개념을 시각화시키는 일을 도와주는 어려운 도전에 직면하게 될 것이기 때문이다.

우리는 무엇인가 이해하기 위해 ,설명하기 위해 ,그리고 통제하기 위해 체계화 한다.
분류체계,우리가 정보를 체계화하고, 분류하고, 서로 관련짓는 방법들은 사람들이 그 정보를 이해하는 방법에 영향을 끼친다
.
정보설계는 사람들의 질문에 대한 올바른 해답을 찾을수 있도록 정보를 체계화한다. 목적없는 브라우징이나, 목적을 갖춘 검색을 돕기 위해 사용자들에게 적절한 체계나 레이블 시스템을 제공한다
.
웹은 조직적인 형태를 갖추기에 놀라울 정도로 융통성 있는 환경을 제공한다. 그렇기 때문에 인쇄매체의 물리적인 한계를 벗어나 각기 다른 형태의 컨텐트를 취하고 있다. 도대체 왜 그렇게 많은 대형 웹사이트들이 그렇게 돌아다니기가 힘들게 만들어 졌는가와 같은 상식적인 질문들을 통해 정보를 체계화 하는데 있어 진정한 문제에 주목할 수 있을 것이다.


정보의 체계화에 대한 도전

최근 몇년동안, 정보를 체계적으로 조직화하는 문제에 더 많은 관심이 집중되어왔다.
그러나 사람들은 수세기 동안 정보에 조직체계를 세우는 일에 어려움을 겪어 왔기 때문에 이 문제는 새로운 것이 아니다. 다만 인터넷이라는 새로운 매체가 가진 분산화의 힘에 의해 점차 정보를 체계화하는 일에 대한 책임을 웹 사이트 개발자들에게 더 많이 떠 넘겨 지고 있는 것이다. 우리에게 정보를 출판할 자유를 주면서, 조용히 우리에게 정보를 체계화할 책임까지 부담 시키고 있는 것이다.
이런 상황이 전개되는 동안 개발자들은 자신도 모르는 사이에 저 컨텐트를 어떻게 분류해야 하는가? ...기존의 분류시스템은? ....정보들에 대한 목록...과 같은 질문들을 하면서 사서들의 용어를 사용하기 시작했다.
이렇게 진행되는 동안정보를 조직하는 작업에 본질적으로 내포된 문제점들은 더욱더 두드러지게 되었고, 중요하게 부각될 것이다.


정보 체계화의 난점

1. 모호성

분류시스템은 언어 기반 위에서 정립된다. 그리고 단어는 둘 이상의 의미로 이해되는 모호성을 가진다.
이런 단어의 모호함은 결국 정보 분류시스템의 기반을 불안정하게 한다.
레이블로 사용할 특정 단어는 사용자들이 우리가 의도하는 바를 혼동하게 하는 위험성을 내포하고 있다.
레이블의 이름과 그 정의에 대해 그리고 어느 분류에 속해야 하는지에 대해 의견 일치를 보아야 한다.


2.
이질성

웹사이트는 다양한 수준의 객체들로 이루어진 문서들과 그 구성 요소에 대한 접근 방법을 제시한다.
그리고 다양한 포맷의 문서들에 대한 전형적인 접근법을 제공한다. 텍스트 정보는 비디오, 오디오, 인터랙티브 응용프로그램들과 웹상이 공간을 공유한다.
이러한 웹사이트의 이질적인 본성은 고도로 체계화된 일관성있는 구조 체계를 컨텐트에 적용하는 것이 결코 쉽지않다.
서로 다른 다양한 수준의 문서 객체들을 나란히 분류하는 것은 이치에도 맞지 않다.

3.시각차이

레이블 시스템과 구조체계는 그것들을 만든 사람의 관점과 시각에 많은 영향을 받고 있다.
유용한 구조 체계를 설계하기 위해서는 컨텐트에 대한 명칭과 구조에 대한 여러분 스스로의 인지적 모델에서 벗어날 필요가 있다.
객관화와 고객의 시각이 필요한 것이다. (도날드 노먼- 개념모형, 심성모형)
모든 사용자들은 정보를 이해하는 시각과 방법이 모두 다르기 때문에 더욱 복잡해진다.
사용자들이 사이트에 어느 정도 익숙한 지에 따라 정도는 매우 다양해 진다.
이런 이유로 완벽한 구조를 만드는 것은 불가능하다. 그러나 시각의 중요성을 인식하고,여러분과 여러분의 동료를 위한 것 보다
주 대상 관객들을 이해하려고 노력함으로써 대중을 위한 정보를 더욱 잘 조직화 할 수 있을 것이다.


4.
내부정책

웹사이트와 인트라넷을 위한 인포메이션아키텍처를 설계하는 작업은 정책에 따라 좌우되는 경향이 있다.
구조와 레이블 시스템의 선택에 따라 사이트의 사용자가 회사,부서,상품에 대해서 어떻게 받아들이는가에 큰 영향을 끼칠 수 있다.
기업내부의 정치적 의사 결정 환경은 알맞은 정보 아키텍처를 만드는 일을 더욱 복잡하고 어렵게 만든다.

웹사이트와 인트라넷 구성하기

웹 사이트와 인트라넷의 정보들을 정리하는 것은 성공을 결정짓는 중요한 요소지만 아직 많은 웹 개발 팀들은 그일을 제대로 하는데 필요한 것들을 이해하지 못하고 있다.
다음은 정보조직화 프로젝트를 진행하기 위한 기반이다.

1. 컨텐트 체계화

우리는 일상생활에서 늘 '컨텐트 체계'를 이용하고 있다.
전화번호부, 프로그램 안내서들은 모두 편리하게 접근할 수 있도록 어떤 체계를 사용한다.

1)명확한 컨텐트 체계
명확한 컨텐트체계는 정보를 잘정의 하고 겹치는 부분이 없도록 배타적인 구역들로 일정하게 나눈다.
'
기지 정보를 이용한 검색' 즉 어디서 그것을 찾을 수 있을 것인지가 분명하기 때문에 이매모호한 부분이 없다.
여기에서의 문제점은 우리는 찾고자하는 것의 정확한 이름을 알고 있어야 한다는 것이다.
이것은 사용하기 쉽고, 설계 및 유지가 쉽다.

알파벳순
백과사전이나 사전등에서 사용되는 1순위의 컨텐트체계이다.
이미 알고 있는 항목에 대한 빠른 검색과 간단한 디렉토리 브라우징을 지원한다.

연대순 또는 날짜순
보도자료들의 경우는 연대순의 체계에 적합하다.
이들은 발표된 날짜들이 중요한 의미를 내포하기 때문이다.
그러나 사용자들은 키워드를 사용해서 검색하는 것을 원할 수 있으므로 이런 체계들은 상호보완 으로 조합되어야 한다.

지리적 위치에 따른 분류
정치적, 사회적,경제적 문제들은 종종 장소와 관계가 있다. 사용자들은 지도에서 마우스를 이용해 손쉽게 컨텐트에 접근 할 수 있다.


2)
모호한 컨텐트 체계
정보를 정확하게 정의 내리기 힘든 목록 분류에 적용한다. 이는 인간의 주관성 뿐 아니라 언어와 구조 자체의 모호함으로 더욱 어려움을 겪는다. 설계 뿐 아니라 유지도 어렵다. 그러나 때로는 체계가 정확한 컨텐트보다 중요하고, 사용하기 편리한 면도 있다.
왜냐면 우리가 찾고자 하는 것이 무엇인지 항상 알지 못하기 때문이다. 막연한 정보를 찾기 위해 반복적이고, 서로영향을 미치는
정보검색을 한다. 찾으면 구할 것이다...찾아가는 동안의 과정에서도 배울 수 있다.이는 항목들을 의미 있는 방식으로 묶어서 연관 학습과정을 지원한다.

주제별 체계
정보를 주제나 화제에 따라 구성한다. 민감하지만 유용한 접근방법중 하나다.
전화번호부의 업종란이 그 예이다.

작업지향형 체계
컨텐트와 응용도구를 프로세스와 기능, 그리고 업무의 집합으로 편성한다. 이것은 많지 않은 편이다. 웹사이트는 프로그램처럼 응용이나 기능보다는 컨텐트 자체에 집중하고 있기 때문이다. 그러나 인트라넷이나 엑스트라넷은 작업 지향적 체계에 알맞다.
왜냐하면 컨텐트 뿐 아니라 강력한 응용 프로그램들을 통합하는 경향이 있기 때문이다.

사용자구분형 체계
관객들이 두 종류 이상이라면 사용자 구분형 컨텐트 체계가 알맞다. 이는 사이트내 미니사이트로 나누기 때문에 사용자에게 선택권을 제공한다.

은유형 체계
새로운 것을 잘 알고 있는 것과 관련지어서 이해할 수 있도록 도와준다. 예로 데스크탑 컴퓨터와 그 안의 폴더,파일들, 휴지통등이다.
인터페이스에 적용된 이런 예는 사용자들이 컨텐트와 기능을 직관적으로 이해할 수 있도록 도와준다.
그러나 이런 은유기법을 일부가 아닌 전체 웹사이트에 적용하는 것은 주의해야 한다. 그리고 이 기법이 성공하려면 사용자들에게 매우 친근한 것이 되어야 한다.
일예로 pcs업체가 휴대폰의 외관을 흉내내어 컨텐트체계를 구성하는 것은 어느정도 토의해볼 가치 있다. 그러나 이것은 때로는 쓸모없는 짐덩어리가 되거나 제한적인 요소로 작용할 수 있다는 점을 명심해야 한다.

혼합 컨텐트체계
여러개의 컨텐트 체계(작업지향,은유기법,사용자별,주제별...)를 혼합하기 시작하면 사용자들의 혼란은 이미 예견된 것이다.
그리고 찾고자 하는 옵션을 발견하기 위해 각각의 메뉴 항목들을 대충이라도 보아야 하는 수고를 해야한다.
이런 예는 웹에서 흔히 발견할수 있다.다양한 컨텐트 체계들이 하나의 페이지에서 제공되어야 한다면, 각각의 체계들이 하나의 페이지 에서 제공되어야 한다면, 각각의 체계들이 나름대로 완전성과 일관성을 유지하는 것이 중요하다는 것을 디자이너들과 충분히 논의 하는것이 중요하다. 왜냐면 이러한 완전성과 일관성은 디자인 기법으로 조절 가능하기 때문이다.


2.
컨텐트구조

영화는 물리적인 구조로 볼 때 1차원의 선형적인 컨텐트구조이다. 지도는 구조를 가지고 있다. 비록 정확성이 없는 지도라 할지라도 지도위의 표기들은 물리적인 근사치에 의해 배치 되기 때문이다. 정보의 구조는 사용자들이 열람하는 일차적인 방법들을 정한다.

1)계층구조, 하향식 접근법

웹사이트를 이용하는 사용자들은 계층적 구조 모델을 이용하는 웹사이트를 쉽고 빠르게 이해할 수 있다. 이 안에서 사용자들은 편안함을 느낀다. 이것은 정보를 조직화하고 간단하고 보편적이며 익숙한 방법을 제공하기 때문이다.

2)계층구조 설계

첫째는 계층분류들은 상호 배타적이어야 한다.단 배제와 포함의 균형을 잘 유지해야 한다.너무 많은 항목들이 중복되어 (cross list)나열되면 계층구조의 의미가 퇴색되기 때문이다.
동일한 정보들은 주제에 따라 정리된 상품들로 나열될 수 있지만 정보를 종류별로 정리하여 나열할 수도 있다. 단지 정보를 바라보는 두개의 서로 다른 방법이다.

둘째는 정보의 계층도에서 폭과 깊이의 균형이다.폭은 계층의 각 단계에서 선택한 옵션들의 수이며, 깊이는 계층단계수이다.

계층이 너무 좁으면서 깊다면 사용자들은 정보를 찾기 위해 너무 많은 수를 클릭해한다.
반대로 너무 넓으면서 얕다면 사용자들은 메뉴에서 지나치게 많은 옵션을 보게 되고 컨텐트의 부족에 불쾌감을 느낄 것이다.
이때 폭을 다룰 때 사람이 인식할 수 있는 한계에 신경 써야 한다. 모호한 컨텐트에서는 7±2의 규칙을 따를 필요가 있다.
10
개이상의 메뉴를 가신 사이트는 사용자를 질리게 한다.
깊이를 다룰 때는 더욱 보수적이다. 4~5단계이상을 클릭해야 한다면 사용자들은 쉽게 포기하고 사이트를 떠날 것이다.

만약 성장할 것으로 기대되는 인트라넷은 좁고 깊은 것 보다 넓고 얕은 쪽으로 기우는 것이 대대적인 재구축 없이도 컨텐트를 추가하기 용이하다.


3)
하이퍼텍스트 접근법
이는 정보를 조직하는 상대적으로 새롭고 매우 비선형적인 방법이다.
이는 단위정보와 그 정보간의 링크라는 두개의 구성요소를 가진다.
링크는 계층적으로 또는 비계층적으로 또는 두 가지 방법을 모두 적용해서 연결될 수 있다.
그러나 유연성을 제공하는 반면 사용자가 혼동과 복잡함을 느낄 여지는 충분히 있다. 이는 사용자가 숲속으로 던져져 나무들 사이를 돌아다니며 지형을 알려고 노력하는 것과 다름없기 때문이다.그러므로 이는 계층적모델이나 DB모델에 기반을 두고 보완적으로 사용하기 적절하다.


4)
관계형 데이터베이스 모델, 상향식 접근법
데이터베이스는 분산컨텐트관리,보안인증,그리고 다수의 사람들이 서로 다른 사람들을 방해하지 않고 컨텐트를 수정할수 있게 해주는 제어시스템을 제공한다.또한 각기 다른 방문자들을 위해 여러 개의 양식과 형식으로 재 구축할 수 있도록 한다.
그러나 각각의 레코드들은 엄격한 규칙을 따라야 하며, 이질적인 컨텐트를 체계적으로 구성하고자 할 때에는 제대로 동작하지 못한다.
이런 이유들로 해서 데이터베이스 모델은 전체 사이트에서 부분적인 사이트나 구조화 되어 있고 동질적인 정보들의 집합에 더 적당하다.


5)
데이터베이스 설계
데이터베이스 솔루션의 후보로 확인된 각각의 컨텐트 분야에서 개개의 레코드 형식들의 컨텐트와 구조를 확인하기 위한 상향식 접근을 해야 한다. 사용되어지는 색인어는 검색과 브라우징을 지원하는 데 있어 중요한 일관성을 부여한다.

데이터베이스 접근법은 데이터 입력과 컨텐트 관리에 훨씬 높은 효율과 정확성을 제공한다. 이는 관리용 인터페이스를 만들수 있고, 템플리트를 사용해서 레코드간의 표준양식을 보증할 수도 있다.
이러한 구현방법과 관련된 결정들은 기술적인 성능들에 의해 영향을 받고 아키텍쳐에는 영향을 별로 끼치지는 않는다.


응집력 있는 구조 체계 구축하기


지금까지 살펴 본대로 구조 체계는 매우 복잡하다. 명확한 컨텐트와 모호한 컨텐트 다양성을 숙지하고, 주제나, 작업, 방문자,날짜순, 지역, 복합적 구성에 대해 고민해야 한다.
또한 구성체계가 검색하는 방법에 영향을 미치는 것에 대해서도 생각해야 한다.
사이트를 요소들로 분해하고, 그렇게 해서 분해된 요소를 한번에 하나의 문제만 다룰 수 있도록 해야 한다.
이렇게 되면 매우 효과적인 구조 체계를 만들 수 있다. 그러나 큰 범위로 조망할 수 있는 시각을 잃지 않는 것 또한 중요하다.

다음은 절대적인 것이라 할 수는 없지만 기억해야 할 기준을 제시하면 다음과 같다.
-
명확한 컨텐트 체계와 모호한 컨텐트 체계간의 차이점을 기억해야 한다.
-
언어는 분명하지 않고,
-
컨텐트는 이질적이며
-
사람들은 다른 시각을 가지고 있다는 것을 기억해야 한다.
-
또한 조직내,기업내에서 정치적인 면은 그 추한 모습을 드러낼 수 있다.
-
구조 체계를 고려할 때는 전형적인 세가지 형태(계층구조,하이퍼 텍스트,데이타베이스) 를 모두 필요로 하다는 것을 명심해야 한다.

Designing Navigation Systems

물리적 공간에서는 길을 잃고 헤메는 위험을 방지하기 위하여 여러 가지 발전된 네비게이션 툴(나침반, 지도, 도로표지판, GPS )들을 고안하여 사용하고 있다. 웹 상에서도 사용자들이 복잡한 웹 사이트 내에서 자신의 위치를 파악하게 해주는 '정황 (context)'을 제공하여 혼란과 당황에 빠뜨리지 않게 하는 것은 매우 중요한 문제이다.

계층적 체계를 제대로 적용한 웹 사이트는 이러한 절대절명의 문제,사용자들이 방향을 잃지 않고, 원하는 정보를 훨씬 쉽게 찾을 수 있게 하며, 보조적으로 네비게이션 시스템을 사용함으로써 콘텍스트의 제공과 사이트 내에서의 이동에 관한 유연성을 높이는 방안이 필요하다.

이러한 네비게이션 시스템은 이러한 보조적인 역할 외에, 현재 디스플레이된 컨텐츠와 관련한 다른 부가정보를 제공하는 기능을 하기도 한다. (ex: see also)

네비게이션 시스템의 설계시 사용자에게 이동의 유연성을 제공하는 것에만 매달릴 것이 아니라 너무 많은 선택을 주어 오히려 그들을 압도하는 위험의 방지에 관한 양립의 적절한 균형에 지속적인 관심을 기울여야 한다.

네비게이션 시스템은 다양한 구성 요소(element)를 가지는 데 자체 컨텐츠를 포함하는 네비게이션 바(bar)와 팝 업 메뉴, 컨텐츠를 포함하지 않고 원격적으로 접근(remote access)을 가능하게 하는 내용목록 ( table of contents)와 사이트 맵 등이 바로 그것이다.

제대로 설계된 네비게이션 시스템은 웹 사이트의 성공을 결정하는 매우 주요한 요인임은 자명하다.

1. 브라우져 내의 네비게이션 특성 (Browser Navigation Features)

네비게이션 시스템의 설계시 시스템의 환경, 즉 웹 브라우저 자체가 제공하는 네비게이션 특성을 고려하는 것이 중요하다. 웹 브라우져 자체로서 제공하는 네비게이션 특성들 - 웹사이트내에서 다른 페이지에의 직접적 접근을 가능케 하는 Open URL, 최근에 방문한 페이지를 보여주는 History, 사용자가 나중에 쉽게 방문 할 수 있도록 도와주는 Bookmark, 마치 지나온 길에 뿌려놓은 '빵 부스러기'같은 역할을 하는 Back button ( or forward) ,그리고 방문/미방문의 정보를 제공하는 하이퍼텍스트 링크의 다른 색깔 등은 웹 브라우져내의 자체 네비게이션 특성으로서 사용자들의 웹사이트를 통한 행로를 추적하는 데 도움을 준다.

웹브라우저내의 이러한 네비게이션 기능을 무시하거나 방해해선 곤란하다. 예를 들어 방문/미방문의 정보를 나타내줄 수 있는 link colors를 디자이너 임의대로 심미적인 색깔로 바꾼다면 사용자에게 혼란을 줄 수 있다.

웹브라우져의 네비게이션 특성을 간과하지 않는, 심미성과 사용 편의성의 양립을 위한 노력이 필요하며 사용자들은 이러한 웹브라우져에 너무나 익숙해져 있다는 점을 상기해야 한다.

2. 콘텍스트 (context) 의 제공 (Building Context)

복잡한 웹사이트를 설계함에 있어서 전체의 사이트내에서의 사용자가 현재의 위치를 혼동하지 않고 방향성을 유지할 수 있게 하는 콘텍스트의 제공이 중요하다. 물리적 공간 에서 처럼 자신의 위치를 쉽게 파악할 수 있게 해주는 정황적 道標(contextual clue)는 웹상에선 존재하지 않는다. 내츄럴한 랜드마크나 방향을 가리키는 지표는 존재하지 않는다. 하지만 하이퍼텍스트를 사용한 네비게이션 시스템은 친밀하지 않은 대규모 웹사이트의 가운데에서 다른 페이지로 직접적인 이동을 가능하게 해준다.

이러한 웹 상에서의 현재위치를 파악하게 해주는 단서인 콘텍스트 클루를 보장하기 위해 ,

1) 모든 페이지에 조직의 명칭을 포함시켜,사용자가 사이트의 각 레벨로 이동하면서 자신이 아직 그 웹사이트에 있다는 것을 명확히 해 줄 필요성과 어떤 사이트를 현재 방문하고 있는 지를 명확히 해준다.

2) 네비게이션시스템은 정보의 계층적 구조를 명확하고 일관되게 보여줄 수 있어야 하며 그 수직적구조안에서의 위치를 가리켜줄 수 있는 것이어야 한다.

3. 유연성의 향상 ( Improving Flexibility )

계층적 구조는 정보의 설계 및 조직화에 가장 친숙하며 강력한 방법이다. 많은 경우에 있어서 계층적 구조는 컨텐츠를 구성하는 적당한 방법으로 사용되지만 네비게이션 측면에서 볼 때 유연한 이동을 제한한다는 점에서 어느 정도 한계를 가진다. (ex. Gopher; 트리구조의 계층구조를 따라서만 이동이 가능, 계층, 수평적 이동이 불가)

웹의 하이퍼텍스트 기능은 상당한 네비게이션의 자유를 보장하면서,이러한 한계를 뛰어넘어 계층구조의 한 브랜치로부터 다른 브랜치로 수평적 이동이 가능하며, 한 브랜치내의 임의 레벨로부터 동일 브랜치의 다른 레벨로의 계층적 이동을 가능케 해준다.

이러한 이동의 유연성을 다른 '난잡해질 위험성'과 균형을 맞추는 것이 네비게이션 시스템 설계의 주요한 팁이다. 대규모 복잡한 웹사이트내에서의 계층,수평적 네비게이션 도움의 제공은 매우 제한적일 수 있다. 반면에 너무 많은 도움을 제공하여 명확한 계층적 구조가 사장되거나 사용자들을 압도할 소지가 있다. 네비게이션 시스템은 콘텍스트와 유연성을 제공함으로서 계층적 구조를 강화하고 조심스럽게 보조할수 있는 구조로 설계되어야 한다.

4. 네비게이션 시스템의 유형 (Types of Navigation Systems)

복잡한 웹사이트에서는 여러종류의 네비게이션 시스템을 이용한다. 성공적인 사이트의 구축을 위해서 시스템의 유형의 이해와 유연성 및 콘텍스트의 제공을 위한 적절한 조율이 필수적이다.

1) 계층적 네비게이션 시스템 (Hierachial Navigation Systems)

계층 구조로 설계된 정보는 그 자체로 기본적인 네비게이션을 제공하지만 메인페이지로부터 실질적 콘텐츠가 저장된 목적 페이지까지 이동에 있어서 각 페이지의 메인 옵션이 직접적인 계층구조로의 접근만 허용한다는 점에서 한계성을 가지고 있다.

전형적이며 기본적인 방법이긴 하지만 이러한 한계성을 가지고 있기 때문에 다른 부가적 네비게이션 시스템의 적용이 필요하다.

2) 글로벌 네비게이션 시스템 ( Global Navigation Systems)

글로벌, 즉 사이트 전반에 걸친 네비게이션시스템은 전체 사이트에 보다 광범위한 계층,수평적 이동성을 부여함으로서 정보의 계층구조를 보조한다.

가장 간단한 글로벌시스템은 사이트의 각 페이지 하단에 위치한 그래픽 네비게이션 바(bar) 로 구성할 수 있다. 메인 페이지에서 각 바는 불필요 할 지 모르나 다음 레벨의 페이지에서 그 바는 홈페이지로의 링크나 피드백을 위한 링크로 쓰인다. ( ex: 메인 페이지 하단에 아이콘을 이용한 'Home, E-Mail' 메뉴의 네비게이션 바 )

보다 복잡한 글로벌 네비게이션 시스템은 세 번째 레벨이나 그 하위의 페이지들에서의 부문별 특성(area-specific)을 가진 링크를 제공할수 있다. ( ex: 웹사이트의 Product area 를 서핑할 때 Main page, Products, Search 로 구성된 네비게이션 바)

이 유형을 기본으로 한 글로벌 네비게이션 시스템은 웹사이트 전체에 걸쳐 쉽게 적용될 수 있으며, 네비게이션 시스템과 그래픽 디자인은 역시 유연성과 콘텍스트를 동시에 제공할 수 있도록 적절히 통합되어져야 한다.

각 옵션의 상대적인 위치는 한 종류의 바로부터 또 다른 바의 위치와 같아야 하며 사용자들은 왼쪽에서 오른쪽으로 글을 읽기 때문에 메인 페이지는 옵션의 왼쪽에 위치하여야 함을 주목하라. 이러한 요인들은 계층적 구조안에서의 콘텍스트를 강화시킨다.

3) 로컬 네비게이션 시스템 (Local Navigation Systems)

더 복잡한 웹사이트의 구성을 위해 글로벌 네비게이션을 보충할 수 있는 로컬네비게이션 시스템이 필요할수 있다. 로컬 네비게이션 시스템의 이해를 위하여 서브사이트(sub-site)의 개념을 이해하는 것이 필수 적이다. 서브사이트는 어떤 큰 사이트내에서 웹페이지들이 동일한 스타일과 공유된 네비게이션 메커니즘을 적용한다.서브사이트 전체에 걸쳐서 글로벌 네비게이션 시스템을 확장시키는 것은 매우 중요하다.

로컬 네비게이션 시스템은 글로벌 네비게이션 시스템을 대체하기 보다는 보완하는 쪽으로 디자인 되어야 한다. 이러한 통합 역시 글로벌, 로컬 네비게이션 시스템이 너무 많은 옵션을 제공하여 할 때 양립성에 도전을 받을 수 있다. 한 종류만 쓰여진다면 제어가능하나 한 페이지에 동시에 사용되어 진다면 너무 많은 옵션의 제공으로 인하여 사용자들을 압도하는,오히려 혼란스럽게 할 수 있다는 것을 사실을 고려해야 한다.

4) Ad Hoc 네비게이션 (Ad Hoc Navigation)

콘텐츠의 아이템들은 항상 상기 기술한 타입에 적용되는 것은 아니다. ad hoc 링크는 부가 웹사이트에 컨텐츠가 이미 설계된 프레임 워크에 일단 제공된후에 컨텐츠 담당자들에 의하여 ad hoc 링크를 적절하게 위치시켜 부가정보를 제공한다. 주로 단어나 구절에 embedded hypertext link로서 제공하는 것이 일반적이다.

embedded link 는 사용자들이 정보검색에 상당한 음의 상관을 가지므로 사용자들에게 충분한 컨텍스트를 제공하는 구에 링크시키는 것을 고려하는 것이 중요하다. 다시 한 번 강조하지만, 네비게이션 시스템의 설계에 있어, 콘택스트의 제공이 가장 중요한 것이다.

5. 콘텐츠를 포함하는 네비게이션 요소 (Integrated Navigation Elements)

한 네비게이션 요소들은 그 웹사이트의 콘텐츠를 포함하는 페이지로 통합된 네비게이션 요소 (navigation element) 들이 요소들이 글로벌, 로컬 네비게이션 시스템에 있어서 , 가장 공통적이며 중요한 역할을 한다. 사용자들이 사이트나 서브사이트로 이동하면서 반복적으로 보고 사용하는 것들은 바로 이러한 콘텐츠를 포함하는 페이지에 통합되어진 네비게이션 요소들이다.

1) 네비게이션 막대 (Navigation Bars)

가장 간단한 유형으로서 네비게이션 막대는 한 페이지에 모아진 하이퍼텍스트 링크들의 집합이다. 부가적으로 네비게이션 막대는 그래픽을 적용한 아이콘형일수 있으며, 내용목록(Table of contents) 내에 그래픽 이미지로서, 또는 이미지 맵으로서 기능할수 있다.

텍스트기반의 네비게이션 시스템은 메뉴의 잦은 변경과 웹 사이트의 성장성, 코스트를 고려할 때 적용할 만하며 대부분의 경우 글로벌 네비게이션 시스템엔 그래픽을 적용하며, 로컬네비게이션시스템에 텍스트 메뉴를 제공하는 등의 보완을 생각해 볼수 있다.

네비게이션 바를 사이드에 위치시키는 것 보다 페이지의 맨위, 또는 아래에 위치시키는 것이 유리하며 이러한 상/하 위치 결정은 컨텐츠의 길이에 따라 선택 가능하다. 맨 위에 위치시켰을 경우, 네비게이션 시스템으로의 신속한 접근과 그 사이트에 대한 빠른 컨텍스트의 제공에 유리하여 페이지의 시작 부분을 빨리 읽고 사이트의 다른 부분으로 이동할수 있게 해준다. 페이지 하단에의 위치는 일단 페이지가 충분히 읽혀진 후에 네비게이션의 역할을 하게 해준다.

그래픽 네비게이션 막대에 문자라벨이나 아이콘을 포함하여, 콘텍스트와 컨텐츠를 운반하는 방법을 고려할수 있다. 문자라벨은 만들기가 쉬울 뿐만 아니라 각 컨텐츠를 극명하게 제시할수 있는 방법이다. 아이콘은 반면에 만들기가 어려울 뿐만 아니라, 이미지를 통한 컨텐츠의 암시에 어려울 수가 있다. 반복 사용자들은 이러한 아이콘에 매우 친숙해져 있으므로 텍스트 라벨을 확인하려 시간을 지체하지 않으므로 그들을 위한 신속한 메뉴선택을 제공할수 있다.

2) 풀다운 메뉴 (Pull-Down Menu)

풀다운 메뉴는 다양한 옵션을 제공하는 한 줄의 메뉴로서 사용자에게 확장성을 제공한다. 사용자는 메뉴내에 한가지 옵션을 선택하고 GO Submit 버튼을 눌러 목적하는 사이트로 이동이 가능하다. 자바나 자바스크립트를 이용하여 팝업메뉴로서의 기능확장이 가능하다.풀다운 메뉴는 노출된 옵션외에 다른 옵션들을 임시적으로 가림으로써 사용자가 확인하는 작업을 거치게 할 수 밖에 없다. 그러나 상당히 웹 싸이트가 직관적이고 정확한 계층적 구조정책을 가지고 있다면 아주 유용한 기능을 할 수 있다.

6. 원격으로 제어하는 네비게이션 요소 (Remote Navigation Elements)

테이블이나 인덱스, 사이트맵과 같은 원격 네비게이션 요소들은 웹사이트의 기본적 계층구조에 외부적이며 사이트의 컨텐츠에 제 3자적인 관점을 제공하는 데 유용하다.

메인 브라우저 창의 외부로 새로 디스플레이거나,분리된 윈도우,또는 자바를 이용한 제어등의 원격 네비게이션 요소들은 점차적으로 많이 사용되고 있다.

원격 내비게이션 시스템 요소는 네비게이션의 보조적인 방법을 제공하여 웹사이트 컨텐츠로의 접근을 강화시켰다.하지만, 잘못 설계된 조직구조나 네비게이션 시스템을 대체하거나 보완하는 정도로 사용되지는 말아야 한다.

1) 내용목록(Table of Contens)

내용목록이나 인덱스는 인쇄매체의 상황과 비슷하다. 오랜 세월을 거쳐 유용성이 확인되고,친숙한 이 시스템의 웹사이트에의 적용을 고려해야한다.

인쇄물의 체계는 챕터와 페이지의 사용을 통하여 컨텐츠로의 선형 접근뿐만 아니라 랜덤한 접근까지 지원한다. 이와 비슷하게 웹사이트내에서의 내용목록은 계층구조의 상위레벨에 해당한다.

그 사이트내에서 폭넓은 관점을 제공하며 그 컨텐츠의 부분으로의 랜덤한 접근을 가능하게 하며, 하이퍼텍스트 링크를 사용하여 사용자에게 그 사이트의 다른 페이지로 직접적인 접근을 가능케 한다.

내용목록의 적용을 결정할 때 웹사이트의 크기를 고려하여야 한다. 단지 두 개나세 개의 계층적 레벨을 가진 소규모 사이트를 제작시 테이블 컨텐츠는 불필요하다.

그래픽 요소들을 적용하여 컨텐츠 테이블을 보다 심미적으로 설계 할수도 있다. 하지만 설계에 드는 노력이 훨씬 많이 들며 사용자들의 로딩속도가 느려지는 것을 감안하여야 한다. 컨텐츠 테이블과 같은 네비게이션 툴의 설계시 중요한 것은 폼 보다는 기능이다.

2) 인덱스 (Index)

웹사이트가 강력한 계층적 구조를 가지지 않는 웹사이트를 위해서, 수동적으로 보다 더 구조화된 내용목록을 위해 좋은 대안이 될 수 있다.

인쇄매체에 사용되는 인덱스와 비슷하게 웹기반 인덱스도 키워드나 프레이즈를 알파벳순서로 표현할수 있다. 내용목록과는 달리 인덱스는 대체적으로 계층적 레벨이 얕거나 아예 없다. 그러므로 인덱스는 그들이 기대하는 아이템 명칭을 이미알고 있는 사용자들을 위해 매우 효과적이다. 알파벳순서의 목록을 잠깐만 훑어보아도 이동하고 싶어 하는 곳으로의 직접 적인 이동이 가능하게 한다.

사용자들이 정보를 찾으려 할 때 사용하는 단어들을 파악하는 것이 인덱싱에 매우 효과적있다. 포커스 그룹 세션이나 인터뷰등을 통하여 분석이 필요하다. 웹사이트를 띄운 다음에는 사용자들이 사용한 검색어를 추적하는 쿼리 트레이싱 툴(quary tracing tool)이 유용할수 있다. 실질적 사용자들의 검색어의 분석은 인덱스 기능의 강화에 도움을 줄수 있다.

3) 사이트 맵 (Site map)

단순한 문자의 그래픽컬한 심볼 이상의 방법으로 인포메이션 아키텍쳐를 표현한다. 사이트 맵은 사용자들이 사이트 맵에 친숙하지 않을 뿐만 아니라 디자이너들이 사이트 맵의 설계를 즐겨하지 않았고, 대부분의 사이트들이 다중적인 체계화 구조를 지니지 않아, 컨텐츠를 대신 연상 시킬만한 그래피컬한 대체기능이 주어지지 않았기 때문에 네비게이션 역할을 위해 웹에서 즐겨 사용되지 않았다.

사이트 맵을 적용할 것을 고려하였다면 물리적 대상과 심볼에 의한 기호화를 동시에 고려하여야 한다. 물리적 공간에서 지도는 그 지역을 극단적으로 정확하게 지리적으로 표현 하지 않는다. 우리의 목적지까지 제대로 길을 찾아 갈수 있게 하는 '정황적 도표'를 제공하기 위해 정확도와 축적이 때론 희생되어진다.

이러한 법칙은 모든 웹사이트의 원격 네비게이션 시스템의 설계에 적용된다. 제공된 컨텐츠 테이블, 인덱스, 사이트 맵을 참조로 할때 사용자는 매 페이지마다 제공되는 모든 링크들을 볼필요가 없다. 그들은 명확하고 함축적인 방법으로 표현된 중요한 링크들만 필요로 할뿐이라는 것을 명심하여야 한다.

4) 투어 가이드 (The Guided Tour)

투어 가이드는 웹사이트내 주요 컨텐츠를 처음 접하는 사용자에게 안내를 위한 멋진 툴이다. 예를 들어 유료 온라인 매거진과 같은 사이트에서의 제한적 접근을 위해, 잠재적 고객에게 그들의 지불대가로 무엇을 원하는지 보여주기 위해서 필요하므로 매우 중요하다.

투어 가이드는 선형적인 네비게이션특성을 가진다. 하지만 하이퍼 텍스트 네비게이션 막대는 부가적인 유연성을 제공하는 데 사용되어 질 수 있다.

투어가이드는 새로운 사용자들을 위한 소개나 웹사이트를 위한 마케팅 기회를 목적으로 하여야 한다. 많은 사람들이 이 투어 가이드를 이용하지 않고 있으며 한번 이상 이용하는 사람들은 드물다. 그러한 이유를 위해 , 투어가이드를 메인페이지보다는 게이트웨이 페이지로부터 링크를 하는 것을 고려해야 한다.

또한 어떤 식으로 익사이팅하고 다이내믹하며 인터액티브한 투어가이드를 설계할 것인가에 대한 강박관념을 그 투어가이드 페이지가 사실상 웹사이트의 이용시 주요 역할을 차지하지 않는 다는 사실과 균형을 맞춰야 한다.

7. 품위있는 네비게이션 시스템의 설계 (Designing Elegant Navigation Systems)

기능상으로나 심미적으로나 훌륭하게 작동하는 네비게이션 시스템을 설계하는 것은 양립성의 고려에 있어 매우 어려운 작업이다.고려해 볼수 있는 여러 가지 해법과 팝업메뉴나 다이나믹 사이트맵 어쩌면 진정으로 원하는 것을 찾는 것을 혼란스럽게 할수있을 정도로 뛰어난 기능을 제공하는 팝업메뉴나 다이나믹 사이트 맵과 같은 고난이도의 기술들을 해법으로 고려해 왔다. 사용자들에게 진정으로 필요한 것은 컨텍스트의 제공, 유연성의 향상, 원하는 정보를 찾기위해 도와주는 것들이다.

네비게이션요소의 단 한가지 조합만이 존재하는 것은 아니다. 적절한 요소들의 조합을 통하여 웹사이트의 특정한 목적, 사용대상자,컨텐츠의 특성을 고려하여 네비게이션 시스템의 최적화된 설계가 요구된다.

그러나 네비게이션 시스템의 설계시 봉착하게될 여러 어려운 과정이 있을 것이다.그것은 계층적 체계화로부터 시작한다. 기본적인 네비게이션 시스템으로서 체계화된 계층구조는 다른 모든 결정에 영향을 미친다. 웹사이트의 최상위 레벨에서의 범위를 선택하는 것은 글로벌 네비게이션 시스템을 선택할 것이며 그러한 체계화를 기본으로 하여 그 웹사이트에서 다른 여러 페이지로부터 접근이 가능한 여러 키 페이지들을 선택할 수 있을 것이다. 결과적으로 글로벌 네비게이션 시스템은 로컬또는 ad hoc 네비게이션 시스템의 설계를 결정하게 한다.

만약 통합된 네비게이션 시스템을 설계했다면 부가적으로 하나 또는 이상의 리모트 네비게이션 시스템을 고려할수 있다. 계층적 체계가 명확하다면 '내용목록'의 사용이 적절할 수 있으며, 정보자체가 시각화를 고려하는 것이라면 '사이트 맵', 새로운 사용자나 지각적인 사용자들에게 그 사이트에서 기대할 수 있는 것을 제시하기 위해선 '투어 가이드'의 적용이 적당할 것이다.

사이트의 규모가 크고 복잡하다면 이러한 네비게이션 요소를 적당히 조합하여 설계함이 가능하지만 역시 사용자를 압도할 만큼의 너무 많은 옵션을 제공하지 않도록 균형감을 유지하는 것이 중요하다.

네비게이션 시스템의 설계후 가능하다면 '사용편의성'의 평가가 필요하다. 사용자의 반응으로부터 얻는 것들로부터 진정으로 적절히 작동하는 품위있는 네비게이션 시스템을 설계하고 개선할 수 있다.

Labeling System

레이블링(labeling)은 표현의 한 형식으로써, 웹 사이트에서는 큰 정보 단위를 표현 하기 위해 레이블을 사용한다. 레이블의 목적은 정보를 효율적으로 전달하는 수단으로 페이지의 수직 공간이나 사용자의 인식 공간을 많이 차지하지 않는다.
웹은 즉각적인 피드백을 충분히 감지할 수 있을 정도로 상호작용적이지 않다.
- "
여러분이 그들에게 무엇을 말하려고 하는지에 대해서 말하라. 그리고 그들에게 하고자 했던 말을 그들에게 전달하라."
레이블은 사용자에게 여러분의 구조 체계와 네비게이션 시스템들을 명료하게 보여주는 가장 분명한 방법이다

1. 레이블링의 중요성

. 짧은 주의 집중, 빠른 판단

    • 웹 사용자들은 순간적으로 판단하고 빠르게 선택할 뿐이다.

. 사이트에 대한 나쁜 인상

    • 서투르고 전문적이지 못한 레이블링은 회사에 대한 사용자들의 신뢰를 훼손 시킬 수도 있다.

. 자기 본위의 레이블링

    • '고객의 요구'에 대한 중요성을 고려하지 않는 것처럼 보이는 레이블을 사용하는 회사나 기관들의 웹 사이트는 공통적으로 '기업 내에서 사용하는 용어'를 그대로 사이트에 적용한다.

2. 레이블이 아닌, 레이블링 시스템

  • 사용자는 개개의 레이블에 대해서가 아니라 '레이블링 시스템'에 대해서만 배우면 된다.
  • 전체를 훑어보고 나면 사용자는 이 시스템이 어떻게 동작하는지 이해하게 된다
  • 일관성은 친밀감을 이끌어 내며, 친밀감은 만족감을 이끌어 낼 것이다.

3. 레이블링 시스템의 유형

. 네비게이션 시스템 속의 레이블

    • 다른 형태의 레이블링 시스템보다는 일관된 적용을 필요로 함
      • 네비게이션 시스템은 계속해서 웹 사이트에 나타남
      • 사용자들은 네비게이션 시스템이 페이지에서 일정하게 위치되고, 사이트 전체에 걸쳐 동일하게 보일 것이라고 믿는 것처럼 네비게이션 시스템에서의 레이블이 일관되고 친숙한 방법으로 동작되도록 해야 함
      • 레이블은 페이지에 관계없이 변하지 않는 것이 좋다.
    • 문제점
      • 동일한 정보를 표시하는데 두 개 이상의 변종들이 있을 수 있으나 적어도 단일 사이트 내에서는 일관되게 사용되어야 함
      • 같은 레이블이 종종 다른 종류의 정보를 나타낼 수 있다.
    • 해결책
      • 메인 페이지에서 네비게이션 레이블들에 대한 간략한 설명을 첨부할 수 있다.

. 색인어로서의 레이블

색인어로 사용되는 레이블은 검색 시스템에 의해 문서가 추출될 가능성을 높이는 기능을 제공하며, 사이트 내에서의 브라우징을 지원한다.

1. 검색시스템 지원

      • 웹 페이지의 키워드가 태그 또는 컨텐트들을 기술하는 데이터베이스 레코드에 들어가야 한다.
      • 웹 페이지의 </span>태그 속에 있는 색인 레이블은 올바른 페이지를 추출해낼 가능성을 높여준다<span lang="EN-US">. <o:p></o:p></span></font></span></li></ul></ul></ul> <p style="margin: 0cm 0cm 0pt 72pt; vertical-align: middle; text-align: justify;"><span style="font-size: 10pt; color: black; font-family: 굴림;" lang="EN-US">2. </span><span style="font-size: 10pt; color: black; font-family: 굴림;">브라우징을 향상<span lang="EN-US"> <o:p></o:p></span></span></p> <ul type="disc"> <ul type="disc"> <ul type="disc"> <li class="MsoNormal" style="margin: 0cm 0cm 0pt; vertical-align: middle; color: black;"><span style="font-family: 굴림;"><font size="2">직접 사이트의 컨텐트에 색인을 다는데 쓰인 키워드들을 사용하여 컨텐트 체계외에도 컨텐트에 접근할 수 있는 추가적인 방법을 제공한다<span lang="EN-US">. <o:p></o:p></span></font></span></li></ul></ul></ul> <p style="margin: 0cm 0cm 0pt 36pt; vertical-align: middle; text-align: justify;"><span style="font-size: 10pt; color: black; font-family: 굴림;">다<span lang="EN-US">. </span>링크 레이블<span lang="EN-US"> <o:p></o:p></span></span></p> <ul type="disc"> <ul type="disc"> <li class="MsoNormal" style="margin: 0cm 0cm 0pt; vertical-align: middle; color: black;"><span style="font-family: 굴림;"><font size="2">단위 정보의 본문 또는 텍스트 내에서 텍스트로 된 링크로 사용되는 레이블이다<span lang="EN-US">. <o:p></o:p></span></font></span></li> <li class="MsoNormal" style="margin: 0cm 0cm 0pt; vertical-align: middle; color: black;"><span style="font-family: 굴림;"><font size="2">링크 레이블은 주변의 텍스트로부터 쉽게 구별되지 않는 링크에 적합하다<span lang="EN-US">. <o:p></o:p></span></font></span></li></ul></ul> <p style="margin: 0cm 0cm 0pt 36pt; vertical-align: middle; text-align: justify;"><span style="font-size: 10pt; color: black; font-family: 굴림;">라<span lang="EN-US">. </span>표제 레이블<span lang="EN-US"> <o:p></o:p></span></span></p> <ul type="disc"> <ul type="disc"> <li class="MsoNormal" style="margin: 0cm 0cm 0pt; vertical-align: middle; color: black;"><span style="font-family: 굴림;"><font size="2">하나의 시스템처럼 잘 동작하기 위해서는 사이트 안의 페이지 각각에서 단일한 형태로 나타나야 한다<span lang="EN-US">. <o:p></o:p></span></font></span></li> <li class="MsoNormal" style="margin: 0cm 0cm 0pt; vertical-align: middle; color: black;"><span style="font-family: 굴림;"><font size="2">두가지 일관성을 통해 표현되어야 한다</font><span lang="EN-US"><br><font size="2">① </font></span><font size="2">각 단계의 레이블들에서 나타난 단위 정보가 비슷한 수준의 중요성을 지녀야 한다</font><font size="2"><span lang="EN-US">.<br>② </span>레이블들의 단계가 사이트의 분야들을 얼마나 깊이 다루고 있는가에 있어서 차이가 크지 않게 해야 한다<span lang="EN-US"> <o:p></o:p></span></font></span></li></ul></ul> <p style="margin: 0cm 0cm 0pt 36pt; vertical-align: middle; text-align: justify;"><span style="font-size: 10pt; color: black; font-family: 굴림;">마<span lang="EN-US">. </span>아이콘 레이블<span lang="EN-US"> <o:p></o:p></span></span></p> <ul type="disc"> <ul type="disc"> <li class="MsoNormal" style="margin: 0cm 0cm 0pt; vertical-align: middle; color: black;"><span style="font-family: 굴림;"><font size="2">장점</font><span lang="EN-US"><br><font size="2">① </font></span><font size="2">텍스트와 동일한 방법으로 훨씬 많은 정보를 전달한다</font><font size="2"><span lang="EN-US">.<br>② </span>표제 레이블로서의 기능을 가진다</font><font size="2"><span lang="EN-US">.<br>③ </span>링크 레이블로 사용되는 경우도 있다<span lang="EN-US">. <o:p></o:p></span></font></span></li> <li class="MsoNormal" style="margin: 0cm 0cm 0pt; vertical-align: middle; color: black;"><span style="font-family: 굴림;"><font size="2">단점</font><span lang="EN-US"><br></span><font size="2">텍스트보다 훨씬 더 많은 제약을 받을 수 있다<span lang="EN-US"> <o:p></o:p></span></font></span></li> <ul type="disc"> <li class="MsoNormal" style="margin: 0cm 0cm 0pt; vertical-align: middle; color: black;"><span style="font-family: 굴림;"><font size="2">모두가 예술적이지 않기 때문에 사실 개념을 시각적으로 전달하는 것이 텍스트로 하는 것보다 훨씬 더 어렵다<span lang="EN-US">. <o:p></o:p></span></font></span></li> <li class="MsoNormal" style="margin: 0cm 0cm 0pt; vertical-align: middle; color: black;"><span style="font-family: 굴림;"><font size="2">사이트의 페이지에서 일관된 자리배치가 필요하다<span lang="EN-US">. <o:p></o:p></span></font></span></li> <li class="MsoNormal" style="margin: 0cm 0cm 0pt; vertical-align: middle; color: black;"><span style="font-family: 굴림;"><font size="2">몇 개의 핵심 개념들을 표현하는 데 적합하다<span lang="EN-US">. <o:p></o:p></span></font></span></li> <li class="MsoNormal" style="margin: 0cm 0cm 0pt; vertical-align: middle; color: black;"><span style="font-family: 굴림;"><font size="2">사용 이유</font><span lang="EN-US"><br><font size="2">① </font></span><font size="2">사이트에 일관적이고 눈에 뜨이는 그래픽 아이덴티티를 부여할 수 있다</font><font size="2"><span lang="EN-US">.<br>② </span>친숙하고 눈에 잘 보이기 때문에 페이지 내에서 쉽게 찾을 수 있다<span lang="EN-US">. <o:p></o:p></span></font></span></li></ul></ul></ul> <h3 style="margin: auto 0cm; vertical-align: middle; text-align: justify;"><span style="color: black; font-family: 굴림;" lang="EN-US"> <o:p></o:p></span></h3> <h3 style="margin: auto 0cm; vertical-align: middle; text-align: justify;"><span style="color: black; font-family: 굴림;" lang="EN-US">4. </span><span style="color: black; font-family: 굴림;">효과적인 레이블링 시스템 만들기<span lang="EN-US"><o:p></o:p></span></span></h3> <p style="margin: 0cm 0cm 0pt; vertical-align: middle; text-align: justify;"><span style="font-size: 10pt; color: black; font-family: 굴림;">사이트 소유자가 아닌 사이트 사용자의 생각과 언어를 반영해야 한다<span lang="EN-US">.<o:p></o:p></span></span></p> <p style="margin: 0cm 0cm 0pt; vertical-align: middle; text-align: justify;"><span style="font-size: 10pt; color: black; font-family: 굴림;">레이블링 시스템을 만들기 위한 참고자료<span lang="EN-US"><o:p></o:p></span></span></p> <p style="margin: 0cm 0cm 0pt 36pt; vertical-align: middle; text-align: justify;"><span style="font-size: 10pt; color: black; font-family: 굴림;" lang="EN-US">1) </span><span style="font-size: 10pt; color: black; font-family: 굴림;">현재 사용중인 표현법이나 레이블명을 검토한다<span lang="EN-US">. <o:p></o:p></span></span></p> <ul type="disc"> <ul type="disc"> <li class="MsoNormal" style="margin: 0cm 0cm 0pt; vertical-align: middle; color: black;"><span style="font-family: 굴림;"><font size="2">레이블링을 적용하기 이전에 사이트를 구축하는 동안 내렸던 많은 결정들을 숙고한다<span lang="EN-US">. <o:p></o:p></span></font></span></li> <li class="MsoNormal" style="margin: 0cm 0cm 0pt; vertical-align: middle; color: black;"><span style="font-family: 굴림;"><font size="2">기존의 레이블명을 문서화는 작업도 중요하다<span lang="EN-US">. <o:p></o:p></span></font></span></li></ul></ul> <p style="margin: 0cm 0cm 0pt 36pt; vertical-align: middle; text-align: justify;"><span style="font-size: 10pt; color: black; font-family: 굴림;" lang="EN-US">2) </span><span style="font-size: 10pt; color: black; font-family: 굴림;">다른 웹 사이트를 참고한다<span lang="EN-US">. <o:p></o:p></span></span></p> <ul type="disc"> <ul type="disc"> <li class="MsoNormal" style="margin: 0cm 0cm 0pt; vertical-align: middle; color: black;"><span style="font-family: 굴림;"><font size="2">자신이 가장 비판적인 고객이 될 필요가 있다<span lang="EN-US">. <o:p></o:p></span></font></span></li> <li class="MsoNormal" style="margin: 0cm 0cm 0pt; vertical-align: middle; color: black;"><span style="font-family: 굴림;"><font size="2">여러분의 사이트가 다루는 주제를 취급하는 대학교의 웹사이트를 살펴본다<span lang="EN-US">. <o:p></o:p></span></font></span></li></ul></ul> <p style="margin: 0cm 0cm 0pt 36pt; vertical-align: middle; text-align: justify;"><span style="font-size: 10pt; color: black; font-family: 굴림;" lang="EN-US">3) </span><span style="font-size: 10pt; color: black; font-family: 굴림;">통제어 사전과 유의어 사전을 참고한다<span lang="EN-US">. <o:p></o:p></span></span></p> <ul type="disc"> <ul type="disc"> <li class="MsoNormal" style="margin: 0cm 0cm 0pt; vertical-align: middle; color: black;"><span style="font-family: 굴림;"><font size="2">통제어 사전이란 예술이나 전산학과 같은 전문 주제 분야에 대한 용어를 설명하고 있는 사전을 말한다<span lang="EN-US">. <o:p></o:p></span></font></span></li> <li class="MsoNormal" style="margin: 0cm 0cm 0pt; vertical-align: middle; color: black;"><span style="font-family: 굴림;"><font size="2">시소러스란 용어들간의 관계를 포함하고 있는 사전이다<span lang="EN-US">. <o:p></o:p></span></font></span></li> <li class="MsoNormal" style="margin: 0cm 0cm 0pt; vertical-align: middle; color: black;"><span style="font-family: 굴림;"><font size="2">보다 좁고 구체화된 어휘나 시소러스일수록 사이트에 사용하기 좋다<span lang="EN-US">. <o:p></o:p></span></font></span></li></ul></ul> <p style="margin: 0cm 0cm 0pt 36pt; vertical-align: middle; text-align: justify;"><span style="font-size: 10pt; color: black; font-family: 굴림;" lang="EN-US">4) </span><span style="font-size: 10pt; color: black; font-family: 굴림;">컨텐트에서 나오는 레이블<span lang="EN-US"> <o:p></o:p></span></span></p> <ul type="disc"> <ul type="disc"> <li class="MsoNormal" style="margin: 0cm 0cm 0pt; vertical-align: middle; color: black;"><span style="font-family: 굴림;"><font size="2">레이블들은 문서 그 자체에서도 나올 수 있다<span lang="EN-US">. <o:p></o:p></span></font></span></li> <li class="MsoNormal" style="margin: 0cm 0cm 0pt; vertical-align: middle; color: black;"><span style="font-family: 굴림;"><font size="2">정보를 정확하게 분류한 출처에 의존하는 대신<span lang="EN-US">, </span>다른 사람이 분류하고 있는 내용에 대해서 정밀하게 살펴보는 것이 더 유용하다<span lang="EN-US">. <o:p></o:p></span></font></span></li></ul></ul> <p style="margin: 0cm 0cm 0pt 36pt; vertical-align: middle; text-align: justify;"><span style="font-size: 10pt; color: black; font-family: 굴림;" lang="EN-US">5) </span><span style="font-size: 10pt; color: black; font-family: 굴림;">사용자와 전문가로부터 얻는 레이블<span lang="EN-US"> <o:p></o:p></span></span></p> <ul type="disc"> <ul type="disc"> <li class="MsoNormal" style="margin: 0cm 0cm 0pt; vertical-align: middle; color: black;"><span style="font-family: 굴림;"><font size="2">쉽게 얻을 수 없는 정보로서 레이블링에 대한 최고의 정보원이다<span lang="EN-US">. <o:p></o:p></span></font></span></li> <li class="MsoNormal" style="margin: 0cm 0cm 0pt; vertical-align: middle; color: black;"><span style="font-family: 굴림;"><font size="2">검색식 분석을 통해 사용자들이 일반적으로 사용하는 레이블들의 종류를 알 수 있다<span lang="EN-US">. <o:p></o:p></span></font></span></li> <li class="MsoNormal" style="margin: 0cm 0cm 0pt; vertical-align: middle; color: black;"><span style="font-family: 굴림;"><font size="2">사용자들의 정보 요구에 익숙하고<span lang="EN-US">, </span>사용자들의 이익을 대변해 줄 수 있는 도서관 사서나 전화 교환원<span lang="EN-US">, </span>또는 정보 전문가들로부터 도움을 받을 수 있다<span lang="EN-US">. <o:p></o:p></span></font></span></li> <li class="MsoNormal" style="margin: 0cm 0cm 0pt; vertical-align: middle; color: black;"><span style="font-family: 굴림;"><font size="2">비결은 사용자들이 원하는 정보의 종류에 대해서 잘 아는 사람들과 함께 일하는 것이다<span lang="EN-US"> <o:p></o:p></span></font></span></li></ul></ul> <p style="margin: 0cm 0cm 0pt; vertical-align: middle; text-align: justify;"><span style="font-size: 10pt; color: black; font-family: 굴림;" lang="EN-US"> <o:p></o:p></span></p> <h3 style="margin: auto 0cm; vertical-align: middle; text-align: justify;"><span style="color: black; font-family: 굴림;" lang="EN-US">5. </span><span style="color: black; font-family: 굴림;">레이블링 시스템 꾸미기<span lang="EN-US"><o:p></o:p></span></span></h3> <p style="margin: 0cm 0cm 0pt 36pt; vertical-align: middle; text-align: justify;"><span style="font-size: 10pt; color: black; font-family: 굴림;">가<span lang="EN-US">. </span>레이블링의 기초<span lang="EN-US"><br> 1) </span>용어들을 알파벳순으로 정리할 필요가 있다<span lang="EN-US">.<br> 2) </span>어법이나 구두점<span lang="EN-US">, </span>대소문자 사용 등의 일관성을 유지하기 위해 목록을 세밀<span lang="EN-US"><br> </span>하게 살펴볼 필요가 있다<span lang="EN-US">.<br> 3) </span>가능한 한 레이블들을 구체적으로 기술할 수 있도록 만들고<span lang="EN-US">, </span>다른 것들과<span lang="EN-US"> <br> </span>차별화하도록 노력해야 한다<span lang="EN-US"><o:p></o:p></span></span></p> <p style="margin: 0cm 0cm 0pt 36pt; vertical-align: middle; text-align: justify;"><span style="font-size: 10pt; color: black; font-family: 굴림;">나<span lang="EN-US">. </span>레이블링 시스템의 범주와 규모<span lang="EN-US"><br> 1) </span>어떤 용어를 포함할 것이지는 얼마나 크고 방대한 레이블링 시스템이 필요<span lang="EN-US"><br> </span>한 상황인지를 고려해서 결정해야 한다<span lang="EN-US">.<br> 2) </span>전체 웹 사이트의 계획과 레이블링 시스템이 완수해야 할 목표 사이의 균형<span lang="EN-US"><br> </span>을 유지해야 한다<span lang="EN-US">.<br> 3) </span>레이블링 시스템의 전체적인 크기를 고려해야 한다<span lang="EN-US">.<br> 4) </span>레이블링 시스템의 적절한 수준의 분도<span lang="EN-US">(</span>分度<span lang="EN-US">)</span>가 필요하다<span lang="EN-US">.<br> * </span>분도란 사이트의 컨텐트를 확인하거나 레이블링하는데 있어 어느 정도로<span lang="EN-US"> <br> </span>구체적이기를 원하는 가에 대해 지시하는 것을 말한다<span lang="EN-US">.<o:p></o:p></span></span></p> <p style="margin: 0cm 0cm 0pt; vertical-align: middle; text-align: justify;"><span style="font-size: 10pt; color: black; font-family: 굴림;" lang="EN-US"> <o:p></o:p></span></p> <h3 style="margin: auto 0cm; vertical-align: middle; text-align: justify;"><span style="color: black; font-family: 굴림;" lang="EN-US">6. </span><span style="color: black; font-family: 굴림;">비 설명형 레이블링 시스템<span lang="EN-US"><o:p></o:p></span></span></h3> <p style="margin: 0cm 0cm 0pt; vertical-align: middle; text-align: justify;"><span style="font-size: 10pt; color: black; font-family: 굴림;">레이블링 시스템들이 반드시 구체적인 필요는 없다<span lang="EN-US">.<o:p></o:p></span></span></p> <p style="margin: 0cm 0cm 0pt 36pt; vertical-align: middle; text-align: justify;"><span style="font-size: 10pt; color: black; font-family: 굴림;">가<span lang="EN-US">. </span>궁금증 유발<span lang="EN-US"> <o:p></o:p></span></span></p> <ul type="disc"> <ul type="disc"> <li class="MsoNormal" style="margin: 0cm 0cm 0pt; vertical-align: middle; color: black;"><span style="font-family: 굴림;"><font size="2">인식할 수 있는 혼란은 어느 정도 좋은 면도 있다<span lang="EN-US">. <o:p></o:p></span></font></span></li></ul></ul> <p style="margin: 0cm 0cm 0pt 36pt; vertical-align: middle; text-align: justify;"><span style="font-size: 10pt; color: black; font-family: 굴림;">나<span lang="EN-US">. </span>아이콘 사용 시기<span lang="EN-US"> <o:p></o:p></span></span></p> <ul type="disc"> <ul type="disc"> <li class="MsoNormal" style="margin: 0cm 0cm 0pt; vertical-align: middle; color: black;"><span style="font-family: 굴림;"><font size="2">사용자들에게 재미를 주기 위해 사용한다<span lang="EN-US">. <o:p></o:p></span></font></span></li></ul></ul> <p style="margin: 0cm 0cm 0pt; vertical-align: middle; text-align: justify;"><span style="font-size: 10pt; color: black; font-family: 굴림;" lang="EN-US"> <o:p></o:p></span></p> <h3 style="margin: auto 0cm; vertical-align: middle; text-align: justify;"><span style="color: black; font-family: 굴림;" lang="EN-US">7. </span><span style="color: black; font-family: 굴림;">이중의 어려움<span lang="EN-US"><o:p></o:p></span></span></h3> <ul type="disc"> <li class="MsoNormal" style="margin: 0cm 0cm 0pt; vertical-align: middle; color: black;"><span style="font-family: 굴림;"><font size="2">일반적으로 구조 체계와 네비게이션 시스템이 잘 구축되어 있는 경우<span lang="EN-US">, </span>레이블링 시스템들은 간혹 무시되는 경향이 많다<span lang="EN-US">. <o:p></o:p></span></font></span></li> <li class="MsoNormal" style="margin: 0cm 0cm 0pt; vertical-align: middle; color: black;"><span style="font-family: 굴림;"><font size="2">과제<span lang="EN-US"> <o:p></o:p></span></font></span></li> <ul type="disc"> <li class="MsoNormal" style="margin: 0cm 0cm 0pt; vertical-align: middle; color: black;"><span style="font-family: 굴림;"><font size="2">레이블로서 사용자들이 사용하는 것과 같은 언어를 사용하라<span lang="EN-US">. <o:p></o:p></span></font></span></li> <li class="MsoNormal" style="margin: 0cm 0cm 0pt; vertical-align: middle; color: black;"><span style="font-family: 굴림;"><font size="2">언어를 일관되게 사용하라<span lang="EN-US">. <o:p></o:p></span></font></span></li></ul> <li class="MsoNormal" style="margin: 0cm 0cm 0pt; vertical-align: middle; color: black;"><span style="font-family: 굴림;"><font size="2">시스템에서 사용되는 레이블에서<span lang="EN-US">, </span>그 레이블들은 특징짓는 편집 스타일에서<span lang="EN-US">, </span>그 레이블들에서 다루는 컨텐트의 분류 정도에서 일관성이 유지되는 시스템을 디자인하려고 노력해야 한다<span lang="EN-US">.<o:p></o:p></span></font></span></li></ul> <p class="MsoNormal" style="margin: 0cm 0cm 0pt;"><span style="font-family: 굴림;" lang="EN-US"><o:p><font size="2"> </font></o:p></span></p></p> </div> <!-- file --> <div id="filedown"> <h5 id="coment"><i class="fa fa-download" style="padding-top:7px;"></i>  다운로드</h5> </div> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- BBS 2023_contents_view_bottom --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5872755248064154" data-ad-slot="1109507906" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <a href="/v7/?m=upload&a=download&uid=2155" title="웹사이트기획 및 구축 시 고려하여야 할 정보구조설계"> <span class="file-name"> [049] 웹_사이트_기획_및_구축시_고려_하여야할_정보_구조_설계.doc (94.5KB)</span> <br /><br /> </a> <a href="/v7/?m=upload&a=download&uid=2156" title="웹사이트기획 및 구축 시 고려하여야 할 정보구조설계"> <span class="file-name"> ia_webplanning.jpg (78KB)</span> <br /><br /> </a> <!-- file --> <!-- Tag --> <!-- Tag --> <!-- 하단 추천 버튼 --> <div class="product"> <div class="p-info"> <div class="p-action" style="padding:20px 0 30px 300px;"> <a href="/v7/?m=bbs&bid=paper&cat=%EC%82%AC%EC%9D%B4%ED%8A%B8%EA%B8%B0%ED%9A%8D%EC%84%9C&a=score&value=good&uid=2153" class="add-to-cart200" target="_action_frame_bbs" onclick="return confirm('이 자료를 추천 하시겠습니까?');" title="좋아요 2" style="border-radius: 10px;"> <i class="far fa-thumbs-up" style="padding-top:7px;color:#f54b31;">  </i>좋아요  <font color="red">2</font> </a> <a onclick="snsWin('f');" title="페이스북에 올리기" class="quickview" style="border-radius: 10px;"> <i class="fab fa-facebook-f" style="padding-top:9px;color:#3b5998;"></i> <span>페이스북에 공유하기</span> </a> <a onclick="snsWin('t');" title="트위터에 올리기" class="quickview" style="border-radius: 10px;"> <i class="fab fa-twitter" style="padding-top:9px;color:#1da1f2;"></i> <span>트위터에 공유하기</span> </a> </div> </div> </div> <!-- 하단 추천 버튼 --> <!-- comment --> <div id="comment"> <h5 id="comment" style="margin-bottom:-20px;"><i class="far fa-comment"></i>  의견 <font color="#f54b31">1</font> <span style="float:right;margin-bottom:10px;"> <a onclick="alert('로그인 후 등록 하실 수 있습니다. ');" /><i class="fa fa-pencil-square-o" style="padding-right:0px;"></i> 자료등록</a>      <a href="./?m=bbs&bid=paper"><i class="fa fa-list" style="padding-right:2px;"></i> 목록</a> </span> </h5> <iframe name="commentFrame" id="commentFrame" src="/v7/?r=plan&m=comment&skin=&hidepost=0&iframe=Y&cync=[bbs][2153][uid,comment,oneline,d_comment][v7_bbs_data][3393][m:bbs,bid:paper,uid:2153]&CMT=" width="100%" frameborder="0" scrolling="no" allowTransparency="true"></iframe> </div> <!-- // comment --> </div><!-- .col-md-12 --> </div><!-- .row --> </div><!-- .col-md-9 --> <div class="col-md-2 col-sm-12 col-xs-12"> <aside class="widget widget_categories"> <h3 class="widget-title" style="font-family: 'Noto Sans KR', sans-serif;letter-spacing:0px;"><a href="./?m=bbs&bid=paper">분류 (586)</a></h3> <ul> <li class="cat-item"><a href="/v7/?m=bbs&bid=paper&cat=%EC%82%AC%EC%9D%B4%ED%8A%B8%EA%B8%B0%ED%9A%8D%EC%84%9C&cat=작성법/템플릿"> <i class="fas fa-angle-right" style="font-size:10px;"></i> 작성법/템플릿<!--작성법/템플릿--> <span class="count pull-right">17</span></a></li> <li class="cat-item"><a href="/v7/?m=bbs&bid=paper&cat=%EC%82%AC%EC%9D%B4%ED%8A%B8%EA%B8%B0%ED%9A%8D%EC%84%9C&cat=사이트기획서" style="color:#f54b31;"> <i class="fas fa-angle-right" style="font-size:10px;"></i> 사이트기획서<!--사이트기획서--> <span class="count pull-right">88</span></a></li> <li class="cat-item"><a href="/v7/?m=bbs&bid=paper&cat=%EC%82%AC%EC%9D%B4%ED%8A%B8%EA%B8%B0%ED%9A%8D%EC%84%9C&cat=서비스기획서"> <i class="fas fa-angle-right" style="font-size:10px;"></i> 서비스기획서<!--서비스기획서--> <span class="count pull-right">36</span></a></li> <li class="cat-item"><a href="/v7/?m=bbs&bid=paper&cat=%EC%82%AC%EC%9D%B4%ED%8A%B8%EA%B8%B0%ED%9A%8D%EC%84%9C&cat=UIUX"> <i class="fas fa-angle-right" style="font-size:10px;"></i> UIUX<!--UIUX--> <span class="count pull-right">10</span></a></li> <li class="cat-item"><a href="/v7/?m=bbs&bid=paper&cat=%EC%82%AC%EC%9D%B4%ED%8A%B8%EA%B8%B0%ED%9A%8D%EC%84%9C&cat=마케팅기획서"> <i class="fas fa-angle-right" style="font-size:10px;"></i> 마케팅기획서<!--마케팅기획서--> <span class="count pull-right">86</span></a></li> <li class="cat-item"><a href="/v7/?m=bbs&bid=paper&cat=%EC%82%AC%EC%9D%B4%ED%8A%B8%EA%B8%B0%ED%9A%8D%EC%84%9C&cat=광고기획서"> <i class="fas fa-angle-right" style="font-size:10px;"></i> 광고기획서<!--광고기획서--> <span class="count pull-right">15</span></a></li> <li class="cat-item"><a href="/v7/?m=bbs&bid=paper&cat=%EC%82%AC%EC%9D%B4%ED%8A%B8%EA%B8%B0%ED%9A%8D%EC%84%9C&cat=제품기획서"> <i class="fas fa-angle-right" style="font-size:10px;"></i> 제품기획서<!--제품기획서--> <span class="count pull-right">12</span></a></li> <li class="cat-item"><a href="/v7/?m=bbs&bid=paper&cat=%EC%82%AC%EC%9D%B4%ED%8A%B8%EA%B8%B0%ED%9A%8D%EC%84%9C&cat=기타"> <i class="fas fa-angle-right" style="font-size:10px;"></i> 기타<!--기타--> <span class="count pull-right">39</span></a></li> </ul> </aside> <aside class="widget wr_widget_recent_posts"> <h3 class="widget-title">신규 업데이트</h3> <div class="widget-post-slider navtop"> <div class="post-slider-wrap"> <div class="post-item"> <!--<img src="https://itlab.co.kr/v7/_var/simbol/180.gif" width="50" height="50"> --> <div class="wrp-meta"> <a href="./?m=bbs&bid=paper&uid=29888">증권형 크라우드펀딩 표준업무방법</a> <span class="price">압쥐</span> </div> </div> <div class="post-item"> <!--<img src="https://itlab.co.kr/v7/_var/simbol/180.gif" width="50" height="50"> --> <div class="wrp-meta"> <a href="./?m=bbs&bid=paper&uid=29887">크라우드 펀딩(투자, 대출) 관</a> <span class="price">압쥐</span> </div> </div> <div class="post-item"> <!--<img src="https://itlab.co.kr/v7/_var/simbol/180.gif" width="50" height="50"> --> <div class="wrp-meta"> <a href="./?m=bbs&bid=paper&uid=29886">서울시 협동조합 사례집</a> <span class="price">압쥐</span> </div> </div> <div class="post-item"> <!--<img src="https://itlab.co.kr/v7/_var/simbol/180.gif" width="50" height="50"> --> <div class="wrp-meta"> <a href="./?m=bbs&bid=paper&uid=29885">4차산업혁명과 창업(강의)</a> <span class="price">압쥐</span> </div> </div> <div class="post-item"> <!--<img src="https://itlab.co.kr/v7/_var/simbol/180.gif" width="50" height="50"> --> <div class="wrp-meta"> <a href="./?m=bbs&bid=paper&uid=29810">시니어쇼핑몰 배경제안서</a> <span class="price"></span> </div> </div> <div class="post-item"> <!--<img src="https://itlab.co.kr/v7/_var/simbol/180.gif" width="50" height="50"> --> <div class="wrp-meta"> <a href="./?m=bbs&bid=paper&uid=29777">사업기획서</a> <span class="price">메타몽</span> </div> </div> <div class="post-item"> <!--<img src="https://itlab.co.kr/v7/_var/simbol/180.gif" width="50" height="50"> --> <div class="wrp-meta"> <a href="./?m=bbs&bid=paper&uid=29580">쇼핑몰 서비스 플로우</a> <span class="price">대효니</span> </div> </div> <div class="post-item"> <!--<img src="https://itlab.co.kr/v7/_var/simbol/180.gif" width="50" height="50"> --> <div class="wrp-meta"> <a href="./?m=bbs&bid=paper&uid=29579">쇼핑몰 IA</a> <span class="price">대효니</span> </div> </div> <div class="post-item"> <!--<img src="https://itlab.co.kr/v7/_var/simbol/180.gif" width="50" height="50"> --> <div class="wrp-meta"> <a href="./?m=bbs&bid=paper&uid=29471">Confirmation Lett</a> <span class="price"></span> </div> </div> <div class="post-item"> <!--<img src="https://itlab.co.kr/v7/_var/simbol/180.gif" width="50" height="50"> --> <div class="wrp-meta"> <a href="./?m=bbs&bid=paper&uid=29396">회원정책</a> <span class="price">너뮤</span> </div> </div> </div> </div> </aside> </div><!-- .col-md-3 --> </div><!-- .row --> </div><!-- .container --> </div><!-- .shop-cart --> </div><!-- #site-main --> <script type="text/javascript"> //<![CDATA[ function snsWin(sns) { var snsset = new Array(); var enc_tit = "%EC%95%84%EC%9D%B4%ED%8B%B0%EB%9E%A9"; var enc_sbj = "%EC%9B%B9%EC%82%AC%EC%9D%B4%ED%8A%B8%EA%B8%B0%ED%9A%8D+%EB%B0%8F+%EA%B5%AC%EC%B6%95+%EC%8B%9C+%EA%B3%A0%EB%A0%A4%ED%95%98%EC%97%AC%EC%95%BC+%ED%95%A0+%EC%A0%95%EB%B3%B4%EA%B5%AC%EC%A1%B0%EC%84%A4%EA%B3%84"; var enc_url = "https%3A%2F%2Fitlab.co.kr%2Fv7%2F%3Fm%3Dbbs%26bid%3Dpaper%26uid%3D2153"; var enc_tag = ""; snsset['t'] = 'http://twitter.com/home/?status=' + enc_sbj + '+++' + enc_url; snsset['f'] = 'http://www.facebook.com/sharer.php?u=' + enc_url + '&t=' + enc_sbj; snsset['m'] = 'http://me2day.net/posts/new?new_post[body]=' + enc_sbj + '+++["'+enc_tit+'":' + enc_url + '+]&new_post[tags]='+enc_tag; snsset['y'] = 'http://yozm.daum.net/api/popup/prePost?sourceid=' + enc_url + '&prefix=' + enc_sbj; window.open(snsset[sns]); } function printWindow(url) { window.open(url,'printw','left=0,top=0,width=700px,height=600px,statusbar=no,scrollbars=yes,toolbar=yes'); } function commentShow(type) { var url; if (type == 'comment') { url = '/v7/?r=plan&m=comment&skin=&hidepost=0&iframe=Y&cync='; url+= '[bbs][2153]'; url+= '[uid,comment,oneline,d_comment]'; url+= '[v7_bbs_data][3393]'; url+= '[m:bbs,bid:paper,uid:2153]'; url+= '&CMT='; } else { url = '/v7/?r=plan&m=trackback&iframe=Y&cync='; url+= '[bbs][2153]'; url+= '[m:bbs,bid:paper,uid:2153]'; url+= '&TBK='; } frames.commentFrame.location.href = url; } function setImgSizeSetting() { var ofs = getOfs(getId('vContent')); getDivWidth(ofs.width,'vContent'); getId('vContent').style.fontFamily = getCookie('myFontFamily'); getId('vContent').style.fontSize = getCookie('myFontSize'); } window.onload = setImgSizeSetting; //]]> </script> </div> </div> <!--Start of Zopim Live Chat Script--> <div id="site-footer" class="v1"> <div class="bot"> <div class="bot-top"> <div class="container"> <div id="membersPic"> <style> #membersPic {padding:0;clear:both;} #membersPic h2 {font-family:"malgun gothic";font-weight:bold;font-size:22px;padding:0 0 15px 0;margin:0;border-bottom:#cccccc solid 0px;} #membersPic h3 {font-size:13px;font-family:"malgun gothic",gothic,dotum;padding:0 0 20px 0;margin:0;color:#178AFF;} #membersPic .writebox {text-align:right;position:relative;top:-40px;} #membersPic .guide {line-height:150%;margin-bottom:20px;font-size:14px;font-family:"malgun gothic";} #membersPic .title h6 {padding:20px 0 9px 0;margin:0;font-weight:bold;font-family:"gothic","dotum";font-size:13px;color:#384799;} #membersPic .title h6 a {color:#384799;} #membersPic .total {text-align:left;line-height:150%;margin:5px 5px; 10px 0;color:#333;font-size:11px;font-family:"malgun gothic";} #membersPic .mphoto {padding:0px 0px 22px 0px;margin-top:-10px;} #membersPic .mphoto .photo {float:left;width:44.8px;height:46px;margin:1px;padding:0px;border:#dfdfdf solid 0px;} #membersPic .mphoto .photo img {width:44px;height:46px;padding:0px;margin:0px;cursor:pointer;} #membersPic .mphoto .photo:hover {border:#111 solid 1px;} </style> <div class="total" style="text-align:center"> * 현재 <span style="font-weight:bold;color:#000000;">142,419명</span>의 회원이 활동중이며, 최근 <span class="b">56명</span> (어제<span class="b">3명</span>, 오늘<span class="b">2명</span>)이 새롭게 참여하였습니다. <!--photo<>''--> </div> <div class="writebox"></div> <!--<h3>New Members</h3>--> <div class="mphoto"> <br /> <div class="photo" style="background:url('/v7/_var/simbol/jjim.jpg') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="김철금님( 10)" onclick="getMemberLayer('1',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/k2h31004.jpg') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="김경희님( 1)" onclick="getMemberLayer('41816',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/chaeng.jpg') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="홍채형님( 1)" onclick="getMemberLayer('31562',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/lsh880614.jpg') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="이상훈님( 1)" onclick="getMemberLayer('40679',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/aoop9954.png') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="임준희님( 1)" onclick="getMemberLayer('41938',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/ryong.jpg') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="하성용님( 1)" onclick="getMemberLayer('42463',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/larva147.jpg') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="이현정님( 1)" onclick="getMemberLayer('34222',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/aihw.png') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="신희원님( 2)" onclick="getMemberLayer('42444',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/mooders.jpg') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="이선도님( 1)" onclick="getMemberLayer('41992',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/joedebb1.png') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="박지선님( 1)" onclick="getMemberLayer('39788',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/itlab.jpg') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="ITLAB님( 1)" onclick="getMemberLayer('23425',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/spaceljh.jpg') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="임준환님( 1)" onclick="getMemberLayer('40552',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/skdud1249.png') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="위하연님( 1)" onclick="getMemberLayer('42390',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/alineyu.jpg') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="유아린님( 1)" onclick="getMemberLayer('41697',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/bibaram.jpg') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="황인범님( 1)" onclick="getMemberLayer('23529',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/hihihoo.png') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="이학준님( 1)" onclick="getMemberLayer('41608',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/misun18627.jpg') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="심미선님( 1)" onclick="getMemberLayer('42265',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/ruddk0726.jpg') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="김경아님( 1)" onclick="getMemberLayer('40101',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/szoo486.jpg') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="이연주님( 2)" onclick="getMemberLayer('39233',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/hisoyoung87.png') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="김소영님( 1)" onclick="getMemberLayer('42175',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/ohhyejin97.png') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="오혜진님( 1)" onclick="getMemberLayer('40733',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/maclee.jpg') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="이상도님( 1)" onclick="getMemberLayer('42154',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/hyowon222.jpg') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="서효원님( 1)" onclick="getMemberLayer('42144',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/tank78l2.jpg') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="이종철님( 1)" onclick="getMemberLayer('41520',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/yal623.png') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="이야엘님( 4)" onclick="getMemberLayer('40751',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/tlsgml201.jpg') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="정신희님( 1)" onclick="getMemberLayer('42046',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/enyou2.jpg') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="최지민님( 1)" onclick="getMemberLayer('42051',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/corea39.png') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="황승구님( 3)" onclick="getMemberLayer('39256',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/rod280.jpg') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="노경민님( 1)" onclick="getMemberLayer('33471',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/me2u0.png') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="김다은님( 1)" onclick="getMemberLayer('42026',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/kto5294.jpg') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="김태욱님( 1)" onclick="getMemberLayer('41963',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/smsmeee.png') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="이선민님( 1)" onclick="getMemberLayer('41971',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/sdi9429.png') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="송대일님( 1)" onclick="getMemberLayer('41532',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/facey.jpg') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="조성용님( 1)" onclick="getMemberLayer('41954',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/hyans9291.jpg') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="양희영님( 1)" onclick="getMemberLayer('41928',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/gooddark.jpg') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="김진택님( 1)" onclick="getMemberLayer('36828',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/trustfly.jpg') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="유현진님( 1)" onclick="getMemberLayer('41880',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/gksmfskfk.jpg') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="이미루님( 1)" onclick="getMemberLayer('41802',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/jinnie.jpg') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="황세진님( 3)" onclick="getMemberLayer('39696',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/hyeseo625.jpg') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="이혜서님( 1)" onclick="getMemberLayer('41784',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/developer.png') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="최원님( 1)" onclick="getMemberLayer('41592',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/qnd106.png') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="장보금님( 1)" onclick="getMemberLayer('41730',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/somteal112.jpg') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="백재희님( 1)" onclick="getMemberLayer('41719',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/m023611.jpg') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="서혜민님( 5)" onclick="getMemberLayer('20709',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/sujin3019.jpg') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="장수진님( 1)" onclick="getMemberLayer('41690',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/dustjrnl.jpg') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="이민정님( 1)" onclick="getMemberLayer('40120',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/kimseeyea.png') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="김종열님( 1)" onclick="getMemberLayer('41662',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/kosquare.jpg') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="최상흠님( 5)" onclick="getMemberLayer('3614',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/zerazinxxx88.jpg') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="손영진님( 1)" onclick="getMemberLayer('41651',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/soulofpure.png') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="김종인님( 1)" onclick="getMemberLayer('41543',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/seul777s.png') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="이슬아님( 1)" onclick="getMemberLayer('41114',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/pssoy0821.jpg') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="박소영님( 1)" onclick="getMemberLayer('40652',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/aaihc.png') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="정다운님( 1)" onclick="getMemberLayer('41516',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/caorn.png') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="남대현님( 3)" onclick="getMemberLayer('29592',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/daniel7ys.jpg') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="정예성님( 1)" onclick="getMemberLayer('41450',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/sy323.png') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="민서영님( 1)" onclick="getMemberLayer('41440',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/minryuha.jpg') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="박하륜님( 1)" onclick="getMemberLayer('41406',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/loyji1914.jpg') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="지창규님( 1)" onclick="getMemberLayer('41375',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/ehdalsgpgp.png') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="설동민님( 1)" onclick="getMemberLayer('41398',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/kids2loopers.png') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="백재은님( 1)" onclick="getMemberLayer('41395',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/lkw8502.png') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="이기웅님( 1)" onclick="getMemberLayer('41376',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/jdss7430.png') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="장재원님( 1)" onclick="getMemberLayer('41355',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/bababebe.jpg') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="이지희님( 1)" onclick="getMemberLayer('41258',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/passmen.png') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="유태성님( 1)" onclick="getMemberLayer('32100',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/yeoinne.jpg') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="김소희님( 1)" onclick="getMemberLayer('40604',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/snickers0909.jpg') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="이명구님( 1)" onclick="getMemberLayer('27658',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/gpqls0611.jpg') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="안혜빈님( 1)" onclick="getMemberLayer('41299',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/lieuk.png') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="정리나님( 1)" onclick="getMemberLayer('41288',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/etj1924.jpg') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="엄태진님( 1)" onclick="getMemberLayer('41267',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/xtras80.jpg') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="차현주님( 1)" onclick="getMemberLayer('31893',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/gmood.jpg') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="곽경아님( 1)" onclick="getMemberLayer('32668',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/clarinsk.jpg') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="곽훈님( 1)" onclick="getMemberLayer('32889',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/jongdori.jpg') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="김종석님( 1)" onclick="getMemberLayer('41155',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/pjwwjddn.jpg') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="박정우님( 1)" onclick="getMemberLayer('41145',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/chj3933.jpg') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="최혜재님( 1)" onclick="getMemberLayer('41060',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/leehana08.jpg') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="이홍원님( 1)" onclick="getMemberLayer('39872',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/korea625.jpg') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="이광진님( 1)" onclick="getMemberLayer('35815',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/joon2b1.png') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="황재준님( 1)" onclick="getMemberLayer('31170',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/woo01223.jpg') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="고주희님( 1)" onclick="getMemberLayer('37791',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/jek1994.jpg') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="강지은님( 1)" onclick="getMemberLayer('41002',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/kokyc.png') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="권용창님( 1)" onclick="getMemberLayer('38820',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/fcchadol.jpg') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="전병성님( 1)" onclick="getMemberLayer('40767',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/syoungin21.jpg') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="서영인님( 1)" onclick="getMemberLayer('5420',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/jeje2001.jpg') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="임진우님( 1)" onclick="getMemberLayer('40426',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/sasimi0617.jpg') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="sasimi0617님( 1)" onclick="getMemberLayer('40497',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/ianel03.png') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="한은총님( 1)" onclick="getMemberLayer('40823',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/wjwj5.jpg') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="김우준님( 1)" onclick="getMemberLayer('39714',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/bakyo128.png') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="박효정님( 1)" onclick="getMemberLayer('40700',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/ibaram.png') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="이루다님( 2)" onclick="getMemberLayer('40343',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/hellosh52.png') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="김신희님( 1)" onclick="getMemberLayer('40746',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/jkingdom.jpg') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="진현구님( 1)" onclick="getMemberLayer('40728',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/rntaos77.png') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="최원혁님( 1)" onclick="getMemberLayer('40709',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/mjy7026.jpg') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="문지영님( 1)" onclick="getMemberLayer('40659',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/azaz1997.png') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="강동원님( 1)" onclick="getMemberLayer('40439',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/hanggare.jpg') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="조성은님( 1)" onclick="getMemberLayer('26405',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/mshopper.jpg') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="정원효님( 2)" onclick="getMemberLayer('40633',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/2leady.jpg') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="김진완님( 1)" onclick="getMemberLayer('40391',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/sproutling.jpg') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="김남희님( 4)" onclick="getMemberLayer('27797',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/eusl534.jpg') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="김다연님( 1)" onclick="getMemberLayer('40527',event);" /></div><div class="photo" style="background:url('/v7/_var/simbol/zzangdouel.jpg') center center no-repeat #fff;"><img src="/v7/_core/image/blank.gif" alt="" title="장호주님( 1)" onclick="getMemberLayer('40490',event);" /></div> <div class="clear"></div> </div> </div> </div> </div><!-- .bot-top --> <div class="bot-main"> <div class="container"> <nav id="footer-menu"> <ul class="menu"> <li class="menu-item"><a href="#">회사소개</a></li> <li class="menu-item"><a href="./?mod=agreement">서비스이용약관</a></li> <li class="menu-item"><a href="./?mod=private" style="font-family:malgun-gothic">개인정보취급방침</a></li> <li class="menu-item"><a href="./?mod=postrule">게시물게재원칙</a></li> <li class="menu-item"><a href="./?m=bbs&bid=notice">Help</a></li> <li class="menu-item"><a href="./?m=bbs&bid=help">Q/A</a></li> <li class="menu-item"><a href="http://www.itlab.co.kr" target="_blank">About Us</a></li> <li class="menu-item"><a href="mainto:iron@itlab.co.kr">Contact Us</a></li> </ul> </nav> <nav id="footer-menu"> <ul class="menu"> <li class="menu-item"><font style="font-size:11px;"> (주)아이티랩  서울특별시 성동구 상원1길 25, 4244호 (성수동1가, SOL623빌딩)  Tel.070.8867.7788  Fax.02.6455.6465<br> 사업자등록번호 261-81-05327  통신판매업신고 2014-서울강남-00228  개인정보관리책임 김철금 메일 itlab@itlab.co.kr</font></li> </ul> </nav> <div class="site-info"> <p>since 2008 © ITLAB · Powerd by <b><a target="_blank" href="http://www.itlab.co.kr">ITLab Corp</b> - www.<b>itlab</b>.co.kr</a></p> </div><!-- .site-info --> </div><!-- .container --> </div><!-- .bot-main --> </div><!-- .bot --> </div><!-- #site-footer --> </div><!-- .wrapper --> <div class="modal fade newsletter"> <div class="modal-dialog"> <div class="modal-content"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <div class="modal-body text-center"> <h4>NEWSLETTER SIGN UP</h4> <p>Would you like to be one of the first to receive exclusive information about the latest collections, offers and events from this online shop? Then just subscribe to our free newsletter now.</p> <form class="form-inline subscribe"> <div class="form-group"> <input type="email" placeholder="Please enter your mail address" class="form-control"> </div> <button class="btn btn-default" type="submit">Subscribe</button> </form> </div> </div><!-- .modal-content --> </div><!-- .modal-dialog --> </div><!-- .modal --> <!-- Modernizr custom --> <script src="../html/2/js/vendor/modernizr.custom.js"></script> <!-- jQuery core --> <script src="../html/2/js/vendor/jquery-1.11.2.min.js"></script> <!-- Bootstrap --> <script src="../html/2/js/vendor/bootstrap.min.js"></script> <!-- jQuery countdown --> <script src="../html/2/js/vendor/jquery.countdown.min.js"></script> <!-- Owl carousel --> <script src="../html/2/js/vendor/owl.carousel.min.js"></script> <!-- Slider revolution --> <script src="../html/2/js/vendor/jquery.themepunch.tools.min.js"></script> <script src="../html/2/js/vendor/jquery.themepunch.revolution.min.js"></script> <!-- dl menu --> <script src="../html/2/js/vendor/jquery.dlmenu.js"></script> <!-- Sticky menu --> <script src="../html/2/js/vendor/jquery.scrollfix.min.js"></script> <!-- Lightbox --> <script src="../html/2/js/vendor/jquery.lightbox.min.js"></script> <!-- Theme Options --> <script src="../html/2/js/theme-options.js"></script> <!-- Main scripts --> <script src="../html/2/js/functions.js"></script> <!-- Custom scripts --> <script> (function($) { "use strict"; /* [ Product slider ] - - - - - - - - - - - - - - - - - - - - */ $( '.product-slider' ).owlCarousel({ items : 3, itemsDesktop : [1366,3], itemsDesktopSmall : [980,3], itemsTablet: [768,3], itemsTabletSmall: false, itemsMobile : [479,1], pagination : false, navigation : true, navigationText: [ "<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>" ] }); /* [ Product countdown ] - - - - - - - - - - - - - - - - - - - - */ $('.product .p-countdown').countdown('2015/09/04', function(event) { var $this = $(this).html( event.strftime('' + '<span>%d<span>days</span></span>' + '<span>%H<span>hours</span></span>' + '<span>%M<span>minutes</span></span>' + '<span>%S<span>seconds</span></span>' )); }); /* [ Rev slider ] - - - - - - - - - - - - - - - - - - - - */ var revapi; revapi = $('.tp-banner').revolution({ dottedOverlay:"none", delay:3000, startwidth:570, startheight:480, hideThumbs:200, thumbWidth:100, thumbHeight:50, thumbAmount:3, simplifyAll:"off", navigationType:"none", navigationArrows:"solo", navigationStyle:"round", touchenabled:"on", onHoverStop:"on", nextSlideOnWindowFocus:"off", swipe_threshold: 75, swipe_min_touches: 1, drag_block_vertical: false, keyboardNavigation:"off", navigationHAlign:"center", navigationVAlign:"bottom", navigationHOffset:0, navigationVOffset:20, soloArrowLeftHalign:"left", soloArrowLeftValign:"center", soloArrowLeftHOffset:0, soloArrowLeftVOffset:0, soloArrowRightHalign:"right", soloArrowRightValign:"center", soloArrowRightHOffset:0, soloArrowRightVOffset:0, shadow:0, fullWidth:"on", fullScreen:"off", spinner:"spinner0", stopLoop:"off", stopAfterLoops:-1, stopAtSlide:-1, shuffle:"off", autoHeight:"off", forceFullWidth:"off", hideTimerBar:"on", hideThumbsOnMobile:"off", hideNavDelayOnMobile:1500, hideBulletsOnMobile:"off", hideArrowsOnMobile:"off", hideThumbsUnderResolution:0, hideSliderAtLimit:0, hideCaptionAtLimit:0, hideAllCaptionAtLilmit:0, startWithSlide:0 }); })(jQuery); </script> <!-- 구글 아날라스틱 --> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-91249631-1', 'auto'); ga('send', 'pageview'); </script> </body> </html> <div id="_box_layer_"></div> <div id="_action_layer_"></div> <div id="_hidden_layer_"></div> <div id="_overLayer_" class="hide"></div> <iframe name="_action_frame_bbs" width="0" height="0" frameborder="0" scrolling="no"></iframe> <script type="text/javascript"> //<![CDATA[ document.body.onclick = closeMemberLayer; document.onkeydown = closeImgLayer; //]]> </script> </body> </html>