포트폴리오 사이트를 만들기 시작했다 (Day 6)

도로의 이것저것·2026년 7월 28일

AI에이전트

목록 보기
7/15


에이전트 코어(코드 리뷰 + 블로그 학습 AI)는 5일 만에 완성하고 마켓플레이스 배포까지 끝냈어요. 오늘부터는 로드맥 Phase3, 지금까지 만든 걸 보여줄 포트폴리오 사이트를 시작했어요.

왜 Next.js인가

처음부터 정해뒀던 스택 그대로예요. Next.js + Tailwind, 배포는 나중에 Vercel로. 별도 서버 없이 정적에 가깝게 배포할 수 있고, 이 프로젝트가 다루는 "AI 에이전트 생태계"라는 콘셉트와도 잘 맞아요 - 나중에 Phase 4에서 같은 에이전트를 챗 위젝으로 붙일 때도 Next.js API 라우트로 바로 연결할 수 있거든요.

오늘 만든 세 섹션

Hero- 자기소개 한 줄 + GitHub·벨로그·인스타 링크. 화려하게 꾸미기보다 "무엇을 만들고 있는 사람인지"가 3초 안에 보이는 걸 목표로 했어요.

Project - 지금은 Kodex 카드 하나."진행 중"배지를 달아두고, CLI 레포·확장 레포·마켓플레이스 링크를 한곳에 모았어요. 새 프로젝트가 생기면 src/data/projects.ts에 항목만 추가하면 되는 구조예요.

Devlog - 벨로그 Day1~5글 목록을 카드로 나열. 이것도 src/data/posts.ts에 새 글 정보만 추가하면 자동으로 목록에 뜨게 만들었어요. 매번 페이지 컴포넌트를 손대지 않아도 되니까, 앞으로 글 쓸 때마다 부담이 줄어요.

브랜드 컬러는 지금까지 인스타 카드뉴스에 쓰던 네이비(#0B1220)·민트(#34D399) 조합을 그대로 가져왔어요. 채널마다 색이 다르면 "같은 프로젝트"라는 느낌이 옅어지니까요.

오늘의 삽질

빌드 검증을 하다가 next/font/google로 Inter 폰트를 불러오는 부분에서 에러가 났어요. 빌드 시점에 Google Fonts 서버로 직접 요청을 보내는 방식이라, 외부 네트워크가 막힌 환경에서는 그 요청 자체가 실패해요.

Error [NextFontError]: Failed to fetch font `Inter`.

당장은 폰트 하나 때문에 빌드가 아예 막히는 구조라, 시스템 기본 폰트로 바꿔서 외부 요청 자체를 없앴어요. 나중에 필요하면 폰트 파일을 프로젝트 안에 직접 넣는 방식(next/font/local)으로 다시 붙일 수 있어요.

오늘까지 진행 상황

Phase 1·2는 5일 만에 끝냈고, Phase 3(포트폴리오 사이트)도 첫날부터 세 섹션이 다 도는 상태로 시작했어요. npm install도 정상적으로 끝났고, 코드 자체는 에러 없이 컴파일까지 확인했어요.

다음 계획

이 프로젝트를 별도 GitHub 레포로 분리해서 푸시하고, Vercel에 연결해서 실제로 배포할 예정이에요.

profile
AI 서비스 기획•개발자 취업 준비생 입니다

0개의 댓글