저희의 기술 스택 — 숨길 것이 없습니다

성숙한 생태계, 동시성 렌더링으로 부드러운 전환.

컴파일 단계의 안전성, 안심할 수 있는 리팩터링, 스스로 문서화되는 코드.

개발 중 즉각적인 HMR. v8부터 번들은 rolldown이 생성하고 oxc가 압축합니다 — esbuild는 의존성 트리에서 빠졌습니다.

선언적 API, 필요할 때 불러오는 라우트, Suspense 호환.

런타임 제로, 자동 정리, 토큰으로 보장되는 시각적 일관성.

저장소에 직접 복사 — 취약한 라이브러리 의존성이 없고, 코드를 100% 통제합니다.

설치 즉시 올바른 ARIA, 키보드 탐색, 포커스 트랩.

선언적 API, prefers-reduced-motion 준수, GPU 합성.

Tree-shaking 지원, 일관된 스타일, 1,500개 이상의 아이콘을 지속 관리.

서비스 페이지, 지역 페이지, 포트폴리오의 사례 연구 37건을 포함한 사이트의 모든 라우트를 빌드 시 헤드리스 Chromium에서 렌더링합니다. 이전에는 서버가 모든 페이지에 같은 빈 index.html을 반환했기 때문에, JavaScript를 실행하지 않는 크롤러는 홈페이지의 메타데이터만 볼 수 있었습니다.

실제 사용자 환경에서 LCP, INP, CLS를 측정해 GA4로 전송.

Outfit + Plus Jakarta Sans 자체 호스팅, 라틴 문자 서브셋, font-display: optional.

벤더 분리(react, motion, radix, pdf) → 최적의 장기 캐싱.

페이지마다 고유한 title, description, Open Graph.

Organization, LocalBusiness, Service, FAQPage, HowTo, BreadcrumbList, Article.

ChatGPT, Claude, Perplexity, Gemini의 색인을 위한 전용 파일.

App.tsx에 선언된 라우트로 빌드 시 생성됩니다 — 사이트보다 뒤처질 수 없습니다.

관리형 Postgres, Auth, Storage, Edge Functions — 오픈 소스.

문의 양식 메시지를 Vercel 서버리스 함수를 거쳐 수신합니다.

견적 구성 도구의 PDF 견적서를 Supabase 함수를 통해 발송합니다. API 측 IP 필터링은 없습니다.

클라이언트와 서버가 공유하는 타입 스키마, 프랑스어 오류 메시지.

git push로 배포, 글로벌 CDN, HTTP/3, 미리보기 브랜치.

kayzen-lyon.com 및 .fr 도메인, DNS 영역, 메일.

코드 리뷰와 전체 이력 — 공개 업데이트 기록도 여기서 만들어집니다.

전략적인 에셋 캐싱, 대체 페이지 /offline.html.

Vite 설정을 공유하므로 프로덕션과 같은 별칭, 같은 파이프라인을 사용합니다.

핵심 사용자 흐름을 Chromium(데스크톱)과 Pixel 7 모바일 프로필에서 재현합니다.

'unsafe-inline' 없는 script-src: 각 인라인 스크립트는 SHA-256 해시로 허용되며, 빌드 시 검증됩니다.

max-age 2년, includeSubDomains, Chrome preload 목록 등록.

카메라, 마이크, USB, 위치 정보는 기본적으로 비활성화.

Consent Mode v2, 기본값은 거부, GA4는 명시적 동의 후에만 로드(GTM 미사용), 수탁사 명시.

엄격한 규칙, Hooks 검사, 위반 시 CI 차단.

청크를 시각적으로 점검하고 무거운 import를 찾아냅니다.

Autoprefixer, 최신 브라우저 호환(es2020+ 대상).

package-lock.json이 기준이며, Vercel도 배포 시 이 파일로 설치합니다.