← 자료실 홈
직접 코딩 0% — CLAUDE CODE로 진짜 서비스 만들고 배포·운영까지

2장. Claude 웹으로 워밍업

대화로 만드는 첫 결과물 — 드디어, 만듭니다

직접 코딩 0%
2장 · 시작

이론은 끝났습니다.
이제 실제로 만듭니다.

Claude 웹에서 동작하는 결과물을 만들고,
직접 확인하고, 안전하게 공유합니다.

직접 코딩 0%2장 · 시작
2장의 흐름

오늘 다룰 여섯 가지

2.1개인화 설정
2.2아티팩트 생성·게시
2.3프롬프트 5가지 원칙
2.4AI 명함 생성기
2.5오늘의 한 줄 영감 카드
2.6Claude 웹의 한계
직접 코딩 0%2장의 흐름
오늘의 학습목표

수업을 마치면 할 수 있는 것

01 · 설정

개인화 지침을 설정하고 적용 범위를 설명한다.

02 · 제작

아티팩트를 생성·수정·게시한다.

03 · 프롬프트

5원칙으로 요구사항과 완성 조건을 작성한다.

04 · 검증

말하기→확인하기→통제하기로 개선한다.

05 · 안전

개인정보·출처·기능을 게시 전에 점검한다.

06 · 구분

Claude 웹과 Claude Code의 차이를 설명한다.

직접 코딩 0%오늘의 학습목표
오늘의 산출물

수업이 끝나면 다섯 가지가 남습니다

01개인화 지침
02명함 생성기
03영감 카드
04게시 URL
05검증 기록
직접 코딩 0%오늘의 산출물
2.1 개인화 설정

한 번 적어두고 반복을 줄입니다

“나는 어떤 사람이고,
어떤 방식으로 답해주면 좋은지”를 미리 알려둡니다.
언어

항상 한국어로

수준

전문 용어는 쉽게

형식

간결하고 존댓말로

직접 코딩 0%2.1 개인화 설정
2.1 추천 시작 설정

처음에는 이 문장으로 시작하세요

저는 프로그래밍을 전혀 모릅니다. 항상 한국어로 대답해 주세요. 전문 용어를 사용할 때는 쉬운 설명을 함께 달아주세요. 답변은 간결하게 해주세요.
필요하면 자신의 수준과 선호에 맞게 수정하세요.
직접 코딩 0%2.1 추천 시작 설정
2.1 설정 절차

메뉴 이름이 달라도 의미를 따라가세요

STEP 1

프로필

이름 또는 프로필 선택

STEP 2

설정

Settings 열기

STEP 3

일반

프로필·지침 영역 찾기

STEP 4

확인

새 대화에서 적용 확인

서비스 업데이트에 따라 위치와 이름은 달라질 수 있습니다.

직접 코딩 0%2.1 설정 절차
2.1 오해 방지

개인화 설정은 ‘모든 기억’이 아닙니다

직접 코딩 0%2.1 오해 방지
2.1 활동

나의 개인화 지침을 작성하세요

나의 수준
________________

원하는 설명
________________

피하고 싶은 방식
________________

세 항목을 자연스러운 문장 하나로 합쳐보세요.
직접 코딩 0%2.1 활동
2.2 아티팩트

대화 옆에 나타나는 실제 결과물

대화

요청하고 설명을 주고받는 공간

아티팩트

클릭·입력·결과 표시·다운로드가 가능한 별도 공간

직접 코딩 0%2.2 아티팩트
2.2 아티팩트 종류

네 가지 형태로 만날 수 있습니다

인터랙티브 웹

버튼·입력·결과가 있는 웹페이지

차트·그래프

데이터를 시각화한 결과

코드

웹페이지와 차트의 원본

문서

보고서·가이드 등 정형 문서

직접 코딩 0%2.2 아티팩트 종류
2.2 시작 절차

앱 및 웹사이트 아티팩트를 만듭니다

01

아티팩트

메뉴 열기

02

새 아티팩트

새 결과물 시작

03

앱 및 웹사이트

형식 선택

04

프롬프트

만들 것을 요청

직접 코딩 0%2.2 시작 절차
2.2 게시와 공유

게시 한 번으로 URL을 만듭니다

STEP 1

게시

Publish 선택

STEP 2

링크 복사

생성된 URL 복사

STEP 3

다른 환경 확인

시크릿 창·다른 기기

직접 코딩 0%2.2 게시와 공유
2.2 게시 전 검문

공유 버튼보다 먼저 확인하세요

