비개발자 연구원이 Claude Code로 포트폴리오 사이트를 뚝딱 만들어버린 이야기

내 콘텐츠를 AI가 직접 읽고, 추출하고, 반영했다.
완성된 포트폴리오 사이트 보기

😫 상황

행정학·국제학 전공에 데이터연구소 연구원으로 일하면서 나름 쌓인 게 있었다. 공공데이터 전수조사, 서울시 정책 반영, OGP 청년위원, KBS·YTN 선거방송 기획까지. 근데 이걸 보여줄 공간이 없었다.

노션은 너무 밋밋했고, PDF 이력서는 링크도 영상도 못 넣는다. 결국 "포트폴리오 사이트 하나 있어야 하는데..." 를 몇 년째 미루고 있었다.

코딩 Gemini CLI정도 실무에서 사용한 게 다였고 이번에 처음으로 Claude Code와 B-Kit을 설치했다. 이 친구들을 활용해보기로 했다.

🔧 내가 한 것들

콘텐츠 수집을 AI한테 맡겼다

자기소개서 18개가 Google Docs에 흩어져 있었다. 이걸 일일이 복붙할 생각을 하니 막막했는데, 그냥 링크 모아둔 문서 하나를 던졌다.

구글문서 링크를 줄게. 해당 링크 안에는 내가 앞서 말한 PPT 링크, 
자기소개서 docs 링크들이 모두 있어. 
네가 전부 읽고 분석해서 반영해야지~

Claude가 알아서 18개 문서를 전부 열어서 읽고, 경력·수상·활동 내용을 정리해서 각 섹션에 넣었다. 내가 한 건 링크 하나 전달한 것뿐.

Canva PPT에서 이미지랑 영상을 자동으로 뽑아냈다

포트폴리오 PPT를 Canva로 만들어뒀는데, 거기 있는 사진이랑 유튜브 영상을 사이트에 쓰고 싶었다. 근데 Claude는 Canva에 직접 접근을 못 했다.

처음엔 iframe 임베드 얘기가 나왔는데, PPT 전체를 웹에 그냥 넣는 방식이라 별로였다. 계속 더 좋은 방법을 요구했다.

더 좋은 방법 없어? 나는 네가 잘 할 거라 생각했는데

그랬더니 나온 방법이 PPTX 파일 압축 해제였다. PPTX가 사실 ZIP 파일이라는 걸 처음 알았다.

.pptx 파일을 프로젝트 폴더에 넣었더니:

unzip -o canva_export.pptx -d pptx_extracted/
grep -roh "https://[^\"'<>]*youtu[^\"'<> ]*" pptx_extracted/

내가 한 건 파일 하나 폴더에 넣은 것. 나머지는 Claude가 다 했다.

선거방송 링크는 Google Sheets 하이퍼링크에 있었다

KBS·YTN 대선 방송 코너별 YouTube 링크를 스프레드시트로 관리하고 있었다. 근데 CSV로 내보내면 하이퍼링크가 사라진다는 걸 Claude가 파악하고, .xlsx로 받아서 XML을 직접 파싱했다.

이 링크에 다 모여있어 [Google Sheets 링크]

한 줄 던졌더니 KBS 코너 6개 + YTN 3차분, 총 9개 링크를 자동으로 뽑아서 프로젝트 모달에 삽입했다.

프로필 사진 위치 조정은 손이 좀 갔다

PPT 표지에 있는 내 사진을 원형 프로필로 쓰고 싶었다. 근데 원본이 2376×972 가로형 이미지라 얼굴이 계속 잘리거나 엉뚱한 곳을 보여줬다.

"더 오른쪽으로", "너무 갔어", "왼쪽으로"를 몇 번 주고받으면서 수동으로 맞췄다.

objectFit: "cover",
objectPosition: "31% 0%",
transform: "scale(1.4)",
transformOrigin: "31% 15%"

이건 AI가 한 번에 못 맞추는 부분이었다. 눈으로 보면서 조금씩 조정하는 게 제일 빨랐다.

