디자인만으로 사이트를 공개하는 통합 실전

디자인만 있는 상태에서 GitHub Pages까지 만듭니다

이 교안은 앞에서 배운 설계, 도구, 배포를 하나로 잇습니다. 디자인 시안만 있는 상태에서 시작해 메인페이지를 만들고, 마지막에는 GitHub Pages 주소로 사이트를 공개합니다.

대상: 앞 교안을 마친 학습자준비물: 디자인 시안결과물: 공개된 웹사이트
전체 여정부터 보기

먼저 이해하기

전체 여정을 한눈에 봅니다

이 교안은 새 개념보다 순서를 잇는 데 집중합니다. 각 단계의 자세한 방법은 앞 교안에 있으므로, 여기서는 무엇을 어떤 순서로 하는지와 마지막 배포를 다룹니다.

  1. 1
    설계

    디자인을 분석표·PRD·규칙 문서로 정리합니다.

    설계 교안 보기
  2. 2
    도구 연결

    AI 코딩 도구를 설치하고 Figma MCP를 연결합니다.

    도구 교안 보기
  3. 3
    제작

    설계 문서와 디자인으로 메인페이지를 섹션 단위로 만듭니다.

  4. 4
    검수

    디자인과 대조하고 반응형·인터랙션·접근성을 확인합니다.

  5. 5
    배포

    GitHub에 올리고 GitHub Pages로 사이트를 공개합니다.

    GitHub 교안 보기

앞 교안을 먼저 확인합니다

설계 교안

디자인 분석표·PRD·규칙 문서를 만드는 방법

도구 교안

Antigravity IDE·Codex·Claude Code 사용법과 Figma MCP 연결

GitHub 교안

저장소 만들기와 pull·commit·push

1단계

준비물을 확인합니다

  • 구현할 화면이 있는 Figma 디자인과 프레임 링크
  • 사용할 AI 코딩 도구 하나(설치·로그인 완료)
  • GitHub 계정과 빈 저장소를 만들 준비
  • 프로젝트를 담을 빈 폴더
바닐라로 만듭니다

이 실전은 프레임워크 없이 HTML, CSS, JavaScript로 만듭니다. GitHub Pages는 이렇게 만든 정적 파일을 그대로 공개하기에 알맞습니다.

2단계

설계 문서를 준비합니다

디자인을 분석표로 정리하고, PRD와 규칙 문서를 만듭니다. 자세한 작성법은 설계 교안에 있습니다.

설계 교안에서 문서 만들기
이 단계 완료 확인
  • 디자인 분석표에 색·폰트·간격·상태를 적었습니다.
  • PRD에 화면·완료 조건·제외 범위가 있습니다.
  • 사용할 도구에 맞는 규칙 파일을 폴더에 두었습니다.

3단계

도구를 연결합니다

도구 하나를 골라 Figma MCP를 연결합니다. 도구별 연결 방법은 도구 교안에 있습니다.

도구 교안에서 Figma MCP 연결
이 단계 완료 확인
  • 도구에서 Figma MCP가 연결됨으로 표시됩니다.
  • Figma에서 만들 프레임의 링크를 복사했습니다.

4단계

메인페이지를 섹션 단위로 만듭니다

한 번에 전체를 요청하지 않고, 공통 구조부터 시작해 섹션을 하나씩 이어서 만듭니다.

  1. 1
    공통 구조 먼저

    header, nav, main, footer 같은 공통 뼈대와 디자인 토큰을 먼저 만듭니다.

  2. 2
    히어로 섹션

    가장 위 첫 화면부터 만들고 디자인과 대조합니다.

  3. 3
    본문 섹션

    그다음 섹션을 하나씩 이어서 만듭니다. 한 번에 전체를 요청하지 않습니다.

  4. 4
    인터랙션

    구조가 끝난 뒤 디자인에 있는 움직임만 더합니다.

  5. 5
    반응형 마무리

    360px, 768px, 1280px에서 무너지는 곳을 고칩니다.

도구에 전달할 요청문

도구 교안과 같은 요청문을 사용합니다. 설계 문서를 먼저 읽게 한 뒤 Figma 링크와 함께 화면을 요청합니다.

프로젝트와 규칙 먼저 확인하기
아직 코드를 수정하지 마세요.

현재 프로젝트의 PRD.md와 지침 파일을 읽고 다음을 확인해 주세요.

1. 폴더 구조와 시작 파일
2. 사용 중인 기술과 패키지
3. 공통 CSS 변수와 디자인 토큰
4. 재사용할 수 있는 컴포넌트와 유틸리티
5. 이미지, 아이콘, 폰트 에셋
6. 실행, 빌드, 테스트 명령
7. 이번 작업에 영향을 주는 추가 규칙 파일

확인한 사실과 아직 확인하지 못한 내용을 나눠서 보고해 주세요.
코드는 수정하지 마세요.

공통 작업 규칙:
- PRD.md와 프로젝트 지침 파일을 먼저 읽어 주세요.
- 작업 전 기존 폴더 구조, 공통 스타일, 에셋, 패키지를 확인해 주세요.
- 확인된 사실과 추정을 구분해 주세요.
- 디자인에 없는 기능과 에셋을 임의로 만들지 마세요.
- 기존 코드와 공통 컴포넌트를 우선 재사용해 주세요.
- CSS class와 HTML id는 snake_case, JavaScript 변수와 함수는 camelCase로 작성해 주세요.
- 수정 후 360px, 768px, 1280px 화면과 키보드 포커스, 콘솔 오류를 확인해 주세요.
- 결과에는 변경 파일, 구현 내용, 검증 결과, 확인하지 못한 부분을 구분해 작성해 주세요.
디자인 분석과 구현 계획 만들기
제공한 디자인을 분석하고 구현 계획을 작성해 주세요.

