모바일

ultrahand: 모바일

세 가지 휴대폰 크기(세로 및 가로)를 전환하는 인터랙티브 Claude 아티팩트로 휴대폰 화면을 디자인합니다. 모든 규칙은 references/principles.md에 적용되며, 각 규칙은 references/sources.md를 인용합니다. 크기와 안전 영역은 references/presets.md에 있습니다.

1. 요구사항 수집

추론할 수 없는 것만 물어보세요. 그리기 전에 다음을 확정하세요:

• 플랫폼: iOS, Android 또는 둘 다. 둘 다인 경우 48-유닛 대상과 플랫폼 중립 패턴을 사용합니다.
• 범위: 하나의 화면 또는 플로우. 플로우인 경우 화면 목록과 이동 방식(탭, 푸시, 시트 또는 전체 화면 모달)을 나열하세요.
• 주요 작업: 각 화면의 목적. 해당 작업은 엄지 도달 범위 내에 있어야 합니다.
• 실제 콘텐츠: 이름, 길이, 개수 및 가장 긴 가능한 문자열. 로렘 입숨으로 디자인하지 마세요.
• 데이터 상태: 로드되는 것, 비어 있을 수 있는 것, 실패하거나 오프라인이 될 수 있는 것.
• 제약사항: 브랜드 색상, 글꼴, 기존 디자인 시스템, 네이티브 앱인지 웹인지.
• 테마: 색상, 크기 또는 간격을 선택하기 전에 프로젝트의 테마(design/THEME.md, *.tokens.json; shared/theme/README.md 참조)를 확인하세요. 테마가 있으면 디자인에 사용하세요: node "${CLAUDE_PLUGIN_ROOT}/shared/theme/css.mjs" <tokens.json> --style --out theme.html 실행, 빌드에 --head theme.html 전달, 사용자 정의 속성(var(--color-surface), var(--space-gap-group))만 사용하고 인벤토리의 컴포넌트를 재사용하세요. 디자인에 테마에 없는 것이 필요하면 가장 가까운 토큰을 사용하고 추가 사항을 미해결 질문 아래에 나열하세요. 값을 임의로 만들지 마세요. 테마가 없으면 shared/theme/rules.md의 필수 사항을 따르고 theme 스킬을 제공하세요.

2. 참조 읽기

디자인하기 전에 references/principles.md와 references/presets.md를 읽으세요. 새로운 패턴을 만들지 말고 플랫폼 자체 패턴(탭 바, 네비게이션 스택, 시트)을 사용하세요.

3. 화면 구성

각각 검사를 통과한 컴포넌트라도 합쳐지면 지저분한 화면이 될 수 있습니다. 빌드하기 전에 shared/composition/principles.md의 플러그인 구성 규칙을 사용하여 섹션을 구성하고 섹션이 화면을 어떻게 구성하는지 계획하세요:

• 섹션 맵을 작성하세요. 각 화면에 대해 섹션(네비게이션 바, 콘텐츠, 주요 작업, 탭 바)을 나열하고, 각각의 단일 작업, 사용 빈도 순서로 정렬된 멤버, 하나의 강조점을 명시하세요. 주요 콘텐츠와 크롬이 무엇인지 말하세요: 콘텐츠가 지배하고 크롬은 뒤로 물러납니다.
• 공간으로 그룹화하세요. 그룹 내 간격은 그룹 간 간격보다 분명히 작아야 합니다. 공간이 그룹을 보여줄 수 없을 때만 컨테이너를 추가하세요.
• 역할당 하나의 스타일, 섹션당 하나의 강조. 동일한 역할, 동일한 스타일; 상태와 레이블은 절대 버튼처럼 보이지 않아야 합니다. 강한 악센트는 섹션당 한 가지에만 적용되고, 선택된 상태는 더 차분한 처리를 사용합니다.
• 작게 유지하세요. 약 세 가지 유형 크기, 한 곳에 하나의 사실, 자주 사용되는 멤버는 보이고 드문 것은 메뉴 뒤에. 변경으로 무언가 추가될 때는 먼저 재구성하고 자리를 차지할 가치가 있는 것만 추가하세요.

4. 캔버스 아티팩트 구축

플러그인의 공유 리사이즈 가능 캔버스(shared/canvas/; README.md에 전체 계약 사항 있음) 위에 구축하세요. 화면을 screen.html로, 디자인 자체 설정을 config.json으로 작업 폴더에 작성한 후 빌드하세요:

