mbtdm 공통 UI 표준mbtdm UI Standard

다른 프로젝트에서 번호로 요청하면, 해당 항목의 Rules를 구현하고 Check를 통과시킨 뒤 docs/UI-DECISIONS.md에 기록합니다. 선택 항목에 옵션을 적지 않으면 Default를 씁니다.Ask by number in any project: the item's Rules are implemented, its Check passed, and the result recorded in docs/UI-DECISIONS.md. Without an option letter, the Default is used.

• 페이지 폭을 px로 고정하지 않고, 전체 확대 금지(user-scalable=no, maximum-scale=1)를 쓰지 않습니다.Never fix width in px; never disable zoom globally (user-scalable=no, maximum-scale=1).
• html, body는 width:100%. 100vw로 덮어쓰지 않습니다.html, body are width:100%; never override with 100vw.
• 어떤 폭에서도 페이지 가로 스크롤이 없어야 합니다. 긴 도구줄만 자체 가로 스크롤.No horizontal page scroll at any width; only long toolbars scroll on their own.

내비게이션 전환점은 어디서나 900px입니다. 지금 창 크기를 조절하면 빨간 선이 움직입니다.The navigation switch point is 900px everywhere. Resize this window to move the red line.

• 호버 스타일은 (hover:hover) and (pointer:fine) 안에만.Hover styles only inside (hover:hover) and (pointer:fine).
• 컨트롤 높이: 터치 40px 이상, 포인터 36px 이상.Control height: touch ≥40px, pointer ≥36px.

회전은 “폭이 바뀐 것”으로 처리합니다. 구간을 넘으면 열린 메뉴를 닫고, 높이는 실제 보이는 영역으로 다시 잽니다.Rotation is “the width changed.” Crossing a switch point closes open menus; height is re-measured from the visible area.

• 전체 높이는 100vh 대신 --app-height.Full height uses --app-height, not 100vh.
• 연속 이벤트는 프레임당 한 번. 주소창 높이 변화는 무시.One update per frame; ignore address-bar-only height changes.
• 회전 후 강제 맨 위 이동, 고정 px 위치 보정 금지. 화면 방향 잠금 금지.No forced scroll-to-top or fixed-px offsets after rotation. No orientation lock.

빗금 부분이 안전영역입니다. 가장자리에 닿는 요소는 이 영역만큼 안쪽으로 여백을 둡니다.Hatched areas are safe-area insets. Edge-touching elements pad inward by them.

• 입력 글자 16px 이상 (iOS는 16px 미만이면 포커스 시 화면 확대).Input text ≥16px (iOS zooms on focus below 16px).
• type, inputmode, autocomplete, enterkeyhint 지정.Set type, inputmode, autocomplete, enterkeyhint.

• 터치 대상 44×44px 이상 (아이콘은 더 작아도 됨).Touch targets ≥44×44px (the icon itself may be smaller).
• 텍스트 대비 4.5:1 이상. 상태를 색만으로 구분하지 않음.Text contrast ≥4.5:1; never convey state by color alone.
• 키보드만으로 모두 사용 가능, :focus-visible 윤곽선 유지. Tab 키로 이 페이지를 직접 확인해 보세요.Fully keyboard-operable with a visible :focus-visible outline. Try Tab on this page.
• 아이콘 버튼에 aria-label, html lang을 내용 언어와 일치.Icon buttons get aria-label; html lang matches content.

테스트 크기에서만이 아니라 모든 폭에서 깨지지 않아야 합니다. 아래 상자의 오른쪽 아래 모서리를 끌어 폭을 바꿔 보세요.The layout must hold at every width, not just the test sizes. Drag the bottom-right corner of the box below.

• 320–2560px에서 천천히 늘이고 줄여도 겹침·잘림·가로 넘침 없음.320–2560px, resized slowly either way: no overlap, clipping or overflow.
• flex-wrap, minmax(), clamp() 사용. flex·grid 자식에 min-width:0.Use flex-wrap, minmax(), clamp(); give flex/grid children min-width:0.
• 글자가 들어가는 요소의 높이를 고정하지 않음. 이미지·영상은 max-width:100%.Never fix the height of text containers; media use max-width:100%.
• 브라우저 확대 200%, OS 글자 크기 최대에서도 모든 내용·동작에 닿을 수 있음.At 200% zoom and largest OS text size, all content and actions stay reachable.

