지난 장에서 Lovable을 다뤘다면, 이번 장에서는 조금 다른 느낌의 도구를 만납니다. Lovable이 "앱을 말로 설명하면 예쁜 화면과 기능을 빠르게 만들어주는 앱 빌더"에 가깝다면, Replit은 "브라우저 안에 들어 있는 작은 개발실"에 가깝습니다.
처음 Replit을 열면 낯선 단어가 보일 수 있습니다. 파일, 콘솔, 패키지, 배포, 터미널 같은 말이 등장합니다. 개발 경험이 없는 사람에게는 순간적으로 겁이 날 수 있습니다. 하지만 이 장에서 Replit을 개발자처럼 깊게 쓰려는 것은 아닙니다. 우리의 목표는 단순합니다. 설치 없이 브라우저에서 앱을 만들고, 실행해보고, 링크로 공유하는 경험을 해보는 것입니다.
Replit Agent의 가장 큰 장점은 이 흐름이 한곳에 모여 있다는 점입니다. 아이디어를 설명하면 Agent가 먼저 구현 계획을 제안하고, 필요한 파일을 만들고, 실행 가능한 형태로 구성한 뒤, 미리보기와 배포까지 이어갈 수 있습니다. Replit 공식 튜토리얼에서도 바이브 코딩을 "프롬프트를 쓰고, 결과를 검토하고, 다시 다듬는 반복 과정"으로 설명하며, 아이디어에서 공개된 앱까지 가는 흐름을 핵심 학습 경로로 다룹니다.1
Replit은 앱 빌더이면서 개발 환경에 가깝다
Replit을 이해할 때 가장 중요한 점은 "Replit Agent도 초보자가 쓸 수 있지만, Lovable과 완전히 같은 종류의 도구는 아니다"라는 사실입니다.
Lovable, Bolt.new 같은 도구는 초보용 앱 빌더형 도구에 가깝습니다. 화면을 만들고, 기능을 붙이고, 빠르게 결과를 확인하는 경험이 비교적 단순합니다. 반면 Replit은 브라우저 기반 개발 환경입니다. 개발 환경이란 앱을 만들고 실행하는 작업실을 뜻합니다. 예전에는 내 컴퓨터에 여러 프로그램을 설치하고 설정해야 했지만, Replit은 이 작업실을 웹 브라우저 안에 마련해둔 셈입니다.
식당으로 비유하면 이렇습니다. Lovable은 "메뉴와 인테리어가 어느 정도 준비된 팝업스토어 제작 서비스"에 가깝습니다. 내가 원하는 분위기와 메뉴를 말하면 빠르게 가게 모양을 잡아줍니다. Replit은 "주방, 냉장고, 조리도구, 계산대, 간판 제작 장비까지 한 공간에 있는 공유 주방"에 가깝습니다. 처음에는 도구가 많아 보여서 낯설지만, 익숙해지면 만들고 고치고 공개하는 과정을 한곳에서 처리할 수 있습니다.
그래서 이 장의 기준은 분명합니다. Replit을 개발자형 IDE처럼 깊게 파고들지는 않습니다. 대신 Replit을 "초보자가 앱의 구조, 실행, 공유를 한 번에 경험하기 좋은 실습 환경"으로 사용합니다.
Replit Agent가 해주는 일
Replit Agent는 사용자가 자연어로 입력한 설명을 바탕으로 앱을 구성해주는 AI 에이전트입니다. 여기서 에이전트란 단순히 답변만 하는 챗봇이 아니라, 목표를 이해하고 여러 작업을 순서대로 수행하는 AI를 뜻합니다. Replit Agent는 앱에 필요한 파일을 만들고, 패키지를 설치하고, 실행 중 오류가 생기면 로그를 보고 수정하려고 시도합니다.
초보자 입장에서 특히 유용한 부분은 "계획을 먼저 보여준다"는 점입니다. 좋은 Agent는 바로 코드를 만들기 전에 무엇을 만들지 정리합니다. 예를 들어 "강의 후기 수집 앱을 만들어줘"라고 하면, Agent는 입력 폼, 후기 목록, 별점 필터, 관리자 확인 화면 같은 요소를 제안할 수 있습니다. 이때 우리는 무작정 승인하지 말고, 계획을 읽고 너무 큰 기능은 덜어내야 합니다.
Replit의 공식 가이드도 효과적인 바이브 코딩을 위해 앱을 작게 나누고, 각 단계마다 테스트하고, 문제가 생기면 체크포인트로 돌아가는 습관을 강조합니다.2 체크포인트는 말 그대로 "저장된 중간 지점"입니다. 게임에서 보스전을 하기 전에 저장해두는 것과 비슷합니다. 큰 기능을 추가하다가 앱이 망가지면, 잘 작동하던 시점으로 돌아갈 수 있습니다.
Replit Agent가 주로 도와주는 일은 다음과 같습니다.
앱의 기본 구조를 제안하고 필요한 파일을 만드는 일
앱을 실행할 수 있도록 패키지와 설정을 준비하는 일
오류 메시지를 읽고 수정 방향을 찾는 일
미리보기에서 작동을 확인하고 배포 가능한 형태로 정리하는 일
하지만 여기서 꼭 기억해야 합니다. Replit Agent가 모든 판단을 대신해주지는 않습니다. "이 기능이 정말 필요한가?", "개인정보를 저장해도 되는가?", "사용자가 이 화면을 이해할 수 있는가?"는 여전히 사람이 판단해야 합니다.
Replit에서 앱을 만드는 기본 흐름
Replit에서의 작업 흐름은 어렵게 생각할 필요가 없습니다. 처음에는 다섯 단계만 기억하면 됩니다.
첫째, 앱 아이디어를 구체적으로 설명합니다. "앱 만들어줘"가 아니라 "누가, 어떤 상황에서, 무엇을 입력하고, 어떤 결과를 보고 싶은지"를 말해야 합니다. 예를 들어 "우리 스터디원이 매주 읽은 책과 한 줄 소감을 기록하고, 주차별로 모아볼 수 있는 독서 기록 웹앱"이라고 쓰면 훨씬 좋습니다.
둘째, Agent가 제안한 구현 계획을 검토합니다. 이 단계에서 욕심을 줄이는 것이 중요합니다. Agent가 로그인, 알림, 통계, 관리자 페이지까지 제안하더라도 첫 버전에는 다 넣지 않아도 됩니다. 처음에는 입력, 저장, 목록 보기, 삭제 정도면 충분합니다.
셋째, 생성된 앱을 미리보기로 실행해봅니다. 화면이 예쁜지보다 먼저 봐야 할 것은 "핵심 기능이 작동하는가"입니다. 입력한 내용이 보이는지, 버튼이 눌리는지, 새로고침 후 데이터가 유지되는지 확인합니다.
넷째, 부족한 부분을 자연어로 수정 요청합니다. 이때 "이상해요"라고만 쓰지 말고, 어느 화면에서 어떤 행동을 했더니 어떤 문제가 생겼는지 적습니다. 오류 수정 프롬프트 장에서 배운 방식이 그대로 필요합니다.
다섯째, 배포해서 공유 링크를 만듭니다. Replit에서는 앱을 공개 URL로 배포할 수 있습니다. 배포는 가게 문을 여는 일과 같습니다. 내 작업실 안에서만 보이던 앱을 다른 사람이 브라우저로 접속할 수 있게 만드는 과정입니다. Replit 공식 튜토리얼은 Publish 버튼을 통해 설정을 확인하고, 민감한 값은 Secrets에 저장한 뒤, 공개 URL로 앱을 제공하는 흐름을 안내합니다.3
실습 예제: 스터디 출석 체크 앱 만들기
이번 장에서는 아주 작은 앱을 예로 들어보겠습니다. 목표는 "스터디 출석 체크 앱"입니다. 이 앱은 강사, 스터디장, 소모임 운영자가 바로 이해할 수 있는 구조를 가지고 있습니다.
완성 후 모습은 단순합니다. 첫 화면에는 스터디 이름, 날짜, 참석자 이름 입력칸이 있습니다. 참석 상태는 참석, 지각, 결석 중 하나로 선택합니다. 저장하면 아래 목록에 기록이 쌓입니다. 목록에서는 날짜별로 출석 현황을 볼 수 있고, 잘못 입력한 기록은 삭제할 수 있습니다.
처음 버전에서 제외할 기능도 분명히 정합니다. 로그인은 빼겠습니다. 카카오톡 알림도 빼겠습니다. 엑셀 다운로드도 일단 빼겠습니다. 관리자 권한도 넣지 않겠습니다. 이 앱의 목적은 운영 서비스가 아니라 "Replit에서 만들고 실행하고 공유하는 흐름을 익히는 것"입니다.
아래 프롬프트를 Replit Agent의 첫 요청으로 사용할 수 있습니다.
나는 개발 경험이 거의 없는 스터디 운영자입니다.
Replit Agent로 간단한 웹앱을 만들고 싶습니다.
만들고 싶은 앱은 스터디 출석 체크 앱입니다.
목적은 매주 스터디에 누가 참석했는지 간단히 기록하고 확인하는 것입니다.
사용자는 스터디 운영자 1명입니다.
필요한 기능은 다음과 같습니다.
1. 스터디 날짜를 입력할 수 있게 해주세요.
2. 참석자 이름을 입력할 수 있게 해주세요.
3. 참석 상태를 참석 / 지각 / 결석 중에서 선택할 수 있게 해주세요.
4. 저장 버튼을 누르면 아래 목록에 기록이 추가되게 해주세요.
5. 목록에는 날짜, 이름, 참석 상태가 보이게 해주세요.
6. 잘못 입력한 기록을 삭제할 수 있게 해주세요.
7. 날짜별로 기록을 간단히 필터링할 수 있게 해주세요.
화면 구성은 다음과 같이 해주세요.
- 상단: 앱 제목과 짧은 설명
- 중간: 출석 기록 입력 폼
- 하단: 출석 기록 목록
디자인은 깔끔한 업무용 도구 느낌으로 만들어주세요.
모바일에서도 보기 좋게 반응형으로 만들어주세요.
처음 버전에서는 로그인, 알림, 엑셀 다운로드, 관리자 권한, 결제 기능은 제외해주세요.
우선 MVP로 작동하는 버전을 만들어주세요.
생성하기 전에 어떤 구조로 만들지 계획을 먼저 설명해주세요.이 프롬프트에서 중요한 문장은 마지막입니다. "생성하기 전에 어떤 구조로 만들지 계획을 먼저 설명해주세요." Replit Agent가 제안한 계획을 보고 너무 복잡하면 바로 줄여야 합니다.
예를 들어 Agent가 "사용자 계정 기능을 추가하겠습니다"라고 말한다면 이렇게 답하면 됩니다.
첫 버전에서는 사용자 계정과 로그인 기능을 제외해주세요.
이 앱은 스터디 운영자 1명이 사용하는 개인용 MVP입니다.
입력, 저장, 목록 보기, 날짜 필터, 삭제 기능만 먼저 구현해주세요.이 한 번의 수정 요청만으로도 앱의 난이도가 크게 내려갑니다.
계획 검토가 초보자의 안전장치다
Replit Agent를 쓸 때 초보자가 가장 많이 하는 실수는 계획을 읽지 않고 바로 승인하는 것입니다. AI가 제안한 계획은 그럴듯해 보입니다. 하지만 그 안에 첫 버전에 필요 없는 기능이 숨어 있을 수 있습니다.
예를 들어 예약 문의 앱을 만든다고 했을 때 Agent가 자동으로 로그인, 관리자 권한, 이메일 발송, 결제, 캘린더 연동을 제안할 수 있습니다. 물론 멋진 기능입니다. 그러나 초보자의 첫 앱에는 부담이 큽니다. 특히 외부 서비스와 연결되는 기능은 API 키, 환경변수, 인증 설정이 필요할 수 있습니다. 여기서부터는 난이도가 올라갑니다.
계획을 검토할 때는 세 가지 질문만 던져보세요.
이 기능이 없으면 앱의 목적이 무너지는가?
이 기능 때문에 로그인, 결제, 외부 API 연결이 필요한가?
이 기능은 나중에 추가해도 되는가?
하나라도 "나중에 해도 된다"에 가깝다면 첫 버전에서는 빼는 편이 좋습니다. 바이브 코딩은 한 번에 완벽한 앱을 요구하는 기술이 아닙니다. AI와 대화하며 작게 만들고, 확인하고, 고쳐가는 기술입니다.
Replit에서 자주 보게 되는 용어
Replit을 쓰다 보면 몇 가지 개발 용어를 만나게 됩니다. 지금은 깊이 외울 필요가 없습니다. 다만 화면에서 보았을 때 겁먹지 않을 정도로만 이해하면 됩니다.
Repl은 Replit에서 하나의 프로젝트를 뜻합니다. 문서 하나가 아니라 앱 전체가 들어 있는 폴더라고 생각하면 됩니다.
파일 구조는 앱을 이루는 파일들의 배치입니다. 식당으로 치면 주방, 홀, 창고, 계산대가 나뉘어 있는 구조입니다. 초보자는 파일을 직접 고치지 않아도 되지만, "어떤 파일을 수정했는지"를 Agent에게 물어보면 앱을 이해하는 데 도움이 됩니다.
콘솔 또는 로그는 앱이 실행되면서 남기는 기록입니다. 주문이 어디서 밀렸는지 주방 메모를 보는 것과 비슷합니다. 버튼이 작동하지 않거나 화면이 멈출 때 로그를 보면 단서를 찾을 수 있습니다.
Secrets는 API 키나 비밀번호 같은 민감한 값을 숨겨두는 공간입니다. 환경변수와 비슷한 역할을 합니다. 금고 비밀번호를 메뉴판에 적어두면 안 되는 것처럼, API 키를 코드나 화면에 그대로 노출하면 안 됩니다. Replit 배포 안내에서도 API 키나 비밀번호 같은 값은 코드에 직접 넣지 말고 Secrets에 저장하라고 설명합니다.4
Deployment는 배포입니다. 내 앱을 다른 사람이 접속할 수 있는 주소로 공개하는 일입니다. 가게 문을 열고 손님이 들어올 수 있게 하는 것과 같습니다.
미리보기에서 확인해야 할 것
Agent가 앱을 만들었다고 해서 바로 배포하면 안 됩니다. 먼저 미리보기에서 직접 눌러봐야 합니다. AI가 "완료했습니다"라고 말해도, 사용자가 실제로 눌렀을 때 문제가 생길 수 있습니다.
스터디 출석 체크 앱이라면 다음을 확인합니다. 날짜를 입력하지 않고 저장하면 어떻게 되는지 봅니다. 이름을 비워두면 저장을 막는지 확인합니다. 참석, 지각, 결석이 제대로 표시되는지 봅니다. 삭제 버튼을 눌렀을 때 정말 삭제되는지 확인합니다. 모바일 화면에서 입력창과 버튼이 너무 작지 않은지도 확인합니다.
이 단계에서 문제가 보이면 한 번에 많은 것을 고치려 하지 마세요. 하나씩 요청해야 합니다.
출석 기록을 저장할 때 이름이 비어 있어도 저장되고 있습니다.
이름이 비어 있으면 저장하지 말고, "참석자 이름을 입력해주세요"라는 안내 문구를 보여주세요.
다른 기능은 변경하지 말고 이 입력 검증만 수정해주세요.이 프롬프트에는 좋은 습관이 들어 있습니다. 문제 상황을 말했고, 원하는 결과를 말했고, 다른 기능은 변경하지 말라고 제한했습니다. Replit Agent처럼 코드 전체를 만질 수 있는 도구에는 이런 제한 문장이 특히 중요합니다.
기능 추가는 한 번에 하나씩
Replit은 작은 업무 자동화 앱, 교육용 실습, 스터디 프로젝트, 데이터 시각화 예제처럼 빠르게 만들고 바로 보여줘야 하는 프로젝트에 잘 맞습니다. 예를 들어 강사는 강의 후기 수집 앱을 만들어 수강생에게 링크를 보낼 수 있습니다. 직장인은 회의 액션 아이템 정리 앱을 만들어 팀원에게 공유할 수 있습니다. 소상공인은 예약 문의 접수 앱을 만들어 고객에게 보낼 수 있습니다.
하지만 기능을 추가할 때는 욕심을 줄여야 합니다. "검색, 필터, 통계, 로그인, 관리자 페이지, 엑셀 다운로드, 이메일 알림을 모두 추가해줘"라고 한 번에 요청하면 문제가 생겼을 때 어디서 꼬였는지 찾기 어렵습니다.
검색 기능을 추가하고 싶다면 검색만 요청합니다.
현재 출석 기록 목록에 검색 기능을 추가해주세요.
사용자가 참석자 이름을 입력하면 해당 이름이 포함된 기록만 보이게 해주세요.
검색어를 지우면 전체 기록이 다시 보이게 해주세요.
기존 저장, 삭제, 날짜 필터 기능은 그대로 유지해주세요.통계를 추가하고 싶다면 통계만 요청합니다.
출석 기록 목록 위에 간단한 요약 통계를 추가해주세요.
전체 기록 수, 참석 수, 지각 수, 결석 수를 숫자로 보여주세요.
날짜 필터를 적용하면 해당 날짜의 통계만 계산되게 해주세요.
디자인은 작은 카드 4개로 깔끔하게 보여주세요.디자인을 바꾸고 싶다면 디자인만 요청합니다.
현재 앱의 기능은 유지하고 디자인만 개선해주세요.
업무용 SaaS 도구처럼 깔끔한 느낌으로 바꿔주세요.
배경은 밝은 회색, 입력 폼과 목록은 흰색 카드로 보여주세요.
버튼은 파란색 계열로 통일하고, 모바일에서는 입력 폼이 한 줄씩 보기 좋게 쌓이게 해주세요.
기능 로직은 변경하지 마세요."기능 로직은 변경하지 마세요"라는 문장은 생각보다 중요합니다. 디자인을 바꾸다가 버튼 동작이 달라지는 일을 줄일 수 있기 때문입니다.
오류가 생겼을 때 Replit답게 고치는 법
Replit을 쓰다 보면 오류 메시지나 로그를 마주칠 수 있습니다. 이때 초보자가 가장 먼저 할 일은 "당황하지 않기"입니다. 오류는 앱이 망했다는 뜻이 아니라, 어디서 꼬였는지 알려주는 신호입니다.
버그는 주문한 메뉴와 다른 음식이 나오는 상황입니다. 디버깅은 주문이 어디서 꼬였는지 확인하는 일입니다. 주문서가 잘못됐는지, 주방에서 착각했는지, 서빙 중에 바뀌었는지 하나씩 보는 과정입니다.
Replit에서 오류를 수정할 때는 다음처럼 요청합니다.
앱에서 문제가 발생했습니다.
문제 상황:
출석 기록을 입력하고 저장 버튼을 눌렀는데 목록에 아무것도 추가되지 않습니다.
내가 한 행동:
1. 날짜를 2026-05-07로 입력했습니다.
2. 이름에 김민지를 입력했습니다.
3. 참석 상태를 참석으로 선택했습니다.
4. 저장 버튼을 눌렀습니다.
기대한 결과:
아래 목록에 2026-05-07 / 김민지 / 참석 기록이 추가되어야 합니다.
실제 결과:
아무 변화가 없습니다.
콘솔이나 로그를 확인해서 원인을 찾아주세요.
가능하면 어떤 파일의 어떤 부분이 문제였는지도 쉬운 말로 설명한 뒤 수정해주세요.이 프롬프트는 Agent에게 충분한 단서를 줍니다. "안 돼요"가 아니라 재현 방법, 기대 결과, 실제 결과를 알려줬기 때문입니다. Replit 공식 가이드도 오류를 해결할 때 정확한 오류 메시지, 관련 코드, 하려던 일, 이미 시도한 일을 함께 제공하라고 안내합니다.2
만약 같은 문제를 여러 번 고쳤는데도 해결되지 않는다면, 같은 말을 반복하지 말고 접근을 바꿔야 합니다.
같은 문제가 계속 반복되고 있습니다.
지금 바로 코드를 수정하지 말고, 먼저 가능한 원인을 3가지로 나눠서 설명해주세요.
각 원인을 확인하는 방법도 함께 알려주세요.
그다음 가장 가능성이 높은 원인부터 하나씩 수정해주세요.이렇게 요청하면 Agent가 무작정 고치기보다 문제를 나누어 생각하게 됩니다. AI에게 질문하게 만드는 프롬프트를 여기서 다시 활용하는 것입니다.
배포하고 공유 링크 만들기
앱이 미리보기에서 잘 작동한다면 이제 배포를 생각할 수 있습니다. 배포는 내가 만든 앱을 인터넷 주소로 공개하는 과정입니다. Replit에서는 배포 기능을 통해 앱을 공개 URL로 만들 수 있습니다. 보통 프로젝트이름.replit.app 같은 형태의 주소가 제공됩니다. 다만 실제 버튼 이름, 위치, 요금제, 배포 방식은 Replit 정책과 화면 개편에 따라 바뀔 수 있으므로, 이 책에서는 특정 버튼 위치보다 배포 전 사고방식을 익히는 데 집중하겠습니다.
배포 전에 반드시 확인해야 할 것이 있습니다. 미리보기에서 작동한다고 해서 공유해도 된다는 뜻은 아닙니다. 다른 사람이 접속했을 때도 정상 작동하는지, 모바일에서 깨지지 않는지, 테스트 데이터가 남아 있지 않은지 확인해야 합니다.
배포 전에는 Replit Agent에게 이렇게 점검을 요청할 수 있습니다.
이 앱을 Replit에서 배포해 다른 사람에게 링크로 공유하려고 합니다.
배포 전에 초보자가 확인해야 할 문제를 점검해주세요.
특히 다음 항목을 봐주세요.
1. 저장, 삭제, 필터 기능이 정상 작동하는지
2. 모바일 화면에서 입력 폼과 목록이 보기 좋은지
3. 한국어 문구가 어색하지 않은지
4. 테스트용 데이터가 남아 있지 않은지
5. API 키나 비밀번호 같은 민감한 정보가 코드나 화면에 노출되어 있지 않은지
6. 배포 후 다시 확인해야 할 항목이 무엇인지
문제가 있으면 바로 수정하지 말고, 먼저 점검 결과를 목록으로 알려주세요.배포 후에는 공유 링크를 열어 직접 확인합니다. 가능하면 다른 브라우저나 휴대폰에서도 열어봅니다. 내 브라우저에서는 잘 보이지만, 다른 사람에게는 다르게 보일 수 있기 때문입니다.
Replit에 잘 맞는 앱과 아직 어려운 앱
Replit은 만들기, 실행, 공유를 한곳에서 경험하기 좋은 실습 환경입니다. 특히 다음과 같은 앱에 잘 맞습니다. 스터디 출석 체크 앱, 회의록 정리 앱, 간단한 업무 대시보드, 독서 모임 기록 앱, 강의 후기 수집 앱, 블로그 글감 저장소, 작은 데이터 시각화 앱이 대표적입니다.
반면 처음부터 Replit으로 도전하기 어려운 앱도 있습니다. 결제 기능이 들어가는 앱, 의료·법률·금융처럼 민감한 판단을 다루는 앱, 많은 사용자의 개인정보를 저장하는 앱, 복잡한 권한 관리가 필요한 앱, 대규모 트래픽을 감당해야 하는 서비스는 초보자의 첫 프로젝트로 적합하지 않습니다.
특히 API 키와 환경변수가 필요한 앱은 주의해야 합니다. 예를 들어 OpenAI API, Google Calendar API, Stripe 결제 API를 붙이는 순간 난이도가 올라갑니다. API는 다른 가게와 연결해주는 배달 기사와 비슷합니다. 편리하지만 주소, 출입증, 결제 수단을 정확히 관리해야 합니다. API 키는 그 배달 기사에게 일을 맡길 수 있는 비밀 열쇠입니다. 이 열쇠를 코드나 화면에 그대로 노출하면 안 됩니다.
Replit에는 Secrets처럼 민감한 값을 저장하는 기능이 있지만, 이 기능을 쓴다고 해서 보안 문제가 자동으로 모두 해결되는 것은 아닙니다. 개인정보를 다루는 앱은 반드시 더 신중하게 검토해야 합니다.
Lovable 다음에 Replit을 써보면 좋은 이유
이 책에서는 초보자에게 처음부터 개발자형 도구를 권하지 않습니다. 유명한 도구가 초보자에게 쉬운 도구는 아니기 때문입니다. Claude Code, Codex, Cursor 같은 개발자형 코딩 에이전트나 IDE는 코드베이스, 터미널, GitHub, 테스트, 리팩토링 같은 개발 흐름에 더 가깝습니다. 완전 초보자가 첫 도구로 쓰기에는 어렵게 느껴질 수 있습니다.
그렇다면 Replit은 어디에 놓아야 할까요? Replit은 초보용 앱 빌더형 도구와 개발자형 환경 사이에 걸쳐 있습니다. Agent가 많은 일을 도와주기 때문에 초보자도 시작할 수 있지만, 화면 안에는 실제 개발 환경의 요소가 보입니다. 그래서 Lovable로 첫 성공 경험을 만든 뒤, Replit로 "앱이 파일과 실행 환경과 배포로 이루어진다"는 감각을 익히기에 좋습니다.
Replit을 통해 얻을 수 있는 가장 큰 경험은 이것입니다. 앱은 단순한 화면이 아니라, 화면과 데이터와 실행 환경과 공개 주소가 함께 움직이는 결과물이라는 감각입니다. 이 감각이 생기면 나중에 Bolt, v0, Google AI Studio Build mode, Cursor 같은 도구를 만날 때도 덜 흔들립니다.
바로 써먹는 Replit 프롬프트 모음
Replit Agent에는 처음부터 긴 설명을 넣어도 되지만, 단계별로 나누어 요청하는 편이 안전합니다. 아래 프롬프트는 복사해서 앱 이름과 기능만 바꿔 사용할 수 있습니다.
1. 계획 먼저 요청하기
아직 코드를 만들지 말고, 먼저 이 앱을 어떻게 만들지 계획만 제안해주세요.
앱 이름: [앱 이름]
사용자: [누가 쓰는지]
목적: [왜 필요한지]
핵심 기능: [가장 중요한 기능 3개]
제외할 기능: [처음 버전에서 뺄 기능]
계획에는 화면 구성, 데이터 구조, 구현 순서, 예상되는 어려움을 포함해주세요.
초보자가 이해할 수 있는 말로 설명해주세요.2. MVP로 줄이기
제안한 계획이 초보자의 첫 버전으로는 조금 큽니다.
MVP로 줄여주세요.
반드시 남길 기능은 다음 3개입니다.
1. [기능 1]
2. [기능 2]
3. [기능 3]
다음 기능은 첫 버전에서 제외해주세요.
- 로그인
- 결제
- 알림
- 외부 API 연동
- 관리자 권한
작게 작동하는 버전을 먼저 만들고 싶습니다.3. 배포 전 점검하기
이 앱을 배포하기 전에 전체 점검을 해주세요.
바로 수정하지 말고, 먼저 문제 가능성을 알려주세요.
점검 항목:
1. 핵심 버튼이 모두 작동하는지
2. 입력값이 저장되고 목록에 보이는지
3. 모바일 화면에서 깨지지 않는지
4. 한국어 문구가 자연스러운지
5. 불필요하게 개인정보를 수집하지 않는지
6. 민감한 정보가 코드에 노출되지 않았는지
7. 배포 후 사용자가 이해하기 어려운 부분이 있는지
각 항목별로 좋음 / 수정 필요 / 확인 필요로 나눠서 알려주세요.4. 로그를 보고 오류 찾기
현재 앱에 오류가 있습니다.
콘솔과 서버 로그를 확인해서 원인을 찾아주세요.
문제 상황:
[어떤 화면에서 어떤 문제가 생겼는지]
내가 한 행동:
[재현 순서]
기대한 결과:
[원래 나와야 하는 결과]
실제 결과:
[실제로 나온 결과]
수정하기 전에 원인을 쉬운 말로 설명하고,
수정 후에는 어떤 부분을 바꿨는지 요약해주세요.5. 공유용 안내 문구 만들기
이 앱을 다른 사람에게 링크로 공유하려고 합니다.
앱 첫 화면에 넣을 짧은 사용 안내 문구를 만들어주세요.
조건:
- 한국어로 자연스럽게 작성
- 초보 사용자도 이해할 수 있게 작성
- 3문장 이내
- 어떤 정보를 입력해야 하는지 포함
- 저장 후 어디에서 결과를 볼 수 있는지 포함실습 미션: 나만의 공유 가능한 작은 앱 만들기
이번 장의 미션은 Replit에서 "만들고 바로 공유할 수 있는 작은 앱"을 하나 만드는 것입니다. 주제는 너무 어렵지 않아야 합니다. 추천 주제는 세 가지입니다. 스터디 출석 체크 앱, 회의 액션 아이템 기록 앱, 가족 장보기 목록 앱입니다.
스터디 출석 체크 앱은 날짜, 이름, 참석 상태만 있으면 됩니다. 회의 액션 아이템 기록 앱은 할 일, 담당자, 마감일, 상태만 있으면 됩니다. 가족 장보기 목록 앱은 물건 이름, 수량, 구매 여부만 있으면 됩니다. 세 앱 모두 입력, 저장, 목록 보기, 삭제라는 기본 구조를 가지고 있어 Replit 실습에 적합합니다.
미션을 할 때는 다음 순서로 진행해보세요. 먼저 첫 프롬프트를 작성합니다. 그다음 Agent의 계획을 읽고 기능을 줄입니다. 앱이 생성되면 미리보기에서 직접 테스트합니다. 오류가 있으면 재현 순서와 기대 결과를 적어 수정 요청합니다. 마지막으로 배포 전 점검 프롬프트를 사용해 공유 가능한 상태인지 확인합니다.
흔한 실수와 고치는 방법
첫 번째 실수는 너무 큰 앱을 요청하는 것입니다. "회원가입, 결제, 알림, 관리자 페이지가 있는 예약 플랫폼"은 초보자의 첫 Replit 프로젝트로는 큽니다. 이럴 때는 "예약 문의를 입력하고 목록으로 확인하는 앱"으로 줄여야 합니다.
두 번째 실수는 Agent의 계획을 읽지 않는 것입니다. 계획 안에 필요 없는 기능이 들어가 있으면 나중에 오류도 늘어납니다. 계획 단계에서 "첫 버전에서는 제외해주세요"라고 말하는 습관이 필요합니다.
세 번째 실수는 오류가 났을 때 "고쳐줘"만 반복하는 것입니다. AI에게도 단서가 필요합니다. 어떤 버튼을 눌렀는지, 어떤 값이 입력되었는지, 어떤 결과를 기대했는지 알려줘야 합니다.
네 번째 실수는 배포를 너무 빨리 하는 것입니다. 앱이 내 화면에서 한 번 열렸다고 바로 공유하면 안 됩니다. 모바일, 다른 브라우저, 빈 입력값, 삭제 기능, 테스트 데이터까지 확인해야 합니다.
다섯 번째 실수는 API 키를 아무 곳에나 붙여넣는 것입니다. API 키는 금고 비밀번호입니다. 화면, 코드, 공개 저장소에 노출되면 안 됩니다. Replit에서는 Secrets 같은 안전한 저장 공간을 사용해야 하며, 이 부분은 뒤에서 더 자세히 다룹니다.
이 장의 체크리스트
Replit Agent로 앱을 만들기 전에는 다음을 확인하세요.
앱의 사용자가 누구인지 정했는가?
가장 중요한 기능 1개를 정했는가?
첫 버전에서 뺄 기능을 적었는가?
Agent가 제안한 계획을 읽고 승인했는가?
로그인, 결제, 외부 API 연동을 무리하게 넣지 않았는가?
미리보기에서 직접 입력, 저장, 삭제를 테스트했는가?
오류가 생겼을 때 재현 순서를 적어 요청했는가?
배포 전 모바일 화면과 한국어 문구를 확인했는가?
API 키나 비밀번호가 노출되지 않았는가?
공유 링크를 다른 기기에서도 열어보았는가?
한 장 요약
Replit은 브라우저 안에서 앱을 만들고, 실행하고, 배포까지 경험할 수 있는 실습 환경입니다. Replit Agent는 자연어 프롬프트를 바탕으로 앱의 구조를 제안하고, 필요한 파일을 만들고, 실행 가능한 형태로 구성해줍니다. 초보자는 개발 환경을 설치하지 않아도 "아이디어 → 계획 확인 → 생성 → 미리보기 → 수정 → 배포"의 흐름을 한곳에서 경험할 수 있습니다.
다만 Replit은 완전히 단순한 앱 빌더만은 아닙니다. 파일 구조, 로그, 패키지, Secrets, 배포 같은 개발 환경의 요소가 보입니다. 그래서 처음에는 작은 앱으로 시작해야 합니다. 스터디 출석 체크 앱, 회의 액션 아이템 기록 앱, 가족 장보기 목록 앱처럼 입력과 목록이 분명한 앱이 좋습니다.
Replit에서 좋은 결과를 얻는 핵심은 프롬프트입니다. 사용자, 목적, 핵심 기능, 화면 구성, 사용할 데이터, 제외할 기능을 함께 알려줘야 합니다. 그리고 Agent가 제안한 계획을 검토하고, 기능을 한 번에 늘리지 말고, 오류가 생기면 재현 순서와 기대 결과를 구체적으로 알려줘야 합니다.
Replit은 빠르게 만들고 바로 공유하기에 좋은 도구입니다. 하지만 결제, 의료, 법률, 금융, 민감 개인정보, 복잡한 권한 관리, 대규모 운영은 아직 초보자가 바로 다루기 어렵습니다. "작동하는 것"과 "서비스로 운영 가능한 것"은 다릅니다. 우리는 먼저 작게 작동하는 경험을 만들고, 그다음 필요한 만큼 확장하면 됩니다.
다음 장에서는 Bolt.new를 다룹니다. Bolt는 빠르게 프로토타입을 만들고 화면을 확인하는 데 강점이 있는 도구입니다. Replit이 브라우저 속 개발실에 가깝다면, Bolt는 아이디어를 빠르게 화면과 기능으로 펼쳐보는 작업대에 가깝습니다.
참고
1Vibe coding 101: from idea to published app
이 노트는 보도·비평·교육·연구 목적으로 작성되었습니다. 저작권 문의가 있으시면 에서 알려주세요.