소개
처음 강의가 이해가 부족하여 나름 건강 블로그를 자동화 시도 하여 이것으로 갈음 하고자 한다
(## 2026-07-15 (Day 2)
### 1. 네이버 블로그 이미지 붙여넣기 개선
```text
이미지가 네이버 블로그에서 복붙이 안되는데 되게할수있어?
```
Codex 작업:
- 로컬 file:// 이미지 주소는 네이버 블로그가 가져올 수 없다는 원인 확인
- 본문 서식 복사와 이미지 복사를 분리해 네이버 편집기에서 안정적으로 붙여넣을 수 있도록 흐름 변경
- 각 사진 아래에 이미지 1/2/3 복사 버튼을 추가
- 이미지를 캔버스에서 PNG 바이너리로 변환한 뒤 클립보드에 직접 쓰는 기능 구현
- 본문 복사 시 이미지 복사 버튼이 포함되지 않도록 복제된 HTML에서 제어 요소 제거
- 브라우저 보안 제약을 피하도록 localhost 기반 미리보기 실행 방식 적용
- script.js - 이미지별 PNG 클립보드 복사 기능과 성공·오류 안내
- style.css - 이미지 복사 버튼과 안내 UI 스타일
- index.html - 이미지별 복사 버튼 및 네이버 붙여넣기 안내
- 미리보기-실행.cmd - 로컬 서버 기반 미리보기 실행
---
### 2. 해결 방법을 개인 스킬에 반영
```text
이 내용을 스킬에 저장해줘 다음에도 적용할수 있게
```
Codex 작업:
- 다음 글에서도 같은 해결책이 자동 적용되도록 개인 health-blog-preview-builder 스킬 업데이트
- 본문과 로컬 이미지를 분리해 복사하는 원칙 추가
- 모든 글 이미지에 이미지 N 복사 버튼을 만들고 ClipboardItem의 image/png 데이터로 복사하는 규칙 추가
- file:// 대신 localhost에서 미리보기를 실행하도록 명시
- 여러 로컬 이미지를 본문과 한 번에 붙여넣을 수 있다고 안내하지 않도록 제한 사항 명문화
- 스킬 구조와 최종 규칙 유효성 검증
- C:\Users\PC\.codex\skills\health-blog-preview-builder\SKILL.md - 표준 워크플로와 검증 항목
- C:\Users\PC\.codex\skills\health-blog-preview-builder\references\site-rules.md - 네이버용 이미지 복사 상세 규칙
---
## 커밋 히스토리
현재 작업공간에서 Git 커밋 기록을 읽을 수 없어 세션과 파일 변경 기록을 기준으로 작성했습니다.
| 날짜 | 커밋 | 설명 |
|------|------|------|
| 07/14 | 기록 없음 | 건강 블로그 자동화 기본형 구축 |
| 07/15 | 기록 없음 | 네이버 이미지 복사 개선 및 스킬 업데이트 |
---
## 기술 스택
- Frontend: HTML5, CSS3, Vanilla JavaScript
- 콘텐츠: 한국어 건강 정보 글, SEO/AEO/GEO 구조, FAQ, 해시태그
- 이미지: JPG 자산, Canvas API, PNG ClipboardItem
- 브라우저 기능: Clipboard API, 로컬 정적 HTTP 서버
- 프로젝트 기반: Node.js, Next.js, React, vinext 구성 포함
- Deployment: 현재 로컬 미리보기 방식
---
## 주요 기능
1. 건강 블로그 글 미리보기
- 완성된 건강 글과 이미지를 발행 전 한 화면에서 확인
2. 네이버용 본문 복사
- 전체, 본문, HTML, Markdown 형식으로 콘텐츠 복사
3. 이미지 개별 복사
- 로컬 이미지를 PNG 바이너리로 복사해 네이버 편집기에 직접 붙여넣기
4. 반복 가능한 글 제작 규칙
- 공식 의료 근거 확인, 이미지 3장 생성, FAQ와 안전 문구 작성, 브라우저 검증을 개인 스킬로 표준화
5. 설치 없는 로컬 실행
- 정적 HTML/CSS/JavaScript와 Windows 실행 파일로 미리보기 제공
결과와 배운 점
앞으로의 계획이 있다면 들려주세요.
(앞으로 강의를 좀 더 충실히 들어 자동화 발행 을 해봐야 겠다는 생각입니다)
도움 받은 글 (옵션)
내용부족으로 작성 못했습니다
(내용 입력)
