
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
'AI' 카테고리의 다른 글
| hermes ai - #3 플러그인 만들어보기 (with claude Fable5) (1) | 2026.06.11 |
|---|---|
| hermes ai - #2 mlx-community/Qwen3.5-9B-OptiQ-4bit 설치하기 & 텔레그램 연결 (0) | 2026.06.10 |
| MLX #2 multi_layer_perceptron test 해보기 (0) | 2026.06.09 |
| MLX #1 linear regression test 해보기 (0) | 2026.06.09 |
| hermes ai - #1 설치하기 (0) | 2026.06.09 |