✅ 결과

6개 섹션 완성 (Hero, About, Timeline, Projects, Awards, Contact)
프로젝트 카드 클릭 → 모달로 세부내용 + YouTube 임베드 + 사진 갤러리
활동 사진 콜라주 배경, 프로필 사진 원형 적용
선거방송 코너 9개 영상 링크 + 관련 이미지 삽입
Vercel 배포 완료, 실제 URL로 공개 중 https://portfolio-kimminji.vercel.app/
https://portfolio-kimminji.vercel.app/
코드 한 줄 안 씀

💡 배운 것들

1. "더 좋은 방법 없어?"를 겁내지 말자

Canva iframe 얘기가 나왔을 때 마음에 안 들어서 계속 물어봤다. 그랬더니 PPTX 파싱이라는 훨씬 좋은 방법이 나왔다. Claude는 처음에 무난한 방법을 제시하는 경향이 있다. 계속 요구하면 더 나온다.

2. "항상 옵션을 먼저 제안해줘"

초반에 이 한 마디를 남겨뒀더니, 이후 모든 작업에서 Claude가 먼저 선택지를 보여주고 내가 고르는 방식이 됐다. 훨씬 주도적으로 작업할 수 있었다.

3. AI가 못 하는 게 있다

사진 속 얼굴 위치 미세조정은 결국 내가 눈으로 보면서 했다. "더 오른쪽", "조금 왼쪽" 같은 공간 감각은 AI가 정확히 못 맞춘다. 이런 건 내가 직접 개입하는 게 빠르다.

📋 바로 써볼 수 있는 프롬프트

내 자료를 AI가 읽게 할 때:

이 링크에 내 [자기소개서/이력서/자료]가 있어.
전부 읽고 분석해서 [원하는 결과]에 반영해줘.

더 좋은 방법을 끌어낼 때:

지금 방법 말고 더 좋은 방법 없어?
내가 [상황]인데, 더 스마트하게 할 수 있는 방법을 비교해서 알려줘.

AI가 혼자 처리하게 할 때:

[파일/링크]를 프로젝트 폴더에 넣었어.
거기서 [원하는 것]을 직접 추출해서 [어디에] 반영해줘.

🚀 앞으로의 계획

배포와 콘텐츠 추가는 이미 완료했다. Vercel로 실제 URL에 올라갔고, 선거방송 관련 이미지도 반영했다. 이전 시민단체 업무 시절에 매번 블럭형 사이트 제작SaaS를 어렵게 사용했던 기억이 있는데 이렇게 손쉽게 만들어진다는 사실이 새삼 신기했다.

다음 단계는 이 포트폴리오 사이트를 넘어서, 커리어 자산을 관리하는 서비스를 직접 만드는 것이다.

지금은 영상, 사진, 문서가 Google Docs, Canva, Sheets에 흩어져 있다. 포트폴리오를 업데이트하려면 매번 파일을 찾아서, 정리하고, 코드에 반영해야 한다. 귀찮고 지속하기 어렵다.

만들고 싶은 건 이런 구조다.

[나 (관리자)]
영상·사진·문서 업로드
        ↓
서비스가 자동으로 분류·정리
        ↓
[외부 방문자]
포트폴리오 사이트에서 열람

내가 자료를 올리면 서비스가 알아서 정리해주고, 외부 사람들은 그 결과물을 포트폴리오 사이트로 본다. 커리어 관리 툴이면서 동시에 퍼블릭 포트폴리오인 셈이다.

이게 잘 되면 나 같은 비개발자 — 강연자, 연구자, 활동가, 프리랜서 — 누구든 자신의 커리어 자산을 쉽게 관리하고 보여줄 수 있는 서비스로 사업화하는 방향도 생각하고 있다.

결국 이번 포트폴리오 작업은 완성 자체보다, "내가 원하는 걸 말하면 AI가 구현한다"는 감각을 익힌 것이 더 큰 수확이었다. 다음 서비스도 같은 방식으로 만들 예정이다.

온·오프라인 AI 스터디