1. 피그마 메이크 커넥터 활용
노션에 DB를 저장하고,커넥터로 데이터 베이스 연결하기
2.수파베이스 데이터 연결하기
1. 데이터베이스 구축 (SQL 적용)
Supabase에 필요한 테이블을 생성하기.
•
가이드 요청: 구현하고 싶은 화면과 필요한 정보를 언급하며 "SQL을 포함한 가이드 만들어달라"고 요청
•
SQL 실행: 제공받은 SQL 코드를 복사하여 Supabase의 SQL Editor에 붙여넣고 Run 버튼 누르기.
•
생성 확인: 좌측의 Database 메뉴를 눌러 테이블이 정상적으로 생성되었는지 확인하기.
2. 연동 정보(Key) 확보하기
Figma Make와 연결하기 위해 Supabase의 고유 정보를 복사해야 합니다.
•
경로: Supabase 설정(Settings) > API 메뉴
•
복사할 정보:
1.
Project URL (Data API 섹션)
2.
anon key (API Keys 섹션)
3. 환경변수 등록 방법 (2가지)
방법 1: 직접 입력 창 요청
•
Figma Make 채팅창에"Supabase 시크릿키 등록할 수 있는 창 띄워달라"고 요청합니다.입력 창이 뜨면 복사해둔 Project URL과 anon key를 입력..
방법 2: Edge Functions Secrets 활용
•
연결된 Supabase의 Edge Functions 설정으로 이동합니다.
•
Secrets 메뉴에 키를 등록하고 불러오는 방식을 사용합니다.
3.파이어베이스 연결하기
[프로젝트 생성 및 SDK 준비]
1.
파이어베이스 콘솔에서 새 프로젝트를 생성합니다.
2.
프로젝트 설정 메뉴로 이동하여 Firebase SDK 추가를 선택합니다.
3.
웹(Web) 아이콘을 클릭하고 앱을 등록한 뒤, 나타나는 설정 코드를 복사해 둡니다.
[Firestore 데이터베이스 만들기]
1.
좌측 메뉴에서 Firestore Database를 선택하고 데이터베이스 만들기를 클릭합니다.
2.
데이터베이스 옵션에서 Standard 버전을 선택합니다.
3.
데이터베이스 위치는 서울(asia-northeast3)로 설정합니다.
4.
보안 규칙 설정에서 프로덕션 모드에서 시작을 선택하고 생성을 완료합니다.
[보안 규칙 수정]
•
생성된 데이터베이스의 규칙(Rules) 탭으로 들어갑니다.
•
코드 내의 allow read, write: if false; 부분을 true로 변경하여 누구나 읽고 쓸 수 있도록 설정합니다. (개발 단계용 설정)
2. 이제 피그마 메이크에 아래 프롬프트 요청하기
•
원하는 작업)을 할 수 있도록 파이어베이스에 연동해줘+초기 설정 단계에서 복사해 둔 npm 코드(SDK 설정 코드) 함께 입력하기
•
1이 완료되면 Firestore에 저장될 데이터를 주고 데이터 데이터베이스 구조를 생성해달라고 요청하기