강원 대학 바이브코딩 특강 사례: 한림대학교 클로드 코드로 포트폴리오 사이트 만들고 배포까지

강원 춘천 한림대학교 MICE기획경영전공의 AX Insight 특강에서 클로드 코드로 포트폴리오 사이트를 만드는 3시간 실습을 진행했습니다. 1교시에는 클로드가 나를 인터뷰하고, 2교시에는 레퍼런스를 조사해 시안을 고르고, 3교시에는 클라우드플레어에 배포하는 순서였어요. 1~2학년 학생분들과 교수님이 각자 노트북으로 참여하셨고, pages.dev 같은 클라우드플레어 주소로 배포된 포트폴리오가 시트에 다섯 개 모였어요.

시작 전 체크인 시트를 보니 참여하신 여덟 분 모두 AI를 매일 쓰고 있었고, 클로드 코드나 코덱스로 바이브코딩을 해 본 분도 많았어요. 그래서 도구 사용법보다 클로드에게 어떤 맥락과 레퍼런스를 줘야 하는지에 시간을 썼는데요, 단계마다 클로드에게 맡긴 일과 직접 정한 일을 순서대로 살펴보시죠!

바이브코딩이 쉬워진 지금, 왜 기획부터 하나요?

첫 시간에는 온라인 절 산사 이야기를 했어요. 취업 준비 중인 20대 개발자가 AI 바이브코딩으로 만든 가상 사찰인데, 사흘 만에 60만 명이 다녀갔다고 해요. 화려한 기능 없이 절에 갈 기운도 없는 또래의 마음을 짚은 사이트였습니다.

저도 사이드 프로젝트를 이것저것 만들면서 쓸모없는 결과물을 많이 쌓고 있는데요, 요즘은 컨셉 싸움이라는 생각이 들어요. 화면의 세부 디자인은 AI가 금방 따라 만들기 때문에, 사람의 경험과 기획이 결과물을 다르게 만듭니다. 이날 실습도 그래서 사이트를 만들기 전에 나에 대한 맥락을 모으는 일부터 시작했어요.

폴더 하나와 CLAUDE.md로 맥락부터 쌓았어요!

바탕화면에 이름으로 포트폴리오 폴더를 만들고, 클로드 데스크톱 앱의 클로드 코드에서 환경을 로컬로 골라 그 폴더를 열었습니다. 모델은 Opus 5.5, 노력은 중간으로 맞췄어요. 처음 기획을 잡는 단계는 노력을 높이고, 실행 단계에서는 낮추거나 Sonnet을 써도 충분하다고 안내드렸습니다.

첫 입력은 노션 실습 가이드에 넣어 둔 이 프롬프트예요. 학년, 이름, 관심 분야, 목표만 각자 바꿔 넣었어요.

이 프로젝트는 나의 포트폴리오를 만드는 프로젝트야.
나에 대한 인터뷰를 진행하고 여기에 맞는 레퍼런스를 조사한 후 cloudflare 무료 계정으로 배포까지 할거야

이걸 위한 claude.md를 만들어줘. 그리고 아래 내용을 저장해줘.

나는 한림대학교 MICE기획경영전공 ○학년 ○○○이야.
관심 분야: 행사 기획, 마케팅, 연구 중 내 분야를 적기
목표: 인턴 지원, 대학원 진학, 취업 중 하나를 적기
포트폴리오를 만들 거야. 사실만 쓰고, 모르는 건 나에게 물어봐.

인터뷰는 한 번에 질문 하나씩 해 줘.
목표는 두 가지야. 내 강점과 포트폴리오 페이지에 내세울 핵심 메시지 한 줄, 그리고 대표 경험 3개.
경험마다 문제, 내 역할과 판단, 결과(숫자), 배운 점이 채워질 때까지 물어봐 줘.

CLAUDE.md는 클로드 코드가 대화를 시작할 때 제일 먼저 읽는 문서라서, 빈 폴더에서 시작할 때 프로젝트 목적부터 여기에 적어 두면 좋아요. 대화가 길어져 컨텍스트가 차면 클로드가 알아서 앞 내용을 압축하는데요, 이때 내가 중요하게 여긴 내용이 빠질 수 있어 진행 상황은 따로 문서로 남기게 했습니다.

plan.md를 만들고 여기에 어디부터 어디까지 진행되었는지 그리고 남은 걸 적어서 다음 세션에서도 이어갈 수 있게 하고 CLAUDE.md에도 반영해.

