Portfolio Resume

혼자 만들고
직접 운영하는 서비스

기획부터 배포까지 혼자 맡은 사이드 프로젝트 3개입니다. 모두 Next.js·TypeScript 풀스택이고 LLM API를 연동했습니다. 회사 프로젝트는 고객사 시스템이라 화면을 공개할 수 없습니다. 대신 맡은 역할과 성과는 Resume에 정리했습니다.

PorkLog

운영 중

2025.05.30 ~ 현재1인 개발 (기획 · 개발 · 배포)

기획부터 배포·운영까지 혼자 만든 개발 블로그. 주간 AI 뉴스가 매주 자동으로 올라옵니다.

지금 되는 것: 글 작성·예약 발행, 시리즈·태그·검색, 방문자 통계, 주간 AI 뉴스 자동 발행이 운영 중입니다.
아직 안 되는 것: 글은 관리자만 쓸 수 있고, 댓글은 GitHub 계정(Giscus)으로만 남길 수 있습니다.

GitHub 라이브

PorkLog 홈 화면. 소개 히어로, 카테고리 탭, 검색창, 글 목록이 보인다. — 홈 목록·카테고리 탭·제목/본문 검색과 Resume로 들어가는 히어로를 구현했습니다.

글 상세 상단에 dev-news 시리즈 9편의 목차가 있고 현재 글이 굵게 표시된다. — 시리즈 목차를 만들었습니다. dev-news 시리즈 9편이 순서대로 나열되고, 지금 읽는 글은 굵게 표시됩니다.

AI 주간 Tech 뉴스 본문과 오른쪽에 펼쳐진 목차 레일. 읽는 절이 주황색으로 표시된다. — 본문 목차를 오른쪽 레일로 펼치고, 읽고 있는 절을 따라가며 강조하도록 했습니다.

관리자 통계 대시보드. 방문자·게시물·평균 조회수 카드, 최근 30일 방문자 추이 차트, 인기 게시물 Top 10 표가 보인다. — 관리자 통계 대시보드를 만들었습니다. 오늘·누적 방문자, 총 게시물, 평균 조회수 카드와 최근 30일 방문자 추이 차트, 인기 글 Top 10 표를 방문 기록과 조회수를 직접 집계해 보여줍니다.

다크 모드로 본 PorkLog 홈의 모바일 화면.

390px 폭과 다크 모드에서도 같은 목록이 깨지지 않게 맞췄습니다.

2026.10 기준

기술 결정

주간 AI 뉴스를 사람 손 없이 발행

문제: RSS·GitHub·Hugging Face·OpenRouter 네 곳의 소식을 매주 손으로 모아 정리하는 일을 없애려고 했습니다.
선택: Vercel Cron이 매주 네 곳을 병렬로 수집하고(Promise.allSettled) LLM이 요약해 dev-news 시리즈로 발행합니다. 한 곳이 실패해도 나머지로 진행하고, 같은 날짜의 글이 이미 있으면 건너뛰어 중복 발행을 막습니다. 호출은 CRON_SECRET으로 보호합니다.

시리즈 회차를 서버가 매기도록 변경

문제: 작성 폼에서 회차를 직접 입력받아, 번호 관리와 검증 규칙이 사람에게 달려 있었습니다.
선택: 회차 입력칸과 스키마 검증을 없애고, 저장할 때 서버가 해당 시리즈의 마지막 회차 + 1을 매깁니다. 시리즈를 바꾸면 새 시리즈의 다음 번호를 받습니다.

이미 공개된 글의 발행일시는 바꿀 수 없게

문제: 예약 발행을 넣자, 이미 공개된 글의 발행일시도 수정 화면에서 바꿀 수 있게 됐습니다.
선택: 서버가 발행 시각이 지난 글의 변경 값을 무시하고 기존 값을 유지합니다. 폼에서도 입력을 비활성화하고 이유를 안내해, 바뀌지 않는 값을 바꾼 것처럼 보이지 않게 했습니다. 이 규칙은 Vitest 테스트로 고정했습니다.

사용 기술 전체

