앱 공장(Lovable, Replit, Genspark)이면 미리보기만 보면 됩니다. 편집기·에이전트면 빈 폴더를 엽니다.
Claude, Codex, Cursor, Antigravity, Replit, Genspark, Lovable은
같은 말이라도 결과 형태가 다릅니다.
자세한 차이는 툴 기초 공부에 모아 두었습니다.
첫 작품은 작을수록 성공합니다. 쇼핑몰, 로그인은 나중입니다.
오늘 할 일 4단계
작업 위치 정하기
앱 공장이면 새 프로젝트를 만들고, 편집기·에이전트면 빈 폴더를 엽니다.
코드를 쓰게 하기
Agent / 코딩 모드가 있으면 그걸 고릅니다. 없으면 그냥 채팅에 붙여넣어도 됩니다.
아래 첫 프롬프트를 그대로 넣기
파일이 생기거나, 코드 전체가 나올 때까지 기다립니다.
브라우저에서 보고, 말로 고치기 index.html을 엽니다. 이상하면
“버튼을 더 크게 해줘”, “숫자만 입력되게 해줘”처럼 말합니다.
복붙하면 되는 첫 프롬프트
그대로 넣고, 괄호 안만 자기 아이디어로 바꿔도 됩니다.
1) 첫 앱 만들기
코딩을 모르는 초보가 바로 쓸 수 있게 해주세요.
폴더에 바로 쓸 수 있으면 파일을 만들고, 웹 채팅이면 index.html 전체 코드를 주세요.
만들고 싶은 것: 오늘 쓴 돈을 더하는 간단한 계산기.
요구사항:
- index.html 하나만 만들어주세요.
- 항목 이름과 금액을 입력하고 추가 버튼을 누르면 목록과 합계가 보이게 해주세요.
- 디자인은 모바일에서도 읽기 쉽게, 큰 글씨와 큰 버튼으로 해주세요.
- 설명은 짧게, 코드부터 작성해주세요.
- 다 만들면 이 파일을 브라우저에서 어떻게 여는지 한 줄로 알려주세요.
2) 에러가 났을 때
에러가 났습니다. 코드를 처음부터 다시 짜지 말고, 이 에러만 고치세요.
에러 메시지:
(여기에 빨간 글씨를 그대로 붙여넣기)
지금 내가 한 행동:
(예: 추가 버튼을 눌렀다)
고친 뒤, 무엇이 잘못됐는지 초보도 이해하게 두 줄로 설명해주세요.
3) 코드를 이해하고 싶을 때
방금 만든 코드를 초등학생도 이해하게 설명해주세요.
함수마다 "이 부분은 무엇을 하나요?"를 한 줄로 달아주세요.
지금 고치지 말고, 설명만 해주세요.
이렇게 말하면 잘 되고, 이렇게 말하면 망합니다
잘 되는 말
버튼을 화면 아래로 옮겨줘
합계가 0원일 때는 “아직 없음”이라고 보여줘
이 에러만 고치고, 다른 건 건드리지 마
잘 안 되는 말
그냥 멋진 사이트 만들어줘
로그인, 결제, 회원까지 한 번에
에러는 안 보여주고 처음부터 다시
초보가 꼭 하는 실수
한 번에 너무 많이 시키기. 한 화면, 한 기능이 성공입니다.
에러를 숨기기. 빨간 글씨를 그대로 붙여넣는 사람이 더 빨리 배웁니다.
결과만 보고 끝. “이게 뭐 하는 코드야?”라고 한 번 물어보면 다음부터 시키는 말이 정확해집니다.
툴 종류를 무시하기. Lovable에서 폴더를 찾거나, Codex에서 즉시 배포 주소를 기다리면 헤맵니다.