main-logo

바이브 코딩으로 간단한 웹사이트 구현해보기 (실전편)

내부 프로젝트에서 바이브 코딩을 실전 적용해 본 경험을 공유하고자 합니다.

profile
zurang23
2025년 05월 20일 · 0 분 소요

들어가며

요즘 가장 핫한 키워드 중 하나인 바이브 코딩(Vibe Coding). 디자인 파일만 주면 코딩이 뚝딱 완성된다는 이야기가 들려오면서 프론트엔드 개발자들의 관심을 끌고 있습니다. 하지만 실제로 업무에 적용하려고 하면 과연 어느 정도까지 신뢰할 수 있을까요? 이번 글에서는 저희 내부 프로젝트에서 Next.js + TypeScript + Cursor + Figma MCP 환경으로 바이브 코딩을 실전 적용해 본 경험을 공유하고자 합니다.

바이브 코딩이 무엇인지에 대한 개념이 궁금하신 분은 이전 포스팅을 먼저 참고해주세요.

 

바이브 코딩을 해보게 된 배경

바이브 코딩을 제대로 해보고 싶다는 생각은 있었지만 규모가 큰 프로젝트에서 감히 엄두가 나지 않았는데, 내부 프로젝트로 간단하게 마이크로 인터렉션 정도가 있는 한 페이지 사이트를 만들 일이 생겼습니다.

좋은 기회라고 생각해서 평소 AI 관련 툴을 서칭하고 테스트하고 있는 그룹원들과 함께 이번 프로젝트는 좀 답답하더라도 바이브 코딩 찐으로 사용해보자!! 라는 마음으로 Cursor를 이용해 바이브 코딩을 해보았습니다.

애니메이션, 인터랙션, 반응형 UI까지 포함된 페이지였기 때문에 바이브 코딩의 실제 구현력을 점검해보기에 매우 적합한 프로젝트였습니다.

 

작업 환경

  • 프레임워크: Next.js + TypeScript
  • 디자인 도구: Figma + Figma MCP 플러그인
  • AI 코딩 도구: Cursor

 

프롬프트 전략: 대충 넘기면 결과도 대충이다

first.png

피그마 링크만 전달했을때의 첫 결과물

 

처음에는 별도의 룰 설정 없이 단순히 피그마 링크만 전달했는데, 결과는 이미지 그대로 ‘그럴듯하게’만 구현된 수준이었습니다. 다른 사람들은 바이브 코딩으로 사이트 결과물이 꽤 훌륭하게 나온다는데 나는 왜?? 라는 생각이 들어 두 번째 시도부터는 아주 자세하고 구체적인 프롬프트를 작성해 넘겼습니다. 예시는 다음과 같습니다:

