포트폴리오 메인에 블로그 피드를 빌드 타임으로 연동한 방법

포트폴리오 사이트의 메인 페이지가 정적이라는 건 항상 신경 쓰였다. 블로그에선 꾸준히 기술 글을 올리고 있는데, 포트폴리오 방문자가 그 글들을 발견하려면 따로 블로그 섹션으로 들어가야 했다. 이번에 메인 페이지에 최신 블로그글 피드 섹션을 추가하기로 결정했다. 단순한 UI 개선처럼 보이지만, 포트폴리오-블로그 연동 구조를 어떻게 설계하느냐는 기술적 판단이 필요한 작업이었다.

정적 배포 vs 동적 생성의 갈림길

가장 먼저 고민한 건 "언제 피드를 만들 것인가"였다. 몇 가지 선택지가 있었다:

• 클라이언트단 JavaScript로 동적 로드: 페이지 로드 후 API 호출로 블로그 피드 가져오기
• 서버 사이드 렌더링: 배포 시마다 동적으로 생성
• 빌드 타임 정적 생성: Python 스크립트로 미리 생성해서 HTML에 삽입

결국 세 번째 방식을 선택했다. 이유는:

1. 배포 단순성: 포트폴리오는 정적 호스팅(CDN)으로 운영 중. 서버 없이도 최신 피드를 포함하려면 빌드 타임에 생성하는 게 깔끔하다.
2. 성능: 클라이언트 요청 없이 HTML에 미리 삽입되어 있으니 페이지 로드 지연 없음.
3. SEO: 검색 엔진이 정적 HTML을 크롤링할 때 블로그 링크와 제목도 함께 인덱싱된다.

정적이면서도 블로그는 계속 업데이트되는 상황을 다루기 위해, 배포 파이프라인에 Python 스크립트(gen_blog_feed.py)를 끼워 넣는 방식으로 해결했다.

구현: HTML + Python 스크립트

Python 스크립트가 하는 일:
- 블로그에서 최신 N개 글의 메타정보 추출 (제목, 링크, 날짜, 요약)
- HTML 템플릿에 맞게 마크업 생성
- 빌드 시점에 portfolio/index.html에 주입

이 방식의 장점은 의존성이 적다는 것. 블로그 플랫폼이 바뀌거나 구조가 변해도, 스크립트만 수정하면 된다. 포트폴리오 페이지 자체는 손댈 필요 없다.

설계에서 고민한 부분

피드 생성 스크립트를 만들면서 주의한 건:

에러 처리: 블로그에서 데이터를 못 가져왔을 때 빌드가 깨지면 안 된다. 폴백 처리를 해서 최신 피드 없이도 포트폴리오는 정상 배포되도록 함.

갱신 주기: 매번 배포할 때만 피드가 업데이트된다. 블로그에 새 글이 나올 때마다 포트폴리오도 재배포해야 한다는 뜻. 이걸 자동화할지, 수동으로 할지는 팀의 배포 빈도에 따라 결정.

캐싱: 피드 정보가 자주 변하지 않으니, 스크립트 실행 결과를 일단 캐시해두고, 필요할 때만 갱신하도록 최적화 가능.

팀 리딩 관점에서의 회고

이 작업을 통해 깨달은 건, 기술 선택이 팀의 운영 패턴을 좌우한다는 것. 동적 로딩 방식이 "더 현대적"으로 보일 수 있지만, 우리 팀은 CI/CD 파이프라인과 정적 배포에 이미 익숙하니 빌드 타임 생성이 정답이었다.

또한 이런 작은 피처 하나를 추가할 때도 "유지보수는 누가 할 건가"를 먼저 생각해야 한다. Python 스크립트는 다음 사람도 쉽게 이해하고 수정할 수 있어야 한다. 주석과 문서화가 없으면 6개월 뒤 내가 봐도 헷갈린다.

마지막으로, 포트폴리오와 블로그를 이렇게 연동하는 것 자체가 개발자로서의 신뢰도를 높이는 UX다. 방문자가 포트폴리오 메인에서 최신 기술글을 자연스럽게 발견할 수 있으면, "이 사람은 꾸준히 활동하는 개발자네"라고 느낀다.

🛒 이 글과 어울리는 추천 상품

• 노트북 쿠팡에서 보기 →
• 모니터 쿠팡에서 보기 →
• 기계식키보드 쿠팡에서 보기 →

*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.