웹 사이트 개발

[hotlip]

I.웹 사이트 개발

1. 시스템분석 단계

1)비즈니스 모델 수립 : 사업하려는 상품이 무엇인지, 판매대상을 누구로 할 것인지 결정
2)사업 전략 수립 : 취급상품과 판매 대상이 정해지면 사업 전략에 따른 적절한 전략 수립
3)마케팅 전략 수립 : 마케팅 전략은 정확한 마케팅 광고 계획을 수립하고, 판매촉진 전략을
수립하며, 이를 통해 확보된 고객을 효과적으로 관리하는 방안을 구체적으로 작성
4)시장 조사 : 비즈니스 모형에서 설정한 목표고객이 어느 정도 시장구매력을 갖고 있는지,
팔려는 상품이 타 경쟁사에 의해 많은 시장 점유율을 빼앗기고 있지 않은 지를 조사

2. 시스템 설계 단계

1)내용 설계
가. 개념
-내용이란 인터넷상에서 제공되는 정보를 말함
:사이트에 대한 설명, 업체의 경영이념, 상품 상세 정보, 이용약관 설명, 용어해설, 사이트맵
-정보들의 연관성이나 관계를 충실하게 제공하기 위한 설계를 내용설계라 함
나. 웹 페이지를 위한 내용설계
a. 텍스트 설계
-인터넷상의 고객들은 많은 시간을 소비하려 하지 않기 때문에 가급적 중요사항들은 앞부분에서 강조 함
-시간이 없는 고객들에게 해당 페이지를 클릭하지 않고도 전체 맥락을 이해할 수 있도록
중요한 단어에는 링크를 제공 함
-내용 설계에서 사용하는 문장은 간략하고 명확하게 표현하는 것이 좋음
-고객이 한 번에 볼 수 있는 화면은 제한되어 있기 때문에 너무 많은 링크를 사용하면
고객은 심리적인 부담감을 느끼게 되므로 적절한 링크사용 요망
b. 그래픽 설계
-그래픽을 지나치게 많이 사용할 경우 다운로드 시간이 오래 걸리게 되고, 결국 매출 감소로 이어지므로 그래픽 파일 크기를 줄여서 설계 함
-이미지의 의미 파악을 돕기 위해 문자로 된 설명 부착
-테이블의 크기는 최적의 레이아웃을 제공하기 의해서 한 화면에 들어갈 정도의 크기로
스크롤링을 하지 않고도 볼 수 있게 함
-한 화면에 너무 많은 내용들로 가득 채운다면 내용 파악이 어려우므로 적당히 채워 여백의 효과를 내도록 함
c. 메인 페이지 설계
-메인 페이지는 고객이 웹 사이트에 들어가 처음으로 방문하게 되는 페이지로, 해당 사이트에 대한 고객의 첫 인상을 결정짓기 때문에 특별히 신경을 써서 설계해야 함
-메인 페이지에 포함되어야 할 내용 : 상호, 업종, 사이트의 개설 목적, 영업방법, 미션 및 비전
다. 내용 설계의 대표적 방법 : 인덱스 카드법을 이용한 벤치마킹의 기법이 실무적으로 사용

2) 구조 설계
-내용의 조직화를 설계하는 단계 임
-전체적인 정보의 조직화를 의미하는 사이트 구조 설계와 개별 페이지내의 정보를 조직화
하는 페이지 구조 설계로 나눌 수 있음
3) 항해 설계
-인터넷상에서 상품을 구매하려는 고객이 자신의 목적에 맞는 상품을 찾을 수 있도록 항해
구조를 설계해야 함. 항해 구조란 고객이 이동할 수 있는 길을 의미하는 것으로, 하이퍼미디어시스템의 링크 구조를 의미 함
4) 화면 설계
-정해진 비즈니스 모델에 다라 내용, 구조, 항해를 설계한 후에는 설계된 사항을 기반으로
시스템의 겉모습을 디자인해야 함. 화면 설계에서는 문서의 레이아웃을 결정하고, 그 위에
그래픽 요소를 첨가하고, 페이지의 가독성을 평가한 후, 최종적으로 페이지의 바이트 수를
검토 함

3. 시스템 구현 단계

1) 지불과 배달
2) 정보 보안과 소비자 보호
3) 테스트

II. 컨텐츠의 설계

1. 컨텐츠의 개념
-컨텐츠란 웹 사이트를 통해 전달하고자 하는 정보와 내용을 의미함
-컨텐츠란 사이트의 관리자 입장에서는 사용자들에게 전달하고자 하는 내용이고, 사용자들을 웹 사이트로 끌어들이는 중요한 유인기제 임
-컨텐츠의 핵심은 무엇보다도 목적에 부합되어야 하고, 고객 지향적이어야 함
-전자상거래 사이트에서 컨텐츠는 수익을 올리기 위한 마케팅 활동과 같음

2.컨텐츠의 종류
(1) 컨텐츠의 형태에 따른 구분
-문자 컨텐츠, 음악 컨텐츠, 그래픽 컨텐츠, 동영상 컨텐츠, 소프트웨어 등
-문자 컨텐츠는 가장 기본이 되는 컨텐츠이며, 음악, 그래픽, 동영상 컨텐츠는 인터넷 회선
대역폭의 개선에 따라 각광받고 있는 컨텐츠 임
(2) 생성방식과 가변성에 따른 구분
-정적 컨텐츠 : 웹 사이트 구성 후 변경할 필요가 거의 없는 고정적인 컨텐츠로 회사소개나
연락처와 같은 컨텐츠 임
-동적 컨텐츠 : 신문사 사이트의 뉴스와 기사가 대표적인 동적 컨텐츠라 할 수 있음
-기능적 컨텐츠 : 사용자들과 사이트의 쌍방향적 트랜잭션에 의해 웹 프로그램이 생성하는
컨텐츠가 이에 속함

(3)컨텐츠 구축의 주체에 따른 구분
-서비스 컨텐츠 :웹 사이트를 제작한 측에서 제공하고 생산하는 컨텐츠 임
-사용자 참여 컨텐츠 : 사용자들의 입력과 참여를 통해 자발적으로 생성되는 컨텐츠 임
-외부 컨텐츠 : 외부의 컨텐츠 제공자들과의 협력을 통해 제공받는 컨텐츠 임. 이는 포탈
사이트와 같은 대형 사이트에서 채널의 형태로 표현 함

3. 컨텐츠의 기본요건

-방문자에게 정보를 체계적으로 엮어서 제공하는 중심적 역할을 수행해야 함
-일관성과 통일성을 유지해야 함
-모듈화가 이루어져야 함
-신뢰성 있는 정보이어야 함

4. 컨텐츠의 구체적 유형
(1) 내용 설계의 의미
-내용을 어떻게 제공할 것인가를 설계하는 과정 임
-사이트에 대한 설명, 용어해설, 사이트 맵 등 포함
-인터넷 비즈니스에서는 컨텐츠를 설계하는 것이 현실세계보다 훨씬 중요함
(2) 내용 설계의 절차
가. 내용 설계의 방법
-경쟁사의 철저한 분석이 선행, 실무적으로 적용하기에 매우 직관적이고 용이한 벤치
마킹을 이용하는 것이 적절함
나. 대상업체의 선정
-동일한 분야의 경쟁업체를 우선적으로 선정, 비즈니스 모델과 유사한 모범 업체
다. 인덱스(Index Card)카드 작성
-선정된 벤치마킹 대상업체들의 내용분류 및 분량파악 작업, 인덱스카드를 기록 함
라. 내용의 확정
-작성된 인덱스카드를 바탕으로 수정 및 추가사항을 보충한 뒤, 자신의 사이트에 필요한
내용을 하나씩 고려 함

5. 내용설계의 주요 이슈들
(1) 내용정보의 중요성
가. the more info syndrome : 고객이 온라인 상에 정보를 얻을 경우, 대부분 더 많은 정보를 원하는 경향을 의미하는 개념임. 이는 제품과 정보의 분리성에 의해 나타나는 현상으로
인터넷 비즈니스 환경에서의 내용(contents)설계는 현실세계의 내용설계보다 더 많은 연구와 노력이 필요하다. 따라서, 끊임없이 실행 및 설문조사를 반복하면서 지속적으로 업데이트
해야한다.
나. 단점을 장점으로 : 제품과 정보의 분리성인 단점을 극복하기 위해, 준거상품의 선정 및
고객 지향적인 상호비교정보제공과 커뮤니티를 통한 공동체 집단의 경험정보를 축적하여
제공하므로 신뢰도를 높일 수 있다.

다. 디지털컨텐츠(Digital Contents) : 디지털화 된 방법으로 제작, 유통, 소비될 수 있는 제품군을 의미하며, MP3 음악파일, 동영상파일, 이미지파일, 전자서적 등이 구체적 사례이다. 디지털 컨텐츠는 궁극적으로, 경험을 통해 소비되므로 이들 제품에 대한 고객들의 more
info syndrome을 충족시키고 제품의 내용에 대한 정확한 정보를 제공하기 위해 미리보기
(Pre-view)와 같은 직접경험을 제공해주는 것이 좋다.
(2) 고객중심의 정보제공
-인터넷비즈니스 환경에서의 고객화(Customization)라 함은 고객과 시스템간의 상호작용을
충실히 제공하는 것을 말한다. Amazon의 경우, 고객의 서평(Review), 고객의 구매정보 및
고객선호도에 따른 추천서적의 제공, 책의 배송 과정에 대한 이메일 서비스 등을 통해 고객과의 상호작용을 이용해 정보의 가치를 높이는 방법을 사용하였다.
(3) 고객 적용형 정보제공 시스템의 구축
가. 다단계 맞춤 형 추천시스템
a. 1 단계 추천방법 : 고객선호도에 따른 추천방법
-고객이 처음 등록한 뒤 , 방문하게되면, 처음 등록 할 때 선택한 선호내용에 따라 서적을
추천해준다.
-고객이 특정 도서 페이지를 방문한다면, 그 페이지가 반영하고 있는 책의 내용, 유형에
대해 선호가 높다고 판단하여, 그 고객 선호도 테이블에 해당 값을 증가시킨다.
-고객이 특정 도서를 구매한다면, 그 페이지가 반영하고 있는 책의 내용, 유형에 대하여
마찬가지로 선호도가 높다고 판단하여, 그 고객의 선호도 테이블 값을 증가시킨다. 이때,
구매 데이터는 방문 데이터보다 신뢰성 있는 정보로 판단하여 높은 가중치를 주게된다.
-해당 내용의 추천 할 도서를 이미 상당수 구입한 고객이나, 또는 추천할 도서를 이미 상당수 구입한 고객이나, 또는 추천할 상품이 부족한 경우, 차선책으로 해당내용의 도서, 해당
유형의 도서 등으로 추천해준다.
b. 2단계 추천방법 : 상품 연관성에 의한 추천방법
-서적의 상호 연관성에 따른 추천 방법으로, 기존의 고객들이 기독교 관련 서적을 사면서
동시에 성경을 소재로 한 소설, ' 바이블 코드', 혹은 '저학년 탈무드'의 서적을 구입하였을
경우, 이들은 각각 문학/공상분야, 아동학습분야에 속함에도 불구하고 하나의 연관된 서적들로 묶어준다.
c. 다단계 추천방법의 의미
-상기 두 가지 방법은 상호 보완적으로 사용 할 수 있다. 고객 선호도에 따른 추천 방법은
일대일 마케팅의 특성을 지니게되기 때문에, 고객이 구매할 도서를 선택하지 못하였다고
추론되는 항해 초기에 사용 할 수 있다. 반면에 고객이 특정 도서를 장바구니에 넣거나 검색엔진을 사용하는 등 고객이 구매 할 도서를 결정하였다고 판단되었을 때, 바로 그 구매
도서와 관련 있는 도서를 추천해 줄 필요가 있는 경우, 상품 연관성에 따른 추천 방법이 사용될 수 있다.
(4) 내용 설계의 절차
-벤치마킹의 방법 : 1, 차별화 되고 경쟁력 있는 내용설계를 위해 경쟁사의 철저한 분석
2.실무적으로 적용하기에 매우 직관적이고 수월한 장점과 창의성이 떨어지는 단점이 있다.
가. 대상업체의 선정 : 경쟁업체, 다른 분야라도 자신의 비즈니스 모델과 유사한 모범업체
3-4개 선정.