Next.jsReactTypeScriptTailwind CSSNeonDrizzleBetter AuthVitestGitHub ActionsVercel

WorkWrap

개발 중 · 베타

2026.08.09 ~ 현재1인 개발 (기획 · 개발 · 배포)

음성으로 남긴 작업 메모를 전사해 쌓고, 하루치를 LLM으로 요약해 주는 서비스.

관리자 승인제라 바로 사용은 어렵습니다. 화면은 아래 스크린샷으로 확인하세요.

지금 되는 것: 음성 녹음과 전사, 하루 요약과 버전 비교, PWA 설치, 관리자 승인·사용중지가 동작합니다.
아직 안 되는 것: 관리자 승인을 받아야 쓸 수 있고, 녹음 한 건은 전사 API 상한인 25MB까지입니다.

GitHub 라이브

WorkWrap 메모 화면. 업무 탭, 날짜별 메모 카드, 텍스트 입력창, 큰 녹음 버튼, 하단 탭 바가 보인다. — 메모 화면입니다. 업무 탭으로 메모를 나누고, 날짜별 메모를 고정·수정·삭제할 수 있게 했습니다. 큰 녹음 버튼과 하단 탭 바(메모·요약·관리)를 모바일 우선으로 구성했습니다.

녹음 중인 WorkWrap 화면. 파형과 녹음 시간이 보이고 전사된 문장이 입력창에 채워져 있다. — 녹음 중 화면입니다. 파형을 그리며 녹음하면 전사된 문장이 입력창에 스트리밍으로 채워지도록 구현했습니다.

WorkWrap 일일 요약 화면. 버전 탭, 오늘 한 일과 진행 중인 일 요약, 복사·공유·삭제 버튼, 배경 정보 입력이 보인다. — 일일 요약 화면입니다. 다시 요약하면 v1·v2처럼 버전이 쌓여 탭으로 비교할 수 있고, 사용자·업무 맥락 같은 배경 정보를 요약에 함께 쓸 수 있게 했습니다.

WorkWrap 관리 화면. 사용자·승인 대기·메모·요약 수 카드, 최근 14일 사용량 막대 차트, 사용자 목록이 보인다. — 관리 화면입니다. 사용자·승인 대기·메모·요약 수 카드와 최근 14일 사용량 차트를 보여 주고, 사용자를 중지하거나 재승인할 수 있게 했습니다.

2026.10 기준

기술 결정

브라우저마다 다른 녹음 포맷 맞추기

문제: Chrome·Firefox는 webm, Safari는 mp4만 녹음하는데, 전사 API는 파일 확장자로 포맷을 판별합니다.
선택: mimeType과 확장자를 짝지은 후보 목록을 두고, MediaRecorder.isTypeSupported로 브라우저가 지원하는 첫 후보를 골라 녹음·업로드합니다.

전사와 요약을 끝날 때까지 기다리지 않게

문제: 전사·요약은 응답까지 시간이 걸려, 완료될 때까지 빈 화면을 보게 됩니다.
선택: 두 API 모두 SSE로 스트리밍합니다. 전사는 delta 이벤트를 그때그때 보내고 done 이벤트에 전체 텍스트를 함께 실어, 클라이언트가 조각을 다시 이어붙이지 않아도 됩니다. 25MB 상한은 API를 호출하기 전에 걸러냅니다.

재요약은 덮어쓰지 않고 버전으로 쌓기

문제: 같은 날 요약을 다시 만들면 이전 결과가 사라져 사용자가 어느 쪽이 나은지 비교할 수 없습니다.
선택: 요약을 저장할 때 해당 날짜의 마지막 버전 + 1로 새 행을 만들고, 조회는 버전 순으로 합니다.

사용 기술 전체

Next.jsReactTypeScriptTailwind CSSshadcn/uiNeonDrizzleAuth.jsOpenAI APIVercel

CRDD

개발 중 · 베타

2026.09.02 ~ 현재1인 개발 (기획 · 개발 · 배포)

AI가 짠 코드를 내가 얼마나 설명할 수 있는지, 프로젝트 구조 위에 부채비율로 보여주는 서비스.

