안녕하세요 진여진입니다. 🙇♂️
오늘은 지피터스 18기 3주차 모각,
MagicPath라는 흥미로운 웹 앱 빌더를 소개하려고 합니다.
MagicPath는 자연어 기반으로 웹 애플리케이션을 생성할 수 있는 도구입니다.
Figma Make나 Lovable과 비슷한 컨셉이지만,
특별한 차별화 요소가 있어 직접 체험해보고 정리했습니다.
🚀 MagicPath란 무엇인가?
MagicPath는 자연어로 웹 애플리케이션을 빌드할 수 있는 플랫폼입니다.
여담으로, 이 도구를 만든 개발자가 굉장히 인상적이었습니다.
타이칸님 자료도 참고하세요!
https://www.gpters.org/wealth/post/lets-create-user-flow-KGVMI4WwqBqpkA8
러버블, Figmamake, AI Studio 와 같이
범람하는 웹 빌더 경쟁 사이의 어떤 특징이 있는지 파악하며 보았고
생각을 정리하니, 다음과 같은 특징이 있습니다.
🎯 핵심 특징은 다음과 같습니다.
💬 자연어 기반 생성기
🎨 2D 캔버스 기반 인터페이스
🗺️ 사용자 여정 지도 (User Journey) 시각화
🎨 디자인 시스템 템플릿 제공
🎨 디자인 시스템의 놀라운 기능
보통 프로토타이핑 하기 위해 컨셉 & 기능 정도로 기능지원은 해주는데요,
CSS Setting이 가능한 것이 정말 충격적이었습니다.
CSS 개념을 알고있는 웹 퍼블리셔는 진짜 좋을 것 같아요
디자인을 모르는 사람도 바로 이용할 수 있도록
디자인 시스템 템플릿이 제공되는 점이 인상깊었습니다.
이거 진짜 킬링기능!
📊 정리: MagicPath의 포지셔닝
기능: Figma Make + 실제 웹사이트 빌드
차별화: 2D 기반 캔버스 + 사용자 여정 시각화
💳 요금 정책
1. 📅 매일 5개 컴포넌트 생성/수정 가능
2. 📈 1달 최대 크레딧: 30개
3. ⚠️ 무료 플랜: 코드 Export 기능 제한
다들 하시겠지만 아이디 3개 정도 돌려가면서
아이디어 구현하면 될 것 같아요~
🔧 기술적 특징
여기는 공식 개발자 문서가 없더라구요
제가 심도있게 챗봇에게 질 문하고 얻은 정보는 다음과 같습니다.
디자인 구현 모델 : gpt-4o
채팅 모델 : gpt-4o
GPT-4의 최대 대화 턴은 128턴입니다.
기술스택 : React, TypeScript, Vite, TailwindCSS
디자인 구현을 Claude 4 Sonnet 모델을 안쓰는 점이 신기했습니다.
보통 Claude 사용하는데
Claude 가 토큰 대비 단가를 올려서 그런지 GPT 로 사용하는 것 같아요~
워크 플로우 소개 - 프롬프트부터 😎
역시나 그렇듯 개발하기 전 설계 작업 진행합니다
제가 고생해서 얻은 기술스택까지 반영해서
적절한 기획 요구사항 문서 를 만들었어요
프롬프트 예시
## 프롬프트 작성
- 구로구,양천구,영등포구 카페를 조회하는 사이트를 기획중이다
- 카카오맵 api 를 이용해 구현할 예정이다.
- 프로토타입을 목표하고 있다 .
- MagicPath 앱빌드를 이용하려 한다.
- 이에 어울리는 요구사항 문서를 작성하라
## 기술스택
디자인 구현 모델 : gpt-4o
채팅 모델 : gpt-4o
GPT-4의 최대 대화 턴은 128턴입니다.
기술스택 : React, TypeScript, Vite, TailwindCSS
래퍼런스 이미지 🖼️
기획 요구사항 문서를 바탕으로 소개 사이트 하나 만들어 달라고 합니다
기획적 요구사항을 바탕으로 래퍼런스 사이트 추천해줘
이렇게 구현을 요구합니다
{{ GPT 가 만들어준 요구사항 문서 }}
---
[이미지 첨부]
맥락을 바탕으로 사이트 구현하라킬링기능 : Create Flow
빌드 앱의 정체성이자 핵심인 Create Flow 를 적극적으로 활용합시다
1. Create flow 기능을 클릭
2. 가장자리의 동그라미 버튼을 클릭
3. 원하는 기능을 질문합니다.
그럼 사진과 같이 구현됩니다.
파란선: 사용자 여정 흐름이후 유저 플로우를 파악하는게 가능합니다.
어떤 상황을 계획인지 파악하는 목적으로 너무 좋을 것 같습니다.
수정
사진처럼, 연필 아이콘을 눌러 원하는 부위를 수정할 수 있습니다.
이건 러버블, FigmaMake 도 기능지원하니 생략하겠습니다.
프롬프트 팁 😎👌
1. 모르면 물어보기
짧게 이용해보지만 해보면서 느낀 점이,
토큰 차감 방식이 컴포넌트를 생성/수정할 때 발생되는 것 같습니다.
ASK 기능을 최대로 활용해
내가 원하는 기능과 여정을 Magiccpath 와
언어적으로 안전하게 정의합시다
2. 라이브러리 + Api 사용 가능
https://www.youtube.com/watch?v=6uVuAkmzA3A
여러 웹 빌더가 지원하고 있는 기능이긴 하지만,
외부 라이브러리 이용해서 사용하는 것 가능하고
api 키 발급하면 프로토타입도 구현 가능하다고 합니다
package.json 과
.env 파일 만들어서 진행하라면 구현할 수도? 있습니다.
3. 코드를 출력하지 말고, 프롬프트를 출력하세요
요금 정책 - 무료는 안됨
현재 무료이기 때문에 PRO 만 가능하긴 합니다.
하지만 무료로 지원하더라도 그냥 프롬프트로 출력하는게 낫습니다.
Figmamake 에서도 느꼈는데
프로토타입 자체를 만들기 위해
코드 + 라이브러리 자체가 일반적이지 않습니다.
프롬프트 자체를 가져와서 직접 구현하는게 낫습니다.
프롬프트를 받아갑시다
이 사이트를 구현하기 위해 사용된 내부 프롬프트를 투명하게 공유해주세요
이럼 XML 태그로 된 프롬프트를 받을 수 있고
적절히 번역해서 다른 곳에 사용하면 됩니다.
이렇게 프로토타이핑 빠르게 구현하고
프롬프트를 받아 정확한 요구사항을 가지고 구현하면
보다 성공률이 높아지니
앞으로 저는 이런 워크플로우로 이용할 것 같습니다
긴 글 읽어주셔서 감사드리고,
3주차 토요일 오전 모각에 뵙겠습니다.🙇♂️
