Week 1

AI-Native Creation

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

사전 준비사항

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

학습 목표

AI Agent 이해

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

Replit 환경 마스터

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

프롬프트 엔지니어링

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