diff --git a/popdocs/CHANGELOG.md b/popdocs/CHANGELOG.md
index 34a1a5a5..d8ae8ef9 100644
--- a/popdocs/CHANGELOG.md
+++ b/popdocs/CHANGELOG.md
@@ -13,6 +13,54 @@
 
 ---
 
+## [2026-02-04] 비율 스케일링 시스템 구현
+
+### Added
+- **비율 스케일링 시스템** (업계 표준 Scale with Fixed Aspect Ratio)
+  - 기준 너비: 1024px (10인치 태블릿 가로)
+  - 최대 너비: 1366px (12인치 태블릿)
+  - 8~12인치 화면에서 배치 유지, 크기만 비례 조정
+
+- **뷰포트 감지** (page.tsx)
+  - `viewportWidth` state 추가
+  - resize 이벤트 리스너로 실시간 감지
+  - `Math.min(window.innerWidth, 1366)` 최대값 제한
+
+### Changed
+- **PopFlexRenderer.tsx**
+  - `BASE_VIEWPORT_WIDTH = 1024` 상수 추가
+  - `scale = viewportWidth / BASE_VIEWPORT_WIDTH` 계산
+  - `calculateSizeStyle()` 함수에 scale 파라미터 추가
+  - 컴포넌트 크기 (fixedWidth, fixedHeight) 스케일 적용
+  - 컨테이너 gap, padding 스케일 적용
+  - 디자인 모드: scale = 1 (원본), 뷰어 모드: 실제 scale 적용
+
+- **ComponentRendererV4**
+  - `viewportWidth` prop 추가
+  - 내부에서 scale 계산하여 sizeStyle에 적용
+
+- **ContainerRenderer**
+  - scaledGap, scaledPadding 계산하여 containerStyle에 적용
+
+### Technical Details
+```
+비율 스케일링 계산:
+scale = 실제 화면 너비 / 기준 너비 (1024px)
+
+예시:
+- 800px (8인치): scale = 0.78 → 200px 컴포넌트 → 156px
+- 1024px (10인치): scale = 1.00 → 200px 컴포넌트 → 200px (기준)
+- 1366px (12인치): scale = 1.33 → 200px 컴포넌트 → 266px
+- 1920px (데스크톱): max-width 1366px 적용 → 12인치와 동일 + 여백
+```
+
+### Fixed
+- **DndProvider 에러** (뷰어 페이지)
+  - 원인: isDesignMode=false일 때 useDrag/useDrop 훅 호출
+  - 해결: DraggableComponentWrapper에서 isDesignMode 체크 후 early return
+
+---
+
 ## [2026-02-04] Flexbox 가로 배치 + Spacer + Undo/Redo 개선
 
 ### Added
diff --git a/popdocs/PLAN.md b/popdocs/PLAN.md
index 5a730079..ba903951 100644
--- a/popdocs/PLAN.md
+++ b/popdocs/PLAN.md
@@ -4,7 +4,7 @@
 
 ## 현재 상태 (2026-02-04)
 
-**v4 통합 설계 모드 Phase 1.5 완료 (Flexbox 가로 배치 + Spacer)**
+**v4 통합 설계 모드 Phase 1.6 완료 (비율 스케일링 시스템)**
 
 ### 완료된 작업
 
@@ -17,6 +17,7 @@
 7. **Flexbox 가로 배치** - 완료 (업계 표준 방식)
 8. **Spacer 컴포넌트** - 완료
 9. **컴포넌트 순서 변경** - 완료 (드래그 앤 드롭)
+10. **비율 스케일링** - 완료 (업계 표준 Scale with Fixed Aspect Ratio)
 
 ### 현재 UI 상태
 
@@ -75,6 +76,16 @@ v4 기본 구조  →  오버라이드 기능  →  컴포넌트 숨김  →  
 - [x] 컴포넌트 순서 변경 (드래그 앤 드롭)
 - [x] 디바이스 스크린 스크롤 (무한 스크롤)
 
+## Phase 1.6: 비율 스케일링 시스템 (완료)
+
+- [x] 기준 너비 설정 (BASE_VIEWPORT_WIDTH = 1024px)
+- [x] 최대 너비 제한 (1366px, 12인치)
+- [x] 뷰포트 감지 (resize 이벤트 리스너)
+- [x] 컴포넌트 크기 스케일 적용 (fixedWidth, fixedHeight)
+- [x] 컨테이너 스케일 적용 (gap, padding)
+- [x] 디자인 모드 분리 (scale=1, 원본 유지)
+- [x] DndProvider 에러 수정 (뷰어에서 useDrag/useDrop 방지)
+
 ## Phase 2: 오버라이드 기능 (다음)
 
 - [ ] ModeOverride 데이터 구조 추가
