InDesign 내용을 HTML로 내보내서 웹에 사용할 수 있는 양식으로 쉽게 가져올 수 있습니다. 내용을 HTML로 내보낼 때 텍스트와 이미지를 내보내는 방법을 설정할 수 있습니다. InDesign에서는 HTML 내용을 동일한 이름의 CSS 스타일 클래스로 표시하여 내보낸 내용에 적용된 단락, 문자, 개체, 표 및 셀 스타일의 이름을 유지합니다. Adobe Dreamweaver 또는 CSS 사용 가능 HTML 편집기를 사용하여 내용에 서식 지정 및 레이아웃을 빠르게 적용할 수 있습니다.

내보내지는 항목

InDesign에서는 모든 스토리, 링크된 그래픽, 포함된 그래픽, SWF 동영상 파일, 각주, 텍스트 변수(텍스트로), 글머리 기호 목록, 번호 매기기 목록, 내부 상호 참조 및 텍스트나 웹 페이지로 이동하는 하이퍼링크를 내보냅니다. 표를 HTML로 내보낼 수도 있습니다. InDesign에서는 표 및 셀 획과 같은 표 서식이 유지됩니다. 표는 고유한 ID가 할당되며 Dreamweaver에서 Spry 데이터 세트로 참조될 수 있습니다. 삽입한 오디오 및 h.264 비디오 파일은 HTML5 <audio> 및 <video> 태그에 포함됩니다. InDesign에서는 사용자가 그리는 개체(사각형, 타원 및 다각형 등), 붙여넣은 개체(붙여넣은 illustrator 이미지 등) 및 윤곽선으로 변환된 텍스트도 내보냅니다.

내보낼 수 없는 항목

InDesign에서는 하이퍼링크(웹 페이지 링크 및 동일한 문서의 텍스트 앵커로 이동하도록 텍스트에 적용된 링크 제외), XML 태그, 책, 책갈피, SING 글리플릿, 페이지 전환, 색인 표시자, 선택되어 있지 않고 페이지와 접해 있지 않은 대지의 개체 또는 마스터 페이지 항목(내보내기 전에 다시 정의되거나 선택되는 경우 제외)을 내보내지 않습니다.

HTML로 내보내기

  1. 전체 문서를 내보내지 않을 경우 내보낼 텍스트 프레임, 텍스트 범위, 표 셀 또는 그래픽을 선택합니다.
  2. 파일 > 내보내기를 선택하고 파일 형식 목록에서 HTML을 선택합니다.

  3. HTML 문서의 이름과 위치를 지정하고 저장을 클릭합니다.

  4. HTML 내보내기 옵션 대화 상자의 일반, 이미지고급 영역에서 원하는 옵션을 지정한 다음 확인을 클릭합니다.

지정한 이름과 .html 확장자(예: “newsletter.html”)의 문서가 만들어집니다. 지정한 경우 웹 이미지 하위 폴더(예: “newsletter-web-images”)가 동일한 위치에 저장됩니다.

HTML 내보내기 옵션

[HTML] 대화 상자에서 다음 옵션을 지정합니다.

일반

일반 옵션
일반 옵션

내보내기:

선택한 항목만 내보낼 것인지 또는 전체 문서를 내보낼 것인지 결정합니다. 텍스트 프레임을 선택한 경우 남는 텍스트를 포함한 전체 스토리가 내보내집니다.

[문서]를 선택하면 모든 스프레드의 모든 페이지 항목이 내보내집니다. 단, 보이지 않는 레이어의 페이지 항목과 재정의되지 않은 마스터 페이지 항목은 예외입니다. XML 태그와 생성된 색인 및 목차도 무시됩니다.

내용 순서:

페이지 개체의 읽기 순서를 지정할 수 있습니다.

페이지 레이아웃 기준: 페이지에서 항목의 위치에 따라 읽기 순서를 결정합니다.

[페이지 레이아웃 기준]을 선택한 경우에는 InDesign이 왼쪽에서 오른쪽으로, 위에서 아래로 스캔하여 페이지 개체의 읽기 순서를 결정합니다. 경우에 따라 특히 여러 열로 구성된 복잡한 문서의 경우 디자인 요소가 원하는 읽기 순서로 표시되지 않을 수 있습니다. Dreamweaver를 사용하여 내용을 다시 배치하고 서식을 지정할 수 있습니다.

(아시아 버전만) [페이지 레이아웃 기준]을 선택한 경우에는 InDesign이 문서의 바인딩(왼쪽에서 오른쪽 또는 오른쪽에서 왼쪽)에 따라 페이지 개체의 읽기 순서를 결정합니다.

