🌱 이 가이드가 뭐예요?

코딩 한 줄 안 해도 됩니다. Claude한테 한 문장만 던지면 진짜 작동하는 웹사이트가 나오고, 이후엔 "이거 추가해줘"만 반복하면 점점 화려해져요.

이 가이드는 그 흐름을 처음부터 끝까지 보여드립니다. 실제로 NORTH AI라는 가상 AI 컨설팅 회사 랜딩 페이지를 만든 기록이에요.

✨ 어떤 게 가능해요?

이번 한 번의 대화로 만든 것들:

• 🎈 둥둥 떠다니는 입체 공들 (마우스로 밀면 흩어짐)
• 🌫️ 흩어졌다가 다시 모이는 글자 (NORTH AI → AI Consulting → Automation 사이클)
• ⚡ CTA 박스 둘레에 흐르는 번개
• 📊 막대그래프가 0부터 채워지는 사례 그래픽
• 🧠 회전하는 AI 두뇌 영상에서 3개의 라인이 뻗어 나오는 서비스 다이어그램
• 🎭 3D로 기울어진 단어들이 hover하면 다음 단어로 부드럽게 슬라이드
• 🔄 가로로 끝없이 흐르는 키워드 띠
• 🔢 숫자가 0부터 카운팅되는 통계

전부 한 파일에 들어 있고, 친구한테 파일 하나 보내면 바로 열어볼 수 있어요.

🧰 시작 전에 필요한 것

딱 한 가지만 있으면 됩니다.

Claude Code 데스크탑 앱

npm install -g @anthropic-ai/claude-code