๐ฅ bitdak ๋ฉ์ธ MVP ํ๋ฃจ ์์ฑ๊ธฐ: Turborepo + Next.js 15๋ก ๋์๋ณด๋ํ ํ 1:1 ๊ตฌํํ ๋
์๋ ํ์ธ์ :) ์ค๋์ bitdak.com ๋ฉ์ธ ํํ์ด์ง MVP๋ฅผ ์ ์ ๊ตฌ์กฐ๋ก ๋น ๋ฅด๊ฒ ์์ฑํ ์์ ๊ธฐ๋ก์ ๊ณต์ ํฉ๋๋ค. ๋จ์ ๊ตฌํ์ด ์๋๋ผ, PRD๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ๋ ํผ๋ฐ์ค ๋์๋ณด๋๋ฅผ 1:1์ ๊ฐ๊น๊ฒ ๋งคํํ๋ ๋ฐ ์ง์คํ ํ๋ฃจ์์ต๋๋ค.
ํ ์ค ์์ฝ: Turborepo ๋ชจ๋ ธ๋ ํฌ ์์ Next.js 15 + TypeScript strict + TailwindCSS 4 ์กฐํฉ์ผ๋ก, 6๊ฐ ํต์ฌ ์์ ฏ์ด ๋ค์ด๊ฐ ๋์๋ณด๋ํ ํ์ ์์ฑํ์ต๋๋ค.
โ ์ค๋์ ๋ชฉํ
-
bitdak.com ๋ฉ์ธ ํ์ด์ง MVP ์ ์ ๊ตฌํ ์๋ฃ
-
PRD ๊ธฐ์ค ๋ ์ด์์/์ปดํฌ๋ํธ ๊ตฌ์กฐ๋ฅผ ์ค์ ์ฝ๋ ๊ตฌ์กฐ๋ก ๊ณ ์
-
๋น๋/๊ฐ๋ฐ ์๋ฒ ๋์๊น์ง ๊ฒ์ฆ ๐งฉ ํต์ฌ ๊ธฐ์ ๊ฒฐ์
-
์ํคํ ์ฒ: Turborepo + pnpm workspace ๋ชจ๋ ธ๋ ํฌ
-
ํ๋ ์์ํฌ: Next.js 15 (App Router, Turbopack)
-
์ธ์ด/์ ์ฑ : TypeScript 5 strict
-
์คํ์ผ: TailwindCSS 4 + CSS ๋ณ์ ํ ๋ง ์์คํ
-
๋ธ๋๋ ์ปฌ๋ฌ: Samsung Blue #1428A0 ์ ์ญ ๋ณ์ํ ๐๏ธ ๊ตฌํ ํฌ์ธํธ (๊ตฌ์กฐ ์ค์ฌ)
-
apps/web: Next.js ์ ธ ์ฑ(๋ ์ด์์, ํ, ๊ธ๋ก๋ฒ ์คํ์ผ) ๊ตฌ์ฑ
-
packages/types: ๋๋ฉ์ธ ํ์ ์ ์ค์ํํด ์์ ฏ ๊ฐ ํ์ ์ผ๊ด์ฑ ํ๋ณด
-
packages/ui: Card, Badge, Avatar, Button ๋ฑ ์ฌ์ฌ์ฉ UI ์์ฐํ
-
packages/mock-data: 6๊ฐ ์์ ฏ์ฉ ์ ์ ๋ฐ์ดํฐ ์์ค ๋ถ๋ฆฌ
-
packages/widgets: Header/Footer + A~F ์์ ฏ์ ๋ ๋ฆฝ ํจํค์ง๋ก ๋ชจ๋ํ ๐ฅ๏ธ ๋ฉ์ธ ํ์ด์ง ์กฐํฉ ๋ฐฉ์
-
2๋จ ๋์๋ณด๋ ๊ทธ๋ฆฌ๋: ์ข์ธก(AโBโC), ์ฐ์ธก(DโEโF)
-
์ฌ์ด๋๋ฐ ํญ 380px ๊ณ ์ , lg ๋ฏธ๋ง์์ 1๋จ ์ธ๋ก ์คํ ์ ํ
-
์๋งจํฑ section + aria-label ์ ์ฉ์ผ๋ก ์ ๊ทผ์ฑ ๊ธฐ๋ณธ์ ํ๋ณด ๐จ ๋์์ธ/ํ ๋ง์์ ์ ๊ฒฝ ์ด ์
-
์ปฌ๋ฌ/ํ ์คํธ/๋ฐฐ๊ฒฝ/๋ ์ด์์์ CSS ๋ณ์๋ก ๋ถ๋ฆฌํด ํ์ฅ์ฑ ํ๋ณด
-
์นดํ ๊ณ ๋ฆฌ๋ณ ์์ ํ ํฐ(--cat-*)๋ก ์ฝํ ์ธ ๊ตฌ๋ถ๊ฐ ๊ฐํ
-
๋คํฌ๋ชจ๋๋ ์์ง ๋ฏธ๊ตฌํ์ด์ง๋ง ๋ณ์ ๊ธฐ๋ฐ์ผ๋ก ์ ํ ์ค๋น ์๋ฃ ๐ SEO/์ด์ ๊ด์ ๋ณด์
-
metadataBase, ํ์ดํ ํ ํ๋ฆฟ, OG/Twitter Card ์ค์
-
lang=ko, locale=ko_KR, ํต์ฌ ํค์๋ ๋ฐ์์ผ๋ก ๊ฒ์ ๊ธฐ๋ณธ๊ธฐ ์ธํ ๐งช ๊ฒ์ฆ ๊ฒฐ๊ณผ
-
pnpm install: 14๊ฐ ์ํฌ์คํ์ด์ค, 107๊ฐ ํจํค์ง ์ค์น ์๋ฃ
-
pnpm build: Next.js ์ ์ ๋น๋ ์ฑ๊ณต
-
pnpm dev: localhost:3000 ์ ์ ๋์ ํ์ธ
-
Route ๊ธฐ์ค: / 1.91kB, First Load JS 104kB ๐ ์ค๋ ์์ ์ ์๋ฏธ
์ด๋ฒ ๊ตฌํ์ ๋จ์ํ ํ๋ฉด์ ๋ง์ถ ์์ ์ด ์๋๋ผ, ์์ผ๋ก API ์ฐ๋/์ธ์ฆ/๋คํฌ๋ชจ๋/๋ฐฐํฌ๋ฅผ ๋ถ์ฌ๋ ํ๋ค๋ฆฌ์ง ์๋๋ก ๊ตฌ์กฐ๋ฅผ ๋จผ์ ๊ณ ์ ํ ์์ ์ด์์ต๋๋ค. ํนํ ์์ ฏ ํจํค์ง ๋ถ๋ฆฌ ๋๋ถ์ ํ ๋จ์ ๋ณ๋ ฌ ๊ฐ๋ฐ์ด๋ ๊ธฐ๋ฅ ๋จ์ ๊ต์ฒด๊ฐ ์ฌ์ด ์ํ๋ฅผ ๋ง๋ ๊ฒ์ด ๊ฐ์ฅ ํฐ ์ํ์ ๋๋ค.
๐ ๋ค์ ์ก์
- ๋คํฌ๋ชจ๋(next-themes) ์ ์ฉ
- ์ค์ ์ด๋ฏธ์ง ์์ ๊ต์ฒด ๋ฐ favicon ์ ์ํ
- mock-data๋ฅผ ์ค์ API(Supabase ๋ฑ)๋ก ์ ํ
- Vercel ๋ฐฐํฌ + ์ปค์คํ ๋๋ฉ์ธ ์ฐ๊ฒฐ + Lighthouse 90+ ๋ชฉํ ์ค๋์ ํ๋ง๋: ๋น ๋ฅด๊ฒ ๋ง๋ค์๋ก ๊ตฌ์กฐ๋ ๋ ๋จ๋จํด์ผ ํ๋ค. ๋ด์ผ์ ์ค์ ๋ฐ์ดํฐ ์ฐ๊ฒฐ๋ก ์ง์ง ์๋น์ค๋ฅผ ํฅํด ํ ๋จ๊ณ ๋ ๊ฐ๋ณด๊ฒ ์ต๋๋ค ๐
๐ [์ถ๊ฐ ๋ฐํ] bitdak ๋ฉ์ธ ๋ฐ์นญ ์ค๋น ๊ฐ๋ฐ์ผ์ง (UI ์ ๋น + ๋ฐฐํฌ + ๋ชจ๋ํ)
์ค๋์ ๋จ์ ํ๋ฉด ๊ตฌํ์ ๋์ด์, ์ค์ ๋ฐ์นญ ๊ฐ๋ฅํ ๊ตฌ์กฐ๋ก bitdak ๋ฉ์ธ์ ๋์ด์ฌ๋ฆฐ ๋ ์ด์๋ค. ๊ฒ์ผ๋ก๋ ์นด๋/ํค๋/๋ ์ด์์์ ๋ค๋ฌ๋ ์์ ์ฒ๋ผ ๋ณด์์ง๋ง, ๋ด๋ถ์ ์ผ๋ก๋ โ์ง๊ธ ๋น์ฅ ์ด์ ๊ฐ๋ฅํ ๋ฐฐํฌ ์ํ + ํฅํ ํ์ฅ ๊ฐ๋ฅํ ๋ชจ๋ ๊ตฌ์กฐโ๊น์ง ํ ๋ฒ์ ์ ๋ฆฌํ๋ค.
- ๋ฉ์ธ UI ์ ๊นจ์ก๋์ง๋ถํฐ ์ ๋ฐ ์ง๋จ
- Tailwind v4 ์ค์บ ๋ฒ์ ๋๋ฝ์ผ๋ก packages/widgets, packages/ui ์คํ์ผ์ด ์์ฑ๋์ง ์๋ ๋ฌธ์ ํด๊ฒฐ (@source ๊ฒฝ๋ก ๋ณด๊ฐ).
- ์ ์ญ reset(* { margin:0; padding:0; })๊ฐ ์ ํธ๋ฆฌํฐ๋ฅผ ๋ฎ์ด ์ปจํ ์ด๋๊ฐ ์ข์ธก ์ ๋ ฌ๋๋ ์ด์ ํด๊ฒฐ. ์ค์ ์ ๋ ฌ ๋ฐ ํจ๋ฉ ์ ์ ๋ณต๊ตฌ.
- ํค๋/์นด๋/๋ฆฌ์คํธ ๊ฐ๊ฒฉ์ ํต์ผํด ์ ๋ณด ์ธ์ง์ฑ์ ๋์ด์ฌ๋ฆฌ๊ณ , ํธํฐ ๋ก๊ณ ๊นจ์ง๋ ํ ์คํธ ์ฌ๋ณผ ๋ธ๋๋๋ก ์ ๋ฆฌ.
- Vercel ๋ฐฐํฌ ์คํจ๋ฅผ ์ค์ ์ด์ ๊ฐ๋ฅ ์ํ๋ก ์ ํ
- ๋ชจ๋ ธ๋ ํฌ + workspace ์์กด์ฑ์์ ๋ฐ์ํ install/build ๊ฒฝ๋ก ์ด์๋ฅผ ์ ๋ฆฌํ๊ณ ๋ฃจํธ ๊ธฐ์ค ์ค์ ์ผ๋ก ์ฌ์ ๋ ฌ.
- vercel ์ค์ ๋ณด๊ฐ ํ ํ๋ก๋์ ๋ฐฐํฌ ์ฑ๊ณต, alias ์ฐ๊ฒฐ ์๋ฃ (bitdak.vercel.app).
- ํ๋น์ฝ/๋ธ๋๋ ๋ํ ์ผ ๋ฐ์
- logo-char ์ฝ์ ํธ๋ฅผ ๋ฐ์ํ ๋์ icon ๋ผ์ฐํธ(app/icon.tsx) ์ ์ฉ.
- metadata icons ์ฐ๋์ผ๋ก ๋ธ๋ผ์ฐ์ ํญ ์์ด๋ดํฐํฐ ํต์ผ.
- ํต์ฌ: ai-์ปฌ๋ฌ-์์คํ ์ โ๊ธฐ๋ฅ ๋ชจ๋โ๋ก ์ด์
- ์๊ตฌ์ฌํญ์ ๋ฐ์ํด ํจํค์ง ์ค์ฌ ๊ตฌ์กฐ๋ก ์ ํ: @bitdak/color-system ์ ์ค.
- Gemini/OpenAI ๋์ผ provider ์ด๋ํฐ ๊ตฌํ, AI_PROVIDER ํ๊ฒฝ๋ณ์๋ก ๋ฐํ์ ์ ํ ๊ฐ๋ฅ.
- ์น์ /api/color-system ๋ผ์ฐํธ๋ง ํธ์ถํ๋ ์์ ๊ตฌ์กฐ๋ก ์ ์งํด ํ์ /ํ์ฅ์ฑ ํ๋ณด.
- ๋ฐ์นญ ์ง์ ์ ๊น์ง ๋ฉ์ธ์ ์ฌ์ด๋๊ธฐ
- ํค๋ Color System ํญ + ๋ฉ์ธ BETA ์นด๋ ์ถ๊ฐ.
- NEXT_PUBLIC_FEATURE_COLOR_SYSTEM ํ๋๊ทธ๋ก ๋ฐ์นญ ์ /ํ ๋ ธ์ถ ์ ์ด ๊ฐ๋ฅํ๊ฒ ๊ตฌ์ฑ.
- ์ฆ์ ์ ๊ทผ ๊ฐ๋ฅํ /tools/color-system ํ์ด์ง ์ฐ๊ฒฐ ์๋ฃ.
- ์ด์ ๋ฉ๋ชจ
- ํ๊ฒฝ๋ณ์๋ apps/web/.env.local ๋จ์ผ ์์ค๋ก ๊ด๋ฆฌํ๋ ๊ฒ์ผ๋ก ์ ๋ฆฌ.
- ๋ ธ์ถ์ด ์ ๋ณด์ผ ๋๋ ๋๋ถ๋ถ env ์์น/์๋ฒ ์ฌ์์ ๋ฌธ์ ์๊ณ , ๊ตฌ์กฐ ์์ฒด๋ ๋น๋ ๊ธฐ์ค ์ ์ ๋์ ๊ฒ์ฆ ์๋ฃ. ํ ์ค ์์ฝ: ์ค๋ ์์ ์ โ์์ ํ๋ฉด ๋ง๋ค๊ธฐโ๊ฐ ์๋๋ผ, bitdak ๋ฉ์ธ์ ๋ฐ์นญ ๊ฐ๋ฅํ ์ ํ ๊ตฌ์กฐ๋ก ํ ๋จ๊ณ ๋์ด์ฌ๋ฆฐ ๋ฆฌ๋น๋์๋ค.
โฌ๏ธ If this helped, please click the ad below! It supports me a lot ๐โโ๏ธ โฌ๏ธ