코딩 몰라도 OK, Google Stitch로 완성하는 나만의 첫 번째 서비스
기획부터 배포까지 하나의 흐름으로 연결하는 올인원 AI 개발 워크플로우
기획·디자인·개발·배포까지 최강의 AI 툴 조합으로
한계없이 확장하는 1인 메이커의 풀스택 AI 제작 역량
– Claude·Notion·Google Stitch·Figma·Cursor까지 목적에 맞는 도구 조합으로 제작 루트 설계
– MCP 연동으로 완성하는 툴과 AI가 연결된 스마트 워크플로우
– Figma MCP로 디자인을 코드로 전환하는 AI 핸드오프 실습
– PRD 문서 기반 기획부터 Vercel 배포까지 돈이 되는 ‘실전 서비스’ 완성
직군의 경계를 허무는 AI 워크플로우 스킬업
남에게 끌려다니지 않고, 이제 직접 만들고 배포할 차례입니다!
개발자나 외주에 맡기면 비용도 비용이지만, 계속 수정을 반복하는 경우가 많았는데 제가 원하는 방향대로 직접 구현할 수 있어서 훨씬 빠르고 만족스럽습니다.
특히 Figma 디자인이 MCP로 코드에 그대로 반영되는 부분이 정말 신기했습니다.
체험단 후기 (유**)
수강 전엔 기획 문서 작성에서 막혔는데, Claude로 PRD를 잡고 Notion에 버전별로 관리하는 방식을 익히니 기획이 훨씬 명확해졌어요.
Stitch로 화면이 바로 나오는 것도 신기했고, 전체 흐름이 연결되니까 혼자서도 다 쉬워졌어요!
체험단 후기 (lee*****)
강의 따라서 만든 서비스를 보니 외주로 만든 거 같고 뿌듯했습니다!ㅎㅎ
실제로 동작하는 서비스가 나오기도 하고, 배포 링크를 직접 공유할 수 있다는 게 제일 컸어요.
체험단 후기(rayv***)
실패 없이 실제로 배포되는 서비스를 만드는 Google Stitch 실전 강의입니다.
1. 도구 선택부터 시작하는 가장 빠른 AI 워크플로우 입문
Claude·Google Stitch·Figma·Cursor·Vercel 등 AI 툴 환경 비교 및 목적별 최적 제작 루트 설계
2. ‘감’이 아니라 ‘문서’로 만드는 PRD 기반 기획 설계
Claude와 MCP 연동으로 구조화된 PRD 문서 작성 및 Notion 버전 관리 체계 확보
3. 프롬프트 한 줄로 UI 초안을 완성하는 Google Stitch 활용법
텍스트 기반 UI 자동 생성부터 Figma 이관까지 끊김 없는 디자인 초안 제작 루틴
4. Figma MCP로 디자인을 코드로 전환하는 AI 핸드오프 워크플로우
Cursor에 디자인 토큰과 컴포넌트를 학습시켜 하드코딩 없이 실무 구현 완성
5. GitHub·Vercel로 완성하는 실제 배포 서비스 제작
커밋·푸시부터 Vercel 연동 배포까지 내 이름이 걸린 실제 URL 확보
AI 툴 조합으로 설계하고 구현하는 흐름,
이제 고퀄리티의 서비스 결과물로 직접 확인해보세요!
1. 강의 신청하기
2. 김대일 강사님과 함께 함께 Google Stitch 기반 서비스 제작 실습
3. 내 Vercel 배포 링크 확보 후 실무·포트폴리오·사이드 프로젝트에 바로 활용
기다리고 의존하던 방식은 이제 그만, AI 툴 조합으로 혼자 완성!
– 아이디어는 있지만 개발자 없이 혼자 서비스를 만들어보고 싶은 기획자·PM
– 디자인 이후 단계를 직접 끝내고 싶은 UI/UX 디자이너
– AI 툴은 써봤지만 기획·디자인·배포까지 연결된 워크플로우가 없었던 분
– 외주 없이 직접 프로토타입을 만들어 검증하고 싶은 스타트업 창업자
– 코딩 경험 없이 사이드 프로젝트를 실제로 배포해보고 싶은 분
– Google Stitch·Figma·Cursor를 한 번에 실무에 연결하고 싶은 모든 분
– 기획부터 배포까지 전 과정을 직접 경험해 포트폴리오를 만들고 싶은 취업 준비생
– AI 활용 역량으로 경쟁력을 갖추고 싶은 모든 분
개발자 섭외, 외주 의뢰, 부담 끝, PRD 작성부터 배포 링크 확보까지!
이론이 아닌, 실무에 당장 돈이 되는 ‘진짜 워크플로우’만 가져가세요.
STEP 1. 기획부터 배포까지, 전체 그림을 꿰둟는 ‘시야 확장’
툴별 역할과 연결 순서를 파악해 흐름이 끊기지 않는 나만의 AI 서비스 제작 환경을 처음부터 올바르게 세팅
STEP 2. 아이디어를 언어로 만드는 PRD 문서 작성과 버전 관리 체득
Claude에게 서비스 요구사항을 구조적 지시하고, Notion MCP 연동으로 수정 히스토리를 단계별로 기획
STEP 3. 텍스트 한 줄이 화면이 되는 Google Stitch 디자인 생성 실습
프롬프트로 앱 UI를 자동 생성한 뒤 Figma로 넘겨 레이어 단위로 직접 다듬는 초안-완성본 전환 과정 실습
STEP 4. AI가 디자인을 읽고 코드를 쓰는 MCP 기반 구현과 배포 실전
MCP로 디자인과 기획을 코드에 녹여, Vercel로 실서비스를 세상에 바로 공개
내 손으로 기획하고 배포하는
Google Stitch 실전 제작 루틴, 지금 시작하세요!
“이게 정말 혼자 만든 거라고?” 주변을 놀라게 만드는 기술,
비개발자의 가장 강력한 ‘서비스 제작 무기’ Google Stitch로 직접 완성하세요.
단 4시간만 투자하세요.
효율적이고 체계적인 커리큘럼으로
역량 강화와 실질적인 결과물을 한 번에 마스터하세요
[오픈 특가]
얼리버드 구매자를 대상으로 60% 할인가에 제공합니다!
오픈 기념으로 딱 2주 동안만 프로모션 혜택을 제공합니다.
*5월 29일부터 원래 가격으로 돌아갑니다.*
한 층 업그레이드 된 AI 능력상승의 길을 마소캠퍼스와 함께하세요!
[추가 혜택]
마소캠퍼스에서 강의를 구매하시는 모든 분께 강의 교재 파일을 드립니다.
여러분을 위해, 6개월 수강권을 평생수강권으로 전환해드리는 이벤트를 진행하고 있습니다!
편할 때, 원하는 만큼 반복학습하세요!
Q. 강의를 수강하기 위해 개발 경험이나 AI 지식이 필요한가요?
A. 본 강의는 코딩 경험이 전혀 없는 분도 바로 수강해 실무에 활용할 수 있는 역량 제공을 목표로 설계된 강의로, 개발 선수 지식은 필요하지 않습니다. Cursor가 코드를 직접 작성하므로 수강생은 방향 지시에 집중하시면 됩니다.
Q. 강의를 수강하기 위한 환경 또는 필요 조건이 있나요?
A. 강의를 수강하기 위해 특별한 사전 지식이나 기술은 필요하지 않습니다. 다만 Google Stitch·GitHub·Vercel 접속을 위해 Google 계정이 필요하며, Figma·Cursor·Notion 계정도 강의 전에 미리 만들어 두시면 원활하게 진행할 수 있습니다
Q. 본 강의 수강에 유료 서비스 구매가 필요한가요?
A. 본 강의에서는 Figma는 프로페셔널 이상의 요금제가 반드시 필요합니다. 강의 초반에 필요한 도구와 사용 방식은 자세히 안내드릴 예정입니다.
마소캠퍼스가 우리 모두의 성장을 위해 준비한 Actionable & Time-Saving 콘텐츠,
지금 확인해보세요. (기업 교육 문의는 biz@masocampus.com)
| 00. 교재 다운로드 센터 | |||
| [onc146] AKB000 교재 배포 페이지 | 00:00:00 | ||
| 01.학습 내용 안내 | |||
| [onc146] AKB011 AI 시대를 살아가는 우리의 워크 플로우 | FREE | 00:08:25 | |
| [onc146] AKB012 수업을 위한 Tool 소개 | 00:10:45 | ||
| 02.최소한의 이론: 한 눈에 보이는 것들의 비밀 | |||
| [onc146] AKB021 Claude 설치하기 | 00:05:27 | ||
| [onc146] AKB022 Claude와 Claude Code | 00:07:41 | ||
| [onc146] AKB023 Claude로 PRD 문서 작성하기 | 00:10:53 | ||
| [onc146] AKB024 MCP란? | 00:05:52 | ||
| [onc146] AKB025 MCP 활용해서 Notion과 연동하기 | 00:08:05 | ||
| [onc146] AKB026 Notion으로 PRD 버전 관리하기 | 00:14:03 | ||
| 03.핵심 요소와 항목을 잘 보이게 표현하기 | |||
| [onc146] AKB031 Google Stitch란? | 00:06:05 | ||
| [onc146] AKB032 PRD 문서 기반으로 디자인 초안 잡기 | 00:16:07 | ||
| [onc146] AKB033 Google Stitch 기능으로 디자인 디벨롭 하기 | FREE | 00:16:05 | |
| [onc146] AKB034 Figma로 작업물 넘기기 | 00:08:01 | ||
| 04.데이터를 효과적으로 표현하는 차트 시각화 테크닉 | |||
| [onc146] AKB041 Figma에서 디자인 수정하기 | 00:16:09 | ||
| [onc146] AKB042 Cursor를 소개합니다 | 00:16:11 | ||
| [onc146] AKB043 Cursor Mode와 LLM 선택하기 | 00:12:40 | ||
| [onc146] AKB044 Figma MCP로 Cursor로 옮기기 | FREE | 00:12:30 | |
| [onc146] AKB045 Cursor로 구현하고 수정하기(1) | 00:12:33 | ||
| [onc146] AKB046 Cursor로 구현하고 수정하기(2) | 00:14:31 | ||
| 05.안 배우면 하기 어려운 시각화 실무팁 | |||
| [onc146] AKB051 Github 주요 용어 소개 | 00:07:35 | ||
| [onc146] AKB052 Github에 작업물 올리기 | 00:08:40 | ||
| [onc146] AKB053 Github 작업물 불러와서 수정하기 | 00:10:52 | ||
| [onc146] AKB054 Vercel 활용해서 배포하기 | 00:05:27 | ||
|
단 2주간만 진행되는 특가 이벤트!
|
||
| 총 22개 수업 / 3시간 55분 | ||
| [수강기한: |
||
★ 한정 기간에만 만나는 특별가! ★ |
||
|
|
 |
