비전공자가 Cursor로 첫 웹사이트 만드는 1주 가이드

💡 코딩을 몰라도 웹사이트를 만들 수 있는 이유

"코딩 한 줄도 못 쳐봤는데 웹사이트를 만들 수 있을까?" 최근 몇 년 사이 이 질문에 대한 답이 완전히 바뀌었습니다. Cursor라는 AI 코드 에디터가 등장하면서, 채팅창에 원하는 것을 문장으로 설명하면 코드를 대신 작성해 주는 방식이 실제로 쓸 만한 수준까지 올라왔기 때문입니다.

Cursor는 마이크로소프트의 VS Code를 기반으로 만들어진 에디터로, 화면 오른쪽에 AI 채팅창이 붙어 있습니다. "자기소개 페이지를 만들어줘"처럼 자연어로 요청하면 AI가 실제 코드 파일을 생성하고, 화면에 어떻게 반영됐는지 바로 확인할 수 있습니다. 코드를 아예 몰라도 되는 것은 아니지만, 처음부터 문법을 외우고 시작할 필요는 없습니다. AI가 만든 결과를 보면서 조금씩 이해를 넓혀가는 방식이 가능해졌다는 점이 핵심입니다.

이 가이드는 개발 경험이 전혀 없는 분이 하루 1~2시간씩 투자해 7일 만에 실제로 작동하는 웹사이트 한 개를 완성하는 것을 목표로 합니다. 화려한 서비스가 아니라 "내가 만든 페이지가 인터넷 주소로 열린다"는 경험 자체에 집중합니다.

📅 1주 완성 계획표

일차	목표	주요 활동
1일차	개발환경 설치 & Cursor 사용법 익히기	Cursor 설치, 화면 구성 파악, 채팅으로 첫 코드 생성
2일차	HTML/CSS 기초 개념 이해	태그·구조·스타일이 무엇인지 눈으로 확인하며 익히기
3~4일차	웹사이트 뼈대 만들기	프롬프트로 헤더·본문·푸터 등 페이지 구조 요청
5일차	스타일링	색상·폰트·여백·반응형 레이아웃 다듬기
6일차	배포	Vercel 또는 Netlify로 실제 인터넷 주소 발급
7일차	다듬기	오타·깨진 화면 점검, 최종 점검 후 공유

🖥️ 1일차 — 개발환경 설치 & Cursor 사용법 익히기

• cursor.com에서 Cursor를 내려받아 설치합니다. 무료 요금제로 시작할 수 있습니다.
• Node.js도 함께 설치해야 합니다(nodejs.org). 웹사이트를 내 컴퓨터에서 실행해 보려면 필요한 프로그램입니다.
• Cursor를 켜면 왼쪽은 파일 목록, 가운데는 코드 화면, 오른쪽 또는 하단은 AI 채팅창으로 구성돼 있습니다.
• Ctrl+L(맥은 Cmd+L)을 누르면 채팅창이 열립니다. 여기에 원하는 것을 문장으로 적으면 됩니다.
• Ctrl+K(맥은 Cmd+K)는 선택한 코드 일부분만 콕 집어 수정을 요청할 때 씁니다.
• 첫 실습으로 새 폴더를 만들고 채팅창에 이렇게 입력해 봅니다: "Next.js 프로젝트를 새로 만들어줘. 화면 가운데 '안녕하세요, 제 첫 웹사이트입니다'라는 문구만 보이는 가장 단순한 페이지로 시작하고 싶어."
• Cursor가 안내하는 대로 터미널에서 npm run dev를 실행하면 브라우저에서 localhost:3000 주소로 결과를 바로 볼 수 있습니다.

1일차의 목표는 완벽한 페이지를 만드는 게 아니라, "채팅으로 요청 → 화면에 반영 → 다시 요청"이라는 흐름 자체에 익숙해지는 것입니다. 이 흐름만 몸에 익으면 이후 6일은 훨씬 수월합니다.

