AI로 React 앱 개발하기
앱을 설명하면 Supacode가 React로 작성해요. 컴포넌트, 상태, 스타일 모두 읽고 수정할 수 있는 코드예요. 실시간 미리보기로 실행되고, 모든 변경은 버전으로 저장되며, 코드를 내려받거나 GitHub에 푸시할 수 있어요.
이 프롬프트가 입력된 상태로 작성 화면이 열려요. 만들기 전에 자유롭게 수정할 수 있고, 실행 전에 필요한 크레딧이 표시돼요.
이렇게 만들어요
앱 설명하기
무엇을 하는 앱이고 어떻게 쓰는지 설명하세요. 형식에서 React를 고르거나 자동에 맡기세요.
기능 쌓아 가기
기능을 하나씩 요청하세요. 파일을 직접 바꾸고 싶을 때는 언제든 코드 편집기를 열 수 있어요.
게시하거나 내보내기
게시해서 공개 링크를 만들거나 zip으로 내려받을 수 있고, GitHub 동기화가 포함된 요금제에서는 GitHub에 푸시할 수 있어요.
요청할 수 있는 것
- 읽기 쉬운 React 컴포넌트
- 인터랙티브한 상태와 폼
- 반응형 스타일
- 변경할 때마다 실시간 미리보기
- 복원할 수 있는 버전 기록
프롬프트 예시: React 앱: 프로젝트별 할 일 목록으로 마감일, 드래그 앤 드롭 정렬, 오늘·이번 주 필터가 있고 데이터는 브라우저에 저장되게 해 주세요.
갤러리 예시
모두 보기
0 0템플릿웹 앱
Laneway — Team boards
@Supacode · React
0 0템플릿웹 앱
Parley — Team messenger
@Supacode · React
0 0템플릿동네 가게·서비스
Rapid Rooter Plumbing
@Supacode · React
0 2템플릿대시보드·도구
Pennywise — Budget tracker
@Supacode · React
0 0템플릿예약·상담
Brightside Dental
@Supacode · React
0 0템플릿비영리·자선단체
Open Shelf — Community libraries
@Supacode · React
자주 묻는 질문
진짜 React 코드인가요?
네. 코드 편집기에서 모든 파일을 읽고 수정할 수 있고, 프로젝트를 내려받을 수도 있어요.
언제 Next.js를 골라야 하나요?
로그인, API 라우트, 서버 데이터처럼 서버 코드가 필요한 앱이라면 Next.js를 고르세요.
내 에디터에서 계속 작업할 수 있나요?
네. GitHub에 푸시하거나 zip으로 내려받아 로컬에서 이어서 작업하세요.