바이브코딩의 시대 : v0 + WindSurf로 개인용 웹사이트 뚝딱 만들기

"AI 에이전트의 진정한 가치는 반복적인 일을 자동화하는 것이 아니라, 사람이 더 창의적이고 전략적인 일에 집중할 수 있게 해주는 것입니다."

이런 분들에게 이 글을 추천합니다

• AI 코딩 도구를 활용해 개인 웹사이트를 만들고 싶은 개발자
• Cursor는 써봤지만 WindSurf는 처음 접하는 분들
• 프롬프트 엔지니어링을 실제 프로젝트에 적용해보고 싶은 분들

AI 코딩의 새 시대, WindSurf

안녕하세요! 오늘은 제가 최근에 사용해본 WindSurf라는 AI 코딩 도구를 활용해 개인용 웹사이트를 만드는 과정을 공유해볼게요.

Cursor나 WindSurf와 같은 AI Editor가 세상에 등장하면서, ChatGPT가 처음 나왔을 때만큼의 생산성 향상을 누리고 있습니다. 여러 사이트들을 뚝딱 만들 수 있게 되었거든요. 특히 WindSurf는 Cursor와 비슷하지만 몇 가지 차별점이 있어서 이번에 직접 사용해보기로 했습니다.

이 글에서 얻어갈 수 있는 것:

• WindSurf를 활용한 웹사이트 제작 전체 프로세스
• AI 코딩 도구를 효과적으로 활용하는 프롬프트 작성법
• 실제 개발 과정에서 발생하는 문제와 해결 방법

그럼 바로 시작해볼까요?

---

개인 웹사이트 제작 프로세스

기술과 툴에 관련된 이야기는 여기까지 하고 본격적으로 프로젝트에 대해서 이야기해보겠습니다.
먼저, 전체 프로세스는 다음과 같습니다.

1. 만들고 싶은 사이트 정하기
2. 레퍼런스로 삼을 웹사이트 선정하기
3. UX/UI 차별화하기
4. 프롬프트 설계하기
5. 화면 설계 및 디자인하기
6. 코딩하기
7. 배포 및 연동하기

각 단계별로 자세히 살펴보겠습니다.

Step 1: 만들고 싶은 사이트 정하기

첫 단계는 항상 명확한 목표 설정입니다. 무작정 "멋진 웹사이트"를 만들겠다는 것보다는 구체적인 목적과 요구사항을 정의하는 것이 중요하죠.

저는 현재도 블로그를 운영하고 있지만, 퍼스널 브랜딩을 위해 좀 더 커스터마이징 가능한 형태로 제 개인 웹사이트를 바꿔보려고 합니다. 제가 중요하게 생각하는 요소는 다음과 같습니다:

• 방문자가 쉽게 연락을 취할 수 있는 접근성
• 교육 문의나 비즈니스 제안을 받을 수 있는 공간
• 제 블로그 글 중 선별된 콘텐츠를 효과적으로 전시
• 전문적이고 세련된 디자인

이렇게 목표를 명확히 하니 다음 단계로 넘어가기가 훨씬 수월해졌습니다.

Step 2: 레퍼런스로 삼을 웹사이트 선정하기

아무리 AI의 도움을 받는다고 해도, 좋은 레퍼런스는 필수입니다. 제가 기술 블로그 중에서 디자인과 구성이 마음에 든 사이트들은 다음과 같습니다:

1. 이정환님 블로그: winterlood.com
2. 정현수님 블로그: junghyeonsu.com
3. 정원희님 블로그: wonny.space

이 중에서도 정현수님의 블로그 포맷이 가장 깔끔하고 아름다워 보여서, 이 형태를 기본으로 구성해보기로 했습니다.

💡 TIP: 레퍼런스를 찾을 때는 Behance나 Pinterest 같은 디자인 플랫폼도 좋은 영감의 원천이 됩니다.

Step 3: UX/UI 차별화하기

단순히 다른 사이트를 모방하는 것은 의미가 없습니다. 기본 골격이나 디자인은 참조하되, 내 입맛대로 커스터마이징하는 것이 중요하죠. 제가 계획한 차별화 포인트는 다음과 같습니다:

디자인 커스터마이징 계획

변경할 점:

• 네비게이션 영역
  • 다크모드 기능은 유지
• 상단 본문
  • 'All Posts' 영역은 제거하고, 이정환님 블로그처럼 상단에 프로필 사진과 소셜 링크 배치
  • 태그 목록은 유지하되 폰트 크기 축소
• 슬라이더 섹션
  • 슬라이더 UI는 그대로 유지 (주요 콘텐츠 강조에 효과적)
  • 'Devlog' 섹션을 'Lifelog'로 변경하여 개발 외 주제도 다룰 수 있게 함
• 포스트 섹션
  • 사이트 내 검색 기능 추가 (제목 기준, SQL like 연산 활용)
  • 썸네일 크기 축소 및 본문 일부 노출로 UI 개선

유지할 점:

• 네비게이션의 다크모드 외 요소들
• 푸터 영역의 저작권 표시

