본문으로 건너뛰기
학습 시작하기

인터랙티브 튜토리얼

친근한 어시스턴트가 안내하는 실습 중심의 단계별 튜토리얼로 vibe coding을 배워보세요. 자연어 프로그래밍을 자신의 속도에 맞춰 마스터하세요.

전체 튜토리얼 둘러보기:
Vibe Coding Guide
AI Learning Guide

"안녕하세요! 저는 vibe coding 학습을 도와드리는 가이드예요. 이 인터랙티브 튜토리얼들을 저와 함께 따라와 보세요!"

추천 튜토리얼14 Modules
전체 튜토리얼52 Tutorials
Filter:

전체 튜토리얼 둘러보기

내 수준과 관심사에 딱 맞는 튜토리얼을 찾아보세요

Showing 52 of 52 tutorials
입문
45 mins
fundamentals
5개 챕터

Vibe Coding 소개

vibe coding의 기초와 자연어를 사용해 첫 애플리케이션을 만드는 방법을 배워보세요.

진행 상황80%
80%
중급
2 hours
web
8개 챕터

웹 애플리케이션 만들기

최신 프레임워크와 모범 사례를 적용해 vibe coding으로 반응형 웹 애플리케이션을 만들어보세요.

진행 상황30%
30%
중급
1.5 hours
data
6개 챕터

데이터 관리 및 API

vibe coding 프로젝트에서 데이터를 효과적으로 다루고 외부 API를 연동하는 방법을 배워보세요.

고급
3 hours
advanced
10개 챕터

고급 프롬프트 엔지니어링

복잡한 프로젝트에 필요한 코드를 정확히 생성하도록 효과적인 프롬프트를 작성하는 기술을 마스터하세요.

중급
2.5 hours
mobile
9개 챕터

모바일 앱 개발

vibe coding 기법을 사용해 iOS와 Android용 네이티브 모바일 애플리케이션을 만들어보세요.

중급
1 hour
fundamentals
4개 챕터

디버깅 및 최적화

vibe coding으로 생성된 코드를 디버깅하고 최적화하는 효과적인 전략을 배워보세요.

입문
1 hour
web
6개 챕터

HTML 소개

명확한 단계별 안내로 HTML 기초를 배워 첫 웹 페이지를 만들어보세요.

입문
1 hour
web
5개 챕터

CSS로 서식 지정하기

이해하기 쉬운 CSS 기법으로 웹 페이지에 스타일과 색상을 더해보세요.

중급
1.5 hours
web
5개 챕터

반응형 디자인

데스크톱 컴퓨터부터 스마트폰까지 모든 기기에서 멋지게 보이는 웹사이트를 만들어보세요.

중급
2 hours
web
5개 챕터

전문가를 위한 JavaScript 기초

실용적인 비즈니스 애플리케이션과 함께 필수 JavaScript 개념을 마스터하세요.

중급
2 hours
web
6개 챕터

DOM 조작

웹 페이지를 동적으로 업데이트하여 인터랙티브한 비즈니스 애플리케이션을 만드는 방법을 배워보세요.

중급
2.5 hours
data
7개 챕터

데이터 시각화

비즈니스 데이터를 효과적으로 표현하는 전문적인 차트와 그래프를 만들어보세요.

입문
1.5 hours
games
5개 챕터

게임 코딩 기초

JavaScript로 재미있고 흥미롭게 첫 인터랙티브 게임을 만들어보세요.

입문
1.5 hours
games
6개 챕터

애니메이션 기초

게임과 웹사이트를 위한 멋진 애니메이션을 만드는 방법을 배워보세요.

중급
2 hours
games
7개 챕터

게임 메커니즘

포인트, 레벨, 파워업 같은 흥미로운 게임 메커니즘을 설계해보세요.

입문
30 mins
beginner-path
4개 챕터

Vibe Coding이란?

원하는 것을 쉬운 영어로 설명하여 소프트웨어를 만드는 방법을 알아보세요. 코딩 경험이 필요 없습니다.

