사이트는 배포 뒤에 시작된다

핵심요약은 무엇인가?

하루 동안 20개 커밋으로 포트폴리오 사이트를 고도화했다.
봇 필터링, 블로그 검색, 썸네일, 실시간 소통 기능, 슬랙 스타일 단락별 리액션까지 추가했다.
기술적 난이도보다 "무엇을 만들지" 판단이 더 중요했다.
Claude Code와 함께하면 "만들어 → 확인 → 피드백 → 수정" 사이클이 분 단위로 돌아간다.

어제 도메인 연결하고 GA4 붙이고 나니까, "이제 진짜 사이트다"라는 느낌이 들었다. 그러자 부족한 게 보이기 시작했다. 오늘 하루 동안 20개 커밋. 뭘 그렇게 많이 고쳤는지 정리해본다.

아침에 일어나니 봇이 방문자 수를 부풀리고 있었다

GA4를 연동하고 나서 Firestore의 방문자 수와 비교해봤다. 이상하게 높았다. 내 블로그가 이 정도는 아닌데...

이미지를 캡쳐해서 Claude에게 질문했더니 봇 트래픽이라고 알려주었다. 구글봇, 빙봇, 네이버 크롤러 등이 방문할 때마다 카운터가 올라가고 있었다.

그냥 둘까 하다가...봇이 감지되면 방문자 수 카운터를 증가시키지 않도록 처리했다.

썸네일과 검색

블로그 카드에 썸네일이 없으니 밋밋했다. 디폴트 썸네일을 만들었다. 처음에는 PNG로 만들었더니 6.7MB. 이렇게 되면 목록이 많아지면 쓸데없는 데이터 다운로드가 발생해서, JPEG로 변환했더니 41KB로 줄었다.

디폴트 썸네일, 읽기 시간 표시, contentType 뱃지, 검색 기능까지 추가했다.

블로그 목록 페이지가 "검색도 되고, 한눈에 내용이 파악되는" 페이지로 바뀌었다.

"지금 누가 보고 있어요" — 실시간 소통의 시작

이 사이트에서 가장 많은 시간을 쓴 영역이다. 5개 커밋, 5개의 소통 기능을 추가했다.

LIVE 인디케이터

사이드바에 "현재 1명이 보고 있어요" 표시를 추가했다. 현재 접속자 수를 실시간으로 보여준다.

이모지 리액션

사용자 피드백이 궁금하다 보니, 글 하단에 5개 이모지 버튼을 추가했다. 댓글까지 쓰기엔 부담스럽지만, 조금 쉽게 피드백을 주는 방법으로 생각했다.

건의함 → FAB

원래 사이드바에 있던 건의함을 **플로팅 액션 버튼(FAB)**으로 이동했다. 어느 페이지에서든 접근할 수 있고, 방문자 수 일일 카운트 버그도 함께 수정했다.

최근 댓글 알림

사이드바에 최근 댓글과 건의사항을 보여주는 알림 패널을 추가했다. 새 댓글이 있으면 바로 확인할 수 있다.

NEW 뱃지

업데이트된 섹션에 NEW 뱃지를 표시하고, 호버하면 컨텍스트 툴팁이 나온다. 블로그 목록에서도 최근 글에 NEW 태그를 표시한다.

이 기능들의 공통점은 하나다. 방문자가 "그냥 읽고 가는 사람"이 아니라 "참여하는 사람"이 되길 원했다.

블로그는 나의 일기장이 아니라 대화 공간으로 독자가 반응할 수 있는 채널이었으면 좋겠다 생각했다.

프로젝트 2개를 하루에 올렸다

Min Habit

Flutter로 만든 습관 관리 앱이다. 포트폴리오에 추가하면서 관련 블로그 시리즈(Flutter 앱 만들기)와 연결했다. 프로젝트 페이지에서 블로그로의 자연스러운 동선을 고민했다.

PPT Generator

Google Apps Script 기반 PPT 자동 생성 도구. liveUrl 필드를 새로 추가해서 실제 서비스 링크를 프로젝트 카드에 표시할 수 있게 했다.

두 프로젝트 모두 "결과물만 보여주는" 게 아니라 "이걸 만들면서 뭘 배웠는지" 블로그와 연결되는 구조다.

Writing Activity — About 페이지에 블로그 통계를 넣은 이유

About 페이지에 Writing Activity 섹션을 추가했다. 카테고리 분포, 월별 활동, 인기 태그, 시리즈 진행률을 보여준다.

"주인장이 얼마나 꾸준히 쓰는 사람인지" 보여주고 싶었다.

포트폴리오는 결과물을 나열하는 공간이 아니다. 이 사람이 어떤 주제에 관심이 있고, 어떤 사고방식을 가졌는지 보여주는 공간이다.

"좋아요 하나로는 뭘 알 수 있을까?" — 단락별 리액션의 탄생

글 전체에 대한 이모지 리액션을 달고 나니 한계가 느껴졌다. "이 글이 좋다"는 알겠는데, "어디가 좋은지"는 모른다.

슬랙에서 메시지마다 이모지를 다는 경험이 떠올랐다. "이걸 블로그에도 적용하면?"

3번의 설계 변경

여러 번의 시도 끝에 슬랙 스타일로 전면 재설계했다. 문단에 호버하면 리액션 버튼이 나타나고, 클릭하면 해당 문단에 이모지가 표시된다.

다양한 오류와 수정이 이어졌다.

처음부터 완벽하게 설계하는 게 아니라, 빠르게 만들고 피드백 받고 고치는 게 더 빠르다.

관리자 대시보드를 만들려다 멈춘 이유

단락별 리액션 데이터가 쌓이기 시작하니 자연스럽게 "이 데이터를 어떻게 확인하지?"라는 생각이 들었다. 어드민 페이지를 만들면 되겠다고 생각했다가 그런데 이 사이트에는 인증이 없다.

감추지 말고 보여주자

그래서 만든 게 Popular Highlights다. 독자들이 가장 많이 리액션한 문단을 About 페이지에 노출한다. 관리자만 보는 데이터가 아니라, 모든 방문자가 "이 블로그에서 어떤 문장이 공감을 얻었는지" 볼 수 있다.

그런데 About 페이지 맨 아래에 있으니까 스크롤을 끝까지 해야 볼 수 있었다. 그래서 사이드바 서브메뉴를 추가해서 바로 이동할 수 있게 했다.

기능을 만들 수 있다는 것과 만들어야 한다는 건 다른 문제다.

20개 커밋, 하루. 가능했던 이유

Claude Code와 실시간 대화 덕분이다. "이거 만들어줘" → 확인 → "이 부분 수정" → 반영. 이 사이클로 돌아간다.

버그가 있기는 했지만, 생각보다 순항하고 있는 것 같다.

기능을 만든 게 아니라, "이 사이트에 방문한 사람이 어떤 경험을 하길 원하는가?"라는 질문에 20번 답한 것이다. 가장 중요한 건 기술적 난이도가 아니라 "무엇을 만들지" 판단이었다.

이 시리즈도 4편째다.

기획 → 개발 → 운영 → 고도화. 다음 편이 있다면 아마 "최적화" 또는 "회고"가 될 것 같다.

이 글은 Claude Code와의 실제 대화 기록 10개 세션을 기반으로 작성되었습니다.

#바이브코딩 #ClaudeCode #포트폴리오 #이모지리액션 #Firestore #NextJS #UX디자인 #독자참여 #블로그운영 #개발일지