06 GeminiCli와 Figma 디자인으로 바이브코딩 하기

1. GeminiCli와 Figma 디자인으로 바이브코딩 하기

피그마(디자인 도구) 화면을 웹 문서(HTML)로 바꿀 때, 나중을 위해 코드를 쉽게 수정하고 관리하는 방법과 지시어(프롬프트) 안내서.

1.1. 수정 및 관리를 위한 팁

• 한 번에 모두 만들지 않는다: 머리말, 본문, 꼬리말 등 구역을 작게 나누어 인공지능에게 지시한다. 문제 발생 시 원인을 찾기 쉽다.
• 이름 짓기 규칙을 정한다: 각 구역을 묶는 상자(클래스명)의 이름을 알아보기 쉽게 통일하여 인공지능에게 미리 알려준다.
• 뼈대와 꾸밈을 분리한다: 문서 구조를 먼저 잡고, 그 후에 꾸밈 요소(CSS)를 적용하도록 작업 순서를 나눈다.
• 설명(주석)을 요구한다: 코드가 시작하고 끝나는 부분에 반드시 설명을 적도록 지시한다.

1.2. 지시어(프롬프트) 양식

피그마(디자인 도구) 화면을 웹 문서(HTML)로 변환할 때 제미나이 명령줄 접속 도구(Gemini CLI)가 읽고 따를 수 있는 ‘제품 요구사항 정의서(기획서)’ 기본 틀이다.

이 내용을 프로젝트 폴더에 GEMINI.md 파일로 저장하여 인공지능이 작업 기준으로 삼게 한다.

이 양식을 복사하여 괄호 안의 내용을 현재 작업 중인 디자인 정보에 맞게 수정하여 사용한다.

1
### 피그마 웹 문서 변환 기획서
2

3
**1. 프로젝트 목적**
4
* 신입 UXUI 디자이너 (홍길동)의 구직용 포트폴리오 프로젝트이다.
5
* 제공된 (피그마 디자인)을 웹 표준에 맞는 문서 뼈대(HTML)와 꾸밈 요소(CSS)로 완벽하게 변환한다.
6
* 기기 화면 크기에 따라 유연하게 변하는 반응형 웹으로 제작한다.
7

8
**2. 디자인 기본 규칙**
9
* 주요 색상: (예: 배경색 하얀색, 주요 강조색 파란색)
10
* 글꼴 지정: (예: 기본 글꼴 맑은 고딕, 기본 크기 16픽셀)
11
* 간격 규칙: (예: 상자 안쪽 여백 16픽셀, 바깥 여백 24픽셀)
12

13
**3. 화면 구역 정의**
14
* 최상단 머리말: 상표(로고) 이미지와 주요 이동 메뉴 배치.
15
* 중간 본문: 디자인 도안에 나타난 핵심 정보와 기능 배치.
16
* 최하단 꼬리말: 저작권 정보와 부가 연결 메뉴 배치.
17

18
**4. 인공지능 코드 작성 지침 (필수)**
19
* 문서 뼈대와 꾸밈 코드를 명확히 나누어서 작성한다.
20
* 상자 이름은 누구나 역할을 알 수 있는 직관적인 영문 소문자로 짓는다.
21
* 코드가 시작하고 끝나는 주요 구역마다 한글로 부가 설명을 반드시 적는다.
22
* 인사말이나 추가 설명 등 불필요한 문장은 생략하고, 복사해서 바로 적용할 수 있는 코드표만 결과물로 출력한다.
23
* 코드 작성 수준은 기초 지식이 없는 상태에서 6개월 정도 배운 초보자의 눈높이에 맞춰 알기 쉽게 구현한다.
24
* 인공지능 기계가 작성한 코드로 판독기에 검출되지 않도록, 사람이 직접 작성한 것처럼 자연스러운 형태로 코드를 짠다.

1.3. 상황별 추천 명령어

초보자가 웹 문서 구조를 잡거나 동적 웹페이지를 연동할 때 유용한 명령어 목록이다.

• 단일 질문 명령어gemini "웹 문서의 뼈대를 만드는 기본 코드를 작성해 줘" 간단한 코드 조각이나 설명을 즉시 확인할 때 사용한다.
• 문서 연동 명령어 (파이프 기능)cat index.html | gemini "이 코드에서 잘못된 부분을 찾아 한글로 설명해 줘" 작성 중인 웹 문서(HTML)를 모형에게 읽히고 오류를 찾거나 수정 방향을 잡을 때 유용하다.
• 연속 대화 명령어gemini chat 이전 대화 내용을 기억하며 코드를 점진적으로 수정할 때 사용한다. 직관적 코드 작성(바이브 코딩)을 진행할 때 필수적이다.
• 사진 분석 명령어gemini vision "design.png" "이 화면 구성을 웹 문서 코드로 변환해 줘" 화면 설계도를 사진 파일로 전달하여, 구조에 맞는 뼈대 코드를 즉시 얻어낼 때 사용한다.

1.5. 디자인을 json 으로

figma 디자인을 json으로 변환함

gemini cli 에게 전달해줌