AI 코딩의 시작

Cursor 설치부터 첫 번째 웹사이트 배포까지

"코딩은 암기가 아니라 대화입니다. AI와 대화하는 법을 배우면 누구나 개발자가 될 수 있습니다."

세션 개요

AI 코딩의 혁명을 직접 경험합니다. 복잡한 설치 과정 없이 Cursor 하나로 개발 환경을 구축하고, 단 2시간 만에 나만의 웹사이트를 만들어 인터넷 세상에 배포합니다.

학습 목표

AI 코딩 도구(Cursor)의 기본 원리 이해

개발 환경 설정 및 기본 단축키 습득

HTML/CSS의 기초 구조 파악

Vercel을 통한 원클릭 배포 경험

동작 원리

우리가 사용하는 언어(한국어)를 AI가 이해하고, 이를 컴퓨터가 이해하는 언어(코드)로 번역해줍니다. 우리는 "무엇을 만들고 싶은지"만 명확하게 설명하면 됩니다.

실습 단계

🛠️ 도구 설치

Cursor 에디터 다운로드 및 설치

PROMPT

Cursor 공식 홈페이지 접속 → Download for Windows/Mac

👋 Hello World

첫 번째 HTML 파일 생성

단축키Ctrl+K (AI에게 코드 작성 요청)

PROMPT

자기소개 페이지를 만들고 싶어. 검정색 배경에 네온 사인 효과로 내 이름을 가운데 띄워줘.

🚀 실시간 배포

Vercel로 전 세계에 공유

PROMPT

GitHub 연동 → Import Project → Deploy

완성 체크리스트

Cursor 에디터가 정상적으로 설치되었나요?
GitHub 계정에 로그인되었나요?
첫 번째 웹사이트가 Vercel에 배포되었나요?
배포된 주소를 스마트폰으로 접속해보셨나요?

자주 묻는 질문 (FAQ)

Q.코딩을 전혀 몰라도 되나요?

A.네, 가능합니다. 영어 단어를 몰라도 번역기를 쓰면 대화가 통하듯, 코딩 문법을 몰라도 AI가 대신 작성해줍니다.

Q.노트북 사양이 좋아야 하나요?

A.웹 개발은 고사양 컴퓨터가 필요 없습니다. 일반적인 사무용 노트북이면 충분합니다.

준비사항

•노트북 (Windows/Mac)
•구글 크롬 브라우저 설치
•GitHub 계정 생성

사용 기술

Cursor

AI가 내장된 차세대 코드 에디터

Vercel

만든 웹사이트를 전 세계에 배포하는 도구

💎 AI와 대화하는 3단계 공식

•1. 역할 부여: "너는 세계 최고의 웹 디자이너야"
•2. 상황 설명: "포트폴리오 사이트를 만들고 있어"
•3. 구체적 요청: "모던하고 심플한 스타일로 만들어줘"

Next Session

계산기 만들기

다음 단계로 넘어가기

Instructor Notes (강사 노트)

✅

수업 전 준비

수강생들의 GitHub 계정 생성 여부를 미리 확인해주세요. 2단계 인증 문제로 시간이 지체될 수 있습니다.

⚠️

돌발 상황 대처

Vercel 배포 시 에러가 발생하면, 프로젝트 이름을 변경해서 다시 시도하도록 안내해주세요. (중복된 이름 문제)