개발자 포트폴리오 & 기술 블로그

S · 상황

이력서와 종합 포트폴리오는 여러 프로젝트의 경력을 요약하는 문서여서, 사이트 자체에서 구현한 기능과 기술적 의사결정을 설명하기에는 한계가 있었습니다. 개발 경험을 더 깊게 전달하려면 프로젝트의 문제 해결 과정뿐 아니라 RAG·인프라·개발 도구에 관한 기술 글도 함께 탐색할 수 있어야 했습니다.

T · 과제

제가 구현할 범위는 경력 소개에서 프로젝트 상세와 기술 글까지 이어지는 개인 웹사이트였습니다. 프로젝트에는 역할·문제·해결·결과와 화면 근거를 담고, 블로그에는 기술 글을 읽고 발행하는 기능을 구성했습니다. 문서와 개발 활동을 갱신할 수 있는 데이터 경로도 마련했습니다.

A · 행동

1. 프로젝트를 문제 해결 과정으로 설명했습니다. Next.js App Router로 소개 페이지와 개별 프로젝트 URL을 구성하고, 요약·역할·배경·해결·성과를 구조화했습니다. 상세 화면에는 스크린샷과 기술 스택, 배포·저장소 링크를 연결해 설명과 근거를 함께 볼 수 있게 했습니다.

2. 기술 글을 직접 발행하는 블로그를 구현했습니다. Supabase에 글·태그·댓글을 저장하고 공개 글만 목록과 상세에 노출했습니다. Markdown 본문에 Shiki 코드 하이라이팅, Mermaid 다이어그램, 제목 기반 목차와 예상 읽기 시간을 적용했습니다. 태그 탐색, 댓글·답글·좋아요를 구성하고 관리자 화면에서는 글 작성·수정과 초안/발행 상태를 관리하도록 했습니다.

3. 프로젝트 문서와 사이트 데이터의 연결을 만들었습니다. 섹션별 데이터 스키마를 Zod로 검증하고, 내부 동기화 API에서 프로젝트·문서 메타데이터·Git 활동을 PostgreSQL 트랜잭션으로 함께 반영하도록 구현했습니다. Git 활동은 회사·개인 프로젝트로 나누어 히트맵에 표시했습니다.

4. 공유와 검색에 필요한 정보를 구성했습니다. 프로젝트와 글마다 canonical·Open Graph·JSON-LD를 제공하고 Sitemap과 블로그 RSS를 구성했습니다. 데스크톱과 모바일에서 같은 프로젝트·글을 읽을 수 있도록 반응형 화면을 만들었습니다.

R · 결과

• ▶소개 → 프로젝트 상세 → 기술 블로그를 하나의 공개 사이트에서 탐색할 수 있는 결과물을 구축했습니다.
• ▶2026년 9월 8일 공개 데이터 기준 기술 글 9편을 발행했으며, 이 중 RAG 시리즈 4편에서 파이프라인·청킹/임베딩·Tool Calling·운영 경험을 정리했습니다.
• ▶프로젝트 경험은 STAR 상세와 스크린샷으로, 기술 지식은 태그와 목차를 갖춘 글로 전달할 수 있는 구조를 마련했습니다.
• ▶홈·블로그 목록·글 상세 및 모바일 글 화면에서 공개 서비스의 동작을 확인했습니다.