사용 가이드로 건너뛰기
ios-design-review작성자 Garry Tan

iOS Design Review 스킬.

모바일 앱 디자인을 위한 Claude Code 및 Codex skill: 실제 하드웨어에서 iOS 앱의 시각 디자인 감사.

  • 모바일 앱
  • 리뷰 리포트
garrytan/gstack · ios-design-review/SKILL.mdSKILL.md
--- name: ios-design-review description: Visual design audit for iOS apps on real hardware. (gstack) --- ## When to invoke this skill ## Confusion Protocol ## Claimed Limitations Need Evidence ## Continuous Checkpoint Mode ## Context Health (soft directive) ## Question Tuning (skip entirely if QUESTION_TUNING: false)
업스트림 파일에서 읽은 앞부분 및 섹션 제목, 2026-09-14 · 전체 33,841자

01 기능

Claude Code와 Codex에서 ios-design-review 스킬이 하는 일

요약, 워크플로, 산출물을 모두 해당 스킬의 SKILL.md에서 그대로 읽어 정리한 내용입니다.

SKILL.md에서2026-09-14 읽음 · 실행 기록 아님

스킬 자체의 표현으로

gstack-ios-qa-daemon을 통해 실제 iPhone에 연결하고, 모든 화면을 스크린샷으로 캡처한 다음 Apple HIG, DESIGN.md 및 모범 사례에 따라 시각적 디자인을 평가합니다. 타이포그래피 위계, 여백 리듬, 색상 위계, 터치 타겟, 로딩/빈/오류 상태, 접근성, 애니메이션 규율, iOS 관용구 정합성, 정보 밀도, AI 슬롭 체크 등 10가지 차원을 0-10점으로 채점하며, '무엇이 이것을 10점으로 만들 것인가'라는 프레이밍을 사용합니다.

/plan-design-review 채점 기준을 iOS 관용구에 맞게 포팅한 것입니다. 스크린샷, 화면별 점수, 최대 효과 개선 제안이 포함된 마크다운 보고서를 생성합니다. 계획 단계 디자인 리뷰(구현 전)에는 /plan-design-review를 대신 사용하세요. 실시간 웹 시각적 감사에는 /design-review를 사용하세요.

산출물

  • 스크린샷이 인라인으로 포함된 마크다운 보고서, 화면별 점수(각 차원마다 0-10), 차원별 최대 효과 개선 제안
예시 프롬프트 보기 ↗

작동 방식

  1. 01
    실행 중인 데몬에 연결

    실행 중인 gstack-ios-qa-daemon을 사용합니다. 실행 중인 데몬이 없으면 /ios-qa(0-2단계)와 동일한 흐름으로 하나를 생성합니다.

  2. 02
    화면 캡처

    주요 화면마다(사용자가 제공한 화면 목록에서 가져오거나 접근성 트리를 통해 자동 발견) GET /screenshot과 GET /elements를 통해 스크린샷과 요소를 가져옵니다.

  3. 03
    10차원 루브릭 적용

    타이포그래피 위계, 여백 리듬, 색상 위계, 터치 타겟, 로딩/빈/오류 상태, 접근성, 애니메이션 규율, iOS 관용구 정합성, 정보 밀도, AI 슬롭 체크를 0-10점으로 채점하고, 각 항목을 10점으로 끌어올릴 방법을 설명합니다.

  4. 04
    낮은 점수 표시

    7점 미만인 모든 점수에 대해 AskUserQuestion을 사용하여 이슈를 권장 수정안 및 트레이드오프와 함께 제시하고, 사용자가 해결 여부를 결정할 수 있게 합니다.

  5. 05
    보고서 작성

    스크린샷이 인라인으로 포함된 마크다운 보고서, 화면별 점수, 차원별 최대 효과 개선 제안을 생성하여 ~/.gstack/projects/<slug>/ios-design-review-<date>.md에 기록합니다.

02 적합성 확인

ios-design-review 스킬을 사용하는 경우

이러한 종류의 모바일 앱 디자인 작업에는 Claude Code 또는 Codex에서 ios-design-review skill을 사용하십시오. 적합성과 제한 사항은 skill 자체 파일에서 가져온 것입니다.