어떤 언어를 보여줘도 레이아웃이 틀어지지 않아야 합니다. 같은 버튼을 세 언어로 놓은 예입니다.Whatever language is shown, the layout must not shift or break. The same buttons in three languages:

• 영어보다 30–40% 긴 문구(독일어 등)를 견디도록. 버튼·탭·메뉴에 글자 폭 고정 금지.Allow 30–40% longer text (German etc.); no fixed text widths on buttons, tabs, menus.
• 넘칠 때 줄바꿈인지 말줄임(…)인지 요소마다 정하고, 말줄임이면 전체 문구를 툴팁·접근 이름으로 제공.Decide wrap or ellipsis per element; if truncated, expose the full text via tooltip / accessible name.
• 한국어는 word-break:keep-all, 긴 URL·합성어는 overflow-wrap:anywhere.Korean uses word-break:keep-all; long URLs and compounds use overflow-wrap:anywhere.
• 날짜·숫자·통화·복수형은 Intl로. 문자열 이어 붙이기 금지.Dates, numbers, currency, plurals via Intl; no string concatenation.
• 논리 속성(margin-inline-start)을 써서 오른쪽→왼쪽 언어도 추가 가능하게.Logical properties (margin-inline-start) so right-to-left languages can be added.
• 언어를 바꿔도 스크롤 위치·열린 패널·입력 내용 유지. 위의 KO/EN 버튼으로 확인해 보세요.Switching language keeps scroll position, open panels and input. Try the KO/EN switch above.

적용 대상: 가장자리에서 본문 위로 미끄러져 나오는 패널.Applies when a panel slides over content from an edge.

이 페이지의 목차가 실제 예시입니다. 창을 900px 미만으로 줄이고 왼쪽 위 버튼으로 열어 보세요.This page's contents panel is a live example. Narrow the window below 900px and open it from the top-left button.

• 버튼: aria-label, aria-expanded, aria-controls, 44px 대상.Button: aria-label, aria-expanded, aria-controls, 44px target.
• 열면 맨 위부터, 포커스는 안으로 이동하고 Tab은 안에 가둠. 닫으면 버튼으로 복귀.Opens at top; focus moves in and is trapped; returns to the button on close.
• 스크림은 pointerdown에 닫고, 같은 터치가 아래를 누르지 않게 삼킴.Scrim closes on pointerdown and swallows the rest of that press.
• 배경 잠금은 html{overflow:hidden}. body{position:fixed} 금지.Lock with html{overflow:hidden}; never body{position:fixed}.
• 숨김 상태는 visibility:hidden + pointer-events:none.Hidden state is visibility:hidden + pointer-events:none.

• 접힘 조건(1.2)에서는 드로어(2.1)로 바뀝니다.Becomes a drawer (2.1) under the collapsed conditions of 1.2.
• 접기 상태 저장, 현재 위치 표시 + aria-current, 독립 스크롤.Remember collapse state; mark current location + aria-current; scrolls independently.

• position:sticky; top:0. position:fixed + body 상단 여백 방식 금지 (iPad Chrome 위치 오류).position:sticky; top:0. No position:fixed with reserved body padding (iPad Chrome bug).
• 구간별 높이 하나, 낮은 가로 화면에서는 줄임. 좌우 안전영역 반영, 배경 있음.One height per range, reduced in short landscape; side safe areas; has a background.
• 앵커 이동 시 제목이 가리지 않게 scroll-margin-top.scroll-margin-top so anchors aren't hidden under it.