입문
45 mins
beginner-path
5개 챕터

첫 웹 페이지

AI가 생성한 HTML과 CSS로 개인 프로필 페이지를 만들어보세요. 코드 출력을 읽고 수정하는 방법을 배워보세요.

입문
45 mins
beginner-path
5개 챕터

인터랙티브하게 만들기

JavaScript 프롬프트를 사용해 페이지에 버튼, 카운터, 동적 동작을 추가해보세요.

입문
60 mins
beginner-path
5개 챕터

실제 앱 만들기

페이지에서 앱으로 발전하세요. 구조화된 AI 프롬프트를 사용해 날씨 대시보드와 레시피 북을 만들어보세요.

입문
40 mins
beginner-path
5개 챕터

당신의 Vibe Coding 툴킷

전문 vibe coder들이 매일 사용하는 도구, 기법, 프롬프트 패턴을 마스터하세요.

입문
15 mins
ai-tools
4개 챕터

AI 에이전트와의 협상 기술

AI에게 결과를 애원하는 것을 멈추세요. 역할 설정, 제약 조건, 컨텍스트, 반복이라는 4가지 전략적 협상 전술을 배워 AI가 정확히 원하는 대로 움직이게 만드세요.

입문
10 mins
ai-tools
1개 챕터

빠른 팁: 더 빠른 에이전트 작업을 위해 Claude Sonnet 4.6으로 업그레이드하기

Claude Sonnet 4.6은 더 똑똑한 에이전트 검색 기능을 제공합니다 — 더 적은 토큰, 더 낮은 지연 시간, 동일한 품질. 기존 프로젝트를 10분 안에 업그레이드하는 방법을 배워보세요.

입문
30 mins
design
4개 챕터

픽셀에서 제품으로

Figma와 코드 사이의 간극을 메우세요. 디자인 시스템이 어떻게 CSS 컴포넌트로 변환되는지 배워보세요.

입문
35 mins
design
3개 챕터

C 없는 CSS

프로그래밍 언어를 배우지 않고도 깔끔하고 유지보수하기 쉬운 스타일을 작성하세요. 마진이 아닌 실제 레이아웃을 만들어보세요.

중급
30 mins
design
4개 챕터

반응형의 현실

미디어 쿼리와 유동형 디자인을 마스터하세요. 한 번 만들어 어디서나 작동하게 하세요.

중급
30 mins
design
4개 챕터

애니메이션 및 인터랙션

CSS 애니메이션, 트랜지션, 마이크로 인터랙션으로 디자인에 생명을 불어넣으세요.

중급
25 mins
design
4개 챕터

포트폴리오 출시하기

첫 라이브 프로젝트를 배포하세요. 호스팅, SEO 기초, 그리고 자신의 작업을 이야기하는 방법을 배워보세요.

입문
30 mins
startup
4개 챕터

0원 MVP

무료 도구로 첫 앱을 만들어보세요. 한 푼도 들이지 않고 디자인하고, 코딩하고, 호스팅하세요.

입문
30 mins
startup
3개 챕터

아이디어에서 앱으로

문제 정의를 작동하는 소프트웨어로 바꿔보세요. 실행하는 사람과 고민만 하는 사람을 가르는 사고방식.

중급
35 mins
startup
4개 챕터

10분 만에 결제 추가하기

결제 시스템을 구축하지 않고도 신용카드를 받아보세요. 몇 시간 만에 첫 매출을 올릴 수 있습니다.

중급
35 mins
startup
4개 챕터

사용자, 데이터, 대시보드

누가 왜 당신의 앱을 사용하는지 파악하세요. 퍼널, 리텐션, 매출을 추적하세요.

중급
30 mins
startup
4개 챕터

출시일 플레이북

출시 전 마무리부터 출시 후 모멘텀까지. 최고의 창업가들이 출시 주말을 운영하는 방법.

