강좌/Help File 제작2010. 3. 23. 10:45

HTML Help에 대한 시스템을 목적에 맞게 설계하여 이에 따라 구성 파일들 즉, 토픽 파일과 그림 파일, 스타일 시트, 스크립트 파일 등을 만들었다면 이제는 이 파일들을 관리할 수 있는 프로젝트 파일(*.hhp)을 생성하고 사용자가 전체 문서 구조를 한번에 파악할 수 있도록 목차 파일(*.hhc)을 만들어야 한다.


프로젝트 파일이나 목차 파일은 텍스트 파일이기 때문에 메모장과 같은 텍스트 에디터를 이용해서도 만들 수 있지만 관련 소스에 대해 따로 학습해야하고 큰 규모의 프로젝트를 진행할 경우 작업 시간이 오래 걸릴 수 있으므로 쉽게 파일을 생성하고 관리할 수 있는 전문 저작 프로그램을 사용하는 것이 좋다. HTML Help 형식의 도움말을 만들 수 있는 프로그램으로는 eHELP의 Robohelp와 MS 사의 HTML Help Workshop, ComponentOne 사의 Doc-To-Help, EC Software 사의 Help&Manual 등이 있는데 여기에서는 비교적 사용 방법이 간단하고 무료로 다운로드 받아 사용할 수 있는 MS 사의 HTML Help Workshop 1.31을 이용하여 프로젝트 파일과 목차 파일을 만들고 나아가서는 최종 컴파일 결과물인 CHM 파일을 만드는 방법에 대해서 살펴보겠다.

프로젝트 파일 만들기
HTML Help의 프로젝트 파일(*.hhp)은 HTML Help 프로젝트의 여러 가지 요소를 하나로 묶어놓은 파일로 HTML로 작성된 토픽 파일(*.html), 그림 파일(*.jpg, *.gif, *.png), 색인 파일(*.hhk), 목차 파일(*.hhc) 등을 모두 컴파일한 HTML Help(*.chm)로 만들기 위해 필요한 정보가 포함되어 있다. HTML Help Workshop을 이용하여 프로젝트 파일을 새로 생성하는 방법은 다음과 같다.

  1. HTML Help Workshop을 실행한 뒤, 메뉴에서 File > New를 선택한다.
  2. New 대화 상자가 나타나면 'Project'를 선택한 뒤, OK 버튼을 누른다.
  3. New Project 대화 상자가 나타나면 다음 단추를 누른다.
  4. New Project - Destination 대화 상자가 나타나면 Browse 단추를 눌러 프로젝트 파일을 저장할 위치(보통 토픽 파일이 저장된 폴더)를 선택하고 파일 이름을 입력한 뒤, 열기 단추를 누른다.
  5. New Project - Destination 대화 상자에서 다음 단추를 누르면 나타나는 New Project - Exisiting Files 대화 상자에서 'HTML files(*.htm)'을 선택한 뒤, 다음 단추를 누른다.
  6. New Project - HTML Files 대화 상자가 나타나면 Add 단추를 눌러 열기 대화 상자에서 토픽 파일(*.html)을 모두 선택한 뒤, 열기 단추를 누른다. 만약 문서에 그림 파일이나 스타일 시트 등을 사용하였다면 열기 대화 상자의 '파일 이름'에 '*.*'을 입력하고 열기 단추를 눌러 모든 파일이 나타나게 한 다음 파일을 추가한다. 그래야 CHM 파일로 컴파일했을 때 토픽 파일에서 사용한 부속 파일들도 제대로 나타난다.
  7. New Project - HTML Files 대화 상자에서 다음 단추를 누르고 New Project - Finish 대화 상자가 나타나면 마침 단추를 누른다. Project 탭에 다음과 같은 내용이 나타나면 성공적으로 프로젝트 파일이 생성된 것이다.
    그림 1 프로젝트 파일의 내부 구조
