사용 안내서 취소

콘텐츠를 HTML로 내보내기(이전)

  1. InDesign 사용 안내서
  2. InDesign 알아보기
    1. InDesign 소개
      1. InDesign의 새로운 기능
      2. 시스템 요구 사항
      3. 일반 질문
      4. Creative Cloud 라이브러리 사용
    2. 작업 영역
      1. 작업 영역 기본 사항
      2. 상황별 작업 표시줄
      3. InDesign에서 작업 영역 사용자 지정
      4. 도구 상자
      5. 환경 설정 지정
      6. 속성 패널
      7. 터치 작업 영역
      8. 기본 키보드 단축키
      9. 편집 실행 취소 및 작업 내역 패널 관리
      10. 문서 복구 및 실행 취소
    3. 생성형 AI(중국 본토에서는 사용할 수 없음)
      1. 텍스트를 이미지로
      2. 생성형 확장
      3. InDesign에서 효과 생성(Beta)
      4. 생성형 AI FAQ
  3. 문서 작성 및 레이아웃
    1. 문서 및 페이지
      1. 문서 만들기
      2. 상위 페이지 작업
      3. 문서 페이지 작업
      4. 페이지 크기, 여백 및 도련 설정
      5. 파일 및 템플릿 작업
      6. InDesign에서 PDF를 InDesign 파일로 변환(Beta)
      7. 책 파일 만들기
      8. 기본 페이지 번호 매기기 추가
      9. 페이지, 장 및 섹션 번호 매기기
      10. QuarkXPress 및 PageMaker 문서 변환
      11. 콘텐츠 공유
      12. 기본 관리 파일 작업 과정 이해
      13. 문서 저장
    2. 격자
      1. 격자
      2. 격자 형식 지정
    3. 레이아웃 지원
      1. 눈금자
      2. 눈금자 사용 개체 정렬 및 분산
      3. 측정 도구를 사용하여 오브젝트 측정
  4. 콘텐츠 추가
    1. 텍스트
      1. 프레임에 텍스트 추가
      2. 텍스트 스레드
      3. 동남아시아 언어 스크립트
      4. InDesign의 아랍어 및 히브리어 기능
      5. 패스에 문자 입력
      6. 글머리 기호 및 번호 매기기
      7. MathML을 삽입하여 수학 표현식 만들기
      8. 글리프 및 특수 문자
      9. 텍스트 컴포지션
      10. 텍스트 변수
      11. QR 코드 생성
      12. 텍스트 편집
      13. 텍스트 정렬
      14. 개체 주변 텍스트 줄 바꿈
      15. 고정된 개체
      16. 연결된 내용
      17. 단락 서식 지정
      18. 문자 서식 지정
    2. 입력 체계
      1. InDesign에서 글꼴 사용
      2. 커닝 및 자간
      3. 문자 비율 조정 및 기울이기
      4. 문자에 색상 효과 적용
    3. 텍스트 서식 지정
      1. 텍스트 서식 지정
      2. 자동 스타일 텍스트
      3. 스타일 팩을 사용하여 작업
      4. 탭 및 들여쓰기
    4. 텍스트 검토
      1. 변경 내용 추적 및 검토
      2. InDesign에서 편집 메모 추가
      3. PDF 주석 가져오기
    5. 맞춤법 검사 및 언어 사전
      1. 맞춤법, 자동 수정, 동적 맞춤법 검사
      2. 사전 및 단어 만들기, 추가하기, 관리하기
      3. 사전 환경 설정 변경
      4. Duden 사전
    6. 참조 추가
      1. 목차 만들기
      2. 각주
      3. 색인 만들기
      4. 미주
      5. 캡션
    7. 스타일
      1. 단락 및 문자 스타일
      2. 스타일 매핑, 내보내기 및 관리
      3. 개체 스타일
      4. 단락 시작표시문자 및 중첩 스타일
      5. 스타일을 사용한 작업
      6. 행간
      1. 표 서식을 지정
      2. 표 만들기
      3. 표 및 셀 스타일
      4. 표 선택 및 편집
      5. 표의 획 및 칠
    8. 상호 작용
      1. 하이퍼링크
      2. 동적 PDF 문서
      3. 책갈피
      4. 버튼
      5. 양식
      6. 애니메이션
      7. 상호 참조
      8. PDF 구조
      9. 페이지 전환
      10. 동영상 및 사운드
    9. 그래픽
      1. 패스 및 도형 이해
      2. 연필 도구로 그리기
      3. 펜 도구를 사용하여 그리기
      4. 선(획) 설정 적용 
      5. 컴파운드 패스 및 모양
      6. 패스 편집
      7. 클리핑 패스
      8. 모퉁이 모양 변경
      9. 프레임 및 개체
      10. 개체 정렬 및 분포
      11. 연결 및 임베드된 그래픽
      12. AEM Assets 통합
    10. 색상 및 투명도
      1. 색상 적용
      2. 가져온 그래픽의 색상 사용
      3. 색상 견본을 사용한 작업
      4. 잉크 혼합하기
      5. 색조
      6. 별색 및 배합 색상 이해
      7. 색상 혼합
      8. 그레이디언트
      9. 투명 아트워크 병합
      10. 투명도 효과 추가
  5. 찾기 및 바꾸기
    1. 텍스트 찾기 및 바꾸기
    2. 글꼴 찾기 및 바꾸기
    3. 글리프 찾기 및 바꾸기
    4. GREP 표현식 및 쿼리를 사용하여 찾기 및 바꾸기
    5. 오브젝트 찾기 및 바꾸기
    6. 색상 찾기 및 바꾸기
    7. 옵션을 검색하여 찾기 및 바꾸기
  6. 공유
    1. 클라우드 문서 저장 및 액세스
    2. 클라우드 문서 구성, 관리, 공유
    3. 클라우드 문서 버전 보기 및 관리
    4. InDesign 클라우드 문서에 대한 일반적인 질문
    5. 웹용 InCopy(Beta)
    6. 공유 및 공동 작업        
    7. 검토용으로 공유
    8. 공유 InDesign 문서 검토
    9. 피드백 관리
    10. 편집하도록 초대
  7. 내보내기, 가져오기, 게시
    1. 가져오기, 내보내기 및 게시
      1. 온라인 게시
      2. 온라인 게시 대시보드
      3. 그래픽 복사, 삽입
      4. Adobe Express로 내보내기
      5. EPUB에 사용할 내용 내보내기
      6. Adobe PDF 옵션
      7. HTML5로 내보내기
      8. 콘텐츠를 HTML로 내보내기(이전)
      9. Adobe PDF로 내보내기
      10. JPEG 또는 PNG 형식으로 내보내기
      11. SVG 파일 가져오기
      12. 지원되는 파일 형식
      13. 사용자 설정 내보내기 및 가져오기
    2. 인쇄
      1. 소책자 인쇄
      2. 프린터 표시 및 도련
      3. 문서 인쇄
      4. 잉크, 분판 및 스크린 빈도 수
      5. 중복 인쇄
      6. PostScript 및 EPS 파일 만들기
      7. 전달 전에 파일 프리플라이트
      8. 썸네일 및 큰 문서 인쇄
      9. 서비스 공급업체용 PDF 준비
      10. 분판 인쇄 준비
  8. InDesign 확장
    1. 자동화
      1. 데이터 병합
      2. 플러그인
      3. InDesign의 Capture 확장 기능
      4. 스크립팅
  9. 문제 해결
    1. 해결된 문제
    2. 알려진 문제
    3. 실행 시 충돌 발생
    4. 환경 설정 폴더 읽기 전용 문제
    5. 파일 문제 해결
    6. InDesign 파일을 PDF로 내보낼 수 없음
    7. InDesign 문서 복구

