[SemiClass X Claude Code/Codex]

나만의 브랜드 웹사이트를
공개 URL까지 만듭니다

이번 수업의 목표는 코딩 AI로 완성형 소개/랜딩 페이지를 만들고, GitHub에 소스를 올린 뒤 Vercel로 배포하는 것입니다.

Local Build -> GitHub -> Vercel

Scope

이번 수업은
완성형 정적 사이트에 집중합니다

만드는 것브랜드/개인/모임/서비스 소개 랜딩 페이지와 공유 가능한 공개 URL

쓰는 것브리프, 디자인 레퍼런스, Claude Code/Codex, GitHub, Vercel

안 하는 것DB 연동, 외부 API, 로그인/인증은 이번 수업 범위에서 제외

저장 기능이 필요해 보이는 아이디어도 이번에는 목업 데이터나 정적 섹션으로 표현합니다. 먼저 공개 가능한 완성형 사이트를 만드는 것이 목표입니다.

Class Flow

수업의 핵심 흐름은
네 단계입니다

01

브리프 정리핸드오프 디자인 또는 인터뷰 브리프를 구현 기준으로 정리

02

로컬 구현내 노트북에서 코딩 AI와 섹션, 카피, 반응형을 제작

03

GitHub 등록소스와 변경 이력을 저장소에 올려 배포 소스로 준비

04

Vercel 배포GitHub 저장소를 연결해 공개 URL을 발급

Tool Roadmap

네 서비스는
한 줄의 작업 흐름입니다

AI가 만들고, Git/GitHub가 기록하고, Vercel이 공개하고, Supabase는 다음 단계의 데이터 기능을 맡습니다.

오늘의 주력은 앞의 세 단계입니다. Supabase는 “왜 언젠가 필요해지는지”만 짚고 넘어갑니다.

Generated Image · Coding Agent

Claude Code / Codex는
구현 파티원입니다

말로 설명한 브리프를 실제 파일 변경, 화면 수정, 에러 해결로 바꿔주는 로컬 작업자입니다.

brief -> filespreview -> feedbackfix loop

Concept · Coding Agent

채팅 답변이 아니라
프로젝트를 읽고 고치는 흐름입니다

AI 에이전트는 코드 설명을 해주는 데서 끝나지 않고, 현재 폴더의 파일을 읽고 수정안을 만들며 프리뷰를 보며 다시 고치는 반복을 도와줍니다.

핵심 개념: “프롬프트 한 번”이 아니라 브리프, 화면 확인, 피드백, 수정의 반복 루프입니다.

AI 에이전트 작동 원리 brief -> edit -> preview -> feedback

INPUT브리프

누구를 위한 사이트인지, 어떤 섹션과 톤이 필요한지 알려줍니다.

->

AGENTClaude Code / Codex

현재 파일과 요청을 함께 읽고 수정 계획을 세웁니다.

->

EDIT파일 변경

HTML, CSS, 컴포넌트, 카피를 실제 프로젝트에 반영합니다.

->

CHECK미리보기

브라우저에서 보고 깨진 곳, 어색한 문구, 모바일 문제를 찾습니다.

좋은 결과는 “AI가 한 번에 맞힘”이 아니라 사람이 방향을 잡고 AI가 빠르게 고치는 반복에서 나옵니다.

왜 필요?빈 화면에서 시작하는 부담을 줄이고 구현 속도를 올립니다.

무엇을 조심?브리프가 흐리면 결과도 흐려집니다. 기준을 먼저 고정합니다.

오늘의 역할섹션 생성, 스타일 조정, 반응형 수정, 에러 해결.

Setup · Coding Agent

설치보다 먼저
작업 폴더와 기준을 준비합니다

수업 선택지Claude Code 또는 Codex 중 사용할 수 있는 코딩 AI로 진행합니다.

작업 단위채팅방이 아니라 프로젝트 폴더 하나를 기준으로 대화합니다.

