기능이 구현된 프로토타입 또는 웹 앱에 백엔드 추가하기

시작하기 전에

이 기능을 사용할 수 있는 사람

Figma Make는 오픈 베타로 제공됩니다.

모든 시트에서 사용할 수 있습니다.

Figma Make를 사용하여 프로토타입이나 웹 앱을 만들 때, 백엔드를 추가하여 데이터를 안전하게 저장하고 관리해야 할 때가 있습니다. 예를 들어, 백엔드가 필요할 때는 다음과 같은 경우입니다.

• 여러 다른 브라우저에서 앱 상태를 유지하는 경우
• 앱 로그인 화면 등 작동하는 인증 흐름을 제공하는 경우
• 양식에 사용자 의견과 응답을 수집하는 경우
• 텍스트와 이미지 같은 콘텐츠를 저장하고 불러오는 경우
• 서버에 요청을 보낼 때 사용하는 시크릿, API 키, 토큰을 저장하는 경우

Figma Make는 Supabase와 통합되어 시크릿 저장소, 컴퓨팅 및 Postgres 데이터베이스를 제공하는 백엔드 환경이 있습니다. Figma Make는 Postgres 데이터베이스에 기본 키-값 저장소를 설정할 예정이지만 현재 Figma Make는 Supabase에서 제공하는 Postgres에 전체 SQL 데이터베이스를 설정하지 않습니다.

기존의 Supabase 계정을 Figma Make로 가져올 수 있습니다. 계정이 없으면 Figma Make가 시작하는 방법을 안내해 드리겠습니다.

계정이 준비되면 Figma Make가 Supabase 프로젝트를 앱에 연결하는 단계를 안내할 것입니다.

Figma Make는 이전에 연결한 Supabase 프로젝트를 기억하므로 Figma Make 파일 전체에서 Supabase 프로젝트를 더 쉽게 재사용할 수 있습니다.

백엔드를 갖추면 외부 서버를 쿼리하는 데 사용할 수 있는 시크릿과 API 키를 추가할 수 있습니다.

자세한 정보가 필요한 경우 당사의 모범 사례와 예시 프롬프트를 확인해 보세요.

백엔드

Figma Make 파일에서 백엔드 작업을 할 때, 다음을 할 수 있습니다.

• 백엔드 추가
• 시크릿 또는 API 키 추가
• Supabase 시크릿, 프로젝트 및 오거니제이션 관리

백엔드 추가

Supabase 통합을 활성화하여 기능이 구현된 프로토타입이나 웹 앱에 백엔드를 추가하는 방법은 두 가지가 있습니다.

• Figma Make는 AI 채팅에서 프롬프트의 의도에 따라 백엔드 추가를 자동으로 추천합니다. '내 앱에 인증을 추가해줘' 같은 프롬프트를 사용하여 백엔드를 명시적으로 추가할 수도 있습니다.
• Figma Make 파일 설정에서 Supabase를 연결합니다.

Figma Make 파일에서 두 가지 방법 중 하나를 사용할 수 있습니다. 파일당 백엔드를 한 번만 설정하면 되므로 같은 파일에서 두 방법을 모두 사용하면 안 됩니다.

백엔드를 추가하라는 프롬프트

AI 채팅을 사용하여 백엔드를 추가하는 방법:

1. AI 채팅에서 모델에게 기능이 구현된 프로토타입이나 웹 앱에 백엔드를 추가하라고 말합니다. '백엔드 추가', '사용자 로그인 추가', 또는 '[OpenAI 같은 보안 API] 호출'처럼 간단히 쓸 수 있습니다.

2. Figma Make가 Supabase 계정을 설정하라고 요청하면 연결을 클릭합니다. 이 단계는 Supabase 통합을 처음 설정할 때만 발생합니다.

   새 브라우저 탭에서 Supabase 웹사이트로 이동됩니다.

   Supabase에 로그인하라는 메시지가 뜨면 기존 계정을 사용하거나 무료 계정을 만듭니다.

   Supabase 계정이 아직 오거니제이션에 연결되어 있지 않다면, Supabase는 오거니제이션을 만들도록 안내합니다.

3. Figma의 API 액세스 권한 부여 페이지에서 오거니제이션을 선택하고 Figma 권한 부여를 클릭합니다.

   브라우저에서 Supabase 탭이 닫히고 다시 Figma Make로 이동됩니다.

