이 소개 영상도 HTML로 만들었습니다. 8장에서 같은 방법으로 직접 만들어 봅니다.
전체 지도
목차
- 01무엇을, 왜 배우나AI를 직접 써보고, 눈에 보이는 결과물을 내 주소로 공개해 보면서 AI와 친해지는 교육입니다. 시작 전에 목표, 준비물, 그리고 꼭 지켜야 할 보안 수칙을 먼저 확인합니다.
- 02Claude 앱과 Claude Code 설치Claude 데스크톱 앱을 설치하고 로그인한 뒤, 앱 안의 Claude에게 말로 부탁해 터미널용 Claude Code까지 설치합니다. 마지막에는 Claude가 내 PC에 실제로 파일을 만드는 모습을 눈으로 확인합니다.
- 03GitHub 가입과 연결내가 만든 파일을 인터넷에 보관하고, 다음 장에서 Vercel이 그 파일을 가져갈 수 있게 해 주는 GitHub 계정을 만듭니다. 그리고 내 PC의 Claude Code가 내 GitHub에 파일을 올릴 수 있도록 연결합니다.
- 04Vercel 가입과 첫 배포GitHub에 올려 둔 파일을 Vercel이 가져가 인터넷 주소로 열어 줍니다. 이 장을 마치면 https://[프로젝트이름].vercel.app 모양의 내 사이트 주소가 생기고, 휴대폰에서도 그 주소가 열립니다.
- 05디자인, 모션 스킬 설치Claude에게 "디자인 전문가의 작업 설명서"와 "영상 제작 도구"를 붙입니다. 설치도 Claude에게 말로 부탁하면 한 번에 끝납니다.
- 06주제 고르기: 10개 후보무엇을 만들지가 정해져야 Claude에게 구체적으로 부탁할 수 있습니다. 데이터베이스 없이 직접 보고 만지는 사이트 10가지 중에서, 내가 가장 오래 이야기할 수 있는 소재를 하나 고릅니다.
- 07프롬프트로 만들기이 교육의 핵심 실습입니다. Claude에게 말로 부탁해서 화면을 만들고, 움직이게 하고, 클릭과 스크롤에 반응하게 만든 뒤 배포하고 다듬습니다. 코드는 한 줄도 직접 쓰지 않습니다.
- 08hyperframes로 모션 영상 만들기말로 부탁하면 HTML로 장면이 만들어지고, 그것이 MP4 영상 파일이 됩니다. 이 사이트 맨 위의 소개 영상도 같은 방법으로 만들었고, 이 장에서 여러분의 영상을 만들어 사이트에 넣습니다.
- 09완성 기준과 발표만들었다고 끝이 아닙니다. 네 가지 기준으로 스스로 점검하고, 한 번 다듬어 다시 배포하고, 3분 발표로 동료에게 보여 줍니다. 여기까지 마치면 "AI에게 말로 부탁해서 내 사이트를 만들고 공개했다"는 경험이 완성됩니다.
- 10막혔을 때막히는 것은 실패가 아니라 누구나 거치는 과정입니다. 에러 메시지는 "무엇이 빠졌는지" 적어 둔 쪽지이니, 증상별로 찾아 따라 하거나 Claude에게 그대로 물어보세요.
- 11업무로 가져가기오늘 사이트를 만들며 익힌 "말로 부탁하고, 결과를 확인하고, 구체적으로 고쳐 달라고 하는" 기술을 실제 업무에 옮겨 봅니다. 업무 활용 예시 7가지와 바로 복사해 쓰는 프롬프트, 지켜야 할 보안 수칙을 함께 담았습니다.
- A프롬프트 모음
- B용어 사전교육 중에 처음 만나는 낯선 단어를 작업 흐름 순서로 모았습니다. 막히는 단어가 나오면 이 장에서 찾아 쉬운 말로 확인하세요.