무엇을, 왜 배우나

이 교육의 목표

이 교육은 "웹사이트 만드는 법"을 가르치는 것이 목적이 아닙니다. 진짜 목적은 AI와 일하는 방식에 익숙해지는 것입니다. 처음에는 낯설고 어렵게 느껴지는 AI를 직접 써 보면서 "생각보다 쉽네", "내 일에도 쓸 수 있겠네"라는 감각을 얻는 것이 목표입니다.

1. 직접 써보기
2. 친숙해지기
3. 계속 관심 갖기
4. 업무에 활용하기
5. 생산성 높이기

읽기만 해서는 친숙해지지 않습니다. 손으로 직접 말을 걸어 보고, 결과를 눈으로 확인하고, 마음에 안 들면 다시 부탁해 보는 경험이 쌓여야 합니다. 그래서 이 교육은 설명보다 따라 하기에 시간을 많이 씁니다.

왜 하필 "웹사이트 만들기"가 첫 프로젝트일까요?

• 결과가 눈에 보입니다. 부탁한 내용이 화면에 바로 나타납니다. 잘 됐는지, 어디가 아쉬운지 코딩을 몰라도 한눈에 알 수 있습니다.
• 주소로 공유할 수 있습니다. 완성하면 https://[내-프로젝트].vercel.app 같은 주소가 생깁니다. 이 주소를 동료에게 보내면 누구나 열어 볼 수 있어서 "내가 만들었다"는 성취감이 큽니다.
• "부탁하고, 확인하고, 고치기"를 반복해 보기 좋습니다. 색이 마음에 안 들면 "더 차분한 색으로 바꿔 주세요", 글자가 작으면 "제목을 더 크게 해 주세요"라고 말하면 됩니다. 이 반복이 AI를 업무에 쓸 때 가장 중요한 기술입니다.
• 실패해도 부담이 없습니다. 연습용 사이트라서 망가져도 회사 업무에 영향이 없습니다. 마음껏 시도하고 다시 만들 수 있습니다.

오늘의 결과물

교육이 끝나면 여러분의 손에는 인터넷 주소 하나가 남습니다.

https://[내-프로젝트].vercel.app

이 주소를 크롬(Chrome)이나 엣지(Edge) 같은 브라우저 주소창에 입력하면 여러분이 만든 사이트가 열립니다. 휴대폰으로 열어도 됩니다. 사이트는 보기만 하는 문서가 아니라, 직접 보고 만지는 인터랙티브 사이트입니다. 스크롤하면 화면이 움직이고, 버튼을 누르면 장면이 바뀌고, 슬라이더를 움직이면 분위기가 달라집니다.

어떤 사이트를 만들지는 6장에서 고릅니다. 예를 들어 딸기 같은 과일 하나를 광고처럼 소개하는 사이트, 스크롤하면 바닷속으로 내려가는 사이트, 시간 슬라이더로 낮과 밤이 바뀌는 도시 사이트 등이 후보입니다. 완성 예시를 직접 열어 볼 수도 있으니 지금은 "이런 것을 만드는구나" 정도만 기억해 두세요.

이 사이트는 어떻게 동작하나요? (DB가 없습니다)

우리가 만드는 사이트는 가장 단순한 형태입니다. 로그인도 없고, 입력한 내용을 저장하는 서버도 없습니다.

교육 흐름

전체는 "준비 -> 만들기 -> 공개하기 -> 다듬기" 순서입니다. 처음 몇 장이 준비 단계라 조금 지루할 수 있지만, 한 번만 해 두면 끝까지 쓰는 기반입니다. 준비가 끝나면 그다음부터는 계속 재미있습니다.

중간에 막히면 10장 "막혔을 때"를 펼쳐 보세요. 자주 생기는 문제와 해결 방법을 모아 두었습니다. 마지막 11장에서는 사이트 만들기로 익힌 기술을 업무로 가져가는 방법을 다룹니다.

등장하는 5가지 도구

교육 내내 다섯 가지 이름이 계속 나옵니다. 처음에는 헷갈리는 것이 당연하니, 지금 한 번 훑어보고 이후에는 필요할 때 이 표로 돌아오세요.

이 다섯이 어떻게 이어지는지 한 줄로 보면 다음과 같습니다.

1. 내가 말로 부탁
2. Claude Code가 파일 작성
3. GitHub에 보관
4. Vercel이 공개
5. 주소로 열림

스킬은 이 흐름 중 "Claude Code가 파일 작성" 단계의 실력을 높여 주는 역할입니다.

준비물

