Files
Pier_v1/RAG/design system_v0.1.1/mobile/module.mobile-tablet.md
T
ahnyongjooandClaude Sonnet 5.5 964a841de1 chore(rebar): Pier_T_rebar 작업 폴더 초기 구성 및 외부 의존 파일 통합
- Code\rebar_pipeline, review_pipeline, pier-program을 정션에서 실제 폴더로 전환
- Code\rhino_mcp 및 CLAUDE_rhino배경.md 추가, .mcp.json은 PYTHONPATH로 새 위치 사용
- pier-program 내부 .git 제거(이력은 backup\pier-program_20261028.bundle에 보관)
- worktree 가이드 반영(CLAUDE.local.md, HANDOFF.md)
- D:\Rhino-MCP 경로 참조를 새 위치로 치환

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
2026-10-28 11:20:18 +09:00

12 KiB
Raw Blame History

Prism — M4 모바일·태블릿 앱 실행 명세 (Layer 3)

버전 수정일 수정자 주요 변경 내용 비고
v0.1.0 2026-07-29 HMCM 신규 제정 — 모바일·태블릿 앱 실행 명세. 태블릿(md) 적용 범위 확장(screen v0.1.1)을 반영한 최초 명세, 구조 검증 12항 통과 active 등록 (modules §4.4)
메타 값
모듈 M4 mobile-tablet — 모바일·태블릿 앱
계층 Layer 3 (실행 명세 · 자기완결형)
대상 산출물 iOS·Android·태블릿 네이티브/하이브리드 앱, 태블릿 현장용 도구
상위 의존 Design.md 0.1.1 · foundations 0.1.2 · medium.screen 0.1.1 (mobile 범위 xs·sm·md 확장 반영) · components 0.1.1 · tokens.json 0.1.1
지배 조건 터치 전용 (hover 없음) · OS 테마 연동 필수 · 한 손 조작 도달권
module:
  id: mobile-tablet
  name: 모바일·태블릿 앱
  version: 0.1.0
  status: active
  brand: saman
  medium: screen
  medium_variant: screen.mobile
  dual_medium: false
  format: responsive            # xs(폰 세로) · sm(폰 가로·소형 태블릿) · md(태블릿)
  columns: 4                    # xs 기준 (sm·md는 8)
  type_set: compact
  component_count: 18
  variant_count: 33
  patterns: [m1-list, m2-detail, m3-form, m4-board, m5-settings]
  depends_on: { foundations: 0.1.2, medium.screen: 0.1.1, components: 0.1.1 }

1. 적용 조건

적용 제외
폰·태블릿 앱 (네이티브·하이브리드·PWA) 데스크톱 웹앱 → M3 (webapp/) — lg·xl 구간은 M3 소관
태블릿 현장용 도구 (점검·기록·열람) 발표 슬라이드 → M2, 인쇄물 → M5

변형 경계: 하나의 반응형 웹 서비스가 폰~데스크톱을 모두 덮는 경우, xs·sm·md는 본 모듈 규정을, lg·xl은 M3 규정을 따른다. 두 모듈의 토큰·컴포넌트는 동일하므로 충돌은 발생하지 않는다 — 다른 것은 내비게이션 패턴·히트 영역·hover 취급뿐이다.


2. 브레이크포인트·그리드 (정본 값)

BP 범위 (px·dp) 대상 컬럼 마진 거터 기준 컬럼 폭 정합
xs 0–599 폰 세로 4 16 16 70 4×70+3×16=328 ✓
sm 600–903 폰 가로·소형 태블릿 8 24 16 55 8×55+7×16=552 ✓
md 904–1239 태블릿 (v0.1.1 확장) 8 32 24 84 8×84+7×24=840 ✓
ID 규칙
MB-1 단위: Android dp / iOS pt (1dp ≈ 1pt ≈ 1px@1x, 16 기준 환산 동일)
MB-2 최상위 영역만 그리드 정렬, 내부는 스페이싱 토큰 (GD-1~3)
MB-3 연속 본문 max 38em — md 6col(624dp = 39.0em)도 초과하므로 본문 블록에 상한 적용 (MS-1)
MB-4 화면 가장자리 4dp는 히트 영역으로 신뢰하지 않는다 — 시스템 제스처 충돌 (HT-5)

스페이싱 (base 8dp) · 반경 · 획

space.025~800 = 2·4·8·12·16·24·32·48·64 dp | 반경 sm 4 / md 8 / lg 12 / pill | 획 hairline 1 / regular 2 / bold 3


3. 타입 바인딩 (base 16dp)

