mobile-ios-design작성자 Seth Hobson

Mobile iOS Design 스킬.

모바일 앱 디자인을 위한 Claude Code 및 Codex skill: SwiftUI를 사용하여 Apple Human Interface Guidelines를 따르는 네이티브 iOS UI입니다.

모바일 앱
UI 코드

wshobson/agents · plugins/ui-design/skills/mobile-ios-design/SKILL.mdSKILL.md

--- name: mobile-ios-design description: Master iOS Human Interface Guidelines and SwiftUI patterns for building native iOS apps. Use when designing iOS interfaces, implementing SwiftUI views, or ensuring apps follow Apple's design principles. --- ## When to Use This Skill ## Core Concepts ## Quick Start Component ## Best Practices

업스트림 파일에서 읽은 전문 및 섹션 제목 2026-09-14 · 전체 6,921자

01 기능

mobile-ios-design 스킬이 Claude Code와 Codex에서 수행하는 작업

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

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

스킬 자체의 표현으로

이 스킬은 Apple의 디자인 원칙을 따르는 네이티브 iOS 애플리케이션을 만들기 위한 iOS Human Interface Guidelines와 SwiftUI 패턴을 알려줍니다. 명료성, 존중, 깊이라는 HIG의 핵심 원칙, SwiftUI의 스택 기반 및 그리드 레이아웃 시스템, NavigationStack과 TabView를 포함한 내비게이션 패턴, SF Symbols와 Dynamic Type을 통한 시스템 통합, 시맨틱 컬러와 머티리얼을 활용한 시각적 디자인을 다룹니다.

이 스킬은 iOS, iPadOS, visionOS 플랫폼 고려 사항을 다루며, 터치 중심 인터페이스, 다양한 화면 크기를 위한 적응형 레이아웃, 접근성, 시맨틱 스타일링을 통한 라이트/다크 모드 자동 지원에 초점을 맞춥니다.

산출물

스택 기반 레이아웃, 내비게이션 패턴, 시스템 통합을 포함한 SwiftUI 뷰 코드

예시 프롬프트 보기 ↗

작동 방식

01
HIG 원칙 적용
명료성(읽기 쉬운 콘텐츠, 정확한 아이콘), 순응성(UI가 콘텐츠와 경쟁하지 않고 사용자가 콘텐츠를 이해하도록 돕는 것), 깊이감(시각적 레이어로 계층 구조를 전달하는 것)을 따르는 인터페이스를 구성합니다.
02
Stack과 Grid Layout으로 구성
VStack과 HStack에 정렬 및 spacing 파라미터를 사용하거나, adaptive 또는 flexible GridItem 열을 가진 LazyVGrid를 사용하여 뷰를 구성합니다.
03
내비게이션 패턴 구현
계층적 내비게이션에는 navigationDestination과 함께 NavigationStack을 사용하고, 앱의 최상위 섹션에는 Tab과 함께 TabView를 사용합니다.
04
시스템 리소스 통합
렌더링 모드와 효과를 적용한 SF Symbols를 사용하고, 고정 크기 대신 Dynamic Type을 따르는 시스템 폰트를 사용합니다.
05
시맨틱 스타일링 적용
.primary, .secondary처럼 라이트 모드와 다크 모드에 자동으로 맞춰지는 시맨틱 색상을 사용하고, 블러 효과에는 시스템 머티리얼을 사용합니다.

02 적합성 확인

mobile-ios-design Skill을 사용하는 경우

이런 종류의 모바일 앱 디자인 작업일 때 Claude Code 또는 Codex에서 mobile-ios-design 스킬을 사용합니다. 적합성과 한계는 스킬 자체 파일에서 가져왔습니다.

적합한 경우

Apple HIG를 따르는 iOS 앱 인터페이스 디자인
SwiftUI 뷰 및 레이아웃 제작
iOS 내비게이션 패턴 구현(NavigationStack, TabView, sheets)
iPhone 및 iPad용 적응형 레이아웃 생성
접근성 있는 iOS 인터페이스 구축

한계 인지하기

라이트 모드와 다크 모드에 맞춰지지 않는 하드코딩된 색상 사용
메모리 누수를 일으키는 강한 참조 순환을 가진 클로저 생성

03 스킬 내부

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

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

항상 시맨틱 색상 사용
라이트 모드와 다크 모드를 자동으로 지원하도록 하드코딩된 색상 대신 .primary, .secondary, .background를 사용합니다.
Dynamic Type에는 시맨틱 폰트 사용
고정 크기 대신 .body, .headline과 같은 시맨틱 폰트를 적용하여 사용자 설정에 따라 텍스트 크기가 조정되도록 합니다.
안전 영역(Safe Area) 준수
콘텐츠가 가려지는 것을 방지하기 위해 safeAreaInset을 사용하고 화면 가장자리에 하드코딩된 패딩을 사용하지 않습니다.
긴 목록에는 LazyVStack 사용
스크롤 목록에서 성능 문제를 방지하기 위해 일반 stack 대신 LazyVStack 또는 LazyHStack을 사용합니다.

04 활용하기

Claude Code 또는 Codex에 mobile-ios-design 설치

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

Claude Code, Codex 또는 사용자 에이전트에 mobile-ios-design 추가

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

