본문 바로가기
카테고리 없음

Cursor Al로 코딩 모르는 초보자도 웹페이지 쉽게 만드는 방법

by 먼지구름 2025. 3. 3.

 
웹페이지를 만드는 법을 공부하던 중 cursor Al를 사용하면 쉽게 만들 수 있다는 것을 알았다. 간단한 가족 웹페이지를 cursor AI의 도움을 받아 만들어 보고 나니, 다른 종류의 웹페이지도 만들고 더 업그레이드 할 수도 있겠다는 생각이 들었다. 한 번 해 보고 나면 어려워 보이던 것도 해 볼만 하다 생각이 드니, 혹시 나 같이 처음으로 웹페이지를 만들어 보려는 사람들도 이 방법을 한 번 해보면 좋을 것 같다. 
 
 
AI로 가족 웹페이지를 만들어봤다. 나는 웹에 대해 완전 생초보다. AI가 다 해준 것이지만, 그래도 내가 처음 만들어본 웹페이지다. 
 
 
AI가 코딩해 준다는 것을 알고 있었지만, 한 번도 해보지 않은 사람은 그 방법도 모르기는 마찬가지다. 세 달 전에 코딩책을 몇 권 사놓고, 직접 작성해 보겠다고 책을 보다 보니 이렇게 하다가는 시간이 오래 걸릴 것 같았다(이 방법은 좀......). 이래서는 안 되겠다 싶어, 구글 검색과 유튜브 영샹 몇 개를 거치다 보니 "cursor" AI가 있다는 것을 알았다. Cursor AI는 코드를 작성해주는 AI다. 
 

cursor 화면

 
 
다음은 내가 웹페이지를 만든 과정이다.
 
 
1.
지금 당장은 아니더라도 나중에 나만의 웹페이지가 필요할 것 같았다. 
 
2.
웹 개발 공부하기 위해 3달 전에 웹 개발 책 몇 권을 샀다.
 
3.
html, css, javascript를 책으로 띄엄띄엄 공부하다 보니 진도가 너무 느렸다.
 
4.
책으로 공부하다 보니 전체 그림이 어떤지 감이 오지 않았다. 
 
5.
html, css, javascript로 실제로 코드를 작성한 후 웹까지 완성하는 과정을 먼저 알아야겠다는 생각이 들었다. 전체 과정을 먼저 알고 싶었다. 
 
6.
가장 먼저 "html"을 키워드로 해서 구글 검색하여, 웹문서나 유튜브를 몇 개 봤다. 
 
7.
그 중 간단한 html 코드를 만들고 웹으로 바꾸는 강의 영상이 있었다.
 
8.
강의 영상을 보던 중 html 코드를 웹으로 바꾸기 위해 (배포) netlify라는 site를 사용한다는 것을 알았다.
 
9.
그리고 코드를 작성해 주는 cursor AI가 있다는 것을 알았다.
 
10.
cursor AI에 대한 영상을 몇 개 봤다.
 
11.
cursor AI에 '가족 웹페이지를 만들어줘'라고 입력했더니 알아서 html, css, javascript를 작성해줬다.
 
12.
netlify의 deploy(배포) 기능을 사용하여 웹페이지를 만들었다.
 
 
이렇게 해서 만든 웹페이지다. 기본 뼈대만 만들어진 페이지다. 그래도 이렇게 웹페이지까지 만들어 보니 앞으로 AI를 활용해서 페이지를 계속 업그레이드 할 수 있겠다는 생각이 들었다. 만약 나같이 개인 웹사이트를 만들고 싶어서 처음부터 책으로 공부하는 사람이 있다면, 먼저 AI를 사용하여 웹까지 완성해보면 좋을 것 같다. 
 
 
챗GPT로 텍스트로만 주고 받다가, 웹페이지 생성을 해보니 AI의 활용 범위가 정말 무궁무진하다는 것을 실감하고 있다. 
 

cursor AI와 netlify를 활용하여 만든 간단한 웹페이지