페이지, 스프레드 또는 선택한 오브젝트를 HTML(레거시) 형식으로 내보내는 방법을 알아보세요.

HTML로 내보내면 InDesign 콘텐츠를 웹에서 사용할 수 있는 형식으로 쉽게 변환할 수 있습니다. 내용을 HTML로 내보낼 때 텍스트와 이미지를 내보내는 방법을 설정할 수 있습니다. InDesign에서는 HTML 콘텐츠를 동일한 이름의 CSS 스타일 클래스로 표시하여 내보낸 콘텐츠에 적용된 단락, 문자, 오브젝트, 표 및 셀 스타일의 이름을 유지합니다.

HTML로 내보내기(레거시)

  1. 전체 문서를 내보내지 않을 경우 내보낼 텍스트 프레임, 텍스트 범위, 표 셀 또는 그래픽을 선택합니다.
  2. 파일 > 내보내기를 선택하고 다른 형식으로 저장(Windows) 또는 포맷(macOS)에서 HTML(레거시)을 선택합니다.

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

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

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

HTML 내보내기 옵션

일반

다양한 옵션을 보여주는 일반 탭
일반 옵션

내보내기

선택한 항목만 내보낼 것인지 또는 전체 문서를 내보낼 것인지 결정합니다.

  • 텍스트 프레임을 선택하면 넘치는 텍스트를 포함한 전체 스토리를 내보냅니다.
  • 문서를 선택하면 모든 스프레드의 모든 페이지 항목을 내보냅니다. 단, 보이지 않는 레이어의 페이지 항목과 재정의되지 않은 마스터 페이지 항목은 예외입니다. XML 태그와 생성된 색인 및 목차도 무시됩니다.

