바이브코딩 학습 플랫폼
프론트엔드,제대로 배우자.
타겟 UI를 보고 코드로 똑같이 만들면, AI가 실시간으로 채점합니다.
바이브코딩 시대에도 흔들리지 않는 기본기를 만들어보세요.
60+ 챌린지
4 프레임워크
AI 실시간 채점
Features
왜 Compit인가요?
단순 이론이 아닌, 실전 코딩으로 실력을 키우는 가장 효과적인 방법
🎯
타겟 UI를 보고 코딩
완성된 디자인을 보고 똑같이 만들어보세요. 실전과 동일한 환경에서 연습합니다.
🤖
AI 실시간 채점
AI가 코드를 분석하고 레이아웃, 스타일, 완성도를 100점 만점으로 채점합니다.
🚀
4가지 프레임워크
HTML/CSS, React, Vue, TypeScript로 같은 챌린지를 다양한 방식으로 풀어보세요.
🎵
바이브코딩 가이드
AI 도구 추천, 프롬프트 작성법, 배포까지. 바이브코딩의 A to Z를 배웁니다.
How it works
어떻게 진행되나요?
01
챌린지 선택
난이도와 프레임워크를 골라 시작하세요.
02
코드 작성
타겟 UI를 보며 에디터에서 코드를 작성합니다.
03
AI 채점
AI가 시각적 유사도를 분석하고 피드백을 줍니다.
04
성장 확인
XP를 얻고 티어를 올리며 실력을 쌓아갑니다.
Frameworks
다양한 프레임워크를 경험하세요
하나의 챌린지를 여러 방식으로 풀어보며 프레임워크별 차이를 체감하세요.
🌐
HTML/CSS
웹의 기본, 시맨틱 마크업과 스타일링
30 챌린지
⚛️
React
컴포넌트 기반 UI, JSX와 상태관리
10 챌린지
💚
Vue.js
직관적인 템플릿 문법과 반응형 데이터
10 챌린지
🔷
TypeScript
타입 안전성으로 견고한 코드 작성
10 챌린지
0+
코딩 챌린지
0
프레임워크
0
보안 레슨
0점
AI 채점 만점
Challenges
챌린지에 도전하세요
CSSpaddingborder-radius
도전하기 →Lv.1HTML#001
기본 버튼
CSSborder-radius
도전하기 →Lv.1HTML#002
둥근 알약 버튼
CSSgradientbox-shadow
도전하기 →Lv.2HTML#003
그라데이션 버튼
CSSborder
도전하기 →Lv.1HTML#004
아웃라인 버튼
CSSflexboxgap
도전하기 →Lv.2HTML#005
아이콘 버튼
CSScolor
도전하기 →Lv.1HTML#006
소프트 버튼
CSSbox-shadow
도전하기 →Lv.2HTML#007
그림자 버튼
CSSbox-shadowpadding
도전하기 →Lv.1HTML#008
기본 카드
HTMLCSSFlexbox
도전하기 →Lv.2HTML#009
프로필 카드
HTMLCSSLayout
도전하기 →Lv.2HTML#010
상품 카드
HTMLCSSLayout
도전하기 →Lv.3HTML#011
가격표 카드
CSSFlexbox
도전하기 →Lv.2HTML#012
알림 카드
CSSinputfocus
도전하기 →Lv.1HTML#013
기본 입력 필드
HTMLCSSForm
도전하기 →Lv.3HTML#014
로그인 폼
CSSpositionicon
도전하기 →Lv.2HTML#015
검색바
HTMLCSSForm
도전하기 →Lv.3HTML#016
회원가입 폼
CSSFlexbox
도전하기 →Lv.2HTML#017
기본 네비게이션 바
CSSactive state
도전하기 →Lv.2HTML#018
탭 네비게이션
CSSFlexbox
도전하기 →Lv.1HTML#019
브레드크럼
CSSFlexboxLayout
도전하기 →Lv.2HTML#020
2단 레이아웃
CSSGrid
도전하기 →Lv.2HTML#021
3단 그리드
CSSFlexboxcentering
도전하기 →Lv.1HTML#022
센터 정렬 레이아웃
CSScolor
도전하기 →Lv.1HTML#023
뱃지
CSSbox-shadowposition
도전하기 →Lv.2HTML#024
토스트 알림
CSScheckbox::after
도전하기 →Lv.3HTML#025
토글 스위치
CSSnegative marginz-index
도전하기 →Lv.2HTML#026
아바타 그룹
CSSwidthborder-radius
도전하기 →Lv.1HTML#027
프로그레스 바
CSStypography
도전하기 →Lv.2HTML#028
뉴스 블록
CSSborder-left
도전하기 →Lv.1HTML#029
인용문
CSSfont-sizetext-align
도전하기 →Lv.1HTML#030
통계 숫자
ReactuseStateonClick
도전하기 →Lv.1React#031
카운터 컴포넌트
ReactuseState조건부 렌더링
도전하기 →Lv.1React#032
토글 버튼
ReactuseStatemap
도전하기 →Lv.2React#033
투두 리스트
ReactuseState조건부 스타일링
도전하기 →Lv.2React#034
프로필 카드
ReactuseState조건부 렌더링
도전하기 →Lv.2React#035
아코디언 메뉴
ReactuseStatemap
도전하기 →Lv.2React#036
탭 컴포넌트
ReactuseStateonMouseEnter
도전하기 →Lv.2React#037
별점 평가
ReactuseStatefilter
도전하기 →Lv.3React#038
검색 필터
ReactuseStateuseEffect
도전하기 →Lv.3React#039
타이머
ReactuseStateuseEffect
도전하기 →Lv.3React#040
알림 토스트
Vuerefv-on
도전하기 →Lv.1Vue#041
카운터 컴포넌트
Vuerefv-bind
도전하기 →Lv.1Vue#042
토글 버튼
Vuereactivev-for
도전하기 →Lv.2Vue#043
투두 리스트
Vuerefv-bind:style
도전하기 →Lv.2Vue#044
색상 선택기
Vuerefv-if
도전하기 →Lv.2Vue#045
아코디언 메뉴
Vuerefv-for
도전하기 →Lv.2Vue#046
탭 컴포넌트
Vuerefv-for
도전하기 →Lv.2Vue#047
별점 평가
Vuerefcomputed
도전하기 →Lv.3Vue#048
검색 필터
VuerefsetInterval
도전하기 →Lv.3Vue#049
타이머
Vueref:style
도전하기 →Lv.2Vue#050
프로그레스 바
TypeScriptinterfaceDOM
도전하기 →Lv.1TS#051
타입 프로필 카드
TypeScript유니온 타입이벤트
도전하기 →Lv.2TS#052
타입 계산기
TypeScriptinterface배열 메서드
도전하기 →Lv.2TS#053
타입 투두 리스트
TypeScript타입 가드DOM
도전하기 →Lv.2TS#054
폼 검증기
TypeScriptGenericDOM
도전하기 →Lv.3TS#055
제네릭 리스트 렌더러
TypeScriptenumswitch
도전하기 →Lv.2TS#056
Enum 상태 배지
TypeScriptinterfaceextends
도전하기 →Lv.2TS#057
인터페이스 상속 카드
TypeScriptPartialRequired
도전하기 →Lv.3TS#058
유틸리티 타입 설정
TypeScriptMapGeneric
도전하기 →Lv.3TS#059
맵 데이터 시각화
TypeScript유니온 타입타입 가드
도전하기 →Lv.3TS#060