🧱 2일차 — HTML/CSS 기초 개념 이해

Cursor가 코드를 대신 써준다고 해도, 화면에 보이는 결과물이 어떤 원리로 이루어져 있는지 최소한의 감각은 필요합니다. 문법을 외울 필요는 없고, 개념만 이해하면 됩니다.

• HTML: 웹페이지의 뼈대입니다. 제목, 문단, 이미지, 버튼 같은 요소들이 각각 태그로 표시됩니다. 예를 들어 <h1>은 큰 제목, <p>는 문단을 뜻합니다.
• CSS: HTML로 만든 뼈대에 색상, 크기, 여백, 배치를 입히는 스타일 규칙입니다. 같은 HTML이라도 CSS에 따라 완전히 다른 느낌의 페이지가 됩니다.
• Cursor 화면에서 실제 코드 파일을 열어 태그가 어디에 있고, 화면의 어느 부분과 연결되는지 눈으로 대조해 봅니다. 코드를 직접 짜지 않아도, 어떤 태그를 지우면 화면에서 무엇이 사라지는지 한두 번 실험해 보는 것만으로 감이 잡힙니다.
• 모르는 태그나 속성이 보이면 채팅창에 "이 코드에서 className은 무슨 역할을 해?"처럼 바로 물어봅니다. Cursor는 지금 열려 있는 파일 내용을 참고해서 설명해 줄 수 있습니다.

이 날은 새로운 것을 만들기보다 "읽는 연습"에 가깝습니다. 완벽히 이해하지 못해도 괜찮습니다. 3일차부터는 다시 채팅으로 요청하는 작업으로 돌아가기 때문에, 오늘 배운 개념은 이후 결과물을 이해하는 데 도움을 주는 배경지식 역할만 하면 충분합니다.

🏗️ 3~4일차 — 프롬프트로 웹사이트 뼈대 만들기

이제 본격적으로 내 웹사이트의 구조를 세웁니다. 한 번에 완벽한 프롬프트를 쓰려고 하지 말고, 큰 덩어리부터 요청한 뒤 세부 사항을 하나씩 추가하는 방식이 훨씬 잘 작동합니다.

• 3일차, 전체 구조 요청 예시:
  "1인 포트폴리오 웹사이트를 만들고 싶어. 맨 위에 로고와 메뉴가 있는 헤더, 가운데에 이름과 한 줄 소개가 나오는 히어로 섹션, 그 아래 프로젝트 3개를 카드 형태로 보여주는 섹션, 맨 아래 연락처가 담긴 푸터를 넣어줘."
• 3일차, 섹션 단위 추가 요청 예시:
  "About 섹션을 추가해줘. 내 소개 문단 하나, 그 아래 경력이나 활동을 3줄짜리 리스트로 보여주고 싶어."
• 4일차, 콘텐츠 채우기 요청 예시:
  "프로젝트 카드 3개에 각각 제목, 한 줄 설명, '자세히 보기' 버튼을 넣어줘. 버튼을 누르면 새 탭에서 링크가 열리게 해줘."
• 4일차, 연락 수단 추가 요청 예시:
  "푸터에 이메일 주소와 깃허브 링크를 아이콘과 함께 넣어줘."
• 결과가 마음에 들지 않으면 처음부터 다시 쓰지 말고 "방금 만든 히어로 섹션에서 문구 크기만 더 키워줘"처럼 이전 결과를 기준으로 좁혀서 요청합니다. Cursor는 직전 대화 맥락을 기억하기 때문에 이렇게 단계적으로 다듬는 방식이 훨씬 효율적입니다.

3~4일차가 끝날 때쯤이면 디자인은 투박해도 "헤더-본문-푸터"가 갖춰진, 실제로 클릭이 되는 페이지 하나가 완성됩니다. 이 시점에는 예쁘게 꾸미는 것보다 원하는 정보가 빠짐없이 들어가 있는지에 집중하는 편이 좋습니다.

