# 📅 Multi-Agent Design Meeting: Layout & Scrolling UX

**일시:** 2026-02-14 16:40
**참석자:** Jay(PM), Violet(UX), Silver(Frontend)
**주제:** 스크롤 시 목차(TOC)와 본문의 시각적 불일치 및 레이아웃 개선 방향

---

## 1. 문제 상황 분석 (User Feedback & Screenshots)

**Jay (PM):**
"사용자님이 중요한 포인트를 지적해주셨어. 스크롤을 '딸깍' 한 번 했을 뿐인데, 본문은 내려가고 목차 영역도 미세하게 같이 움직이는 느낌이 들어서 매칭이 안 된다는 거야. 특히 툴바 밑으로 글자가 기어 들어가는 느낌도 싫어하시고."

**Violet (UX Designer):**
"스크린샷을 보면 전형적인 **'Body Scroll + Sticky Element'**의 한계가 보여요.
1.  **시각적 간섭:** 본문이 전체 페이지 스크롤을 쓰니까, 상단 헤더가 있어도 그 밑으로(혹은 뒤로) 콘텐츠가 흐르는 게 보일 수밖에 없죠.
2.  **TOC의 불안정성:** TOC가 `sticky`로 붙어 있어도, 스크롤 주체가 '창(Window)' 전체라서 미세한 떨림이나 위치 계산 차이가 발생하면 '같이 밀려 내려가는' 느낌을 줍니다. 사용자 입장에선 **'목차는 가만히 있고 책장만 넘기고 싶은데, 책상 전체가 움직이는 느낌'**일 거예요."

**Silver (Frontend Lead):**
"맞아요. 현재 구조는 `Window Scroll`에 의존하고 있어요.
- `Header`: Fixed/Sticky
- `TOC`: Sticky
- `Content`: Normal Flow
이렇게 되면 스크롤 이벤트가 발생할 때 브라우저가 전체를 다시 그립니다. 특히 '한 번 딸깍' 했을 때 오차가 생기는 건 `sticky` offset 계산과 브라우저의 스크롤 스텝이 맞물리면서 생기는 현상일 수 있습니다."

---

## 2. 해결 방안 논의

**Jay (PM):**
"그럼 아까 내가 살짝 언급했던 '아예 다른 영역'으로 분리하자는 아이디어가 유효한 거지?"

**Violet (UX):**
"네, 강력 추천해요. 요즘 대시보드나 문서 도구(Notion, GitBook) 트렌드는 **'App-Style Layout'**입니다.
- **헤더 & 툴바:** 그냥 상단에 고정된 `Block` (스크롤 X)
- **목차(사이드바):** 좌측에 고정 (스크롤 X or 내부 스크롤)
- **본문:** 남은 영역(`flex-1`) 안에서만 자체 스크롤 (`overflow-y-auto`)

이렇게 하면 사용자가 스크롤을 아무리 해도 헤더나 목차는 절대 움직이지 않아요. **'유리창 너머의 풍경만 움직이는'** 아주 안정적인 경험을 줄 수 있죠."

**Silver (Dev):**
"기술적으로도 그게 훨씬 깔끔합니다.
- `Global Layout`을 `h-screen flex flex-col overflow-hidden`으로 잡고,
- 본문 영역(`main`)에만 스크롤바를 줍니다.
- 이렇게 하면 `scroll-margin-top` 같은 복잡한 오프셋 계산도 훨씬 단순해집니다. (헤더 높이를 신경 쓸 필요가 없어짐, 겹칠 일이 없으니까)"

---

## 3. 결론 및 제안

**Jay (PM):**
"좋아, 만장일치네. **'App-Style 독립 스크롤 레이아웃'**으로 간다.
사용자님께는 이게 단순 수정이 아니라, **사용자 경험(UX)을 한 단계 업그레이드하는 구조 변경**이라는 점을 어필하자."

### ✅ 결정 사항
1.  **전체 레이아웃 변경:** `Window Scroll` → `Container Scroll`
2.  **헤더 처리:** `Sticky` 제거하고 완전한 상단 고정 블록으로 변경.
3.  **목차 처리:** 본문 스크롤과 완전히 무관하게 제자리에 고정.

---
---

## 4. Implementation Results (Implemented)

**Silver (Frontend Lead):**
"2026-02-14 16:50 기준, 위에서 논의된 **App-Style Layout**으로 리팩토링을 완료했습니다.

1.  **Layout Structure:**
    *   `Global Layout`: `h-screen flex flex-col overflow-hidden` 적용.
    *   `Scroll Container`: `main` 영역을 감싸는 `div#scroll-container` 생성 (`flex-1 overflow-y-auto`).
    
2.  **UX Improvements:**
    *   **Header & Nav:** 스크롤 시 전혀 움직이지 않음 (완벽한 상단 고정).
    *   **Content:** 글자가 헤더 뒤로 숨는 현상(Overlap) 원천 차단.
    *   **TOC:** `scrollIntoView` API를 도입하여, 클릭 시 정확한 위치로 부드럽게 이동.
    
사용자 테스트(배포)까지 완료된 상태입니다."

---
*Meeting adjourned.*