복잡해보이는 서비스
만드는데 걸리는 시간은..

* 실제 강사님께서 1시간 안에 구현한 결과물입니다.

비결은 바로 디자인부터 퍼블리싱까지 한번에 끝내는
혁신적인 AI 서비스 개발 워크플로우를 소개합니다.

Figma MCP로 디자인 하고

레이아웃 구성, 색상 조정, 반응형 설정까지 UI 디자인 전부 자동화

Cursor로 퍼블리싱까지

로그인 기능, 데이터 저장, 조건 처리, API 연동 등 복잡한 기능들도 구현 가능

잠깐! 복잡하고 어려운 AI 개발 강의가 아닙니다!

트렌디한 디자인부터 서비스에 꼭 필요한 기능들까지
쉽고 빠르게 구현할 수 있도록 만들어드릴게요.

강의 요약

이제 아이디어만 있으면 UI까지 완벽한
나만의 서비스를 만들 수 있습니다!

Figma MCP와 Cursor로 완성도 높은 웹/앱 서비스를 구현해보세요.

POINT 01 설계부터 수정까지 전부 자동화!
Figma MCP로 디자인 업그레이드 기획만 하면, 버튼부터 레이아웃 수정까지 자동 생성!
디자인 초안 → 컴포넌트 배치 → 인터렉션 구조까지 Figma MCP가
혼자서도 ‘진짜같은 UI’를 완성해줍니다. 기획만 하면, 버튼부터 레이아웃 수정까지 자동 생성! 디자인 초안 → 컴포넌트 배치 → 인터렉션 구조까지 Figma MCP가 혼자서도 ‘진짜같은 UI’를 완성해줍니다.
POINT 02 Cursor? MCP? 어렵지 않아요!
입문자를 위한 단계별 커리큘럼 Cursor, Supabase, n8n 등 다양한 AI 툴을 활용해 서비스 기획부터
연동, 배포까지 자동화할 수 있어요. 로그인 처리, DB 연동, 결제 연동 등
어려운 기능까지 손쉽게 구현해보세요! Cursor, Supabase, n8n 등 다양한 AI 툴을 활용해 서비스 기획부터 연동, 배포까지 자동화할 수 있어요. 로그인 처리, DB 연동, 결제 연동 등 어려운 기능까지 손쉽게 구현해보세요!
POINT 03 3가지 Final Project로
AI 개발 워크플로우 완전 정복 단순 예제가 아닌, 진짜 '쓸 수 있는 서비스'를 완성해보세요.
앱 구조 설계부터 AI 자동화, 기능 확장, 완성도 점검까지 3개의
실전 프로젝트로 실무형 개발 워크플로우를 체득합니다.

추천 수강생

상상을 현실로 옮기고 싶은 사람이라면 누구나!

복잡한 개발 지식 없이도, 이제는 내가 떠올린 아이디어를 실제 앱 서비스로 만들 수 있는 시대,
시각적으로 완성도 높은 디자인부터 복잡하고 다양한 기능 구현까지 한 번에 해결해드려요.

ImageSlide
ImageSlide
ImageSlide
ImageSlide
ImageSlide
ImageSlide
ImageSlide
ImageSlide
ImageSlide

강사 소개

안녕하세요 수강생 여러분,
Learning by Doing입니다.

AI 등장으로 이제는 개발 경험이 없더라도, AI와 MCP를 잘 활용하면
나만의 제품을 만들 수 있는 시대가 왔습니다.

이 강의는 제가 80여명 넘는 기획자, 디자이너 등 비개발자분들을 가르치면서 얻은
노하우를 바탕으로 만든 강의로, 실제 서비스의 전체 흐름을 경험하고,
Cursor AI와 MCP(Model Context Protocol)를 활용해 직접 MVP를 완성하고
배포할 수 있도록 도와주는 실전형 강의입니다.

나만의 서비스를 만들고 새로운 도전을 꿈꾸는 모든 분들께 이 강의를 자신있게 추천드립니다.


 AI 등장으로 이제는 개발 경험이 없더라도, AI와 MCP를 잘 활용하면 나만의 제품을 만들 수 있는 시대가 왔습니다.

이 강의는 제가 80여명 넘는 기획자, 디자이너 등 비개발자분들을 가르치면서 얻은 노하우를 바탕으로 만든 강의로, 실제 서비스의 전체 흐름을 경험하고, Cursor AI와 MCP(Model Context Protocol)를 활용해 직접 MVP를 완성하고 배포할 수 있도록 도와주는 실전형 강의입니다.