plan.md는 인수인계서 역할을 해요. 새 파일을 만들면 CLAUDE.md에도 그 파일이 무엇인지 꼭 적어 두세요. 적어 두지 않으면 다음 대화에서 클로드가 그 파일을 놓칠 수 있습니다.

인터뷰 결과는 마크다운 문서로 받아요!

클로드가 질문을 하나씩 던지면 학생분들은 20분 동안 답만 했어요. 막히면 예시를 들어 달라고 하고, 숫자가 기억나지 않으면 모른다고 답하고 넘어가도 됩니다. 인터뷰가 끝나면 이렇게 정리를 요청했습니다.

지금까지 답한 내용으로 정리해 줘.
1. 메시지 한 줄 후보 3개
2. 강점 3개와 근거가 되는 경험
3. 케이스 3개: 문제, 내 역할과 당시 했던 행동, 결과, 배운 점
마크다운 파일로 만들어 줘.

저는 시연용으로 제가 참여한 부산 부모님 안전운전 캠페인 기록을 주고, 이 기록으로 인터뷰한 것처럼 문서를 만들어 달라고 했어요. 클로드가 질문 17개 분량의 인터뷰 문서를 만들었는데요, 기록에 없는 배포 수량과 신청 건수, 제가 맡은 역할 같은 여섯 군데는 확인 필요로 비워 두었습니다. 기록에 다른 기관과 제출자가 적혀 있어서 제 역할을 확인해야 한다는 메모도 붙였고요.

이렇게 받은 문서에서 메시지 한 줄을 고르고 문장을 고치는 일은 사람이 해요. 클로드가 팀을 이끌었다거나 리더십을 발휘했다는 식으로 부풀린 문장을 쓰면, 실제로 맡은 일과 확인한 숫자로 바꿉니다.

레퍼런스는 몇 개를, 어떻게 줘야 하나요?

2교시를 시작하며 부산 캠페인 랜딩페이지를 만든 과정을 보여드렸어요. 국내외 캠페인 페이지 20곳을 비교한 뒤, 제가 세 곳을 골랐습니다. 첫 화면 색감이 좋은 곳, 애니메이션이 좋은 곳, 스토리텔링을 잘한 곳이었어요.

세 곳을 주고 알아서 섞으라고 하면 결과가 매번 달라져요. 사이트마다 마음에 든 점을 적어서 이야기 중심 시안, 힙한 디자인 시안, 편지 장치를 넣은 시안을 받았는데, 셋 다 그대로 쓰기는 아쉬웠습니다.

결국 세 시안에서 괜찮은 요소만 골라 다시 합쳤고, 그 뒤로는 세 번만 고쳐서 완성했어요.

레퍼런스가 한 곳뿐이면 그 사이트를 베낀 것처럼 나와요. 해운대에서 운영하는 공간의 홈페이지를 만들 때도 국내 사이트는 서로 비슷해서 업종과 상관없이 해외 사이트에서 세 곳을 골랐습니다. 레퍼런스는 두세 곳을 섞고, 곳마다 좋았던 점을 한 줄씩 적어 주는 게 가장 확실했어요.

조사는 클로드에게, 링크 확인은 내가 해요!

실습 2에서는 클로드 웹 검색으로 참고 포트폴리오를 모았어요. 노션 가이드에 Behance, Pinterest, Awwwards, Bestfolios, Dribbble, Framer 같은 레퍼런스 사이트를 적어 두고, 이 프롬프트로 조사를 맡겼습니다.

웹 검색으로 참고할 포트폴리오 사이트 10개를 찾아 줘.
웹검색은 pinterest, framer marketplace를 참고해줘.
내 분야: MICE·행사 기획 (내 목표에 맞게 바꾸기)
케이스별 상세 페이지가 있는 사이트를 꼭 넣어 줘.
표로 정리해 줘: 주소, 누구의 포트폴리오인지, 메인 구성, 케이스를 보여주는 방식, 내가 가져올 점

결과는 마크다운으로 저장해줘.