나. 인덱스 카드작성
a. 대상업체의 내용분류 및 분량파악 작업
b.수작업으로 인덱스카드 작성 : 다양한 내용을 감안. 분석작업에 참여한 내용설계자의 다양한 의견 반영->브레인스토밍. 구조설계 및 항해설계 등에 계속 사용 가능.
다. 내용의 확정
-수정 및 추가 사항을 보충한 뒤 , 자신의 사이트에 필요한 내용을 고려
-사이트에 필요한 내용은 특수 명사가 아니라 일반명사로 기입(사후 그룹핑 과정에서 혼란막음)-구체적인 수준까지 기입한 후, 내용을 종류별로 분류하고 필요한 내용카드를 나열하는 방법으로 내용 확정(소규모 사이트-1,000개, 중규모 사이트-5,000개, 대규모 : 수만개)
다. 인터넷 비즈니스 내용 설계를 위한 지침
a. 디지털 상품 B2B
-개념과 프로세스의 부분의 강조
b. 물리적 상품 B2B
-기업과 제품에 대한 확실한 정보제공. 구체적 사실의 제공
c. 디지털 상품 B2C
-구체적 사실, 개념제시. 디지털 상품의 디지털화된 유통의 경우, 개념 설명 및 상세한 정보제공이 중요. 미리보기(Preview)기능. 구체적 사실 및 원칙의 제시
d. 물리적 상품 B2C
-개념, 절차, 프로세스등에 대한 구체적 정보, 메인 화면에서의 구체적 사실제공
e. 디지털 상품 C2B
-고객의 입장을 반영하는 내용상의 설계. 원칙 및 절차의 제공 미리보기 기능. 고객불만 사항 처리 페이지 제공
f. 물리적 상품 C2B
-다양한 고객들이 공동의 목적의 상호작용제공, 프로세스, 행동절차
g. 디지털 상품 C2C
-고객 상호간의 정보제공이 용이하도록 설계. 고객의 행동절차 중요. 가상공동체 등을 통한
구체적 사례 및 사실, 원칙, 미리보기 가능
h. 물리적 상품 C2C
-상호간의 신뢰성 확보를 위한 설계, 행동절차, 원칙중요, 프로세스를 구체적으로

요약
-내용은 인터넷 상에서 제공되는 정보를 뜻하며, 이러한 정보들의 관련성이나 관계를 충실하게 제공하기 위한 설계를 내용 설계(Contents Design)라 한다.
-내용의 5가지 유형으로는, 구체적 사실, 개념, 절차, 프로세스, 원칙들이다.
-텍스트 설계에서는, 중요한 단어에 링크제공, 전환 어구의 사용 자제, 링크의 남용회피, 진부한 표현 회피 등에 유의해야 한다.
-그래픽 설계에서는, 파일 크기의 축소, 문자로 된 설명의 첨부, 테이블의 크기, 고객의 그래픽 환경 고려, 여백의 효과 등에 유의해야 한다.
-메인 페이지 설계에서는 원칙적으로 상호, 업종, 사이트 개설 목적, 영업방법, 미션 및 비전 등이 포함되어야 한다.

-내용 정보에 대한 최근의 이슈로서는, 인터넷 비즈니스 환경(가상 공간 환경)을 적극적으로 이용하는 방법, 고객화, 디지털 컨텐츠 등이 있다.
-고객 중심의 정보 제공 방법으로서 먼저 고객에게 직접 정보를 입력받는 감독하의 학습 방법(Supervised Learning), 고객의 행동으로부터 패턴을 추론하는 비감독하의 학습방법
(Unsupervised Learning) 의 두 종류가 있다.
-내용 설계의 대표적 방법으로서는 인덱스 카드법을 이용한 벤치 마킹의 기법이 실무적으로 사용 될 수 있다.

III 화면 설계

1.화면설계의 기본원칙
1)웹 문서의 디자인은 페이지 디자인보다는 화면 디자인
:웹 문서가 보여지는 곳이 2차원의 컴퓨터 스크린 상이라는 점, 웹 문서의 연결방식 때문에
웹 문서는 일반문서와 구별되는 특성이 있다

구분 일반문서 웹 문서 비고

대역폭 빠름 느림 웹 문서의 경우보다 제한적
보여지는 화면크기 =문서의 크기 일반적, 화면크기<문서크기 Pin Hole Effect 발생
상호작용방식 눈으로 훑어보기 스크롤링,클릭,타이핑등 웹 문서의 경우 더 복잡
항해방식 2차원적(페이지상의 다차원적(페이지상의 " "
항해 항해+페이지간의 항해)
페이지 요소 2차원적(여러 페이지를 1차원적(한 번에 Pin Hole Effect 발생
관계 한 평면상에서 동시에 한 페이지만을 볼 수
보는 것이 가능 있다)

따라서 디자인 시 다음사항이 지켜지도록 한다.
-고객의 눈이 웹 문서에 머무르는 시간이 일반 문서 보다 짧기 때문에 시각적 위계구조
(Visual Hierarchy)의 효율적 사용이 요구된다.
-웹 문서의 크기가 화면 크기보다 큰 경우 페이지의 일부만 화면상에 나타나기 때문에
내용의 중요성을 고려한 페이지 상의 배치가 요구된다.
-관련성 있는 페이지간의 다차원적인 Link가 가능하다는 점을 적절히 활용한다.
-사이트 상의 모든 페이지는 사용자에게 첫 페이지가 될 수 있으므로, 각 페이지는
독립적인 문서가 될 수 있도록 설계한다.
-최상이 아닌 최적의 선택이 되어야 한다. 예, 해상도가 높은 이미지를 사용하는 것은
미적으로는 좋으나 로딩 속도는 더 느리게 하므로, 두 가지의 트레이드 오프를 고려하여
최적의 선택을 해야 한다.
2) 웹 문서 디자인은 내용의 마크 업
-디자인 목적=>웹사이트가 포함하고 있는 내용이 고객에게 쉽게 다가가도록 함에 있다.
=>대비를 활용 중요내용은 강조, 연관 내용은 연관관계반영으로 훑어보기만으로 내용예측

3) 고객에 대한 인지적 효과를 고려
-훑어보기만으로 내용을 쉽게 파악=>내용 배치, 강조 시켜야 함. 즉, 쉽게. 빠르게 접근
4) 고객에 대한 감상적 효과를 고려
-사용하기 쉽고, 필요한 컨텐츠가 제공하더라도 고객의 눈을 끌 수 있도록 감성적 호소

2. 화면 설계의 기본요소
1)페이지 레이아웃과 CSS(Cascading Style Sheets)
가. 페이지 레이아웃
: 한 페이지 내에서 컨텐츠가 배치되는 방식=>그리드를 정함=>주요 요소를 어떤 영역 내의 위치에 배치 할 것인지 그리드 표시=>어떤 문자체를 쓸 것인지 결정

