프로그램을 사용하다가 궁금한 점이 있으면 보통 [F1] 키를 눌러 프로그램에 대한 온라인 기술 문서(또는 도움말)를 확인하게 된다. 이때 나타나는 도움말 형식에는 여러 가지가 있지만 대부분은 [그림 1]과 같은 HTML Help 형식의 도움말이 나타날 것이다. 여기에서는 이런 형식의 도움말 제작에 대해 평소 관심이 있었던 업체나 사람들에게 하나의 길잡이가 될 수 있도록 HTML Help를 만드는 과정을 5회에 거쳐 진행될 예정이다.
하지만 HTML Help란 말을 처음 듣거나 또는 이에 대해 자세히 알지 못했던 사람이라면 먼저 이런 질문이 떠오를 것이다. 'HTML Help란 무엇이고 어떻게 작동하는 것인가?' 따라서 본격적인 작업에 앞서 HTML Help에 대해 간단하게 살펴보기로 한다.
HTML Help의 개요와 구성
HTML Help는 MS에서 32비트 윈도우 애플리케이션용으로 1997년에 개발되었으며, HTML 형식에 기반을 둔 온라인 도움말의 표준이다. HTML Help의 파일 형식은 '*.chm'이며, 이 파일을 더블 클릭하여 직접 실행하거나 프로그램과 연동되어 있는 경우 관련 메뉴를 선택하거나 F1키를 눌러 실행할 수 있다. 오늘날 다수의 소프트웨어에서 HTML Help를 기본 도움말 형식으로 사용하고 있는데 그 이유를 몇 가지로 요약해 보면 다음과 같다.
- 사용자의 시스템 환경에 거의 영향을 받지 않는다.
사용자의 시스템에 인터넷 익스플로러 3.01 이상만 설치되어 있으면 인터넷 익스플로러가 기본 브라우저가 아니더라도 HTML Help 형식의 도움말을 사용할 수 있다.
- 문서를 동적으로 작성할 수 있다.
HTML Help가 개발되기 이전에 많이 사용했던 WinHelp와 달리 HTML Help는 HTML 파일(*.htm)로 구성되기 때문에 HTML 파일 자체에서 사용할 수 있는 CSS, DHTML, 스크립트 등의 모든 요소를 활용할 수 있다. 또한 문서 작성 방법이 HTML 파일과 동일하기 때문에 별도로 문서 작성 방법을 학습할 필요가 없다.
- 파일 관리가 용이하다.
여러 개의 HTML 파일과 부속 파일들을 하나의 파일(*.chm)로 컴파일하여 사용할 수 있으며, 필요한 경우 디컴파일하여 쉽게 원래의 상태로 되돌릴 수도 있다. 또한 HTML Help로 컴파일한 파일(*.chm)은 실제 원본보다 훨씬 작은 용량으로 저장할 수 있다. 예를 들어 '나모 웹에디터 FX 도움말'에서 사용한 전체 파일 용량은 약 21MB이지만 HTML Help 형식의 파일(webeditor.chm)로 만들면 약 1/3인 8MB가 된다.
 |