디자인 자료: [Figma 링크 또는 이미지 경로]
이번 작업 화면: [화면 이름]

다음을 확인해 주세요.

1. 페이지와 공통 영역 구조
2. 색상, 폰트, 간격, 라운드, 그림자
3. 모바일, 태블릿, 데스크톱 배치 변화
4. hover, focus, active, disabled 상태
5. 로딩, 빈 상태, 오류 상태
6. 실제로 필요한 이미지, 아이콘, 폰트
7. 기존 코드에서 재사용할 부분
8. 수정할 파일과 수정하지 않을 파일

디자인에서 직접 확인한 내용과 추정한 내용을 구분해 주세요.
모르는 내용을 임의로 결정하지 말고 질문 목록으로 남겨 주세요.
아직 코드는 수정하지 마세요.

공통 작업 규칙:
- PRD.md와 프로젝트 지침 파일을 먼저 읽어 주세요.
- 작업 전 기존 폴더 구조, 공통 스타일, 에셋, 패키지를 확인해 주세요.
- 확인된 사실과 추정을 구분해 주세요.
- 디자인에 없는 기능과 에셋을 임의로 만들지 마세요.
- 기존 코드와 공통 컴포넌트를 우선 재사용해 주세요.
- CSS class와 HTML id는 snake_case, JavaScript 변수와 함수는 camelCase로 작성해 주세요.
- 수정 후 360px, 768px, 1280px 화면과 키보드 포커스, 콘솔 오류를 확인해 주세요.
- 결과에는 변경 파일, 구현 내용, 검증 결과, 확인하지 못한 부분을 구분해 작성해 주세요.

5단계

디자인에 있는 움직임을 더합니다

구조가 끝난 뒤 인터랙션을 넣습니다. 디자인에 실제로 있는 동작만 만들고, 복잡한 모션은 아래 라이브러리를 골라 요청문에 적습니다.

인터랙션 라이브러리 선택
라이브러리언제 사용로드 방법
GSAP복잡한 등장·전환 모션이 있을 때공식 CDN script
ScrollTrigger스크롤 위치와 연결된 모션GSAP 플러그인
Lenis부드러운 스크롤이 요구사항일 때공식 CDN script
Swiper실제 슬라이더·갤러리공식 CDN script + CSS
SplitType글자 단위 텍스트 애니메이션공식 CDN script
Lottie디자이너가 준 JSON 모션lottie-web CDN script
Three.js3D 또는 캔버스 배경공식 CDN 또는 모듈

6단계

배포 전에 검수합니다

배포하면 주소로 공개되므로, 올리기 전에 브라우저에서 직접 확인합니다.

배포 전 검수 항목
확인방법
디자인 일치브라우저 화면을 Figma 스크린샷과 나란히 비교합니다.
반응형360px, 768px, 1280px에서 잘림·겹침·가로 스크롤을 확인합니다.
인터랙션실제로 넣기로 한 동작만 동작하는지, 과한 모션은 없는지 확인합니다.
접근성키보드 Tab 순서와 focus-visible, 모션 감소 설정을 확인합니다.
콘솔브라우저 콘솔 오류와 남은 console.log를 확인합니다.

7단계

GitHub Pages로 사이트를 공개합니다

검수를 마쳤으면 마지막으로 사이트를 공개합니다. 만든 정적 파일을 GitHub에 올리고 저장소 설정에서 Pages를 켜면 누구나 볼 수 있는 github.io 주소가 생깁니다.

저장소 만들기와 push, Pages 설정, 상대경로·.nojekyll 같은 배포 주의사항은 GitHub 교안에 정리되어 있습니다. 그 순서를 그대로 따라 하면 됩니다.

GitHub 교안에서 Pages 배포하기
공개 전 마지막 확인

배포하면 주소로 누구나 볼 수 있습니다. 상대경로로 이미지·CSS·JS가 정상 표시되는지 검수 단계에서 확인한 뒤 올립니다.

완성

디자인이 공개된 사이트가 되었습니다

여기까지 마치면 디자인 시안 하나에서 시작해 공개된 웹사이트까지 완성한 것입니다.

통합 실전 완료 확인
  • 설계 문서를 만들고 도구에 전달했습니다.
  • 메인페이지를 섹션 단위로 만들고 디자인과 대조했습니다.
  • 디자인에 있는 인터랙션만 넣었습니다.
  • 360px, 768px, 1280px에서 가로 스크롤 없이 보입니다.
  • GitHub에 push하고 GitHub Pages 주소에서 사이트가 열립니다.
  • 이미지·CSS·JS가 상대경로로 정상 표시됩니다.

축하합니다

이제 다른 디자인으로 혼자 반복해 봅니다

같은 순서를 새 디자인에 적용하면, 설계부터 배포까지 스스로 사이트를 만들 수 있습니다.

디자인만 있는 상태에서 GitHub Pages까지 바이브메이킹 통합 실전 | 복붙랩