항해요소 -일반적으로 , 페이지를 읽기 쉽게 하기 위해 다음 사항을 지킨다.
제목 즉, -가운데 정렬보다는 왼쪽 정렬
소제목 텍스트 -문장의 길이는 짧게
켑션 텍스트 -단락의 길이는 짧게(4-8줄) -충분한 여백 -관련 있는 컨텐
항해요소 츠의 그룹핑 -상단 12cm는 페이지의 Hot Spot
-단락은 제목과 본문으로
나. 케스케이딩 스타일 시트(Cascading Style Sheet)
; 스타일 시트란 문서의 요소인 문자, 이미지, 테이블 등의 스타일을 지정해 주는 구문을
말함=>문서의 내용과 표현방식을 분리하는 것이 가능=>즉, IB사이트에서 반복하여 사용되는 문서의 형식을 만들어 문서의 유지 및 보수가 가능=>문자, 이미지 등의 구조, 레이아웃과 색, 배경 이미지 등의 그래픽 부분을 지정(World Wide Consortium에서 개발)
다. 화면과 프린트를 위한 안전 영역(Safe Area for Screen and Print)
: 페이지 레이아웃을 토대로 실제 컨텐츠를 배치할 때에는, 지금 디자인하는 페이지가 고객의 브라우저 상에서, 또는 프린트되었을 경우에 어떻게 보일 것인지 고려해야 함(픽셀의
크기에 따른 문서의 안전 영역(Safe Area)이다.
-고객이 사용하는 컴퓨터 시스템의 다양성
:스크린의 해상도는 320x200에서 1600x1200 픽셀로 다양함=>고해상도 스크린을 기준으로
디자인된 페이지가 저해상도의 페이지에서는 확대되어 나타남=>고객의 편의성과 외관문제
-화면을 위한 안전 영역
: 일반인을 대상으로 하는 웹사이트를 설계할 경우=>640x480 픽셀기준의 안전영역 설정
전문 웹 디자이너 등과 같이 비교적 좋은 하드웨어 사양을 갖추고 있는 고객 대상=>
640x480 픽셀보다 더 높은 해상도를 기준으로 안전 영역을 설정하는 것이 바람직함.
-프린트를 위한 안전 영역

안전영역의 크기 최대넓이 535 픽셀 595 픽셀
최대높이 295 픽셀 295 픽셀

화면과 프린트 용지 상에서 모든 문서가 잘리지 않길 원하는 경우, 가로 535, 세로 295 픽셀
범위 안에서 문서를 작성해야 함. 안전영역 바깥 부분에는 중요하지 않은 요소 배치가 필요.

2) 그래픽과 글자체(Typography)
가. 이미지
: 적절한 그래픽은 유용하게 사용될 수 있으나 과도한 사용은 시간적 손실 및 시각적 혼란 야기=>권장 바이트의 크기는 일반적 웹사이트를 기준으로 한 것으로 웹사이트의 목적에 따라 변경 가능
*. 바이트의 크기
-바이트의 크기는 페이지의 총 바이트 수를 말함(56kb 모뎀, T1, T2, E1 등 전용선)
-56kb 모뎀 기준 권장 바이트 크기:
배경 이미지 : 4KB
이미지 맵 : 30-60 KB
주 이미지 : 30KB
Bullet : 2KB 이하
Icon : 10 KB 이하
사진 : 여러 변수를 고려하여 결정 요
*. GIF와 JPEG의 선택(이미지 포맷에 적합한 용도)
GIF JPEG
특징 Transparency와 Interlacing을 지원 높은 비율의 압축가능
Full-Color Image(24-bit true color
이미지를 지원한다.
용도 -이미지의 색조가 단조로울 때 -이미지의 색조가 복잡할 대
-이미지의 브라우저에 따른 호환성 -이미지가 원색일 때
을 높이고자 할 때 -사진, 복잡한 삽화, 의학 이미지 등
-이미지를 투명하게 하고자 할 때 해상도가 중요한 경우
*. Universal 216 Colors
: 원하는 색상을 표현하기 위해 특정 시스템에 따른 3원색의 조정 값을 미리 준비해둔 표를
색상 참고 표(Color Look-Up Table)라고 함=>윈도우 환경에서 익스플로러와 넷스케이프에서 사용 가능한 216색
-256색을 사용하는 시스템의 경우=>IBM 또는 Mac OS는 256 컬러 중, 40가지 색은 OS자체에서의 사용을 위해 할당되므로 브라우저는 216색만을 사용할 수 있다.
-Interlaced GIF 이미지의 사용 : 이미지가 윗 부분부터 순차적으로 로딩되는 것이 아니라
낮은 해상도의 전체적인 모습이 나타난 후 점차 세밀한 이미지가 나타난다. 따라서, 이미지
전체가 뜨기 전에 어떤 이미지가 보일 것인지를 미리 예측 할 수 있게 함
-Lowres HTML 태그 사용 : 미리 만들어진 저해상도와 고해상도 두 가지 버전의 이미지 중 저해상도 이미지를 먼저 다운로드 하면 , 실제 로딩 속도는 좀더 빠르게 다운로드 되는 것처럼 느껴진다.
-Preload 이미지 : 선형적인 구조에서처럼 고객이 다음에 갈 위치를 예측할 수 있는 경우는,
고객이 페이지를 읽는 동안 그 다음 페이지를 미리 다운 로드 할 수 있다.=>다음 페이지로
좀 더 빨리 이동 할 수 있음=>큰 이미지 또는 이미지를 많이 사용한 페이지를 띄우기 전에는 고객에게 이미지 크기 정도 등을 알려주어 다운로드 여부를 고객이 선택할 수 있도록 함이 좋다.

나. 글자체(Typography)
: 웹 문서에서 글자체를 결정하는 변수는 크기, 두께, 색상, 글꼴과 보통체, 이탤릭체의 글꼴
유형이다.=>브라우저 상에서 지원되지 않는 포맷의 글자체를 만들거나, 특정 시스템이나
브라우저와 무관하게 동일한 형태로 보여지길 원할 경우에는 그래픽 툴을 이용한다.
=>미적인 효과를 위해 메뉴 바 등에 글자대신 글자 이미지를 사용 함. 주의 사항,
-10 또는 12 포인트 이상의 글자 크기 유지
-글자체의 종류를 최소화
-의미 있는 글자의 크기와 색상

3) 기타 화면 설계 요소
가. 이미지 맵(Image Map)
: 이미지를 일정 구역으로 나누어 각 영역에 URL을 할당함으로써, 특정 영역을 선택하면
지정된 웹 페이지로 접속이 되게 만든 항해 독의 일종 임. 잘 사용되기 위해,
-각 영역이 명확히 구별되도록 한다.
-영역의 수룰 제한한다
-맵의 각 부분은 링크될 곳을 예측할 수 있게 하는 이미지가 되어야 한다.
-링크되는 곳의 불명확성을 보완해주는 방법으로 Alt Tag(Alternative Tag)를 사용함.
나. Form Design
: 회원 정보, 배달 정보 등 IB 사이트 운영시, 고객으로부터 데이터를 입력받는 경우가
많음=>이런 폼을 입력하는데 평균 5분 정도 소요된다고 함=>이러한 절차가 고객을 웹사이트에 나가게 하는 원인을 제공
-텍스트 필드 크기 : 필드의 크기를 입력될 정보의 크기에 맞도록 함=>필드의 크기가 입력될 정보의 크기보다 작을 경우, 고객은 입력하고 있는 정보를 한 눈에 볼 수 없다.
-텍스트 필드의 배치 : 관련 있는 필드는 묶어서 배치한다.
-텍스트 필드의 제목 : 입력 정보에 관한 라벨을 삽입하고 각 입력 필드의 위치를 일관성 유지=>전송, 취소 등과 같은 액션 버튼의 제목을 명확히 함=>필수 항목은 별도 표시로 입력 여부를 고객이 선택할 수 있도록 함.
다. Menu Bar
: 고객이 쉽게 사용 할 수 있도록,
- 위치에 일관성을 준다. : 프레임을 사용하여 사이트 내의 페이지로 가거나 메뉴가 똑 같은 위치에 있도록 함
-모양에 일관성을 준다. : 같은 모양의 메뉴 바, 아이콘 등을 사용하여 찾는 메뉴가 어떤 것인지를 쉽게 알 수 있도록 한다. 이 경우에도 메뉴의 위치에 어느 정도 일관성을 갖춤.

3. 인터넷 비즈니스를 위한 화면 설계
1)화면의 다양화
가. 레이아웃의 다양화
: 정보를 한 화면에 디스플레이해야 하는 경우, 고객에 따라 중요하게 여기는 정보의 종류가
다르므로 시각적 위계 구조를 제공하는 레이아웃을 고객의 취향에 맞게 제시함으로써 고객의 편의를 도모할 수 있다.

나. 다양한 기술 수준 또는 기술 유형의 화면 제공
-다른 해상도의 화면 제공(예, 800x600이하 VS 800x600이상)
-브라우저의 종류 또는 버전에 따른 화면 제공(예, 익스플로러 용과 넷스케이프용, 또는
익스플로러 4.0 이상용과 4.0 이하용)
-플래시 버전과 비 플래시 버전을 선택하게 함
-텍스트버전과 그래픽 버전
2) 신뢰감을 제공하는 화면 설계
-화면 디자인을 암호, 보안 등의 기술적인 사항과 병행해서 사용할 때 신뢰도 향상 됨.
3) IB 사이트의 화면 설계 예
-서브몰에 걸친 화면 설계의 일관성 : 여러 개의 몰로 구성된 IB사이트의 경우 각 몰의
인터페이스가 상이하여 고객에게 혼란을 불러일으키는 경우가 있다. 서점, 음반점, 비디오점
등 5개 서브 몰을 가지고 있는 아마존은 각 몰의 인터페이스를 동일 레이아웃으로 통일 함.
- 각 서브 몰을 대표하는 색과 이미지 : 각 서브몰의 레이아웃은 통일되어있으나, 해당 로고의 색과 이미지는 다르게 처리했다. 상단 메뉴 밑의 이미지 자리에 각 서브 몰을 의미하는 로고가 나오고, 고객이 현재 어느 서브 몰에 있느냐에 따라 서브 몰에 해당하는 메뉴색이 바뀐다.
-주 메뉴의 고정에 의한 안정감 : 상단의 주 메뉴는 쇼핑의 어느 단계에서나 볼 수 있다.
-대비 : 가운데 그리드의 추천 상품에만 이미지를 넣음으로써 , 좌측과 우측의 텍스트 내용
보다 눈에 잘 띄게 함.
-변화: 테이블 등 각 요소의 색을 같은 톤 안에서 변화를 주어 단조롭지 않게 하였다.
-화면 해상도에 따른 문제 : 아마존은 일정한 자리를 필요로 하는 이미지 등으로 그리드의
크기를 고정시키지 않았다. 따라서 고객의 브라우저의 넓이에 따라 브라우저 전 화면에 걸쳐 내용이 나타난다.
-좌측 정렬 : 본문뿐만이 아닌 모든 타이틀도 좌측 정렬을 사용하여 정리 함.
4) 감성 기반의 웹 페이지 디자인 시스템 RED(Real-Time Emotional Design System)
: 웹사이트는 고객의 필요에 대한 기능적인 욕구뿐만 아니라 감성 욕구까지 만족시켜야 함.
또한 인터넷 비즈니스 사이트를 운영하기 위해서는 상품 정보, 전체적 구성 등을 빈번하게
업데이트 할 필요가 있다. 이때마다 방대한 이미지 DB와 웹 페이지 디자인 요소를 검색하여 특정 감성에 맞게 디자인하는 것은 역부족임. 이에 고객을 감성적으로 충족시킬 수 있는
쇼핑몰을 손쉽게 만들어 줄 수 있는 툴이 요구 됨.
5) 화면 설계의 절차
가. 문서의 스타일을 지정한다.
-IB 사이트의 비즈니스 모델 : 판매하는 상품이나 디지털이냐 물리적이냐에 따라, 문서 스타일이 달라짐.
-작성하는 문서의 사이트 상 위치 : 작성하는 문서가 사이트의 커버 페이지냐, 사이트의 첫
페이지냐 또는 상품 소개 페이지냐에 따라 스타일이 다르게 지정되어야 함.
나. 그래픽 요소를 점차적으로 넣는다
-색상 : 이 색이 사이트의 목적과 부합되는가, 즉, 사이트를 통해 전달하려는 메시지에 부합되는가, 216공통 색상 팔레트(Universal-Color Palette)상의 색인가, 선택한 색이 고객의 눈의 피로나 가독성 등을 감안한 색인가

