style(control-center): Scene 스크롤바 숨김 처리 및 UI 가이드 문서 반영

맥락:
- QuickControls Scene 가로 캐러셀의 브라우저 스크롤바 노출이 감성 톤을 해치고 있었습니다.

변경사항:
- 전역 스타일에 scrollbar-none 유틸을 추가해 크로스브라우저 스크롤바 숨김 규칙을 정의했습니다.
- Control Center Scene 캐러셀에 scrollbar-none 클래스를 적용했습니다.
- 요청에 따라 docs/01_ui_guidelines.md 현재 변경분을 함께 커밋했습니다.

검증:
- npx tsc --noEmit

세션-상태: QuickControls Scene 영역에서 스크롤은 유지되고 스크롤바는 노출되지 않습니다.
세션-다음: 다음 work.md 항목에 맞춰 구현을 이어갑니다.
세션-리스크: docs/work.md는 사용자 수정 상태로 워크트리에 남아 있습니다.
This commit is contained in:
2026-03-05 12:37:01 +09:00
parent c9817f518e
commit a4f6a119aa
3 changed files with 105 additions and 1 deletions

View File

@@ -1,5 +1,100 @@
# 01. UI Guidelines # 01. UI Guidelines
---
## 목적 우선(Why-first)
- UI를 추가/변경하기 전에 “이 변경이 해결하는 사용자 문제”를 1문장으로 고정한다.
- 목적이 불명확하면 구현하지 않는다.
- 한 UI 요소는 목적을 1개만 가진다(복수 목적이면 분리).
---
## 단일 정답 위치(Single canonical place)
- 같은 일을 하는 진입점/버튼/칩을 여러 곳에 두지 않는다.
- 불가피하게 2곳 이상이면 역할을 분리한다(예: Quick vs Browse).
- 사용자가 “어디서 해야 하는지” 고민하게 만들면 실패다.
---
## 인지 부하 최소(Decision budget)
- 한 화면에서 사용자가 “지금 결정해야 하는 것”은 최소로 제한한다.
- 기본값을 제공하고, 추가 옵션은 접힘/팝오버/시트로 점진적으로 노출한다.
- ‘변경’ 같은 버튼이 반복 노출되면 과밀/혼란 신호다(구조 재설계).
---
## 일관된 위계(Quiet hierarchy)
- Primary CTA는 1개만 강하게.
- Secondary/Tertiary는 가볍게(ghost/outline/link).
- 강조는 “조용한 위계”로, 과한 대비/과한 시각효과 금지.
---
## 피드백 단일화(One feedback channel)
- 같은 행동의 피드백은 한 채널에서만 보여준다.
- 자주 발생하는 변경은 토스트 대신 “상태 변화”로 끝내는 것을 우선한다.
- 피드백이 여러 곳에서 동시에 뜨면 어색함/저가 인상을 만든다.
---
## 겹침/충돌 방지(Overlap discipline)
- 패널/시트/팝오버/토스트가 서로 겹치지 않게 우선순위를 정의한다.
- 어떤 UI가 떠 있을 때 다른 UI는 이동/억제/병합 중 하나로 처리한다.
- 전역 블러/전역 딤으로 문제를 덮지 않는다(필요 시 최소치).
---
## 무대 유지(Stage-first)
- 배경/핵심 화면을 가리는 요소는 최소화한다.
- 상시 UI는 “앵커(작고 확실한 표시)” 위주로 유지한다.
- 큰 카드/대시보드형 UI가 상시 떠 있으면 감성이 깨진다.
---
## 모션은 이유가 있을 때만(Motion with meaning)
- 애니메이션은 상태 변화를 이해시키는 목적이 있을 때만 사용한다.
- 짧고 조용하게(과한 이징/번쩍임/바운스 금지).
- Reduce Motion을 고려한다.
---
## 카피는 오해를 만들지 않게(Copy safety)
- 초기 데이터가 비어도 어색하지 않은 카피를 기본값으로 둔다.
- 실시간/확정처럼 보이는 표현은 신중히 사용한다.
- 더미 동작은 (더미)로 명시한다.
---
## 접근성/상호작용 기본값(A11y baseline)
- 아이콘 버튼은 sr-only 라벨 제공.
- 포커스 링 유지.
- 터치/클릭 타겟 충분히 확보.
---
## 품질 게이트(커밋 전 1분 체크)
아래 중 하나라도 “No”면 커밋하지 않는다.
- 중복 진입점이 생겼는가?
- 한 화면에 결정/선택이 과도하게 보이는가?
- 피드백이 두 군데 이상에서 나오나?
- 겹침/가림/우선순위 문제가 있나?
- 배경(무대)을 과도하게 가리나?
- 톤/위계/카피가 01 가이드라인과 충돌하나?
---
## 디자인 톤 ## 디자인 톤
- 기본 톤: 감성, 저자극, 차분함 - 기본 톤: 감성, 저자극, 차분함

View File

@@ -80,3 +80,12 @@ body {
transform: translateY(0); transform: translateY(0);
} }
} }
.scrollbar-none {
-ms-overflow-style: none;
scrollbar-width: none;
}
.scrollbar-none::-webkit-scrollbar {
display: none;
}

View File

@@ -74,7 +74,7 @@ export const ControlCenterSheetWidget = ({
<SectionTitle title="Scene" description={selectedRoom?.name ?? '공간'} /> <SectionTitle title="Scene" description={selectedRoom?.name ?? '공간'} />
<div <div
className={cn( className={cn(
'-mx-1 flex gap-2.5 overflow-x-auto px-1 pb-1.5 snap-x snap-mandatory', '-mx-1 flex gap-2.5 overflow-x-auto px-1 pb-1.5 snap-x snap-mandatory scrollbar-none',
reducedMotion ? '' : 'scroll-smooth', reducedMotion ? '' : 'scroll-smooth',
)} )}
style={{ scrollBehavior: reducedMotion ? 'auto' : 'smooth' }} style={{ scrollBehavior: reducedMotion ? 'auto' : 'smooth' }}