Terminal

npx skills add https://github.com/wshobson/agents --skill mobile-ios-design

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

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

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

Starter prompt

Build a feature list screen for an iOS app using NavigationStack. Each feature should be displayed in a card with an SF Symbol icon, title, and description. The cards should use semantic colors for automatic dark mode support and include proper accessibility labels. Add a detail view that shows when tapping a feature card, and ensure the layout adapts properly for both iPhone and iPad in split view mode.

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

첫 번째 결과 확인

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

전체 햅틱 및 성능 경험을 확인하려면 실제 기기에서 테스트하세요

OpenDesign에서 mobile-ios-design을 SKILL.md 링크에서 가져옵니다: Plugins → Add → Skill → Import from link, 그런 다음 상단 바에서 선택합니다.

OpenDesign 다운로드 빠른 시작 가이드 읽기

05 오픈 소스, 추적 가능

출처, 라이선스 및 검증

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

Author: Seth Hobson
Repository: github.com/wshobson/agents Branch main
스킬 파일: plugins/ui-design/skills/mobile-ios-design/SKILL.md 검증 시 콘텐츠 체크섬 기록됨; 커밋 4236bb9
License: MIT LICENSE에서.
리포지토리 스타: 39,635 이 카탈로그의 18개 스킬을 포함하는 전체 wshobson/agents 저장소에 대해 2026-09-14에 촬영된 GitHub 스냅샷입니다. mobile-ios-design의 평점 또는 사용 횟수가 아닙니다.
OpenDesign에서 검증됨: 2026-09-14 소스 파일, 경로, 라이선스 텍스트 및 스타 수가 확인되었습니다. OpenDesign 메인에 번들로 포함되지 않음(2026-08-28 확인); 이 페이지에 실제 실행 기록이 없습니다.

SKILL.md 내부

이 스킬을 사용해야 하는 경우iOS 인터페이스 디자인, SwiftUI 뷰, 내비게이션 패턴, 적응형 레이아웃, 접근성 등의 시나리오를 나열합니다
핵심 개념HIG 원칙, SwiftUI 레이아웃 시스템, 내비게이션 패턴, 시스템 통합, 비주얼 디자인을 다룹니다
Human Interface Guidelines 원칙iOS, iPadOS, visionOS에 대한 플랫폼 고려사항과 함께 명료성, 순응, 깊이 원칙을 정의합니다
SwiftUI 레이아웃 시스템VStack과 HStack을 사용한 스택 기반 레이아웃, LazyVGrid를 사용한 그리드 레이아웃을 보여줍니다
내비게이션 패턴iOS 16 및 18을 위한 navigationDestination을 사용한 NavigationStack과 Tab을 사용한 TabView를 보여줍니다
시스템 통합렌더링 모드와 효과가 적용된 SF Symbols, 의미론적 폰트를 사용한 Dynamic Type을 설명합니다
비주얼 디자인의미론적 색상, 블러 효과를 위한 시스템 머티리얼, 깊이감을 위한 그림자를 다룹니다
빠른 시작 컴포넌트아이콘, 제목, 설명, 스타일링이 포함된 완전한 FeatureCard 뷰 예제를 제공합니다
모범 사례의미론적 색상, SF Symbols, Dynamic Type, 접근성, 안전 영역, 테스트 등 여덟 가지 규칙을 나열합니다
일반적인 문제레이아웃 깨짐, 성능, 내비게이션, 다크 모드, 접근성, 메모리 누수 문제와 해결책을 식별합니다

스킬 자체 설명

"iOS Human Interface Guidelines와 SwiftUI 패턴을 완벽하게 숙지하여 네이티브 iOS 앱을 구축합니다. iOS 인터페이스 디자인, SwiftUI 뷰 구현 또는 Apple의 디자인 원칙 준수가 필요할 때 사용합니다."

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

06 설치하기 전에

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

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

iOS 16 이상에서는 어떤 내비게이션 패턴을 사용해야 합니까?

계층적 내비게이션에는 navigationDestination과 함께 NavigationStack을 사용합니다. NavigationStack은 path 파라미터를 받으며 navigationDestination(for:)를 사용해 다양한 값 유형에 대한 대상 뷰를 정의합니다. 최상위 내비게이션에는 iOS 18 이상에서 사용 가능한 Tab 문법과 함께 TabView를 사용합니다.

텍스트가 사용자의 접근성 설정에 맞춰 확대되도록 하려면 어떻게 해야 합니까?

고정 크기 대신 .body, .headline과 같은 의미론적 폰트를 사용합니다. 이러한 폰트는 Dynamic Type을 준수하며 사용자 설정에 따라 자동으로 확대됩니다. 커스텀 폰트의 경우 relativeTo 파라미터를 사용해 폰트를 의미론적 텍스트 스타일에 연결합니다.

Mobile iOS Design

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

OpenDesign를 다운로드하고, SKILL.md 링크에서 mobile-ios-design을 가져온 다음, 위 프롬프트를 붙여넣고 결과 전에 계획을 읽습니다.

OpenDesign 다운로드 모든 스킬 보기

터미널

npx skills add https://github.com/wshobson/agents --skill mobile-ios-design