4. 이미 Supabase 프로젝트가 있다면, 프로젝트 선택을 클릭하고, Figma Make 파일에 사용할 프로젝트 옆에 있는 연결을 클릭합니다.

   Supabase 프로젝트가 없으면 프로젝트 만들기를 클릭합니다. 그런 다음 새 Supabase 프로젝트 모달에서 프로젝트 이름을 입력하고, Supabase 프로젝트를 호스팅할 지역을 선택하고, 데이터베이스의 비밀번호를 만듭니다.

   참고: 데이터베이스 비밀번호는 Supabase 계정 비밀번호와 다릅니다. 데이터베이스 비밀번호는 Supabase 프로젝트에서 Postgres 데이터베이스에 접근하는 데 사용됩니다. Figma Make 파일에서 작업하는 동안 이 비밀번호를 사용할 필요는 없지만, Supabase는 데이터베이스용 비밀번호를 요구합니다.

5. 프로젝트 만들기를 클릭하세요.

Supabase 프로젝트가 Figma Make 파일에 연결되면 준비가 완료됩니다! AI 채팅에서 사용자 의견을 수집하는 양식 등 만들고 싶은 기능을 모델에게 말하면 모델이 그 기능을 구현해 줍니다.

파일 설정에서 백엔드 추가

Figma Make 파일 설정에서 백엔드를 추가하는 방법:

1. Figma Make 파일의 오른쪽 상단 모서리에서 Make 설정을 클릭하세요.
2. 왼쪽 사이드바에서 통합 아래의 Supabase를 클릭하세요.

3. Supabase 연결을 클릭합니다. 이 단계는 Supabase 통합을 처음 설정할 때만 필요합니다.

   새 브라우저 탭에서 Supabase 웹사이트로 이동됩니다.

   Supabase에 로그인하라는 메시지가 뜨면 기존 계정을 사용하거나 무료 계정을 만듭니다.

   Supabase 계정이 아직 오거니제이션에 연결되어 있지 않다면, Supabase는 오거니제이션을 만들도록 안내합니다.

4. Figma의 API 액세스 권한 부여 페이지에서 오거니제이션을 선택하고 Figma 권한 부여를 클릭합니다.

   브라우저에서 Supabase 탭이 닫히고 다시 Figma Make로 이동됩니다.

5. 이미 Supabase 프로젝트가 있다면 Figma Make 파일에 사용할 프로젝트 옆에 있는 연결을 클릭합니다.

   Supabase 프로젝트가 없으면 새 프로젝트 만들기를 클릭합니다. 그런 다음 새 Supabase 프로젝트 모달에서 프로젝트 이름을 입력하고, Supabase 프로젝트를 호스팅할 지역을 선택하고, 데이터베이스의 비밀번호를 만듭니다.

   참고: 데이터베이스 비밀번호는 Supabase 계정 비밀번호와 다릅니다. 데이터베이스 비밀번호는 Supabase 프로젝트에서 Postgres 데이터베이스에 접근하는 데 사용됩니다. Figma Make 파일에서 작업하는 동안 이 비밀번호를 사용할 필요는 없지만, Supabase는 데이터베이스용 비밀번호를 요구합니다.

   프로젝트 만들기를 클릭하세요.

Supabase 프로젝트가 Figma Make 파일에 연결되면 AI 채팅으로 돌아가서 백엔드를 활용하여 모델과 작업을 시작할 준비가 된 것입니다.

시크릿 또는 API 키 추가

기능이 구현된 프로토타입이나 웹 앱을 만들 때, 외부 서버에서 데이터를 가져올 수도 있습니다. 예를 들어, 사용자에게 날씨 정보를 표시하는 앱이 있다면, API 키나 액세스 토큰이 필요한 날씨 API를 사용할 수 있습니다.

AI 채팅에서 기능이 구현된 Figma Make 프로토타입이나 웹 앱을 만들라는 메시지가 표시되면, Figma Make는 백엔드를 설정하라고 요청할 것입니다(아직 설정하지 않은 경우), 그리고 API 키 또는 시크릿을 입력할 수 있는 인터페이스를 제공합니다.

시크릿 또는 API 키를 추가하는 방법:

1. AI 채팅에서 모델에게 기능이 구현된 프로토타입이나 웹 앱에 시크릿을 추가하고 싶다고 말합니다. 예를 들어: "주가를 보기 위한 앱을 원해. 내 API 키를 저장할 시크릿을 만들어줘."
2. 시크릿 생성 상자에서 시크릿 세부 정보 추가 아래에 시크릿 또는 API 키를 입력합니다.
3. 시크릿 생성을 클릭합니다.