좋은 입력브리프, 레퍼런스, 원하는 섹션, 피해야 할 분위기를 함께 줍니다.

01

계정/도구 로그인 확인수업 전에 사용하는 AI 도구가 열리고 로그인되는지 확인합니다.

02

프로젝트 폴더 열기AI가 수정할 파일이 모이는 폴더를 만들고 그 위치에서 작업합니다.

03

프리뷰를 계속 보기AI의 결과를 믿고 끝내지 않고 브라우저 화면을 보며 피드백합니다.

Generated Image · Git/GitHub

Git은 세이브 포인트,
GitHub는 원격 창고입니다

내 컴퓨터의 작업 이력을 안전하게 남기고, 배포 서비스가 읽을 수 있는 인터넷 저장소로 올립니다.

commitpushrepository

Concept · Git/GitHub

웹사이트 파일은
기록되고 공유되어야 배포됩니다

Git은 “어느 시점에 무엇이 바뀌었는지”를 남기고, GitHub는 그 기록을 인터넷에 올려 Vercel 같은 서비스가 가져갈 수 있게 합니다.

핵심 개념: GitHub는 단순 업로드함이 아니라 배포와 협업의 기준점이 되는 원격 저장소입니다.

Git/GitHub 작동 원리 folder -> commit -> push -> remote

LOCAL작업 폴더

AI와 내가 수정한 사이트 파일이 내 노트북에 있습니다.

->

GITCommit

지금 상태를 저장 지점으로 남깁니다. 되돌릴 기준이 생깁니다.

->

REMOTEGitHub Repo

내 기록을 인터넷 저장소로 올립니다. 링크와 권한이 생깁니다.

->

NEXT배포 소스

Vercel이 이 저장소를 읽어 사이트를 빌드하고 공개합니다.

작업이 바뀔 때마다 commit/push를 남기면 “어디까지 잘 됐는지”와 “무엇이 깨졌는지”를 분리해서 볼 수 있습니다.

Git내 컴퓨터 안의 변경 이력 장부.

GitHub그 장부와 파일을 올려두는 원격 저장소.

배포 연결Vercel은 GitHub의 특정 브랜치를 기준으로 움직입니다.

Setup · Git/GitHub

수업에서는
저장소 등록까지 진행합니다

Git 설치 확인터미널에서 Git 명령이 동작하는지 확인합니다.

GitHub 계정이메일 인증과 로그인 상태를 미리 확인하면 수업 흐름이 끊기지 않습니다.

Repository프로젝트 이름, 공개/비공개 설정, 기본 브랜치를 확인합니다.

01

저장소 만들기GitHub에서 새 repository를 만들고 프로젝트와 연결합니다.

02

첫 commit 남기기완성 직전이 아니라 초기 버전부터 기록을 남깁니다.

03

push 후 확인GitHub 웹 화면에서 파일이 올라갔는지 확인하고 Vercel 연결 준비를 끝냅니다.

Generated Image · Vercel

Vercel은
공개 URL을 만드는 배포 관문입니다

GitHub 저장소를 가져와 빌드하고, 누구나 접속할 수 있는 웹 주소로 바꿔줍니다.

import repobuildpublic URL

Concept · Vercel

내 노트북 파일은
그 자체로 인터넷 사이트가 아닙니다

Vercel은 GitHub에 올라간 코드를 서버에서 빌드하고, 빠르게 열리는 공개 URL로 배포합니다. 이후 push가 들어오면 다시 배포됩니다.

핵심 개념: 배포는 “파일을 올림”이 아니라 저장소를 기준으로 빌드, 공개, 갱신되는 자동 흐름입니다.

Vercel 작동 원리 repo -> build -> deploy -> url

SOURCEGitHub Repo

Vercel이 읽을 기준 소스입니다. 브랜치와 폴더 구조가 중요합니다.

->

BUILDBuild Runner