node "${CLAUDE_PLUGIN_ROOT}/shared/canvas/build.mjs" \
  --presets "${CLAUDE_PLUGIN_ROOT}/skills/mobile/references/presets.md" \
  --config config.json --screen screen.html \
  --title "<디자인 이름>" --out index.html

index.html을 아티팩트로 게시하세요. 프리셋은 small 360(Android), medium 393, large 430(iOS)입니다. 회전하면 각각 가로 모드가 제공되며, 320 너비 재배치 패스는 검사 아래에 있습니다.

• **config.json**은 title과 states(예: 기본, 로딩, 빈 상태, 오류)를 설정합니다. iOS 전용 디자인은 "initialPreset": "medium"으로 설정하고, iOS와 Android를 함께 사용할 때는 "minTarget": 48로 설정하여 모든 프리셋이 더 엄격한 대상을 기준으로 측정되도록 합니다.
• 화면 계약: 하나의 <template id="uh-screen">에 [data-screen] 섹션이 있고, 클릭을 위해 data-nav, data-nav-replace(탭), data-nav-back, data-show-state를 사용합니다. 가장자리를 프리셋과 그 회전을 따르는 var(--uh-safe-top|right|bottom|left)로 패딩 처리하고, :host가 볼 수 없으므로 [data-screen]에서 이들을 사용하는 토큰을 선언하세요. 크기에 반응할 때는 @media 대신 @container screen (width >= …)를 사용하세요. 텍스트는 rem 단위, 히트 영역, 아이콘, 여백은 px 단위로 하여 200% 텍스트가 단어는 크게 만들고 컨트롤은 그대로 두세요. 색상은 light-dark()를 사용하세요. 동작은 window.ultrahandSetup = function (canvas) { … }에 넣으세요.
• 고정 부분: 하단에 고정된 모든 것(탭 바, FAB, 스낵바)을 하나의 도크에 쌓아 겹치지 않게 하고, [data-screen]에 scroll-padding을 설정하여 포커스가 고정 막대를 피해 스크롤되도록 하세요 [WCAG-2.4.11]. 좁은 높이 또는 200% 텍스트에서는 헤더가 정적으로 가도록 하세요 [WCAG-1.4.4].
• 프리셋별 플랫폼: small은 Android, medium과 large는 iOS입니다. 뒤로 가기 컨트롤, 제목 정렬, 대상 크기 등 차이가 있는 규칙에 대해 canvas.size.platform을 따르세요.
• 내장 토글: 라이트/다크, 200% 텍스트, 상태 선택기, 터치 대상 표시(44 pt, Android 프리셋에서는 48 dp). 직접 만들지 마세요. 시트를 연 후 canvas.refresh()를 호출하여 대상 오버레이가 볼 수 있도록 하세요.
• 고정된 장치 번호가 아닌 유연한 단위와 인셋으로 레이아웃하여 하나의 디자인이 모든 프리셋에 적응하도록 하세요.
• 주요 플로우를 클릭 가능하게 만드세요: 탭이 전환되고, 행이 푸시되며, 시트가 열리고 닫힙니다. 시트와 다이얼로그는 화면에 그리고, alert, confirm 또는 prompt는 절대 사용하지 마세요.

5. 모든 프리셋 디자인

각 화면에 대해 small, medium, large 순으로 작업한 다음 각각을 가로 모드로 작업하세요. 문제가 나타나는 크기에서 각 문제를 해결하세요:

• small (360): 텍스트와 버튼이 여전히 주요 정보를 자르지 않고 맞아야 합니다.
• large (430): 콘텐츠가 긴 줄로 늘어나거나 죽은 공간을 남기지 않아야 합니다.
• 가로 모드: 짧은 높이에서도 포커스된 필드가 키보드 위에 표시되고, 측면 안전 영역이 존중되어야 합니다. 200% 텍스트에서도 확인하세요: 고정 헤더와 도크가 함께 콘텐츠를 위해 화면의 대부분을 남겨야 합니다.

그런 다음 320 너비 재배치 검사를 빠르게 통과하세요.

6. 프레젠테이션 전 자체 점검

모든 항목을 검토하세요. 실패한 것은 수정하거나, 이름을 지정하고 왜 허용 가능한지 말하세요.