역할 xs·sm md (태블릿) 행간 웨이트
caption 13 13 1.55 Medium 500
body-sm 14 14 1.70 Regular 400
body 16 16 (불변) 1.70 Regular 400
body-lg 18 18 1.70 Regular 400
title-sm 20 20 1.50 Medium 500
title 26 26 1.50 Bold 700
title-lg 32 32 1.50 Bold 700
display 26 (n+4 강등) 46 1.25 Regular 400
display-lg 32 (n+6 강등) 66 1.25 Regular 400
ID 규칙
TY-M1 본문을 화면이 작다는 이유로 줄이지 않는다 (RT-1). 줄어드는 것은 한 줄의 글자 수다
TY-M2 xs·sm에서 강등된 display 계열(26·32)과 title·title-lg를 같은 화면에 병용하지 않는다 — 동일 크기로 위계 소멸 (RT-5)
TY-M3 OS 글자 크기 설정(Dynamic Type·fontScale)을 존중한다 — 절대 고정 금지, 200% 확대 시 손실 없음 (A8)
TY-M4 표·수치 등폭 숫자(tnum) 강제, 수치 우측 정렬

4. 색·테마

팔레트·페어는 M3(webapp/module.webapp.md §3·§4)과 완전 동일하다 (같은 screen 매체). 핵심 정본만 재수록한다.

라이트 다크 실측
캔버스 sand #F4F3F0 / 본문 brown #474235 캔버스 obsidian #111111 / 본문 sand 9.02 / 17.02 AAA
제목 green #1F524B 제목 sand (green 텍스트 금지 — 2.13:1) 8.00 / —
악센트 orange #D05C26 — 대형 전용 동일 — 4.71 AA 대형 권장 3.61 / 4.71
상태색 4종 + container 반전 페어 (container↔on 교환) 6.58~6.91
ID 규칙
CL-M1 OS 테마 연동 필수 (라이트/다크 자동 + 인앱 재정의 3택 영속 저장) — mobile은 TC-1이 선택이 아니라 필수다
CL-M2 다크에서 그림자는 소실된다 — 표면 톤 상향으로 깊이 표현 (EV-3)
CL-M3 악센트 경제: 1 viewport당 ≤ 2 (스크롤 화면은 동시 가시 영역 기준)

5. 터치·인터랙션 (본 모듈의 지배 규정)

항목 값 근거
히트 영역 최소 48×48dp (시각 크기와 분리 — 20dp 아이콘도 히트는 48) HT-1·§8.1
인접 타깃 간격 ≥ 8dp HT-3
hover 사용 금지 — hover에만 있는 정보·액션 0건 HV-1·HV-2
상태 표현 GRADE 시프트: pressed ±8 · selected ±12. 터치 피드백 ≤ 100ms §6.2
드래그 드래그로만 가능한 조작 금지 — 대체 수단 제공 (WCAG 2.5.7) PT-2
스와이프 액션 숨은 스와이프 기능은 보강만 — 동일 기능의 가시적 경로 필수 HV-2 준용
포커스 외장 키보드·스위치 연결 시 포커스 링 3px 표시 (FC 전 규정 적용) §7
모션 transform·opacity만, OS 모션 축소 설정 존중 (RM-1) §10

6. 화면 패턴 (5종) · 내비게이션

ID 구조 구성 적용
M1 목록 상단 앱바 + 리스트 card 목록(xs 1열, sm 2열, md 2~3열) + badge·stat 요약 조회·탐색
M2 상세 앱바 + 스크롤 본문 header 요약 + scope + 본문(≤38em) + specsheet + directive 항목 열람
M3 폼 1열 수직 input 수직, 레이블 상단, primary 1개 — 하단 고정 제출 바 허용(히트 48dp) 입력·기록
M4 보드 카드 그리드 stat·chartframe 카드. md 태블릿에서 2열 분할 뷰(목록+상세) 허용 현황판
M5 설정 그룹 리스트 rule로 구획, disclosure 그룹, toast 확인 설정·계정

내비게이션 규정

ID 규칙
NV-1 주 내비: 하단 탭 바 (3~5개, 히트 48dp, 현재 위치 색+형태 이중 표시). 6개 이상이면 정보 구조를 재설계한다
NV-2 보조 내비: 드로어(스크림 32%, 포커스 트랩) 또는 앱바 뒤로가기. 뒤로가기는 OS 관례를 따른다
NV-3 md(태블릿)에서 하단 탭 → 좌측 레일 전환을 허용한다 (같은 항목·같은 순서 유지)
NV-4 핵심 액션은 화면 하단 1/3(엄지 도달권)에 배치한다. 파괴적 액션은 도달권 밖 + 확인 절차
NV-5 모달은 xs·sm에서 바텀시트 변형을 기본으로 한다 (modal 컴포넌트의 매체 변형 — 스크림·포커스 트랩·Esc 상당(뒤로가기) 동일 적용)

