ahnyongjooandClaude Sonnet 5.5
964a841de1
- 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>
224 lines
12 KiB
Markdown
224 lines
12 KiB
Markdown
# 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 테마 연동 필수 · 한 손 조작 도달권 |
|
||
|
||
```yaml
|
||
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 | 화면 목록 + 패턴(M1~M5) 배정, 내비 구조(NV-1~3) 확정 | 매핑 완료 |
|
||
| 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)·기기별 실동작은 별도 검증해야 한다.*
|