-기술적 제약 사항 : 목표로 하는 고객이 주로 사용하게 될 시스템의 사양은? 예를 들어,
회선속도, 브라우저 종류 및 버전, 사용OS를 조사함=>이를 토대로, 전반적인 색상, 질감
등을 결정하고 보다 세부적인 것들을 첨가=>고객들의 다양한 시스템 환경을 고려해 웹
페이지를 여러 버전으로 만들어서 가능한 많은 고객이 설계자가 의도한 대로 사이트를 볼 수 있게 함. 다음의 지켜야 할 사항을 유의 할 것.
+프레임을 사용할 경우, 프레임이 없는 버전 또한 작성한다.
+일정 수준 이상의 시스템 사양을 요구하는 자바 애플릿이나 특정 플러그 인을 필요로
하는 컨텐츠를 포함시킬 경우에는 이러한 것들이 포함된 버전과 포함되지 않은 버전 두 가지중에서 고객이 선택할 수 있도록 함
-자바스크립을 이용하고자 할 경우, <!--(본문)-->태그를 반드시 삽입하여 자바스크립을 지원하지 않는 브라우저의 경우 이 부분을 건너 뛸 수 있도록 한다. 페이지의 내용에 있어서 빠져서는 안될 부분이라면, 대체 구문을 첨가시킴.
다. 그래픽 요소, 시스템 요인에 따른 페이지의 가독성을 평가한다.
-설문지 등을 이용한 고객 평가를 통해 사이트의 그래픽이 읽기 쉽게 디자인되었는지를 평가한다.
-여러 가지 플랫폼, 브라우저에 따른 페이지의 호환성, 전송 속도 등을 평가한다.
라. 페이지의 바이트 수를 체크한다.
: 이대 페이지의 이미지의 바이트 수를 체크해 주는 툴을 사용할 수 있다.
6) 인터넷 비즈니스 유형별 화면 설계 지침
가. 디지털 상품 B2B
-보다 높은 질의 웹 문서 + 상품 경험 미리 보기를 위한 화면 설계
:화면 설계의 역할이 크다=>어떻게 보여주느냐에 따라 상품에 대한 고객의 체험이 달라짐
=>판매 대상이 기업이므로 대상기업에 어필할 수 있는 방식의 디자인 필요=>은유적인
표현방식으로 친숙감=>기업의 사양이 일반적으로 높으므로 보다 높은 질의 웹 문서 작성 .
예) NTE(National Transportation Exchange)
나. 디지털 상품 B2C
-첫 인상의 중요성 + 상품 경험 미리 보기를 위한 화면 설계
: 소비자의 유형인, 충동적(Impulsive), 신중한(Patient), 분석적(Analytical)인 소비자 중
충동적인 경우가 많으므로 B2B 보다 고객의 관심을 끌 수 있는 화면의 디자인이 요구.
=>고객의 관심을 끌 수 있는 디자인도 중요하지만, 상품 정보를 제시할 때 정확하고 자세한 정보보다는 직관적으로 알아보기 쉬운 형태로 나타내는데 초점을 두는 것도 중요함
예)eTrade의 도움말 화면=>실제의 거래 화면을 캡쳐해서 순서대로 보여 줌으로 거래 방법
을 쉽게 이해 함. eTrade 게임 화면=>실제 거래가 동일한 화면에서 가상으로 투자해 보는
게임을 통해 eTrade에 등록하지 않고도 경험해 볼 수 있다.
예) 가상 루브르 박물관의 작품정보 제시 화면 : 사진 위=>작품의 지역, 아래=>어느 시기 작품인지를 색깔 있는 선을 통해 정보 표현
다. 디지털 상품 C2B
-정보 입력 인터페이스를 위한 화면 설계 + 상품 경험 미리 보기를 위한 화면 설계
:고객으로부터 정확한 정보를 입력받는 것이 관건이다.=>개별 고객은 그리 참을성이 많지
않기 때문에 고객의 정보를 쉽게 입력할 수 있도록 도와주는 화면 설계가 요구.
예) Priceline은 비행기표, 숙박 등의 예약 서비스를 제공=>예매라는 서비스 상품을 팔기
때문에 예매하는 화면에서 필요한 정보를 고객에게 편리한 형식으로 보여 줌=>서비스 상품
처럼 구매 행위가 하나의 프로세스인 경우에는 프로세스의 중간에 도움말을 찾기 위해
다른 페이지로 이동하는데 어려움이 있다.
라. 디지털 상품 C2C
-상호 작용 인터페이스를 위한 화면 설계 + 상품 경험 미리 보기를 위한 화면 설계
:고객 사이의 의사소통을 위한 상호작용인 인터페이스가 요구되며, 이에 맞는 화면 디자인이
제공되어야 함
마. 물리적 상품 B2B
-보다 높은 질의 웹 문서 + 상품 표현 미리 보기를 위한 화면 설계
: 높은 해상도의 그래픽, 입체적인 이미지, 조작 과정을 보여주는 동영상 등을 제공 함
바. 물리적 상품 B2C
-첫인상의 중요성 + 상품 표현 Preview를 위한 화면 설계
: 상품 구매 인터페이스를 고객이 쉽게 사용할 수 있는 디자인으로 하되, 상품 정보는 충실히 전달하는 것이 이 모델화면 설계의 초점임.
예)소니사의 컴퓨터와 디지털 카메라사이트는 고객이 쉽게 구매할 수 있도록 친숙한 형태로
디자인 함.
사. 물리적 상품 C2B
- 정보 입력 인터페이스를 위한 화면 설계 + 상품 표현 미리 보기를 위한 화면 설계
: 고객으로부터 거래조건이 적절하게 제시되기 위해서는 거래를 시작하는데 필요한 정보를
빈번히, 그리고 서술적이 아닌 직관적으로 보여 주어야 함.
예) Accompany.com의 거래정보 제시 화면=>거래에 필요한 정보를 쉽게 알 수 있도록
도표와 눈에 잘 띄는 디자인을 사용하였다.
아. 물리적 상품 C2C
-상호 작용 인터페이스를 위한 화면 설계 + 상품 표현 미리 보기를 위한 화면 설계
: C2C에서 활발한 거래를 하는데 방해가 되는 요인은 상대 거래자에 대한 불신감이다.
경매중개 사이트인 eBay에서는 간단한 이미지를 이용하여 거래자에 대한 불신감을 없애는데 도움을 주고 있다. 예) eBay의 상품 정보 화면=>거래자 ID 옆의 숫자와 별 모양은
그 화면의 사이트에 대한 피드백 정도를 나타냄. 어느 정도 이상의 피드백을 했을 경우는
그 정도에 따라 별 모양 등의 이미지를 상품정보화면에서 나오게 한다.

<요약>
-화면 설계는 인터넷 비즈니스를 성공시키기 위한 하나의 전략으로 사용될 수 있다.
-화면 설계는 화면의 레이아웃을 구성하는 일과 그래픽과 텍스트를 적절한 형태로, 적절한
위치에 배치하는 작업이다.
-웹 문서 디자인은 디스플레이되는 화면의 크기와 매체의 특성에 의한 제약조건 때문에,
일반 문서의 디자인과 다른 별도의 지침이 필요하다.
-인터넷 비즈니스에서 중요한 요소인 고객의 신뢰감 확보는 지불방식 보안강화 등의 방법과 함게 화면 설계를 적절히 이용될 때 이루어질 수 있다.
-사이버 은행에서의 신뢰감에 대한 연구는 일반 IB사이트에서도 신뢰감을 줄 수 있는 화면
설계가 가능하다는 점을 시사해 준다. 더 나아가서, 신뢰감뿐만이 아닌 기타 감성 요인도 IB 사이트의 인터페이스 디자인에 포함시킬 수 있다는 가능성이 열렸다.
-디지털 상품을 위한 IB시스템을 설계할 때에는 상품 미리 보기를 통해 경험을 극대화시킬
수 있는 인터페이스가 구현되어야 한다.
-물리적 상품을 위한 IB시스템을 설계할 때에는 실제상의 상점에 대한 한계점을 극복할 수
있는 방향으로 인터페이스가 디자인되어야 한다.
-B2B 모델에서는 기업인이라는 고객의 특성에 맞게 화면 설계가 되어야 한다.
-B2C 모델에서는 일반인이라는 고객의 특성에 맞게 화면 설계가 되어야 한다. 예를 들어,
동일한 정보라도 직관적으로 알아보기 쉬운 형태로 보여 주어야 한다.
-C2B 모델에서의 화면 설계는 고객의 다양한 입장을 보여주어야 한다.
-C2B 모델에서의 화면 설계는 고객의 다양한 입장을 용이하게 표현할 수 있도록 도와주어야 한다.
-C2C 모델 도한 이 모델의 문제점을 보완해 줄 수 있게 화면이 디자인되어야 한다.


IV 구조 설계(Structure Design)

: 구조 설계는 사이트 내의 컨텐츠를 어떻게 조직화할 것인가를 다룬다. 즉, 인터넷비즈니스
시스템을 구성하는 개별 화면이 어떻게 분류되며 이에 따라서 화면 내의 정보가 어떻게 표현되어야 하는지를 결정하는 것이다.

1.구조 설계의 필요성
: 좋은 구조는 고객에게 사이버 공간에 산재해 있는 정보들을 명백하게 이해할 수 있게 하며, 항해(Navigation)의 편리성을 확보하는데 기초가 되고, 또한 하이퍼텍스트 기반의 웹이라는 매체의 장점, 즉 상호 작용성을 충분히 살리기 위해 필요하다.

-정신모형(Mental Model) :
광의의 의미로는 주변 환경이나 사물 또는 사람에 대해서 갖는
개념 모형을 말한다. IBS와 관련해서는 시스템의 기능을 이해하고 시스템의 동작을 예측 가능하게 하여 동작에 참여하는 자신의 행위에 대한 계획을 세울 수 있도록 한다.
즉, 좋은 구조는 IB마스터가 인터넷 비즈니스 시스템에 갖는 정신 모형과 고객이 웹 IBS에
갖는 정신모형이 일치할 때 만들어진다. IB마스터가 정보를 조직화하고 각 개별 정보를 분배해 놓았을 때, 고객도 마찬가지로 자연스럽게 전체 정보 구조를 파악하고 자신이 찾고자 하는 정보가 어디에 있을 것이라는 것을 쉽게 예측하고 찾아낼 수 있어야 한다.

-인지적 과부하(Cognitive Overload)
: 인간의 기억 체계,
-감각 기억(Sensory Memory) =>환경의 물리적 자극 그 자체로 시각, 청각 등의 감각기관을 통해서 들어온 정보로 매우 짧은 시간 동안만 저장되는 특성을 가지고 있다.
-단기기억(Short-Term Memory)=>감각 기억의 다음 단계로, 누구에게 전화번호를 듣고 그
숫자 정보를 잠시 기억하고 있는 상태이며, 감각 기억과 같이 저장기간이 그리 길지 못하다.
단기 기억 단계의 정보들은 끊임없이 가공되고 변형되기 때문에 어떠한 처리(Process)가

일어난다는 의미에서 작업 기억(Working Memory)이라고도 한다. 단기기억의 용량의 한계는 보통의 경우 서로 무관한 관계를 갖는 개별정보(글자, 단어, 그림 등)를 5-9개까지 저장할 수 있는 용량의 한계를 Chunk라고 한다.(전화번호 숫자가 7-8개로 구성 이유)
-장기기억=> 머리 속에 들어있는 지식이라고 할 수 있으며 가끔 인출하기가 어려운 경우도
있지만 일단 장기 기억 단계로 접어든 정보는 쉽게 사라지지 않는 특성을 가지고 있다.

-인지적 과부하=>인간의 단기 기억은 용량에 한계가 있으며 주의를 기울일 수 있는 작업
용량에도 한계가 있다. 동시에 여러 생각을 하기 힘들고, 자동화된 행동이 아니면 두 가지
일을 병행하기가 힘들다. 예컨대, 새로운 IBS를 경험하는 고객의 경우라면 과거 장기 기억에 있던 정보보다는 현재 주어진 시스템의 가용 정보를 바탕으로 형성된 단기 기억을 활용하게 된다. 이는 장기 기억에 있는 정보를 즉각적으로 활용하기에는 인출의 어려움이 있다.
따라서 IBS구조는 가급적 고객이 현 시스템의 가용 정보만을 활용해서 구조를 이해할 수 있도록 도와주어야 한다.

1) 구조 설계의 기본 원칙-고객의 욕구와 행동 파악
:고객의 욕구와 행동을 파악하기 위해, 웹 서버의 로그 파일이나 검색엔진의 로그 파일과
검색 키워드, 게시판이나 방명록에 남긴 글들, IBS를 통해 자체적으로 수행한 설문 등 사용.