입문
35 mins
product
4개 챕터

PRD에서 프로토타입으로

AI로 PRD를 클릭 가능한 프로토타입으로 바꿔보세요. 명세가 아닌 증거를 전달하세요.

중급
30 mins
product
3개 챕터

빠르게 만드는 내부 도구

개발을 기다리지 않고 명세서만으로 관리자 대시보드와 내부 도구를 만들어보세요.

중급
35 mins
product
4개 챕터

PM을 위한 데이터 시각화

CSV와 API 데이터로 실시간 대시보드를 만들어보세요. 스프레드시트가 아닌 인사이트를 전달하세요.

중급
30 mins
product
3개 챕터

워크플로우 자동화하기

Slack 봇, 이메일 자동화, cron 작업을 만들어보세요. 전략에 집중할 시간을 확보하세요.

중급
25 mins
product
3개 챕터

이해관계자에게 전달하기

실제 피드백을 받으며 배포하고, 공유하고, 개선하세요. 20장짜리 슬라이드를 작동하는 데모로 대체하세요.

입문
30 mins
marketing
4개 챕터

몇 분 만에 만드는 랜딩 페이지

티켓을 등록하지 않고도 전환에 최적화된 랜딩 페이지를 만들고 배포하세요.

입문
25 mins
marketing
3개 챕터

이메일 자동화 빌더

템플릿을 활용한 드립 이메일 시퀀스를 만들어보세요. 코드 없이 고객 육성을 자동화하세요.

중급
35 mins
marketing
4개 챕터

SEO 콘텐츠 엔진

메타 태그와 사이트맵이 자동 생성되는 블로그를 만들어보세요. SEO 팀 없이도 상위 노출하세요.

중급
30 mins
marketing
3개 챕터

애널리틱스 대시보드

맞춤형 마케팅 지표 대시보드를 만들어보세요. 데이터 시각화를 직접 소유하세요.

중급
35 mins
marketing
4개 챕터

풀 퍼널

랜딩 페이지부터 이메일, 애널리틱스까지 처음부터 끝까지 연결하세요. 완전한 마케팅 자동화.

입문
35 mins
data-science
4개 챕터

CSV에서 웹 앱으로

CSV를 업로드하여 인터랙티브 데이터 탐색기를 생성하세요. SQL을 넘어서세요.

중급
30 mins
data-science
3개 챕터

API 기반 대시보드

실제 API에 연결하여 실시간 차트를 만들어보세요. 실시간 데이터, 실시간 인사이트.

중급
35 mins
data-science
4개 챕터

인터랙티브 시각화

AI로 D3/Recharts 시각화를 만들어보세요. 데이터가 이야기를 들려주게 하세요.

중급
25 mins
data-science
3개 챕터

공유 가능한 보고서

데이터에서 PDF와 HTML 보고서를 생성하세요. 주간 보고를 자동화하세요.

중급
25 mins
data-science
3개 챕터

데이터 앱 배포하기

외부에 공개되는 데이터 대시보드를 배포하세요. localhost에서 전 세계로.

입문
30 mins
education
4개 챕터

첫 인터랙티브 수업

즉시 채점되는 퀴즈 앱을 만들어보세요. 학생들이 정말 좋아할 것을 만드세요.

입문
25 mins
education
3개 챕터

콘텐츠 게임화하기

간단한 교육용 게임을 만들어보세요. 학습을 지루하지 않고 중독성 있게 만드세요.

중급
35 mins
education
4개 챕터

학생 진도 추적기

진행 상황 추적 기능이 있는 학급 대시보드를 만들어보세요. 각 학생이 어디에 있는지 파악하세요.

중급
30 mins
education
3개 챕터

적응하는 콘텐츠

학생 수준에 맞춰 조정되는 적응형 콘텐츠를 만들어보세요. 대규모 맞춤형 학습.

중급
25 mins
education
3개 챕터

학교와 공유하기

