소개
지난주 바이브 코딩 강의를 통해 소개받은 V0, CURSOR, Trae 같은 툴들을 활용해 웹페이지 제작을 시도했습니다. 저는 코드를 전혀 다룰 줄 모르는 상태였지만 AI를 활용한다면 제가 원하는 모양이 얼추 나올 것 같아 시도해봤습니다. 지인이 사단법인을 하나 출범하는데 제가 랜딩페이지 정도는 만들어 줄 수 있을 것 같아서 소스로 삼아봤습니다. 물론 아직 배포까지는 갈 길이 멀지만 만들었다는 것이 만족스럽습니다.
진행 방법
어떤 도구를 사용했고, 어떻게 활용하셨나요?
Chat GPT, Perplexity: 랜딩페이지의 PRD 구성
V0: 시각적으로 웹페이지 레이아웃을 구성하고, 이를 기반으로 HTML/CSS등 코드 생성
CURSOR: VS Code와 유사한 에디터 + AI 챗 인터페이스. 코드 자동 생성 및 수정에 유용
Trae: 시도해봤지만, 모델 연결이나 사용성이 CURSOR에 비해 다소 불편하게 느껴졌음
Cluely: 화면 인식 및 음성(시스템 내부 소리 포함)을 인식하여 답변을 주는 툴. 윈도우 환경에서 발생하는 파워쉘 이슈 해결에 큰 도움을 받음. (예: PATH 설정 문제 등)
사용 흐름
GPT에게 원하는 랜딩페이지의 요소 및 디자인, 코드 전달 / Perplexity에게 좋은 사단법인 랜딩페이지의 내용과 디자인 리서치를 부탁한 내용도 dump하여 반영
GPT가 생성해준 PRD를 바탕으로 V0에서 디자인 구성
디자인을 기반으로 HTML/CSS 코드 생성 → CURSOR로 전환
CURSOR에서 원하는 내용으로 조정 (예: 텍스트 수정, 배경색 변경, 애니메이션 적용 등)
디버깅 과정: 모델이 제안한 코드 중 일부가 오류를 일으킴 → 문장 수정으로 재요청
Cluely 사용: 코드 설치 및 시연 설정 중 겪은 문제를 해결하기 위해 사용
첫 번째 시도
V0에서 디자인 생성까지는 원만하게 되어서 바로 CURSOR로 폴더를 열었습니다.
하지만, 이게 웬걸. 데모 실행을 하려고 하니 오류가 뜨더라고요.
제가 코딩에서 요구되는 사항이 무엇인지 잘 알지 못하다 보니 저 오류 코드를 보아도 뭘 어떻게 하라는 것인지 잘 몰랐습니다. 그.래.서. 요즘 체험단으로 결제한 Cluely를 써봐야겠다 생각이 들었습니다. (Cluely는 작동 화면 캡처가 안되다 보니 사진은 못 넣었고 제가 이용한 내용 요약을 홈페이지에서 찾아서 첨부합니다.) Cluely 말로는 Node.js와 npm이 설치되어있지 않아서 이런 문제가 발생한다고 하여 설치를 완료했습니다. 환경 변수에 대한 허용도 필요하다고 해서 진행했으나 원하던 경로가 그대로 지정이 되어있어서 딱히 건드리지 않고 닫았습니다.
그렇게 데모를 하러 다시 시도했더니...! 역시나 안되었습니다.😂
다시 Cluely에게 물었더니 이번에는 보안 허용을 설정해줘야 한다고 알려줘서 코드를 입력했습니다. Cluely가 답변 복사가 안되다보니(가장 큰 단점 중 하나인 거 같아요...)제가 눈으로 보고 윈도우 파워쉘에 하나씩 입력을 했더니, 이게 웬걸 작동을 안하더라고요ㅠㅠ
Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned그래서 뭐가 문제일까 하고 곰곰히 생각해보다가 혹시?하고 대소문자를 정확하게 구분해서 입력했더니 짠! 됐습니다.
ㅎㅎ이런 거 입력하는 것도 귀찮아서 대충하면 안되는구나 싶었습니다. 그렇게 npm 설정을 마치고 데모 시연을 시작했습니다.
역시나 이번에도 문제가 발생했습니다. 웹페이지에서 계속 오류가 발생했고 CURSOR의 대화창을 통해 디버깅을 수차례 진행했습니다. 오류 코드까지 정확하게 전달해주었음에도 수정이 안되었습니다. js 코드 자체에서 충돌하는 것은 기본이고 애니메이션을 추가하려고 했더니 클라이언트 오류나 섹션 중복 등의 문제가 발생했습니다. 다음날 하려고 덮어놨다가 다시 들어갔더니 이번에는 CURSOR가 부정사용을 감지했다고 실행이 안되는 거 있죠...담당자에게 이메일을 보내놓고 이참에 Trae를 한번 써보려고 해봤습니다.
Trae는 생각보다 CURSOR에 비해서 매끄럽지 않다는 느낌을 받았습니다. 특히, AI가 수정해준 코드를 실제 제 코드 블록에 적용하는 과정에서 시간이 꽤 오래 걸렸습니다. 밥 먹고 돌아오니 CURSOR의 제한이 풀려서 바로 갈아탔습니다 😊 하지만 프로젝트는 해도해도 안돼서 결국 이 폴더는 포기를 하고 아예 기존 V0의 디자인 폴더를 다시 다운 받아서 새롭게 부탁하기로 방향을 바꿨습니다.
이번에는 한번에 성공을 했습니다!!(와아아아앙!!) 그래서 왜 지난번에는 매끄럽게 구동이 안되고 이번에는 잘 됐을까 생각을 해보니 입력한 프롬프트에 약간의 차이가 있었던 게 원인이 아닐까하는 생각이 들었습니다. 첫번째 프로젝트를 진행할 때는 단순히 "이 폴더를 웹페이지로 구현해주세요." 했었습니다. 다시 시도할 때에는 "V0에서 디자인한 랜딩페이지 입니다. 작동해볼 수 있도록 만들어주세요." 라고 했습니다. 대상 폴더에 대한 설명을 덧붙여주니 훨씬 이해도 잘하고 폴더 내 잡다한 코드들은 이번에 생성하지 않고 기존 디자인 코드를 많이 활용하는 모습을 보였습니다.
드디어 몇일간에 걸친 디버깅 싸움이 끝나고 웹페이지를 구현하는 데 성공했습니다! 애니메이션 구현에서는 오류가 계속 생겨서 결국 섹션 전환 애니메이션은 포기했습니다. 제가 코딩 지식이 조금 더 있었더라면 직접 수정할 수도 있었을 거 같은데, 비전문가로서 이 정도까지 한 것만 해도 감지덕지 해야죠. 추후에 기회가 된다면 간단한 코딩 기초 정도는 배울 수 있다면 좋을 것 같기는 합니다.
결과와 배운 점
비전공자도 충분히 웹페이지를 만들어볼 수 있다는 자신감을 얻음
하지만, AI가 생성한 결과물이 항상 정확하지는 않음 → 직접 확인하고 수정할 수 있는 역량 필요
내가 원하는 결과 를 모델에게 정확히 설명하는 능력(프롬프트 작성력)이 핵심
Trae보다는 CURSOR가 직관적이고 결과도 더 만족스러웠음
Cluely는 코드 관련이 아니더라도 환경설정 문제 해결에 강력한 지원을 제공
여러 툴을 비교해보고 시도해보는 과정에서, AI가 모든 걸 다 해주진 않지만, 시작 장벽을 크게 낮춰주는 도우미라는 걸 체감함
도움 받은 글 (옵션)
바이브 코딩 강의 실시간 세션 자료
Cluely 문서 및 사용자 커뮤니티 포스트 일부
감사합니다!!🙇