-로그 파일=>고객이 방문한 페이지와 그 이동 경로를 보여 주는 파일이다. 로그 파일을
분석함으로써 고객이 가장 많이 방문하는 페이지 등을 파악할 수 있다. 또한 각 페이지의
이동 경로를 파악함으로써 현재 사이트의 전반적인 구조가 고객의 이동 경로에 맞게 구축
되어 있는지를 확인 할 수 있다.
-방명록과 게시판=>고객의 욕구와 행동을 직접 반영한 것으로 사이트 구조를 개선하는데
유용하다.

-온라인 설문 조사=>사이트 이용목적, 평균적인 인터넷 사용 환경, 고객이 요구하는 정보 등은 사이트 구조를 구축하거나 개선하는데 활용.

-사용성 평가 =>면접이나 관찰, 질문 등이 주로 사용되며 완성된 IBS를 가지고 진행할 수있으며 중요한 기능만을 가진 시제품(Prototype)을 가지고 수행할 수 있다.

2. 사이트 구조(Site Structures)

1)계열 구조(Sequential Structure)
: 일련의 정보를 순차적으로 보여주는 방식을 말한다.=>기존의 서적이나 잡지와 별 차이가 없다.=>웹 의 강점인 상호작용을 살리기 위해서는 약간의 변형이 필요=>한 페이지에서 다른 페이지로 이동할 때 두 가지 선택의 길을 준다든지 한 페이지를 보고 있다가 잠시 다른 페이지로 이동할 수 있는 선택의 여지를 주게 되면 고객과 상호 작용성을 확보할 수
있다. 장점=>정보가 단계적으로 제시되기 때문에 웹에서의 Lost in Cyber Space 현상도
가장 적게 일어나며 고객에게 모든 중요한 정보를 제공하며, 또한 고객이 다음 페이지로

이전하기 전에 미리 다음 페이지의 이미지나 페이지의 구성요소를 다운로드 받게 할 수 있어 연결 속도가 빠름. 그러나 고객은 개발자가 정해준 순서대로 항해를 할 수밖에 없기 때문에 지루하게 생각 할 수 있으며, 또한 인터넷의 장점인 상호작용성도 살릴 수 없다.
이런 이유로 계열구조는 단순하게 상품의 사용법을 설명하는 절차적인 페이지나 교육용 사이트에 단순한 동작의 원리 같은 것을 설명할 때 유용하게 사용.

2) 그리드 구조(Grid Structure)
: 두 가지 계열구조의 합이다. 작게는 제품의 사용법을 설명하거나 회사의 직원 구성도를 작성할 때, 크게는 대학의 교융 프로그램을 소개하거나 웹 교육을 진행하는 IBS에서 적합함. 그리드 구조는 수평과 수직형태로 링크구조를 이루고 있다. 이러한 링크구조는 단순히 아무렇게나 링크를 하는 것이 아니라 특정기준에 따라 공통적인 속성들을 공유하고 있는 구조이다. 예를 들어 IBS에서 게임을 판매하는 사이트라면 수평구조에는 운영체제별로 구조를 나누고 수직조직에는 게임의 종류별로 구조를 나눌 수 있다. 수평구조에는 맥, 윈도우, 유닉스, 플레이스테이션 등의 종류를 나열하고 수직구조에는 각 운영 체제별로 전략시믈레이션 게임, 머드게임, 슈팅게임 등으로 배열하면 된다.

장점 : 일단 고객이 수직, 수평 구조의 틀을 이해하게 되면 효율적으로 항해나 정보의 검색이 가능할 수 있는 장점이 있다. 그러나 인터넷사용 경험이 적은 고객에게는 그리드 구조는
매우 낯설기 때문에 구체적인 설명을 덧 붙여서 전반적인 구조에 대해 언급할 필요가 있다.

단점 : 수평구조에는 운영체제를, 수직구조에는 게임의 종류를 보여줄 만큼 많은 양의 공통
특성을 가진 정형화된 데이터를 필요로 한다. 그러나 현실 세계의 대부분 데이터들은 그리드 구조를 쓸 만큼 정형화되어 있지 않다는데 문제점이 있다. 따라서 그리드 구조는 많은 양의 데이터베이스를 가지고 있고 이를 체계적으로 보여줄 수 있는 소수의 IBS에만 가능한 구조이다. 즉, 백과사전의 경우처럼 대규모 데이터베이스를 보유하고 있을 때 효과적으로 사용된다. 대용량이므로 텍스트정보가 많고 부분적으로 그림이나 사운드가 추가된다.

3) 네트워크 구조(Net-Like Structure)
: 개별 정보를 담은 웹 페이지를 순서나 특정 구조 없이 수많은 페이지로 나열해 놓은 매우
복잡한 구조를 말한다. 따라서 원하는 정보를 얻기 위해 단일 페이지에 접근하는 것은 쉬워도 고객이 전반적인 구조를 이해하기란 매우 힘들다. 대부분의 네트워크 구조를 가진 IBS에서는 초기 페이지(Home-Page)가 중요한 역할을 한다. 이는 만일 항해를 하다가 구조를 파악하기 어려울 경우 초기 페이지로 다시 돌아가서 웹 탐색을 할 수 있는 여지를 마련해 주기 때문이다.
장점: 개발자의 의도와 상관없이 고객 스스로 웹을 탐색할 수 있다. 일반적으로 고객이 쉽게
파악할 수 있는 기승전결의 이야기 구조를 가졌다고 할 수 없기 때문에 고객들이 다양한 경험을 할 수 있다. 이러한 특성 때문에 상호작용이 매우 뛰어날수도 있다. 따라서 인터넷상에서 어드벤쳐 게임을 제공하는 사이트라든지(Jurassic Unicity.com) 고객 스스로 하나의 정보를 가지고 다양한 학습을 할 수 있는 사이트에 적합한 구조이다.
단점 : 인터넷 사용 경험이 없는 초보 고객에게는 혼동을 야기할 수 있으며 길 잃어버리기
현상도 가장 많이 발생한다. 이는 인터넷 사용경험이 없는 초보자의 경우 기존의 서적이나
잡지를 보고 읽는 방식의 정신모형을 가지고 하이퍼텍스트 기반의 웹 문서를 보고 읽기 때문이다.

4) 계층구조 (Hierarchical Structure)

현재까지 알려진 IBS의 구조 중에서 가장 효과적으로 정보를 조직화하고 제공하는 방법으로 알려져 있다. 일반서적이나 잡지의 경우도 책의 제목부터 각 장소의 소 주제에 이르기까지 계층적인 구조를 가지고 있기 때문에 IBS에서 계층 구조를 채택하면 고객들은 이미 이러한 구조에 익숙해져있어서 전체 구조에 대한 이해를 높일 수 있다. 계층구조는 최상위의 홈페이지에서, 각 하위 페이지는 특정 주제아래 계층을 가지고 있으며 각 페이지는 논리적인 연결을 가지고 있다.
단점 : 1. 각 계층의 페이지간에 정보의 분류(Classification)가 잘못 이루어져 있을 경우 고객이 정보를 찾는 과정에 있어서 어려움을 겪을 수 있다. 예를 들어 고객이 상품을 어떻게 분류하는가에 대한 철저한 파악이 없이 IB 마스터의 입장에서 상품을 분류해 놓아 고객의 입장에서는 A상품 군에 있어야할 상품이 B 상품 군에 있다면 고객은 상품을 찾기 위해
IBS를 방황하게 된다. 따라서 인터넷비즈니스 시스템에서 디지털 상품이건 물리적인 상품이건 간에 분류가 애매한 경우의 상품은 충분히 고객의 목소리를 듣고 결정하는 갓이 현명하다.
2. 네트워크 구조와 마찬가지로 고객이 길을 잃는 현상이 자주 일어난다. 길을 잃어버리는
현상은 원하는 정보를 찾기 위한 경로가 다양하거나 최종 목적지까지의 단계가 너무 길 경우 고객은 이제 자신이 찾으려는 정보가 어디에 있는지 몰라 당황하게 될 때 일어난다.
이러한 이유 때문에 계층구조에 있어서 중요하게 설정해야 할 문제는 계층의 너비와 깊이이다. 너비는 계층의 종류 수를 말하며 깊이는 한 계층의 깊이 수를 말한다.
너비의 폭이 크면 고객의 선택의 폭이 넓어서 한가지 주제를 가지고 다양한 이야기를 할 수 있다. 깊이가 좁은 경우의 계층구조는 한 가지 주제를 가지고 고객이 심도 있게 탐색할 수 있다는 장점이 있다. 그러나 너무 좁은 구조일 경우 페이지 끝까지 잃어야 한 가지 주제를 이해할 수 있기 때문에 탐색시간이 많이 소요되어 고객이 싫증을 낼 수 있다. 또한 깊이의 증가는 방향 상실의 가장 큰 원인이며 인지적 과부하를 초래할 수 있다. 따라서 깊이의 수가 증가할 경우 세심한 디자인 설계가 요구된다. 현재 고객이 보고있는 깊이 수준의 단서를 제공하거나 전체적인 구조를 조망할 수 있는 도구를 제공하는 것도 이를 해결하기 위한 방법이다.

5) 혼합 계층구조(Mixed Hierarchy Structure)

최근의 IBS는 여러 가지 구조를 혼용해서 사용하는 혼합계층 구조를 채택하고 있다. 즉, 예를 들어 기본적인 메뉴들이 있는 곳은 계열적 구조를 사용하고, 전체적인 구성은 계층적인 구조를 채택한다. 그리고, 충분히 정형화된 정보를 입수할 수 있는 분야에서는 부분적으로 그리드 구조를 채용하고 마지막으로 고객들이 스스로 몰입하기를 바라는 부분에는 네트워크 구조를 구축함으로써, 한 IBS 내에 여러 가지 구조를 혼용하여 사용하는 것이다.


6) 고객중심의 구조

고객이 사이버 공간에서 상품을 탐색하고 거래를 수행하는 과정이 용이하게 이루어 질 수 있는 구조를 제공하는 갓이다.

-넓고 얇은 계층구조 선호
: 단기기억의 용량의 한계는 너비가 넓고 깊이가 얇게 만들어져 있는 것은 User Study를 통해 얻은 결론임 . 따라서 방대한 정보를 가지고 있는 경우 무조건 너비를 확장하지 못하므로 sub-site를 제작할 수 있다.(www.zdnet.com)

-교차적 연결의 제공
: 사이버 쇼핑몰의 구조설계에 있어서 구비된 상품 정보를 어떻게 여러 화면에 모두 나타낼 수 없으므로 구비된 상품정보를 어떻게 여러 화면으로 적절히 분배하는가와 상품정보를 어떻게 연결하느냐를 결정하는 것은 매우 중요한 문제가 된다. 쇼핑몰에서 제공되는 교차적연결은 하나의 상품에 대한 정보를 하나가 아닌 둘 이상의 장소에서 제공하는 것이다.

3. 정보의 배분

1) 기억하기 편리하게 분배한다.
2)사용하기 편리하게 분배한다.

4. 페이지의 구조

