PERIOD 02 · 60분 LIVE ARTIFACTS
01 / 14
🔥 와우 데모 2개 · 실습 100%

결과물이 살아 움직인다

Live Artifacts — 클릭하고 입력하면 반응하는, 두고두고 쓰는 도구 만들기

오늘 만들 것 — 블로그 글을 즉석에서 갈아주는 라이브 에디터, 문의를 붙여넣으면 분류·답변까지 만들어주는 도구.

P2 · 컨셉 답변 vs 도구
02 / 14

Claude는 두 가지 결과물을 만들 수 있다

😴 정적 답변

한 번 읽고 끝

"블로그 글 써줘" → 글이 텍스트로 나옴. 마음에 안 들면 다시 물어봐야 함.

claude.ai/chat — 일반 답변

제목: AI 메모 도구 5개 비교

최근 노션 AI, Mem, Reflect... (긴 텍스트가 나열되고, 다 보고 나면 끝)

✨ 라이브 아티팩트

클릭·입력하면 반응

"블로그 글 에디터 만들어줘" → 입력 칸·미리보기·재생성 버튼이 달린 작은 앱이 등장.

claude.ai/artifact — 라이브 도구

AI 메모 도구 5개 비교

요즘 메모 앱이 똑똑해졌다...

🔄 다시 생성
P2 · 컨셉 Live Artifacts란?
03 / 14

Live Artifacts = 대화 옆에 뜨는 작은 앱

Claude가 답변과 함께 "옆 패널에 작은 도구"를 만들어준다. 입력칸·버튼·미리보기·시각화가 있어서 클릭하고 수정할 수 있는 살아있는 결과물.

🎛

입력 받기

텍스트·선택·슬라이더 등으로 사용자가 조작

즉시 반응

입력이 바뀌면 결과가 바로 갱신

📊

시각화 가능

차트·표·다이어그램을 직접 그림

🔁

두고두고 쓰기

한 번 만들면 다음에도 호출해서 사용

대시보드 — 사진: Carlos Muza / Unsplash
P2 · 실습 #1 · 15분 🔥 WOW DEMO
04 / 14
✍️ 실습 #1

블로그 글 라이브 에디터 만들기

