일타강사 저스틴의 AI 웹사이트 제작 강의: 초보자도 20분 만에 뚝딱!

강의 인트로: 여러분, 웹사이트 만들기 어렵지 않아요!

“안녕, 여러분! 일타강사 저스틴이다! 오늘은 정말 특별한 강의를 준비했어. 바로 AI를 활용해서 코딩 한 줄 몰라도 웹사이트를 만드는 방법! 내가 최근 Connect AI Lab의 Jay 선생님 영상을 보고 완전 감탄했거든. Jay 선생님이 초보자, 심지어 컴퓨터를 잘 못 다룬다는 막내와 함께 20분 만에 포트폴리오 웹사이트를 뚝딱 만들더라고! 여러분도 할 수 있어. 나이 상관없고, 경험 상관없어. 이 강의 따라오면 너도 웹사이트 하나 뚝딱 만들 거야. 준비됐지?

먼저, 웹사이트가 뭔지 간단히 짚고 가자. 웹사이트는 크게 두 부분으로 나뉘어. 하나는 프론트엔드, 우리가 눈으로 보는 부분이야. 예를 들어, 디자인, 버튼, 색상 이런 거. 다른 하나는 백엔드, 눈에 안 보이지만 데이터를 저장하고 기능을 작동시키는 부분이지. 회원가입이나 데이터 저장 이런 거 말이야. 근데 백엔드는 좀 복잡하니까 오늘은 프론트엔드만 만들 거야. 초보자도 충분히 할 수 있어. 이 웹사이트는 포트폴리오로 사용할 거야. 취업할 때, 자기소개를 할 때 유용한 페이지로 만들어보자. 자, 그럼 시작한다!”

1단계: AI 도구 준비 – Cursor AI 설치

“자, 여러분, 첫 번째 단계! 우리가 사용할 도구는 Cursor AI야. 이건 AI 기반 개발 도구로, 코딩을 몰라도 웹사이트를 빠르게 만들 수 있게 도와줘. Jay 선생님이 이걸로 초보자도 쉽게 만든다고 했어. 먼저 컴퓨터를 켜고, Google에 들어가서 ‘Cursor’라고 검색해. 맞아, 영어로 ‘C-U-R-S-O-R’야. 검색하면 Cursor AI 공식 웹사이트가 나와. 이건 Visual Studio라는 개발 도구에 AI를 연동해서 엄청 빠르게 작업할 수 있는 프로그램이야.

웹사이트 들어가면 다운로드 버튼이 보일 거야. 사용하는 컴퓨터에 맞게 선택해. 맥북 쓰면 ‘Download for MacOS’, 윈도우면 ‘Download for Windows’ 눌러. 다운로드하고 설치까지 완료하면 준비 끝! 설치하면서 궁금한 거 있으면 나한테 물어봐. 설치 완료했지? 그럼 다음 단계로 넘어가자!”

2단계: 새 프로젝트 시작하기

“좋아, Cursor AI를 실행했으면 이제 새 프로젝트를 만들어야 해. 프로그램을 열면 상단 좌측에 ‘File’ 메뉴가 있을 거야. 거기서 ‘Open Folder’를 클릭해. 이제 프로젝트 파일을 저장할 폴더를 만들어야 하니까, 바탕화면(Desktop)에 가서 ‘New Folder’ 버튼 누르고 이름 정하자. Jay 선생님은 ‘New Company’라고 했던데, 너도 원하는 이름으로 해봐. 폴더 만들었으면 그걸 선택해서 ‘Open’ 눌러. 이게 바로 새 프로젝트 시작하는 거야. 이제 우리가 웹사이트를 만들 공간이 마련된 거지. 간단하지? 자, 다음으로 넘어가자!”

3단계: Cursor AI 기능 알아보기

“Cursor AI에는 여러 기능이 있어. Jay 선생님이 설명한 걸 보면, 크게 세 가지를 알아두면 돼. 첫째, Chat. AI와 대화하면서 명령을 내릴 수 있는 기능이야. 둘째, Bug Finder. 코드에 오류가 있는지 찾아주는 기능인데, 아직 실험 단계라 오늘은 안 쓸 거야. 셋째, Composer. 이게 오늘의 핵심이야! Composer 안에 ‘Agents’라는 옵션이 있어서, 우리가 내린 명령을 빠르고 자동으로 실행해줘. 오늘은 이 Composer의 Agents 기능을 활용해서 웹사이트를 만들 거야. 폰트 크기가 작아서 잘 안 보이면 화면 설정에서 좀 키워봐. 준비됐지? 이제 본격적으로 만들어보자!”

4단계: 웹사이트 구조 만들기

“자, 이제 Composer에서 Agents를 선택하고, AI에게 명령을 내려보자. 우리는 포트폴리오 웹사이트를 만들 거야. Jay 선생님처럼 구체적인 요구사항 없이 ‘일반적인 포트폴리오 웹사이트 만들어줘’라고 요청하면 AI가 기본 템플릿을 만들어줄 거야. 명령을 내리면 AI가 좌측에 프론트엔드 코드를 자동으로 작성하고, 우측에는 작업 진행 상황이 표시돼. 정말 신기하지?

