04. ํตํฉํ๊ธฐ (Integrations)
Figma Make๋ ์ธ๋ถ ์๋น์ค์ ํตํฉํ์ฌ ํ์คํ ์ฑ์ผ๋ก ํ์ฅํ ์ ์์ต๋๋ค.
1) GitHub ํตํฉ
๋ชฉ์
โข
Make ํ๋ก์ ํธ๋ฅผ GitHub ๋ฆฌํฌ์งํ ๋ฆฌ์ ๋๊ธฐํ
โข
์ฝ๋ ๋ฒ์ ๊ด๋ฆฌ, PR ๊ธฐ๋ฐ ํ์
, CI/CD ์ฐ๊ฒฐ
์ค์ ์ ์ฐจ
1.
Make ํ๋ก์ ํธ โ Settings โ Integrations โ GitHub
2.
GitHub ๊ณ์ OAuth ์ธ์ฆ
3.
๋์ Organization / Repository ์ ํ (์ ๊ท ์์ฑ ๋๋ ๊ธฐ์กด ์ฐ๊ฒฐ)
4.
๋ธ๋์น ์ ํ (main ๋๋ figma-make)
5.
Connect ํด๋ฆญ
๋์ ๋ฐฉ์
โข
Make์์ ์ฝ๋๋ฅผ ๋ณ๊ฒฝ โ Push to GitHub ๋ฒํผ์ผ๋ก ์ปค๋ฐ
โข
์ปค๋ฐ ๋ฉ์์ง๋ ์๋ ์์ฑ ๋๋ ์๋ ์
๋ ฅ
โข
GitHub ์ธก ๋ณ๊ฒฝ์ Make๋ก ์๋ ํ๋์ง ์์ โ ์ผ๋ฐฉํฅ Push ์์ฃผ
ํ์ฉ
โข
Vercel/Netlify์ GitHub ๋ฆฌํฌ ์ฐ๊ฒฐ โ ์๋ ๋ฐฐํฌ ํ์ดํ๋ผ์ธ ๊ตฌ์ฑ
โข
๊ฐ๋ฐ์๊ฐ Make ๊ฒฐ๊ณผ๋ฌผ์์ ์ถ๋ฐํด ๋ณธ๊ฒฉ ๊ฐ๋ฐ๋ก ํ์ฅ
โข
03.Figma ํ์ฉ ์ ๋ต์ ํต์ฌ ์ฐ๊ฒฐ ๊ณ ๋ฆฌ
2) Supabase ํตํฉ
๋ชฉ์
โข
์ธ์ฆ, ๋ฐ์ดํฐ๋ฒ ์ด์ค, ์คํ ๋ฆฌ์ง, Edge Function์ ๋ฐฑ์๋๋ก ์ฐ๊ฒฐ
์ค์ ์ ์ฐจ
1.
Supabase์์ ํ๋ก์ ํธ ์์ฑ โ Project URL, anon key ํ๋ณด
2.
Make โ Integrations โ Supabase โ Connect
3.
URL / Key ์
๋ ฅ
4.
Make AI ์ฑํ
์์ "Supabase์์ users ํ
์ด๋ธ ์กฐํํด์ ๋ฆฌ์คํธ๋ก ๋ณด์ฌ์ค" ์์ผ๋ก ์ง์
5.
Make๊ฐ @supabase/supabase-js ์ฝ๋๋ฅผ ์๋ ์์ฑ
์์ฃผ ์ฐ๋ ํจํด
โข
Auth: ๋ก๊ทธ์ธ/ํ์๊ฐ์
ํผ + Supabase Auth
โข
CRUD: ํ
์ด๋ธ ๋ฐ์ดํฐ๋ฅผ ๋ฆฌ์คํธ/ํผ์ผ๋ก ๋งคํ
โข
Storage: ์ด๋ฏธ์ง ์
๋ก๋ + Public URL ํ์
โข
RLS(Row Level Security): ํด๋ผ์ด์ธํธ ๋
ธ์ถ ์์ ์ฑ ํ๋ณด
๋ณด์ ์ฃผ์
โข
anon key๋ง ํด๋ผ์ด์ธํธ์ ๋
ธ์ถ (service_role ํค ์ ๋ ๊ธ์ง)
โข
๋ฏผ๊ฐ ๋ก์ง์ Edge Function์ผ๋ก ๋ถ๋ฆฌ
3) Figma npm Registry
๊ฐ์
Figma๊ฐ ์ด์ํ๋ ์ฌ์ค npm registry. Make/Design์์ ๋ง๋ ์ปดํฌ๋ํธ๋ฅผ npm ํจํค์ง๋ก ๊ฒ์ํ๊ณ ๋ค๋ฅธ ํ๋ก์ ํธ์์ ์ค์น ๊ฐ๋ฅ.
์ฌ์ฉ ํ๋ฆ
1.
Figma Make/Design์์ ์ปดํฌ๋ํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๊ตฌ์ฑ
2.
Publish to npm ์ต์
์ผ๋ก ํจํค์งํ
3.
ํจํค์ง๋ช
์: @figma/your-org-design-system
4.
์ฌ์ฉ ์ธก ํ๋ก์ ํธ์์:
npm config set @figma:registry <https://registry.figma.com>
npm install @figma/your-org-design-system
Bash
๋ณต์ฌ
5.
React ํ๋ก์ ํธ์์ importํ์ฌ ์ฌ์ฉ
import { Button, Card } from '@figma/your-org-design-system'
TypeScript
๋ณต์ฌ
๊ฐ์น
โข
Figma Design ์์คํ
๊ณผ ์ฝ๋ ์ปดํฌ๋ํธ์ Single Source ์ ์ง
โข
๋์์ด๋๊ฐ ์ปดํฌ๋ํธ ์
๋ฐ์ดํธ โ ๋ฒ์ ์ฌ๋ ค์ ๊ฒ์ โ ๊ฐ๋ฐ ์ธก npm update
โข
ํ ํฐ(Color/Spacing/Typography)๋ ํจ๊ป ํจํค์ง ๊ฐ๋ฅ
ํ๊ณ / ๊ณ ๋ ค์ฌํญ
โข
๋ฒ ํ ๋จ๊ณ, ์ ๊ทผ ๊ถํ ์๊ตฌ
โข
์ฌ๋ด ์ฌ์ค registry(Verdaccio, GitHub Packages ๋ฑ)์ ๋ณํ ์ด์ ๊ฐ๋ฅ
โข
๋ฒ์ ๋/Breaking Change ๊ด๋ฆฌ ํ์ (semver)
ํตํฉ ์ ๋ต ์์ฝ
ํตํฉ | ์ญํ | ๊ถ์ฅ ์์ |
GitHub | ๋ฒ์ ๊ด๋ฆฌ/CI/CD | ํ๋กํ ํ์
โ ์ด์ ์ ํ ์ |
Supabase | ๋ฐฑ์๋(DB/Auth) | ๋์ํ๋ ๋ฐ๋ชจ ํ์ ์ |
Figma npm | ๋์์ธ ์์คํ
๋ฐฐํฌ | ์ปดํฌ๋ํธ ์ฌ์ฌ์ฉ์ฑ ๋์ผ ๋ |