새 문서 편집기로 이동할 때 추가 공간, 테두리 없음 또는 동영상이 올바르게 표시되지 않는 등의 이미지 및 동영상에 문제가 발생할 수 있습니다.

이 문서에서는 다음 내용을 다룹니다.

  • 이미지 문제 해결
  • 동영상 관련 문제 해결

이미지 문제 해결

이미지에 테두리 추가

새 문서 편집기는 레거시 편집기에서 사용되는 표 기반 이미지 테두리를 지원하지 않습니다. 테두리를 추가하려면 이미지 스타일 옵션을 사용하거나 이미지에 사용자 지정 CSS 클래스를 적용합니다.

CSS 클래스로 이미지 테두리를 추가하려면 다음과 같이 하세요.

  1. 문서에 이미지 삽입
    이미지 추가
  2. 도구 모음에서HTML버튼을 클릭하여 소스 코드 편집기를 엽니다.
    소스 코드 아이콘
  3. 찾기 img소스의 이미지에 대한 요소입니다. 예를 들어 다음과 같이 CSS 클래스 이름을 추가합니다. bordered-image. 설정 class="bordered-image"에 img요소입니다.
  4. 변경 내용을 저장합니다
  5. 헬프 센터 CSS에 테두리 스타일이 포함되어 있는지 확인하세요. 예:
.bordered-image {
  border: 1px solid #ccc;
  border-radius: 4px;
}
인라인 스타일로 이미지 테두리를 추가하려면 다음과 같이 하세요.
  1. 문서에 이미지 삽입
    이미지 추가
  2. 도구 모음에서HTML버튼을 클릭하여 소스 코드 편집기를 엽니다.
    소스 코드 아이콘
  3. 소스에서 img요소입니다. 다음을 찾습니다. style=""속성을 추가하거나 추가할 수 있습니다.

  4. 여기에 테두리 스타일을 추가합니다. 예를 들면 다음과 같습니다.

    border-radius: 8px; border: 10px solid black;

  5. The style속성은 다음과 같아야 합니다.

    style="aspect-ratio: 1600/1067; border: 10px solid black; border-radius: 8px;"
  6. 변경 내용을 저장합니다

이미지 왜곡 방지 및 이미지 크기 관리

  • 꼭 필요한 경우가 아니라면 새 문서 편집기에서 이미지 크기를 조정하지 마세요. 이미지 크기를 조정하는 경우 가로 세로 비율을 유지하도록 너비 또는 높이 중 하나의 크기만 변경합니다. 편집기는 다른 차원을 자동으로 확장합니다.
  • 업로드하기 전에 Photoshop, 김프 또는 온라인 편집기와 같은 외부 도구를 사용하여 이미지 크기를 조정합니다.
  • 복사하여 붙여넣는 대신 이미지 삽입 버튼을 사용하세요. 복사하여 붙여넣으면 원하지 않는 HTML 속성이 추가될 수 있습니다.
  • 기본적으로 이미지를 100% 너비로 설정합니다.
    • 이미지를 삽입한 후 이미지를 선택하고 이미지 도구 모음을 사용하여 너비를 100%로 설정합니다.
    • 글로벌 솔루션의 경우 헬프 센터 테마에 다음 CSS를 추가하세요.
.article-body img {
  width: 100%;
  height: auto;
}
  • 알림 이메일에서 이미지가 왜곡되어 보이는 경우:
    • 너비 및 높이 HTML 속성 제거 <img>태그
    • CSS를 사용하여 크기를 설정하지만 일부 이메일 클라이언트는 CSS 속성을 제거합니다.
    • 붙여넣은 이미지의 경우 편집기에서 너비 및 높이 HTML 속성을 제거하고 크기에 CSS를 사용하도록 하세요.