시크릿 창 또는 로그아웃 상태에서 열리는가?
전화번호·이메일·API 키가 남아 있지 않은가?
버튼과 다운로드가 실제로 동작하는가?
공개해도 되는 문구와 이미지인가?
조직의 공유 정책을 지켰는가?
로그인 요구와 사용량 조건을 확인했는가?
직접 코딩 0%2.2 게시 전 검문
2.2 게시의 의미와 한계

가장 간단한 배포, 그러나 ‘맛보기’입니다

잘 맞는 용도

명함·카드처럼 방문자 데이터를 영구 저장하지 않는 결과물

어려운 용도

여러 방문자의 데이터를 저장·관리하는 운영 서비스

공개 범위와 로그인 요구는 계정·정책에 따라 달라질 수 있습니다.

직접 코딩 0%2.2 게시의 의미와 한계
2.3 프롬프트

식당에서 주문한다고 생각해 봅시다

“아무거나 주세요”

그럴듯하지만 내가 원한 것과 멀 수 있습니다.

조건을 구체적으로

빼야 할 것·양·구성까지 말하면 원하는 결과에 가까워집니다.

직접 코딩 0%2.3 프롬프트
2.3 원칙 1

역할과 결과물을 먼저 말하기

흐릿하게

“예쁜 거 하나 만들어줘. 파란색이고… 명함 같은 거.”

선명하게

“디지털 명함 생성기 웹페이지를 만들어줘.”

첫 문장에서 결과물의 이름을 선언합니다.

직접 코딩 0%2.3 원칙 1
2.3 원칙 2

요구사항을 번호로 나열하기

요구사항 1. 이름·직업·연락처·소개 입력 2. 테마 색상 최소 5가지 3. 실시간 미리보기 4. PNG 다운로드 5. 모바일 반응형 6. 한국어

“여러 개” 대신 “최소 5개”, “모바일” 대신 “375px”처럼 숫자로 구체화합니다.

직접 코딩 0%2.3 원칙 2
2.3 원칙 3

완성 조건으로 ‘합격선’을 정하기

버튼을 누르면 실제 PNG 파일이 저장될 것
375px에서 폼과 미리보기가 겹치지 않을 것
이름만 입력해도 오류가 나지 않을 것
색을 바꾸면 즉시 미리보기에 반영될 것
직접 코딩 0%2.3 원칙 3
2.3 핵심 주의

완성 조건은 자동 합격증이 아닙니다

AI가 “완료했습니다”라고 말해도
사용자가 직접 눌러보고 저장해 봐야 합니다.

완성 조건은 AI에게 주는 시험 문제이자, 사용자가 확인할 체크리스트입니다.
직접 코딩 0%2.3 핵심 주의
2.3 원칙 4

수정 요청은 작업 번호로 묶기

다음의 3가지 작업을 수행해줘. 디자인 콘셉트를 유지하면서 반영해줘. 작업 1: 명함 정보를 바꿔줘. 작업 2: PNG 다운로드를 수정해줘. 작업 3: QR 코드 자리를 추가해줘.
직접 코딩 0%2.3 원칙 4
2.3 원칙 5

분위기는 ‘느낌’으로 말하기

고급스러움

최고급 호텔 로비 같은 분위기

따뜻함

코코아를 마시며 쓴 편지 같은 분위기

전문적

대기업 발표자료처럼 군더더기 없이

역동적

스포츠 브랜드 광고처럼 강렬하게

직접 코딩 0%2.3 원칙 5
2.3 느낌의 통제

결과를 본 뒤 눈에 보이는 말로 바꿉니다

01

색상

02

글자 크기

03

여백

04

배치

05

질감

‘빈티지’의 해석은 사람과 AI가 다를 수 있습니다.

직접 코딩 0%2.3 느낌의 통제
2.3 활동

흐릿한 프롬프트를 개선하세요

“예쁜 소개 카드 하나 만들어줘.”
결과물 이름을 먼저 썼는가?
요구사항을 번호로 나눴는가?
완성 조건을 적었는가?
유지할 것을 정했는가?
원하는 분위기를 설명했는가?
직접 코딩 0%2.3 활동
2.3 요약

프롬프트 5가지 원칙

01

결과물

방향타

02

번호

누락 방지

03

합격선

확인 대본

04

작업 번호

수정 범위

05

느낌

비전공자 언어

프롬프트는 기본이지만 전부는 아닙니다.

직접 코딩 0%2.3 요약
2.4 실습 · 명함 생성기