글쓰기 경험 최적화

모든 글은 마크다운(.md) 파일로 작성하고, 카테고리별로 이미지 파일을 정리할 계획입니다. 글쓰기의 핵심은 간결함입니다. 복잡한 에디터보다 마크다운의 단순함이 창작에 집중하는 데 도움이 될 거예요.

Step 4: 서비스 기획하기

이제 구체적인 웹사이트와 디자인 컨셉이 잡혔으니, 본격적으로 화면 설계서를 작성해보겠습니다. 여기서 저는 7단계 프롬프트 프레임워크를 활용했습니다.

# GPT가 어떤 사람처럼 행동할지 설정
1. 역할(Role): "당신은 수많은 웹사이트를 성공적으로 론칭시켜본 경험이 있는 시니어 기획자입니다"

# 누구에게 설명하는지 지정
2. 대상(Audience): "저는 웹사이트를 한번도 만들어보지 않은 사람입니다."

# 참고할 컨텍스트나 배경 정보 제공
3. 정보(Information): "아래 주어진 화면 설계서 양식을 기반으로"

# 구체적으로 원하는 작업과 결과 지정
4. 작업/목표(Task/Goal) 
- 서비스 이름
- 주요 타겟 사용자
- 기대 효과
- 핵심 기능 요약
- 디자인 컨셉

# 응답의 톤, 제약 조건 등 지정
5. 정책/스타일(Policy/Style): "최대한 쉽고 자세하게 설명해주세요."

# 출력될 응답의 포맷 지정
6. 형식/구조(Format): "텍스트 형식으로 정리해 주세요"

# 출력 형식을 미리 보여줘 힌트 제공
7. 예시(Example): "다음 예시처럼 답변해 주세요."

---

내 아이디어는 다음과 같아.

저는 현재도 블로그를 운영하고 있지만, 퍼스널 브랜딩을 위해 좀 더 커스터마이징 가능한 형태로 제 개인 웹사이트를, 바꿔보려고 합니다. 
사람들이 제 개인 웹사이트를 보고, 쉽게 연락을 취할 수 있느냐를 중요하게 생각합니다. 
해당 공간에는 저에게 교육 문의나 비즈니스 제안, 그리고 제가 올리는 블로그 글 중에서도 선별된 글들을 올릴 생각입니다. 
이를 위해, 전문적인 느낌과 세련된 느낌을 줄 수 있는 공간이었으면 좋겠습니다.

💡 프롬프트 팁: 구체적인 요구사항과 예시를 제공할수록 AI는 더 정확한 결과물을 제공합니다. 모호한 지시는 모호한 결과로 이어집니다!

이 프롬프트를 WindSurf에 입력하니 다음과 같은 기획서가 생성되었습니다:

✅ 서비스 기획서: 퍼스널 브랜드 웹사이트

1. 서비스 이름 (Service Name)
Aidy's Lab

2. 주요 타겟 사용자 (Target Audience)
- 나의 기술 콘텐츠, 블로그, 유튜브 등을 보고 신뢰를 느낀 개발자/IT 업계 종사자
- LLM/자동화 관련 기술/교육/협업 제안자
- 개인 또는 스타트업 창업자 중, 컨설팅/교육 문의를 하고자 하는 사람들

3. 기대 효과 (Expected Outcome)
- 전문성과 신뢰를 주는 브랜드 이미지 구축
- 협업 제안 및 교육 문의로 이어지는 리드 수 증가
- 검색 유입 및 SNS 연동을 통한 퍼스널 브랜딩 강화
- 블로그보다 더 명확한 정보 구조와 디자인으로 사용자 만족도 향상

4. 핵심 기능 요약 (Key Features)
기능    설명
🏠 홈    나를 소개하는 임팩트 있는 문구 + 대표 콘텐츠 3개
🧠 블로그    개발 및 AI 자동화 관련 콘텐츠 중 선별된 글만 업로드
🤝 컨설팅    강의·교육·기획 제안 관련 문의 폼 제공
📬 연락하기    간단한 이메일 문의 폼 + SNS 연동 (LinkedIn, Email, YouTube 등)
🪪 포트폴리오 (선택)    강의 영상, 유튜브 조회수, 프로젝트 썸네일 등 시각적 자료 중심

5. 디자인 컨셉 (Design Concept)
- 전문적이면서 미니멀한 느낌
- 흑백 or 차콜 그레이 기반의 세련된 타이포 중심 레이아웃
- 개발자 감성을 자극하는 에디터 스타일 폰트 (예: JetBrains Mono)
- 주요 섹션에 스크롤 애니메이션 또는 부드러운 트랜지션 적용
- 반응형 설계 필수 (모바일 접근도 고려)
- 예시 키워드: Linear, Vercel, Josh Comeau, LeeRob.io

💡 비고 및 추가 고려사항
- 블로그 글은 [Notion + 블로그 자동 연동] 혹은 [MD 기반 정적 사이트] 추천
- 도메인은 aidylab.com 혹은 bymaethu.dev 등으로 브랜딩 가능
- 퍼포먼스 측면에서는 Next.js 기반 정적 사이트(SPA/SSG) 추천

