🔥 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 메인을 끌어올린 날이었다. 겉으로는 카드/헤더/레이아웃을 다듬는 작업처럼 보였지만, 내부적으로는 “지금 당장 운영 가능한 배포 상태 + 향후 확장 가능한 모듈 구조”까지 한 번에 정리했다.

1. 메인 UI 왜 깨졌는지부터 정밀 진단

• Tailwind v4 스캔 범위 누락으로 packages/widgets, packages/ui 스타일이 생성되지 않던 문제 해결 (@source 경로 보강).
• 전역 reset(* { margin:0; padding:0; })가 유틸리티를 덮어 컨테이너가 좌측 정렬되던 이슈 해결. 중앙 정렬 및 패딩 정상 복구.
• 헤더/카드/리스트 간격을 통일해 정보 인지성을 끌어올리고, 푸터 로고 깨짐도 텍스트 심볼 브랜드로 정리.

1. Vercel 배포 실패를 실제 운영 가능 상태로 전환

• 모노레포 + workspace 의존성에서 발생한 install/build 경로 이슈를 정리하고 루트 기준 설정으로 재정렬.
• vercel 설정 보강 후 프로덕션 배포 성공, alias 연결 완료 (bitdak.vercel.app).

1. 파비콘/브랜드 디테일 반영

• logo-char 콘셉트를 반영한 동적 icon 라우트(app/icon.tsx) 적용.
• metadata icons 연동으로 브라우저 탭 아이덴티티 통일.

1. 핵심: ai-컬러-시스템을 ‘기능 모듈’로 이식

• 요구사항을 반영해 패키지 중심 구조로 전환: @bitdak/color-system 신설.
• Gemini/OpenAI 듀얼 provider 어댑터 구현, AI_PROVIDER 환경변수로 런타임 선택 가능.
• 웹은 /api/color-system 라우트만 호출하는 얇은 구조로 유지해 협업/확장성 확보.

1. 런칭 진입점까지 메인에 심어두기

• 헤더 Color System 탭 + 메인 BETA 카드 추가.
• NEXT_PUBLIC_FEATURE_COLOR_SYSTEM 플래그로 런칭 전/후 노출 제어 가능하게 구성.
• 즉시 접근 가능한 /tools/color-system 페이지 연결 완료.

1. 운영 메모

• 환경변수는 apps/web/.env.local 단일 소스로 관리하는 것으로 정리.
• 노출이 안 보일 때는 대부분 env 위치/서버 재시작 문제였고, 구조 자체는 빌드 기준 정상 동작 검증 완료. 한 줄 요약: 오늘 작업은 ‘예쁜 화면 만들기’가 아니라, bitdak 메인을 런칭 가능한 제품 구조로 한 단계 끌어올린 리빌드였다.