📝 한줄 요약
코딩 경험 제로인 대학생이 Claude Code로 11일 만에 풀스택 포트폴리오 사이트를 만들었다. 3번 엎고, 수십 번 수정하면서 알게 된 AI 코딩의 진짜 사용법.
바쁘시면 이것만 읽어도 돼요:
Claude Code로 Next.js + Supabase 풀스택 개인 웹사이트 구축 (11일, 60+ 커밋)
AI에게 "이쁘게 해줘"는 안 먹힌다 — 투명도, 좌표, 외곽선 같은 수학적 디렉션이 필요하다
기획을 촘촘하게 할수록 중간 수정이 줄고 결과물 퀄리티가 올라간다 (3번 엎으면서 체감)
프론트엔드 디자인이 가장 어렵다 — 21dev 같은 보조 도구 병행이 필수
백엔드는 기획만 잘하면 생각보다 어렵지 않다
AI를 '도구'가 아니라 '파트너'로 제대로 활용하는 감각을 얻게 됐다
🎯 이런 분들께 도움돼요
만들고 싶은 건 있는데 개발을 몰라서 답답한 대학생/직장인
바이브코딩이 실제로 어느 수준까지 되는지 궁금한 분
AI 코딩 도구를 써보고 싶은데 현실적인 후기가 궁금한 분
😫 문제 상황 (Before)
나를 표현할 공간이 없었다.
포트폴리오 사이트가 아니다. 취업용 이력서 나열이 아니라, '나'라는 사람을 보여주는 페이지가 갖고 싶었다. 내가 좋아하는 음악, 읽은 책, 찍은 사진, 만든 프로젝트 — 이런 것들을 한 곳에 모아서 누군가 에게 "이게 나야"라고 보여줄 수 있는 공간.
문제는, 이걸 실현할 수단이 없었다는 거다.
노션 페이지? 링크트리? 내가 원하는 수준의 디자인과 인터랙션은 절대 나오지 않는다. 머릿속에는 미니멀하고 감각적인 사이트가 그려지는데, 개발을 모르니까 상상만 하고 있었다.
그러다 Claude Code를 알게 됐다. "진짜 이걸로 웹사이트를 만들 수 있어?" 반신반의하면서 시작했다.
🛠️ 사용한 도구
AI 코딩: Claude Code (Claude Opus 모델)
프론트엔드 보조: 21dev (디자인/인터랙션 프롬프트 제공 사이트)
기획 방법론: bkit PDCA (Plan-Do-Check-Act 사이클)
🔧 작업 과정
방명록에서 시작된 아이디어 — "나만의 공간을 만들고 싶다"
처음부터 포트폴리오 사이트를 만들려던 건 아니었다.
시작은 소박했다. "나만을 위한 방명록 웹사이트를 만들고 싶어." 전시회 포스터 같은 느낌에, 방문자가 메시지를 남기는 페이지. Claude Code에게 이렇게 요청했다:
나만을 위한 방명록 웹사이트를 만들고 싶어. 전시회 포스터 느낌, 핀터레스트 무드.
백엔드로 Supabase를 연결하고, 랜딩 페이지에 토성 고리처럼 이미지가 도는 디자인을 넣고, 픽셀 도트 타이핑 애니메이션까지. 방명록 하나 만드는 건데 점점 욕심이 커졌다.
그러다 문득 생각이 바뀌었다.
방명록 말고 내 개인 포트폴리오를 만들래. 취업용이 아니라 '나'라는 사람을 나타내는 personal page.
6개 카테고리를 정했다 — About Me, Work & Project, Music, Read & Write, Photo Dump, Guestbook. 방명록은 카테고리 중 하나가 됐고, 프로젝트의 스케일이 완전히 달라졌다.
3D 글로브, 갤럭시 UI — 야심 찬 실험과 좌절
스케일이 커지니까 디자인 욕심도 같이 커졌다.
3D 지구본에 이미지 카드가 위성처럼 도는 네비게이션. 글로브 클릭하면 줌인되면서 사이드바 모달.
3D 글로브에 위성처럼 이미지 카드가 돌고, 배경에는 끝없는 갤럭시 애니메이션. 구현은 됐다. 근데... 이쁘지가 않았다. 오렌지 킥컬러도 넣어보고, 와이어프레임 구체도 시도하고, 스파클 트레일도 추가해봤다. 며칠간 수십 번 수정했지만 만족스럽지 않았다.
결국 내린 결론:
걍 접자. UI 갈아엎을래.
그리고 하루 뒤:
아.. 그냥 다 집어치우고 아예 새로 만들래!
프로젝트 폴더를 통째로 삭제했다. 며칠간의 작업이 날아갔지만, 오히려 속이 시원했다. "좀 더 뾰족하게 기획해서 돌아올게"라고 메모를 남기고 잠시 멈췄다.
기획부터 다시 — PDCA의 위력
이틀 뒤, 다시 돌아왔다. 이번에는 달랐다.
이전에 왜 실패했는지 알았다. 기획 없이 바로 만들기 시작해서 방향이 흔들렸던 거다. 이번에는 bkit의 PDCA 방법론을 적용했다. Plan(기획) → Do(구현) → Check(검증) → Act(개선) 사이클.
PRD(제품 요구사항 문서)를 먼저 작성했다. 6개 카테고리 구조, 어드민 CMS, 한/영 다국어, 다크모드 — 만들 것과 안 만들 것을 명확히 정의했다.
그랬더니 놀라운 일이 벌어졌다.
기획 문서를 기반으로 Claude Code에게 구현을 요청하니까, 하루 만에 5개 Phase가 완성됐다. 프로젝트 기반 구축 → 핵심 페이지 → 콘텐츠 페이지 → 댓글/방명록 인터랙션 → 어드민 인증까지. 이전에 며칠 걸려도 못 끝냈던 작업이 기획을 제대로 하니까 하루 만에 끝났다.
기획에 투자한 시간이 구현 시간을 10배 이상 절약해준다는 걸 직접 체감했다.
"이쁘게 해줘"는 진짜 안 통한다
백엔드는 기획만 잘하면 생각보다 수월했다. 데이터베이스 테이블 설계, 인증, 보안 정책 — Claude Code가 기획 문서를 보고 알아서 척척 세팅해줬다.
진짜 어려운 건 프론트엔드였다.
AI는 코딩을 한다. 즉, 시각적인 화면을 컴퓨터 수학으로 이해한다. 그런데 디자인은 미적 감각의 영역이다. 이 간극이 정말 컸다.
처음에는 이렇게 요청했다:
깔끔하게 디자인 해줘
결과? 내 기대와 전혀 다른 화면이 나왔다. AI가 생각하는 "깔끔함"과 내가 생각하는 "깔끔함"은 완전히 달랐다.
몇 번의 시행착오 끝에 알게 됐다. AI에게는 감각적인 디렉션이 아니라 수학적인 디렉션을 줘야 한다는 것.
지금 너무 배경색이 강해서 투명도 20 정도 낮춰주고, 외곽선 삭제해주고, XY 좌표 각각 가운데 정렬 맞춰줘
이렇게 구체적으로 — 투명도 몇 퍼센트, 어떤 선을 빼고, 좌표를 어디에 맞출지 — 지시하니까 그제야 내가 원하는 결과물이 나오기 시작했다.
"여백 좀 넉넉하게" 대신 "패딩 상하 40, 좌우 24", "좀 더 세련되게" 대신 "폰트 사이즈 14px, 자간 0.02em, 색상 #666" 같은 식이다.
AI와 디자인 협업을 하려면, 내 머릿속 '느낌'을 숫자와 속성으로 번역하는 능력이 필요하다.
21dev — 프론트엔드 난관의 돌파구
그래도 고퀄리티 인터랙션은 프 롬프트만으로는 한계가 있었다. 호버하면 카드가 확장되는 효과, 3D 카드 레일, 슬라이딩 네비게이션 — 이런 건 "이렇게 만들어줘"라고 말로 설명하기가 정말 어렵다.
이때 스터디장님이 21dev라는 사이트를 알려줬다. 다양한 웹 인터랙션과 디자인 컴포넌트를 구현할 수 있는 프롬프트를 제공하는 사이트다.
여기서 원하는 디자인을 찾고, 프롬프트를 복사해서 Claude Code에 붙여넣었다. 근데 중요한 게 있다 — 프롬프트를 그대로 붙여넣기만 하면 안 된다.
반드시 내 상황에 맞게 디렉션을 추가해야 한다:
이 프롬프트에서 지금 내 페이지에 구현할 것
수정할 것
사용하지 않을 것
이 세 가지를 명확히 붙여서 요청해야 의도대로 나온다. 프롬프트를 복사해서 "이거 만들어줘"만 하면 내 프로젝트와 동떨어진 결과물이 나온다.
21dev 덕분에 ExpandCards(호버 확장 카드), FocusRail(3D 카드 레일), SlideNav(슬라이딩 네비게이션) 같은 고퀄리티 컴포넌트를 구현할 수 있었다. 혼자 프롬프트만으로 시도했으면 며칠은 더 걸렸을 거다.
인라인 어드민 CMS — 생각보다 대공사
사이트에 콘텐츠를 올리려면 어드민 기능이 필요하다. 보통은 별도의 관리자 페이지를 만드는데, 나는 실제 페이지 위에서 바로 편집하는 방식을 원했다. 블로그 글 쓰듯이.
블로그처럼 인라인에서 바로 수정하는 방식으로 CRUD를 만들자. ··· 메뉴에서 Edit/Delete.
이게 생각보다 대공사였다. 데이터베이스(백엔드)와 화면 디자인(프론트엔드)을 동시에 고려해야 하는 작업이라, 한쪽을 수정하면 다른 쪽에 영향이 가고, 그걸 또 맞추면 또 다른 곳이 어긋나고...
Google 로그인 인증, 어드민 모드 토글, 이미지 업로드, 정렬 변경, 삭제 확인 모달까지. 결국 완성하긴 했지만, 다음에 한다면 이 부분을 기획 단계에서 훨씬 더 자세하게 설계할 것 같다.
Claude Code 효율적으로 쓰는 법
11일간 집중적으로 쓰면서 Claude Code를 효율적으로 운용하는 나름의 노하우도 생겼다.
수시로 커밋하고 배포하기. 작업 단위가 끝날 때마다 커밋 → 푸시 → 배포를 습관화했다. 문제가 생겼을 때 특정 시점으로 돌아갈 수 있는 안전망이 된다. 실제로 60번 넘게 커밋했다.
긴 세션은 피하기. Claude Code는 대화가 길어지면 이전 맥락을 압축하기 시작한다. 복잡한 작업일수록 깨끗한 새 세션에서 시작하는 게 훨씬 정확하다. 대신 메모리 기능에 현재 상태를 꼼꼼히 저장해두면 새 세션에서도 이어서 작업할 수 있다.
코드 점검 주기적으로 하기. 반복적인 수정이 쌓이면 안 쓰는 코드가 남거나, 스타일이 꼬이거나, 보안 허점이 생길 수 있다. 중간중간 "지금 코드 상태 점검해줘"라고 요청하면 불필요한 파일 정리, 보안 체크, 코드 품질 개선을 해준다.
✅ 결과 (After)
Before vs After
항목
Before
After
개발 경험
코딩 경험 제로
풀스택 사이트 직접 구축
나를 표현할 공간
노션, 링크트리 (불만족)
커스텀 포트폴리오 사이트 (6개 카테고리)
AI 활용 수준
챗봇에 질문하기
기획-설계-구현-배포 전 과정 협업
소요 기간
—
11일, 60+ 커밋
결과물
👉 아직 미완성이에요!!: https://personal-web-five-coral.vercel.app
6개 카테고리 포트폴리오 사이트: About Me(미완), Work & Project(90% 완성), Music(미완), Read & Write(미완), Photo Dump(미완), Guestbook(미완)
기술 스택: Next.js 16 + Supabase + Tailwind CSS + Vercel 배포
주요 기능: 호버 확장 카드(홈), 3D 카드 레일(Work), 슬라이딩 네비게이션, 인라인 어드민 CMS, 다크모드, 한/영 다국어
코딩 경험 제로인 상태에서 시작해서, 실제로 동작하는 풀스택 사이트를 만 들었다. 상상만 하던 걸 직접 만들어냈다는 게 가장 큰 변화다.
그리고 단순히 사이트 하나 만든 것 이상으로, AI를 제대로 활용하는 감각을 얻었다. "AI한테 시키면 알아서 해주겠지"가 아니라, 어떻게 기획하고, 어떻게 지시하고, 어떻게 협업해야 원하는 결과물이 나오는지를 몸으로 배웠다.
💬 이 과정에서 배운 AI 활용 팁
효과적이었던 것
기획에 시간을 투자하라 — 코딩보다 기획이 100배 중요하다. 뭘 만들지, 어떤 구조로, 어떤 기능까지 넣을지를 명확히 정의한 뒤에 구현에 들어가야 한다. 나는 기획 없이 3번 엎고 나서야 이걸 깨달았다. PDCA 방법론을 적용한 이후로는 하루 만에 5개 Phase를 완성했다.
AI에게 감각적으로 말하지 마라 — "이쁘게", "깔끔하게", "세련되게" — 다 안 통한다. AI는 시각적 화면을 수학으로 이해하기 때문에, 내 머릿속 '느낌'을 숫자와 속성으로 번역해서 전달해야 한다. "투명도 20 낮추고, 외곽선 빼고, 패딩 40px"처럼.
프롬프트 보조 도구를 적극 활용하라 — 21dev 같은 사이트에서 원하는 인터랙션/디자인의 프롬프트를 가져와서, 내 상황에 맞게 수정해서 쓰면 퀄리티가 확 달라진다. 단, 프롬프트를 복사해서 그대로 붙여넣기만 하면 안 된다. 내 프로젝트에서 구현할 것, 수정할 것, 안 쓸 것을 명확히 추가해야 한다.
이렇게 하면 안 돼요
기획 없이 바로 코딩 시작하기 — "일단 만들면서 생각하자"는 3번 엎는 지름길이다. 최소 30분은 뭘 만들지 정리하고 시작하자.
하나의 긴 세션에서 모든 걸 하기 — 대화가 길어지면 AI가 이전 맥락을 잊기 시작한다. 작업 단위별로 세션을 끊고, 상태를 메모리에 저장하는 습관이 중요하다.
프롬프트 하나에 너무 많은 걸 요구하기 — "홈페이지 만들어줘"보다 "홈페이지에 6개 카드를 넣고, 호버하면 확장되게 하고, 이미지는 이 폴더에서 가져와줘"가 훨씬 정확한 결과를 낸다.
🌍 다른 업무에 적용한다면?
이 경험은 웹사이트 만들기에만 한정되지 않는다.
핵심은 "기획을 잘 하면 AI가 실행을 해준다"는 거다.
반복적인 엑셀/스프레드시트 작업 자동화
소규모 이벤트/프로젝트용 임시 웹사이트 구축
데이터 수집하고 정리하는 대시보드 만들기
동아리/학회 운영용 내부 도구 개발
개발을 모르더라도, 뭘 만들고 싶은지 구체적으로 정의할 수 있다면 AI와 함께 실현할 수 있다.
🚀 앞으로의 계획
아직 완성은 아니다.
Music, Read & Write, Photo Dump, About Me — 남은 4개 카테고리 페이지의 디자인과 콘텐츠를 채워야 하고, 어드민 기능의 버그도 수정해야 한다. 모바일 반응형 대응도 남아있다.
하지만 이건 끝이 있는 프로젝트가 아니다. 내가 새로운 경험을 하고, 새로운 콘텐츠가 생길 때마다 계속 업데이트하면서 '나'를 담아갈 공간이다. 앞으로도 Claude Code와 함께 계속 발전시켜 나갈 생각이다.
📋 재사용 가능한 프롬프트
프롬프트 1: 프로젝트 기획 시작
나는 [내 배경/직업]이고, [만들고 싶은 것]을 만들려고 해. 목적은 [목적]이야. [카테고리/기능 리스트]를 포함하고 싶어. 기술 스택 추천하고, 프로젝트 구조를 잡아줘.
프롬프트 2: 디자인 구체적 디렉션
지금 [현재 상태 설명]. [문제점]이 있어. [요소]의 투명도를 [N]으로 변경하고, [요소]를 삭제하고, [요소]의 위치를 [좌표/정렬]로 맞춰줘. 색상은 [컬러코드], 폰트 사이즈는 [크기]로.
프롬프트 3: 외부 프롬프트 + 내 프로젝트 적용
[복사한 프롬프트 붙여넣기]. 이 중에서 내 프로젝트에 적용할 것: [리스트]. 수정할 것: [리스트]. 사용하지 않을 것: [리스트]. 현재 내 페이지 구조는 [설명].
