실시간 Wiki 수정 & 유튜브 자가 치유(Self-Healing) 구현기 (feat. Antigravity)

소개

시도하고자 했던 것과 그 이유

지난 과제들을 통해 '90년대 주크박스' 사이트의 외형은 완성했지만, 정적 사이트(Static Site) 특성상 "운영의 유연성"이 떨어진다는 치명적인 단점이 있었습니다.

콘텐츠 수정의 어려움: 오타 하나를 고치려 해도 개발자가 로컬에서 수정하고 다시 배포(Build)해야 했습니다.
유튜브 링크 깨짐 (Dead Link): 90년대 희귀 영상들이다 보니, 링크가 삭제되거나 비공개되는 일이 잦았습니다. 매번 수동으로 확인하고 갈아끼우는 건 불가능했습니다.

그래서 이번에는 "개발자의 개입 없이 사용자가 직접 내용을 고치고(Wiki), 영상이 깨지면 시스템이 알아서 새것을 찾아오는(Self-Healing)" 자동화 시스템을 구축했습니다.

진행 방법

어떤 도구를 사용했고, 어떻게 활용하셨나요?

핵심 도구: GitHub REST API, YouTube Data API, Vercel KV (Upstash Redis)
전략: Vercel의 환경변수와 Serverless DB를 적극 활용하여, 서버 없이도 동적인 기능을 구현했습니다.

1. [Wiki] GitHub API로 '읽기 전용' 한계 돌파하기

Vercel에 배포된 파일은 수정할 수 없습니다. 그래서 "웹사이트가 나 대신 GitHub에 커밋(Commit)을 날리는" 방식을 택했습니다.

STEP 1: 권한 확보 (가장 중요!)

가장 먼저 웹사이트에 '파일 수정 권한'을 줘야 했습니다.

GitHub에서 Personal Access Token (Classic)을 생성합니다. (이때 repo 권한 체크 필수!)
Vercel 대시보드 (Settings -> Environment Variables)에 토큰을 등록합니다.
- GITHUB_TOKEN: ghp_... (발급받은 토큰)
- REPO_OWNER: 내 아이디
- REPO_NAME: 저장소 이름
처음에는 조금 헷갈렸는데 REPO_OWNER : JeonSeokHwanAI , REPO_NAME : 90sJuke 이렇게 보면 됩니다.

STEP 2: 프롬프트로 로직 구현

그냥 덮어쓰면 파일이 망가지므로, AI에게 "특정 부분(Scene, Wit)만 안전하게 수술해 줘"라고 지시했습니다.

[사용 프롬프트]

3단계 고도화 목표는 "사용자 참여형 위키(Wiki) 기능"이야.
Vercel 환경변수(GITHUB_TOKEN 등)는 설정 완료했어.

[백엔드 로직]
- Octokit을 사용해 GitHub API로 원본 파일을 직접 수정(Commit)해.
- 커밋 메시지: "Update: Scene & Wit by User"

[프론트엔드 - 핵심!]
- 마크다운 파싱: 정규표현식(Regex)을 사용해 '## Scene'과 '## Wit' 아래 내용만 추출해서 에디터에 보여줘.
- 재조립(Reassemble): 사용자가 수정한 텍스트를, 기존 Frontmatter나 다른 섹션은 건드리지 않고 원래 위치에 끼워 넣어서 저장해.

GitHub에 올리고 리빌딩 후 기록을 남길 수 있습니다. UI가 윈도 95 디자인인데 좀 많이 촌스럽네요. UI는 천천히 수정해도 될 것 같습니다. 전송을 하면 Github의 특정 md 파일이 수정되고 Commint을 남기면 자동으로 Vercel에서 Re-build를 시작합니다.

실제 원본 데이터(.md)가 수정되므로 데이터는 영구적으로 업데이트 됩니다. 언제 수정 했는지 기록이 남아 롤백이 가능합니다. 별도의 DB없이 수정하는 최적의 방법이 아닐까 생각 합니다.

2. [Self-Healing] Vercel KV로 '죽은 영상' 살려내기

영상이 안 나올 때(Error), 백그라운드에서 새 영상을 찾아와 Vercel KV(Redis)에 저장하고, 즉시 교체하는 시스템입니다.

STEP 1: 인프라 구축 (3분 컷)

별도의 DB 서버를 파는 대신 Vercel 내장 기능을 썼습니다.

Vercel 대시보드 -> Storage 탭 -> Upstash (Redis) 생성.
[Connect Project] 버튼 클릭 (이걸 눌러야 내 프로젝트와 연결됨).
자동으로 환경변수(KV_URL 등)가 세팅되는 것을 확인.

STEP 2: 유튜브 API 키 등록

Google Cloud Console에서 YouTube Data API v3 키를 발급받아, Vercel 환경변수 YOUTUBE_API_KEY에 추가했습니다.

STEP 3: 자가 치유 로직 구현

[사용 프롬프트]

목표는 "깨진 영상 링크 자동 복구(Self-Healing)"야.
Vercel KV와 YouTube API가 모두 연결되어 있어.

[치유 에이전트 (Backend)]
- 에러 리포트가 오면 YouTube API로 해당 곡(가수+제목)을 재검색해.
- 찾은 새 ID를 Vercel KV에 저장해 (Key: video:override:{slug}).

[플레이어 (Frontend)]
- 영상 재생 시, 마크다운 ID보다 Vercel KV에 있는 값(Override)을 최우선으로 써.
- 만약 재생 중 에러(onError)가 발생하면? -> 즉시 백엔드에 '복구 요청'을 보내고, 새 ID를 받아와서 교체해.

페이지 접속을 하면 링크 이상을 감지하고 브라우저가 백엔드(API)에게 바로 보고를 합니다. 그러면 YouTube API를 통해 해당 곡을 다시 검색하고 가장 적절한 ID를 찾아냅니다.

찾아낸 새 ID를 Vercel KV에 저장을 하고 정상적인 링크를 재생할 수 있습니다.

결과와 배운 점

배운 점과 나만의 꿀팁

인프라가 코딩보다 쉬웠다 (Vercel KV):
개발자가 아닌 분들은 'DB 구축'이라고 하면 겁부터 나실 텐데요. Vercel Storage 메뉴에서 'Create' 누르고 'Connect' 버튼 딱 한 번 누르니 끝났습니다. 복잡한 설정 없이 kv.set(), kv.get() 만으로 데이터를 저장할 수 있다는 게 신세계였습니다.
정적 사이트의 진화:
HTML 파일 덩어리인 줄 알았던 정적 사이트가, 외부 API(뇌)와 KV(기억장치)를 만나니 살아있는 생물처럼 동작하게 되었습니다.

과정 중에 겪은 시행착오

권한 문제: 처음에 GitHub 토큰을 만들 때 권한 설정을 안 해서 수정이 안 됐습니다. 반드시 repo 박스에 체크해야 파일을 고칠 수 있습니다.
유튜브 할당량: 테스트한다고 새로고침을 막 했더니 API 할당량이 찼습니다. onError (에러가 났을 때만) 검색하도록 조건을 거는 게 필수입니다.

20개의 주제를 확인해보세요! AI 스터디 슈퍼 얼리버드 시작🕊️