1단계 — 말하기: 결과물과 요구사항

디지털 명함 생성기 웹페이지를 만들어줘. 요구사항: 1. 이름, 직업(소속), 이메일, 전화번호, 소개 문구 2. 테마 색상 최소 5가지 3. 입력 즉시 명함 미리보기 4. 깔끔하고 모던한 카드 스타일 5. PNG 다운로드 6. 375px 반응형, 한국어
직접 코딩 0%2.4 실습 · 명함 생성기
2.4 실습 · 명함 생성기

1단계 — 완성 조건

★ 완성 조건 — 전부 충족해야 완성 - 입력 항목 5종을 모두 입력할 수 있을 것 - 테마 색상 변경이 즉시 반영될 것 - PNG 버튼을 누르면 실제 파일이 저장될 것 - 375px에서 폼과 미리보기가 겹치지 않을 것 - 이름만 입력해도 오류가 나지 않을 것
직접 코딩 0%2.4 실습 · 명함 생성기
2.4 결과가 책과 다를 때

다름은 고장이 아닙니다

01

비교

책과 내 방식의 차이 묻기

02

선택

원하는 방향은 내가 정하기

03

고정

프롬프트에 방식을 명시하기

직접 코딩 0%2.4 결과가 책과 다를 때
2.4 실습 · 확인하기

완성 조건을 체크리스트로 사용합니다

입력 항목 5종이 모두 있는가?
색상 변경이 즉시 반영되는가?
PNG가 실제 파일로 저장되는가?
375px에서 화면이 겹치지 않는가?
이름만 넣어도 오류가 없는가?
직접 코딩 0%2.4 실습 · 확인하기
2.4 확인의 의미

“다 됐습니다”를 읽는 것은
확인이 아니라 믿음입니다

직접 넣고 → 누르고 → 저장하고 → 눈으로 봅니다.

직접 코딩 0%2.4 확인의 의미
2.4 실습 · 통제하기

작업 번호로 세 가지를 개선합니다

다음의 3가지 작업을 수행해줘. 작업 1: 가상의 명함 정보로 바꿔줘. 작업 2: PNG 다운로드를 확인하고, 안 되면 수정해줘. 작업 3: SNS 링크를 입력하면 QR 코드가 생성되게 해줘. 수정 후 완성 조건을 다시 점검해줘.
직접 코딩 0%2.4 실습 · 통제하기
2.4 재검증

수정했으면 처음부터 다시 확인합니다

변경하지 말아야 할 디자인이 유지됐는가?
PNG가 여전히 저장되는가?
QR 코드를 휴대전화로 스캔했는가?
링크가 의도한 주소로 이동하는가?
모바일 화면이 깨지지 않는가?
이전의 완성 조건도 모두 통과하는가?
직접 코딩 0%2.4 재검증
2.4 개인정보 안전

가상 정보로 시험하고, 공개 전 지웁니다

실제 연락처는 다운로드할 최종 명함에만 입력합니다. 게시할 아티팩트의 기본 화면과 코드에는 개인 전화번호·이메일이 남지 않도록 확인하세요.
실제 이메일·전화번호가 기본값에 없는가?
QR 코드 대상 URL에 민감정보가 없는가?
공개 화면과 코드에 비밀정보가 없는가?
직접 코딩 0%2.4 개인정보 안전
2.4 게시와 응용

하나의 구조를 다른 도구로 바꿀 수 있습니다

강사 소개 카드

강의 분야·경력·대표 강의

포트폴리오 카드

프로젝트·기술·링크

동아리 멤버 카드

역할·관심사·연락처

스토리 카드

1080×1920 비율 요청

직접 코딩 0%2.4 게시와 응용
2.5 실습 · 영감 카드

1단계 — 요구사항

오늘의 한 줄 영감 카드 웹페이지를 만들어줘. 1. 동기부여·동양고전·직장인 조언 카테고리 2. 각 카테고리 최소 20개 문구 3. 새 카드 버튼으로 무작위 표시 4. 문구·저자·출처 표시 5. 카드마다 파스텔 그라데이션 변경 6. 같은 날 같은 ‘오늘의 카드’ 모드 7. PNG 저장 8. 375px 반응형, 한국어
직접 코딩 0%2.5 실습 · 영감 카드
2.5 생성 원리

코드를 몰라도 구조는 이해할 수 있습니다

01

목록

문구를 미리 담아둠

02

무작위

버튼으로 하나 선택

03

날짜 기준

같은 날 같은 번호 선택

