소개
업무 효율을 높이기 위해, 직접 사용할 수 있는 업무 예약 웹앱을 만들어보고 싶었어요. 코딩을 일일이 손으로 작성하기보다, 네이버 블로그 실습 과정에서 배운 Cursor 챗을 활용해서 웹앱을 빠르게 구현해보는 것이 이번 사례의 목표였습니다.
최종적으로는 업무 내역과 피드백 분석을 자동화하고 싶은데, 파이선으로 구현 가능할지 고민해보려고 합니다.
진행 방법
1. 기본 웹앱 구현 시도
Cursor에서 챗 창에 "업무 예약 웹앱을 만들어줘"라는 식의 프롬프트를 입력했어요.
기본적인 HTML + JavaScript 구조의 예약 웹앱이 생성되었고, 이를 Cursor 내에서 저장했습니다.
2. 실행 문제 발생 & 해결 과정
생성된 HTML 파일을 Cursor의 브라우저 탭 기능으로 실행해보려고 했는데, 예상치 못한 문제가 생겼어요.
Cursor 브라우저 탭이
http://형식이 아닌 경로를 자동으로http://로 인식해서, 로컬 파일 경로를 직접 열 수가 없었던 거예요.
3. ChatGPT에게 도움 요청
ChatGPT에게 이 상황을 설명하고 해결 방법을 물어보니,
Live Server확장 프로그램을 설치하라는 조언을 받았어요.VS Code나 Cursor에서 Live Server를 설치하면
http://localhost:포트번호로 로컬 서버가 실행되고, 그 주소를 Cursor의 브라우저 탭에 붙여넣으면 HTML을 정상적으로 확인할 수 있다는 것!html을 오른쪽 클릭->Live server로 열기
브라우저에 뜬 주소 복사해서 커서 브라우저 탭에서 열기
정말로 그렇게 해봤더니 문제없이 브라우저 탭에서 실행되었고, UI를 직접 보며 수정 포인트를 찾을 수 있었어요.
다른 방법도 있을 것 같은데, 더 좋은 방법이 있다면 좋을 것 같아요.
4. AI와 협업하며 UI 수정
수정이 필요한 부분(예: 버튼 위치, 텍스트 내용 등)을 클릭한 후, Cursor 챗에 "이 부분을 이런 식으로 바꿔줘"라고 요청하니 실시간으로 코드가 변경됐어요.
<p> 부분만 지정해서 수정이 된 화면
element 선택이 가능한 점이 많은 도움이 될 것 같아요.
결과와 배운 점
바이브코딩을 통해 생성 → 실행 → 수정의 사이클이 매우 빠르게 돌아간다는 점이 인상적이었어요.
특히 Cursor의 브라우저 탭이 많은 도움이 될 것 같아요. element를 선택한 후에 명령하는 방식으로 직관적으로 진행할 수 있었어요.
다만, 원하는 예약 기능을 모두 구현하지는 못했어요. 원하는 동작을 정확히 구현하려면 프롬프트를 더 구체적이고 정밀하게 작성해야 한다는 점을 절감했습니다.
예약 일시가 아니라 시작 일시와 종료 일시가 필요했던 건데 ㅠㅠ
다음 시도 계획
예약 기능을 더 쪼개서 기능 단위로 구현을 요청해보기
AI에게 미리 상세 명세를 제공하고 그 에 맞게 작업하도록 유도하기
필요 시 단위 테스트나 데이터 구조도 함께 제시해서 정확도를 높이기
예약에 정말 이런 웹앱 형식을 원하는지도 재검토 필요! 커서로 할 수 있는데 다양하다 보니까 본인이 무엇을 원하는지가 정말 중요한 것 같아요. 웹앱인지 자동화 앱인지.....아직 제가 뭘 원하는지 잘 모르겠어요...🫠
