Week 1

AI-Native Creation

웹 서비스 기획부터 배포까지 - Replit으로 마음일기 만들기

사전 준비사항

  • Replit 계정 생성 및 유료 플랜 결제 (Core 또는 Pro)
  • OpenAI API 키 발급 또는 Claude API 키 발급

학습 목표

AI Agent 이해

자동화와 에이전트의 차이점을 이해하고, AI Agent의 핵심 구성 요소를 파악합니다.

Replit 환경 마스터

코드 없이도 AI와 대화하며 웹 서비스를 만들 수 있는 Replit 환경을 익힙니다.

프롬프트 엔지니어링

AI가 원하는 결과를 내도록 효과적인 프롬프트를 작성하는 방법을 배웁니다.

첫 서비스 배포

실제 동작하는 마음일기 서비스를 만들고 인터넷에 배포합니다.

Replit 바이브코딩 실습 프로세스

1

가입 및 구독하기

Replit 계정 생성부터 요금제 선택, 비용 관리 설정까지

  • Replit.com 계정 생성 (모바일 앱 지원)
  • Core 요금제 + 크레딧 구조 이해 (AI 작업량 기반)
  • 필수 설정: Usage Alert & Shutdown Limit (요금 폭탄 방지)
2

챗GPT 등으로 PRD(기획서) 작성하기

AI에게 일을 잘 시키기 위한 설계도, PRD를 먼저 작성

  • 외부 AI(Claude, Gemini 등)를 활용한 초안 작성
  • PRD 핵심 요소: 기능 정의, UI/UX 컨셉, 데이터 구조, 사용할 AI API 등
  • 구체적인 기획이 AI 개발의 시행착오를 줄여줌
3

Replit에서 프로젝트 시작하기

Replit 홈 화면에서 프로젝트를 시작

  • Design 모드: UI/UX 중심의 빠른 시각화 및 수정
  • App 모드: 실제 DB, 로그인, 로직이 포함된 완전한 앱
  • 목적에 맞는 모드 선택 전략
4

Design 모드로 초기 버전 만들기

준비한 PRD를 입력하여 앱의 뼈대를 구성

  • PRD 프롬프트 입력(PM 레벨) vs 단순 지시(CEO 레벨 프롬프팅)
  • 실시간 프리뷰 확인 및 대화를 통한 디자인 수정
  • 구체적인 수정 요청 예시 (톤앤매너, 폰트, 레이아웃 등)
5

App 모드로 전환하기

디자인된 결과물을 실제 동작하는 어플리케이션으로 변환

  • 로그인, DB, AI 모델 자동 연동 (별도 API 키 불필요)
  • Logs 탭을 활용한 효과적인 버그 리포팅 및 수정
  • 에러 메시지를 AI에게 그대로 전달하여 해결하기
6

배포하기 (Publish)

나만 보는 프로젝트가 아닌, 세상에 공개된 서비스로 변환

  • Publish App 버튼으로 즉시 배포
  • 커스텀 도메인 연결 및 자동 DNS 설정
  • 서비스 URL 생성 및 공유
7

코드 이해하기 (선택사항)

AI가 작성한 코드를 살펴보고 구조를 파악

  • Files 패널에서 프로젝트 파일 구조 확인
  • AI에게 특정 파일이나 로직에 대해 역으로 질문하기

AI Agent란?

AI Agent는 단순히 질문에 답하는 것을 넘어, 스스로 목표를 설정하고, 계획을 세우고, 도구를 사용하여 작업을 완료하는 AI 시스템입니다.

일반 AI (ChatGPT)
  • 질문하면 답변
  • 한 번에 하나의 작업
  • 사용자가 모든 것을 지시
AI Agent
  • 목표를 주면 알아서 실행
  • 여러 단계를 자동으로 수행
  • 도구 사용, 웹 검색, API 호출

실습: Replit에서 마음일기 만들기

  1. Replit 프로젝트 생성

    replit.com에 접속하여 로그인합니다.

    "Create Repl" 버튼을 클릭하고 Agent를 선택합니다.

    Tip: Replit Agent는 자연어로 앱을 만들 수 있는 AI 기능입니다. 코드를 직접 작성하지 않아도 됩니다!
  2. 마음일기 서비스 기획 프롬프트

    Replit Agent에게 다음과 같이 요청합니다:

    프롬프트 예시

    "마음일기 앱을 만들어줘. 사용자가 오늘의 감정과 일기를 작성하면, AI가 감정을 분석하고 공감하는 피드백을 제공해줘. Flask로 백엔드를 만들고, 간단한 HTML/CSS 프론트엔드로 구현해줘. OpenAI API를 사용해서 감정 분석과 피드백을 생성해줘."

    Replit Agent가 자동으로:

    • 프로젝트 구조를 설계합니다
    • 필요한 파일들을 생성합니다
    • 코드를 작성합니다
    • 의존성을 설치합니다
  3. OpenAI API 키 설정

    Replit의 Secrets 탭에서 API 키를 설정합니다:

    # Secrets 탭에서 추가
    Key: OPENAI_API_KEY
    Value: sk-...your-api-key...
    주의: API 키는 절대 코드에 직접 넣지 마세요! 항상 환경 변수(Secrets)를 사용하세요.
  4. 감정 분석 프롬프트 개선

    AI가 더 좋은 피드백을 주도록 프롬프트를 개선합니다:

    시스템 프롬프트 예시

    "당신은 공감 능력이 뛰어난 심리 상담사입니다. 사용자의 일기를 읽고 다음을 수행하세요: 1. 주요 감정을 파악하세요 (기쁨, 슬픔, 불안, 분노 등) 2. 감정의 강도를 1-10으로 평가하세요 3. 공감하는 따뜻한 피드백을 2-3문장으로 작성하세요 4. 필요시 간단한 조언을 덧붙이세요 톤은 따뜻하고 지지적이어야 합니다. 판단하지 마세요."

  5. 배포 및 공유

    "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 공유하기
  • 프롬프트를 수정해서 다른 스타일의 피드백 시도해보기
  • (도전) 일기 기록을 저장하는 기능 추가해보기