Claude 유료 플랜이 필요합니다. 무료 플랜에서는 Claude Code를 쓸 수 없습니다.

교육 시간표 (예시, 총 2시간)

AI 사용 보안 수칙

AI는 매우 편리하지만, 한 번 입력한 정보는 내 손을 떠납니다. 아래 수칙은 이 교육뿐 아니라 앞으로 AI를 쓰는 모든 순간에 적용됩니다. 어렵지 않으니 천천히 읽어 주세요.

이 교육에서 특히 조심할 점

정보가 위 금지 목록에 해당하는지 애매하다면 넣지 않는 것이 원칙입니다. 그리고 가짜 예시 데이터로 먼저 해 보는 습관을 들이세요. 11장에서 업무에 쓸 때도 같은 원칙을 반복합니다.

이 자료 사용법

1. 프롬프트 카드는 복사해서 붙여 넣습니다

   위쪽 줄이 푸른색이고 "Claude에게 이렇게 말하세요"라고 적힌 상자가 Claude에게 하는 말입니다. AI에게 하는 부탁의 글을 프롬프트라고 부르기 때문에, 이 자료에서는 이 상자를 "프롬프트 카드"라고 부릅니다. 상자 오른쪽 위의 복사 버튼을 누르면 버튼이 "복사됨"으로 잠깐 바뀝니다. 그다음 Claude의 입력창을 클릭하고 Ctrl+V(Mac은 Cmd+V)로 붙여 넣은 뒤 Enter를 누르면 됩니다. 아래 상자로 한번 연습해 보세요.

   안녕하세요. 저는 코딩 경험이 없는 [내 직무] 담당자입니다.
   앞으로 [내 주제]를 소개하는 웹사이트를 함께 만들 거예요.
   아래 약속을 지켜 주세요.
   1. 전문 용어는 쉬운 말로 풀어서 설명해 주세요.
   2. 무언가를 실행하기 전에, 무엇을 하려는지 한 문장으로 먼저 알려 주세요.
   3. 비밀번호나 개인정보가 필요한 단계는 제가 직접 입력할 테니, 어디에 입력하면 되는지만 알려 주세요.
   4. 한 번에 한 단계씩 진행하고, 제가 이해했는지 확인해 주세요.
   이해했다면 "준비됐습니다"라고만 답해 주세요.

   Claude에게 "나는 초보자이고 이렇게 일해 달라"고 미리 알려 두는 첫 인사입니다. 이 한 번의 부탁이 이후 대화를 훨씬 편하게 만듭니다.

   터미널(검은 화면)에 직접 입력하는 명령어는 검은 상자로 표시되며, 마찬가지로 복사 버튼이 있습니다.

2. [대괄호]는 내 내용으로 바꿉니다

   프롬프트 안에 [내 주제], [내 직무]처럼 대괄호로 묶인 부분은 내 상황에 맞게 바꿔 쓰라는 표시입니다. 예를 들어 [내 과일 이름]은 "딸기"로 바꿉니다. 이때 대괄호 기호 자체도 지우고 내용만 남기세요.

3. 체크리스트는 이 브라우저에 기억됩니다

   체크박스를 누르면 이 PC의 이 브라우저에 저장되어, 페이지를 닫았다가 다시 열어도 유지됩니다. 다른 PC나 다른 브라우저, 휴대폰과는 공유되지 않습니다. 브라우저의 사이트 데이터를 지우거나 시크릿(비공개) 창에서 열면 사라질 수 있습니다.

4. 화면이 다르면 당황하지 마세요

   앱과 웹사이트는 자주 업데이트되어서 버튼 이름이나 위치가 조금 다를 수 있습니다. 그림 설명과 글의 "무엇을 하려는 단계인가"를 기준으로 비슷한 이름의 버튼을 찾으면 됩니다. 그래도 모르겠으면 Claude에게 "지금 화면이 이런데 다음에 뭘 눌러야 하나요?"라고 물어보세요. 화면의 개인 정보는 가리고 캡처해서 보여 줘도 됩니다.

5. 막히면 10장, 용어가 낯설면 맨 아래 용어 사전

   위쪽 메뉴의 "문제 해결"을 누르면 10장 "막혔을 때"로 이동합니다. 맨 아래의 "프롬프트 모음"(부록 A)에는 이 자료의 모든 프롬프트가 한곳에 모여 있고, "용어 사전"(부록 B)에서는 낯선 단어를 찾아볼 수 있습니다. 화면이 너무 밝거나 어두우면 위쪽의 달 또는 해 모양 버튼으로 바꿀 수 있습니다.