여러분, 혹시 머릿속에만 맴도는 멋진 서비스 아이디어가 있으신가요? 저도 그렇거든요. ‘이런 기능이 있으면 정말 편리할 텐데’, ‘이런 서비스를 만들면 대박일 텐데’ 하고 생각만 하다가 결국 아무것도 시도해보지 못했던 경험, 다들 한 번쯤 있으시죠? 저만 그런 건 아닐 거예요. 특히나 코딩 실력이 부족하거나, 아이디어를 구체화할 엄두가 나지 않을 때 더 막막하게 느껴지더라고요.
그런데 최근에 제 눈을 번쩍 뜨이게 하는 영상을 발견했어요. 바로 AI를 이용해서 정말 짧은 시간 안에 SaaS(Software as a Service) 프로토타입을 뚝딱 만들어내는 방법을 알려주는 영상이었는데요. 솔직히 처음엔 ‘에이, 설마. AI로 뭘 얼마나 제대로 만들겠어?’ 반신반의했는데, 영상을 끝까지 보고 나서는 ‘이거 진짜 대박인데?’ 싶더라고요. 여러분께도 꼭 공유하고 싶어서 이렇게 가져왔습니다!
🚀 아이디어부터 프로토타입까지, AI로 순식간에!
영상을 보면서 제가 가장 놀랐던 부분은, 정말 복잡해 보이는 SaaS 도구의 초기 버전이 몇 분 안에 뚝딱 만들어진다는 거였어요. 이 영상에서는 ‘프롬프트’라는 걸 활용하는데요, 이게 마치 AI에게 내 아이디어를 설명하고 어떻게 만들어달라고 구체적으로 지시하는 ‘설계도’ 같은 역할을 하더라고요.
특히 Gemini 3 Pro와 Google AI Studio Build를 활용하는 부분이 인상 깊었어요. Gemini 3 Pro는 현재 가장 뛰어난 모델 중 하나인데, 이걸 사용하면 내가 생각한 아이디어를 시각적으로 바로 확인할 수 있는 결과물을 얻을 수 있다는 거죠. AI Studio Build에서는 여러 Gemini 모델을 무료로 테스트해볼 수 있다는 점도 좋았어요. 유료 구독(월 20달러)을 하면 더 많은 팁과 활용법을 얻을 수 있다고 하니, 본격적으로 활용하실 분들은 고려해보셔도 좋을 것 같아요.
Gemini 3 Pro를 활용하면 머릿속 아이디어를 시각화하고, 실제 작동하는 프로토타입을 빠르게 만들 수 있어요.
💡 프롬프트, 그 놀라운 능력의 비밀
그렇다면 이 ‘프롬프트’라는 게 대체 뭘까요? 영상에서는 프롬프트가 초기 아이디어를 AI가 이해할 수 있는 ‘기술 지침 시스템’으로 변환해준다고 설명하더라고요. 이걸 AI Studio Build에 넣으면, 바로 실행 가능한 도구를 만들어주는 거죠. 정말 신기하지 않나요?
그리고 더 놀라운 건, 좋은 프롬프트를 발견했을 때 이걸 저장하고 평생 사용할 수 있는 ‘프롬프트 볼트’라는 것도 있다는 거예요! (영상 설명란에 링크가 있다고 하니 꼭 확인해보세요!) 로컬 환경에서 실행 가능하다는 점도 매력적이고요.
혹시나 프롬프트 내용을 어떻게 얻는지 궁금하신 분들을 위해 꿀팁도 알려주더라고요. 메모장에 프롬프트 내용을 복사해서 OCR(광학 문자 인식) 기능을 활용하면 무료로 획득할 수 있다고 해요. 화면을 캡처해서 AI에게 보내고 OCR을 요청하는 방식인데, 아이디어 얻기 참 편리하겠더라고요.
프롬프트, 똑똑하게 활용하기
프롬프트는 마치 ‘프롬프트 엔지니어’처럼 행동하면서, 우리가 제시한 프로젝트 아키텍처에 대한 해결책을 제안해주는 역할을 해요. 여기서 중요한 건 ‘변수 설정’인데요, 아이디어를 설명하는 부분을 스페인어로 설정하는 등 나름의 재미있는 팁도 있더라고요.
AI Studio Build를 사용하는 구체적인 단계도 알려줬는데요:
- 모델 선택: Gemini 3 Pro (혹은 당시 가장 좋은 모델)를 선택하는 게 좋아요. Gemini Pro는 빠른 솔루션을 제공하거든요.
- 시스템 지침: 필수는 아니지만, 아이디어나 프로그래밍 기반 시스템 지침을 넣을 수 있어요.
- 시스템 Instruction Templates: React와 TypeScript를 선택하는 것이 좋아요 (기본 설정이 아닐 경우).
- 메시지 붙여넣기: Gemini에 프롬프트를 붙여넣으면 됩니다. 만약 Gemini Pro를 사용할 유료 버전이 없다면 ChatGPT나 다른 버전을 활용해도 괜찮다고 하더라고요.
🔧 AI가 만든 결과, 어떻게 다듬을까?
AI가 뚝딱 만들어준 초기 결과물을 보는 것도 흥미로웠어요. 컨텍스트, 역할, 액션, 아키텍처, 컴포넌트 아이디어까지 다 제공해주더라고요. 프로그래밍 지식이 없어도 프로젝트 구조를 이해하는 건 중요해요. 각 줄의 정확한 기능까지 몰라도, 각 컴포넌트가 프로젝트에서 어떤 역할을 하는지는 알아야 다음 단계를 진행할 수 있으니까요.
저는 여기서 ‘아, 내가 만약 이걸 만들고 싶다면 어떻게 수정해야 할까?’라는 생각이 들었어요. 예를 들어, 설정 패널에서 특정 데이터 포인트의 변수를 제한하고 싶다고 가정해봐요. 이때 ‘그냥 변수 제한해줘’라고 일반적인 요청을 하면 AI가 애플리케이션 내에서 그 위치를 찾아야 하거든요. 프로젝트가 복잡해질수록 이런 로직이 어려워질 수 있다는 거죠. 그래서 코드의 모든 줄을 이해할 필요는 없지만, 필요하다면 AI에게 ‘이 코드는 어떤 목적이야?’라고 물어보면서 프로젝트의 의도를 파악하는 게 중요하다고 느꼈어요.
빌드 과정에서 에러가 발생할 수도 있어요. 이럴 땐 당황하지 말고 페이지를 새로 고침하고 다시 시도하면 된다고 하더라고요. 빌드 결과에는 제가 요청한 컴포넌트들(앱, 데이터 에디터, 설정 패널 등)이 코드 섹션에 나타나는데, 이게 처음엔 좀 간단해 보일 수 있어요. 하지만 계속 반복적으로 수정하고 개선해나가면 원하는 도구를 만들 수 있다는 희망을 봤습니다. AI 어시스턴트 기능이 바로 작동하지 않을 수도 있고, API 연동이 필요할 수도 있다는 점도 참고해야겠어요.
초기 결과는 다소 부족해 보일 수 있지만, 꾸준한 조정과 개선을 통해 원하는 결과물을 얻을 수 있다는 점이 희망적이었어요.
💻 Gemini Pro와 VS Code, 환상의 조합!
영상 후반부에서는 처음 만들어진 도구를 30분 정도 더 다듬어서 훨씬 좋은 결과물을 만드는 과정을 보여주는데요. 애니메이션, 폰트, 파일 형식, 품질, 프레임 속도 등 정말 다양한 설정 옵션을 추가할 수 있더라고요. 색상 지정, 데이터 접근, CSV 내보내기/업로드 기능까지! 물론 일부 기능은 작동하지 않을 수도 있고, 계속 테스트하고 조정해야 하는 부분도 있었지만요.
가장 흥미로웠던 건 Gemini Pro를 Visual Studio Code (VS Code)와 함께 활용하는 부분이었어요. 이걸 사용하면 도구 개발 효율성이 정말 극대화될 것 같더라고요.
로컬 환경을 설정하는 방법도 친절하게 알려줬는데요:
- Google AI Studio에서 앱을 가져와 C 파일로 저장해요.
- C 파일을 압축 해제하고, README 파일을 확인해서 필요한 요구 사항을 파악해요.
- 터미널을 열고 해당 디렉토리로 이동한 후 `npm install`로 필요한 라이브러리를 설치해요.
- `npm run dev`를 실행하면 로컬 호스트에서 도구를 실행할 수 있답니다!
VS Code와의 연동은 더 대박이었어요. VS Code에서 폴더를 열고, Gemini 확장 프로그램을 설치한 후, 이 확장 프로그램을 통해 코드와 직접 소통하면서 원하는 기능을 요청할 수 있어요. Gemini가 수정된 내용을 알려주고 적용 여부를 선택하게 해주는데, 실수했더라도 이전 프롬프트로 돌아갈 수 있다는 점이 정말 안심되더라고요. Gemini Pro는 응답 속도도 빠르고, 프로젝트 발전 속도를 눈에 띄게 향상시켜준다는 게 느껴졌어요.
Gemini Pro와 VS Code를 함께 사용하면 코드 개발과 디버깅 효율을 최대로 끌어올릴 수 있겠어요.
✨ 마무리하며
영상을 보면서 ‘나도 저렇게 나만의 서비스를 만들어볼 수 있겠구나’ 하는 자신감이 생겼어요. 물론 AI가 다 해주는 건 아니고, 테스트와 아이디어 수집을 통해 지속적으로 도구를 개선해나가야겠지만요. 이런 편리한 도구가 있다는 것 자체가 정말 놀랍지 않나요?
영상 설명란에는 관련 도구 링크와 AI 사용법 무료 전자책까지 있다고 하니, 관심 있으신 분들은 꼭 확인해보세요. 궁금한 점은 이메일로 문의하면 된다고 합니다.
여러분은 AI로 어떤 서비스를 만들고 싶으신가요? 댓글로 자유롭게 이야기 나눠봐요!