바이브 코딩으로 사진가 포트폴리오 만들기

01템플릿 선택기와 다른 점

템플릿 갤러리는 완성된 디자인을 보여 주고 마음에 드는지 묻기만 해요. 이 도구는 한 층 더 깊이 들어가요. 아래 여섯 가지 방향은 각각 실제로 운영 중인 사진가 포트폴리오를 직접 살펴보고(스크린샷, 실제 레이아웃, 계산된 색상, 계산된 글꼴) 만들었어요. 견본 칩에서 예뻐 보이라고 누군가 지어낸 팔레트가 아니에요. 예를 들어 에디토리얼 방향은 EB Garamond를 쓰는데, 실제 패션 사진가의 사이트가 말 그대로 이 서체로 짜여 있기 때문이고, 페이지를 직접 살펴보며 똑같이 맞췄어요.

이 디자인의 바탕이 된 실제 사이트들 거의 모두에서 두 가지 패턴이 나타났고, 여기 모든 방향에 반영했어요. 하나는 데스크톱에서도 링크 목록 없이 햄버거 아이콘 하나 뒤에 숨긴 내비게이션, 다른 하나는 격자가 아니라 한 번에 큰 이미지 한 장이에요. UI 색은 처음부터 끝까지 거의 쓰지 않아요. 색은 인터페이스가 아니라 사진이 채워요.

02마지막에 받게 되는 것

하나의 구조화된 프롬프트예요. 전체 방향, 정확한 헥스 색상, 글꼴 이름과 조합, 페이지 목록, 내비게이션 동작, 갤러리 레이아웃과 이미지 프레이밍, 넣을 기능, 실제 비용 차이를 담은 호스팅 추천, 그리고 고정된 제작 품질 요건(접근성 있는 대체 텍스트, 반응형 브레이크포인트, 하드코딩된 비밀 값 금지, 지연 로딩 이미지)이 들어 있어요. 쓰고 있는 AI 코딩 앱에 붙여넣으면 시작하는 데 필요한 건 다 갖춰져 있어요.

03프롬프트에서 라이브 사이트까지: 전체 과정

프롬프트는 디자인 브리프일 뿐 결승선이 아니에요. 프롬프트를 복사한 순간부터 명함에 넣을 수 있는 진짜 주소가 생기기까지, 무료이거나 거의 무료로 거치는 모든 단계예요.

프롬프트를 복사하고 AI 코딩 앱 열기

Claude, Cursor, Claude Code, Windsurf, Replit의 AI 에이전트 모두 괜찮아요. 대화만 하는 게 아니라 파일을 써서 저장해 줄 수 있는 앱이면 돼요. 한 번도 안 써 봤다면 claude.ai나 Replit 같은 브라우저 기반 앱은 설치 없이 쓸 수 있어요. 첫 메시지로 프롬프트를 붙여넣으세요.

만들게 한 다음, 결과물을 꼭 직접 확인하세요

사이트를 정적 HTML/CSS/JS(또는 프롬프트의 호스팅 항목에서 지정한 방식)로 만들고 미리보기를 보여 달라고 하세요. 넘어가기 전에 프롬프트가 요구한 여섯 가지(색상, 글꼴, 갤러리 동작, 내비게이션, 프레이밍, 페이지)를 확인하세요. 사진을 연결한 뒤보다 지금 잘못된 강조 색을 고치는 편이 훨씬 싸요.

실제 사진, 소개글, 연락처로 바꾸기

자리 표시 이미지와 임시 문구를 전부 바꾸세요. AI 앱에 사진마다 진짜 구체적인 alt 속성을 써 달라고 하세요. “image1.jpg”가 아니라 실제 설명이어야 해요. 접근성 요건이기도 하고 SEO에도 조금 도움이 돼요. 연락 폼이 실제로 확인하는 이메일 주소를 가리키는지 다시 확인하기에도 좋은 시점이에요.

무료 호스트에 배포하기

“정적 & 무료” 요금제를 골랐다면, AI 앱에 프로젝트 폴더나 GitHub 저장소를 위 메뉴의 호스팅 페이지에 있는 호스트 중 하나에 연결하는 과정을 안내해 달라고 하세요. 네 곳 모두 변경 사항을 푸시할 때마다 자동으로 빌드하고 배포해요. 한 번 연결하면 수동 업로드는 필요 없어요.

커스텀 도메인 연결하기 (선택이지만 해 볼 만해요)

무료 서브도메인(yourname.netlify.app 같은)으로도 시작하기에 충분해요. yourname.com을 쓸 준비가 되면, 도메인 구매에 DNS 변경 한 번이면 돼요. 자세한 내용은 아래에 있어요.

04어떤 무료 호스트를 써야 할까요?

이 중 어느 곳이든 비용 없이 정적 사이트를 올릴 수 있고, 무료 HTTPS와 개인 포트폴리오 트래픽은 넉넉히 감당하는 무료 요금제가 제공돼요. 무료 요금제의 한도는 꽤 자주 바뀌니, 호스팅 페이지의 수치는 정확한 현재 값이 아니라 대략의 윤곽으로 보시고, 정하기 전에 각 업체의 요금 페이지를 직접 확인하세요.

실제 배포 단계는 AI 코딩 앱과 함께 하세요. “이 프로젝트를 Netlify에 연결해 줘”는 아주 평범한 부탁이고, 보통 몇 분이면 계정 만들기부터 첫 배포까지 안내해 줘요.

05커스텀 도메인 연결하기

도메인은 호스팅과 별개로 내는 적은 연간 비용이에요(확장자에 따라 보통 연 $10~20 정도). 호스팅은 계속 무료예요. 세 단계로 나뉘어요.

1. 도메인 구매. Namecheap, Cloudflare Registrar, 또는 Google Domains의 후속 서비스인 Squarespace Domains에서 살 수 있어요.
2. DNS 레코드 추가. 도메인이 호스트를 가리키게 하는 CNAME(또는 A 레코드)을 등록 업체의 대시보드에서 추가해요. 등록 업체 표에 두 줄이면 돼요. www용 CNAME은 호스트가 알려 주는 주소(예: your-portfolio.netlify.app)를 가리키게 하고, 맨 도메인용 A 레코드는 호스트의 IP를 가리키게 해요.
3. 호스트에 추가. 호스트의 “커스텀 도메인” 설정에 같은 도메인을 붙여넣으세요. HTTPS는 알아서 설정돼요.

호스팅 페이지의 모든 호스트에는 “Custom domain”이나 “Domains” 탭이 있고, 거기서 추가할 정확한 레코드를 알려 줘요. 그걸 복사해서 등록 업체에 추가하고 기다리면 돼요. DNS 변경은 보통 몇 분에서 몇 시간이면 적용되고, 가끔 24시간에서 48시간까지 걸려요. 막히면 AI 코딩 앱이 쓰고 있는 등록 업체 대시보드 안내를 도와줄 수 있어요. 설정 화면을 스크린샷으로 찍어 어디를 눌러야 하는지 물어보세요. 자물쇠 표시가 보이고 “안전하지 않음” 경고가 없으면 결승선이에요.

06출시 전 체크리스트

이 목록으로 오 분만 들여도 포트폴리오가 덜 끝난 것처럼 보이는 요인 대부분을 잡아내요. 점검 항목은 위 메뉴의 출시 전 페이지에 있으니, 하나씩 체크하면서 진행하세요.

07자주 묻는 질문