XML 구조와 동일: [XML 구조와 동일]을 선택한 경우에는 내보낸 내용과 내보내는 내용의 순서를 [XML 구조] 패널에서 조정합니다. 내용에 이미 태그가 있는 경우에는 [XML 구조] 패널에서 태그를 드래그하여 [XHTML 내보내기] 순서를 설정할 수 있습니다. 내용에 태그가 없는 경우에는 [구조] 패널 메뉴에서 [태그 없는 항목 추가]를 선택하여 순서 변경이 가능한 태그를 생성할 수 있습니다. 내보내기에서 항목을 제외하려는 경우에는 [XML 구조] 패널에서 태그를 삭제하기만 하면 됩니다. 태그를 삭제해도 INDD 파일에서 내용이 삭제되지는 않습니다. 태그 페이지 항목을 참조하십시오.

집필 패널과 동일: [집필] 패널의 요소 순서에 따라 읽기 순서를 결정합니다. 선택한 집필만 내보냅니다. 내보내기에 집필 포함을 참조하십시오.

서식 옵션:

글머리 기호 및 번호 매기기에 대한 서식 옵션을 선택합니다.

글머리 기호: 글머리 기호 단락을 HTML에서 태그로 서식이 지정되는 목록 항목으로 변환하려면 [순서가 없는 목록에 매핑]을 선택합니다. 글머리 기호 문자(텍스트)와 함께 태그로 서식을 지정하려면 [텍스트로 변환]을 선택합니다. 기본 InDesign 자동 글머리 기호를 사용했으면 하위 글머리 기호도 포함됩니다.

번호: HTML 파일에서 숫자를 변환하는 방법을 결정합니다. 기본 InDesign 자동 번호 매기기를 사용했으면 하위 글머리 기호도 포함됩니다..

●  순서가 있는 목록에 매핑: 번호가 매겨진 목록을 태그를 사용하여 HTML로 서식이 지정되는 목록 항목으로 변환합니다.

●  텍스트로 변환: 번호가 매겨진 목록을 단락의 현재 번호(텍스트)로 시작하는 단락으로 변환합니다.

내보낸 후 HTML 보기:

브라우저가 있으면 시작합니다.

이미지

이미지 옵션
이미지 옵션

이미지 복사:

이미지를 HTML로 내보내는 방식을 지정합니다.

원본: 원본 이미지를 “<document_name>-web-images” 하위 폴더로 내보냅니다. 이 옵션을 선택하면 다른 모든 옵션이 흐리게 표시됩니다.

최적화: 이 옵션을 사용하면 설정을 변경하여 이미지를 내보내는 방법을 결정할 수 있습니다.

서버 경로에 연결: 이 옵션을 사용하면 이미지를 하위 폴더로 내보내지 않고 이미지 파일 앞에 표시되는 로컬 URL(예: “images/”)을 입력할 수 있습니다. HTML 코드에서 링크 특성은 사용자가 지정하는 경로와 확장자를 표시합니다. 이 옵션은 이미지를 웹 호환 이미지로 직접 변환할 때 특히 효과적입니다.

레이아웃에서 모양 유지:

레이아웃에서 이미지 개체 특성을 상속하려면 선택합니다.

해상도(ppi):

이미지의 해상도를 인치당 픽셀 수(ppi)로 선택합니다. 운영 체제가 72ppi 또는 96ppi로 표준화된 경우, 모바일 장치의 범위는 132ppi(iPad)에서 172ppi(Sony Reader)또는 300ppi(iPhone 4) 이상입니다. 선택한 각 개체에 대한 ppi 값을 선택할 수 있습니다. 값은 72, 96, 150(현재 모든 eBook 장치 평균) 또는 300입니다.

이미지 크기:

이미지 크기를 고정으로 유지해야 하거나 페이지의 텍스트를 기준으로 조정해야 하는 경우 지정합니다. 텍스트 플로우를 기준으로를 선택하면 InDesign 페이지 너비를 기준으로 상대 비율 값이 설정됩니다. 이 옵션은 이미지를 읽기 영역의 텍스트에 상대적으로 비율에 맞게 크기 조정합니다.

이미지 정렬 및 간격:

이미지 맞춤을 지정합니다(왼쪽, 가운데, 오른쪽). 위와 아래 패딩을 지정할 수도 있습니다.

이미지 변환:

문서에서 최적화된 이미지가 GIF, JPEG 또는 PNG로 변환되는지를 선택할 수 있습니다. InDesign이 각 인스턴스에서 사용할 형식을 결정하도록 하려면 [자동]을 선택합니다. PNG를 선택하면 이미지 압축 설정이 비활성화됩니다.손실 없는 이미지 또는 투명도를 포함하는 이미지에 대해서는 PNG를 사용하십시오.

GIF 옵션(팔레트):