사이트 파일을 인터넷에서 열 수 있는 결과물로 변환합니다.

->

DEPLOYHosting

결과물을 전 세계 사용자가 접근 가능한 위치에 올립니다.

->

PUBLICURL

휴대폰, 포트폴리오, 고객에게 보낼 수 있는 링크가 생깁니다.

배포 실패는 끝이 아니라 로그가 생긴 상태입니다. 로그를 AI에게 주면 원인, 수정 파일, 재배포 순서로 바꿀 수 있습니다.

왜 필요?로컬 미리보기를 외부 사람이 볼 수 있는 사이트로 바꿉니다.

자동화GitHub에 push하면 Vercel이 새 버전을 다시 빌드합니다.

오늘의 완료 기준모바일에서 열리는 공개 URL을 직접 확인합니다.

Setup · Vercel

배포 실습은
GitHub 연결 방식으로 진행합니다

가입 방식GitHub 계정으로 Vercel에 로그인하면 저장소 연결이 쉬워집니다.

설정 최소화이번 수업은 정적 브랜드 사이트라 환경변수와 DB 설정을 최소화합니다.

확인 기준첫 화면, 섹션 이동, 버튼 링크, 모바일 표시를 직접 봅니다.

01

Import ProjectVercel에서 GitHub 저장소를 선택합니다.

02

Build 확인프레임워크와 빌드 명령이 자동 감지되는지 확인합니다.

03

Smoke Test발급된 URL을 휴대폰에서 열고 깨진 화면과 링크를 확인합니다.

Generated Image · Supabase

Supabase는
다음 단계의 데이터 창고입니다

사이트가 방문자 입력, 로그인, 파일, 예약처럼 “기억해야 하는 기능”을 갖게 될 때 필요해집니다.

databaseauthstorage

Concept · Supabase

정적 사이트가
기억을 갖고 싶을 때 백엔드가 필요합니다

HTML/CSS만 있는 사이트는 스스로 데이터를 오래 보관하지 못합니다. Supabase는 데이터베이스, 로그인, 파일 저장소를 API로 빌려주는 역할을 합니다.

오늘은 언급만 합니다. 먼저 정적 사이트를 끝내고, 기능이 실제로 필요해졌을 때 붙이는 것이 순서입니다.

Supabase 작동 원리 site -> api -> database/auth/storage

FRONT웹사이트

문의 폼, 예약 버튼, 회원 전용 페이지 같은 입력 지점이 생깁니다.

->

APISupabase
SDK

브라우저나 서버 코드가 Supabase 프로젝트와 안전하게 통신합니다.

->

BACKENDDB
Auth
Storage

데이터, 사용자, 파일이 웹사이트 밖의 관리되는 공간에 저장됩니다.

->

RESULT동적 기능

새로고침해도 남는 문의 내역, 로그인 상태, 업로드 파일을 만들 수 있습니다.

Supabase는 “처음부터 붙이는 멋진 기술”이 아니라, 정적 페이지로 표현하기 어려운 기억과 권한이 생겼을 때 쓰는 확장 장치입니다.

오늘의 범위설치 실습 없음. 개념과 사용 시점만 이해합니다.

필요한 순간문의 저장, 로그인, 결제 이후 자료실, 관리자 페이지.

대체 방법오늘은 목업 데이터, 정적 섹션, localStorage 수준으로 충분합니다.

Setup · Supabase

Supabase는
오늘 만들 사이트의 다음 확장입니다

오늘 안 하는 것프로젝트 생성, 테이블 설계, 로그인 정책, 환경변수 연결은 실습하지 않습니다.

오늘 하는 것어떤 요구가 생기면 Supabase가 필요해지는지 판단 기준을 잡습니다.

다음 수업 후보문의 폼 저장, 예약 목록, 회원 전용 자료실, 관리자 대시보드.

01

정적 사이트 먼저 완성내용, 디자인, 공개 URL이 먼저입니다. 백엔드는 그 다음입니다.

