DAY 07작업 7일째
초안을 맡기며 그림 기준과 캡처 도구를 만들었다
블로그 초안을 Claude Code에 맡기기로 하고, 검토에서 나온 지적을 가이드와 스킬, 캡처 도구로 옮겼다.
오늘부터 이 블로그의 초안은 대부분 Claude Code에 맡기기로 했다. 몇 편을 같이 써 보면서 검토에서 나온 지적을 바로 글쓰기 기준으로 옮기고, 다음 글에서 부작용이 없는지 확인하는 식으로 진행했다.
그림이 기능을 보여 주지 못했다
첫 지적은 프로젝트 소개의 당김줄 그림이었다. 오른쪽 위의 줄을 당기면 라이트와 다크가 바뀌는 기능인데, 그림은 다크 모드 전체 화면이었다. 줄은 구석에 작게 찍혀 있어서 그림만 봐서는 무엇을 소개하는지 알기 어려웠다.
처음에는 당김줄 부분만 잘라 라이트, 당기는 중, 다크 세 컷을 이어 붙였다. 세 컷은 단계를 보여 주지만 줄이 튀어 오르는 움직임은 담지 못했다. 그래서 움직이는 webp로 다시 만들었다.
같은 소개의 「과정 상자」 설명도 지적을 받았다. 방문자가 읽는 페이지인데 > [!막힘] 같은 마크다운 문법을 설명하고 있었고, 그림은 코드 블록이라 글과 따로 놀았다.
지적을 기준으로 옮겼다
이런 지적은 그 글 하나만 고치고 끝내지 않고 공통 가이드에 남겼다.
| 지적 | 가이드에 남긴 기준 |
|---|---|
| 전체 화면이라 기능이 안 보인다 | 기능 그림은 그 부분만 자른다 |
| 움직임이 전해지지 않는다 | 생김새는 부분 캡처, 비교는 나란히, 움직임은 짧은 webp |
| 방문자에게 문법을 설명한다 | 프로젝트 소개는 화면에서 보이는 것과 쓰는 법을 쓴다 |
| 그림과 글이 따로 논다 | 기능 하나에 그 기능을 보여 주는 그림 하나 |
기준은 ai/style-guide.md에, 찍는 절차는 ai/skills/blog-draft/SKILL.md에 나눠 넣었다.
캡처도 도구로 만들었다
다음 글에서도, 다른 AI가 써도 같은 방식으로 찍을 수 있게 scripts/capture.mjs를 만들었다. 이 컴퓨터의 Chrome을 headless로 띄워 고른 요소나 영역만 자르고, 마우스를 올리고 누르고 놓는 동작을 재현하면서 프레임을 이어 움직이는 그림을 만든다.
npm run capture -- <주소> chain.webp --clip 1040,0,240,130 --theme light \
--steps "move main; wait 300; move .pull-chain; wait 700; down .pull-chain; wait 500; up .pull-chain; wait 1300"같은 날 쓴 다른 초안의 어드민 화면도 이 도구로 찍었다. 어드민을 가짜 GitHub로 로컬에서 띄우고, 로그인 주소를 먼저 들렀다 오는 옵션을 더했다.