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

먼저 이해하기

전체 여정을 한눈에 봅니다

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

1. 1
   설계

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

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

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

   도구 교안 보기
3. 3
   제작

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

4. 4
   검수

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

5. 5
   배포

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

   GitHub 교안 보기

앞 교안을 먼저 확인합니다

1단계

준비물을 확인합니다

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

2단계

설계 문서를 준비합니다

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

3단계

도구를 연결합니다

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

4단계

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

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

1. 1
   공통 구조 먼저

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

2. 2
   히어로 섹션

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

3. 3
   본문 섹션

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

4. 4
   인터랙션

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

5. 5
   반응형 마무리

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

도구에 전달할 요청문

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

5단계

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

구조가 끝난 뒤 인터랙션을 넣습니다. 디자인에 실제로 있는 동작만 만들고, 복잡한 모션은 라이브러리를 골라 요청문에 적습니다. 어떤 라이브러리를 언제 쓰는지는 도구 교안의 선택표에 정리되어 있습니다.

6단계

배포 전에 검수합니다

배포하면 주소로 공개되므로, 올리기 전에 브라우저에서 직접 확인합니다. 디자인 일치·반응형·인터랙션·접근성·콘솔을 도구 교안의 검수 항목대로 점검합니다.

7단계

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

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

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

완성

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

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