개발하며 만들어온 프로젝트들 — 블로그, 보안 포털, 마켓 히트맵, 미니게임까지.
개발 포트폴리오와 기술 블로그를 하나의 사이트로 합치고 싶었습니다. Next.js 14 SSG와 React Three Fiber로 3D 인터랙션을 구현하고, Vercel에 자동 배포 파이프라인을 구성해 빌드 시간을 10초 이내로 유지하고 있습니다.
보안을 잘 모르는 사람도 쉽게 배울 수 있는 교육 허브를 만들었습니다. 55건 이상의 보안 뉴스, 10개+ 보안 학습 가이드, 8종 체험형 실습을 하나의 다크 테마 포탈로 통합했습니다.
S&P 500 상위 50종목의 등락률을 블루 모노크롬 히트맵으로 시각화합니다. Treemap 레이아웃으로 시가총액 비율을 직관적으로 표현하고, 실시간 API 연동으로 장중 데이터를 반영합니다.
SQL 인젝션, 쿠키 탈취, 피싱 퀴즈 등 8가지 보안 위협을 브라우저에서 직접 체험하는 인터랙티브 보안 교육 플랫폼을 구축했습니다. 모든 시뮬레이션은 클라이언트에서만 동작합니다.
메모리 게임, 2048, Wordle, 스네이크 등 12종 브라우저 미니게임을 React로 구현했습니다. 각 게임은 독립 컴포넌트로 설계되어 상태 관리와 키보드 이벤트 처리를 연습할 수 있었습니다.
Claude Code와 대화하며 웹사이트를 만드는 바이브 코딩 실험입니다. 프롬프트 하나로 인터랙티브 Hero, 130+편의 블로그 포스트, 13개 게임을 완성한 과정을 기록하고 있습니다.
AI 코딩 도구를 팀에서 일관되게 쓸 방법이 필요했습니다. CLAUDE.md 설정, 커스텀 스킬, Git 훅을 체계화한 오픈소스 가이드를 만들어 AI 페어 프로그래밍의 진입 장벽을 낮췄습니다.
AI 관련 뉴스를 매일 수동으로 확인하는 시간이 아까웠습니다. RSS 피드와 OpenAI API를 연결해 논문과 뉴스를 자동 수집·요약하는 CLI 도구를 만들어, 하루 30분이던 정보 수집 시간을 5분으로 줄였습니다.
GitHub, Notion, Brave Search, Gemini 등 15개 이상의 외부 API를 Node.js로 통합하는 프로젝트입니다. 무료 티어 한도 관리, 자동 사용량 추적, MCP 서버 연동까지 포함합니다.
SQLite 기반 개인 데이터 관리 시스템입니다. 프로젝트 메타데이터, 학습 기록, API 사용량 로그를 체계적으로 저장하고 MCP 서버를 통해 AI 에이전트와 연동합니다.
풀었던 알고리즘 문제의 풀이와 시간복잡도 분석을 체계적으로 기록하고 싶었습니다. C++로 작성한 풀이를 카테고리별로 정리하고, 각 문제의 핵심 접근법을 한 줄로 요약해 복습 효율을 높였습니다.
진행 중인 프로젝트와 학습 상태를 한눈에 파악하기 어려웠습니다. GitHub API와 Chart.js를 연동해 커밋 히트맵, 기술 스택 분포, 학습 목표 달성율을 시각화하는 개인용 대시보드를 설계 중입니다.
