[SemiClass X Claude]

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

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

Local Build → GitHub → Vercel

Scope

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

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

쓰는 것브리프, 디자인 레퍼런스, 코딩 AI, GitHub, Vercel

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

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

Class Flow

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

01

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

02

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

03

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

04

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

Input

시작점은
브리프 또는 디자인 핸드오프입니다

이전 브랜딩 수업 참여자는 만든 디자인을 가져오면 됩니다. 참여하지 않은 분은 사전 인터뷰 스킬로 Planning Brief를 만들어 옵니다.

AI에게 바로 “웹사이트 만들어줘”라고 하지 않고, 누구를 위한 사이트인지, 어떤 섹션이 필요한지, 어떤 톤이어야 하는지를 먼저 고정합니다.

브랜드 핵심누구에게 어떤 인상을 남길지

섹션 구조Hero, 소개, 문제/해결, 작업물, CTA

시각 기준컬러, 레퍼런스, 피해야 할 분위기

Local Build

먼저 로컬에서
AI와 사이트를 만듭니다

코딩 AI가 파일을 만들고 수정합니다. 우리는 브리프를 주고, 화면을 보고, 문구와 레이아웃 피드백을 반복합니다.

1. 구조 생성섹션과 컴포넌트를 먼저 만듭니다.

2. 카피/스타일 조정브랜드 톤과 디자인 레퍼런스에 맞춥니다.

3. 반응형 확인모바일에서 글자, 버튼, 여백이 깨지지 않게 고칩니다.

GitHub Basics

GitHub는
소스를 보관하고 변경 이력을 남기는 곳입니다

Repository프로젝트 파일을 담는 저장소입니다.

Commit“이 시점의 변경”을 저장하는 기록입니다.

Push내 컴퓨터의 기록을 GitHub로 올리는 작업입니다.

초보자 관점에서는 “소스코드용 구글 드라이브 + 변경 이력 장부” 정도로 이해하면 충분합니다.

GitHub Hands-on

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

배포는 내 노트북 폴더가 아니라 GitHub 저장소를 기준으로 연결합니다. 그래서 완성된 로컬 프로젝트를 GitHub에 올리는 단계가 필요합니다.

저장소 만들기프로젝트 이름과 공개/비공개 설정을 확인합니다.

첫 커밋 올리기초기 버전과 README를 저장합니다.

배포 소스 확인Vercel이 읽을 브랜치와 파일 구조를 확인합니다.

Vercel Basics

Vercel은
사이트를 인터넷에 공개하는 배포 서비스입니다

GitHub 저장소를 연결하면 Vercel이 코드를 빌드하고, 누구나 접속할 수 있는 URL을 만들어 줍니다.

GitHub Build Vercel Public URL

Deploy Hands-on

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

01

Import ProjectVercel에서 GitHub 저장소를 선택

02

Build 확인프레임워크와 빌드 명령이 맞는지 확인

03

Deploy빌드가 끝나면 URL이 자동 발급

04

Smoke Test모바일, 링크, 섹션, CTA를 직접 확인

이번 수업은 DB/API/Auth가 없으므로 Vercel 환경변수 세팅은 최소화합니다. 필요한 경우 공개 사이트에 필요한 기본 설정만 확인합니다.

Fix Loop

배포가 실패하면
로그를 AI에게 맡깁니다

실패는 정상적인 과정입니다. 중요한 것은 에러 로그를 복사해 원인, 수정 파일, 재배포 체크리스트로 바꾸는 것입니다.

빌드 에러에러 메시지와 파일명을 그대로 전달합니다.

화면 깨짐스크린샷과 기대 화면을 같이 전달합니다.

재배포수정 → commit/push → Vercel 자동 재배포를 확인합니다.

Time Plan

2시간 수업 운영안

0-20분브리프 확인, 만들 사이트 범위 확정, 로컬 세팅

20-70분코딩 AI로 브랜드 사이트 구현, 반응형 수정

70-110분GitHub 등록, Vercel 배포, URL 확인

마지막 10분은 링크 공유, 다음에 확장할 기능, 개인별 후속 작업 정리로 씁니다.

Reference

기존 이미지 레퍼런스는
흐름 설명에 활용합니다

기존 바이브코딩 덱의 “로컬에서만 열림 → 공개 URL” 레퍼런스를 가져와, 이번 브랜드 웹사이트 수업의 배포 개념 설명에 맞게 사용합니다.

다만 구현 범위는 브랜드 웹사이트 퍼블리싱입니다. DB, 외부 API, 인증 시연은 이번 덱에서 제외했습니다.

Outcome

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

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

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

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

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

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

Brand Brief

Visual Ref

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

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

시작점은
브리프 또는 디자인 핸드오프입니다

먼저 로컬에서
AI와 사이트를 만듭니다

GitHub는
소스를 보관하고 변경 이력을 남기는 곳입니다

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

Vercel은
사이트를 인터넷에 공개하는 배포 서비스입니다

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

배포가 실패하면
로그를 AI에게 맡깁니다

2시간 수업 운영안

기존 이미지 레퍼런스는
흐름 설명에 활용합니다

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

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

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

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

시작점은브리프 또는 디자인 핸드오프입니다

먼저 로컬에서AI와 사이트를 만듭니다

GitHub는소스를 보관하고 변경 이력을 남기는 곳입니다

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

Vercel은사이트를 인터넷에 공개하는 배포 서비스입니다

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

배포가 실패하면로그를 AI에게 맡깁니다

2시간 수업 운영안

기존 이미지 레퍼런스는흐름 설명에 활용합니다

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

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

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

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

시작점은
브리프 또는 디자인 핸드오프입니다

먼저 로컬에서
AI와 사이트를 만듭니다

GitHub는
소스를 보관하고 변경 이력을 남기는 곳입니다

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

Vercel은
사이트를 인터넷에 공개하는 배포 서비스입니다

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

배포가 실패하면
로그를 AI에게 맡깁니다

기존 이미지 레퍼런스는
흐름 설명에 활용합니다

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