Make(메이크) - 프롬프트 투 코드 프로토타입 제작

1. Make(메이크)란?

https://www.figma.com/ko-kr/make/

AI와 함께 서비스 프로토타입을 빠르게 제작하는 Prompt-to-Code 환경입니다.

• Claude Sonnet 기반 AI로 자연어 프롬프트를 코드로 변환
• 직관적인 편집 방식
• 지도, API 연동, 3D, 게임 등 복잡한 인터랙션까지 확장 가능
• Publish 기능으로 전용 URL을 통해 공개 웹에서 사용 가능
  • 커스텀 도메인 연결 가능
  • 메타 이미지, 스크립션 등 설정 가능
• GitHub 계정 연결 & 푸시 가능

1.1. 인터페이스

2. 참고 영상

video: video

3. 유용한 정보

Figma Make에서 GitHub으로 푸시

https://help.figma.com/hc/ko/articles/35463818346647-Figma-Make%EC%97%90%EC%84%9C-GitHub%EC%9C%BC%EB%A1%9C-%ED%91%B8%EC%8B%9C

Figma Make에 가이드라인 추가하기

https://help.figma.com/hc/ko/articles/33665861260823-Figma-Make%EC%97%90-%EA%B0%80%EC%9D%B4%EB%93%9C%EB%9D%BC%EC%9D%B8-%EC%B6%94%EA%B0%80%ED%95%98%EA%B8%B0

백엔드 추가하기

https://help.figma.com/hc/ko/articles/32640822050199-%EA%B8%B0%EB%8A%A5%EC%9D%B4-%EA%B5%AC%ED%98%84%EB%90%9C-%ED%94%84%EB%A1%9C%ED%86%A0%ED%83%80%EC%9E%85-%EB%98%90%EB%8A%94-%EC%9B%B9-%EC%95%B1%EC%97%90-%EB%B0%B1%EC%97%94%EB%93%9C-%EC%B6%94%EA%B0%80%ED%95%98%EA%B8%B0

Supabase란?

오픈소스 백엔드 서비스 플랫폼입니다. 프론트엔드만 만들어도 Supabase를 연결하면 별도 서버 구축 없이 완전한 풀스택 앱이 되기 때문에 바이브 코딩할 때 유용합니다.

https://supabase.com/

• 데이터베이스: PostgreSQL 기반의 관계형 데이터베이스를 제공해요. SQL을 그대로 사용할 수 있고, 실시간 구독 기능도 지원해서 데이터 변경 시 즉시 반영되는 앱을 만들 수 있다.
• 인증: 이메일/비밀번호, 소셜 로그인(Google, GitHub 등), 매직 링크 등 다양한 인증 방식을 기본 제공해요. 직접 구현하면 꽤 복잡한 부분인데 몇 줄 코드로 처리할 수 있다.
• 스토리지: 이미지, 동영상 같은 파일을 저장하고 관리할 수 있다.
• Edge Functions: 서버리스 함수를 작성해서 백엔드 로직을 실행할 수 있다.