결과물 공유하는 법 — artifacts · github · vercel

Lecture 2

결과물
공유하는 법

artifacts · github · vercel · claude code

01 RECAP TALK · 5min

지난 시간 이후

돌아가서 무언가
해보신 분?

기억나는 것 있으신 분?

⏱ 5 MIN · FREE TALK

02 RECAP — artifacts · skill

복습

ARTIFACTS

결과물

claude 에서 만들어낸 결과물
html · md · 무엇이든

SKILL

반복 명령 → 한 번에

/visualize-meeting-notes
하나로 해결

03 만들었다. 그런데…

다른 사람에게 알리려면?

일단 써보게 해야 함

▼

사람들은 시간이 없다 → 당장 이득이 중요

▼

이득 → 흥미 → 배우고 싶어짐

04 TODAY

★ 오늘 배울 것

내 결과물을
다른 사람에게
공유하는 방법

🖥

실습

naver html · 개발자도구 → 배포 개념

PART 1 · 35 MIN

내가 만든
artifacts(html)
공유하기

07 claude 밖으로 나가다

직접 배포 해보기

준비 단계 2가지

🐙

github

→

▲

vercel

08 github

github = 버전 관리 도구

= 개발자들의 google docs

어디서든 수정

올려두기만 하면 됨

함께 수정

실시간 X · 순서대로 O

09 버전 관리의 필요성

지난시간 녹음기 만들 때…

"되돌리고 싶다!" 경험 있죠?

📁 recorder.html

📁 recorder_최종.html

📁 recorder_최종_최종.html

📁 recorder_진짜최종.html

📁 recorder_최최종_v2_real.html ← 그만!

→ 버전 관리 도구 = github

🖥

실습

github 가입 (google 계정) · repo 생성 · html upload

11 vercel

vercel

"다른 사람도 볼 수 있게
항상 켜져 있는 컴퓨터에 올려두기"

→ vercel = 항상 켜져 있는 컴퓨터를 빌려주는 곳

🖥

실습

vercel 프로젝트 생성 · github 연결 · 배포

🖥

실습 — 맥북 접속

404 — 예상과 다른 결과

★ 묻는다! — 가장 중요한 오늘의 마인드셋

①내가 원하는 결과

②내가 처한 상황 (+ 에러)

③해결 방법 알려줘

→ 해결책: 파일명 index.html

🖥

실습

github 파일명 수정 · vercel 완료 확인 · 맥북 재확인

15 핸드폰 접속

📱

핸드폰에서 접속

⚠️ 주의

가능하면 Chrome 브라우저 사용

GUI 에서 CLI 로

이미지에서 텍스트로

17 AI 의 가장 큰 한계

가장 큰 한계 = 기억력

기억해야 할 것 = 데이터

TEXT

"안녕"

= 2 글자
작다

vs

IMAGE

점 하나 = RGB

(14,152,32)
(35,151,77)
(88,201,44)…

이미지는 대부분 텍스트보다 훨씬 크다

18 EFFICIENCY

AI 가 더 많은 일을
효율적으로 하려면

→ 이미지보다 텍스트로 말하는 게 쉽다

※ 기술 발전으로 이미지도 가능 — 그러나

★ AI 를 더 잘 쓰는 사람
= AI 의 기억을 효율적으로 관리하는 사람

19 CLI 로 claude 활용

CLI 로 claude 활용

🛠

claude code

USE CASE 1

PDF → 메일

만들어서 바로 보내기

USE CASE 2

데이터 → 인사이트

조회 → 마케팅 인사이트

🖥

실습 — claude code 설치

공식 홈페이지 → 터미널에 붙여넣기

$ curl -fsSL https://claude.ai/install.sh | bash

첫 작업 → vercel 프로젝트 삭제부터