7. 컴포넌트 선별 (18종 / 변형 33종)

eyebrow(2) · header(1) · rule(1) · card(4) · table(4) · stat(1) · chartframe(1) · directive(3) · badge(4) · scope(1) · stepper(1) · xref(1) · mediaframe(1) · button(4) · input(1) · modal(1) · toast(1) · disclosure(1)

미선별: hero·footer·specsheet(M2 상세 패턴에서 조건부)·principle·stagecard·connector·toc(문서 열람 필요 시 조건부 — 추가 시 카탈로그 규정 준수).

주요 사용 규정: table은 xs에서 카드 변환 또는 가로 스크롤(핵심 열 고정) · input은 용도별 키보드 타입(숫자·이메일) 지정 · toast는 하단 탭 위에 표시, 동시 1개 · button 히트 48dp.


8. 분량 예산

슬롯 권장 최대 근거 (xs 328dp 콘텐츠 기준)
앱바 제목 8자 12자 뒤로가기·액션 아이콘 제외 폭
카드 제목 / 본문 10 / 40자 15 / 80자 296dp ÷ 16dp ≈ 18자 × 행수
버튼 레이블 4자 8자 —
탭 라벨 2자 5자 5탭 × 65dp
input 레이블 / 오류 8 / 30자 12 / 50자 —
toast 15자 30자 1~2행
빈 상태 안내 20자 40자 원인 + 다음 행동

BG-M1: 예산 초과 시 글자를 줄이지 않는다 — 내용을 줄이거나 상세 화면으로 이관한다. 잘림(ellipsis) 설계 금지 — 잘림이 필요하면 예산이 잘못된 것이다.


9. 제작 절차

단계 작업 판정
1 화면 목록 + 패턴(M1M5) 배정, 내비 구조(NV-13) 확정 매핑 완료
2 토큰 탑재 — M3 §3 CSS 변수 또는 플랫폼 토큰 파일로 변환 (dp 환산 §2·§3) 리터럴 0건
3 xs 기준 우선 설계 → sm·md 확장 (mobile-first) BP 3종 검증
4 컴포넌트 구현 — §7 선별 + §5 터치 규정 히트 48dp
5 다크 테마 — OS 연동 + 전 화면 다크 확인 (green 텍스트 0건) CL-M1
6 OS 글자 크기 확대(200%) 시험 손실 0
7 실기기 시험 — 폰 1종 + 태블릿 1종 이상 §10 수동
8 검증 §10 전항 PASS

10. 검증 체크리스트

자동

# 항목 기준
A1 색·치수 리터럴 토큰 정의부 외 0건
A2 그리드 정합 xs·sm·md 잔차 0 (§2)
A3 히트 영역 인터랙티브 요소 ≥ 48dp
A4 hover 의존 hover 전용 기능 0건
A5 본문 max-width ≤ 38em
A6 다크 페어 전 페어 재계산 통과, green 텍스트 0건
A7 대비 본문 ≥ 4.5:1, 비텍스트 ≥ 3:1
A8 강등 병용 display 계열 + title·title-lg 동일 화면 0건 (TY-M2)
A9 모션 transform·opacity 외 0건, 모션 축소 대응
A10 예산 전 슬롯 최대 이하, 잘림 0건

수동 (실기기)

# 항목
V1 폰·태블릿 실기 — 히트 영역·한 손 도달권·시스템 제스처 충돌
V2 OS 다크 모드 전환 — 전 화면 확인
V3 OS 글자 크기 최대 설정 — 손실·겹침 없음
V4 스크린리더 (VoiceOver·TalkBack) 주요 흐름 낭독
V5 그레이스케일 판독 (색 단독 의존 검출)
V6 가로 회전 (sm) — 레이아웃 성립 확인
V7 외장 키보드 연결 시 포커스 링 표시

구조 검증 결과 (modules §8.1 — active 등록 근거)

12항 전항 PASS (2026-07-29, HMCM): 스키마 충족 · depends_on 기록(screen 0.1.1 md 확장 반영) · 정량 명시(18종/33변형) · 완화 0건 · 전 슬롯 예산 · 패턴-콘텐츠 매핑 · 그리드 정합 · 카탈로그 외 0건 · 미사용 0건(조건부 선별 명시) · 역할 중복 0건 · 결론 존 규정 · 겸용 해당 없음


본 모듈은 참조 사양이다 (DC-3). 플랫폼 심사 기준(App Store·Play)·기기별 실동작은 별도 검증해야 한다.