2026 원격 Mac 프론트 빌드 함정:
Tailwind CSS v4 / PostCSS — Node 힙 피크·워커 동시성 대조표
대상: 원격 Mac CI에서 Tailwind v4·PostCSS로 Vite·Next를 빌드하는 프론트·풀스택 팀입니다. 힙을 고정하지 않으면 RSS 피크가 한 번에 튀고 동시 빌드가 겹칠 때 OOM이 납니다. NODE_OPTIONS·워커·캐시를 표와 env로 정리했고, SSR 기준은 Next·Nuxt 메모리 대조표와 맞추면 좋습니다.
01 v4·PostCSS에서 힙 피크가 나는 이유
스캔 글롭이 넓을수록 PostCSS가 한 Node 프로세스에 AST·그래프를 몰아 넣습니다. turbo·pnpm이 패키지 빌드를 겹치면 RSS 합이 먼저 터지고, 스왑은 지연만 키워 CI 타임아웃으로 보입니다.
빌드 직전 export NODE_OPTIONS=--max-old-space-size=6144 (MB). 중규모 4096~6144, 대형 모노레포는 8192부터. I/O가 많으면 UV_THREADPOOL_SIZE=8로 올렸다가 디스크 병목이면 4~6으로 내리세요.
| 구분 | Tailwind v4 + PostCSS | 실무 메모 |
|---|---|---|
| 진입점 | @tailwindcss/postcss + @import "tailwindcss" |
구성 단순화만큼 단일 프로세스 부담은 커질 수 있음 |
| 피크 트리거 | 광범위 content 글롭·다중 프레임워크 동시 빌드 | 행렬 잡 두 줄이 겹치면 힙보다 RSS 합이 먼저 문제 |
| 완화 | 스캔 경로 최소화·잡 분할 | 린트·타입·CSS 빌드를 단계별 파이프로 분리 |
02 vCPU·동시 빌드·NODE_OPTIONS 대조표
동시 프로세스 수 × 힙이 RAM 안인지가 기준입니다. turbo run build --concurrency=2, pnpm -r build --workspace-concurrency=2는 표와 함께 맞추고, 테스트에서 CSS를 태우면 jest --maxWorkers=2 등을 겹치지 않게 조정하세요.
| vCPU | 권장 동시 프론트 빌드 | NODE_OPTIONS (MB) | 비고 |
|---|---|---|---|
| 4 | 1 | 4096~6144 | dev 서버와 CI 동시 실행 비권장 |
| 8 | 1~2 | 6144 | 2개일 때 한쪽 힙을 4096으로 낮추는 팀도 많음 |
| 12+ | 2 | 6144~8192 | SSD 여유·다중 테넌트 I/O 점검 |
03 캐시 디렉터리와 정리 커맨드
캐시: node_modules/.cache, Vite는 node_modules/.vite·.vite, Next 병행 시 .next/cache. 메이저 업 후 이상하면 rm -rf node_modules .vite .next && pnpm install이 빠릅니다.
캐시 키·restore 전략은 Vite·Webpack 캐시 최적화와 맞추세요. Safari·WebKit 실기 스모크는 jsdom 대비 매트릭스만 참고해도 충분합니다.
- CI 키: lockfile 해시 + Node 메이저 + OS + arm64/x64
- 중복 방지:
NODE_OPTIONS는 워크플로 env 한 곳에만 선언 - 검증: 실패 시 캐시 끈 일회 빌드로 오염 여부 분리
- 주기: 주간 풀 클린으로 고아 캐시·디스크 단편화 완화
04 원격 노드 실행 런북 FAQ
다섯 단계: (1) Node·lockfile 고정 (2) 잡 로그에 NODE_OPTIONS·동시성 출력 (3) 표 이하로 큐 (4) 캐시 키 불일치는 미스 허용 (5) 실패 시 무캐시 1회로 원인 분리.
인용·비용
힙 4096~8192MB, vCPU4 동시 빌드1·vCPU8은 1~2, UV_THREADPOOL_SIZE 4~8 스윕, 캐시 키에 아키텍처 포함. 스왑 의존은 타임아웃만 늘리므로 RAM 여유 노드가 유리합니다.
NODE_OPTIONS: --max-old-space-size=6144 · UV_THREADPOOL_SIZE: 8 · pnpm exec vite build. 모노레포는 turbo run build --concurrency=1부터 RSS를 보며 올리세요.
| 단계 | 할 일 | 통과 기준 |
|---|---|---|
| 1 | 잡 헤더에 NODE_OPTIONS·동시성 출력 | 로그 값이 문서와 일치 |
| 2 | 동시 빌드 ≤ 표 권장 | RSS 피크가 가용 RAM 이내 |
| 3 | content 글롭 최소화 검토 | 불필요한 node_modules 스캔 제거 |
| 4 | 캐시 키에 OS·아키텍처 포함 | restore 미스가 예측 가능 |
| 5 | 실패 시 무캐시 1회 재시도 | 재현 여부로 캐시·코드 분리 |
Tailwind v4·PostCSS CI용 원격 Mac 대여·구매
MacWww에서는 로그인 없이 홈에서 노드 사양·요금을 확인할 수 있습니다. SSH·VNC로 접속해 동일한 NODE_OPTIONS·동시성 표를 그대로 적용해 보세요. 팀이 Apple Silicon 원격 Mac을 단기 대여로 쓰거나, 장기 운영이 확실하면 구매 옵션과 비교해 비용 곡선을 맞추는 것을 권장합니다.