위 과정으로 만든 프로젝트 파일 내부를 살펴보면 <그림 1>과 같이 몇 개의 섹션으로 나뉘어 있는 것을 볼 수 있는데 각 섹션에서 확인할 수 있는 정보는 다음과 같다.

  • OPTION: 프로젝트 파일의 기본적인 옵션에 대한 내용이 나타나는 섹션으로 별도로 옵션을 지정하지 않더라도 Compatibility와 Compiled file, Default topic, Display compile progress, Language의 항목이 기본값으로 나타난다. 이 중 'Compiled file'에 표시되는 컴파일 결과 파일(*.chm)의 이름은 위 4 과정에서 지정한 프로젝트 파일 이름과 동일하게 지정되고, 'Default topic'은 FILES 섹션 가장 위에 있는 파일이 자동으로 지정된다. OPTION 섹션에 나타나는 항목에 대한 설정은 Project 탭의 도구 막대에서 Change project options 단추를 눌러 변경할 수 있다.
  • WINDOWS: 컴파일된 HTML Help(*.chm)를 실행했을 때 HTML Help가 표시되는 윈도우의 제목과 이름, 크기, 위치 등에 대한 내용이 나타나는 섹션이다. 프로젝트 파일을 만든 뒤, Project 탭의 도구 막대에서 Add/Modify window definitions 단추를 눌러 따로 추가해 주어야 한다.
  • FILES: 프로젝트 파일에 추가한 파일 목록이 나타나는 섹션으로 토픽 파일 뿐만 아니라 그림 파일, 스타일 시트, 스크립트 파일 등 추가한 모든 파일에 대한 목록이 나타난다.Project 탭의 도구 막대에서 Add/Remove topic files 단추를 눌러 파일을 추가하거나 삭제할 수 있다.
목차 파일 만들기
위 과정으로 프로젝트 파일(*.hhp)을 만들었다면 이제는 목차 파일(*.hhc)을 만들어 보자. 프로젝트 파일이 HTML Help의 전체 속성에 대해 정의한 파일이라면 목차 파일은 내비게이션 창의 목차 탭에 나타날 내용에 대해 정의한 파일로 목차 탭은 사용자가 자신이 찾으려는 도움말의 주제를 잘 알고 있거나 책을 읽듯이 도움말 전체를 훑어보려고 할 때 주로 사용된다. HTML Help Workshop의 옵션을 이용하여 자동으로 목차 파일을 생성할 수도 있지만 이럴 경우 작업자의 의도와 다른 결과가 나올 수 있기 때문에 번거롭더라도 다음과 같은 과정으로 직접 목차를 추가하는 것이 좋다.

  1. HTML Help Workshop에서 Content 탭을 선택한다. Table of Contents Not Specitied 대화 상자가 나타나면 'Create a new contents file'을 선택한 뒤, OK 단추를 누른다.
  2. 다른 이름으로 저장 대화 상자가 나타나면 프로젝트 파일이 저장되어 있는 폴더를 선택한 뒤, '파일 이름'에 적절한 이름을 입력하고 저장 단추를 누른다.
  3. Content 탭이 빈 상태로 열리면 도구 막대에서 Insert a page 단추를 눌러 목차 항목을 추가한다. Table of Content Entry 대화 상자가 나타나면 'Entry title'에 목차 제목을 입력한 뒤, Add 단추를 누른다. Path or URL 대화 상자가 나타나면 'File or URL' 옆의 Browse 단추를 누른다. 열기 대화 상자에서 목차 항목을 눌렀을 때 토픽 창에 나타날 파일을 선택한 뒤, 열기 단추를 누른다. Path or URL 대화 상자에서 OK 단추를 누르고 Table of Content Entry 대화 상자가 나타나면 확인 단추를 누른다.
  4. 만약 여러 개의 하위 목차에 대한 상위 목차 항목을 추가하려면 Insert a heading 단추를 눌러 3 과정과 같은 방법으로 목차 항목을 추가한다. 그리고 와 같은 단추를 이용하여 목차 항목의 위치를 적절히 조정한다.
  5. 원 하는 목차 항목을 모두 추가할 때까지 3~4 과정을 반복하여 작업하면 되는데 이전 시간에 언급한 것처럼 목차 파일을 만들 때 미리 전체 목차 항목에 대한 구조 파일을 만들어 사용하면 좀더 편리하게 작업할 수 있다.
    그림 2 구조 파일에 따라 생성한 목차 항목
  6. 필요한 경우 Contents 탭의 도구 막대에서 Contents properties 단추를 눌러 목차 탭에 대한 스타일 설정을 한 뒤, 메뉴에서 File > Save Project를 선택하여 수정한 내용을 저장한다.
이 번 시간에는 프로젝트 파일과 목차 파일을 생성하는 방법에 대해 살펴보았다. 사실 여기까지 작업하고 컴파일해도 기본적인 HTML Help 형태는 갖추기 때문에 사용하는데 있어 큰 불편함은 없다. 하지만 사용자가 원하는 내용을 좀더 쉽게 찾을 수 있도록 색인 탭과 검색 탭도 추가하는 것이 좋을 것이다. 따라서 다음 시간에는 색인 목록을 만들어 색인 탭을 추가하고 검색 탭과 즐겨찾기 탭을 추가하는 방법에 대해서 살펴보겠다.


출처 : 김유진 ( (주)세중 나모 인터랙티브 개발본부 )



Posted by 쿵캉켕