🎨 5일차 — 스타일링

구조가 잡혔다면 이제 분위기를 입힐 차례입니다. 색상, 폰트, 여백, 그리고 휴대폰 화면에서도 깨지지 않는 반응형 레이아웃을 다듬습니다.

• 색상 톤 요청 예시:
  "전체적으로 다크 모드 느낌으로 바꿔줘. 배경은 짙은 남색 계열, 강조 색은 하늘색으로 통일해줘."
• 여백·정렬 요청 예시:
  "섹션 사이 여백이 너무 좁아. 위아래 여백을 더 넉넉하게 늘리고, 텍스트를 가운데 정렬해줘."
• 반응형 요청 예시:
  "휴대폰 화면처럼 좁은 화면에서 봤을 때 메뉴가 겹쳐 보여. 화면이 좁아지면 메뉴가 햄버거 아이콘으로 접히도록 반응형으로 수정해줘."
• 버튼·애니메이션 요청 예시:
  "버튼에 마우스를 올렸을 때 살짝 커지는 효과를 넣어줘."
• 수정 후에는 반드시 브라우저 창 크기를 직접 줄여 보며 모바일 화면에서도 깨지지 않는지 눈으로 확인합니다. Cursor에게 반응형을 요청했더라도 실제 화면에서 검증하는 습관이 중요합니다.

🚀 6일차 — 배포 (Vercel / Netlify)

내 컴퓨터에서만 보이던 페이지를 누구나 접속할 수 있는 인터넷 주소로 올리는 단계입니다. 비전공자도 무료로 쓸 수 있는 대표적인 배포 서비스는 Vercel과 Netlify입니다.

• 먼저 GitHub 계정을 만들고, Cursor 채팅창에 "이 프로젝트를 GitHub 저장소로 올리고 싶어. 순서대로 명령어를 알려줘"라고 요청하면 필요한 명령어를 순서대로 안내받을 수 있습니다. 안내받은 명령어를 Cursor 하단 터미널에 그대로 붙여넣고 실행하면 됩니다.
• Vercel: vercel.com에서 GitHub 계정으로 로그인한 뒤, 방금 올린 저장소를 선택하면 자동으로 빌드가 시작되고 몇 분 안에 프로젝트명.vercel.app 형태의 주소가 발급됩니다. HTTPS(자물쇠 표시)도 자동으로 적용됩니다.
• Netlify: netlify.com도 같은 방식으로 GitHub 저장소를 연결해 배포할 수 있고, 코드를 GitHub에 올리지 않은 상태에서도 완성된 폴더를 화면에 끌어다 놓는 방식으로 배포하는 기능을 제공합니다. GitHub이 아직 낯설다면 이 방법으로 먼저 감을 잡아도 좋습니다.
• 둘 중 하나만 골라도 충분합니다. 두 서비스 모두 개인 프로젝트 수준에서는 무료 요금제로 운영할 수 있습니다.
• 이후 별도로 구매한 도메인이 있다면 각 서비스의 대시보드에서 도메인을 연결할 수 있지만, 처음에는 서비스가 기본으로 제공하는 주소만으로도 충분히 공유가 가능합니다.

🧹 7일차 — 다듬기

• 배포된 주소에 실제로 접속해서 오타, 깨진 이미지, 링크 오류가 없는지 처음부터 끝까지 점검합니다.
• 휴대폰으로도 직접 접속해 화면이 잘 나오는지 확인합니다. 컴퓨터에서 괜찮아 보여도 휴대폰에서 다르게 보이는 경우가 흔합니다.
• 페이지 제목과 설명(메타 태그)이 비어 있지 않은지 확인합니다. Cursor에 "이 페이지의 title과 description을 내 이름과 소개에 맞게 채워줘"라고 요청하면 됩니다.
• 완성된 주소를 이력서, 링크드인, 인스타그램 프로필에 추가해 실제로 공유해 봅니다.

