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:
@@ -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 가이드라인과 충돌하나?
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
## 디자인 톤
|
## 디자인 톤
|
||||||
|
|
||||||
- 기본 톤: 감성, 저자극, 차분함
|
- 기본 톤: 감성, 저자극, 차분함
|
||||||
|
|||||||
@@ -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;
|
||||||
|
}
|
||||||
|
|||||||
@@ -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' }}
|
||||||
|
|||||||
Reference in New Issue
Block a user