1)전경(Fore-Ground) : 전경이란 고객이 페이지를 봤을 때 확 눈에 뜨이는 정보를 말한다.
페이지 구조를 설계할 때 전경으로 설정하는 정보는 중요한 정보가 되어야 하며 그 양은 될수 있으면 적을수록 좋다.(주요 메시지나 사이트 명 특별상품정보, 주요활동)
사실(Fact)과 개념(Concept)
-깜박임 효과(Blinking)
-움직임 효과(Motion, Animation) :초기화면이나 독립적인 페이지를 따로 구성하는 것이 좋다. 초기화면의 경우 Skip, Stop을 할 수 있는 선택권 부여
-마퀴효과 (Marquee) :자동적으로 텍스트를 위, 아래 또는 좌, 우로 이동시켜 주기 때문에 고객입장에서는 아무런 조작 없이 계속해서 정보를 입력받을 수 있다.(텍스트를 읽는 방식과 같은 방식으로 제공)
-그래픽 처리 : 대부분 웹 페이지 전체를 하나의 그래픽으로 보는 경향이 있기 때문에 그래픽 처리를 한 전경은 다른 기법에 비해 주의를 끌지 못한다. 중경에서 배너광고를 할 때blinking, motion 등과 함께 많이 쓰인다.

2) 중경(Middle-Ground) : 페이지 구조상의 전경과 배경의 중간단계로 고객들에게 실제로 의미있는 정보를 제공하여 주는 중심적인 역할을 수행한다. 신문에서 헤드라인이 전경이라고 하면 실제기사 내용은 중경이라고 할 수 있다.

사실, 개념, 절차, 프로세스, 원칙


-칼라를 사용해서 구조를 보여주기 : 모든 페이지에 걸쳐 제목이 되는 정보는 동일한 색을 사용하고 메뉴나 리스트 정보도 한 가지 색으로 동일하게 묶어서 표현하도록 한다. 또한 색을 이용해서 정보의 우선 순서나 순위를 부여할 수 있다.(3-4가지 색 사용, ISO(www.iso.ch) 규격 참조)
-그룹화(Grouping) :메뉴는 그래픽 처리로 그룹화하여 사이트의 전체적인 구조를 개별적인
나누어 사이트가 어떻게 조직적화 되어 있는가를 파악하는데 도움이 된다.(테이블로 그룹화하기도 함)
-여백의 활용(Whitespace) : 여백을 적절히 사용하면 중경의 정보를 조직화해서 표현하는 데 좋은 방법이 될 수 있다. 그래픽 이미지의 주위나 텍스트와 텍스트 사이의 공간을 여백으로 활용해서 페이지내의 정보를 조직적으로 보요주도록 한다.
-텍스트자체의 활용 : 중경에 효과적으로 텍스트정보를 제공하는 것은 전체적인 사이트를 위해 지혜로운 일이다.(중요한 단어에 링크, 전환어구나 진부한 표현 사용 자제 필요)

3) 배경(Back-Ground)
: 전경 정보를 더욱 돋보이게 하고 중경의 역할을 돕는 측면에서 설계되어야한다. 배경을 이루는 가장 기본적인 요소로 배경의 색과 이미지가 있다. 너무 화려한 색이나 용량이 큰 이미지로 전경의 정보를 억제하는 효과를 주는 색의 사용은 배경에서 금해야 한다.

5. 구조 설계절차
1)올바른 구조의 선택

구분 B2B B2C C2B C2C
디지털 계열구조 계층적구조 혼합구조 계층구조
교차적연결정보 그리드구조 네트워크구조

물리적 계열구조 계층구조 혼합구조 계열구조
교차적연결정보 계층구조

2)컨텐츠의 범주화 : 구조를 선택하고 컨텐츠 범주화 작업필요
: 각 내용간의 연결관계를 명시, 중복성이 있을지 모르는 내용간에 수정, 보완작업,
최종적으로 내용들을 구조에 할당할 때에는 그 이유를 명시해 주는 것이 추후에 항해 설계나 화면 설계 작업에 도움이 된다.

3) 조직도 작성 : 전체적으로 구조는 어떻게 이루어져 있으며 각 페이지에 할당되는 정보는 무엇인지 구체적으로 기입한다. 정보의 분배는 어떻게 했는지 전경과 중경, 배경의 페이지 구조는 어떻게 설정해 놓았는지도 구체적으로 기입한다.


V 항해설계

항해구조란 고객이 이동할 수 있는 길을 의미하는 것으로 하이퍼미디어 시스템의 링크구조를 의미한다. 항해설계의 목표는 고객이 시스템과 최적으로 상호작용할 수 있도록 항해구조를 만드는데 있다. 이러한 항해설계의 기본적인 고려사항은, 1), 비즈니스모형을 고려해야한다.(슈퍼마켓-최대한 빨리 상품을 찾도록, 박람회-여유 있게 둘러보고 구경하면서 가장 마음에 드는 상품을 비교하는 과정을 통해서 구매할 수 있도록 디자인 할 필요가 있다.)
2), 인터넷 비즈니스시스템의 구조를 고려해야한다. 사이트의 구조가 어떤 형태인지에 따라 항해에 요구되는 링크의 종류와 형태가 달라질 필요가 있다.

1. 항해와 관련된 고객의 문제
일반적으로 Hypermedia 시스템에서 발생하는 문제와 구체적으로 인터넷 비즈니스를 위한 사이트에서 발생하는 문제로 나누어 볼 수 있다.

1) 일반적인 항해문제
-방향상실감(Disorientation) : 정보를 탐색하다가 현재의 위치는 물론 앞으로 어디로 가야하는지 몰라 혼란에 빠지는 것과 같이 위치감각을 잃어버리는 현상.
-인지적과부하(Cognitive Overload) : 정보를 탐색하는 작업자체가 인지적으로 사용 가능한 작업량을 넘어서서 원래의 목표나 과업조차 기억하기 어려운 현상을 인지적 과부하라 한다.
2) 인터넷비즈니스에서의 항해문제
-고객은 상품을 확인하고 비교하기 위해 현재 자신이 방문하고 있는 IBS의 구조에 대해 알 필요가 있으며, 이동을 하면서도 계속 그 이동 순서를 어느 정도 기억하고 있어야한다. 만약
적절한 항해단서가 없다면, 고객은 상품을 찾기 위해 상당한 기억 부담을 갖게되어 쾌적한
쇼핑을 할 수 없게 된다. 따라서 IBS에서는 주로 상품의 위치를 파악하기 쉽고, 자신에게
적합한 상품인지를 확인할 수 있으며, 쉽게 상품을 비교할 수 있는 항해 구조를 설계하는 것이 인터넷비즈니스를 활성화시키는 데 필수 조건이 된다.

2. 핵심 항해 요인

1) 내용위치 표시 서비스(Content Locator Service)
: 웹사이트는 정보의 양이나 깊이, 그리고 내용에 대해 가늠할 수 있는 물리적인 단서가 상대적으로 빈곤하다. 비록 검색엔진이 고객에게 빠르게 그 내용에 접근할 수 있게 해주긴 하지만 , 사이트의 내용에 대하여 명확하게 조직화하여 보여주지는 못한다. 목차(Table of Contents, TOC)와 중요한 단어로 구성된 인덱스는 고객에게 사이트의 구성에 대해 알 수 있도록 하면서 내용에 대한 맥락을 제공해 줄 수 있는 방법이다. 이 때에 너무 세세한 부분까지 나타내 주기보다는 가장 핵심적이고 관련성이 많은 중요 단어들로 인덱스를 구성하는 것이 좋다. 이렇게 내용을 분류하여 목차나 차례, 목록으로 표시해 주는 내용 위치 표시 서비스는 바르게 정보로 접근할 수 있게 함으로써 고객이 항해를 하기 위한 기본적인 출발점이 된다.


2) 위치확인(Location Identification)
: 구조가 복잡한 사이트에서 상품의 위치확인에 드는 노력을 덜어주고 쉽게 상품의 위치를
알려줄 수 있는 방안 중 하나는 사이트 맵(Site Map)을 제공하는 것이다. 시이트 맵은 전체 정보에 대한 개관을 구조와 함께 보여주기 때문에 정보의 위치를 한눈에 파악할 수 있게 해 준다는 장점이 있다. 위계적인 다이어그램에서 지리학적인 은유에 이르기까지 사이트 맵의 형태는 다양하다. 그러나 구조가 복잡해지고 페이지수가 증가하게되면 사이트 맵에서 해당 정보를 찾는 시간도 오래 걸리게 되고, 한눈에 알아보기 쉬운 사이트 맵을 제공하기도 어려워진다. 이러한 경우에 위치 확인을 도와 줄 수 있는 방안들은 현재 페이지에서의 상대적인
위치를 보여준다거나, 모든 페이지에 고정적인 프레임이나 버튼을 배치하여 지름길을 제공해 준다거나, 지나온 경로를 보여주어 이미 방문했던 곳으로 직접 이동할 수 있도록 하는 방안들이 있다.

3) 보편적 항해 통제(Common Navigation Control)
: 하이퍼텍스트로 구성된 시스템에서 항해를 하다 보면 페이지마다 다른 곳으로 이동할 수 있는 링크들이 삽입되어 있으며, 다른 곳으로 이동하기 위해 지나가야 되는 페이지들이 존재하게 된다. 브라우저에서 제공하는 BACK 버튼이나 FORWARD 버튼은 고객이 지나온
전후 페이지로의 이동을 가능하게 하면서 가장 많이 쓰이는 도구이다. 내용 표시 서비스나 위치를 확인시켜주는 항해요인 외에 가장 보편적으로 쓰이는 링크와 도구를 보편적 항해 통제라고 한다.

3. 기본 링크유형

링크는 각 페이지들의 연결관계를 말하며, 연관된 정보들끼리 연결시켜주는 역할을 하는 관계 구조(Relationship Structure)라고 할 수 있다. 이러한 링크 구조는 각 페이지 사이의 다양한 연결유형을 구성하게 되는데, 크게 기본링크(Basic Links)와 부가적 링크(Add-On Links)로 분류할 수 있다. 기본 링크는 IBS의 구조에 의하여 결정되며, 부가적 링크는 이미 결정되어 있는 기본 링크의 불편함을 해소시켜 주는 역할을 한다.

1) 계열적 링크(Linear Links)

IBS의 구조가 안내문과 같이 일정한 순서를 갖는 순차적인 구조라면, 이동을 하기 위해서는 최소한 두 가지의 기본적인 링크가 필요하다. 현 위치로부터 이전 페이지로 이동할 수 있는
링크와 다음 페이지로 이동할 수 있는 링크가 제공되어야 한다.

2) 그리드 링크(Grid Links)

그리드 구조는 페이지들간의 관계를 수평적이고 수직적인 두 가지 순차적 형태로 표현한다.
주제와 하위 주제들이 동일한 구조를 갖게되므로, 고객이 쉽게 IBS의 전반적인 구조에 대해 이해할 수 있다. 절차에 대한 매뉴얼이나 대화과정을 목록으로 나타내는 것과 같이 하나의 범주 내에서 시간적인 순서나 역사적인 정보를 표현할 때 유리하다.

이러한 그리드 구조에서는 상위 페이지와 하위 페이지로 이동할 수 있는 수직적 링크와 이전 페이지와 다음 페이지로 이동할 수 있는 수평적 링크가 필요하다.

3) 계층적 링크(Hierarchical Links)

