본문 바로가기
  • think together
AI

[Google Cloud Study Jam] 최신 AI 도구를 활용한 나만의 서비스 만들기

by hwamgai 2026. 5. 20.

 

1. AI 사용하는 흐름

 

1) 문제 정의 : 어떤 것을 만들고 싶은가?

단순히 한 줄로 끝내는 것이 아니고 자세히 작성해보기

* 문제 구조화가 중요하다! (논리적 사고, MECE, Logic Tree)

* 결정론적 (데이터 쿼리, 이상치 탐지(임계값), 차트 생성, 슬랙 전송) -> SQL, Python, Skills

* 비결정론적 (원인 분석, 문장 작성& 톤조절) -> AI에게 맡기기

 

2) 기대하는 바 작성하기 : 기준을 찾아보고 기대하는 바를 정하기.

래퍼런스를 찾는 것도 좋음.

 

3) AI에게 위임 : AI가 응답하는 내용을 보면서 세부 내용 조정 여부 의사 결정

 

4) AI의 결과 보고 피드백, 기대하는 바와 괴리가 얼마나 있는지 파악

 

5) 계속 반복

 

==> AI를 사용하면 감으로 되어있는 부분을 구체적으로 문장으로 정리하기

 

 

 

2. 구현 의도와 다르게 나온다면

AI에게 다시 물어봐라

그러면서 점점 수정하기

 

 

 

3. AI Studio 개발 및 배포

AI는 action over talk 방식으로, "기획해줘" 등의 말이 없으면 바로 코드구현을 시작.

이를 방지하기 위해 코드에서 Agents.md 지침을 추가

프롬프트

지금 작업 방식은 Action over talk 방식인데 기획 및 구현하고, 단계별 실행하는 것으로 해줘.
Agents.md를 만들어서 이 지침을 명시해줘.

 

==> 코드를 직접 만들지 않고, 의사결정을 하며 내용을 구체화

==> 만드는 시간이 줄었고, 어떤 것을 할지가 더 중요해지는 시기

 

 

 

4. 만든 웹페이지 리뷰하기

1) 어떤 기능이 더 있으면 좋을까? 비판적 사고를 하며 고민하기

2) 추천하는 방법 : "이걸 왜 하려고 하는가?", "목적이 있는가?"

 

 

 

5. 기능 추가

1) 프로토타입 개발할 때 : Local Storage 

더보기

* Local Storage란 브라우저를 닫거나 컴퓨터를 재부팅해도 데이터가 영구적으로 보존되어야 할 때

2) 실제 서비스로 준비할 때 : RDB(Cloud SQL, NoSQL, Firestore 등)

 

 

 

6. AI studio에서 보안 챙기기

프롬프트

보안 취약점을 방지하면서 개발을 하려면 어떻게 해야할까? Agents.md에 이걸 방지할 수 있는 방법들을 다 추가해줘

 

 

 

7. cloud 리소스는 잊지 말고 삭제하기

 

 

 

 

8. 정리

design.md : 디자인 시스템을 위한 지침

agents.md : 에이전트 개발을 위한 지침

 

1번에 모든 것을 다 끝내려고 하는 욕심 버리기

계속 시도하는 인내심, 실행력이 중요

오류 메세지는 나쁜 것이 아니고 생겼으면 수정하면 된다

 

 

 

 

9. 참고자료 

쏘카 프로젝트 :  https://tech.socarcorp.kr/data/2022/06/10/reservation-tetris.html

 

쏘카 예약을 효율적으로 - 수학적 모델링을 활용한 쏘카 예약 테트리스

최적화 문제를 해결하는 과정

tech.socarcorp.kr

 

stitch : https://stitch.withgoogle.com/

 

Stitch - Design with AI

Stitch generates UIs for mobile and web applications, making design ideation fast and easy.

stitch.withgoogle.com

 

구글의 design.md 표준 레포 : https://github.com/google-labs-code/design.md

 

GitHub - google-labs-code/design.md: A format specification for describing a visual identity to coding agents. DESIGN.md gives a

A format specification for describing a visual identity to coding agents. DESIGN.md gives agents a persistent, structured understanding of a design system. - google-labs-code/design.md

github.com

 

해외 디자인 레퍼런스 :  https://github.com/voltagent/awesome-design-md

 

GitHub - VoltAgent/awesome-design-md: A collection of DESIGN.md files inspired by popular brand design systems. Drop one into yo

A collection of DESIGN.md files inspired by popular brand design systems. Drop one into your project and let coding agents generate a matching UI. - VoltAgent/awesome-design-md

github.com

 

국내 디자인 레퍼런스 :  https://oh-my-design.kr/

 

oh-my-design — DESIGN.md for AI coding agents

108 real brands extracted into one DESIGN.md spec your AI coding agent reads as ground truth before it codes. 6 skills, 11 sub-agents, zero AI calls during install.

oh-my-design.kr

 

firebase : https://firebase.google.com/docs/auth/web/google-signin?hl=ko

 

자바스크립트로 Google을 사용하여 인증  |  Firebase Authentication

의견 보내기 자바스크립트로 Google을 사용하여 인증 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. 사용자가 Google 계정을 사용하여 Firebase에 인증하도록 설

firebase.google.com