Jin's Dev Log | LeetCode 문제풀이를 블로그에 자동 연동하는 시스템 구축기

🧠 왜 자동화가 필요했을까?

현재 저는 LeetCode에서 문제를 풀면 해당 풀이가 자동으로 제 GitHub 저장소에 저장되도록 연동해 두었고, 영어로 업로드된 문제의 내용을 한글로 번역하여 기록하는 작업도 병행하고 있습니다.

하지만 시간이 지날수록 문제풀이 수가 많아지면서 GitHub 저장소에서 내가 푼 문제를 찾아보는 과정이 점점 번거롭게 느껴졌습니다.

특정 알고리즘 유형이나 난이도의 문제를 다시 보고 싶을 때, 단순히 저장소 구조나 파일명만으로 찾는 데 한계가 있었고 해당 풀이에 대한 설명이나 핵심 아이디어를 한눈에 보기 어려웠습니다.

그래서 이렇게 생각하게 되었습니다:

GitHub 저장소에 풀이가 저장되는 동시에 Supabase에 데이터로도 기록되고, 내 블로그에 글처럼 정리되어 자동으로 게재된다면 언제든지 쉽게 찾아보고, 다시 학습하는 데 훨씬 더 도움이 되지 않을까?

이 글은 그 문제를 해결하기 위한 설계와 구축 과정을 정리한 포스팅입니다.

🎯 목표

GitHub에 LeetCode 문제풀이 파일을 커밋하면,
Supabase에 해당 풀이 데이터가 자동으로 저장되고,
블로그에서 해당 데이터를 불러와 자동으로 렌더링되는 구조 구축

🧱 시스템 구성도

[LeetCode 문제 풀이 작성]
       ↓
[GitHub 저장소]
       ↓ (커밋: 풀이 및 문제 번역본 포함)
[번역 및 가공 → Supabase에 데이터 저장]
       ↓
[블로그에서 Supabase 데이터 fetch 및 렌더링]
       ↓
[사용자: 블로그에서 풀이 확인]

구성 요소 설명

GitHub 저장소
LeetCode에서 문제를 풀고, 영어 문제를 한글로 번역한 뒤 풀이 내용과 함께 .md 파일로 자동 커밋됩니다.
번역 및 가공 → Supabase 저장
커밋된 파일을 바탕으로 문제의 번역본과 풀이 내용을 파싱 및 가공하여 Supabase에 저장합니다.

💡 현재는 번역과 커밋까지 자동화 완료, 이후 가공 및 업서트 기능을 추가할 예정입니다.
블로그
Supabase에 저장된 데이터를 기반으로 /leetcode 경로에서 문제 리스트 및 상세 페이지를 자동 렌더링합니다.

🗃️ Supabase 테이블 설계

문제풀이를 정형화된 데이터로 관리하기 위해 아래와 같은 테이블을 구성했습니다:

필드명	타입	설명
`id`	UUID	고유 식별자
`title`	String	문제 제목
`slug`	String	URL용 슬러그
`tags`	String[]	문제 유형 (예: Array, DFS 등)
`difficulty`	Enum	난이도 (Easy, Medium, Hard)
`code`	Text	풀이 코드
`explanation`	Markdown	풀이 설명
`problem_url`	String	LeetCode 문제 링크
`updated_at`	Timestamp	최종 수정 시각

🖥️ 블로그 페이지 구성 계획

/leetcode: 전체 문제 풀이 리스트 페이지
- 문제 제목, 난이도, 태그, 날짜 순 정렬
- 태그/난이도 기반 필터링 기능 제공
/leetcode/[slug]: 상세 페이지
- 코드 하이라이팅, 마크다운 기반 해설 표시
- 원본 링크(LeetCode) 연결

향후 추가 예정 기능

✅ 문제풀이 통계 시각화 (예: pie chart, bar chart)
✅ 풀이 횟수/기간 별 그래프 대시보드

🛠 작업 방식: Claude Code와 바이브 코딩 (예정)

이번 작업은 Anthropic의 Claude Code를 활용해 바이브 코딩(Vibe Coding) 방식으로 진행해볼 예정입니다.

이제는 혼자서 구글 검색만으로 개발을 끌고 가는 방식보다는, 단순하고 반복적인 작업은 AI의 도움을 받아 작업 속도를 높이고, 전체적인 설계와 구조는 개발자가 주도적으로 판단하고 구성하는 방향이 더 효과적이라고 생각하게 되었습니다.

특히 이번 사이드 프로젝트는 현업에서는 경험하기 어려웠던 DB 설계, 자동화 파이프라인 구성, 데이터 흐름 설계 등을 직접 경험하고 AI를 협업 도구로 활용하여 구현력과 설계 역량을 높이기 위한 훈련의 장으로 삼으려 합니다.

Claude를 통해 기대하는 이점

🧠 설계 아이디어를 대화하듯 발전시킬 수 있음
⚙️ 반복적인 코드 구조를 빠르게 생성하고 템플릿화
💬 에러 상황에서 빠른 피드백을 통해 리팩터링 힌트 확보

단순한 "코딩 보조 도구"를 넘어서, AI와 함께 사고하며 구현하는 협업 방식을 직접 체험해보고자 합니다.

✨ 마무리

꾸준히 문제를 풀고 기록하는 일은 개발자로서 성장하는 데 매우 중요합니다.
하지만 이제는 단순히 기록을 넘어서, AI와 협업하여 얼마나 효율적이고 지속 가능한 개발 경험을 만들어낼 수 있는지가 더 중요하다고 느끼고 있습니다.

이번 작업은 GitHub, Supabase, 그리고 Claude Code를 활용한 자동화 시스템 구축을 통해 내가 손으로 반복하던 일을 AI에게 위임하고, 더 중요한 설계와 구조를 주도적으로 다루는 연습을 해보려는 시도였습니다.

궁극적으로는 이 과정을 통해

Claude와의 바이브 코딩으로 실현 가능한 기능을 얼마나 빠르게 만들 수 있는지,
나의 개발 스타일과 얼마나 자연스럽게 어울리는지,
혼자서 하는 개발보다 얼마나 더 효율적인지를 검증해보는 것이 목표입니다.

개발자로서의 경쟁력을 높이기 위해선, 이제는 단순한 기술 숙련도뿐 아니라 AI를 어떻게 활용하고 협업할 수 있는가가 중요한 시대라고 생각합니다.

그래서 이 프로젝트는 단순한 자동화가 아니라 AI 활용 능력을 체화하기 위한 실험이자 훈련이며, 이러한 시도들을 지속적으로 반복해 나가는 것이 곧 미래의 경쟁력이 될 거라 믿습니다.