AI-Native Creation
웹 서비스 기획부터 배포까지 - Replit으로 마음일기 만들기
사전 준비사항
- Replit 계정 생성 및 유료 플랜 결제 (Core 또는 Pro)
- OpenAI API 키 발급 또는 Claude API 키 발급
학습 목표
AI Agent 이해
자동화와 에이전트의 차이점을 이해하고, AI Agent의 핵심 구성 요소를 파악합니다.
Replit 환경 마스터
코드 없이도 AI와 대화하며 웹 서비스를 만들 수 있는 Replit 환경을 익힙니다.
프롬프트 엔지니어링
AI가 원하는 결과를 내도록 효과적인 프롬프트를 작성하는 방법을 배웁니다.
첫 서비스 배포
실제 동작하는 마음일기 서비스를 만들고 인터넷에 배포합니다.
Replit 바이브코딩 실습 프로세스
가입 및 구독하기
Replit 계정 생성부터 요금제 선택, 비용 관리 설정까지
- Replit.com 계정 생성 (모바일 앱 지원)
- Core 요금제 + 크레딧 구조 이해 (AI 작업량 기반)
- 필수 설정: Usage Alert & Shutdown Limit (요금 폭탄 방지)
챗GPT 등으로 PRD(기획서) 작성하기
AI에게 일을 잘 시키기 위한 설계도, PRD를 먼저 작성
- 외부 AI(Claude, Gemini 등)를 활용한 초안 작성
- PRD 핵심 요소: 기능 정의, UI/UX 컨셉, 데이터 구조, 사용할 AI API 등
- 구체적인 기획이 AI 개발의 시행착오를 줄여줌
Replit에서 프로젝트 시작하기
Replit 홈 화면에서 프로젝트를 시작
- Design 모드: UI/UX 중심의 빠른 시각화 및 수정
- App 모드: 실제 DB, 로그인, 로직이 포함된 완전한 앱
- 목적에 맞는 모드 선택 전략
Design 모드로 초기 버전 만들기
준비한 PRD를 입력하여 앱의 뼈대를 구성
- PRD 프롬프트 입력(PM 레벨) vs 단순 지시(CEO 레벨 프롬프팅)
- 실시간 프리뷰 확인 및 대화를 통한 디자인 수정
- 구체적인 수정 요청 예시 (톤앤매너, 폰트, 레이아웃 등)
App 모드로 전환하기
디자인된 결과물을 실제 동작하는 어플리케이션으로 변환
- 로그인, DB, AI 모델 자동 연동 (별도 API 키 불필요)
- Logs 탭을 활용한 효과적인 버그 리포팅 및 수정
- 에러 메시지를 AI에게 그대로 전달하여 해결하기
배포하기 (Publish)
나만 보는 프로젝트가 아닌, 세상에 공개된 서비스로 변환
- Publish App 버튼으로 즉시 배포
- 커스텀 도메인 연결 및 자동 DNS 설정
- 서비스 URL 생성 및 공유
코드 이해하기 (선택사항)
AI가 작성한 코드를 살펴보고 구조를 파악
- Files 패널에서 프로젝트 파일 구조 확인
- AI에게 특정 파일이나 로직에 대해 역으로 질문하기
AI Agent란?
AI Agent는 단순히 질문에 답하는 것을 넘어, 스스로 목표를 설정하고, 계획을 세우고, 도구를 사용하여 작업을 완료하는 AI 시스템입니다.
- 질문하면 답변
- 한 번에 하나의 작업
- 사용자가 모든 것을 지시
- 목표를 주면 알아서 실행
- 여러 단계를 자동으로 수행
- 도구 사용, 웹 검색, API 호출
실습: Replit에서 마음일기 만들기
Replit 프로젝트 생성
replit.com에 접속하여 로그인합니다.
"Create Repl" 버튼을 클릭하고 Agent를 선택합니다.
Tip: Replit Agent는 자연어로 앱을 만들 수 있는 AI 기능입니다. 코드를 직접 작성하지 않아도 됩니다!마음일기 서비스 기획 프롬프트
Replit Agent에게 다음과 같이 요청합니다:
프롬프트 예시"마음일기 앱을 만들어줘. 사용자가 오늘의 감정과 일기를 작성하면, AI가 감정을 분석하고 공감하는 피드백을 제공해줘. Flask로 백엔드를 만들고, 간단한 HTML/CSS 프론트엔드로 구현해줘. OpenAI API를 사용해서 감정 분석과 피드백을 생성해줘."
Replit Agent가 자동으로:
- 프로젝트 구조를 설계합니다
- 필요한 파일들을 생성합니다
- 코드를 작성합니다
- 의존성을 설치합니다
OpenAI API 키 설정
Replit의 Secrets 탭에서 API 키를 설정합니다:
# Secrets 탭에서 추가 Key: OPENAI_API_KEY Value: sk-...your-api-key...
주의: API 키는 절대 코드에 직접 넣지 마세요! 항상 환경 변수(Secrets)를 사용하세요.감정 분석 프롬프트 개선
AI가 더 좋은 피드백을 주도록 프롬프트를 개선합니다:
시스템 프롬프트 예시"당신은 공감 능력이 뛰어난 심리 상담사입니다. 사용자의 일기를 읽고 다음을 수행하세요: 1. 주요 감정을 파악하세요 (기쁨, 슬픔, 불안, 분노 등) 2. 감정의 강도를 1-10으로 평가하세요 3. 공감하는 따뜻한 피드백을 2-3문장으로 작성하세요 4. 필요시 간단한 조언을 덧붙이세요 톤은 따뜻하고 지지적이어야 합니다. 판단하지 마세요."
배포 및 공유
"Deploy" 버튼을 클릭하여 서비스를 배포합니다.
Replit이 자동으로 URL을 생성합니다:
https://your-app.replit.app결과물: 이제 누구나 접속할 수 있는 마음일기 서비스가 완성되었습니다!
핵심 코드 이해하기
OpenAI API 호출 예시
import openai
import os
client = openai.OpenAI(api_key=os.environ['OPENAI_API_KEY'])
def analyze_diary(diary_text):
response = client.chat.completions.create(
model="gpt-4o-mini",
messages=[
{
"role": "system",
"content": """당신은 공감 능력이 뛰어난 심리 상담사입니다.
사용자의 일기를 읽고 감정을 분석하고 따뜻한 피드백을 제공하세요."""
},
{
"role": "user",
"content": f"오늘의 일기: {diary_text}"
}
],
temperature=0.7
)
return response.choices[0].message.content이번 주 과제
- 마음일기 서비스 완성하고 URL 공유하기
- 프롬프트를 수정해서 다른 스타일의 피드백 시도해보기
- (도전) 일기 기록을 저장하는 기능 추가해보기