• 메가메뉴는 900px 이상에서만. 미만에서는 같은 항목을 전체 화면 메뉴로(2.1 규칙 적용).Mega menu only at ≥900px; below, the same items in a full-screen menu (2.1 applies).
• 열린 메뉴 높이는 보이는 영역 높이에 맞춰 폰 가로에서도 마지막 항목에 닿게.Menu height follows the visible viewport so the last item is reachable in phone landscape.
• 호버로 열리는 메뉴도 클릭·키보드로 열 수 있어야 함.Hover-opened menus also open by click/tap and keyboard.

• compact에서만 표시, 900px 이상에서는 펼친 내비로 대체. 키보드가 열리면 숨김.Compact only; replaced by expanded nav at ≥900px; hidden while the keyboard is open.
• 드로어와 같은 항목을 중복해 넣지 않음.Doesn't duplicate drawer items.

다섯 종류만 씁니다. 아래 버튼으로 실제 동작을 확인해 보세요 (닫기 버튼, 바깥 누르기, Esc).Only five types. Try them below (close button, outside press, Esc).

• 닫기 버튼·스크림·Esc 모두 지원. 단, 입력 중이거나 처리 중이면 스크림·Esc로 닫지 않음.Close button, scrim and Esc — except while input is unsaved or work is in progress.
• role="dialog", aria-modal, 포커스 이동·가둠·복귀, 배경 스크롤 잠금.role="dialog", aria-modal, focus move/trap/return, background scroll lock.
• 팝업 위 팝업 금지 (확인창 한 단계만 허용). 위험 동작은 동사 버튼 (“확인” 아님).No popup on a popup (one confirmation allowed). Destructive actions use a verb (“Delete”, not “OK”).
• 토스트는 role="status", 한 번에 하나.Toast: role="status", one at a time.

• 레이블은 칸 위에 항상 표시. placeholder를 레이블 대신 쓰지 않음.Visible label above each field; placeholder is never the label.
• 오류는 칸 아래 한 줄 (aria-describedby), 제출 시 첫 오류 칸으로 포커스.One-line error under the field (aria-describedby); focus first invalid field on submit.
• 제출 중 비활성 + 진행 표시, 결과는 role="status". 실패와 임시 저장 구분.Disabled with progress while submitting; result via role="status"; failure ≠ draft saved.
• 작성 중 이탈 시 확인 또는 자동 저장.Confirm or auto-save when leaving with unsaved input.

적용 대상: 다크 테마를 제공하는 서비스. 제공 여부는 선택입니다 (3.9).Applies when the service offers a dark theme. Offering one is optional (3.9).

• 라이트·다크·시스템 3가지, 기본은 시스템.Light, Dark, System; default System.
• 사용자 선택은 첫 화면 그리기 전에 html[data-theme]로 적용 (깜빡임 없음). 오른쪽 위 시스템·라이트·다크 선택이 예시입니다.Apply the stored choice via html[data-theme] before first paint (no flash). The System/Light/Dark switch above is an example.
• 색은 토큰 파일 하나에서, 다크 값을 짝으로.Colors come from one token file, each with a dark value.

• 측정된 가장 좁은 조건(브라우저 + 기기 + 최상위 페이지)에만 적용. 나머지는 표준 동작 유지.Target the narrowest measured condition (browser + device + top-level); everything else stays standard.
• 공통 모듈 한 곳에, 설명 문서 링크와 “다른 환경에서는 실행 안 됨” 테스트를 함께.One shared module, linked write-up, and a test that it stays off elsewhere.

• 아이콘 20–24px, 대상 44px, 열리면 ✕로 바뀌어도 됨. 한 화면에 하나만.Icon 20–24px in a 44px target; may morph to ✕ when open; one per screen.

• 폭 240–280px. 아이콘만 있는 64px “레일”로 접기 가능.Width 240–280px; optional 64px icon “rail” when collapsed.
• 위에서부터: 주요 목적지 → 즐겨찾기 → 사용자 분류 → 맨 아래 설정·계정.From top: primary destinations → favorites → user groups → settings & account at bottom.
• 행 32–36px(포인터) / 44px(터치). 3.4B: 섹션 순서를 사용자가 바꾸고 계정에 저장.Rows 32–36px (pointer) / 44px (touch). 3.4B: user-reorderable sections saved to account.

