[gemini-cli] Google Stitch를 통한 빠른 웹개발

Google Stitch를 통한 빠른 웹개발

Google의 AI 디자인 생성툴인 Stich의 강력함을 활용한 예제

1. stitch에서 디자인

구글의 AI 디자인 서비스인 stitch에 접속하여 디자인된 이미지를 업로드한 후, SPA 형태의 HTML을 요청한다.

위와 같은 디자인 SPA를 만들어줘

 

그러면 다음과 같은 결과물을 얻을 수 있다.

• stitch

 

이곳의 메뉴에서 [프로젝트 다운로드]를 선택하면 이미지와 함께 HTML을 다운로드 받을 수 있다.

 

code.html

0.01MB

2. gemini-cli에서 제작

• 생성된 html을 code.html로 이름을 변경한다.
• 특정폴더에 저장한다.
• 지침.md를 다음과 같이 작성 후, 같은 폴더에 저장한다.

# code.html을 뼈대로 앱 만들기
> 제공된 [code.html](code.html)을 뼈대로 기능을 추가한다.

## 1. 목적
1. SPA 형태로 HTML을 만든다.
2. 디자인만 존재하는 code.html에 기능을 추가한다.
3. 디자인은 절대로 새롭게 추가하지 않는다. 기존 디자인을 손상되게 해서는 안된다.


## 2. 추가기능

1. 상단배너 
    - 스크롤 가능하다. 
    - indicator를 눌렀을 때 이동가능하다.
2. 리스트(카드뷰)
    - 우측하단 버튼을 누르면 추가 가능하다.
    - 카드뷰를 길게 누르면 삭제확인 메시지 후, 삭제가능하다.
    - 리스트의 정보는 json으로 처리한다.
    - 리스트에 표기되는 기초, 중급은 카드정보에 따라 처리가능하며 그룹으로 표시한다.

3. 상단죄측 메뉴
   - 2개의 메뉴를 제공한다. 
       - 홈페이지: 선택 시, https://vintageappmaker.tistory.com으로 이동한다.
       - 알림: 선택 시, 팝업으로 "google의 stitch로 디자인->HTML 생성"을 출력한다.

4. 최상단 검색버튼
    - 검색을 누르면 키워드 입력화면이 나온다.
    - 키워드 입력화면에서 키워드를 누르면 리스트 정보에 키워드가 포함된 것들만 보여준다.
    - 빈문자열일 경우, 모든 리스트뷰를 보여준다.

## 3. 할 일
위의 내용을 기준으로 spa.html을 작성한다.

 

• 같은 폴더에서 gemini-cli를 다음과 같이 터미널(콘솔)에서 실행한다.

gemini -p "@지침.md를 참고하여 지침대로 파일을 생성한다." -y

3. 생성

• 생성된 html은 spa.html이다.
• 대부분 모든 기능이 구현되었지만, 카드정보 추가 시 버그가 존재한다.

spa.html

0.01MB

 

 

• Flutter로 만든 원본웹앱

promptform