⚠️ 비전공자가 자주 막히는 지점과 해결법

• 터미널이 무섭다 — 검은 화면에 명령어를 치는 것 자체가 낯설게 느껴집니다. 해결법은 명령어를 외우려 하지 말고, 그때그때 Cursor 채팅창에 "지금 무엇을 입력해야 해?"라고 물어보는 것입니다. 대부분의 경우 그대로 복사해서 붙여넣기만 하면 됩니다.
• 에러 메시지를 읽을 줄 모른다 — 빨간 글씨가 뜨면 당황하기 쉽습니다. 에러 메시지 전체를 복사해서 채팅창에 붙여넣고 "이 에러가 왜 나는지, 어떻게 고치면 되는지 알려줘"라고 요청하면 대부분 원인과 해결 방법을 함께 알려줍니다.
• 디자인을 계속 고치고 싶어진다 — 색이나 배치를 끝없이 바꾸다 보면 정작 배포까지 못 가는 경우가 많습니다. 5일차에 할당한 시간이 끝나면 지금 상태로 "확정"하고 다음 단계로 넘어가는 것이 완성에 훨씬 중요합니다.
• Git/GitHub 개념이 낯설다 — 저장하고 올리는 과정이 왜 필요한지부터 헷갈릴 수 있습니다. 지금 단계에서는 "내 코드를 안전하게 백업하고 배포 서비스와 연결해 주는 창고" 정도로만 이해해도 충분하며, 정확한 명령어는 매번 Cursor에게 물어보면서 진행해도 됩니다.
• 배포했는데 화면이 이상하게 나온다 — 내 컴퓨터에서는 잘 보이던 페이지가 배포 후 다르게 보일 수 있습니다. 이럴 때는 배포 서비스가 보여주는 빌드 로그(빌드 과정 기록)를 복사해 Cursor에 붙여넣고 원인을 물어보면 대부분 해결됩니다.

❓ 자주 묻는 질문

Q1. 정말 코딩을 전혀 몰라도 1주일 안에 가능한가요?

네, 다만 "코딩 문법을 배운다"가 아니라 "AI에게 원하는 것을 문장으로 설명하고 결과를 확인한다"는 방식으로 접근할 때 가능합니다. 매일 1~2시간씩 꾸준히 투자하는 것이 하루에 몰아서 하는 것보다 훨씬 효과적입니다.

Q2. 비용은 얼마나 드나요?

Cursor, Vercel, Netlify 모두 개인 프로젝트 수준에서는 무료 요금제로 충분히 진행할 수 있습니다. 별도 도메인을 구매하고 싶다면 도메인 등록 비용(연 1만~2만 원대)이 추가로 발생할 수 있지만, 필수는 아닙니다.

Q3. 이 방식으로 만든 웹사이트를 나중에 더 발전시킬 수 있나요?

가능합니다. GitHub에 코드가 저장되어 있기 때문에 이후 원하는 기능을 추가할 때도 같은 방식으로 Cursor 채팅창에 요청하며 이어서 개발할 수 있습니다.

💡 지금 바로 시작하세요

비용 부담 없이, 시간 부담 없이. NUGUNA는 런칭 기념으로 200+ 강의를 100% 무료 개방 중입니다. 하루 10분이면 충분합니다.

• 200+ 무료 강의 전체 보기
• 100% 무료 강의 라이브러리

📖 개발·프로그래밍 카테고리에서 Cursor·Git·배포 입문 강의로 오늘 배운 흐름을 더 탄탄하게 다져보세요.

---

📌 안내 · 본 글의 사례·통계는 공개 자료와 NUGUNA 학습 데이터를 종합한 예시이며, 일부 수치는 시장 패턴을 일반화한 가상 시나리오입니다. 세제·금리·법제 정보는 시점에 따라 변동되므로, 실제 의사결정은 공식 자료와 전문가 상담을 함께 활용해 주세요.