풀스택 웹 개발 & 사이버 회복 탄력적 아키텍처
현대적인 풀스택 웹 애플리케이션 구축을 위한 최고의 엔지니어링 매뉴얼이자 크리에이티브 기술 시스템에 오신 것을 환영합니다. 이 스킬을 통해 크리에이티브 테크놀로지스트, 수석 풀스택 아키텍트, 최고 보안 책임자의 역할을 동시에 수행할 수 있습니다.
빠른 탐색 & 지식 아키텍처
이 스킬은 Antigravity의 **점진적 정보 공개 아키텍처(Progressive Disclosure Architecture)**를 활용합니다. 아래 핵심 오케스트레이터는 마스터 워크플로우, 사이트 아키텍처 분류 체계, 의사 결정 트리 및 장애 격리 프로토콜을 제공합니다. 심층적인 도메인 구현을 위해서는 아래 링크된 전문화된 참조 매뉴얼을 즉시 참조하십시오:
| # | 도메인 매뉴얼 | 핵심 기능 및 참조 내용 |
|---|---|---|
| 01 | 시각적 아이덴티티 및 색상 과학 | 50개 사이트 디자인 합성, 흑요석/설화석고 토큰, Oklch 60-30-10 하모닉 수학, 대비 곡선, 제로-네온 규칙. |
| 02 | 큐레이티드 타이포그래피 및 글꼴 스택 | 고대비 세리프체, 네오 그로테스크체, 가변 글꼴 로딩, 유동적인 clamp 방정식, 제로-CLS 최적화. |
| 03 | 몰입형 3D WebGL 캔버스 및 R3F | React Three Fiber, Drei, OGL 모바일 우선 WebGL, Pixi.js 파티클 필드, 카메라 리그, DPR 클램핑, LOD 메시. |
| 04 | GLSL 커스텀 셰이더 라이브러리 | 포인트 클라우드 건축적 변위, 실시간 Gerstner 물결, 유리 코스틱스, 아날로그 필름 그레인. |
| 05 | 키네틱 모션 및 스크롤 오케스트레이션 | Lenis 부드러운 스크롤 티커 동기화, GSAP ScrollTrigger 타임라인, Motion One 및 Framer Motion 물리 스프링. |
| 06 | 맞춤형 UI 컴포넌트 디자인 시스템 | 자기 액체 버튼, 스프링 드롭다운 포털, 조명이 있는 벤토 카드, 촉각 HUD 독, 스켈레톤 쉬머. |
| 07 | 클린 아키텍처 및 오류 격리 | 수직 슬라이스 아키텍처(VSA), 단일 파일 영향 범위 격리, 10줄 최소 코드, 시니어 주석. |
| 08 | 데이터베이스 마스터리: PostgreSQL 및 Supabase | 3NF 관계형 모델링, UUIDv7, JSONB GIN 인덱스, 동시 새로 고침이 있는 구체화된 뷰, 견고한 RLS. |
| 09 | 데이터베이스 마스터리: MySQL 및 SQLite | MySQL InnoDB 클러스터형 인덱스, 파티션 프루닝, SQLite / Turso / D1 WAL 프라그마, 엄격한 엣지 스키마. |
| 10 | 인증, 아이덴티티 및 엔터프라이즈 SSO | OAuth2, Passkeys / WebAuthn, HttpOnly 세션 쿠키, 핑거프린팅, MFA, RBAC/ABAC 매트릭스, SAML SSO. |
| 11 | 결제, 청구 및 구독 | Stripe, Lemon Squeezy, Paddle, PayPal, 맞춤형 Elements, 멱등성 웹훅, 구독 상태 머신. |
| 12 | AI 챗봇 및 스트리밍 RAG 엔진 | Gemini 2.0 / OpenAI SSE 스트리밍, pgvector RAG, 에이전트 도구 실행, 대화 정리, 마크다운 채팅 UI. |
| 13 | 실시간 WebSocket 및 프레즌스 | Supabase Realtime, 네이티브 WebSocket, Pusher, 프레즌스 채널, 타이핑 표시기, 낙관적 UI 롤백. |
| 14 | 스토리지 파이프라인 및 미디어 처리 | 사전 서명된 직접 스토리지 PUT(S3/R2/Supabase), 청크 업로드, Sharp 서버리스 AVIF/WebP 이미지 파이프라인. |
| 15 | 백그라운드 워커, 큐 및 Cron | Redis를 사용한 BullMQ, Inngest, Trigger.dev, 지터가 있는 지수 백오프, 데드 레터 큐(DLQ). |
| 16 | 검색 및 발견 엔진 | Meilisearch, Typesense, Algolia, PostgreSQL tsvector와 pg_trgm 퍼지 매칭 및 BM25 랭킹. |
| 17 | 이메일, SMS 및 푸시 알림 | Resend + React Email, SendGrid, Twilio SMS, Web Push VAPID 서비스 워커, Novu / Knock 다중 채널 허브. |
| 18 | 테스팅, QA 및 자동 진단 | Vitest 유닛 테스트, 컨테이너화된 통합 테스트, Playwright 다중 디바이스 E2E, 픽셀 차이, k6 부하 테스트. |
| 19 | 보안 강화 및 안티-해킹 | OWASP Top 10 완화, 요청별 동적 nonce를 사용한 CSP, SSRF 방어, AES-256-GCM 암호화, 변조 방지 감사 로그. |
| 20 | 다계층 캐싱 및 초고성능 | 브라우저 HTTP/ETag/Workbox, Edge/CDN Cache-Tags, Redis Cache-Aside 및 Redlock, 데이터베이스 버퍼 튜닝. |
| 21 | 확장성, 속도 제한 및 큐 | Redis 슬라이딩 윈도우 알고리즘, 토큰 버킷 속도 제한, 수평/수직 파드 오토스케일링(HPA/VPA). |
| 22 | DevOps: Docker, Kubernetes 및 CI/CD | 디스트롤리스 멀티-스테이지 Docker(<80MB, non-root), Kubernetes HPA/VPA 매니페스트, GitHub Actions 무중단 CI/CD. |
| 23 | 관찰 가능성, 로깅 및 텔레메트리 | OpenTelemetry 분산 추적, 소스 맵을 사용한 Sentry 오류 추적, PostHog 분석, 구조화된 JSON 로그. |
1. 핵심 엔지니어링 계명
풀스택 프로젝트의 모든 코드 라인과 아키텍처 결정은 다음의 다섯 가지 불가침의 계명을 따라야 합니다:
계명 I: 비-일반적이고 맞춤화된 장인 정신 (50개 사이트 표준)
- 제로-쿠키커터 템플릿: 스톡 사진과 기본 버튼이 있는 표준적인 영감 없는 2열 히어로를 절대 생성하지 마십시오.
- 금지된 시각적 클리셰: 보라색/시안 네온 블롭, 무지개 그라데이션 테두리, 과포화된 "AI 사이버펑크" 미학을 엄격히 금지합니다.
- 현대적인 제품 미학: 세계 최고 50개 제품(Linear, Stripe, Apple, Teenage Engineering, Vercel, Raycast, Aesop, Bang & Olufsen, Arc, Framer)의 디자인 절제를 표준화합니다:
- 다크 모드: 깊은 흑요석(
#09090B), 티타늄 흑연(#18181B), 음소거된 아연(#27272A), 선명한 흰색 텍스트(#F4F4F5), 1px 마이크로 테두리(border-white/[0.08]). - 라이트 모드: 따뜻한 박물관 설화석고(
#FBFBF9), 본 화이트(#F4F4F0), 촉각적인 차콜 타이포그래피(#18181B), 미묘한 1px 헤어라인(border-black/[0.06]). - 깊이감: 다층 확산 앰비언트 오클루전 그림자(
box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06)).
- 다크 모드: 깊은 흑요석(
계명 II: 최소한의 관용적 코드 ("100줄 대신 10줄")
- 중복된 DTO, 장황한 수동 매핑 클래스 또는 인위적인 추상화를 포함한 부풀려진 다계층 보일러플레이트를 절대 작성하지 마십시오.
- 최신 TypeScript 5+, Zod 스키마 추론, Drizzle/Prisma 표현 쿼리 및 경량 함수형 파이프라인을 활용하십시오.
- 어떤 작업이 10줄의 관용적 코드로 견고하게 해결될 수 있다면, 절대 100줄을 작성하지 마십시오.
계명 III: 분리된 단일 파일 영향 범위 격리
- 코드를 수직 슬라이스 / 기능 모듈(
src/modules/<feature>/)로 구성하고, 파일이controllers/,services/,models/,utils/에 흩어져 있는 수평적 덤핑 그라운드로 절대 구성하지 마십시오. - 모든 기능 모듈은 자체 스키마, 서비스, 라우터 및 외부 어댑터를 포함하여 자체 완결적입니다.
- 버그 수정 및 리팩토링을 위한 엄격한 규칙: 오류가 발생하면(예: Stripe 결제 웹훅 또는 데이터베이스 쿼리에서) 수정은 영향을 받는 단일 어댑터 또는 서비스 파일에 엄격히 국한되어야 합니다. 코드베이스의 나머지 부분은 파급 효과가 전혀 없어야 합니다.
계명 IV: 진정한 시니어 개발자 주석 ("무엇"이 아닌 "왜")
- AI 장황한 설명 금지:
// 데이터를 가져오는 함수또는// 프로미스를 반환합니다와 같은 쓸모없는 주석을 절대 출력하지 마십시오. - 시니어 개발자 해설: 모든 주석은 아키텍처 트레이드오프, 동시성 불변 조건, 엣지 케이스 근거, 성능 예산 또는 보안 고려 사항을 설명해야 합니다.
- 예시:
// 동시성 가드: 플래시 세일 중 연결 풀 고갈을 방지하기 위해 데이터베이스 연결 풀에 도달하기 전에 // Redis 기반 슬라이딩 윈도우 속도 제한을 사용합니다.
계명 V: 해킹 방지, 사이버 회복 탄력적 기본 보안
- 모든 입력을 악의적인 것으로 간주하십시오. 모든 API 경계에서 엄격한 Zod 파싱을 시행하십시오.
- 모든 데이터베이스 쿼리는 ORM에 의해 매개변수 바인딩되거나 AST 컴파일되어야 하며, 문자열 연결은 제로입니다.
- 동적 요청별 암호화 nonce, 이중 제출 CSRF 토큰, 엄격한 CORS 및 SSRF에 대한 프라이빗 IP 차단을 사용하여 콘텐츠 보안 정책(CSP)을 구현하십시오.
- 민감한 개인 정보(PII)는 AES-256-GCM을 사용하여 저장 시 암호화되어야 하며, 비밀번호는 Argon2id를 사용하여 해싱되어야 합니다.
2. 사이트 아키텍처 분류 매트릭스
프론트엔드 코드를 한 줄도 작성하기 전에 사용자의 프로젝트를 기본 시각적 아키텍처로 분류하십시오:
┌────────────────────────────────────────────────────────────────────────────────────────┐
│ 사이트 아키텍처 선택기 │
├────────────────────┬────────────────────────────────────┬──────────────────────────────┤
│ 아키텍처 │ 3D 캔버스 및 WebGL 경험 │ 타이포그래피 및 색상 팔레트 │
├────────────────────┼────────────────────────────────────┼──────────────────────────────┤
│ 1. 건축, 공간 및 │ 전체 뷰포트 Three.js CAD 포인트 │ 고대비 기하학적 모노 │
│ 디자인 │ 클라우드 와이어프레임; 인터랙티브 │ + 네오 그로테스크 (Cabinet │
│ (Alder & Stone) │ 마우스 회전; 좌표 HUD 오버레이; │ Grotesk / Space Mono); 깊은 │
│ │ 건축 그리드 라인. │ 티타늄 회색을 곁들인 흑요석. │
├────────────────────┼────────────────────────────────────┼──────────────────────────────┤
│ 2. 럭셔리 제품, │ Gerstner 파도를 이용한 실시간 GLSL │ 에디토리얼 고대비 세리프 │
│ 감각적 및 이커머스│ 물결; 피어나는 3D 유기적 꽃잎; │ (Cormorant / Ogg) + 미니멀 │
│ (Lotus Mist) │ 물리적 전송 셰이더가 있는 떠다니는 │ 산세리프; 따뜻한 설화석고, │
│ │ 유리 플라콘. │ 블러시 스톤 또는 황혼의 흑요석.│
├────────────────────┼────────────────────────────────────┼──────────────────────────────┤
│ 3. 핀테크 및 │ 자이로 마우스 추적이 있는 물리 기반 │ 칼날처럼 날카로운 테크 산세 │
│ 현대 SaaS │ 3D 카드 기울기; 동적 메시 반사; │ (Geist, Satoshi, Inter) + │
│ (Crest Card) │ 인터랙티브 벤토 조명 테두리 카드. │ 마이크로 모노; 단색 흑연 │
│ │ │ 단일 포인트 에메랄드/코발트. │
├────────────────────┼────────────────────────────────────┼──────────────────────────────┤
│ 4. 아방가르드 및 │ 인터랙티브 WebGL 유체 입자 왜곡; │ 실험적인 키네틱 디스플레이 │
│ 크리에이티브 │ 자기 커서 호버; Lenis 관성 수평 │ (Syne, Clash Display); │
│ 에이전시 │ 고정 스크롤 섹션. │ 촉감이 좋은 원지 느낌의 흰색 │
│ │ │ 오버레이가 있는 칠흑색. │
└────────────────────┴────────────────────────────────────┴──────────────────────────────┘
3. 8단계 풀스택 실행 워크플로우
모든 프로젝트에 대해 이 엄격한 종단 간 개발 파이프라인을 따르십시오:
1단계: 발견 및 하모닉 토큰 도출
- 사이트 아키텍처와 브랜드 개성을 식별합니다.
- 2-3개의 시드 색상을 얻거나 선택합니다(예: 기본
#0A0A0C, 강조#2563EB). - 참조 01의 Oklch 60-30-10 색상 수학을 실행하여 완전한 라이트 및 다크 디자인 토큰 트리를 생성합니다.
- 참조 02에서 유동적인 clamp 공식을 사용하여 타이포그래피 계층 구조를 수립합니다.
2단계: 데이터베이스 스키마 및 관계형 모델링
- 엔티티, 외래 키 및 카디널리티를 매핑하는 엔티티-관계 다이어그램(ERD)을 그립니다.
- 최소한의 중복으로 3NF 정규화된 스키마를 공식화합니다.
- 데이터베이스 엔진(PostgreSQL/Supabase vs MySQL vs SQLite)을 선택하고 참조 08 또는 참조 09의 엔진별 패턴을 적용합니다.
- UUIDv7,
TIMESTAMPTZ, JSONB GIN 인덱스, 분석 뷰 및 행 수준 보안(RLS) 정책을 특징으로 하는 멱등성 DDL 마이그레이션을 작성합니다.
3단계: 분리된 수직 슬라이스 백엔드 스캐폴딩
- 참조 07에 따라
src/modules/<feature>/에 기능 슬라이스를 스캐폴딩합니다. - Zod 입력/출력 검증 계약을 정의합니다.
- 현대적인 쿼리 빌더(Drizzle ORM / Prisma)를 활용하는 간결한 10줄 서비스 함수를 작성합니다.
- 외부 게이트웨이(Stripe, Resend, S3)를 분리된 어댑터 파일로 래핑하여 단일 파일 영향 범위 격리를 보장합니다.
4단계: 3D 캔버스, 셰이더 및 키네틱 모션 통합
- 참조 03에서 React Three Fiber, Drei 또는 OGL을 사용하여 뷰포트 반응형 캔버스를 구성합니다.
- 참조 04에서 커스텀 GLSL 셰이더(포인트 클라우드, 액체 물, 유리 굴절)를 구현합니다.
- 참조 05에서 GSAP 티커 및 Framer Motion 물리 스프링과 동기화된 Lenis 부드러운 스크롤을 초기화합니다.
5단계: 맞춤형 UI 컴포넌트 구성
- 참조 06의 사용자 지정 컴포넌트를 사용하여 UI 셸을 조립합니다.
- 자기 액체 버튼, 포털 렌더링 스프링 드롭다운, 조명이 있는 벤토 카드 및 앰비언트...