적합한 경우

  • 출시 전 실제 하드웨어에서 iOS 앱의 시각적 QA 수행
  • 접근성 준수 확인(VoiceOver 레이블, Dynamic Type, Reduce Motion)

한계 인지하기

  • 구현 전 계획 단계 디자인 리뷰(/plan-design-review 사용)
  • 실시간 웹 비주얼 감사(/design-review 사용)

03 스킬 내부

ios-design-review 스킬이 Claude Code와 Codex에 부여하는 규칙

SKILL.md가 에이전트에게 설정하는 8가지 구체적인 지시, 기본값, 제한 — 결과를 바꾸는 파일의 부분입니다.

  1. 기본값은 읽기 전용

    관찰(observe) 권한으로 세션을 획득하며, iOS 기기에 변경을 가하는 호출은 수행하지 않습니다.

  2. 타이포그래피는 SF Pro와 Dynamic Type을 사용해야 함

    타이포그래피 계층 구조는 Apple HIG에 맞는 SF Pro와 올바른 dynamic-type 스케일로 display, body, caption 크기의 일관성을 평가합니다. 어디에도 12pt 본문 텍스트가 있어서는 안 됩니다.

  3. 간격은 4pt 또는 8pt 그리드를 따라야 함

    간격 리듬 항목은 4pt 또는 8pt 그리드를 일관되게 사용하고, 17/23/31pt 같은 임의의 패딩이 없으며, 세이프 에어리어 인셋을 존중할 것을 요구합니다.

  4. 터치 타깃은 최소 44x44pt

    모든 상호작용 요소는 최소 44x44pt여야 합니다. 24pt보다 작은 탭 가능한 텍스트는 허용되지 않습니다.

  5. 명암비는 WCAG AA를 충족해야 함

    색상 계층 항목은 본문 텍스트(4.5:1)와 큰 텍스트(3:1)에 대해 WCAG AA를 충족하는 명암비를 요구하며, 다크 모드가 올바르게 렌더링되어야 합니다.

  6. 동시 애니메이션은 2개로 제한

    애니메이션 절제 항목은 동시 애니메이션을 최대 2개로 제한하고, UI 피드백은 200-300ms 지속 시간을, 스프링 감쇠는 진지한 흐름에 어울리지 않는 통통 튀는 느낌이 아니어야 함을 요구합니다.

  7. 네이티브 iOS 컴포넌트 사용

    iOS 관용구 정합성 항목은 적절한 경우 네이티브 컴포넌트(NavigationStack, List, Form, 시스템 시트)를 사용할 것을 요구하며, 재발명된 내비게이션이나 폰에서의 웹 스타일 햄버거 메뉴는 허용되지 않습니다.

  8. AI-slop 패턴 표시

    AI-slop 검사 항목은 일반적인 스톡 레이아웃, 남아 있는 lorem ipsum 데이터, Android에서 그대로 가져온 카고컬트 Material Design, AI가 생성한 그래디언트를 잡아냅니다.

04 활용하기

Claude Code 또는 Codex에 ios-design-review 설치하기

npx skills add 명령 한 번 실행 후, 에이전트에서 첫 번째 작업을 수행하고 결과 체크리스트를 확인합니다.

Claude Code, Codex 또는 사용 중인 에이전트에 ios-design-review 추가하기

프로젝트에서 실행합니다. 설치 프로그램이 어떤 에이전트에 추가할지 묻습니다.

Terminal
npx skills add https://github.com/garrytan/gstack --skill ios-design-review

ios-design-review/SKILL.md에 대한 일반적인 skills CLI 형식이며, 저장소가 자체 경로를 별도로 문서화할 수 있습니다.

스킬에 첫 모바일 앱 디자인 작업 부여

스킬 자체의 용어로 작성되었습니다. 대괄호 부분은 각자의 자료로 교체합니다.

Starter prompt
Review the iOS design of [MyApp] running on the connected iPhone. Focus on the onboarding flow, home screen, and settings. Check for typography hierarchy issues, spacing rhythm inconsistencies, and accessibility compliance. Write the report to the project folder.

출처: 스킬 자체의 용어로 SKILL.md에서 작성했습니다.

첫 번째 결과 확인

SKILL.md 자체가 올바른 결과의 모습으로 제시하는 내용:

  • 세션이 관찰(observe) 권한으로 획득되었고 변경 호출이 없었는지 확인