추가 팁 및 수정 사항

  • 사전 체험 프로그램 에 참여하는 경우에는 특정 문서를 보고하고 조사를 위한 액세스 권한을 계정에 부여하세요.
  • 헬프 센터 테마를 관리하지 않는 경우 테마 관리자나 개발자에게 문의하여 CSS 변경을 요청하세요.
  • 변경 내용을 실시간으로 적용하기 전에 테스트 환경에서 테스트하세요.
  • 최신 업데이트를 보려면 CSS 또는 테마를 변경한 후 브라우저 캐시를 지우세요.
  • 대규모 마이그레이션의 경우:
    • 브라우저 개발자 도구를 사용하여 문제 표를 찾고 검토 프로세스 속도를 높이세요.
    • 영향을 받는 각 문서에서 수동으로 조정합니다. 일괄 마이그레이션 또는 수정 도구는 없습니다.

이러한 단계는 레거시 편집기에서 새 문서 편집기로 이동한 후 대부분의 이미지 및 동영상 표시 문제를 해결합니다. 헬프 센터 문서에서 일관되고 전문적인 디자인을 유지하는 데 도움이 됩니다.

동영상 관련 문제 해결

레거시 편집기에서 새 문서 편집기로 이동하면 임베드된 동영상이 헬프 센터 문서에서 다르게 나타날 수 있습니다. 이 섹션에서는 특히 사용자 지정 임베드 코드나 비표준 동영상 플랫폼에서 임베드된 동영상이 올바르게 표시되도록 하는 방법을 보여줍니다.

임베드된 동영상을 올바르게 표시하려면 다음과 같이 하세요.

  • 헬프 센터 관리자 설정에서안전하지 않은 콘텐츠 표시설정을 사용 설정합니다.
  • 이 설정을 사용하면 iframe 및 스크립트가 문서에서 렌더링될 수 있습니다.
  • 보안 문제가 있는 경우 보안에 영향을 미칠 수 있으므로 이 설정을 사용 설정하기 전에 IT 또는 보안 팀과 상의하세요.

새 문서 편집기의 동영상 임베드에는 iframe 기반 임베드 코드만 지원됩니다. 스크립트 태그, 직접 링크 또는 사용자 지정 div 태그와 같은 다른 방법은 지원되지 않으며 편집기나 게시된 문서에서 렌더링되지 않습니다.

다음과 같은 두 가지 방법으로 임베드된 동영상을 삽입할 수 있습니다.

  • 문서에 삽입을클릭합니다. >도구 모음에임베드
    도구 모음의 임베드 옵션
  • iframe 임베드 코드를 문서의 소스 코드에 직접 붙여넣으세요.
    • 문서에서 비iframe 임베드를 사용한 경우에는 동영상 제공업체의 iframe 기반 임베드 코드를 사용하도록 업데이트하세요.
    • 이미 iframe을 사용한 경우에는 각 문서를 업데이트하지 않고 렌더링되도록안전하지 않은 콘텐츠 표시를사용 설정합니다.

동영상 크기 조정

새 문서 편집기는 기본적으로 임베드된 동영상을 100% 너비로 설정할 수 있습니다. 크기를 변경하려면 HTML 너비 속성이 아닌 CSS를 사용하세요.

.article-body iframe {
  width: 50% !important;
}
주의: HTML 편집기에서 바로 동영상 너비를 편집하지 마세요. 새 문서 편집기가 변경 내용을 덮어쓸 수 있습니다.

동영상이 작은 미리 보기로 나타나거나 예상대로 표시되지 않는 경우:

  1. 안전하지 않은 콘텐츠 표시가사용 설정되어 있는지 확인
  2. 반드시 iframe 기반 임베드 코드를 사용하세요.
  3. 문제가 계속 발생하면 임베드 코드 세부 정보 및 스크린샷과 함께 지원 담당자나 제품 관리자에게 보고하세요.

자세한 내용은새 문서 편집기로 전환하기를참조하세요.

번역 고지 사항: 본 문서는 콘텐츠에 대한 기본적인 이해를 제공하기 위해 자동 번역 소프트웨어를 사용하여 번역되었습니다. 정확한 번역을 제공하고자 합당한 노력을 기울였으나 Zendesk는 번역의 정확성을 보장하지 않습니다.

번역된 문서에 포함된 정보의 정확성과 관련하여 질문이 있으시면 문서의 공식 버전인 영문 버전을 참조하시기 바랍니다.

Zendesk 제공