메인 콘텐츠로 건너뛰기

Documentation Index

Fetch the complete documentation index at: https://docs.replit.com/llms.txt

Use this file to discover all available pages before exploring further.

⏰ 예상 시간: 10분 이 가이드를 마치면 공유 가능한 URL에 게시된 작은 앱을 갖게 됩니다.
새 브라우저 탭에서 열린 게시된 Runwell 앱 — 이 가이드의 결과물인 공유 가능한 프리미엄 러닝 트래커
러닝 트래커를 빌드하게 됩니다. 이 앱은 목적에 집중되어 있어, 큰 프로젝트를 계획할 필요 없이 완전한 첫 번째 빌드를 경험할 수 있습니다.

​
시작하기 전에

Replit 계정이 필요합니다. 목표는 하나의 완전한 루프를 완성하는 것입니다:
  • Agent로 빌드하고,
  • 앱을 테스트하고,
  • 게시하고 공유합니다.
Agent는 Replit의 AI 빌더입니다. 원하는 것을 설명하면, Agent가 앱을 만들고, 설명하고, 수정하는 것을 도와줍니다.

​
첫 번째 버전 빌드하기

1

새 앱 시작하기

2

Agent에게 첫 번째 버전 요청하기

프롬프트는 Agent가 텍스트 덩어리 대신 명확한 의도를 파악할 수 있도록 네 개의 짧은 섹션으로 나뉩니다:
  • Context(맥락) — 앱이 무엇이고 누구를 위한 것인지.
  • Visual direction(시각적 방향) — 어떻게 보이고 느껴져야 하는지.
  • Scope(범위) — 어떤 화면을 빌드하고 각 화면에 무엇을 표시할지.
  • Data and navigation(데이터 및 내비게이션) — 어떤 샘플 데이터를 사용하고 레이아웃이 모바일과 데스크톱에 어떻게 적응하는지.
Agent는 빌드 전에 계획을 보여줄 수 있습니다. 계획에 Home, Add Run, Progress 화면과 샘플 달리기 및 신발 마일리지, 모바일+데스크톱 레이아웃이 포함되어 있는지 확인하세요.중요한 내용이 빠져 있다면, 빌드를 시작하기 전에 Agent에게 계획을 업데이트하도록 요청하세요.
3

빌드 전 탐색하기 (선택 사항)

Agent가 코드를 작성하기 전에 디자인을 먼저 생각하도록 하려면, 프롬프트 입력란 옆의 Plan을 토글하세요. Plan 모드에서는 Agent가 명확한 질문을 하고 빌드를 승인하기 전에 검토할 수 있는 구조화된 계획을 만듭니다 — 이 프로젝트보다 더 큰 프로젝트에 유용합니다.자세한 내용은 Plan 모드를 참조하세요.
4

Agent가 빌드하는 동안 기다리기

Agent가 계획을 세우고, 생성하고, 앱을 연결합니다. 보통 몇 분이 걸립니다 — 작업하는 동안 채팅 패널에서 진행 상황을 확인할 수 있습니다.
Agent가 빌드 중인 상태 — 채팅 패널에는 Runwell 프롬프트와 Agent의 계획이 'Planning frontend architecture' 상태로 표시되고, 오른쪽 창에는 미리보기가 생성되기 전 자리 표시자가 보입니다
5

Preview에서 앱 동작 확인하기

Agent가 완료되면 Preview를 열고 방문자처럼 앱을 사용해 보세요. Preview는 게시하기 전에 빌드하는 동안 앱을 테스트하는 곳입니다.다음을 확인하세요:
  • Add Run을 열고 야외 또는 트레드밀을 선택할 수 있는지.
  • 거리, 시간, 메모를 입력할 수 있는지.
  • 달리기를 저장할 수 있는지.
  • Recent Runs에 달리기가 표시되는지.
  • 주간 거리와 신발 마일리지가 업데이트되는지.
  • 격려하는 추천 또는 인사이트가 보이는지.
  • 페이지를 새로 고침한 후 앱을 다시 사용할 수 있는지.
  • Preview를 폰 크기 너비로 조정할 수 있는지.
문제가 발생하면 Agent에게 증상을 설명하세요. 코드를 직접 진단할 필요가 없습니다.
Preview에서 실행 중인 Runwell 앱 — 네온 라임 포인트가 있는 어두운 테마, Runwell 로고, 러너 이미지가 있는 'Ready to work' 히어로, 라임 진행 막대가 있는 주간 볼륨 지표 카드, Recent Runs 목록, Log Run 버튼
게시하기 전에 시각적 변형을 탐색하고 싶으신가요? Canvas로 디자인하기에서 대안적인 디자인을 나란히 생성하고 마음에 드는 것을 적용하는 방법을 확인하세요.
6

앱 게시하기

Preview가 작동하면 두 가지 방법으로 게시할 수 있습니다:
  • Agent 채팅에서: Agent가 빌드를 마친 후, 인라인 Publish 카드로 배포를 제안합니다. 서브도메인을 확인하고, 누가 앱에 접근할 수 있는지 선택하고, Publish를 선택하세요.
  • Tools & files 패널에서: Publishing을 열어 동일한 옵션을 설정하세요. 인라인 카드를 닫았거나 나중에 게시하고 싶을 때 이 방법을 사용하세요.
어느 방법이든 게시하면 공유 가능한 URL이 있는 앱의 공개 버전이 만들어집니다.
Agent 채팅에서 서브도메인 필드, 접근 옵션, Publish 버튼이 있는 인라인 Publish 카드가 표시된 Project Editor
7

게시된 앱 열기

새 브라우저 탭에서 공개 URL을 열고 동일한 확인을 반복하세요. 공유하기 전에 Project Editor 외부에서도 앱이 작동해야 합니다.게시된 앱이 Preview와 다르게 동작한다면, 게시 로그와 앱에 필요한 프로덕션 설정을 확인하세요. 일반적인 게시 문제는 게시 문제 해결을 참조하세요.
새 브라우저 탭에서 열린 게시된 Runwell 앱 — Runwell 로고, 'Ready to work'가 적힌 러너 히어로, Weekly Volume 카드, Log Run 버튼

​
🎉 축하합니다 — 첫 번째 앱을 출시했습니다

단 하나의 프롬프트에서 라이브 공유 가능한 URL까지 왔습니다. 과정에서 여러분은:
  • Agent에게 Runwell을 설명하고 동작하는 첫 번째 버전을 받았습니다.
  • Preview에서 테스트하여 달리기가 저장되고 주간 합계가 업데이트되는지 확인했습니다.
  • 앱을 게시하고 공개 URL에서 열었습니다.
이것이 모든 Replit 프로젝트가 따르는 루프입니다 — 프롬프트, 테스트, 개선, 게시.

​
다음 단계

Canvas로 디자인하기

Runwell의 시각적 변형을 탐색하고 재빌드 없이 새 디자인을 적용하세요.

병렬로 빌드하기

여러 Agent 작업을 동시에 실행하여 앱의 여러 부분이 함께 진행되도록 하세요.

바이브 코딩 101

Agent를 아이디어에서 동작하는 앱까지 안내하는 방법을 배우세요.

데이터베이스 추가하기

새로 고침 후에도 달리기 기록을 저장하세요.