추천 튜토리얼
Vibe Coding 소개
vibe coding의 기초와 자연어를 사용해 첫 애플리케이션을 만드는 방법을 배워보세요.
고급 프롬프트 엔지니어링
복잡한 프로젝트에 필요한 코드를 정확히 생성하도록 효과적인 프롬프트를 작성하는 기술을 마스터하세요.
HTML 소개
명확한 단계별 안내로 HTML 기초를 배워 첫 웹 페이지를 만들어보세요.
전문가를 위한 JavaScript 기초
실용적인 비즈니스 애플리케이션과 함께 필수 JavaScript 개념을 마스터하세요.
게임 코딩 기초
JavaScript로 재미있고 흥미롭게 첫 인터랙티브 게임을 만들어보세요.
Vibe Coding이란?
원하는 것을 쉬운 영어로 설명하여 소프트웨어를 만드는 방법을 알아보세요. 코딩 경험이 필요 없습니다.
AI 에이전트와의 협상 기술
AI에게 결과를 애원하는 것을 멈추세요. 역할 설정, 제약 조건, 컨텍스트, 반복이라는 4가지 전략적 협상 전술을 배워 AI가 정확히 원하는 대로 움직이게 만드세요.
빠른 팁: 더 빠른 에이전트 작업을 위해 Claude Sonnet 4.6으로 업그레이드하기
Claude Sonnet 4.6은 더 똑똑한 에이전트 검색 기능을 제공합니다 — 더 적은 토큰, 더 낮은 지연 시간, 동일한 품질. 기존 프로젝트를 10분 안에 업그레이드하는 방법을 배워보세요.
픽셀에서 제품으로
Figma와 코드 사이의 간극을 메우세요. 디자인 시스템이 어떻게 CSS 컴포넌트로 변환되는지 배워보세요.
0원 MVP
무료 도구로 첫 앱을 만들어보세요. 한 푼도 들이지 않고 디자인하고, 코딩하고, 호스팅하세요.
PRD에서 프로토타입으로
AI로 PRD를 클릭 가능한 프로토타입으로 바꿔보세요. 명세가 아닌 증거를 전달하세요.
몇 분 만에 만드는 랜딩 페이지
티켓을 등록하지 않고도 전환에 최적화된 랜딩 페이지를 만들고 배포하세요.
CSV에서 웹 앱으로
CSV를 업로드하여 인터랙티브 데이터 탐색기를 생성하세요. SQL을 넘어서세요.
첫 인터랙티브 수업
즉시 채점되는 퀴즈 앱을 만들어보세요. 학생들이 정말 좋아할 것을 만드세요.
전체 튜토리얼 둘러보기
내 수준과 관심사에 딱 맞는 튜토리얼을 찾아보세요
Vibe Coding 소개
vibe coding의 기초와 자연어를 사용해 첫 애플리케이션을 만드는 방법을 배워보세요.
웹 애플리케이션 만들기
최신 프레임워크와 모범 사례를 적용해 vibe coding으로 반응형 웹 애플리케이션을 만들어보세요.
데이터 관리 및 API
vibe coding 프로젝트에서 데이터를 효과적으로 다루고 외부 API를 연동하는 방법을 배워보세요.
고급 프롬프트 엔지니어링
복잡한 프로젝트에 필요한 코드를 정확히 생성하도록 효과적인 프롬프트를 작성하는 기술을 마스터하세요.
모바일 앱 개발
vibe coding 기법을 사용해 iOS와 Android용 네이티브 모바일 애플리케이션을 만들어보세요.
디버깅 및 최적화
vibe coding으로 생성된 코드를 디버깅하고 최적화하는 효과적인 전략을 배워보세요.
HTML 소개
명확한 단계별 안내로 HTML 기초를 배워 첫 웹 페이지를 만들어보세요.
CSS로 서식 지정하기
이해하기 쉬운 CSS 기법으로 웹 페이지에 스타일과 색상을 더해보세요.
반응형 디자인
데스크톱 컴퓨터부터 스마트폰까지 모든 기기에서 멋지게 보이는 웹사이트를 만들어보세요.
전문가를 위한 JavaScript 기초
실용적인 비즈니스 애플리케이션과 함께 필수 JavaScript 개념을 마스터하세요.
DOM 조작
웹 페이지를 동적으로 업데이트하여 인터랙티브한 비즈니스 애플리케이션을 만드는 방법을 배워보세요.
데이터 시각화
비즈니스 데이터를 효과적으로 표현하는 전문적인 차트와 그래프를 만들어보세요.
게임 코딩 기초
JavaScript로 재미있고 흥미롭게 첫 인터랙티브 게임을 만들어보세요.
애니메이션 기초
게임과 웹사이트를 위한 멋진 애니메이션을 만드는 방법을 배워보세요.
게임 메커니즘
포인트, 레벨, 파워업 같은 흥미로운 게임 메커니즘을 설계해보세요.
Vibe Coding이란?
원하는 것을 쉬운 영어로 설명하여 소프트웨어를 만드는 방법을 알아보세요. 코딩 경험이 필요 없습니다.
첫 웹 페이지
AI가 생성한 HTML과 CSS로 개인 프로필 페이지를 만들어보세요. 코드 출력을 읽고 수정하는 방법을 배워보세요.
인터랙티브하게 만들기
JavaScript 프롬프트를 사용해 페이지에 버튼, 카운터, 동적 동작을 추가해보세요.
실제 앱 만들기
페이지에서 앱으로 발전하세요. 구조화된 AI 프롬프트를 사용해 날씨 대시보드와 레시피 북을 만들어보세요.
당신의 Vibe Coding 툴킷
전문 vibe coder들이 매일 사용하는 도구, 기법, 프롬프트 패턴을 마스터하세요.
AI 에이전트와의 협상 기술
AI에게 결과를 애원하는 것을 멈추세요. 역할 설정, 제약 조건, 컨텍스트, 반복이라는 4가지 전략적 협상 전술을 배워 AI가 정확히 원하는 대로 움직이게 만드세요.
빠른 팁: 더 빠른 에이전트 작업을 위해 Claude Sonnet 4.6으로 업그레이드하기
Claude Sonnet 4.6은 더 똑똑한 에이전트 검색 기능을 제공합니다 — 더 적은 토큰, 더 낮은 지연 시간, 동일한 품질. 기존 프로젝트를 10분 안에 업그레이드하는 방법을 배워보세요.
픽셀에서 제품으로
Figma와 코드 사이의 간극을 메우세요. 디자인 시스템이 어떻게 CSS 컴포넌트로 변환되는지 배워보세요.
C 없는 CSS
프로그래밍 언어를 배우지 않고도 깔끔하고 유지보수하기 쉬운 스타일을 작성하세요. 마진이 아닌 실제 레이아웃을 만들어보세요.
반응형의 현실
미디어 쿼리와 유동형 디자인을 마스터하세요. 한 번 만들어 어디서나 작동하게 하세요.
애니메이션 및 인터랙션
CSS 애니메이션, 트랜지션, 마이크로 인터랙션으로 디자인에 생명을 불어넣으세요.
포트폴리오 출시하기
첫 라이브 프로젝트를 배포하세요. 호스팅, SEO 기초, 그리고 자신의 작업을 이야기하는 방법을 배워보세요.
0원 MVP
무료 도구로 첫 앱을 만들어보세요. 한 푼도 들이지 않고 디자인하고, 코딩하고, 호스팅하세요.
아이디어에서 앱으로
문제 정의를 작동하는 소프트웨어로 바꿔보세요. 실행하는 사람과 고민만 하는 사람을 가르는 사고방식.
10분 만에 결제 추가하기
결제 시스템을 구축하지 않고도 신용카드를 받아보세요. 몇 시간 만에 첫 매출을 올릴 수 있습니다.
사용자, 데이터, 대시보드
누가 왜 당신의 앱을 사용하는지 파악하세요. 퍼널, 리텐션, 매출을 추적하세요.
출시일 플레이북
출시 전 마무리부터 출시 후 모멘텀까지. 최고의 창업가들이 출시 주말을 운영하는 방법.
PRD에서 프로토타입으로
AI로 PRD를 클릭 가능한 프로토타입으로 바꿔보세요. 명세가 아닌 증거를 전달하세요.
빠르게 만드는 내부 도구
개발을 기다리지 않고 명세서만으로 관리자 대시보드와 내부 도구를 만들어보세요.
PM을 위한 데이터 시각화
CSV와 API 데이터로 실시간 대시보드를 만들어보세요. 스프레드시트가 아닌 인사이트를 전달하세요.
워크플로우 자동화하기
Slack 봇, 이메일 자동화, cron 작업을 만들어보세요. 전략에 집중할 시간을 확보하세요.
이해관계자에게 전달하기
실제 피드백을 받으며 배포하고, 공유하고, 개선하세요. 20장짜리 슬라이드를 작동하는 데모로 대체하세요.
몇 분 만에 만드는 랜딩 페이지
티켓을 등록하지 않고도 전환에 최적화된 랜딩 페이지를 만들고 배포하세요.
이메일 자동화 빌더
템플릿을 활용한 드립 이메일 시퀀스를 만들어보세요. 코드 없이 고객 육성을 자동화하세요.
SEO 콘텐츠 엔진
메타 태그와 사이트맵이 자동 생성되는 블로그를 만들어보세요. SEO 팀 없이도 상위 노출하세요.
애널리틱스 대시보드
맞춤형 마케팅 지표 대시보드를 만들어보세요. 데이터 시각화를 직접 소유하세요.
풀 퍼널
랜딩 페이지부터 이메일, 애널리틱스까지 처음부터 끝까지 연결하세요. 완전한 마케팅 자동화.
CSV에서 웹 앱으로
CSV를 업로드하여 인터랙티브 데이터 탐색기를 생성하세요. SQL을 넘어서세요.
API 기반 대시보드
실제 API에 연결하여 실시간 차트를 만들어보세요. 실시간 데이터, 실시간 인사이트.
인터랙티브 시각화
AI로 D3/Recharts 시각화를 만들어보세요. 데이터가 이야기를 들려주게 하세요.
공유 가능한 보고서
데이터에서 PDF와 HTML 보고서를 생성하세요. 주간 보고를 자동화하세요.
데이터 앱 배포하기
외부에 공개되는 데이터 대시보드를 배포하세요. localhost에서 전 세계로.
첫 인터랙티브 수업
즉시 채점되는 퀴즈 앱을 만들어보세요. 학생들이 정말 좋아할 것을 만드세요.
콘텐츠 게임화하기
간단한 교육용 게임을 만들어보세요. 학습을 지루하지 않고 중독성 있게 만드세요.
학생 진도 추적기
진행 상황 추적 기능이 있는 학급 대시보드를 만들어보세요. 각 학생이 어디에 있는지 파악하세요.
적응하는 콘텐츠
학생 수준에 맞춰 조정되는 적응형 콘텐츠를 만들어보세요. 대규모 맞춤형 학습.
학교와 공유하기
학생들에게 배포하고 공유하세요. 당신의 컴퓨터에서 그들의 브라우저로.
학습 경로
체계적인 학습 경로를 따라 vibe coding을 입문부터 전문가 수준까지 마스터해 보세요
초급 경로
기초와 기본 개념으로 vibe coding 여정을 시작하세요
- 1Vibe Coding 소개
- 2간단한 애플리케이션 만들기
- 3프롬프트 기초 이해하기
- 4첫 완성 프로젝트
중급 경로
실력을 한층 키우고 더 복잡한 프로젝트에 자신 있게 도전하세요
- 1고급 웹 애플리케이션
- 2데이터 관리 및 API
- 3모바일 개발 기초
- 4디버깅 및 최적화
고급 경로
정교한 기법을 마스터하고 엔터프라이즈급 애플리케이션을 만들어보세요
- 1고급 프롬프트 엔지니어링
- 2엔터프라이즈 아키텍처
- 3AI 모델 통합
- 4성능 및 확장
대상별 학습 경로
당신의 배경과 목표에 가장 잘 맞는 학습 경로를 선택하세요. 각 경로는 가장 관련성 높은 경험을 제공하도록 맞춤 설계되었습니다.
애니메이션 카툰 튜토리얼
친근한 가이드가 등장하는 흥미로운 애니메이션 만화 에피소드로 배워보세요. 시각적 학습자에게 안성맞춤이며 복잡한 개념을 재미있게 이해할 수 있습니다.
