---
title: "⚖️ 의사결정 — 토픽바 태블릿(768~1023) nav 아이콘화 (768 과밀 대응)"
category: "decision"
parent: "Claude Code 작업보고"
updated: "2026-07-04"
priority: "Medium"
purpose: "763~815에서 상단 토픽바 nav 라벨이 글자단위로 쪼개지던 문제를, 토픽바 과밀(내용물 ~850>768) 규명 후 A(액션 아이콘화)/B(nav 아이콘화)/C(수용) 중 B로 택한 의사결정과 근거."
read_when: ["토픽바 nav 아이콘화","763 815 줄바꿈","토픽바 과밀","태블릿 상단바","nav 라벨 아이콘"]
document_type: "의사결정"
source_status: "generated"
knowledge_group: "03_history"
work_timestamp: "20260704_113804"
source_of_truth: "https://dallog-tools.hansbridge.co.kr/knowledge/"
context: "달록본레포CC (D:\\dallog\\dallog_git)."
---

> 관련 작업보고: "762~1024 태블릿폭 UI 정합 3건"(건③). 구현 커밋 `38a615b`.

## 1. 결정
768~1023 밴드에서 토픽바 **nav(대시보드/기록/코치노트) 라벨을 숨기고 아이콘만** 표시. 액션(기록하기/AI/문의) 라벨은 유지. **≥1024는 라벨·gap 원값 무접촉.**

## 2. 문제·규명(실측)
763~815에서 nav 라벨이 글자단위(대/시/보/드, 높이 97px)로 쪼개져 60px 바를 넘침. Playwright 실측으로 원인=**토픽바 과밀**: 브랜드115 + nav 한줄280 + 액션403 + 간격60 ≈ **850px > 768px**(82px 초과). 부드러운 gap/padding clamp만으론 한 줄 불가, nowrap 강제 시 flex가 브랜드를 24px로 압축 → 워드마크가 nav와 겹침(회귀).
- ※ 763~767은 사실 셸 분기(768) 아래라 토픽바 미존재 → 실제 밴드는 768~815. 사장님 "763"은 762 분기 근처 근사치.

## 3. 선택지(사장님 컨펌)
내용물이 물리적으로 넘쳐 무언가는 아이콘으로 접어야 함 → 셋 다 768~1023 모습을 바꾸는 설계 결정이라 컨펌 요청.
- **A. 액션 아이콘화**(권장했음): nav 텍스트 유지, 기록하기/AI/문의를 아이콘만.
- **B. nav 아이콘화**(사장님 선택): 표준 패턴, nav를 아이콘만. 액션 라벨 유지.
- **C. 수용**: 763~815 사각지대 by-design 기록.

## 4. 근거·주의
- 사장님 선택 존중(B). 표준 반응형 navbar 패턴.
- a11y: nav 라벨 숨김이 스크린리더 접근성 훼손 → `NavLink aria-label={item.label}` 추가로 보존(변수 참조라 한글 직접입력 없음=mojibake 안전).
- 밴드 내 gap/padding도 조여 여유 58px 확보(긴 프로필명 "마스터(임시)" 대비). ≥1024는 `@media max-width:1023.98` 밖이라 원값 그대로.
- 교훈: 추정 "작은 수정"이 실측으로 "설계 결정"으로 판명 → 멈추고 컨펌한 것이 옳음(밀어붙였으면 로고 겹침).