← → 이동 · F 전체화면
Introduction

Claude Code Workshop

빈 저장소에서 공개 URL까지

Introduction

오늘 만들 결과

업무 포트폴리오와 공개 URL 하나

Introduction

오늘 배우는 것

Claude Code · GitHub · GitHub Pages

Introduction

Claude Code란?

파일을 읽고 수정하고 검증하는 AI 작업 에이전트

Introduction

오늘 흐름

Idea → Prompt → Claude → GitHub → Website
Claude Code

좋은 Prompt

  • 목표를 한 문장으로 쓴다
  • 수정할 범위를 정한다
  • 제약과 공개 경계를 준다
  • 완료 기준을 명시한다
Claude Code

나쁜 Prompt

모호한 지시보다 검증 가능한 결과를 요청한다

Claude Code

Brainstorming

  • 대상은 누구인가
  • 왜 필요한가
  • 무엇을 공개해도 되는가
  • 완료는 무엇으로 증명하는가
Claude Code

Brainstorming Demo

대상 · 목적 · 공개 가능 정보 · 완료 기준 확인

Claude Code

Caveman

  • 핵심 의미 유지
  • 중복 문장 제거
  • 한 화면에 한 메시지
  • 검증 정보는 남긴다
Claude Code

Ponytail

  • index.html 먼저
  • 브라우저 확인
  • 필수 섹션 추가
  • 스타일은 마지막
Claude Code

Claude Code vs Codex

로컬 작업 흐름과 병렬 작업 흐름의 차이

Claude Code

오늘 사용할 Prompt

  • 먼저 질문으로 요구사항을 확정해줘
  • 계획을 제시하고 승인 전에는 구현하지 마
  • 최소 페이지부터 구현해줘
  • 화면과 diff를 확인하고 결과를 보고해줘
Demo

빈 Repository

아무것도 없는 상태에서 시작한다

Demo

Clone

작업 폴더를 로컬로 가져온다

Demo

Claude 실행

저장소 루트에서 Claude Code를 시작한다

Demo

Brainstorm

  • 대상과 목적 확인
  • 공개 가능 정보 분류
  • 페이지 섹션 확정
  • 완료 기준 합의
Demo

구현

index.html부터 최소 결과를 만든다

Demo

수정

화면과 문구를 작은 단위로 다듬는다

Demo

Git

  • git status
  • git diff
  • 의도한 파일만 포함
  • 명확한 commit message
Demo

완성

브라우저와 모바일에서 결과를 확인한다

Hands-on

실습 시작

지금부터 참가자가 직접 따라 한다

Hands-on

Repository 생성

새 저장소를 만들고 이름을 확정한다

Hands-on

Clone

저장소 주소를 복사해 로컬로 가져온다

Hands-on

Claude 실행

작업 폴더에서 Claude Code를 시작한다

Hands-on

Prompt 입력

목표와 완료 기준이 포함된 요청을 입력한다

Hands-on

생성

최소 페이지를 만들고 브라우저로 연다

Hands-on

수정

문구 · 구조 · 여백을 한 번에 하나씩 수정한다

Hands-on

확인

  • 브라우저 화면
  • 모든 링크
  • 개인정보 노출
  • 모바일 레이아웃
Hands-on

Commit

의미 있는 변경 단위로 기록한다

Hands-on

Push

원격 저장소에 변경을 올린다

Hands-on

Pages

GitHub Pages 배포를 활성화한다

Hands-on

공개 URL

루트 공개 주소 하나를 확인한다

Hands-on

완성

URL과 저장소를 동료에게 공유한다

Tips

자주 하는 실수

  • 모호한 목표
  • 한 번에 너무 많은 수정
  • 실제 비밀정보 사용
  • 검증 없이 완료 선언
Tips

Claude가 틀릴 때

  • 오류 화면을 보여준다
  • 재현 조건을 알려준다
  • 수정 범위를 좁힌다
  • 수정 후 다시 검증한다
Tips

Git이 꼬일 때

  • status로 현재 상태 확인
  • diff로 변경 범위 확인
  • 필요한 파일만 복구
  • 모르면 새 commit 전 멈춤
Tips

Pages가 안 될 때

  • Actions 실행 여부
  • Pages source 설정
  • 루트 index.html 존재
  • 배포 URL 재확인
Tips

업무 적용 사례

문서 · 대시보드 · 행사 페이지 · 반복 보고

Closing

오늘 배운 것

  • Brainstorming으로 요구사항 확정
  • Caveman으로 메시지 압축
  • Ponytail로 최소 구현
  • GitHub Pages로 공개
Closing

다음 단계

MCP · Agent · Automation으로 확장한다

Closing

Q&A

실제 업무에 어떻게 적용할지 질문한다