# AI로 프리미엄 포트폴리오 웹사이트 만들기 - 웹 개발 지식 없이도 가능!
## 한줄 요약
웹 개발 지식이 없어도 AI(Claude Code)와 대화하며 Glassmorphism 디자인의 인터랙티브 포트폴리오 웹사이트를 하루 만에 완성했습니다.
## 이런 분들께 도움돼요
- 포트폴리오 웹사이트가 필요하지만 웹 개발 지식이 부족한 분
- 이력서를 넘어 인터랙티브한 온라인 포트폴리오를 만들고 싶은 분
- AI 도구로 실제 웹사이트를 만들어보고 싶은 분
## 문제 상황 (Before)
포트폴리오 웹사이트를 만들고 싶었지만 웹 개발 지식이 부족했습니다.
기존에는:
- 이력서를 PDF로만 공유할 수 있었음
- 템플릿 사이트는 커스터마이징이 어렵고 개성이 없었음
- 외주를 맡기기엔 비용과 시간이 부담스러웠음
## 사용한 도구
- **도구명**: Antigravity (Claude Code)
- **모델**: Claude Opus 4.5
- **특이사항**: 대화형으로 요청하면서 실시간으로 결과 확인 가능
## AI와 협업한 과정
### 1. 프리미엄 포트폴리오 웹사이트 요청
**상황**: AI를 이용해서 포트폴리오를 작성하고 싶었습니다.
**이렇게 요청했어요**:
> Mi님의 이력서를 기반으로 프리미엄 포트폴리오 웹사이트를 만들어줘
**결과**:
- Glassmorphism 디자인 시스템이 적용된 웹사이트 자동 생성
- Hero Section, Summary, Skills, Experience, Education, Contact 섹션 구현
- 그라디언트 배경 애니메이션과 페이드인 효과 포함
- 268줄의 HTML, Vanilla CSS/JavaScript로 완성
**느낀 점**: 디자인을 자동으로 구현해줬을 때 정말 놀라웠습니다. 웹 개발 지식 없이도 전문적인 디자인의 웹사이트가 만들어졌습니다.
---
### 2. 인터랙티브 챗봇 기능 추가
**상황**: 방문자들이 쉽게 정보를 찾을 수 있도록 챗봇을 추가하고 싶었습니다.
**이렇게 요청했어요**:
> 우측 하단에 챗봇 기능을 추가해줘. 연락처, 스킬, 경력, 학력 정보를 보여줄 수 있게
**결과**:
- 플로팅 챗봇 버튼 (우측 하단 고정)
- 4가지 옵션 제공: 연락처 정보, 스킬 요약, 경력 보기, 학력 배경
- 경력/학력 선택 시 해당 섹션으로 자동 스크롤
- Glassmorphism 스타일로 통일된 디자인
**느낀 점**: 요청한 기능이 바로 동작하는 코드로 구현되어 시간을 크게 절약할 수 있었습니다.
---
### 3. 반응형 디자인 적용
**상황**: 모바일에서도 잘 보이도록 반응형 디자인이 필요했습니다.
**이렇게 요청했어요**:
> 모바일에서도 잘 보이게 반응형으로 만들어줘
**결과**:
- 모바일에서 단일 컬럼 레이아웃으로 자동 전환
- 폰트 크기와 챗봇 창 크기 조정
- 768px 이하에서 최적화된 레이아웃
**느낀 점**: 복잡한 CSS 미디어 쿼리를 직접 작성하지 않아도 자동으로 반응형이 구현되었습니다.
## 결과 (After)
### Before vs After
| 항목 | Before | After |
|------|--------|-------|
| 소요 시간 | 외주 맡기면 며칠 소요 | 하루 만에 완성 |
| 비용 | 외주 비용 부담 | 무료 (AI 도구만 사용) |
| 커스터마이징 | 템플릿 수정 어려움 | 원하는 대로 수정 가능 |
| 공유 방식 | PDF 이력서 | 웹사이트 링크 공유 |
| 접근성 | 파일 다운로드 필요 | 링크만으로 즉시 접근 |
### 결과물
- **완성된 웹사이트**: 프리미엄 Glassmorphism 디자인
- **주요 기능**: 7개 섹션 + 인터랙티브 챗봇
- **기술 스택**: HTML5, Vanilla CSS, JavaScript
- **실행**: Python HTTP 서버로 로컬 실행 (`python3 -m http.server 8080`)
## 이 과정에서 배운 AI 활용 팁
### 효과적이었던 것
1. **구체적으로 요청하기**: "포트폴리오 만들어줘"보다 "Glassmorphism 디자인의 프리미엄 포트폴리오"처럼 구체적으로 요청할수록 원하는 결과가 나옵니다.
2. **단계별로 진행하기**: 전체를 한 번에 요청하기보다 기본 구조 → 챗봇 추가 → 반응형 적용 순으로 단계별로 진행하면 더 좋습니다.
3. **실시간 확인하기**: AI가 만든 결과를 바로 브라우저에서 확인하면서 수정 요청하면 효율적입니다.
### 이렇게 하면 안 돼요
1. **막연하게 요청하지 말기**: "예쁘게 만들어줘"보다 "Glassmorphism 스타일로"처럼 구체적인 디자인 스타일을 언급하세요.
2. **한 번에 너무 많이 요청하지 말기**: 여러 기능을 한꺼번에 요청하면 복잡해질 수 있습니다. 하나씩 추가하세요.
## 다른 업무에 적용한다면?
이 경험을 다음과 같은 상황에도 적용할 수 있습니다:
- **개인 블로그 제작**: 포트폴리오 대신 블로그 형식으로 요청
- **소규모 비즈니스 랜딩 페이지**: 제품/서비스 소개 페이지 제작
- **이벤트 페이지**: 결혼식, 행사 안내 페이지 제작
- **팀 소개 페이지**: 스타트업이나 동아리 소개 페이지
## 앞으로의 계획
현재 완성된 포트폴리오를 더욱 발전시킬 계획입니다:
- **다국어 지원**: 한국어, 영어, 일본어 버전 추가
- **디자인 테마 변경**: 다크 모드 등 다양한 테마 옵션
- **이력서 다운로드 기능**: PDF로 다운로드할 수 있는 버튼 추가
- **프로젝트 갤러리**: 포트폴리오 작업물을 시각적으로 보여주는 섹션
## 재사용 가능한 프롬프트
### 프롬프트 1: 포트폴리오 웹사이트 기본 구조 생성
> [이름]의 이력서를 기반으로 프리미엄 포트폴리오 웹사이트를 만들어줘.
> Glassmorphism 디자인 스타일을 사용하고, Hero Section, Summary, Skills, Experience, Education, Contact 섹션을 포함해줘.
> 그라디언트 배경 애니메이션과 스크롤 페이드인 효과도 추가해줘.
### 프롬프트 2: 인터랙티브 챗봇 추가
> 우측 하단에 플로팅 챗봇 버튼을 추가해줘.
> 챗봇은 [원하는 기능들]을 옵션으로 제공하고, 선택 시 해당 섹션으로 자동 스크롤되게 해줘.
> 디자인은 기존 Glassmorphism 스타일과 통일되게 만들어줘.
### 프롬프트 3: 반응형 디자인 적용
> 모바일(768px 이하)에서도 잘 보이게 반응형 디자인을 적용해줘.
> 모바일에서는 단일 컬럼 레이아웃으로 전환하고, 폰트 크기와 요소 크기를 적절히 조정해줘.
바이브 코딩으로 포트폴리오 웹사이트 만들기
1
