사내 웹사이트 구축에 참여해 본 분들이시라면 다음의 이야기에 공감하실 겁니다.

웹사이트 구축을 의뢰한 사측 관리자는 보통은 복잡한 문서를 넘겨주고 웹사이트에 들어갈 자료이니 알아서 분류해서 메뉴를 만들어 달라고 요구를 합니다.

웹사이트 개발을 맡은 개발자는 혼자서 아이디어를 구상하고 열심히 웹사이트를 만들고 나면, 왠지 구조가 맘에 안 들거나 구성이 짜임새가 없어 보인다고 핀잔을 듣기 일쑤입니다.

서로의 의견이 조율될 때까지 개발자는 스트레스와 업무에 시달리게 되고, 관리자는 늦어지는 사이트 오픈에 조바심과 불안함을 가지고 지켜보게 됩니다. 결국, 적당한 합의를 보고 사이트를 오픈 하지만 100% 맘에 들 수는 없다는 말로 위안을 삼죠..

여러분 언제까지 이런 일들을 반복하실 건가요?
또 이렇게 어렵게 구축한 웹사이트 제대로 운영되고 있는지 확인은 해보시나요?

Visio 2007의 웹사이트 관리 기능을 이용하여 가장 효율적으로 웹사이트를 계획하고 관리하는 방법을 알려드리겠습니다.
이번 팁을 통해서 익히게 되는 기능을 정리하면 다음과 같습니다.

1. 웹사이트 개념도 작성
2. 웹사이트 맵 작성

웹사이트 구축과 관리를 위한 템플릿

Visio 2007는 웹사이트를 구축하고 관리하기 위한 템플릿을 제공하고 있습니다.

1. [파일]-[새로 만들기]-[시작] 메뉴를 이용하면 다양한 템플릿을 선택할 수 있습니다.
그 중 [네트워크] 또는 [소프트웨어 및 데이터 베이스] 범주에서 웹사이트 템플릿을 찾을 수 있습니다.

2. 아래 이미지는 Visioplus.com 사이트 기획 당시 [웹 사이트 개념도]를 이용하여 사이트를 기획한 결과물입니다. [웹 사이트 개념도]는 아래와 같이 웹 사이트의 콘텐츠, 메뉴 구분, 디렉터리 구분 등 관리자와 개발자 사이에 커뮤니케이션을 편리하게 하기 위해 사용합니다.

3. [웹 사이트 개념도]를 이용하는 방법은 순서도, 조직도 그리는 방법과 유사합니다.
웹사이트 개념도에서 제공하는 [웹 사이트 개념도 셰이프]를 이용하여 적절히 관계를 연결하면 됩니다. 이전 팁들을 통해 셰이프를 연결하고 활용하는 방법을 알아봤으므로, 이번 팁은 [웹사이트 맵]을 위주로 진행하겠습니다.

4. Visio 2007을 실행시키고 [템플릿 범주]에서 [소프트웨어 및 데이터베이스]를 선택하고  [웹 사이트 맵]을 클릭합니다.

5. 웹사이트 맵을 시작하면 다음과 같이 웹 주소를 넣을 수 있는 창이 나타납니다.
자주 들어오는 오피스튜터 사이트는 어떻게 관리되고 있는지 한번 확인해볼까요?
[주소] 입력란에 http://www.officetutor.co.kr 을 입력합니다.

6. 만일 사이트를 읽어올 때, 읽혀지는 사이트의 설정을 조정하고 싶다면, [설정] 메뉴를 클릭합니다.

1) [웹사이트 맵 설정]의 [레이아웃]탭에서 읽어오려는 링크의 최대 수와 링크 수준 (depth) 등을 조절할 수 있습니다.
[기본 셰이프 텍스트]는 사이트를 읽어서 그 사이트를 표시할 때 주소를 표시하도록 하거나 HTML 제목을 표시하면, 확인하기에 편리합니다.
지금은 기본 설정인 [상대 URL]을 선택합니다.

2) [확장명],[프로토콜],[특성] 탭에서는 인식할 수 있는 웹 사이트의 형식, 종류를 구분하여 선택할 수 있습니다.

① [프로토콜] 탭
Visio 2007의 경우 HTTP, HTTPS, File, FTP, GOPHER, MailTo, NEWS, NNTP, PROSPERO, TELNET, WAIS 등의 프로토콜을 지원합니다.