GIF 파일을 최적화할 때 InDesign이 색상을 처리하는 방식을 제어할 수 있습니다. GIF 형식은 256가지 색을 초과할 수 없는 제한된 색상 팔레트를 사용합니다. 디더링, 즉 작은 스팟을 혼합하여 추가 색상을 시뮬레이션하지 않고 그래픽의 대표 색상 샘플을 사용하여 팔레트를 만들려면 주 색상(디더 없음)을 선택합니다. Windows 및 Mac OS 시스템 색상의 하위 세트인 웹에 적합한 색상 팔레트를 만들려면 을 선택합니다. 내장 시스템 색상 팔레트를 사용하여 팔레트를 만들려면 시스템(Win) 또는 시스템(Mac)을 선택합니다. 이 항목을 선택하면 예기치 않은 결과가 발생할 수 있습니다.

누락된 줄을 채우면서 점진적으로 이미지를 불러오려면 인터레이스를 선택합니다. 이 옵션을 선택하지 않은 경우에는 이미지가 흐릿하게 표시되다가 최상의 해상도에 다가갈수록 조금씩 선명해집니다.

JPEG 옵션(이미지 품질):

만드는 각 JPEG 이미지에 대해 압축(파일 크기 작아짐)과 이미지 품질을 균형 있게 조정합니다. [낮음]을 선택하면 파일 크기가 가장 작아지고 이미지 품질이 가장 낮아집니다.

JPEG 옵션(포맷 방법):

이미지가 포함된 파일을 웹에서 열 때 얼마나 빠르게 JPEG 그래픽이 표시되는지 결정합니다. JPEG 이미지를 다운로드할 때 이미지를 단계적으로 점점 더 세밀하게 표시하려면 점진적을 선택합니다. 이 옵션으로 만든 파일은 크기가 약간 늘어나며 파일 보기를 위한 RAM이 추가로 필요합니다. 각 JPEG 파일이 다운로드된 후에만 표시되도록 하려면 기준선을 선택합니다. 파일이 표시될 때까지 자리표시자가 대신 표시됩니다.

개체 내보내기 설정 무시:

개별 이미지에 적용된 개체 내보내기 옵션을 무시합니다. 개체 내보내기 옵션 적용을 참조하십시오.

고급

고급 옵션
고급 옵션

CSS 및 JavaScript 옵션을 설정하려면 고급 영역을 사용합니다. CSS(Cascading Style Sheets)는 웹 페이지에서의 내용 모양을 조정하는 서식 적용 규칙의 모음입니다. CSS를 사용하여 페이지의 서식을 지정하면 프레젠테이션에서 내용이 분리됩니다. 페이지의 내용, 즉 HTML 코드는 HTML 파일 자체에 있지만 코드의 프레젠테이션을 정의하는 CSS 규칙은 다른 파일(외부 스타일 시트)이나 HTML 문서(대개 Head 섹션)에 있습니다. 예를 들어, 선택한 텍스트에 대해 여러 글꼴 크기를 지정할 수 있으며 CSS를 사용하여 웹 페이지에서 블럭 레벨 요소의 서식과 위치를 조절할 수 있습니다.

HTML에 클래스 미포함:

HTML에 클래스를 포함하지 않으려면 이 옵션을 선택합니다. 이 옵션은 HTML 내보내기가 실행되는 동안 태그에 있는 클래스ID 특성을 제거합니다. HTML에 있는 모든 중복된 div 태그도 제거됩니다.

HTML에 클래스 포함:

HTML에 클래스를 포함하려면 이 옵션을 선택합니다.

CSS 생성: InDesign이 내보낸 파일에 CSS를 생성할지를 지정합니다. [CSS 생성] 옵션을 선택하면 [로컬 재정의 유지] 옵션을 선택하여 이탤릭체나 볼드체 같은 로컬 서식을 포함할 수 있습니다.

로컬 재정의 유지: 이탤릭체나 볼드체 같은 로컬 서식을 포함합니다.

스타일 시트 추가:

기존 CSS 스타일 시트의 URL을 지정합니다. 이 URL은 대개 “/styles/style.css” 같은 상대 URL입니다. InDesign에서는 CSS가 있는지 또는 잘못되었는지 확인하지 않습니다. 외부 CSS 설정을 확인하는 데 Dreamweaver를 사용할 수 있습니다.

JavaScript 옵션:

HTML 페이지를 열 때 JavaScript를 실행하려면 스크립트 추가를 선택합니다. InDesign에서는 JavaScript가 있는지 또는 잘못되었는지 확인하지 않습니다.

이 작업에는 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License의 라이센스가 부여되었습니다.  Twitter™ 및 Facebook 게시물은 Creative Commons 약관을 적용받지 않습니다.

법적 고지 사항   |   온라인 개인 정보 보호 정책