위계구조는 많은 양의 복잡한 정보들을 계층적으로 표현하여 가장 효과적으로 조직화할 수 있기 때문에 인터넷쇼핑몰을 비롯한 대부분의 웹사이트들이 위계적인 구조로 구성되어있다.
위계구조에서 계층의 깊이가 깊어짐에 따라 정보를 찾기가 어려워지는 것으로 나타났으며,
똑같은 정보로 구성했더라도 깊이와 너비가 불균형한 구조보다는 균형잡힌 구조에서 제한된 시간에 더 많은 정보를 탐색하는 것으로 조사되었다. 따라서 이러한 위계 구조를 갖는 IBS에서 고객이 쉽게 상품을 찾기 위해서는 한 페이지에서 선택할 수 있는 항목의 수와 계층의 깊이를 균형 있게 설계해야 한다. 위계구조는 상하 계층 구조로 이루어져 있으므로 항해를 가능하게 하는 기본적인 링크는 각 페이지에서 상위 페이지로 이동하는 링크와 하위페이지로 이동하는 링크의 두 가지 유형이다.

4) 네트워크 링크(Network Links)

페이지들간에 서로 상호 참조된 링크(Cross-Referenced Links)나 도약이동을 가능하게하는 링크들이 증가하게 되면서, 사이트의 구조 자체가 일정한 형식이 없는 네트워크의 형태를 형성하게 된다. 네트워크 구조는 고객이 그 구조를 이해하고 예측하기가 어렵다는 단점이 있는 반면, 의미적으로 유사한 모든 페이지들을 자유롭게 연결할 수 있기 때문에 고객이 사고의 흐름이나 자신의 관심사에 따라 독특한 항해 패턴을 형성할 수 있다는 장점이 있다. 그러나 고객에게 명확한 공간적 방향감각을 제공하기 어렵고 구조자체가 불분명하기 때문에
다른 구조에 비해 고객이 항해 중에 혼란에 빠지기 쉽다.

4. 항해설계원칙

1) 목적에 맞게 디자인하라
: 고객이 인터넷비즈니스 시스템에서 상품을 구매하거나 정보를 입수할 때까지 고객의 목표와 행위를 적절하게 지원해 줄 수 있는 항해구조가 설계되어야한다.
예) 슈퍼마켓과 같이 고객이 원하는 상품을 빨리 찾아 구매하는 목적을 갖는다면, 원하는 상품을 빠르게 찾을 수 있도록 항해구조를 디자인해야한다.
반면에 박람회를 방문하는 것과 같이 고객에게 많은 상품을 구경할 수 있게 해주고 좋은 경험을 제공해주는 것이 목적이라면, 사이트 안에 있는 상품과 정보들을 많이 방문해 볼 수 있도록 항해시스템을 제공해야한다.
그리드 링크를 기본 링크로 사용하여 시간적 순서나 일정한 형식에 따라 수직적 링크와 수평적 링크를 통해 IBS에 제공하는 대로 편안하게 감상할 수 있는 시스템을 제공하는 방안이 있고 , 아니면 네트워크를 사용하여 고객이 자신의 관심사에 따라 자유롭게 서핑 할 수 있도록 풍부한 상호참조 링크를 제공해주는 방안이 있다.


2) 일관성을 유지하라
: 고객이 항해를 하는 과정에서 발생하는 혼란을 막기 위해서는 항해 지원 도구들이 일관성 있게 제공되어야 한다. 만약 Navigation menu가 화면의 상단에 제시되고 하위 menu로 이동할 수 있는 menu bar가 왼쪽에 제시되었다면, 어느 페이지에서나 동일한 형식으로 항해 링크를 제공해 주어야한다. Navigator가 menu page의 상단에 제시되었다가 다음 page
에서는 화면의 하단에 제시되고 그 다음 page에는 다시 상단에 제시된다면, 고객이 다른 곳으로 이동하기 위해 Navigation Bar를 화면의 위 아래로 찾아봐야 하는 불편함을 감수해야한다. 페이지 이름, 로고, 배너, 아이콘, 그리고 배경 색에 이르기까지 일관성 있게 제공해 주어야 고객이 현재 위치가 어디인지를 쉽게 알 수 있다.
일관성을 유지하기 위한 두 가지 항해 시스템 :
첫째, 전체적인 항해 시스템(Global Navigation System)확정 : 모든 페이지에서 제공되는 항해 시스템으로, 페이지마다 같은 위치에 제공해주는 것이 매우 중요하다. 즉, 상위 메뉴를
Navigation Bar로 화면의 제일 상단에 배치했다면, 모든 페이지에서 일관성을 유지해야 한다. 중요한 것은 어느 페이지에서나 고객이 항상 최상위 페이지인 홈페이지로 쉽게 되돌아갈 수 있게 만들어 주어야한다. 따라서, 전체적 항해 시스템은 대체로 최상위 홈페이지를
포함하여 주요 상위 메뉴들을 중심으로 Navigation Bar나 프레임을 만들어 고정적 링크로 화면에 배치하는 경우가 많다.
다음으로 국소적 항해 시스템(Local Navigation System)을 확정해야 한다. 이는 원칙에 따라 특정 페이지에만 제공해 주는 항해 시스템이다. 국소적인 항해 시스템의 원칙은 해당 페이지와 이웃하고 있는 메뉴 항목들을 화면의 하단에 Navigation Bar로 배치하는 것이다.
이렇듯, 국소적 항해 시스템은 페이지마다 달라질 수 있는 상대적 링크로 구성되며, 그 원칙과 제공되는 위치에서 역시 일관성이 있어야 한다.

3)가시적으로 명확하게 디자인하라
모든 항해 링크는 고객이 잘 알 수 있도록 명확하게 표시되어야 한다. 만약 항해 시스템이 복잡해서 사용법을 학습하기 위해서 많은 시간이 걸린다면 상품이 아무리 많이 구비되어 있다고 하더라도 고객은 사용하기 쉬운 IBS로 가버릴 것이다. 고객에게 명확한 시간적 메시지를 제공해 줄 수 있는 한 가지 방안은 아이콘을 사용하는 것이다. 링크의 내용에 대한 정보 전달력이 높은 항해 아이콘을 제공하고, 여기에 모호성을 없애기 위해 이해하기 쉬운
Label을 명명해 주는 방식이다. 항해 방법을 어떻게 표현해 주느냐는 항해 시스템을 얼마나 사용하기 쉬운가와 밀접한 관련이 있다. 수많은 텍스트와 그림들 속에서 정작 사용할 수 있는 항해 버튼이나 항해 링크가 분명하게 구분되지 않는다면, 고객은 사이트를 둘러보는데 많은 어려움을 느끼게 된다.
4) 위치에 대한 명확한 정보를 제공하라
현재의 위치가 전체 사이트 구조에서 어디에 해당되는지를 알려 줄 필요가 있다. 인덱스나
목차를 이용하는 내용 위치 표시 서비스를 제공하거나, 위치를 직접 확인할 수 있게 해주는 사이트 맵을 제공하는 직접적 방법이 있고, 전체적인 구조와 현 위치에 대한 가시성을 확보함으로써 위치에 대한 정보를 알려주는 간접적인 방법이 있다. 즉, 위계적인 구조라면 현재의 페이지가 어느 계층 수준에 해당되는지를 가시적으로 보여줄 수 있도록 메뉴 항목을 배열하는 방법이 있다. 시각적으로 위치, 크기와 같은 요인들을 일관성 있게 사용, 가시성제공.

5) 명확한 피드백을 제공하라
: 항해에서도 자신이 정보를 찾기 위해 제대로 가고 있는지를 알려주는 명확한 피드백을 제공해야한다. 즉, 마우스를 갖다 대면 반전이 되면서 색이 변한다든지, 현재 페이지에 해당하는 메뉴 바의 크기나 색이 달라진다든지, 한번 방문했던 곳의 텍스트 색이 변화한다든지 하는 것들이 항해에서 피드백을 제공해주는 예이다. 이러한 피드백은 자신이 방문한 페이지가 원래 가고자 했던 페이지인지를 확인시켜 주면서, 앞으로 가야할 방향을 가늠할 수 있게 해준다.

6) 링크를 점검하라
: 계속 클릭을 하다 보면 홈페이지를 거치지 않고 사이트의 위계구조 깊숙이 묻혀 있는 정보에 직접 접근하게 된다. 그러나 그 페이지 내에 홈페이지나 기타 다른 페이지로 갈 수 있는 링크도 없고, 사이트에 대한 소개도 없어 사이트의 정체를 알 수 없는 경우가 있다. 이 경우 고객은 그 사이트를 더 둘러보며 다른 정보를 알아보고 싶어도 방법이 없어서 포기하게 될 것이다. 그러면 인터넷비즈니스 시스템에 더 머물면서 상품을 구매할 수도 있는 잠재고객을 붙잡지 못하게된다. 다른 웹 시스템도 마찬가지겠지만, 특히 인터넷 비즈니스 시스템에서는 이런 막다른 페이지(Dead-End)를 만들어서는 안 된다. 어떤 페이지에서든 홈페이지나 기타 다른 페이지로 이동이 가능하게 만들어야 한다. 전체적 항해 시스템을 확정해 어떤
페이지에서나 접근 가능한 고정적인 Navigation Bar를 제공해 주는 것도 막다른 페이지를 방지하는 한 가지 방안이 될 것이다. 최근에는 이를 확인해주는 프로그램도 개발되어 있다.

7) 좋은 구조를 갖도록 하라
: 항해할 때 위치를 직관적으로 쉽게 알 수 있도록 구조를 설계하는 것은 매우 중요하다. 좋은 구조가 뒷받침되지 않으면 아무리 항해 설계를 잘해도 소용이 없기 때문이다. 어디에 무엇이 있는지에 대해 고객이 끊임없이 추리해야 한다면, 아무리 좋은 상품이 있다고 해도 고객은 발길을 돌리게 될 것이다. 상품을 찾다가 미로에 빠진 기분이 드는 경우는 생각보다 흔하다. 아무리 구조가 단순해도 범주(Category)를 명확히 구분해 놓지 않으면, 즉 고객이 생각하기에 당연히 있으리라고 생각되는 곳에 상품이 없고 엉뚱한 곳에 상품이 놓여져 있다면, 쉽게 그 상품을 찾을 수 없다.
사이트의 깊이와 너비가 깊고 커질수록 인터넷 비즈니스 시스템은 복잡한 구조를 갖게된다.
또한 상품 페이지나 실제로 정보가 있는 페이지로 이동하는데 필요한 중간 페이지들이 증가하면, 고객은 원하는 상품을 찾기도 전에 좌절하게 되기 쉽다. 그렇다고 해서 많은 상품과 정보를 담고 있는 페이지들을 전부 홈페이지나 두 번 째 수준의 페이지에 나타낼 수 없다.
연구에 의하면 깊이가 5 수준 이상으로 깊어지면 항해 편리성이 감소하는 것으로 나타났다.
따라서 되도록 4 수준 이하로 깊이를 설계하되, 만약 깊이가 그 이상으로 깊어지면 항해 지름길을 제공한다든지 미리 보기(Preview)기능을 추가하여 하위 수준을 미리 보여주고 이동할 수 있게 해주는 방법을 써야한다. 또한 하위 수준에 있는 페이지들 간에 중간 수준을 거치지 않고도 원활한 이동이 가능하도록 설계해야한다.




