[AI 활용] Cursor AI로 코딩 없이 웹사이트 만들기 part.2 - AI 없이 진행했던 개발 단계와 어려움

[AI 활용] Cursor AI로 코딩 없이 웹사이트 만들기 part.2 - AI 없이 진행했던 개발 단계와 어려움

🔗 이전화 보기: Cursor로 시작하는 개발과 웹 배포의 흐름 (Part.1)

 

“개발은 원래 이렇게 귀찮고 어려운 거였어...” 그런 생각, 한 번이라도 해보신 분이라면 이 글에 고개를 끄덕이실 거예요.

 

안녕하세요! AI 기술 알려주는 아조씨, AIJOSSI입니다. 지난 Part.1에서는 Cursor를 활용한 개발과 배포의 전체 흐름을 살펴봤는데요, 오늘은 그 전 단계로 돌아가 봅니다. Cursor가 없던 시절, 우리는 어떻게 개발했을까요? 포트폴리오 웹사이트 하나 만들겠다고 프론트, 백엔드, 배포까지 전부 손으로 치며 고생했던 그 과정을 한 번 되짚어봅시다. 왜 Cursor가 ‘혁신적’인지를 이해하려면, 먼저 과거의 고생부터 알아야 하니까요.

 

목차

1. 전통적인 개발 방식의 시작: 프로젝트 세팅 2. 프론트엔드 개발의 반복작업과 시간 소모 3. 백엔드 초기 설정의 허들들 4. 테스트와 디버깅, 예상 밖의 시간 도둑 5. 배포 및 도메인 연결의 수동 작업 6. 요약 및 다음 편 예고: Cursor는 어떻게 다를까?

1. 전통적인 개발 방식의 시작: 프로젝트 세팅

 

AI가 없던 시절, 프로젝트를 시작하려면 무조건 '세팅부터 손으로' 해야 했습니다. 프론트엔드든 백엔드든 간단한 웹사이트 하나 만들겠다고 해도 몇 일에서 몇 주는 기본이었죠.

 

• npm init, CRA(create-react-app), Vite, Next.js CLI 중 하나 선택
• webpack, babel, eslint, prettier 설정 직접 추가
• TypeScript 설정(tsconfig.json) 직접 커스터마이징
• 백엔드는 Express 설치 후 디렉터리 수동 구성
• 필요한 환경변수 파일(.env)도 손으로 만들기

 

처음 시작할 땐 ‘어떤 디렉터리 구조가 표준인가요?’부터 구글링을 시작했죠. 공식 문서도 많았지만, 실전엔 그 문서들이 항상 딱 맞지는 않았습니다.

 

"왜 안되는거지?"라고 생각한 적 많으셨죠? 개발자 전용 표정이에요.

2. 프론트엔드 개발의 반복작업과 시간 소모

UI 하나 만들려 해도 코드를 처음부터 다 작성해야 했습니다. 컴포넌트 생성, 반응형 CSS 작성, 상태 관리 등 어느 것 하나 자동화된 건 없었죠.

 

• Stack Overflow, GitHub Issues로 비슷한 예제 찾기
• media query로 반응형 작업 시 breakpoint 일일이 설정
• 컴포넌트 재사용을 위해 props와 상태 분리 반복 작성
• 문서 예제 복붙 후 맞게 수정하다 버그 유발

 

심지어 코드 하나 잘못 쓰면 화면 하얗게 나오고, 콘솔에 뜨는 에러도 해석하기 어려웠습니다. CSS Flexbox 하나 잘못 써서 레이아웃 깨지는 건 일상이었죠.

 

3. 백엔드 초기 설정의 허들들

서버도 만만치 않았습니다. Express 서버 설정부터 API 라우팅, JSON 파싱, 에러 핸들링, 입력 검증까지 전부 ‘직접’ 해야 했죠.

 

• express 설치 및 서버 listen 포트 지정
• body-parser, cors 등 필수 미들웨어 추가
• 라우팅 구조 설계, router 분리
• request 데이터 검증 (예: express-validator)
• try-catch로 에러 핸들링 구조 수동 구현

 

기능은 단순한데 설정은 복잡하고, 한 글자 잘못 치면 아예 실행조차 안 됐던 경험, 다들 있지 않으셨나요?

 

"왜 되는거지...?"를 고민하는 개발자의 모습입니다.

4. 테스트와 디버깅, 예상 밖의 시간 도둑

버그 한 번 잡으려면 눈이 아플 정도로 콘솔 로그 찍고, 디버거 켜고, 구글 검색에 몇 시간 보내는 건 다반사였습니다. 문제는 에러가 어디서 났는지도 모르는 경우가 너무 많았다는 거죠.

 