1. classNames 사용해서 module scss 사용해줘
2. 컴포넌트 이름은 WhatWeOffer 로 만들어줘
3. svg 이미지는 Icon 컴포넌트 활용해서 사용할수 있게 Icons constants에 넣어서 작성해줘
4. 웹 접근성에 맞게 작업 해줘
5. 모바일 화면이야 [https://www.figma.com/링크전달] 모바일 퍼스트로 작업해주고, _variables.scss, _mixin.scss 파일에 선언된 color 값과 mixin 최대한 활용해서 작업해줘
6. 모든 수치는 mixin 에서 선언된 vw 함수 사용해서 작업해줘
7. [https://www.figma.com/영역링크전달] 여기 컴포넌트들은 각 컴포넌트 클릭 시 하단에 각 상세 내용들이 나와야 해. 각 상세 내용은 아래와 같아
[내용 전달]
8. 태블릿 화면이야 [https://www.figma.com/링크전달] 내용 클릭시 우측 영역 [https://www.figma.com/링크전달] 에 위 내용과 동일하게 각 컴포넌트에 맞는 내용으로 변경되게 작업이 되어야 해
9. 피씨 화면이야 [https://www.figma.com/링크전달]
피씨 화면은 [https://www.figma.com/영역링크전달] 영역에 마우스 hover 시 [https://www.figma.com/영역링크전달] 이렇게 툴팁 형태로 내용이 나오면 되, 각 내용은 모바일에서 전달해준 내용과 동일하고 위치는 각 트리거 컴포넌트의 높이, 너비 기준 중앙 정렬로 띄어주면 될 것 같아

이처럼 프롬프트를 얼마나 세세하게 작성하느냐에 따라 결과물의 퀄리티는 확연히 달라졌습니다. 단순히 화면을 그럴듯하게 그려준 수준을 넘어서 얼핏 보면 꽤 괜찮은 수준으로 결과물이 나왔습니다. 하지만 매번 위와 같은 프롬프트를 입력하기엔 무리가 있어서 다음 작업으로는 반복 작업을 줄이기 위해 커서 룰을 설정하게 되었습니다.

 

커서 룰(Copilot Rule)로 반복 최소화

반복적인 프롬프트 작성을 줄이기 위해 Cursor의 커서 룰 기능을 활용했습니다. 팀에서 사용하는 코드 스타일과 규칙(classNames, scss 모듈 사용, 접근성 고려 등)을 룰로 저장해 두면, 매번 입력하지 않아도 동일한 결과를 얻을 수 있었습니다.

 

mcp로 그린 마지막 컴포넌트

여러번 디렉션을 주고 최종 완성하게 된 컴포넌트 결과물

 

만족스러웠던 점

  • 마이크로 인터랙션이나 스크립트 기반 기능 구현은 정말 빠르고 꽤나 정확했습니다.
  • 사람이 코딩했다면 2~3시간 걸렸을 작업을 1~2분 만에 결과물로 받아볼 수 있었습니다.

 

아쉬웠던 점

  • 디자인의 디테일한 수치 반영은 여전히 손이 많이 탔습니다.
  • 수정을 반복하다 보면 기존에 잘 작동하던 기능까지 망가지는 경우도 있어, 신중한 조정과 재확인이 필요했습니다.
  • "여기서 이 값만 살짝 바꾸면 될 텐데..." 싶은 단순 수정도 Cursor가 빙빙 돌기만 하는 경우가 있어 답답함을 느꼈습니다.

 

마치며

바이브 코딩은 확실히 개발 워크플로우에 새로운 시사점을 던져줍니다. 특히 초기 레이아웃 생성, 인터랙션 처리, 반복 구조의 코드 생성에서는 매우 유용하게 활용할 수 있었습니다. 그러나 디자이너가 작업한 디자인 파일을 완벽하게 웹으로 구현하는 데에는 아직은 사람 손이 필요한 것이 현실입니다. 그리고 유튜브에 나오는것 처럼 단순하게 figma 링크만 던져서는 절대 퀄리티 있는 화면이 나오지 않는다는 점. 퀄리티 있는 화면 = 자세한 프롬프트! 그리고 그런 자세한 프롬프트를 입력하기 위해선 결국 개발 지식이 있는 사람이 절대적으로 유리하다는 것을 알 수 있었습니다.

그래도 이번 프로젝트를 통해 확실하게 느낀 것은, 바이브 코딩은 단순한 트렌드가 아닌 생산성 도구로서의 실전 활용 가능성을 완벽하게 높였다는 것입니다. 앞으로도 팀 단위 작업에서 커서 룰을 적극적으로 활용하고, 적절한 포지션에서 바이브 코딩을 활용한다면, 작업 시간을 줄이고 작업물의 퀄리티도 일정 수준 이상으로 맞출 수 있지 않을까 하는 기대가 되는 경험이었습니다.

해당 프로젝트의 결과물로 완성된 사이트는 바로 pxd BXD 웹사이트와 pxdAIX 웹사이트 입니다. 90% 이상 바이브 코딩으로 완성된 사이트를 한번 둘러보세요~!