시크릿 생성을 클릭하면, Figma Make는 Supabase를 사용하여 시크릿 또는 API 키를 안전하게 저장합니다. 그런 다음 Figma Make에 계속 요청하여 추가된 시크릿 또는 API 키를 활용해 기능이 구현된 Figma Make 프로토타입이나 웹 앱에 더 많은 기능을 추가할 수 있습니다.

Supabase 시크릿, 프로젝트 및 오거니제이션 관리

백엔드의 시크릿과 Supabase 프로젝트 및 오거니제이션은 모두 Supabase 웹사이트를 통해 관리됩니다. Figma Make는 Supabase 웹사이트의 정확한 페이지로 빠르게 이동할 수 있는 바로 가기 링크를 몇 개 제공합니다.

Supabase에서 시크릿, 프로젝트 및 오거니제이션을 관리하는 방법:

1. Figma Make 파일의 오른쪽 상단 모서리에서 Make 설정을 클릭하세요.
2. 왼쪽 사이드바에서 통합 아래의 Supabase를 클릭하세요.
3. Figma Make 파일에 연결된 프로젝트 행에서 줄임표 아이콘을 클릭한 후 다음을 수행합니다.
   • 프로젝트 관리를 클릭하여 해당 프로젝트의 Supabase 대시보드로 이동합니다.
   • 오거니제이션 관리를 클릭하여 Supabase 오거니제이션의 설정 페이지로 이동합니다.
   • 시크릿 관리를 클릭하여 Supabase 프로젝트의 Edge Functions 데이터베이스로 이동합니다.

백엔드 작업의 모범 사례

Figma Make에서 백엔드 작업을 할 때 염두에 둘 몇 가지 모범 사례가 있습니다.

• Figma Make에서 제공하는 Supabase 인터페이스를 사용하고 있는지 확인하세요. 프롬프트의 실제 일반 텍스트에 시크릿이나 API 키 같은 민감한 데이터를 포함하지 마세요.
• 일반적으로 Supabase 프로젝트를 가장 효율적으로 사용하려면 Figma Make 파일에서 Supabase 프로젝트를 재사용하는 것을 권장합니다.

예제 프롬프트

다음은 Figma Make에서 백엔드 작업을 시도해 볼 수 있는 몇 가지 예제 프롬프트입니다.

데이터와 상태를 저장하는 예시

• "내 작업을 저장할 수 있는 작업 추적 앱을 만들어줘. 각 작업에 얼마나 시간을 썼는지 입력할 수 있는 시간 추적 기능이 있어야 해."
• "내가 이미지를 업로드할 수 있는 사진 갤러리를 만들어 줘."
• "나는 마케팅 플랫폼의 제품 관리자야. 우리가 추가하는 캠페인 비교 도구의 개념 증명을 만들어줘. 과거 캠페인 데이터가 저장되는 방식과 사용자가 날짜 범위를 선택하여 비교할 수 있는 방법을 보여줘."
• "나는 이러닝 플랫폼의 제품 관리자야. 우리 코스 작성 시스템에 사용할 퀴즈 생성 도구의 프로토타입을 만들어줘. 어떻게 강사들이 자유 텍스트, 객관식, 슬라이더 등 다양한 질문을 만들 수 있는지 방법을 보여줘. 퀴즈를 공유 가능하게 만들어서, 프로토타입을 사용하는 사람들이 자신만의 퀴즈를 만들고 피드백을 위해 공유할 수 있게 해줘."

시크릿과 API 키 사용 예시

• "Spotify API에서 내 청취 기록을 가져오는 음악 플레이리스트 생성기를 만들어줘."
• Goodreads API에 연결하여 책 정보를 가져오고 사용자가 진행 상황을 추적할 수 있는 독서 목록 앱이 필요해."
• "LinkedIn API를 사용하여 구인 목록을 가져오고 사용자가 지원 상태를 추적할 수 있는 입사 지원 추적기를 만들어줘."

인증 추가 예제

• "사용자 로그인이 필요하고 키-값 저장소에 연속 기록 정보를 저장하는 습관 추적기를 만들어줘."
• "나는 SaaS 제품을 개발하는 개발자야. 사용자 로그인 시스템을 생성해줘. 이메일/비밀번호 인증뿐만 아니라 Google과 GitHub를 통한 소셜 로그인도 지원해야 하고 비밀번호 재설정 기능도 포함되어야 해."
• "GitHub 로그인이 필요하고 데이터베이스에 스니펫을 저장하는 코드 스니펫 관리자를 만들어줘."