구성 (구성 감사 실행, node "${CLAUDE_PLUGIN_ROOT}/shared/input/drive.mjs" do "${CLAUDE_PLUGIN_ROOT}/shared/composition/audit.mjs", 가장 큰 크기와 가장 작은 크기에서, 또는 눈으로 확인):

• 흐릿하게 보았을 때 화면이 의도된 섹션을 보여주고, 주요 콘텐츠가 먼저 눈에 띕니다. 의도하지 않은 밝은 지점이 없습니다.
• 각 섹션은 하나의 작업을 가지며, 멤버는 기능과 빈도별로 그룹화되고, 그룹 간 간격이 그룹 내 간격보다 분명히 큽니다.
• 각 섹션에는 최대 하나의 강하게 강조된 요소가 있고, 선택된 상태는 차분합니다.
• 역할당 하나의 스타일: 각 섹션의 컨트롤 스타일 수를 세고 추가된 것을 정당화하세요. 레이블이나 상태가 버튼처럼 보이지 않습니다.
• 행과 섹션은 공유된 가장자리에 정렬되고, 화면에 약 세 가지 유형 크기가 있습니다.
• 어떤 사실도 두 번 표시되지 않고, 여기서 작업에 도움이 되지 않는 것은 화면에 없습니다.
• 변경 라운드 후: 추가된 것을 나열하세요. 화면은 필요한 것보다 더 복잡하지 않아야 합니다.
• 테마 값만 사용: 원시 색상 없음, 8포인트 스케일을 벗어난 간격 없음, 스케일 밖의 유형 크기 없음, 인벤토리 컴포넌트를 재구축 대신 재사용 (shared/theme/rules.md NN-1, NN-2, NN-6, EV-4).

컴포넌트 및 플랫폼:

• 터치 대상은 최소 44 × 44 pt (iOS) 또는 48 × 48 dp (Android)이며, 간격을 가지며, 절대 24 × 24 미만이어서는 안 됩니다.
• 주요 작업은 한 엄지로 도달 가능하고, 파괴적인 작업은 엄지가 놓이는 곳에서 멀리 떨어져 있습니다.
• 어떤 인터랙티브 요소도 상태 표시줄, 컷아웃 또는 홈 표시기 아래에 있지 않으며, 어떤 방향에서든 마찬가지입니다.
• 3~5개의 최상위 탭이 있고, 각각 텍스트 레이블이 있으며, 독립형 햄버거 메뉴는 없습니다.
• 모든 시트에는 보이는 닫기 또는 취소 버튼과 명확한 디텐트가 있고, 시트는 절대 쌓이지 않습니다. 시트를 열면 포커스가 안으로 이동하고, Esc 키로 닫히며, 포커스는 열린 요소로 돌아갑니다 [NNG-SHEET].
• 선택된 탭은 색상 이상으로 표시됩니다(예: 인디케이터 필 또는 굵기) [WCAG-1.4] [M3-NAVBAR], 그리고 무언가를 제거하면 탭 가능한 실행 취소가 제공됩니다.
• 모든 필드에는 위에 레이블이 있고(플레이스홀더가 아님), 올바른 키보드와 자동 완성 유형이 있으며, 키보드가 올라와 있을 때도 보입니다.
• 오류는 인라인으로, 필드 옆에 나타나며 문제 해결 방법을 말하고, 입력된 내용은 유지됩니다.
• 모든 제스처에는 보이는 대안이 있고, 시스템 가장자리 제스처와 충돌하지 않습니다.
• 본문 텍스트는 16–17 이상이며, 레이아웃은 정보 손실 없이 200% 텍스트를 견딥니다.
• 명암비는 라이트 모드와 다크 모드 모두에서 텍스트는 4.5:1 이상, UI는 3:1 이상이며, 색상이 유일한 신호가 아닙니다.
• 로딩, 빈 상태, 오류 상태가 디자인되었고, 로딩은 지속 시간에 맞는 올바른 인디케이터를 사용합니다.
• 디자인이 320 너비에서 가로 스크롤 없이, 그리고 가로 모드에서도 작동합니다.

7. 프레젠테이션

아티팩트 링크를 공유하세요. 몇 줄로 섹션 맵(각 섹션의 작업 및 강조), 주요 결정 및 각각의 배경 원리(출처 키 인용), 수락한 자체 점검 항목과 그 이유, 제안된 테마 추가 사항(theme 스킬용), 그리고 미해결 질문을 명시하세요.