내용 순서

페이지 오브젝트의 읽기 순서를 지정합니다.

  • 페이지 레이아웃 기준: 페이지에서 항목의 위치에 따라 읽기 순서를 결정합니다. InDesign이 왼쪽에서 오른쪽으로, 위에서 아래 방향으로 스캔하여 페이지 오브젝트의 읽기 순서를 결정합니다. (아시아 버전만) InDesign이 문서의 바인딩(왼쪽에서 오른쪽 또는 오른쪽에서 왼쪽)에 따라 페이지 오브젝트의 읽기 순서를 결정합니다.
  • XML 구조와 동일: 구조 보기에 있는 태그 순서에 따라 읽기 순서가 결정됩니다. 태그 페이지 항목을 참조하십시오.
  • 집필 패널과 동일: 집필 패널의 요소 순서에 따라 읽기 순서를 결정합니다. 선택한 문서만 내보냅니다. 

서식 옵션

  • 글머리 기호: 글머리 기호 단락을 HTML에서 태그로 서식이 지정되는 목록 항목으로 변환하려면 순서가 없는 목록에 매핑을 선택합니다. 글머리 기호 문자(텍스트)와 함께 태그로 서식을 지정하려면 텍스트로 변환을 선택합니다. 기본 InDesign 자동 글머리 기호를 사용했으면 하위 글머리 기호도 포함됩니다.
  • 번호: HTML 파일에서 숫자를 변환하는 방법을 결정합니다. 번호를 매긴 목록을 HTML에서 태그로 서식이 지정되는 목록 항목으로 변환하려면 순서가 있는 목록에 매핑을 선택합니다. 번호를 매긴 목록을 단락의 현재 번호(텍스트)로 시작하는 단락으로 변환하려면 텍스트로 변환을 선택하세요.

 

내보낸 후 HTML 보기

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

이미지

이미지 옵션
이미지 옵션

이미지 복사

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

  • 원본: 원본 이미지를 <document_name>-web-images 하위 폴더로 내보냅니다.
  • 최적화: 설정을 변경하여 이미지를 내보내는 방법을 결정할 수 있습니다.
  • 서버 경로에 연결: 이미지를 하위 폴더로 내보내지 않고 이미지 파일 앞에 표시되는 로컬 URL(예: "images/")을 입력할 수 있습니다. HTML 코드에서 링크 특성은 사용자가 지정하는 경로와 확장자를 표시합니다. 이 옵션은 이미지를 웹 호환 이미지로 직접 변환할 때 특히 효과적입니다.

