PPTX로 전달받은 행사 정보를 반응형 HTML로 옮기는 내부 작업 보조 도구입니다. PC·모바일 이미지를 따로 만들고 같은 내용을 다시 입력하던 작업을 줄이기 위해 만들었습니다.

rt_automation-editor.jpg

PPTX 분석 후 섹션 편집 · 2026.10.02 공개 샘플 실행 화면

업무 기간 2024.04 ~ 현재 / 가연결혼정보
직접 맡은 일 반응형 HTML 템플릿·도구 화면 설계, 입력 처리·HTML 코드 생성, 결과 검수·운영 반영
기술 HTML · CSS · JavaScript · Git

공개 데모 보기 · 문화 이벤트 HTML 생성 도구

반복하던 제작 과정

행사 정보를 받으면 포토샵으로 PC·모바일 이미지를 각각 만들고, PPT 내용을 HTML에 다시 입력했습니다. 공통 템플릿과 변환 도구를 만들어 이미지 이중 제작과 내용 재입력을 줄였습니다.

PPTX를 읽고 섹션별로 편집

JavaScript로 PPTX의 제목·설명·이미지 정보를 읽어 정해진 HTML 구조에 넣습니다. 분석 결과는 섹션 카드로 나누어 이미지 파일명과 문구를 수정할 수 있도록 했습니다.

캡처에서는 공개 샘플을 실행해 12개 섹션과 20개 이미지를 불러온 상태를 확인했습니다.

생성 결과를 눈으로 확인

결과 코드는 편집 내용에 맞춰 갱신하고, 미리보기는 필요할 때 새로 그리도록 구성했습니다. 이미지 연결과 줄바꿈을 확인한 뒤 생성 코드를 운영 페이지에 적용했습니다.

automation-preview-20261002.jpg

공개 샘플의 HTML 미리보기 · 2026.10.02 캡처

PC·모바일에 같은 템플릿 적용

미팅갤러리와 문화 이벤트의 콘텐츠 구조에 맞춰 반응형 HTML 템플릿을 만들었습니다. 같은 콘텐츠를 PC·모바일용으로 따로 제작하는 범위를 줄였습니다.

image.png