실제 문구·저자·출처의 정확성은 별도로 확인해야 합니다.

직접 코딩 0%2.5 생성 원리
2.5 실습 · 확인하기

일곱 가지를 직접 시험하세요

열자마자 카드 한 장이 보이는가?
세 카테고리를 모두 선택할 수 있는가?
새 카드마다 문구가 바뀌는가?
카드와 함께 배경도 바뀌는가?
오늘의 카드가 새로고침 후 유지되는가?
PNG에 문구·저자·배경이 포함되는가?
375px에서 문구가 넘치지 않는가?
직접 코딩 0%2.5 실습 · 확인하기
2.5 실습 · 통제하기

세 가지 작업으로 확장합니다

디자인 콘셉트를 유지하면서 수정해줘. 작업 1: ‘하루를 여는 짧은 시’ 카테고리 추가 작업 2: 페이드인 애니메이션과 분위기 아이콘 추가 작업 3: 오늘 받은 카드 모아보기와 썸네일 목록 추가 수정 후 모든 확인 항목을 다시 검증해줘.
직접 코딩 0%2.5 실습 · 통제하기
2.5 문구 검증

문구가 멋져도 사실과 출처를 확인합니다

문구가 정확한가?
저자가 실제 인물과 일치하는가?
원문 출처가 존재하는가?
인용 범위와 출처 표시가 적절한가?
확인이 어렵다면 “AI 생성 문구”로 표시했는가?
직접 코딩 0%2.5 문구 검증
2.5 저작권과 공개

개인적으로 읽는 것과 공개 배포는 다릅니다

개인 사용

혼자 읽고 시험하는 범위

공개 링크

책·시·노래 문구의 인용 범위와 출처 표시 확인

직접 만든 문장이나 권리 문제가 없는 문구를 우선합니다.

직접 코딩 0%2.5 저작권과 공개
2.5 기능 검증

버튼이 보인다고 기능이 완성된 것은 아닙니다

카카오톡 공유처럼 별도 개발자 등록과 앱 키가 필요한 기능은
겉모양만 있고 동작하지 않을 수 있습니다.

직접 시험해 보고, 동작하지 않는 버튼은 수정하거나 제거합니다.
직접 코딩 0%2.5 기능 검증
2.6 Claude 웹의 한계

잘하는 것과 어려운 것을 구분합니다

Claude 웹에서 가능

업로드 파일 처리
아티팩트 제작
그 자리에서 작업
게시 링크 공유

운영·자동화에 한계

로컬 파일 직접 접근
폴더 일괄 처리
방문자 데이터 저장
DB 기반 서비스 운영

직접 코딩 0%2.6 Claude 웹의 한계
2.6 유리 상자 안의 천재

네 개의 벽이 있습니다

01

파일 접근

업로드한 파일 중심

02

일괄 처리

대화하며 하나씩

03

저장

영구 장부 운영 어려움

04

연결

허용된 커넥터 범위

직접 코딩 0%2.6 유리 상자 안의 천재
2.6 오해 방지

벽에도 작은 문은 있습니다

직접 코딩 0%2.6 오해 방지
2.6 Claude Code

브라우저 밖으로 작업장을 넓힙니다

01

폴더

허용한 범위의 파일

02

일괄 처리

여러 파일 자동 작업

03

저장·DB

결과와 데이터 관리

04

도구 연결

MCP 등으로 확장

Claude Code도 컴퓨터 전체에 무제한 접근하지 않습니다. 사용자가 허용한 폴더와 권한 안에서 일합니다.

직접 코딩 0%2.6 Claude Code
Part 1 마무리

대화하기에서
일 시키기

말하기 → 확인하기 → 통제하기
이 리듬은 Part 2~4에서도 그대로 반복됩니다.

직접 코딩 0%Part 1 마무리
2장 형성평가

설명할 수 있으면 2장 완료

1 개인화 지침과 현재 요청이 충돌하면?

2 아티팩트 공유 전에 할 검사는?

3 완성 조건의 두 가지 역할은?

4 AI 완료 보고가 검증이 아닌 이유는?

5 공개 문구에서 확인할 사항은?

6 Claude 웹과 Claude Code의 차이는?

직접 코딩 0%2장 형성평가
NEXT · 3장

AI를 브라우저 밖으로
꺼낼 준비를 합니다

터미널은 코딩 시험장이 아니라
AI를 내 컴퓨터에 들이는 입구입니다.

←/→ 이동 · F 전체화면 · 활동 시간 버튼 클릭