레이아웃에서 모양 유지(그래픽/미디어 오브젝트의 경우)

레이아웃에서 이미지 오브젝트 특성을 상속하려면 선택하세요.

해결 방법

이미지의 해상도를 인치당 픽셀 수(ppi)로 지정합니다. 숫자가 높을수록 해상도가 좋습니다. 운영 체제의 해상도는 72ppi 또는 96ppi로 표준화되어 있으나, 모바일 장치의 해상도는 132ppi(iPad)에서 172ppi(Sony Reader), 300ppi(iPhone 4) 이상으로 다양합니다.
선택한 각 오브젝트의 ppi 값을 선택할 수 있습니다. 값은 72, 96, 150(현재 모든 전자책 장치 평균) 또는 300입니다.

이미지 크기

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

이미지 맞춤 및 간격

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

이미지 변환

문서에서 최적화된 이미지를 GIF, JPEG또는 PNG 중 어떤 형식으로 변환할지 지정합니다. InDesign에서 각 인스턴스에 사용할 형식을 결정하려면 자동을 선택하세요.

GIF 옵션

  • 팔레트: GIF 파일을 최적화할 때 InDesign이 색상을 처리하는 방식을 제어할 수 있습니다. GIF 형식은 256가지 색을 초과할 수 없는 제한된 색상 팔레트를 사용합니다. 디더링, 즉 작은 스팟을 혼합하여 추가 색상을 시뮬레이션하지 않고 그래픽의 대표 색상 샘플을 사용하여 팔레트를 만들려면 주 색상(디더 없음)을 선택하세요. Windows 및 macOS 시스템 색상의 서브세트인 웹에 적합한 색상 팔레트를 만들려면 을 선택하세요. 내장 시스템 색상 팔레트를 사용하여 팔레트를 만들려면 시스템(Win) 또는 시스템(Mac)을 선택하세요. 이 옵션을 선택하면 예기치 않은 결과가 발생할 수 있습니다.
  • 인터레이스: 누락된 줄을 채워 점진적으로 이미지를 로드합니다. 이 옵션을 선택 해제하면 이미지가 전체 해상도에 가까워질수록 흐릿해지고 점진적으로 선명해집니다.

JPEG 옵션

  • 이미지 품질: 만드는 각 JPEG 이미지에 대해 압축(파일 크기 작아짐)과 이미지 품질을 균형 있게 조정합니다. 낮음을 선택하면 파일 크기가 가장 작아지고 이미지 품질이 가장 낮아집니다.
  • 형식 지정 방법: 이미지가 포함된 파일을 브라우저에서 열 때 얼마나 빠르게 JPEG 그래픽이 표시되는지 지정합니다. JPEG 이미지를 다운로드할 때 이미지를 단계적으로 점점 더 세밀하게 표시하려면 프로그레시브를 선택하세요. 각 JPEG 파일이 다운로드된 후에만 표시되도록 하려면 기준선을 선택하세요. 이미지가 다운로드될 때까지 자리 표시자가 표시됩니다.

개체 내보내기 설정 무시

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

고급

고급 옵션
고급 옵션

HTML에 클래스 미포함

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

HTML에 클래스 포함

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

  • CSS 생성: InDesign이 내보낸 파일에 CSS를 생성할지를 지정합니다.
  • 로컬 재정의 유지: 기울임꼴이나 굵게 같은 로컬 서식을 포함합니다.

스타일 시트 추가

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

JavaScript 옵션

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

InDesign 내보내기

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

InDesign 내보내지 않음

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

관련 항목 더 보기

궁금한 점이나 의견이 있으십니까?

커뮤니티에 질문하기

질문이나 공유할 아이디어가 있다면 Adobe InDesign 커뮤니티에 참여하십시오. 여러분의 소중한 의견과 다양한 작품 활동을 기대하겠습니다.

쉽고 빠르게 지원 받기

신규 사용자이신가요?