| [그림 1] HTML Help 형식의 도움말 구성 |
- 도구 모음: 내비게이션 창을 숨기거나 보이게 하는 버튼, 토픽 창에 나타난 내용을 인쇄할 수 있는 버튼 등으로 구성되어 있다. HTML Help를 만들 때 도구 모음에 대한 설정을 별도로 하지 않으면 기본적으로 숨기기, 뒤로, 옵션, 인쇄 단추가 나타나며, 필요에 따라 도구 모음의 구성을 변경할 수 있다.
- 내비게이션 창: HTML Help의 왼쪽에 나타나며, 목차 탭, 색인 탭, 검색 탭, 즐겨찾기 탭 등으로 구성된다. 각 탭은 HTML Help의 내용을 쉽고 편리하게 찾을 수 있도록 도와주는 역할을 하며, 작업자가 내비게이션 창에 나타날 탭 종류를 선택할 수 있다.
- 토픽 창: HTML Help의 내용을 표시하는 부분으로 앞서 언급한 것처럼 HTML Help는 HTML 파일을 기반으로 하기 때문에 텍스트 뿐만 아니라 그림이나 멀티미디어적 요소, 스크립트 효과 등도 표현할 수 있다. 필요한 경우 내비게이션 창 없이 토픽 창만 나타나도록 HTML Help를 만들 수도 있다.
- HTML Help 시스템 설계하기
- 프로젝트와 목차 만들기
- 색인 만들기
- 검색 및 즐겨찾기 기능 구현하기
- 컴파일 및 테스트하기
- 기타 옵션 설정하기
- 디컴파일하기
집을 지을 때 정확한 설계도가 있어야 작업에 필요한 인력과 시간, 비용을 미리 예상하여 경제적이고 튼튼한 집을 지을 수 있는 것처럼 HTML Help를 만들 때에도 HTML Help 시스템에 대한 계획을 세워야 시행착오 없이 작업자가 원하는 결과를 도출할 수 있다. 따라서 다음 항목에 대해 살펴보고 계획을 세우는 것은 매우 중요한 일이다.
- HTML Help 대상 정하기
누구를 대상으로 할 HTML Help를 만들 것인지를 생각한다. 초보 사용자를 대상으로 한다면 기본적인 내용에 대한 설명과 내용을 이해하기 쉽도록 그래픽적 요소를 많이 사용해야겠지만 고급 사용자를 대상으로 한다면 기본적인 내용에 대해서는 간략히 설명하고 대신 고급 기능에 대한 설명을 넣어야 할 것이다.
- 내용 기술 방법 정하기
문서를 어떤 방식으로 기술할 것인지를 정한다. 보통 사용자가 직접 따라하면서 기능을 익힐 수 있는 '따라하기' 식과 각 기능에 대해 풀어서 설명하는 '참고서' 식으로 나눌 수 있다.
- 내비게이션 창 구성하기
내비게이션 창을 구성할 탭의 종류를 정한다. 내비게이션 창을 구성할 탭의 종류에 따라 작업 순서나 시간이 달라질 수 있다. 예를 들어 색인 탭을 추가하는 경우 키워드를 추가하여 색인 파일을 만드는 작업 시간을 더 추가해야 한다.
- HTML Help 저작 도구 정하기
어떤 프로그램을 이용하여 HTML Help를 만드느냐에 따라 문서 작성 방식이 달라질 수도 있다. 예를 들어 HTML 파일에 자바 스크립트를 삽입하여 구현할 수 있는 효과를 프로그램 자체에서 메뉴로 제공하는 경우도 있다.
- 폴더 구조 및 파일 이름 정하기
HTML Help 프로젝트가 큰 경우에는 관련 파일의 개수도 많아지게 된다. 따라서 관련 파일을 쉽게 관리할 수 있도록 폴더 구조를 잘 설정하고 파일 이름만으로도 문서 내용을 파악할 수 있도록 파일 이름을 붙이는 규칙을 미리 만들어 두는 것이 좋다. 여러 명이 프로젝트를 진행하는 경우에는 HTML Help를 구성할 문서의 개수와 파일 이름, 위치 등을 한번에 확인할 수 있도록 아래와 같은 목차 파일을 이용하는 것도 좋은 방법 중의 하나이다.
[그림 2] 도움말에 대한 목차 파일
- HTML 파일 스타일 정하기
HTML 문서를 작성할 때 공통된 스타일을 유지하려면 스타일 시트(*.css)를 사용하는 것이 좋다. 특히 규모가 큰 프로젝트를 여러 명이 나누어 진행하는 경우에는 아래와 같이 각 요소에 대한 글꼴, 크기, 줄 간격 등에 대한 스타일 시트를 정의하여 공유하는 것이 바람직하다. 마찬가지로 여러 문서에서 공통적으로 사용할 스크립트 효과가 있다면 스크립트 파일(*.js)도 만들어 공유한다.
[그림 3] 스타일 시트의 예
[그림 4] 스타일 시트가 적용된 HTML Help
지금까지 HTML Help의 개요와 HTML Help 시스템을 설계할 때 고려해야 할 사항들에 대해서 살펴보았다. 다음 시간에는 HTML Help 저작 도구를 선택하여 프로젝트를 만들고 목차를 생성하는 방법에 대해 자세히 살펴보겠다.
출처 : 김유진 ( (주)세중 나모 인터랙티브 개발본부 )