주제·톤·길이 입력 → 즉석 초안 미리보기 → 클릭으로 문단별 재생성. 한 번 만들어두면 글 쓸 때마다 호출.

  • 워크북 p.8 펴기
  • claude.ai 새 채팅 열기 (스케줄 아님!)
  • 아래 슬라이드 프롬프트 복사 → 붙여넣기 → 엔터
  • P2 · 실습 #1 · STEP 1 에디터 요청 프롬프트
    05 / 14

    1단계 — Claude한테 "도구를 만들어달라"고 요청

    📝 라이브 에디터 요청 프롬프트블로그 글 초안 작성을 도와주는 라이브 에디터를 artifact로 만들어줘. 화면 구성: - 왼쪽: 입력 컨트롤 (주제 · 톤 · 길이 · 타깃 독자) - 오른쪽: 실시간 미리보기 (제목 · 도입 · 본문 3개 문단 · 마무리) - 각 문단 옆에 "🔄 다시 쓰기" 버튼 기능: - 주제만 적어도 일단 초안이 보이도록 - 톤은 친근/전문/유머 중 선택 - 길이는 짧음(500자)/중간(1500자)/긴글(3000자) 슬라이더 - 미리보기는 마크다운 렌더링 깔끔하고 모던한 디자인으로. 컬러는 인디고+화이트 톤.
    💡 핵심 키워드: "artifact로 만들어줘" — 이 한 줄이 정적 답변이 아니라 라이브 도구를 만들게 하는 신호. 빠뜨리면 그냥 텍스트로 답한다.
    P2 · 실습 #1 · STEP 2 결과 확인
    06 / 14

    2단계 — 채팅 오른쪽에 artifact 패널이 뜬다

    🖱 클릭해서 입력 바꿔보세요
    claude.ai — 라이브 에디터 (artifact)
    🤯 방금 막 만든 작은 앱이 화면 옆에 진짜로 떠 있다. 입력 바꾸면 결과도 바뀌고, "🔄"를 누르면 그 문단만 다시 써준다.
    P2 · 실습 #1 · STEP 3 대화로 개선
    07 / 14

    3단계 — 마음에 안 드는 부분을 말로 바꿔달라

    라이브 아티팩트의 진짜 강점 — 코드 없이 대화로 수정. 그냥 다음 메시지로 이렇게 적으면 된다:

    개선 요청 예시"본문 문단을 3개에서 5개로 늘려줘" "미리보기 폰트를 더 크게" "썸네일 이미지 영역도 추가" "키워드 입력 칸 추가하고 SEO 점수 보여줘" "내보내기 버튼 — 마크다운 복사"

    💪 자주 쓰는 개선 패턴

  • "~를 추가해줘" — 새 입력/버튼/기능
  • "~를 더 크게/작게" — 스타일·레이아웃
  • "~할 때 ~하게 해줘" — 인터랙션 규칙
  • "~를 옵션으로 빼줘" — 사용자 선택지
  • "~ 단축키 만들어줘" — 키보드 가속
  • ⚠️ 한 번에 너무 많이 바꾸지 말 것 — "이거 + 저거 + 또 저거 + ..." 한꺼번에 시키면 망가질 확률 ↑. 한 번에 1-2가지씩.
    P2 · 정리 Live Artifacts 3요소
    08 / 14

    방금 만든 걸 패턴으로 정리하면

    🎛

    ① 입력 (Input)

    텍스트 칸 · 드롭다운 · 슬라이더
    사용자가 뭘 조작할 수 있는가

    ⚙️

    ② 처리 (Logic)

    입력 → 출력으로 가는 규칙
    (계산, 조회, 변환, 생성)

    🖼

    ③ 출력 (Output)

    텍스트 · 표 · 차트 · 미리보기
    결과를 어떻게 보여줄 것인가

    🧠 이 3요소만 머릿속에 있으면 — "내가 자주 하는 일이 뭐지? 입력은? 출력은?" 한 번 정리해서 Claude한테 시키면 곧장 라이브 도구가 된다.
    P2 · 실습 #2 · 15분 🔥 WOW DEMO
    09 / 14
    📬 실습 #2

    문의 분류 · 답변 생성기 만들기

    받은 문의 본문을 붙여넣으면 — 카테고리 자동 분류 + 적절한 답변 템플릿 3개 제시. 고른 후 "다듬어줘" 한 번으로 실제 발송용 답변 완성.

    P2 · 실습 #2 · STEP 1 분류기 요청 프롬프트
    10 / 14

    1단계 — 문의 처리 도구 요청

    📝 문의 분류·답변 생성기 프롬프트받은 문의 메시지를 처리하는 라이브 도구를 artifact로 만들어줘. 화면: - 위쪽: 큰 텍스트 입력창 (받은 문의 본문 붙여넣기) - "분석" 버튼 - 아래쪽 결과: · 카테고리 (가격 문의 / 환불 / 협업 제안 / 단순 질문 / 기타) · 긴급도 (높음·중간·낮음) · 답변 톤 추천 (정중 / 친근 / 사무적) · 답변 초안 3가지 (각각 다른 톤·길이) 각 답변 초안 옆에 "복사" 버튼, "다시 생성" 버튼. 내가 1인 창업자라 정중하면서도 부담스럽지 않은 톤이 기본.
    🎯 내 비즈니스에 맞춰
    "1인 창업자" 부분을 본인 상황으로:
    • 온라인 쇼핑몰 → 환불·교환 카테고리 추가
    • 강사·코치 → 수업·일정 카테고리
    • 프리랜서 → 견적·일정 카테고리
    💡 카테고리는 미리 정하기
    실제 자주 받는 문의 타입 5-7개를 미리 적어주면, Claude가 더 정확하게 분류한다. "기타"는 항상 마지막에.
    P2 · 실습 #2 · STEP 2 결과 확인
    11 / 14

    2단계 — 테스트 문의를 넣어본다

    🖱 샘플 클릭해서 분류 결과 바꿔보세요
    📥 받은 문의:

    🚀 한 번 만들어두면 — 다음 주에 비슷한 문의 와도 복붙 → 30초 안에 답변 완성.
    P2 · 자유 실습 · 20분 🎯 내 도구 1개 만들기
    12 / 14

    내 일에 진짜 도움되는 라이브 도구 1개

    3요소(입력·처리·출력)를 써서 내 것을 만들어본다. 아이디어 카드:

    📝

    콘텐츠 도구

    • 인스타 캡션 생성기
    • 유튜브 제목·썸네일 카피
    • 뉴스레터 초안 에디터
    • SEO 메타 디스크립션

    🧮

    계산·진단 도구

    • 1인 사업 매출 시뮬레이터
    • 가격 책정 계산기
    • 시간 견적 도구
    • SNS 성장 예측

    🗂

    정리·관리 도구

    • 일정 우선순위 매트릭스
    • 고객 메모 정리기
    • 회의록 요약·액션 추출
    • 학습 노트 카테고리 분류

    📓 워크북 p.10 — "내 라이브 도구 설계" 빈칸: 입력 3개 + 처리 1줄 + 출력 1개. 채우면 그게 프롬프트.
    P2 · 공유 짧은 데모
    13 / 14

    한 사람씩 1분 — "나는 무슨 도구를 만들었나"

    만든 라이브 도구를 화면 공유해서 입력 한 번 넣고 결과 보여주기.
    "이거 왜 만들었어요?"가 좋은 질문.

  • 1분 안에 끝내기 — 시연 30초 + 설명 30초
  • 도구 링크 공유 — 마음에 들면 따라 만들 수 있게
  • 막힌 부분 말하기 — 다른 사람이 풀어줄 수도
  • 함께 만든다 — 사진: Jason Goodman / Unsplash
    PERIOD 02 → 03 잠깐 휴식 후 계속
    14 / 14
    NEXT · 3교시

    합치면 워크플로우가 된다

    Scheduled + Live Artifacts — 1인 콘텐츠 운영을 통째로 자동화

    매일 스케줄로 정보 수집 → 라이브 에디터로 글쓰기 → 라이브 분류기로 문의 답변. 세 가지를 잇는 미니 시스템을 함께 설계한다.