02

저장해야 할 데이터 식별방문자가 남기는 정보와 관리자가 봐야 할 정보를 분리합니다.

03

보안/권한을 별도 주제로 다루기로그인과 DB 권한은 대충 붙이면 위험하므로 별도 단계로 학습합니다.

Outcome

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

완성형 사이트소개/랜딩 페이지로 바로 공유 가능한 첫 버전

GitHub 저장소소스와 변경 이력이 남은 프로젝트 기록

Vercel URL휴대폰과 외부 사람에게 보낼 수 있는 공개 링크

오늘 목표: 예쁜 화면이 아니라, 배포까지 끝난 내 사이트

나만의 브랜드 웹사이트를
공개 URL까지 만듭니다

Brand Brief

Visual Ref

이번 수업은
완성형 정적 사이트에 집중합니다

수업의 핵심 흐름은
네 단계입니다

네 서비스는
한 줄의 작업 흐름입니다

Claude Code / Codex는
구현 파티원입니다

채팅 답변이 아니라
프로젝트를 읽고 고치는 흐름입니다

설치보다 먼저
작업 폴더와 기준을 준비합니다

Git은 세이브 포인트,
GitHub는 원격 창고입니다

웹사이트 파일은
기록되고 공유되어야 배포됩니다

수업에서는
저장소 등록까지 진행합니다

Vercel은
공개 URL을 만드는 배포 관문입니다

내 노트북 파일은
그 자체로 인터넷 사이트가 아닙니다

배포 실습은
GitHub 연결 방식으로 진행합니다

Supabase는
다음 단계의 데이터 창고입니다

정적 사이트가
기억을 갖고 싶을 때 백엔드가 필요합니다

Supabase는
오늘 만들 사이트의 다음 확장입니다

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

나만의 브랜드 웹사이트를공개 URL까지 만듭니다

이번 수업은완성형 정적 사이트에 집중합니다

수업의 핵심 흐름은네 단계입니다

네 서비스는한 줄의 작업 흐름입니다

Claude Code / Codex는구현 파티원입니다

채팅 답변이 아니라프로젝트를 읽고 고치는 흐름입니다

설치보다 먼저작업 폴더와 기준을 준비합니다

Git은 세이브 포인트,GitHub는 원격 창고입니다

웹사이트 파일은기록되고 공유되어야 배포됩니다

수업에서는저장소 등록까지 진행합니다

Vercel은공개 URL을 만드는 배포 관문입니다

내 노트북 파일은그 자체로 인터넷 사이트가 아닙니다

배포 실습은GitHub 연결 방식으로 진행합니다

Supabase는다음 단계의 데이터 창고입니다

정적 사이트가기억을 갖고 싶을 때 백엔드가 필요합니다

Supabase는오늘 만들 사이트의 다음 확장입니다

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

나만의 브랜드 웹사이트를
공개 URL까지 만듭니다

이번 수업은
완성형 정적 사이트에 집중합니다

수업의 핵심 흐름은
네 단계입니다

네 서비스는
한 줄의 작업 흐름입니다

Claude Code / Codex는
구현 파티원입니다

채팅 답변이 아니라
프로젝트를 읽고 고치는 흐름입니다

설치보다 먼저
작업 폴더와 기준을 준비합니다

Git은 세이브 포인트,
GitHub는 원격 창고입니다

웹사이트 파일은
기록되고 공유되어야 배포됩니다

수업에서는
저장소 등록까지 진행합니다

Vercel은
공개 URL을 만드는 배포 관문입니다

내 노트북 파일은
그 자체로 인터넷 사이트가 아닙니다

배포 실습은
GitHub 연결 방식으로 진행합니다

Supabase는
다음 단계의 데이터 창고입니다

정적 사이트가
기억을 갖고 싶을 때 백엔드가 필요합니다

Supabase는
오늘 만들 사이트의 다음 확장입니다

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