8) 정황(Context)이 나타나도록 디자인하라
: 고객은 현재 위치는 물론이고 상품의 위치에 대한 감을 잡기 위해 정황 정보를 필요로 한다. 항해 행위는 특정한 정보환경 하에서 발생하는 것이기 때문에, 고객이 웹에서 방향을 잃지 않도록 정황을 알 수 있게 디자인하는 것은 매우 중요하다.
공간적 정황(Spatial Context) : 원하는 정보나 상품을 찾기 위해 어디로 가야하는지, 그리고 어떻게 가야하는지에 대한 위치에 따라 고객에게 직관을 줄 수 있다. 사이트 맵과 같은 전반적인 구조 도에 전체의 내용을 전부 표현할 수 없는 경우에 특히 정황정보가 더 중요해진다. 그런 경우에는 국소적으로 구조 정황을 제공해주어 고객의 인지적 부담감을 덜어 주어야한다. 현재 위치에서 갈 수 있는 곳을 두세 단계까지 확장해서 보여준다거나, 클릭해서 들어가기 전에 어떤 정보가 나올지 알 수 있도록 링크 단서(Link Cue)를 제공해주는 방법이 있다.
시간적 정황 : 사용자가 현재 위치까지 어떻게 도달했는지에 대한 답을 제공해준다. 이는 자신이 무엇을 위해 여기까지 왔는지에 대한 이해를 돕고, 지나온 곳을 다시 가고 싶을 때 쉽게 되돌아갈 수 있도록 도움을 준다. 웹에서 제공해주는 History 메커니즘은 최근에 방문한 사이트를 중심으로 구성되기 때문에 특정 사이트 내에서의 시간적인 정황을 제공해 준다면, 자신이 이곳에 어떻게 도달했는지에 대한 피드백과 함께 상품을 선택하고 비교할 때 쉽게 돌아보기(Preview)를 가능하게 해준다. 현재 위치에 있는 상품과 이전에 보아둔 상품을 비교하고 싶은데 어떻게 되돌아가야 하는지 몰라서 비교하지 못한다면, 고객은 그 IBS에서의 상품 구입을 포기하게 될 것이다.

5. 항해 디자인 방법

많은 정보를 효과적으로 조직화하여 계층적으로 표현할 수 있기 때문에 대부분의 인터넷 비즈니스 시스템은 위계구조로 이루어져있다.

1) 효과적인 항해구조'
: 인터넷 쇼핑몰에서 사용중인 부가적 링크는 고정적 상위 이동, 고정적 하위이동, 상대적 상위이동, 상대적 하위이동, 수평이동으로 분류할 수 있다.
수평링크 : 이동 방향이 수평적이면서 계층에 따라 변하는 부가적 링크로서, 자신이 위치한 상점과 이웃한 상점으로 수평이동을 가능하게 하는 링크이다.
고정적 상위링크 : 이동 방향이 상위이면서 현재 위치에 관계없이 어느 계층에서나 상위 메뉴로 고정되어 있는 링크이다.
상대 상위링크 : 이동 방향이 상위이면서 계층구조의 단계에 따라 상대적으로 변하는 링크이다. 즉, 만약 고객이 특정 노트북 컴퓨터에 대한 상품정보를 보고 있다면 상위 노드는 노트북컴퓨터코너가 된다. 이때 상대 상위 링크는 노트북컴퓨터코너와 인접한 위치에 있는 프린터 코너라든지 컴퓨터 코너가 된다. 이때 상대 상위 링크는 노트북 컴퓨터 토너와 인접한 위치에 있는 프린터 코너라든지 컴퓨터 부품코너로도 이동할 수 있게 해준다.
고정하위링크 : 이동방향이 하위이면서 어느 계층에서나 하위 메뉴로 고정되어 제공되는 링크이다.
상대하위 링크 : 이동방향이 하위이면서 계층구조의 단계에 따라 상대적으로 변하는 부가적 링크이다. 만약 고객이 어떤 매장에 있다면 상대 하위링크는 다른 매장에 있는 코너들이 된다.
수평링크의 제공은 기본 링크의 사용빈도를 크게 감소시키면서, 고정 상위링크나 고정하위링크의 사용을 활성화시키는 긍정적인 효과가 있다.
상대상위링크나 상대하위링크는 다른 부가적 링크들과 기능이 중복되거나 혼동됨에 따라 오히려 다른 부가적 링크의 사용빈도를 감소시키는 부정적인 역할을 한 것으로 나타났다.
또한 수평 링크를 통해 이동한 경우에는 그 활용 정도가 높았기 때문에 많은 고객들이 정확하게 회상했지만, 상대상위링크나 상대하위링크를 통해 이동한 경우에는 제대로 활용되지
못했기 때문에 이를 기억하는 고객도 적었을 뿐만 아니라 다른 부가적 링크로 잘못 회상하는 오류가 발생했다. 이에 따라 수평링크가 제공된 경우 쇼핑과정에서 탐색과 항해에 편리함을 느꼈으며 상품비교에도 도움이 되었다고 반응하였다.
결국 여러 가지 부가적 링크를 한꺼번에 많이 제공된 부가적 링크를 충분히 활용하면서 그 기능을 쉽게 파악할 수 있을 만큼만 제공해주어 인지적 부담을 느끼지 않도록 해야하기 때문이다. 수평 이동을 가능하게 하는 수평적 링크와 수직상승이동을 가능하게 하는 고정상위 링크 및 수직 하강이동을 가능하게 하는 고정하위링크를 부가적 링크로 활용하는 것이
효과적인 항해 디자인방법이 될 것이다.

2) 정황의 제공방법
: 특정한 상품을 찾기 위해 주로 검색엔진을 사용하지만, 검색엔진이야말로 가장 극단적인 비 정황 정보에 해당한다고 할 수 있다. 검색엔진을 통해 어떤 페이지에 도달했더라도 그 페이지에서 충분한 정황을 제공해준다면, 관련된 상품을 더 찾아보기도 쉽고 고객이 자신의
항해과정을 통제하기도 훨씬 수월해질 것이다.
구조적 정황(Structural Context) : 현재 위치에서 상위 수준과 하위 수준으로 두 단계 수직
확장시키고 , 이웃한 수준에 해당하는 페이지들에 대해 수평적으로 확산시킨 조망링크(Spatial Links)를 제공한다. 이러한 조망링크는 고객이 현재 위치한 곳과 인접한 페이지들에 대한 주변정보를 제공함으로써, 다음에 어떤 정보가 올 지에 대해 미리 보기(Preview)와
도약이동을 가능하게 한다.
시간적 정황(Temporal Links) : 현재의 위치와 함께 고객이 지나온 이전 노드를 보여주는 경로링크(Path Links)를 제공할 수 있다. 경로링크는 지나온 정보들에 대한 돌아보기(Review)를 가능하게 하면서 방문했던 곳으로 도약 이동을 가능하게 한다. 조망링크는 다음에 어떤 정보가 나타날 것인지에 대한 예측을 가능하게 하는 전방탐색(Forward Navigation)을 촉진하고, 한번에 고려할 수 있는 정보의 범위를 확장시켜준다. 경로링크는 이전에 방문했던 정보를 후방탐색(Backward Navigation)을 촉진하고, 기억에 저장하고 있지
않더라도 지나온 정보들을 손쉽게 다시 고려할 수 있도록 해준다.

6. 고객구분에 다른 항해 전략
1) 손님 대 회원: 회원전용 전략(All or Nothing Strategy), 접근통제전략(Access Control
Strategy), 테스트-유도전략(Test-Driven Strategy)
2) 고객화(Customization)항해 전략 : 현재는 고객의 요구 사항을 몇 가지로 정의해서 분류해 놓은 뒤 회원에 가입할 때 표기하여 그에 해당하는 서비스를 제한적으로 제공하나, 향후,
자율적(Autonomous Agents), 지능형(Intelligent Agents), 사용자(User-Agents)의 도움을 받아 방향감각도 유지하고, 상품을 비교하기 위한 가장 효율적인 경로를 구성하고, 다양한 상품정보를 원하는 만큼 제공받을 수 있는 항해가 가능한 것이다. 에이전트는 고객 개개인의 요구에 신속히 응대하고 고객과 상호 작용하면서 항해의 전 과정에 도움을 줄 수 있다.

에이전트 외에도 객체 지향적 방법을 적용해 고객화 항해 전략에 이용할 수 있다. 여러 가지 다양한 항해 객체를 고객이 선택하도록 하여 고객과 IBS와의 상호작용을 지원해주는 것이다. 즉, 전체적인 항해 시스템으로 구성할 Navigation Bar를 고객이 인덱스를 보고 직접 선택하여 구성하도록 한다거나, 국소적 항해시스템을 구성하는 기본 원칙을 고객이 직접 선택하여 구성하도록 한다거나, 국소적 항해 시스템을 구성하는 기본 원칙을 고객이 직접 선택할 수 있도록 하는 방식이다. 색이나 글씨체, 버튼 디자인, 화면구성 등을 항해 일관성을 나타낼 수 있는 객체의 속성을 고객이 직접 조작하여 조합할 수도 있을 것이다. 이러한 객체 지향적 방법은 고객이 직접 자신의 흥미에 따라 항해 객체를 구성하기 때문에 고객 개개인의 요구에 부응하는 항해 설계가 가능해진다.

7. 항해설계절차

1)과업-흐름 다이어그램(Task-Flow Diagram)
: 항해 설계를 위해 가장 먼저 해야 할 작업은 고객이 그 IBS에서 하게 하는 과업의 흐름을
파악하여 과업의 흐름에 적합한 향해 링크를 제공하는 것이다. 과업이 파악되면, 페이지를 하나의 점이나 원으로 표시한 뒤 IBS에서 나타나는 과업의 흐름을 표시해주고 기본 링크 외에 제공되는 부가적 링크와 교차적 연결을 표현해 준다. 전체적인 항해 시스템은 계층별로 한 번만 표시하고, 이벤트로의 연결과 같은 국소적인 항해 시스템은 제공되는 모든 경우에 표시해준다.
2) 문서 원형(Paper Prototype)
: 페이지의 구성을 밀 종이에 작성해 보는 것이다. 보편적 항해 통제는 물론이고 내용 위치 표시 서비스와 위치 확인과 같은 핵심 항해 요인을 어떤 식으로 구성할 것인지를 종이에 작성하여 문서 원형을 만든다.
3) HTML 원형(HTML Prototype)
확정된 문서 원형을 기초로 하여 HTML로 원형을 제작한다. 그래픽을 제외하고 텍스트로만
구성하여, 실제로 고객과 상호작용이 제대로 이루어지는지 평가해 본 뒤, 수정, 보완하는 작업을 거친다.

8. 인터넷비즈니스 항해 설계지침(B2C 물리적 상품)
-기본 링크로 계층링크 사용
-전체적 항해 시스템제공-고정 상위 링크, 고정 하위링크, 경로링크
-국소적 항해시스템제공-조망링크
-위치에 대한 명확한 정보제공
-링크점검
-공간적 정황 정보제공
-시간적 정황 정보제공
0;'