코딩 몰라도 AI로 내 포트폴리오 사이트 만들기

---

취업 준비 중이거나 프리랜서로 일하다 보면 이런 말을 듣게 됩니다.

"포트폴리오 사이트 있어요?"

있으면 좋은데 만들 줄 모르고, 외주 맡기자니 비용이 부담스럽습니다. AI가 이 문제를 해결해줍니다. 코딩 한 줄 몰라도 됩니다.

---

포트폴리오 사이트에 꼭 들어가야 할 것들

만들기 전에 뭘 넣을지 먼저 정해야 합니다. AI에게 설명할 때 필요하거든요.

✅ 기본 구성
- 나는 누구인가 (간단한 소개)
- 뭘 할 수 있나 (기술 스택 또는 전문 분야)
- 뭘 만들었나 (작업물, 프로젝트)
- 어떻게 연락하나 (이메일, SNS)

이 네 가지만 있으면 충분합니다.

---

1단계 - 내 정보 먼저 정리하기

AI에게 넘기기 전에 메모장에 내 정보를 먼저 정리합니다.

이름: 홍길동
직업: 프리랜서 그래픽 디자이너
전문 분야: 로고 디자인, 브랜딩, SNS 콘텐츠
작업물:
  - A카페 로고 및 브랜딩 작업
  - B쇼핑몰 SNS 콘텐츠 제작
  - C스타트업 명함/팜플렛 디자인
연락처: hong@email.com
인스타그램: @honggildong

이걸 준비해두면 AI 프롬프트 작성이 훨씬 쉬워집니다.

---

2단계 - AI에게 요청하기

Claude(claude.ai) 또는 ChatGPT에 접속해서 아래처럼 요청합니다.

"포트폴리오 웹사이트를 만들어줘. 프리랜서 그래픽 디자이너용이야. 구성은 상단 소개, 기술/전문분야, 작업물 카드 3개, 연락처 순서야. 디자인은 미니멀하고 깔끔하게, 배경은 흰색, 포인트 컬러는 검정. 모바일에서도 잘 보이게 해줘. HTML, CSS, JS 한 파일로 만들어줘."

---

3단계 - 결과물 확인하고 수정하기

AI가 코드를 주면 복사해서 index.html 로 저장하고 브라우저로 열어봅니다.

마음에 안 드는 부분은 바로 AI에게 말하면 됩니다.

"작업물 카드 이미지 영역이 너무 작아"
"폰트를 고딕 계열로 바꿔줘"
"상단 메뉴에 스크롤 이동 기능 넣어줘"
"연락처 섹션 배경색을 연한 회색으로 해줘"

한 번에 완성하려 하지 말고 조금씩 수정 요청하는 게 훨씬 빠릅니다.

---

4단계 - 이미지 넣기

AI가 만든 코드에는 실제 이미지가 없습니다. 내 작업물 이미지를 넣어야 합니다.

가장 쉬운 방법은 이미지를 같은 폴더에 넣고 파일명을 코드에 맞게 수정하는 겁니다.

<!-- AI가 만든 코드에서 이미지 부분 -->
<img src="work1.jpg" alt="작업물 1">

<!-- 내 파일명이 cafe-logo.jpg 라면 -->
<img src="cafe-logo.jpg" alt="A카페 로고 작업">

이미지 편집이 필요하면 Canva(무료) 로 간단히 정리해서 넣으면 됩니다.

---

5단계 - 인터넷에 올리기

완성됐으면 무료로 공개할 차례입니다. 가장 쉬운 방법은 Netlify 입니다.

1. netlify.com 접속 → 회원가입
2. index.html이 있는 폴더를 드래그앤드롭
3. 30초 후 주소 생성 완료

예) https://my-portfolio-abc123.netlify.app

무료 플랜에서도 커스텀 도메인 연결이 됩니다. 도메인이 있다면 바로 연결하세요.

---

실제로 어느 정도 수준이 나오나요?

솔직히 말하면 디자이너가 정성 들여 만든 사이트 수준은 아닙니다.

하지만 없는 것보다 훨씬 낫고, 취업 포트폴리오나 프리랜서 소개용으로는 충분합니다. 실제로 웹에이전시에 맡기면 50~200만 원 하는 작업을 무료로 할 수 있다는 게 핵심입니다.

퀄리티를 높이고 싶다면 AI에게 요청할 때 참고할 사이트 URL을 알려주거나, "이런 느낌으로 만들어줘"라고 구체적인 디자인 방향을 설명할수록 결과물이 좋아집니다.

---

마치며

정리하면 이렇습니다.

내 정보 정리 → AI에게 요청 → index.html 저장
→ 브라우저로 확인 → 수정 반복 → Netlify 업로드 → 완성

코딩 지식 없어도 됩니다. AI에게 원하는 걸 말하는 능력만 있으면 충분합니다.

다음 글에서는 바이브 코딩으로 10분만에 무료 웹사이트 만들기를 다뤄보겠습니다.

---