처음으로 프롬프트를 만들었고 이제 다음 단계로 나아갈 준비가 되었습니다. 다음은 앱이나 기능적 프로토타입을 처음 생성한 후의 일반적인 사용 사례와 요구사항입니다.
여러 사용자 지원
많은 앱이 여러 사용자를 지원해야 할 것입니다. 예를 들어 다음과 같습니다.
- 사용자가 토너먼트 브래킷을 작성하고 공유할 수 있는 앱
- 사용자가 로그인하고, 프로필이 있으며, 게시물을 작성하는 소셜 미디어 앱
- 글로벌 리더보드나 멀티플레이어 기능이 있는 게임
이러한 모든 경우에 Supabase를 사용하여 사용자가 로그인하고 계정, 게시물, 점수 또는 기타 콘텐츠와 같은 데이터를 저장할 수 있는 앱의 백엔드를 제공합니다.
예제 프롬프트
내 앱이 여러 사용자를 지원하기를 원합니다. Supabase를 사용하여 사용자가 계정을 생성하고 로그인할 수 있는 방법을 제공하세요. 사용자별 적절한 백엔드 기능을 구현하세요.이 커뮤니티 파일에서 시도하기
예제 프롬프트를 사용하려면, 이 커뮤니티 파일을 리믹스하고 AI 채팅에 프롬프트를 붙여넣으세요. 프롬프트를 수정하여 추가 기능을 실험할 수 있습니다.
예제 앱: 마크다운 노트
작동 이유
예제 프롬프트는 Figma Make에서 여러 사용자를 지원할 수 있도록 백엔드를 추가하고 싶음을 명확히 설명합니다. 프롬프트는 Supabase 백엔드 흐름을 트리거합니다. 문구 때문에 Figma Make는 기존 대화의 맥락을 고려하여 작업 중인 앱에 적절한 백엔드 지원을 구축합니다.
Figma Design으로 이동
앱이 Figma Design으로 가져오고자 하는 상태에 있습니다. 이 경우, 디자인 복사 기능을 사용할 것입니다. 앱의 미리보기에서 복사하려는 보기에 도달한 다음, Figma Make 미리보기를 디자인 레이어로 복사에 있는 지침을 따릅니다.
현재로서는 Figma Design에서 Figma Make 파일의 기능적인 버전을 얻을 수 없으며, Figma Design의 레이어에 대한 변경 사항이 Figma Make 파일에 반영되지 않습니다.
이 커뮤니티 파일에서 시도하기
디자인 복사 기능을 테스트하려면, 이 커뮤니티 파일을 리믹스합니다. 캔버스에 요소를 추가하고, 레이어를 이동하며, 보기를 채우기 위해 캔버스를 확장할 수 있습니다. 다른 캔버스 상태로 디자인 복사 기능을 시도하고 레이어를 Figma Design에 붙여넣어 결과를 확인하세요.
예제 앱: 캔버스 편집기
작동 이유
디자인 복사 기능을 사용하면 Figma Make 파일의 미리보기의 현재 상태를 복사합니다. 이는 메뉴를 확장하거나 오버레이를 여는 등 앱의 다양한 부분으로 이동한 후, 그 상태의 미리보기를 Figma Design에 편집 가능한 레이어로 복사한다는 것을 의미합니다.
작업 공유
Figma Make에서 완성한 작업을 공유할 준비가 되었습니다. 필요에 따라 다양한 방식으로 공유할 수 있습니다.
- Figma Make 파일 전체를 공유: 팀원들에게 채팅 기록을 보여주고 협업을 원한다면 Figma Make 파일 자체를 공유할 수 있습니다.
- 다른 사람들에게 작업을 반복하도록 허용: 팀원이 원본 파일에 영향을 주지 않고 반복할 수 있게 하려면 Figma Make 파일을 템플릿으로 게시할 수 있습니다.
- 내부적으로 작동하는 버전 보여주기: 채팅 기록을 숨기고 앱 또는 기능적인 프로토타입의 기능적 경험을 제한된 인원에게 제공하려면 암호로 보호된 앱 버전을 게시하거나 오거니제이션에만 게시할 수 있습니다.
- 인터넷에 작업물을 공유: 작업 결과물을 모두에게 공유할 준비가 되었다면 앱을 라이브 웹에 게시할 수 있습니다.
코드 가져오기
일부 경우에는 코드를 Figma 외부의 편집기나 시스템으로 가져가기를 원할 수도 있습니다. 예를 들어 코드를 GitHub 리포지토리로 옮기거나, VS Code 또는 다른 IDE에서 코드를 수정할 수 있습니다.
코드를 얻는 두 가지 방법이 있습니다.
- Figma Make 파일의 코드 편집기에서 코드 다운로드: Figma Make에서 코드를 다운로드하면, 제품이 앱용 코드를 포함한 .zip 파일을 생성합니다. 이 .zip 파일을 다운로드하여 선호하는 IDE로 내용을 가져올 수 있습니다. 코드에 대해서는 변경 사항이 자동으로 Figma Make에 반영되지 않으며, 수동으로 인터페이스에 변경 사항을 복사하여 붙여넣거나 AI 채팅에서 변경 사항을 공유할 수 있습니다.
- 코드를 GitHub에 푸시: Figma Make의 모든 사용자는 코드를 GitHub에 푸시할 수 있습니다. 이 기능을 사용하면 Figma Make가 사용자 GitHub 계정 또는 오거니제이션에 해당하는 GitHub 리포지토리를 생성합니다. 그런 다음, 작업을 계속하면서 Figma Make에서 해당 리포지토리로 변경 사항을 푸시할 수 있습니다.
코드 설명
때로는 앱 코드가 무엇을 하고 있는지 더 잘 이해하고 싶습니다. 실제로 앱에 아무런 변경을 하지 않고 Figma Make에게 코드를 설명하도록 요청할 수 있습니다.
예제 프롬프트
이 앱의 코드를 설명해 주세요. 높은 수준에서 시작하세요.이 커뮤니티 파일에서 시도하기
이 커뮤니티 파일을 리믹스하고 예제 프롬프트를 시도하여 Figma Make 파일의 코드 설명을 받아보세요.
예제 앱: 테트로미노 게임
예제 결과
테트로미노 게임 - 코드 설명
고수준 아키텍처
React와 TypeScript로 구축된 클래식 테트리스 스타일의 게임입니다. 이 앱은 세 가지 주요 부분으로 구성된 컴포넌트 기반 아키텍처를 따릅니다.
1. 컴포넌트 구조
`App.tsx` - 모든 게임 로직과 상태를 포함한 주요 게임 컨트롤러
`GameBoard.tsx` - 10x20 플레이필드를 렌더링하는 시각적 컴포넌트
`NextPiece.tsx` - 다가오는 테트로미노를 보여주는 미리보기 컴포넌트
`types.ts` - 타입 안전성을 위한 TypeScript 인터페이스
2. 핵심 게임 개념
게임은 여러 가지 주요 상태 조각을 관리합니다.
보드 상태: 각 셀이 비어 있거나 색상 블록으로 채워진 20x10 그리드
현재 조각: 모양, 색상 및 위치가 있는 활성 테트로미노
다음 조각: 다음에 올 것의 미리보기
게임 통계: 점수, 레벨, 제거한 줄
게임 상태: 플레이 중, 일시 중지됨, 게임 종료
3. 게임 루프 흐름
```
게임 시작
↓
새 조각 스폰
↓
하향 이동(레벨에 기반하여 매 Xms 마다)
↓
충돌 확인
↓
만약 충돌 시 → 조각을 보드에 병합 → 완료된 줄 제거 → 새 조각 스폰
충돌 없으면 → 계속 이동
↓
반복
```
---
세부 사항 설명
App.tsx - 게임 엔진
상수 및 데이터
TETROMINOES 배열: 7개의 클래식 모양(I, O, T, S, Z, J, L)이 회전 매트릭스 및 색상과 함께 정의됨
BOARD_WIDTH/HEIGHT: 10 열 × 20행
핵심 상태 변수
```typescript
board // 2D 셀 배열
currentPiece // 활성 테트로미노 모양
currentPosition // {x, y} 좌표
nextPiece // 미리보기 조각
score, level, linesCleared
isPlaying, isGameOver
```
핵심 함수
1. 충돌 감지 (`checkCollision`)
주어진 위치에서 조각이 겹칠지를 테스트합니다.
보드 경계(왼쪽, 오른쪽, 아래)
이미 배치된 블록
2. 조각 이동(`moveLeft`, `moveRight`, `moveDown`)
방향으로 조각을 이동하려 시도합니다
충돌이 없는 경우에만 위치를 업데이트합니다
3. 회전(`rotate`)
모양 매트릭스를 전치하고 행을 반전(시계방향 90°)
새로운 방향이 충돌하지 않을 경우에만 회전합니다
4. 병합 및 제거(`mergePieceToBoard`, `clearLines`)
조각이 착지하면 영구적으로 보드에 추가됩니다
`clearLines`가 완전한 줄을 체크합니다(모든 10개 셀이 채워짐)
채워진 줄을 제거하고 위에 빈 줄을 추가합니다
점수: 1줄 = 100점, 2줄 = 300점, 3줄 = 500점, 4줄 = 800점(레벨에 따라 곱셈)
5. 하드 드롭(`hardDrop`)
조각을 가능한 가장 아래 유효 위치에 즉시 떨어뜨립니다
빠른 게임 플레이에 유용합니다
게임 루프(useEffect)
```typescript
setInterval(() => moveDown(), speed)
// 레벨이 오르면 속도가 줄어듭니다
// 일시 중지/게임 오버 시 간격을 제거합니다
```
키보드 컨트롤(useEffect)
화살표 키로 이동
스페이스/위쪽 화살표로 회전
Enter로 하드 드롭
---
GameBoard.tsx - 디스플레이
이 컴포넌트는 순수하게 시각적입니다.
프롭을 받습니다. 현재 보드 상태 + 활성 조각
그것들을 결합합니다. 활성 조각을 정적 보드 위에 오버레이하여 임시 디스플레이 보드를 만듭니다
그리드 렌더링: 30px 셀로 CSS 그리드를 사용합니다.
스타일링: 채워진 경우 각 셀은 색상을, 비어 있을 경우 어두운 회색을 보여줍니다
```typescript
// Pseudo-code
displayBoard = [...board]
현재 조각을 displayBoard에 그 위치에 오버레이
200 셀(10×20)을 적절한 색상과 함께 렌더링
```
---
NextPiece.tsx - 미리보기
다음 테트로미노를 보여주는 간단한 4×4 그리드:
작은 셀(30px vs 20px)
그리드 안에서 조각 모양을 중앙에 배치
메인 보드와 동일한 색상 코딩
---
types.ts - 타입 정의
```typescript
Block: { filled: boolean, color: string } // 단일 셀
Tetromino: { shape: number[][], color: string } // 조각 정의
Position: { x: number, y: number } // 좌표
```
---
핵심 설계 결정
불변 상태 업데이트: 배열/객체를 변형하지 않고 항상 새로운 것을 생성
콜백 훅: 불필요한 다시 렌더링을 방지하기 위해 `useCallback` 사용
관심의 분리: 표시 컴포넌트는 로직을 포함하지 않음
setInterval을 통한 게임 루프: 단순한 시간 기반 조각 드롭
레벨 진행: 10줄마다 레벨이 오르고 게임이 빨라짐
아키텍처는 깔끔하고 유지 보수가 가능합니다 - 게임 로직은 App.tsx에 속하고 렌더링은 특화된 컴포넌트들에 위임되었기 때문입니다!작동 이유
Figma Make는 생성하거나 편집한 코드 파일을 읽을 수 있습니다. 앱의 코드를 설명하라는 요청을 받으면, Figma Make는 코드 파일의 내용을 요약하고 코드가 작동하는 방식에 대한 자세한 설명을 제공할 수 있습니다.
변경 전 계획
앱에서 Figma Make가 코드에 디버그 기능을 추가하거나 큰 복잡한 변경 사항을 실행하려고 하는 것과 같은 문제가 발생할 때, 변경 사항을 먼저 계획하도록 Figma Make를 지시하고 싶을 수 있습니다.
예제 프롬프트
첫 번째 프롬프트:
앱의 코드에 어떠한 변경도 가하지 마세요. plan.md라는 파일을 만드세요. plan.md에서 구현하고 싶은 변경 사항의 계획을 작성하세요.두 번째 프롬프트:
plan.md의 최신 버전을 사용하여 앱에 변경 사항을 적용하세요.이 커뮤니티 파일에서 시도하기
이 커뮤니티 파일을 리믹스하여 Figma Make가 구현해야 할 특정 변경 사항과 함께 AI 채팅에 첫 번째 프롬프트를 전송하세요. 예를 들어, Figma Make에 저장 및 가져오기 기능을 추가하고 싶다고 알립니다.
그런 다음, 코드 편집기에서 Figma Make가 생성하는 plan.md 파일에 변경 사항을 실험합니다.
마지막으로 AI 채팅에서 plan.md 파일에 자세히 설명된 변경 사항을 구현하도록 Figma Make에 두 번째 프롬프트를 전송합니다.
예제 앱: 토너먼트 브래킷
작동 이유
Figma Make는 지시를 받으면 특정 파일 작성이 가능합니다. plan.md 파일은 Figma Make가 앱에 복잡한 변경 사항을 실행할 수 있도록 하는 계획을 포함할 것입니다. Figma Make가 변경 사항을 실행하기 전에 plan.md 파일을 생성하는 이점은 코드 편집기에서 계획을 검증하고, 계획에 자신의 변경이나 추가를 할 수 있다는 점입니다.
그 후속 프롬프트는 Figma Make에게 여러분이 만든 변경 사항을 포함한 계획을 사용하도록 지시합니다.