Note
이 문서는 Figma에서 완성된 목업 디자인을 AI 도구(Figma MCP, Copilot)의 도움을 받아 실제 HTML/CSS 코드로 구현하고 GitHub에 업로드하는 방법을 설명합니다. 가상 서비스 목업 디자인에서 만든 디자인을 실제 웹으로 전환하는 단계입니다.
Figma에서 디자인된 목업을 실제 웹 코드로 변환하는 과정에서 AI 도구는 생산성을 크게 향상시킬 수 있습니다. Day 7: AI를 활용한 웹 개발 및 배포에서 배운 내용을 바탕으로 진행합니다.
Day 7: Figma MCP 설치 및 사용하기에서 배운 대로 Figma MCP 플러그인을 사용하여 디자인을 HTML, CSS 코드로 변환합니다.
- Figma 파일 열기: 디자인이 완성된 Figma 파일을 엽니다.
- 플러그인 실행: 변환하고 싶은 프레임이나 요소를 선택한 후,
Plugins>Figma MCP를 실행합니다. - 코드 생성 및 복사: 플러그인에서 생성된 HTML, CSS 코드를 복사하여 로컬 프로젝트 폴더에
index.html,style.css등의 파일로 저장합니다.
Figma MCP가 생성한 코드의 부족한 부분을 채우거나, 복잡한 JavaScript 기능을 구현할 때 Day 7: Copilot 설치 및 사용하기에서 배운 GitHub Copilot의 도움을 받습니다.
- 코드 자동 완성: HTML 구조, CSS 스타일, JavaScript 함수 등을 작성할 때 Copilot의 제안을 활용하여 빠르게 코드를 완성합니다.
- 주석을 코드로: 필요한 기능에 대한 설명을 주석으로 작성하면 Copilot이 해당 기능을 구현하는 코드를 제안합니다. (예: "스크롤 시 헤더 배경색 변경", "폼 유효성 검사 로직 추가")
- 반응형 조정: Figma MCP가 생성한 코드에 추가적인 반응형 CSS (미디어 쿼리 등)를 Copilot의 도움을 받아 작성하여 다양한 화면 크기에 최적화합니다.
AI가 생성한 코드는 시작점일 뿐이므로, 반드시 개발자의 검토와 개선이 필요합니다. Day 7: AI가 구현을 잘하게 유도하기에서 배운 내용을 바탕으로 코드를 다듬습니다.
- 코드 가독성: 변수명, 함수명 등을 명확하게 작성하고, 적절한 주석을 추가하여 코드의 가독성을 높입니다.
- 성능 최적화: 불필요한 코드나 비효율적인 로직이 없는지 확인하고 최적화합니다.
- 웹 표준 및 접근성: 생성된 코드가 웹 표준을 준수하고 Day 5: 접근성이 나쁜 UI/UX와 해결 방안에서 배운 접근성 원칙을 따르는지 확인합니다.
프로젝트 코드를 Git으로 버전 관리하여 변경 이력을 추적하고, 나중에 문제가 발생했을 때 이전 버전으로 되돌릴 수 있도록 합니다. Day 7: Git과 GitHub를 참고합니다.
- Git 초기화: 프로젝트 폴더에서
git init명령어를 사용하여 Git 저장소를 초기화합니다. - 파일 추가:
git add .명령어로 모든 변경된 파일을 스테이징 영역에 추가합니다. - 커밋:
git commit -m "feat: 랜딩 페이지 초기 구현"과 같이 의미 있는 커밋 메시지와 함께 변경 사항을 기록합니다.
로컬에서 버전 관리된 코드를 GitHub 원격 저장소에 업로드하여 백업하고, 나중에 동료들과 공유하거나 배포할 수 있도록 준비합니다. Day 7: GitHub에 내 코드 올리기를 참고합니다.
- GitHub 저장소 생성: GitHub 웹사이트에서 새로운 저장소를 생성합니다.
- 원격 저장소 연결:
git remote add origin <GitHub 저장소 URL>명령어로 로컬 저장소와 원격 저장소를 연결합니다. - 코드 푸시:
git push -u origin main명령어로 코드를 GitHub에 업로드합니다.
Tip
AI 도구는 개발 과정을 가속화하지만, 최종적인 코드의 품질과 책임은 개발자에게 있습니다. AI가 생성한 코드를 맹신하기보다, 항상 비판적인 시각으로 검토하고 개선하는 습관을 들이세요.
Note
다음 내용인 Netlify로 자신의 프로젝트 배포하기에서는 GitHub에 업로드된 웹 프로젝트를 Netlify를 사용하여 온라인에 배포하는 방법을 학습합니다.