지금 되는 것: 레포 분석, 개념별 부채비율 지도, 퀴즈와 점수 반영, 여러 LLM 제공자 선택이 동작합니다.
아직 안 되는 것: 새 레포 분석은 GitHub 로그인이 필요하고 퀴즈에는 본인의 LLM API 키가 필요합니다. MCP 서버 버전은 웹이 안정된 뒤 완성할 예정입니다.

GitHub 라이브

CRDD 랜딩. 왼쪽에 소개 문구, 오른쪽에 줄마다 색 막대가 붙은 코드 화면이 있다. — 랜딩 화면에서 서비스 개념을 코드 커버리지 거터로 구현했습니다. 줄 옆 색 막대가 첫 시도에 설명함·힌트 후 설명·설명 못함·아직 안 물음을 나타냅니다.

porklog 레포의 분석 결과. 13개 개념 중 2개를 측정했고 전체 부채비율 96%, 개념 지도와 선택한 개념의 퀴즈 시작 패널이 보인다. — porklog 레포를 실제로 분석한 결과입니다. 13개 개념 중 2개만 측정했고, 측정하지 않은 개념은 부채 100%로 계산해 전체 부채비율이 96%로 나옵니다. 개념을 고르면 오른쪽에 심볼·파일 목록과 퀴즈 시작 버튼이 나오도록 구현했습니다.

CRDD 퀴즈 화면. 문항 1/3, 커밋에 고정한 코드 조각, 내 답변과 채점·놓친 포인트 피드백이 보인다. — 퀴즈 화면입니다. 분석한 커밋에 고정한 코드 조각을 보여 주고, 답변을 LLM이 채점해 놓친 포인트를 알려 줍니다. '모르겠어요'로 다음 단계로 넘길 수도 있습니다.

2026.10 기준

기술 결정

구조 지도는 LLM 없이 만들기

문제: 코드 구조 지도를 만드는 단계에서 LLM을 쓰면 API 키가 있어야 하고 응답도 느려집니다. 게다가 퀴즈 전에 소스를 서버에 남겨 두고 싶지 않았습니다.
선택: 얕은 clone(--depth 1)을 받아 구조 추출 도구(Graphify)를 자식 프로세스로 실행하고, 개념 이름은 규칙으로 붙입니다(LLM 이름 정리는 선택 단계). 끝나면 소스를 삭제하고, 퀴즈에 쓸 코드는 분석한 커밋 SHA로 고정한 raw 주소에서 파일 단위로 다시 가져옵니다. Node와 Python을 한 컨테이너에 담아 Fly.io에 배포합니다.
결과: porklog 기준 레포 주소 입력부터 지도까지 3.5초(clone 1.0초 · 추출 2.2초 · 이름·배치 0.3초), LLM 호출 0회.

재분석해도 점수 이력이 이어지게

문제: Graphify의 커뮤니티 번호는 크기순이라 분석할 때마다 다시 매겨집니다. 점수를 번호에 붙이면 재분석 뒤 엉뚱한 개념에 점수가 붙습니다.
선택: 개념마다 파일 집합 해시로 영속 키를 만들고, 재분석 때는 이전 개념과 파일 집합의 Jaccard 유사도가 0.5 이상인 쌍을 높은 순으로 1:1 매칭해 키를 이어받습니다. 짝을 못 찾은 개념만 새 키를 받습니다.

퀴즈 진행을 순수 상태 머신으로 분리

문제: 같은 문항을 여러 번 찍어 맞히거나 '모르겠어요'로 넘어가도 점수가 같으면, 부채비율이 이해도를 나타내지 못합니다.
선택: 문항 진행을 first → hint → explanation → unresolved 상태 머신(순수 함수)으로 떼어 채점(LLM)·저장(DB)과 분리했습니다. 단계마다 한 번만 답할 수 있고, 배점은 첫 시도 1.0 · 힌트 후 0.6 · 설명 후 0.3 · 못 풂 0입니다.

사용 기술 전체

Next.jsReactTypeScriptTailwind CSSshadcn/uiTursoDrizzleAuth.jsDockerFly.ioGitHub ActionsMCP