HTML로 만든 슬라이드를 PowerPoint 파일로 내보내는 변환기를 만들면, 도형과 텍스트 상자로 옮기지 못하는 요소는 그 부분만 PNG로 잘라 넣게 됩니다. 이 그림은 PowerPoint에서 글자처럼 고칠 수 없고, 확대하면 흐려집니다. 제 변환기가 얼마나 그렇게 하는지 세어 봤습니다.
결과부터 적습니다. 레이아웃 254개에 테마 44개를 입힌 측정 결과 11,176벌에서 요소는 408,267개였고, 그중 그림으로 구워진 것은 2,200개(0.54%)였습니다. 44개 테마에서 목록이 똑같아서 테마당 50개이고, 레이아웃 12개에만 있습니다. 세면서 알게 된 것 세 가지를 적습니다.
어떻게 쟀나
변환기는 1920x1080 헤드리스 Chromium에서 레이아웃을 열고 DOM 요소를 하나씩 재서, 도형, 텍스트, SVG 도형, 부채꼴, 장식 다섯 종류로 나눠 JSON에 저장합니다. 장식이 그림이 되는 요소입니다. 대응하는 도형이 없는 것(내용이 있는 가상 요소, 배경 이미지, radial과 repeating과 conic gradient, filter, backdrop-filter, mask, 단순 다각형이 아닌 clip-path, 옮기지 못하는 SVG)이 여기 들어갑니다. 장식은 그 요소만 스크린샷으로 자르는데, 글자는 따로 텍스트 상자로 나가므로 캡처 직전에 글자색을 투명으로 바꿔 그림에 글자가 섞이지 않게 합니다.
측정 뷰포트를 1920x1080으로 고정한 이유도 있습니다. 여백 변수가 clamp(40px, 4vw, 80px)
라서 창 너비가 1440이면 57.6px, 1920이면 76.8px, 2560이면 80px이 됩니다. 다른 크기로 재면 좌표가 조용히 달라집니다.
센 결과
| 이유 | 테마당 | 44개 테마 합 | 레이아웃 |
|---|
::before 가상 요소 | | | |
| 45 | 1,980 | 7개 | |
| SVG | 2 | 88 | 2개 |
conic-gradient 라는 이름 | | | |
| 2 | 88 | 2개 | |
backdrop-filter | | | |
| 1 | 44 | 1개 | |
| 합계 | 50 | 2,200 | 12개 |
하나. 어떤 요소가 그림이 되는지는 레이아웃 마크업이 정했습니다. 44개 테마마다 (레이아웃, 요소 이름, 이유) 목록을 만들어 비교하니 서로 다른 목록이 하나뿐이었습니다. 색과 글꼴을 테마가 바꿔도 그림이 되는 요소는 그대로였습니다.
둘. 소스를 검색한 숫자와 측정한 숫자를 맞춰 보세요. ::before
가 들어간 레이아웃 파일은 59개인데, 주석을 지우고 보면 실제 규칙이 있는 파일은 7개였습니다. 나머지 52개는 "::before
장식 0건이라 네이티브로 나간다"는 설명 주석이었습니다. 7개 파일의 요소를 더하면 4, 5, 12, 5, 6, 4, 9로 45개이고, 측정에서 나온 ::before
45개와 같습니다. ::after
는 40개 파일이 언급하지만 규칙은 0개이고 측정에서도 0건이었습니다.
셋. 이유 이름이 가리키는 것과 실제 원인이 다를 수 있습니다. conic-gradient
로 분류된 2개 요소를 열어 보니 conic-gradient가 아니라 repeating-linear-gradient
로 그린 점선이었습니다(timeline-milestone의 696x3px, outline-route-map의 1413x2px, blue-professional 테마 기준). 판정 코드가 conic-gradient
와 repeating-
을 한 정규식으로 잡고 같은 이름을 붙이기 때문입니다. 이름은 아직 고치지 않았습니다.
PPTX를 풀어 보면
SWOT 레이아웃(diagram-swot-analysis)을 blue-professional 좌표로 PPTX로 조립해 압축을 풀었습니다. 슬라이드 XML에 그림이 12개, 도형이 50개 들어 있었고 ppt/media
에도 12개가 있었습니다. 점이 하나씩 그림이 된 것입니다. 이 12개는 li::before
로 만든 지름 6px 점(3개 항목 x 4개 칸)입니다. 같은 방법으로 풀어 본 flow-stages-4는 그림이 0개였습니다. PowerPoint에서 열어 본 것은 아니고 파일 구조만 확인했습니다.
줄이는 방법과 아직 못 한 것
변환기 문서의 대안표는 가상 요소 장식을 실제 요소로 바꾸고, radial-gradient는 linear나 부채꼴로, clip-path는 도형 겹치기나 SVG polygon으로, filter는 색 직접 지정으로 바꾸라고 합니다. 저장소 코드는 단순 다각형 clip-path와 CSS 삼각형을 그림이 아니라 다각형으로 내보내도록 읽힙니다. 위 SWOT 점도 <li>
안에 실제 둥근 요소를 넣으면 문서의 변환 표대로 도형이 될 텐데, 고쳐서 다시 재 보지는 못했습니다. 그림이 된 요소는 색이 만들 때 굳어서 편집기에서 색을 바꿔도 파일에 반영되지 않는다고 저장소 주석에 적혀 있습니다.
숫자의 유통기한
변환기 문서에는 "150개 중 이미지 대체는 11개 요소(레이아웃 5개)"라고 적혀 있습니다. 레이아웃이 254개가 된 지금 측정에서는 50개 요소, 12개 레이아웃입니다. 같은 문서 다른 곳에는 이미 18개 요소와 32개 요소로 나뉜 표가 있어서 문서 안에서도 숫자가 어긋납니다. 이 표는 테스트가 측정 JSON에서 다시 세어 맞는지 확인하고, 오늘 돌렸을 때 통과했습니다.
한계
Chromium 하나와 1920x1080에서 잰 결과이고, 측정 JSON은 2026-10-27에 마지막으로 갱신됐습니다(레이아웃과 어긋나면 알려 주는 검사는 통과했습니다). PPTX 조립은 별도 저장소의 코드를 썼습니다. 이 측정은 제가 만드는 슬라이드 라이브러리(getdeck)의 레이아웃으로 했습니다.
HTML을 PPTX로 바꾸는 변환기를 만들어 보셨다면, 가상 요소 장식은 그림으로 두시나요, 실제 요소로 바꾸도록 레이아웃 쪽에 규칙을 두시나요?