FamilyOffice S — 중소중견기업 법인 대표 전용 자산관리 플랫폼
"百年永續" — 단순한 자산 증식을 넘어, 백년영속 가문의 유산을 설계합니다.
📋 프로젝트 개요
FamilyOffice S는 비상장기업, 기술기업, 제조업 등 다양한 업종의 법인 대표를 위한 프리미엄 자산관리 플랫폼입니다.
- 정책자금 · 단체보험 · 경영인정기보험 · 중대재해처벌법 대응
- 가업승계 · 증여세 설계 · 세후 유동성 최적화
- 500억원+ 자산관리 실적 | 500+ 법인 고객사 | 20년+ 전문 경험
🎨 디자인 시스템 (Modern Legacy)
자세한 내용: DESIGN.md
브랜드 팔레트
| 역할 | 색상명 | Hex |
|---|
| Primary | Signature Navy | #0A192F |
| Accent | Heritage Gold | #D4AF37 |
| Warm | Gold Shimmer | #E5C158 |
| Deep | Bronze | #B8860B |
| Dark | Deep Charcoal | #1E293B |
타이포그래피
| 역할 | 폰트 |
|---|
| 헤드라인 (에디토리얼) | Playfair Display |
| 본문 / UI | Inter |
| 한국어 최적화 | line-height: 1.75, word-break: keep-all |
글로벌 유틸리티 클래스 (globals.css)
.font-korean /* 한국어 최적화 행간 */
.heading-editorial /* Playfair Display + Signature Navy */
.text-gold /* Heritage Gold #D4AF37 */
.bg-navy-gradient /* Signature Navy → Deep Slate */
.bg-gold-gradient /* Heritage Gold shimmer */
.btn-brand-navy /* 네이비 버튼 */
.btn-brand-gold /* 골드 버튼 */
.card-gold-border /* 골드 상단 보더 카드 */
.card-glass-premium/* 프리미엄 글라스모피즘 */
.divider-gold /* 골드 그라디언트 구분선 */
.section-editorial /* py-24 / py-32 표준 섹션 여백 */
.financial-value /* tabular-nums 금융 데이터 */
🚀 주요 기능
💼 자산관리 서비스
- 비상장기업 자산관리: 매출 50억~300억 비상장기업 전용
- 가업승계 설계: 세무최적화를 통한 효율적인 자산승계
- 재무설계: 법인 대표 맞춤형 재무상담
- 투자자문: 전문적인 투자 전략 수립
🛡️ 리스크 관리
- 법인 단체보험: 기업 리스크 헷지
- 경영인정기보험: CEO 정기보험 및 임원진 보험설계
- 중대재해처벌법 대응: 중대재해 예방 및 리스크 관리 (D&O/임원배상, 변호사비)
💳 결제 & 큐레이션 SHOP
- 구조 점검 상담 결제 (
/structure-check): Toss 결제위젯 v2 + Clerk 인증, 1회 330,000원 (VAT 포함)
- SHOP (
/shop): 1-of-1 큐레이션 — 서예 · 사진 · 그림 · 럭셔리 (상품당 단일 결제 enforcement)
- 결제 보안 baseline: HMAC 웹훅 서명 검증 · UUID v5 customerKey ·
payment_secret cross-check · Clerk 본인 confirm
🤖 family-office Claude Code 플러그인 (.claude-plugin/)
- 콘텐츠 · 리드 · 상담 · SEO 4종 스킬 + 슬래시 커맨드 + 에이전트 정의
- MCP 커넥터 자동 로드 (
.mcp.json)
📊 기술 스택
Frontend
- Next.js 16.1.6 — React 기반 풀스택 프레임워크 (App Router + Turbopack)
- React 18.3.1 — 사용자 인터페이스 라이브러리
- TypeScript 5.8.3 — 타입 안전성 보장
- Tailwind CSS — 유틸리티 퍼스트 CSS + 커스텀 브랜드 토큰
- shadcn/ui — 컴포넌트 라이브러리
- Framer Motion — 애니메이션 라이브러리
- react-daum-postcode — 한국 우편번호 검색 (배송 주소 입력)
Backend & Database
- Supabase — PostgreSQL 기반 백엔드 서비스 + Storage (
shop-product-images bucket)
- Clerk — 인증 및 사용자 관리 (MFA 지원)
- Upstash Redis — 서버리스 분산 캐싱
한국 시장 통합
- Cal.com — 스케줄링 및 상담 예약
- HubSpot — CRM 및 마케팅 자동화
- Beehiiv — 뉴스레터 플랫폼 (매주 월/금 7:30 발송)
- Channel Talk — 고객 지원 채팅
- Resend — 이메일 발송 (
email.familyoffices.vip)
- Toss Payments — 결제위젯 v2 (
@tosspayments/tosspayments-sdk ^2.7) — 상담 + Shop 결제 양쪽 적용
DevOps & Monitoring
- Vercel — 배포 플랫폼 (Edge Network)
- Sentry — 에러 추적 및 모니터링
- Playwright — E2E 테스팅 (134 tests, 8 browser/device configs)
- Jest — 단위 테스팅 (90%+ 금융 모듈 커버리지)
🛠️ 개발 환경 설정
필수 요구사항
- Node.js 18.0.0 이상
- npm 9.0.0 이상
설치 및 실행
# 저장소 클론
git clone https://github.com/jlinsights/FamilyOffice.git
cd FamilyOffice
# 의존성 설치
npm install
# 환경 변수 설정
cp .env.example .env.local
# .env.local 편집
# 개발 서버 실행 (HMR)
npm run dev
⚠️ 주의사항
# 개발 중 NEVER 실행 — HMR 깨짐
npm run build # ❌
# 항상 이것 사용
npm run dev # ✅
환경 변수 (핵심)
# Supabase
NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
SUPABASE_SERVICE_ROLE_KEY=
# Clerk
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
CLERK_WEBHOOK_SECRET=
# Admin
ADMIN_EMAILS=admin@example.com
NEXT_PUBLIC_ADMIN_EMAILS=admin@example.com
# Email
RESEND_API_KEY=
NEXT_PUBLIC_RESEND_FROM_EMAIL=noreply@email.familyoffices.vip
# Redis
UPSTASH_REDIS_REST_URL=
UPSTASH_REDIS_REST_TOKEN=
# Analytics
NEXT_PUBLIC_GA_MEASUREMENT_ID=
# Toss Payments — 결제위젯 v2 (상담 + Shop)
NEXT_PUBLIC_TOSS_CLIENT_KEY=test_gck_... # 브라우저 위젯 (test_gck_/live_gck_ 또는 v1 test_ck_/live_ck_)
TOSS_SECRET_KEY=test_gsk_... # 서버 승인·조회 (test_gsk_/live_gsk_ 또는 v1 test_sk_/live_sk_)
TOSS_WEBHOOK_SECRET= # HMAC 서명 검증 (운영 필수)
전체 목록은 .env.example 참조. 운영·웹훅·마이그레이션 체크는 docs/payments/toss-payments-checklist.md 참고.
Toss Payments 운영 키는 사이트 라이브 후 Toss 가맹점 가입 심사 통과 시 발급됩니다. 개발은 .env.example의 공개 테스트 키 그대로 사용 가능합니다. 결제위젯 v2 SDK 기준 test_gck_* / test_gsk_* 접두사가 표준이며, lib/env.ts Zod 검증은 v1 (test_ck_* / test_sk_*) 형식도 호환 허용합니다.
📁 프로젝트 구조
