GitHub Blog 시각 자료 적용 가이드 (MP4, GIF, PNG, JPG)

이 문서는 현재 레포(Sichanvisit.github.io) 기준으로, 프로젝트 글에 시각 자료를 넣는 실전 가이드다.

1) 핵심 원칙

현재 카드 템플릿은 header.teaser를 썸네일로 읽는다.
즉, 카드 영역에는 동영상이 아니라 이미지 파일을 넣는 것이 맞다.

2) 폴더 구조 (이 레포 기준)

assets/
  images/
    portfolio/
      advanced-thumb.jpg
      rag-thumb.jpg
  videos/
    advanced-demo.mp4
    rag-demo.mp4

3) 변환 명령 (Windows + ffmpeg)

MP4 최적화 (블로그 본문용)

ffmpeg -i "input.mp4" -vf "fps=24,scale=960:-2" -c:v libx264 -crf 26 -preset medium -movflags +faststart -an "demo_blog.mp4"

GIF 생성 (README용)

ffmpeg -i "input.mp4" -vf "fps=12,scale=720:-1:flags=lanczos,split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse" "demo_readme.gif"

4) 포트폴리오 카드에 적용 (front matter)

_portfolio/*.md 파일 상단에 아래처럼 넣는다.

---
title: "Project Name"
date: 2026-03-04
priority: 1
excerpt: "프로젝트 요약"
header:
  teaser: /assets/images/portfolio/advanced-thumb.jpg
frontend_url: "https://your-frontend-page.com"
github_url: "https://github.com/your/repo"
---

설명:

5) 본문에 MP4/GIF 넣는 방법

MP4 권장 (포트폴리오 글 본문)

<video controls autoplay loop muted playsinline style="width:100%; max-width: 960px; border-radius: 12px;">
  <source src="/assets/videos/advanced-demo.mp4" type="video/mp4">
</video>

GIF 삽입

![demo](/assets/images/portfolio/advanced-demo.gif)

6) 지금 블로그에 바로 적용 순서

  1. 썸네일 이미지 준비: assets/images/portfolio/*.jpg
  2. 데모 영상 변환: ffmpeg로 assets/videos/*.mp4 생성
  3. 각 _portfolio/*.md에 header.teaser, frontend_url 추가
  4. 각 글 본문에 <video> 블록 삽입
  5. 커밋 후 푸시

7) 빠른 체크리스트