작업 기록
소개
한의원 블로그 작업을 돕는 도구 두 가지입니다. 영상에서 블로그용 GIF를 만드는, 크롬에서 여는 파일 하나짜리 도구와, AI가 쓴 원고를 블로그 형식으로 바꿔 네이버 글쓰기 화면에 넣는 크롬 확장 프로그램입니다. 실제 의뢰로 만들었고, 화면 속 내용은 예시로 바꿨습니다.
목적
의뢰인의 블로그 글 형식에 맞춰 원고를 바꾸고, 블로그용 GIF를 컴퓨터 안에서 바로 만드는 것.
주요 기능
- GIF 만들기: 영상을 넣고 자를 부분과 2~5초 구간을 고르면 GIF로 저장합니다. 화질은 세 단계입니다.
- GIF 만들기: 영상은 컴퓨터 밖으로 나가지 않습니다.
- GIF 만들기: 시작 위치는 8.5, 23:40, 1:05:30, 23분 40초처럼 여러 형식으로 적을 수 있습니다.
- 블로그 도우미: 원고의 소제목, 굵은 글씨, 강조 줄, 목록, 구분선, 서명, 홈페이지 링크를 블로그 형식으로 바꿉니다.
- 블로그 도우미: 글 위아래에 늘 들어가는 이미지, 지도 같은 고정 블록을 저장해 두었다가 다시 붙여 넣습니다.
- 블로그 도우미: 넣기 전후의 글을 비교해 제대로 들어갔는지 알려 주고, 발행 버튼은 사람이 누릅니다.
적용 기술
- HTML, JavaScript
- GIF 도구 전체를 파일 하나로
- gifenc 1.0.3 (MIT)
- GIF 인코딩, 공통 팔레트와 Floyd–Steinberg 디더링
- hevc.js 1.4.8 (MIT, WebAssembly)
- 크롬이 못 여는 아이폰 HEVC 영상 해독
- Chrome extension, Manifest V3
- 옆 패널, chrome.scripting, chrome.debugger
- Naver SmartEditor ONE
- 글을 넣는 대상 에디터
- Playwright
- 가짜 에디터에 확장을 설치해 돌리는 시험
제작 과정
- 2026-10-11: GIF 도구와 블로그 도우미 첫 버전, 사용 안내서를 만들었습니다.
- 2026-10-11: 사용자의 아이폰 녹화 파일이 윈도우 크롬에서 열리지 않아 내장 HEVC 해독기를 넣었습니다.
- 2026-10-12: 의뢰인의 실제 글과 빈 줄까지 같게 나오도록 변환 규칙을 맞췄습니다(v1.0.2).
- 2026-10-12: 실제 네이버 시험 두 번에서 자동 넣기가 실패해 넣는 방식을 바꿨습니다(v1.0.3, v1.0.4).
구현 중 문제와 해결
- 해결함
문제: 아이폰 화면 녹화(HEVC)를 사용자의 윈도우 크롬이 열지 못했습니다.
고친 방법 WebAssembly 해독기를 파일 안에 넣어, 크롬이 그림을 못 읽으면 자동으로 그쪽으로 넘어가게 했습니다. 사용자 파일은 약 1초 만에 열렸습니다.
- 해결함
문제: 1시간짜리 영상에서 원하는 구간을 찾으면 느렸습니다.
고친 방법 고른 구간 앞의 키 장면부터만 읽게 해, 40분 지점 구간이 약 1.5초에 열립니다.
- 해결함
문제: 의뢰인의 글은 빈 줄 개수, 굵게 칠하는 위치까지 형식이 세세했습니다.
고친 방법 실제 글을 원고로 되돌려 넣었을 때 빈 줄까지 같게 나오는지 자동으로 검사합니다(77줄 중 77줄 일치).
- 아직 남은 문제
문제: 네이버 스마트에디터 ONE은 스크립트가 만든 클릭과 붙여넣기를 받지 않았습니다.
고친 방법 확장이 chrome.debugger로 사람 입력과 같은 클릭과 Ctrl+V를 보내게 바꿨습니다(v1.0.4). 안 되면 ‘복사 후 붙여넣기’ 버튼 순서로 넘어갑니다. 실제 에디터에서는 아직 확인하지 않았습니다.
실제 결과물
GIF 도구는 사용자의 아이폰 녹화를 약 1초 만에 열고, 3초 GIF를 13~17초에 만들었습니다(시험 브라우저 기준). 블로그 도우미는 사용자 블로그에서 수동 붙여넣기로 굵게, 구분선, 서명, 목록이 제대로 들어가는 것을 확인했고, 인용구 모양과 링크 카드는 아직 다르게 들어갑니다(2026-10-12 기준).
시연과 체험
- 실제 동작
GIF 만들기 (한의원 블로그 작업 도구)
실제 의뢰로 만든 GIF 만들기 도구입니다. 영상은 이 브라우저 안에서만 처리되고 어디로도 보내지 않습니다. 같은 의뢰의 블로그 도우미는 네이버 글쓰기 화면 안에서 도는 크롬 확장이라 여기에는 없습니다.
관련 작업
맡은 일과 AI 도구
직접 한 일
- 자신의 네이버 블로그와 PC에서 실제로 시험하고, 안 되는 점을 전달했습니다.
- 자신의 아이폰 녹화 파일로 GIF 도구를 시험했습니다.
AI 도구를 쓴 곳
- 두 도구의 코드, 시험, 사용 안내서는 AI 코딩 도구(Claude)로 만들었습니다(저장소 기록 2026-10-11).
- 블로그 도우미가 다루는 원고 자체도 의뢰인이 GPT나 제미나이로 쓰는 원고입니다.