Step 5: 화면 설계 및 디자인하기

이제 기획서를 바탕으로 구체적인 화면 설계를 진행할 차례입니다. 여기서도 WindSurf의 도움을 받았습니다. 프롬프트는 간단하게 작성했습니다:

아래 서비스 기획서를 바탕으로 화면설계서를 작성해줘.

# 위 기획서 내용 그대로 복붙
기획서 : {기획서} 

WindSurf는 이 프롬프트를 바탕으로 레퍼런스 이미지와 함께 디자인 및 코드를 출력해주었습니다:

이렇게 화면 설계까지 완료되었고, 이제 실제 코딩 단계로 넘어갈 준비가 되었습니다.

Step 6: 코딩하기

이제 WindSurf에서 작성해준 디자인 및 프론트엔드 코드를 기반으로 실제 개발을 진행합니다. 먼저 필요한 환경을 세팅해야 합니다.

Node.js가 설치되어 있지 않다면 먼저 설치해줍니다:

# Mac (brew 설치는 따로 진행 필요합니다)
brew install node 

# Windows (choco 설치는 따로 진행 필요합니다)
choco install nodejs.install

오늘은 Cursor가 아닌 WindSurf를 통해 개인용 웹사이트를 만들어보며, 두 도구의 차이점도 함께 살펴보겠습니다. WindSurf는 공식 사이트에서 다운로드할 수 있습니다.

WindSurf vs Cursor: 주요 차이점

WindSurf의 가장 큰 장점은 무제한 요청이 가능하다는 점입니다. Cursor는 무료 플랜에서 2,000번의 요청 제한이 있지만, WindSurf는 그런 제한 없이 사용할 수 있습니다. 이것이 제가 WindSurf를 시도해보게 된 주요 이유입니다.

또한 WindSurf도 Cursor와 마찬가지로 Rule 등록 기능을 제공합니다. 이 기능을 통해 프로젝트 전체에서 일관된 코드 스타일과 패턴을 유지할 수 있습니다.

이러한 룰 설정은 AI가 생성하는 코드가 일관되고 효과적으로 작동하도록 보장해주며, 개발자의 코드 수정 작업을 크게 줄여줍니다.

Step 7: 배포 및 연동하기

웹사이트 개발이 완료되면 배포 단계로 넘어갑니다. 저는 Vercel을 통한 배포와 Notion DB 연동을 계획했습니다.

Vercel 배포 과정

1. Vercel 계정 생성 및 로그인
2. GitHub 저장소와 연결
3. 배포 설정 구성 (환경 변수, 빌드 명령어 등)
4. 배포 실행

실제 아래와 같이, 배포가 완료된 것을 알 수 있습니다.
https://aidyslab-web.vercel.app/

Notion DB 연동 과정

1. Notion API 키 발급
2. 연결할 DB 테이블 생성
3. 연결할 DB ID 확인
4. API 연동 코드 작성

이 과정을 거치면 Notion에 글을 작성하는 것만으로 웹사이트에 자동으로 콘텐츠가 업데이트되는 시스템이 완성됩니다.

마무리: AI 코딩 도구의 현재와 미래

WindSurf를 활용한 개인 웹사이트 제작 과정을 살펴보았습니다. 이 과정에서 느낀 점은 AI 코딩 도구가 단순히 코드를 대신 작성해주는 것을 넘어, 개발 프로세스 전체를 효율화해준다는 것입니다.

특히 인상적이었던 점은:

1. 기획부터 디자인, 코딩까지 전 과정에서 AI의 도움을 받을 수 있다는 점
2. 적절한 프롬프트만 있다면 고품질의 결과물을 빠르게 얻을 수 있다는 점
3. Cursor와 WindSurf 같은 도구들이 각자의 차별점을 가지고 발전하고 있다는 점

물론 아직은 한계도 있습니다. 복잡한 비즈니스 로직이나 특수한 요구사항에 대해서는 여전히 개발자의 전문성이 필요합니다. 하지만 반복적이고 시간이 많이 소요되는 작업들은 AI에게 맡기고, 저는 더 창의적이고 전략적인 부분에 집중할 수 있게 되었습니다.

"AI 에이전트의 진정한 가치는 반복적인 일을 자동화하는 것이 아니라, 사람이 더 창의적이고 전략적인 일에 집중할 수 있게 해주는 것입니다."

여러분도 WindSurf나 Cursor 같은 AI 코딩 도구를 활용해 보세요. 처음에는 익숙해지는 데 시간이 걸릴 수 있지만, 일단 익숙해지면 개발 생산성이 크게 향상되는 것을 경험하실 수 있을 겁니다.

이 글이 여러분의 AI 코딩 여정에 도움이 되었으면 좋겠습니다. 궁금한 점이나 공유하고 싶은 경험이 있다면 언제든 댓글로 알려주세요!

참고 자료

• WindSurf 공식 사이트
• Cursor 공식 사이트
• Next.js 문서
• Notion API 문서
• Vercel 배포 가이드