학생들에게 배포하고 공유하세요. 당신의 컴퓨터에서 그들의 브라우저로.

STRUCTURED ROADMAPS

학습 경로

체계적인 학습 경로를 따라 vibe coding을 입문부터 전문가 수준까지 마스터해 보세요

초급 경로

기초와 기본 개념으로 vibe coding 여정을 시작하세요

1
Vibe Coding 소개
2
간단한 애플리케이션 만들기
3
프롬프트 기초 이해하기
4
첫 완성 프로젝트

중급 경로

실력을 한층 키우고 더 복잡한 프로젝트에 자신 있게 도전하세요

1
고급 웹 애플리케이션
2
데이터 관리 및 API
3
모바일 개발 기초
4
디버깅 및 최적화

고급 경로

정교한 기법을 마스터하고 엔터프라이즈급 애플리케이션을 만들어보세요

1
고급 프롬프트 엔지니어링
2
엔터프라이즈 아키텍처
3
AI 모델 통합
4
성능 및 확장
PERSONA HUB

대상별 학습 경로

당신의 배경과 목표에 가장 잘 맞는 학습 경로를 선택하세요. 각 경로는 가장 관련성 높은 경험을 제공하도록 맞춤 설계되었습니다.

시니어 (55세 이상)

명확한 단계별 안내와 실용적인 예제로 자신의 속도에 맞춰 배워보세요.

1HTML 소개
2CSS로 서식 지정하기
3반응형 디자인
4인터랙티브 웹 페이지

직무 전환자

실무 애플리케이션과 업계 관련 예제로 빠르게 실력을 키워보세요.

1JavaScript 기초
2DOM 조작
3데이터 시각화
4비즈니스 애플리케이션

청소년 (13-25세)

즉각적인 피드백이 있는 재미있고 인터랙티브한 게임 기반 튜토리얼로 배워보세요.

1게임 코딩 기초
2애니메이션 기초
3게임 메커니즘
4멀티 레벨 게임

디자이너

코딩 경험 없이도 디자인을 실제로 작동하는 웹사이트와 앱으로 바꿔보세요.

1랜딩 페이지 프롬프트하기
2Figma에서 코드로
3반응형 레이아웃
4포트폴리오 배포하기

창업가

주말 동안 MVP를 만들고 출시해보세요 — 아이디어에서 유료 고객까지.

1대기자 명단 페이지 만들기
2사용자 인증 및 대시보드
3결제 연동
4출시하고 개선하기

프로덕트 매니저

기능을 직접 프로토타이핑하고 엔지니어와 막힘없이 소통해보세요.

1PRD에서 프로토타입으로
2내부 도구
3A/B 테스트 대시보드
4이해관계자 데모

마케터

개발팀에 부탁하고 싶던 도구를 직접 만들어보세요 — 랜딩 페이지, 대시보드, 자동화까지.

1빠르게 만드는 랜딩 페이지
2이메일 템플릿
3SEO 블로그 빌더
4마케팅 대시보드

데이터 분석가

SQL을 넘어 — 이해관계자가 실제로 사용할 인터랙티브 대시보드를 만들어보세요.

1CSV에서 웹 앱으로
2실시간 API 차트
3D3 시각화
4대시보드 배포하기

교육자

학생들이 좋아할 인터랙티브 수업과 교육 도구를 만들어보세요.

1인터랙티브 수업
2퀴즈 앱
3진행 상황 추적
4맞춤형 콘텐츠
VISUAL LEARNING

애니메이션 카툰 튜토리얼

친근한 가이드가 등장하는 흥미로운 애니메이션 만화 에피소드로 배워보세요. 시각적 학습자에게 안성맞춤이며 복잡한 개념을 재미있게 이해할 수 있습니다.

Animated Episodes Available

학습을 시작할 준비가 됐나요?

오늘 바로 vibe coding 여정을 시작하세요. 인터랙티브 튜토리얼이 초급 개념부터 고급 기법까지 모든 단계를 안내해 드립니다.