나만의 서비스를 만들고 새로운 도전을 꿈꾸는 모든 분들께 이 강의를 자신있게 추천드립니다.


 | 이력사항
- 스타트업 14년, 보안, 블록체인, 의료AI, 자율주행, 전자계약, 엔터의 다양한 도메인 경험
- ICP, ICP-ATF, ICP-ACC 보유한 애자일 코치 - Cursor AI 강의 80여명 이상 진행

| 러닝바이두잉님의 콘텐츠

이젠 디자인도?
Cursor MCP로 디자인하기

MCP를 활용해서 피그마에
디자인을 구현하고 싶은 분들이라면 주목!

3분만에
디자인을 코드로 변환!

구현하고 싶은 페이지의 스크린샷을
하나 하나 구현하셨던 분들이라면 주목!

웹/앱
디자인을 해결!

처음부터 웹/앱 디자인을 하고 싶은
분들이라면 꼭 주목해야할 사전 콘텐츠!

필요한 것 오직 ‘아이디어'뿐!
단 8시간 만에 정복하는 고퀄리티 서비스 개발 커리큘럼

MCP 활용법

디자인 완전 자동화 선언!
기초 디자인부터 수정, 코드화까지 전부 가능한 Figma MCP

이제 UI 디자인은 ‘그리는 것'이 아닌, ‘설명하는 것'입니다.
Figma MCP로 프롬프트 기반의 혁신적인 디자인 자동화를 경험해보세요.

디자인 효율을 500% 올려주는 Figma MCP 활용법 01

다양한 디자인 레이아웃 완성

내가 원하는 구성에 맞춰 섹션, 그리드, 컴포넌트까지 자동 생성!
단순한 구조뿐만 아니라 복잡한 대시보드, 입력 폼, 통계형 레이아웃까지 전부 구현 가능합니다. 내가 원하는 구성에 맞춰 섹션, 그리드, 컴포넌트까지 자동 생성! 단순한 구조뿐만 아니라 복잡한 대시보드, 입력 폼, 통계형 레이아웃까지 전부 구현 가능합니다.

디자인 효율을 500% 올려주는 Figma MCP 활용법 02

구조부터 색상까지 디자인 자동 변경

귀찮은 디자인 노가다는 이제 안녕!
전체 페이지의 무드 전환부터 특정 버튼 색상까지, 원하는 수준의 세밀한 자동 제어를 경험해보세요. 귀찮은 디자인 노가다는 이제 안녕! 전체 페이지의 무드 전환부터 특정 버튼 색상까지, 원하는 수준의 세밀한 자동 제어를 경험해보세요. .

디자인 효율을 500% 올려주는 Figma MCP 활용법 03

디자인 컴포넌트 코드화

높은 퀄리티의 서비스를 개발할 때 필수적으로 필요한 항목이 바로 디자인 시스템이에요.
만들어진 디자인 시스템을 코드로 변환해 코드의 재사용성을 높여보세요. 높은 퀄리티의 서비스를 개발할 때 필수적으로 필요한 항목이 바로 디자인 시스템이에요. 만들어진 디자인 시스템을 코드로 변환해 코드의 재사용성을 높여보세요.

커리큘럼

코드 한 줄 몰라도 따라할 수 있습니다!
Cursor와 MCP를 활용한 서비스 구현, 연결부터 배포까지 단계별 커리큘럼 구성

STEP 1 . MCP 연결을 위한 기본적인 지식과 개발환경 설정 유튜브를 통해 따라해봤지만, 연결조차 어려웠다고요? 괜찮아요, 기초 개념부터 차근차근 알려드릴게요!
개발 지식이 없어도 강의를 따라올 수 있도록 기초 개발 지식과 환경 설정법을 배웁니다. 유튜브를 통해 따라해봤지만, 연결조차 어려웠다고요? 괜찮아요, 기초 개념부터 차근차근 알려드릴게요! 개발 지식이 없어도 강의를 따라올 수 있도록 기초 개발 지식과 환경 설정법을 배웁니다.

개발환경 설정

1. 개발 환경 설정
2. 소스 코드 관리 방법 : Git, Github
3. 웹 서비스 배포 도구 : Vercel, Netlify 

4 클라우드 컴퓨팅 서비스 : AWS, GCP, Azure 

5. 인증 및 데이터베이스, Firebase, Supabase

