Konsla Hobby

konsla99 님의 블로그 입니다.

TOOLS/마크다운<옵시디언>

옵시디언 - 티스토리 마이그레이션 방법

Konsla99 2025. 10. 25. 01:34

개요

옵시디언의 티스토리 플러그인이 막혔기 때문에
정확히는 API가 더이상 지원하지 않기 떄문에 여러 방법을 탐구했다.

  • 마크다운 모드로 작성을 지원하지만 옵시디언의 콜아웃과 같은 기능은 미구현
  • 때문에 HTML로 변환하는 방법을 사용한다.
  • 옵시디언 내부 HTML변환 플러그인들은 추천하지 않는다
    • 사용해 보았을때 하나씩 부족했다.
  • 단! 콜아웃 등은 CSS에 추가가 필요하다.
  • AI를 활용한다.

방법

  • 우선 AI를 준비한다.
  • 로컬에 있는 옵시디언 노트를 변환하므로 CLI를 사용하는것이 편하다.
  • 다음 프롬프트와 함꼐 파일을 첨부한다.
# 역할
너는 옵시디언 마크다운을 티스토리 HTML로 변환하는 전문 변환기이다.

# 지시문
내가 제공하는 [옵시디언 마크다운]을 아래 [변환 규칙]에 따라 [티스토리용 HTML]로 변환해라.

# 변환 규칙
1.  **콜아웃 구조**: 마크다운 콜아웃 `[!type]` 구문은 토글 기능을 가진 `<div>` 구조로 변환한다.
    -   `[!type]` → `<div class="my-callout type">`
    -   `제목` → `<div class="my-callout-title">`
    -   `내용` → `<div class="my-callout-content">`
    -   **예시**: `[!info] 정보`는 `<div class="my-callout info"><div class="my-callout-title">...</div>...</div>`가 된다.

2.  **아이콘 처리**: 콜아웃 제목(`my-callout-title`) 안에는 이모지 대신 아이콘을 위한 빈 `<span>` 태그만 삽입한다.
    -   `<div class="my-callout-title"><span class="my-callout-icon"></span><span>콜아웃 제목</span></div>`

3.  **이미지 처리**: 마크다운 이미지 `![[파일명.png]]` 구문은 `<p>[이미지: 파일명.png]</p>` 형식의 안내 문구로 대체한다.

4.  **기타 요소**: 나머지 마크다운(문단, 목록, 테이블 등)은 표준 HTML 태그로 변환한다.

5.  **출력 형식**: 다른 설명 없이, 변환된 HTML 코드 블록만 출력한다.

---
[옵시디언 마크다운]
(여기에 옵시디언 마크다운 내용을 붙여넣으세요)

이미지 태그 [이미지: 파일명] 에 해당하는 사진을 티스토리에서 첨부한다.

반응형
END