• 콘솔 로그 무한 삽입 → console.log('여기?'); console.log('여긴가?');
• 브라우저 개발자 도구로 DOM 추적
• Node.js 디버거로 API 응답 확인
• 에러 메시지 해석 불가 → 구글링 3번, StackOverflow 탐색
• 결국 의존성 문제였다는 사실을 한참 뒤에 발견

 

“SyntaxError” 하나로 반나절을 날려본 적 있다면, 이 고통은 너무도 현실적이죠.

5. 배포 및 도메인 연결의 수동 작업

 

배포 과정도 여전히 사람 손이 많이 갔습니다. GitHub에 올릴 때도, Vercel에 배포할 때도, 도메인 설정할 때도 클릭과 복사 붙여넣기의 연속이었어요.

 

• git add . → git commit -m “기본 설정” → git push origin main
• Vercel이 빌드 디렉터리 자동 인식 못할 시 수동 설정
• 환경변수(VITE_API_URL 등) 직접 대시보드에서 입력
• 도메인 구매 후 DNS 설정 (CNAME, A레코드 등) 적용
• 반영되기까지 DNS 전파 대기 시간 = 불안의 시간

 

전부 다 해놓고도 “왜 안 뜨지?” 하는 순간, 머리를 쥐어뜯고 싶어지는 그런 기억들… 개발은 잘 해놨는데 배포가 막히면 정말 허탈하죠.

그러나 Cursor가 나오고 많은 것이 달라졌어요!

6. 요약 및 다음 편 예고: Cursor는 어떻게 다를까?

 

기존 방식은 개발자가 모든 걸 책임져야 했습니다. 코드는 직접 타이핑, 설정은 직접 구성, 문제 해결도 직접… 당연히 시간이 오래 걸리고, 멘탈도 쉽게 소모되죠.

 

하지만 이제는 달라졌습니다. Cursor라는 AI 개발 툴이 등장하면서, 이런 반복적이고 수동적인 작업에서 벗어날 수 있게 되었어요. 다음 편에서는 Cursor를 도입했을 때, 위에서 말한 문제들이 어떻게 해결되는지를 구체적으로 비교해드릴게요. “와, 이거 진짜 개발 맞아?” 싶을 만큼 간편해지는 개발 프로세스, Part.3에서 확인해보세요.

 

Q Cursor는 어떤 도구인가요?

Cursor는 GitHub Copilot 기반의 AI 코드 에디터로, 코드 작성부터 수정, 리팩토링, 커밋 메시지 생성까지 대부분의 작업을 자동으로 처리해주는 도구입니다. Visual Studio Code의 친숙한 환경을 유지하면서 AI의 힘을 더했어요.

A VS Code에 AI가 붙은 초강력 버전이라고 생각하시면 됩니다.

Q 정말 초보자도 Cursor로 개발할 수 있나요?

네, 가능합니다. 명령어 하나 외우지 않고도 "로그인 UI 만들어줘" 같은 자연어만으로도 코드가 생성되고, 필요한 부분을 추천하거나 자동 완성해주는 기능이 탑재돼 있어요. 초보자에게는 진입장벽을 낮춰주고, 숙련자에겐 시간을 아껴줍니다.

A 문법 몰라도 됩니다. ChatGPT랑 대화하듯이 개발하면 끝이에요!

Q Cursor는 기존 개발 방식과 어떤 점이 다르죠?

기존에는 환경설정, 코드 생성, 오류 수정 등 모든 과정을 수동으로 해야 했지만, Cursor는 그 대부분을 자동화합니다. 특히 설정 오류나 문법 실수 같은 실수도 미리 캐치해서 알려주기 때문에 훨씬 안정적이에요.

A “사람이 코딩하는 게 아니라, 코딩을 도와주는 AI와 협업”하는 방식이죠.

Q Cursor를 사용하면 뭐가 가장 편해지나요?

코드 생성과 수정, 커밋 메시지 자동화, 리팩토링, 에러 디버깅 등 개발자가 가장 귀찮아하는 루틴한 작업을 대신 해줍니다. 반복되는 시간 낭비를 줄이고 진짜 ‘개발’에 집중할 수 있어요.

A “자동화”가 아니라 “지능형 보조 개발자” 수준이에요. 직접 느껴보세요.

오늘은 우리가 익숙하게 겪어왔던 개발의 불편함, 반복작업, 시행착오들을 돌아봤습니다. 이런 과정을 겪어본 사람이라면 Cursor의 등장이 얼마나 혁신적인지를 단번에 느낄 수 있을 거예요. 하지만 이건 시작일 뿐입니다. 다음 편에서는 Cursor 도구가 기존의 개발 과정을 얼마나 효과적으로 개선하는지 실제 비교를 통해 보여드릴 예정이에요. 이제 '사람이 하는 개발'이 아니라, 'AI와 협업하는 개발' 시대입니다. 다음 편도 절대 놓치지 마세요!