OpenDesign에서 SKILL.md 링크를 통해 ios-design-review를 가져옵니다: Plugins → Add → Skill → Import from link, 이후 상단 바에서 선택합니다.

05 오픈 소스, 추적 가능

출처, 라이선스 및 검증

이 페이지의 사실이 어디에서 왔으며 언제 마지막으로 확인되었는지 안내합니다.

Author
Garry Tan
Repository
github.com/garrytan/gstack 브랜치 main
스킬 파일
ios-design-review/SKILL.md 검증 시 콘텐츠 체크섬 기록됨; 커밋 71f6048
License
MIT LICENSE에서 확인.
리포지토리 스타
132,921 카탈로그에 7개 스킬을 포함하는 전체 garrytan/gstack 저장소에 대해 2026-09-14에 촬영한 GitHub 스냅샷입니다. ios-design-review의 평가나 사용 횟수가 아닙니다.
OpenDesign에서 검증됨
2026-09-14 소스 파일, 경로, 라이선스 텍스트 및 스타 수가 확인되었습니다. OpenDesign 메인에 번들로 포함되지 않음(2026-08-28 확인); 이 페이지에 실제 실행 기록이 없습니다.

SKILL.md 내부

  1. 이 스킬을 사용해야 할 때StateServer를 통해 실제 하드웨어에서 iOS 앱을 시각적으로 감사하며, 10개 항목을 0-10점으로 평가합니다
  2. 연결실행 중인 gstack-ios-qa-daemon을 사용하며, 필요한 경우 /ios-qa 플로우를 통해 생성하고 기본적으로 읽기 전용입니다
  3. 차원 및 점수타이포그래피, 여백, 색상, 터치 타깃, 상태, 접근성, 애니메이션, iOS 관용구, 밀도, AI-slop을 다루는 10개 차원 루브릭
  4. 루프세션을 확보하고, 각 화면을 스크린샷으로 캡처하고, 루브릭을 적용하고, 결과를 기록한 후 마크다운 보고서를 생성합니다
  5. 산출물스크린샷이 인라인으로 포함된 마크다운 보고서, 화면별 점수, 가장 효과적인 개선 제안
  6. 실패 유형403 capability_insufficient, 빈 스크린샷, 누락된 화면을 처리합니다
스킬 자체 설명
"실제 하드웨어에서 iOS 앱의 시각적 디자인 감사. (gstack)"

SKILL.md의 프런트 매터 설명입니다. 전체 파일은 약 33,841자입니다. GitHub에서 전체 파일 읽기.

06 설치하기 전에

ios-design-review 스킬에 대한 질문

이 답변은 2026-09-14 기준으로 확인한 SKILL.md 내용을 근거로 하며, 실행 기록을 바탕으로 한 것이 아닙니다.

이 스킬과 /plan-design-review의 차이는 무엇입니까?

이 스킬은 실제 iOS 기기에서 실행되며, 출시되었거나 개발 중인 앱을 Apple HIG 및 iOS 관용구에 따라 평가합니다. /plan-design-review는 구현 전 디자인 스펙을 평가합니다. 이 스킬은 동일한 채점 루브릭을 iOS에 맞게 이식한 것입니다.

iOS Design Review

실제 모바일 앱 디자인 작업에서 ios-design-review 실행하기

OpenDesign을 다운로드하고 SKILL.md 링크에서 ios-design-review를 가져온 후, 위 프롬프트를 붙여넣고 결과 전에 계획을 읽으십시오.

터미널
npx skills add https://github.com/garrytan/gstack --skill ios-design-review

OpenDesign 데스크톱

하나의 디자인 시스템으로 모든 결과물에 브랜드 일관성을

완전한 Vibe Design Workspace에서 하나의 브랜드 규칙을 웹사이트, 슬라이드, 인터랙티브 프로토타입, 대시보드, 이미지, HTML 영상에 적용하세요. 로컬 Codex, Claude Code, Cursor 등을 연결해 무료로 제작할 수 있습니다.

  • 웹, 슬라이드, 프로토타입, 대시보드, 이미지, 영상
  • 140개+ 디자인 시스템과 전체 템플릿·스킬 라이브러리
  • 로컬 Codex 및 21개+ 코딩 에이전트 연결 · 무료
무료 다운로드

macOS, Windows 지원