이 페이지 헤더는 3.5A + 3.5C 예시입니다.This page's header is 3.5A + 3.5C.

위 2.6의 바텀시트 예시는 900px 이상에서 가운데 패널로 바뀝니다.The bottom-sheet demo in 2.6 becomes a centered panel at ≥900px.

• 일반 4초, 실행 취소 포함 6초, 마우스를 올리거나 포커스하면 멈춤. 새 토스트가 기존 것을 대체.4s plain, 6s with Undo, paused on hover/focus; a new toast replaces the current one.

• 좌우 여백 clamp(16px, 3vw, 24px) + 안전영역, wide 본문 최대폭 1200–1320px.Side padding clamp(16px, 3vw, 24px) + safe areas; wide content max 1200–1320px.

• 3.9B 첫 진입(저장된 선택 없음)은 시스템 설정을 따름.3.9B: first visit with no stored choice follows the system.
• 선택지는 시스템·라이트·다크 3가지. 언제든 “시스템 따르기”로 돌아갈 수 있어야 함. 오른쪽 위 선택이 예시입니다.Offer all three — System, Light, Dark — so users can always return to System. The switch at top right is an example.
• 저장된 선택은 다음 방문 때 시스템보다 우선, 첫 화면 그리기 전에 적용.A stored choice wins on later visits and is applied before first paint.

• 첫 진입은 navigator.languages에서 지원하는 첫 언어, 없으면 서비스 기본 언어. 이 페이지도 시스템 언어가 한국어면 한국어로, 아니면 영어로 시작합니다.First visit picks the first supported language in navigator.languages, else the default. This page starts in Korean if your system language is Korean, English otherwise.
• 사용자가 고른 언어는 저장(계정 우선)하고 다음 방문 때 시스템 언어보다 우선.A chosen language is stored (account first) and wins over the system language later.
• 첫 화면 그리기 전에 적용, 바꿀 때마다 html lang 갱신.Apply before first paint; update html lang on every switch.
• 웹사이트는 URL에 언어를 넣음(/ko/…, /en/…). 선택지는 국기가 아닌 각 언어 이름(한국어, English)으로.Websites put the language in the URL (/ko/…, /en/…). Show each language by its own name (한국어, English), never a flag.

1. 세로 진입 → 가로 회전 → 새로고침Open portrait → rotate landscape → reload
2. 가로 진입 → 세로 회전Open landscape → rotate portrait
3. 드로어·모달을 연 채로 회전Rotate with a drawer or modal open
4. 키보드를 연 채로 회전Rotate with the keyboard open
5. iPad 분할 화면·떠 있는 창iPad Split View and floating window
6. 문서 폭·표시 폭·배율이 같은지 (메뉴 모양만 보고 판단하지 않기)Document width, visible width and scale match (don't judge by menu shape alone)

• 1부 1.1–1.10 Check 통과Part 1 items 1.1–1.10 checks pass
• 320 → 2560px 연속 크기 조절, 확대 200%, OS 글자 크기 최대 확인 (1.9)Continuous resize 320 → 2560px, 200% zoom, largest OS text (1.9)
• 가장 긴 언어로 390px·900px 확인 + 가짜 번역(문구 40% 늘림) 테스트 (1.10)Longest language at 390px and 900px + pseudo-localization (+40%) pass (1.10)
• 사용 중인 2부 항목 Check 통과Every Part 2 item in use passes
• 라이트·다크(있다면) 확인Light and dark (if offered) reviewed
• docs/UI-DECISIONS.md에 적용 항목·옵션·예외 기록docs/UI-DECISIONS.md lists applied items, options, exceptions

브라우저: Safari(iOS·macOS), Chrome(iOS·Android·데스크톱), 앱 WebView. 크기는 Playwright로 자동화하고, 회전·키보드는 실기기로 확인합니다.Browsers: Safari (iOS, macOS), Chrome (iOS, Android, desktop), app WebView. Automate sizes with Playwright; check rotation and keyboard on real devices.