② [특성] 탭
웹 사이트 맵은 HTML내의 하이퍼링크 값을 읽어서 표현하게 된다. 상황에 따라서 아래와 같은 HTML 태그 내부에 정의된 속성의 링크 값들은 표시하지 않도록 조절할 수 있다.

3) [고급] 탭에는 사이트 맵을 그리기 위한 영역을 설정합니다.

① 검색조건
다음 3가지 다른 방법 중 한 가지 검색 방법을 선택합니다.

I. 검색한 모든 파일 분석 : 조건 없이 모든 링크된 사이트를 검색합니다.
II. 지정한 도메인에 있는 파일 분석 : 입력 주소의 도메인 내부에 포함된 사이트를 검색합니다.
III. 지정한 디렉터리에 있는 파일 분석 : 입력 주소와 같은 폴더 내의 사이트를 검색합니다.

② HTTP 인증
만일, 웹 서버에 접근할 때에 암호 인증이 필요하다면, HTTP 인증란에 아이디와 패스워드를 입력합니다.

7. [설정] 메뉴의 모든 옵션을 기본 상태로 유지하기 위해 [웹 사이트 맵 설정] 창의 [취소] 버튼을 누르고 빠져나옵니다.

8. 마지막 단계로 웹 사이트 맵을 그리기 위해 [사이트 맵 생성] 창에서 [확인]을 클릭합니다.

9. 드디어 입력한 사이트의 웹사이트 맵이 그려졌습니다.

10. 각 아이콘이 무엇을 나타내는지는 [웹 사이트 맵 셰이프]의 셰이프를 확인하면 알 수 있습니다.

11. 대부분의 맵 셰이프 옆에는 아래와 같이 군인 마크와 같은 모양이 덧붙여져 있습니다.
이 표시는 이 사이트를 확장할 수 있다는 표시입니다.

12. 마우스 오른쪽 버튼을 클릭한 후 바로 가기 메뉴 중 [하이퍼링크 확장]을 선택하여 사이트의 링크 정보를 트리 구조로 확인할 수 있습니다.

13. [하이퍼링크 확장]메뉴를 클릭하면 모든 트리의 마지막에 선택한 셰이프의 복사본과 그와 링크된 사이트들이 추가로 표시됩니다.

14. 사이트 맵 중간에 아래와 같이 X 표시가 빨갛게 되어 있는 사이트도 있습니다.
이미지의 X 표시는 읽어온 콘텐츠에 연결된 하이퍼링크 주소가 정확하지 않을 경우 나타납니다. 웹 사이트에 잘못된 주소가 없는지 확인하는 것도 웹 사이트 맵을 그리는 가장 큰 이유 중 하나입니다.

15. 사이트 맵으로 그려진 구조가 너무 복잡하거나 콘텐츠가 너무 많을 경우, 그 종류에 따라 구분하여 볼 수 있도록 [필터 창]과 [목록 창]을 제공하고 있습니다.
각 창의 리스트 앞에 있는 체크박스의 선택을 해제하면 해당되는 페이지와 그와 연결된 하이퍼링크, 또는 해제된 종류의 콘텐츠는 사이트 맵에서 지워지게 됩니다.

16. 마지막으로 웹사이트 맵이 제공하는 또 하나의 멋진 기능인 [보고서]를 이용해 보도록 하겠습니다. [웹 사이트 맵]-[보고서]를 클릭합니다.
사이트 맵을 이용하여 깨진 링크, 등록된 콘텐츠, 사이트의 구조 등을 시각화하여 파악하기도 이 사이트 맵을 텍스트로 표시하여 엑셀 파일로 변환하여 모든 링크 정보를 표시하거나, 오류를 가진 링크 정보를 보고서로 출력할 수 있습니다.

17. [보고서] 리스트에서 웹 사이트 맵 링크(오류 포함)을 선택하여 보고서를 작성해 보겠습니다. [보고서] 창의 보고서 목록 중 [웹 사이트 맵 링크(오류 포함)]을 선택하고 [실행]을 클릭합니다.

18. [보고서 실행] 창의 [보고서 형식 선택] 목록 중에서 [Excel]을 선택하고 [확인]을 클릭합니다.

19. 오피스튜터 사이트는 1개의 링크가 깨져있고, 이 링크는 비트맵 파일과 연결된 링크입니다.

실전 응용관리자님을 대신하여 제가 깨진 링크를 확장하여 어떤 비트맵 파일인지 확인해보겠습니다.
위에서 다룬 방법 중 사이트를 선택하여 마우스 오른쪽 메뉴를 보면 [하이퍼링크 확장]이 있었죠.