AI가 만들어주는 구조를 보면, 먼저 Home 화면이 있어. 이건 웹사이트에 접속했을 때 바로 보이는 랜딩 페이지야. 다음으로 About 화면, 자기소개를 넣는 페이지고, 상단에 네비게이션 바에 포함돼 있어. 그리고 Projects 화면, 포트폴리오에 넣을 프로젝트를 소개하는 페이지야. 이게 기본 구조야.

근데 가끔 라이브러리 충돌, 즉 ‘Dependency Clash’ 같은 오류가 뜰 수 있어. 그럴 땐 당황하지 말고 ‘Accept’나 ‘Run Command’ 버튼을 눌러 진행하거나, 다른 버전을 설치하라고 AI에게 말하면 돼. Jay 선생님이 비유한 것처럼, 커피 머신에 맞지 않는 캡슐이 있으면 맞는 걸 찾아야 하잖아? AI가 그런 조합을 찾아주는 거야. 이해했지? 오류가 나도 겁먹지 말고 계속 진행하자. AI가 다 알아서 해줄 거야!”

5단계: 초기 결과 확인 및 문제점 발견

“좋아, AI가 웹사이트 구조를 다 만들면 ‘Accept All’ 버튼을 눌러서 결과를 저장해. 그러면 화면에 웹사이트 미리보기가 나타날 거야. Jay 선생님 영상에서는 ‘Welcome to My Portfolio’ 같은 기본 템플릿이 떴어. 각 페이지, 그러니까 Introduction이니 About이니 스크롤하면서 확인해봐.

근데 여기서 문제점이 보여. 첫째, 페이지 간 이동할 때 ‘뒤로 가기(Back)’ 버튼이 없어서 불편해. 둘째, 내용이 일반적인 개발자 템플릿이라 나랑 안 맞아. 이름도 ‘Hong Gil-dong’처럼 기본값으로 되어 있고, 내 정보는 하나도 없지. 이걸 고쳐야겠지? 자, 다음 단계로 넘어가자!”

6단계: 커스터마이징 – 내 스타일로 바꾸기

“이제 웹사이트를 나한테 맞게 바꿔보자. AI와 대화하듯이 자연스럽게 명령을 내려. 예를 들어, Jay 선생님 막내는 ‘나는 개발자가 아니라 콘텐츠 크리에이터야. 이에 맞는 디자인으로 바꿔줘’라고 했어. 너도 너의 직업이나 스타일에 맞게 말해봐. 그리고 ‘뒤로 가기’ 버튼 추가해 달라고 요청하고, 디자인도 좀 더 미래적이고 멋지게 바꿔달라고 해봐.

추가로 창의적인 아이디어도 넣을 수 있어. 예를 들어, 매일 색상이 바뀌게 한다든지, 월요일은 빨강, 화요일은 주황 이런 식으로. 아니면 뉴스레터 기능이나 유튜브 연동도 요청할 수 있어. AI는 이런 것도 다 해줄 수 있거든. 그리고 네 사진 업로드하고, 연락처 정보도 넣어서 개인화해. 수정이 끝나면 다시 확인해봐. ‘Back’ 버튼이 생겼는지, 이름이 너로 바뀌었는지, 색상 테마가 예쁘게 적용됐는지 확인하는 거야. 멋지지? 이게 바로 AI의 힘이다!”

7단계: 마무리 및 배포 준비

“웹사이트가 거의 완성됐어. 이제 마지막으로 세부 사항을 점검하고, 네 색상과 스타일에 맞게 추가로 수정해봐. 모든 내용을 네 정보로 업데이트하고 나면, 이 웹사이트를 클라우드에 업로드해서 언제 어디서나 볼 수 있게 해야 해. 고유한 웹사이트 주소를 설정해서 배포하는 거야. 이 부분은 좀 더 기술적인 내용이니까, Jay 선생님처럼 다음 단계로 넘길 수도 있어. 근데 이 과정이 정말 놀랍지 않니? 외주 맡기면 숨고나 크몽에서 큰돈 내야 하고 시간도 오래 걸리는데, AI로 20분 만에 해냈잖아!”

8단계: 추후 계획 및 동기부여

“자, 이제 마지막 단계야. Jay 선생님은 다음 영상에서 이 웹사이트를 막내 스타일에 더 맞게 수정하고, 클라우드 연결까지 완료할 계획이라고 했어. 너도 계속 수정하면서 네 웹사이트를 더 멋지게 만들어보자. 여러분, 이 과정 따라 해보고 AI로 창의적인 작업 도전해봐. 지금이야말로 창의적인 일을 하기 정말 좋은 시기야. 생각하는 건 뭐든 만들 수 있거든. “