@@ -120,6 +131,7 @@ v4 기본 구조  →  오버라이드 기능  →  컴포넌트 숨김  →  
 - [x] 크기 제약 → CSS 변환 (`calculateSizeStyle`)
 - [x] 드래그 리사이즈 핸들 (`ComponentRendererV4`)
 - [x] 드래그 앤 드롭 순서 변경 (`DraggableComponentWrapper`)
+- [x] 비율 스케일링 (`BASE_VIEWPORT_WIDTH`, scale 계산)
 
 ### v4 캔버스
 
@@ -165,10 +177,46 @@ v4 기본 구조  →  오버라이드 기능  →  컴포넌트 숨김  →  
 |------|------|
 | `PopDesigner.tsx` | v3/v4 통합 디자이너 |
 | `PopCanvasV4.tsx` | v4 캔버스 (4개 프리셋 + 슬라이더) |
-| `PopFlexRenderer.tsx` | v4 Flexbox 렌더러 |
+| `PopFlexRenderer.tsx` | v4 Flexbox 렌더러 + 비율 스케일링 |
 | `ComponentPaletteV4.tsx` | v4 컴포넌트 팔레트 |
 | `ComponentEditorPanelV4.tsx` | v4 속성 편집 패널 |
 | `pop-layout.ts` | v3/v4 타입 정의 |
+| `page.tsx` (뷰어) | v4 레이아웃 뷰어 + viewportWidth 감지 |
+
+---
+
+## 비율 스케일링 시스템
+
+### 개념
+10인치(1024px) 기준으로 디자인하면, 8~12인치 화면에서 배치는 유지하고 크기만 비례 조정
+
+### 계산 공식
+```
+scale = viewportWidth / BASE_VIEWPORT_WIDTH (1024)
+scaledSize = originalSize * scale
+```
+
+### 적용 범위
+
+| 항목 | 스케일 적용 |
+|------|------------|
+| fixedWidth | O |
+| fixedHeight | O |
+| minWidth/maxWidth | O |
+| minHeight | O |
+| gap | O |
+| padding | O |
+| flex (fill) | X (비율 기반) |
+| hug | X (내용 기반) |
+
+### 화면별 스케일
+
+| 화면 | 너비 | 스케일 | 200px → |
+|------|------|--------|---------|
+| 8인치 | 800px | 0.78 | 156px |
+| 10인치 | 1024px | 1.00 | 200px |
+| 12인치 | 1366px | 1.33 | 266px |
+| 14인치+ | 1366px (max) | 1.33 | 266px + 여백 |
 
 ---
 
diff --git a/popdocs/V4_UNIFIED_DESIGN_SPEC.md b/popdocs/V4_UNIFIED_DESIGN_SPEC.md
index 7b2ee1eb..6f45d014 100644
--- a/popdocs/V4_UNIFIED_DESIGN_SPEC.md
+++ b/popdocs/V4_UNIFIED_DESIGN_SPEC.md
@@ -1,7 +1,7 @@
 # POP v4 통합 설계 모드 스펙
 
 **작성일: 2026-02-04**
-**상태: Phase 1.5 완료 (Flexbox 가로 배치 + Spacer)**
+**상태: Phase 1.6 완료 (비율 스케일링 시스템)**
 
 ---
 
@@ -218,6 +218,15 @@ interface PopComponentDefinitionV4 {
 - [x] 컴포넌트 순서 변경 (드래그 앤 드롭)
 - [x] 디바이스 스크린 무한 스크롤
 
+### Phase 1.6: 비율 스케일링 시스템 (완료)
+- [x] 기준 너비 1024px (10인치 태블릿 가로)
+- [x] 최대 너비 1366px (12인치 태블릿)
+- [x] 뷰포트 감지 및 resize 이벤트 리스너
+- [x] 컴포넌트 크기 스케일 적용 (fixedWidth/Height)
+- [x] 컨테이너 스케일 적용 (gap, padding)
+- [x] 디자인 모드 분리 (scale=1)
+- [x] DndProvider 에러 수정
+
 ### Phase 2: 오버라이드 기능 (다음)
 - [ ] ModeOverride 데이터 구조 추가
 - [ ] 편집 감지 → 자동 오버라이드 저장