개발 기초 지식과 Cursor 기초/실습

[개발 기초 지식]
1. 웹/앱 서비스의 기본 구조 이해 

2. API와 데이터 흐름의 이해

[Cursor 기초와 실습]
1. Cursor 인터페이스 설명
2. Cursor로 랜딩페이지 만들기

STEP 2 . 다양한 MCP 활용 - 연결부터 응용까지 요즘 MCP가 그렇게 핫하다는데... 어떻게 활용할지 모르겠다면?
서비스 개발에 꼭 필요한 다양한 MCP, 연결 방법부터 다양한 응용법까지 전부 공개합니다. STEP 2 다양한 MCP 활용 - 연결부터 응용까지 요즘 MCP가 그렇게 핫하다는데... 어떻게 활용할지 모르겠다면? 서비스 개발에 꼭 필요한 다양한 MCP, 연결 방법부터 다양한 응용법까지 전부 공개합니다.

Figma MCP 활용

1. 디자인 레이아웃 생성
2. 디자인 수정/변경
3. 컴포넌트 코드화

서비스 개발에 필요한 MCP들

1. 개발 오류를 처리해주는 BrowserTools MCP
2. 디자인 프레임을 만들어주는 Figma MCP
3. 소스코드를 프롬프팅해주는 Github MCP
4. DB구조를 프롬프팅하며 관리해주는 Supabase MCP

STEP 3 . MCP 응용 실습 - 고급 기능 구현 보기에만 예쁜 서비스가 아닙니다.
실용적인 서비스를 만들기 위한 필수 기능을 쉽고 빠르게 구현해봅니다. STEP 3 MCP 응용 실습 - 고급 기능 구현 보기에만 예쁜 서비스가 아닙니다.
실용적인 서비스를 만들기 위한 필수 기능을 쉽고 빠르게 구현해봅니다.

로그인 기능 구현

Supabase, google 로그인을 활용한 회원가입, 로그인 기능 구현

결제 기능 구현

Polar.sh 결제 모듈 연동

STEP 4 . 퍼블리싱 - 디버깅과 배포 이제 내 아이디어를 세상에 공개할 시간입니다.
디버깅으로 오류를 잡고, 서비스를 배포해봅시다.

디버깅

MCP를 활용한 실시간 디버깅

서비스 배포

Netlify를 활용한 서비스 배포

최종 실습

클론코딩으로 만들어보는 다양한 웹/앱 서비스!
3가지 Project로 Cursor, MCP 실전 활용 능력 업그레이드

PROJECT 1 . 글로벌 숙박공유 서비스 ‘Air B*B’ 스타일 서비스 만들기 # 에어비*비 # 웹 크롤링

| 실습목표 - 에어비*비 페이지 크롤링
- 세부 기능 구현
| 학습내용 Cursor AI를 활용해 파이썬 코드를 구현해 실제 운영 중인 사이트를 웹 크롤링합니다. 크롤링 후 세부 기능을 구현하는 과정을 다룹니다.

PROJECT 2 . 글로벌 ott 서비스 ‘Di*ney plus’ 스타일 서비스 만들기 # 디*니플러스 # 결제 기능

| 실습목표 - 디*니 플러스 랜딩페이지 클론코딩
- 결제 모듈 적용
| 학습내용 MCP를 활용해 피그마 디자인 시안을 코딩화하고, 결제 모듈을 연동합니다. 만들어진 사이트를 실제 배포하는 과정까지 다룹니다.

PROJECT 3 . 글로벌 ott 서비스 ‘Netfl*x’ 스타일 서비스 만들기 # 넷플*스 # 모바일 앱 # 로그인 기능

| 실습목표 - 넷플*스 모바일 앱 클론코딩
- 로그인 기능 구현
| 학습내용 flutter를 활용해 넷플*스의 모바일 로그인 페이지를 클론 코딩하고 실제 인증 기능을 구현하는 과정을 다룹니다. 모바일 프로젝트 설정과 기본 UI 구현을 시작으로 로그인 폼의 세부적인 디자인을 MCP를 활용해 구현합니다.
본 강의에서 사용될
프로그램 안내드립니다.
- Cursor ver 0.49 (유료)
- Claude (유료)
- Figma (무료)
- Supabase (무료)

* Framer와 Chat GPT 모두 무료 버전으로 강의 수강이 가능하나,
사용에 불편함이 있다면 유료 모델로의 업그레이드를 권장드립니다.
(기능상의 차이 X)