/write-article 키워드
↓
Step 1: 경쟁사 리서치
...

<!-- 섹션 헤딩 직후 -->
<figure class="wp-block-image size-large">
<img src="...variation1.jpg" alt="...（버리에이션 1）" />
...

def insert_images_into_markdown(md_content: str, images: list[dict]) -> str:
"""frontmatter 직후에 아이캐치 전 버리에이션을,
H2 직후에 섹션 이미지 전 버리에이션을 삽입한다."""
...

# 이미지
elif re.match(r"^!\\[.*?\\\]\(.*?\)", line.strip()):
    flush_list()
...

# 이미지
elif re.match(r"^!\\[.*?\\\]\(.*?\)", line.strip()):
    flush_list()
...

# wp_post.py 측에서 수정한다면 (이번에는 채택하지 않음)
if lang == "html":
    in_html_block = True # 코드로 만들지 않고 생 HTML로 전개한다
else:
    parts.append(f'<pre class="wp-block-code"><code class="language-{lang}">')
    in_code = True

````를 멋대로 전개하면 오히려 곤란하기 때문이다. 코드 측에서 자동으로 전개하면 HTML을 해설하는 기사들이 줄줄이 망가진다. "펜스 안의 내용이 샘플 코드인지, 렌더링되어야 할 본문인지"는 펜스의 언어 지정만으로는 구분할 수 없다.

즉, 이것은 변환기의 버그가 아니라, **입력(Markdown) 측에서 `<svg>`를 
` ```html `로 감싸버린 것이 원인**이다. 따라서 수정해야 할 것은 입력을 만드는 LLM의 프롬프트였다.

### 근본 대책: 프롬프트에 명시적 지시 추가

...
```markdown
## SVG·HTML 취급
- SVG나 HTML을 본문 중에 직접 삽입하는 경우, 
` ```html ` 코드 블록으로 감싸지 않는다.
- 인라인 SVG는 Markdown 본문에 그대로 (생 `<svg>...</svg>` 형태로) 작성한다.
- `<svg>` 태그를 
` ```html ` 로 감싸면 WordPress에서 소스 코드로 표시되므로 절대로 하지 않는다.
```

## 기존의 문제 기사를 수정하기

이미 게시된 초안에도 동일한 문제가 있었다. WordPress REST API를 사용하여 일괄 수정하는 스크립트를 작성했다.

```typescript
// 변형 2·3의 <figure>를 삭제하는 함수
function removeVariantImages(html: string): string {
  return html.replace(
    ...
```html 코드 블록을 전개하는 함수
```typescript
function expandHtmlCodeBlocks(raw: string): string {
  return raw.replace(
    /<pre><code class="language-html">([\s\S]*?)<\/code><\/pre>\n?/g,
    (_, inner: string) => {
      return inner
        .replace(/</g, "<")
        .replace(/>/g, ">")
        .replace(/&/g, "&")
        // ...기타 엔티티 디코딩
        .trim() + "\n\n";
    }
  );
}
```

WordPress REST API의 `POST /wp/v2/posts/:id` 
...
````html
````로 감싸면서 의도와 반대로 동작하게 되었다.

파이프라인이 여러 스크립트와 LLM을 조합할수록, "여기는 이런 의도이다"라는 문맥이 전달되지 않는 부분이 생긴다. 각각의 스크립트가 상대방의 출력 포맷을 알고 있어야 한다.

## 요약

| 문제 | 원인 | 수정 사항 |
|---|---|---|
| 이미지가 3장씩 표시됨 | wp_post.py 가 변형 (variation)을 구분하지 않고 전부 변환함 | alt 텍스트에서 변형 2·3을 스킵 |
| HTML 이 코드 블록으로 표시됨 | Claude 가 SVG 를 ```html 로 감쌈 | 프롬프트 측에서 SVG 를 ```html 로 감싸지 않도록 명시 (코드 측의 자동 전개 방식은 채택하지 않음) |

콘텐츠 자동화 파이프라인은 "작동하고 있는" 상태에서 "깔끔하게 작동하고 있는" 상태로 만들기까지의 디버깅이 의외로 심오하다. 각 스크립트가 서로의 출력을 올바르게 해석하고 있는지를 정기적으로 체크하는 메커니즘을 넣어두는 것이 장기 운용의 요령이다.

### Discussion

![](https://static.zenn.studio/images/drawing/discussion.png)