제 시연에서는 클로드가 검색과 페이지 확인을 몇 차례 거쳐 행사 기획 포트폴리오 10곳을 비교표로 저장했어요. Pinterest 핀은 로그인 없이는 열리지 않아 보드 단위로만 참고했고, Framer에는 행사 기획 전용 개인 템플릿이 없었다고 적혀 있었습니다. 표 아래에는 케이스 상단에 역할과 주최, 기간, 장소를 두고 결과 숫자는 세 개 이내로 크게 보여주자는 적용안도 정리돼 있었어요.

조사 결과에는 없는 주소나 설명과 다른 사이트가 섞일 수 있어요. 비교표를 받으면 링크를 하나씩 직접 열어 보고, 열리지 않는 곳은 표에서 지우세요.

시안은 첫인상이 다른 세 개로 받아 보세요!

조사를 보고 저는 목표를 한 번 바꿨어요. 여러 번 찾아오는 사이트보다 첫 방문 한 번에 제 감도를 보여주는 사이트가 필요하다고 요청했고, 같은 경험을 담은 첫 화면 시안 세 개를 받았습니다. 상자가 열리며 결과물이 튀어나오는 시안, 손전등으로 파일을 찾는 시안, 손글씨 편지가 써지는 시안이었어요.

시안을 고르는 동안 대표 경험도 홈페이지, 마케팅, 현장 운영 세 가지로 다시 정했는데요, 마케팅 경험에 고객사 광고 수치가 들어가는 바람에 이 초안은 공개 링크 대신 저만 보는 비공개 링크로 올렸어요. 포트폴리오에 넣는 숫자와 이미지를 공개해도 되는지는 클로드가 판단해 주지 않아요. 확인은 직접 해야 합니다.

배포는 클로드 코드에 한 줄로 맡겼어요!

3교시에는 고른 시안을 메인 페이지와 경험별 상세 페이지로 나눠 폴더에 저장하게 했어요.

0번 시안으로 가자. 폴더에 결과물을 저장해줘.
- index.html: 메시지와 케이스 카드 3개
- case-1.html, case-2.html, case-3.html: 케이스별 상세 페이지
- 카드를 누르면 상세 페이지로 가고, 상세 페이지에는 메인으로 돌아가는 링크를 넣어 줘.
- 사진까지 넣고 사진이 없으면 나한테 달라고 해.

클라우드플레어는 강의 전에 무료 가입과 이메일 인증까지 마쳐 두도록 안내했어요. 로그인만 해 두면 배포 명령은 클로드 코드가 진행합니다.

cloudflare에 로그인했어. 너가 끝까지 배포 진행해줘.

주소가 생기면 메인 화면, 경험별 상세 화면, 모바일 화면 세 가지를 열어 본 뒤 체크인 시트에 적게 했어요. 시트에 올라온 포트폴리오 주소 다섯 개는 다음 날 다시 열어 봤을 때도 모두 정상으로 열렸습니다.

단계별로 맡긴 일과 직접 정한 일

강의를 마치며

체크인 시트의 아쉬운 점 칸에는 "부자연스러운 글", "아이디어 측면에서 너무 뻔한 내용" 같은 답이 적혀 있었어요. 저는 이런 아쉬움을 줄이는 방법이 나에 대한 맥락과 잘 고른 레퍼런스라고 생각해서, 3시간 중 두 교시를 인터뷰와 레퍼런스 조사에 썼어요.

포트폴리오는 한 번 배포하고 끝나지 않아요. 지원할 때마다 공고 내용을 주고 경험 순서와 강조할 숫자를 바꿔 달라고 하면 회사마다 다른 버전을 만들 수 있습니다. 다음 지원서를 쓰실 때 꼭 해 보세요!

함께 읽으면 좋은 글

대학 강의 사례

① 대학생 AI 학습법 특강 사례: 명지대학교 마크다운·PARA·노트북LM 지식 관리법

② 경동대학교 학습공동체 특강, Gemini 노트북LM과 노션으로 팀 프로젝트 협업 환경 만들기

바이브코딩 홈페이지 제작

③ AI, 바이브코딩으로 만든 홈페이지는 왜 다 비슷해질까?

④ 클로드 코드와 코덱스로 만든 캠페인 랜딩페이지, 회의록부터 신청서와 배포까지 AI에게 맡긴 일

클로드 기능 이해하기

⑤ 클로드 대화, 코워크, 클로드 코드 도대체 뭐가 다른 걸까요? 세가지 기능 차이 비교했습니다!

⑥ 클로드 Fable 5.2, 5.1과 차이와 X 화제 사례 7가지 프롬프트