iphone-duo-design은 iPhone Duo의 작은 바깥 화면과 큰 안쪽 화면에서 잘 작동하는 iOS 앱을 만들도록 돕는 에이전트 스킬과 도구 모음이다. 크기 클래스, 화면 크기에 맞춰 바뀌는 레이아웃, 측면으로 이동하는 바, 접히는 부분을 피하는 컨트롤 배치, 분할 보기와 게임 등을 다룬다.
프로젝트는 애플의 iPhone Duo 디자인 지침, iPhone Duo용 앱 준비 문서, Design for iPhone Duo Tech Talk 및 해당 문서가 연결하는 자료를 근거로 삼는다. 저장소의 references/sources.md는 출처와 각 주장에 대한 검증 여부를 정리한다. 이 프로젝트는 belweave의 독립 프로젝트이며 애플이 만들거나 보증하지 않는다.
저장소에는 에이전트가 작업에 맞는 도구와 문서를 찾도록 안내하는 SKILL.md, Swift 코드를 검사하는 scripts/duo-lint, SwiftUI와 UIKit 템플릿, 오프라인 화면 미리보기 도구가 포함돼 있다. 린터는 고정 폭 사용, UIScreen.main, 안전 영역을 무시하는 컨트롤 등 잠재적 문제를 파일과 줄 번호로 표시하고 수정 방법을 제안한다. 컴파일러가 아니라 줄 단위 휴리스틱이므로 각 결과를 확인해야 한다. 테스트는 다음 명령으로 실행한다.
python3 -m unittest discover -s tests
오프라인 미리보기 도구 tools/duo-preview.html은 별도 의존성 없이 최신 브라우저에서 열 수 있다. 화면 캡처를 넣거나 붙여넣고, 바깥·안쪽 화면 프레임과 세로·가로 방향, 반쯤 접힌 상태, 측면 컨트롤과 안전 영역 안내를 확인할 수 있다. 애플이 공개한 화면 캡처 비율을 사용하며, 이미지가 그 비율과 맞지 않으면 알린다. 애플이 여백이나 접히는 부분의 폭 같은 수치를 공개하지 않아 해당 입력란은 비어 있고, 값을 입력하면 로컬에 저장된다. 접히는 축의 방향은 애플이 문서에서 명시적으로 설명하지 않아 검증되지 않은 정보로 표시한다.
Claude Code, Cursor, OpenAI Codex에서 설치할 수 있으며 npx skills로도 추가할 수 있다. 예를 들어 Claude Code 플러그인 마켓플레이스 설치 명령은 다음과 같다.
claude plugin marketplace add Belweave/iphone-duo-design
claude plugin install iphone-duo-design@belweave
저장소를 Codex의 개인 스킬 경로에 복제하려면 다음 명령을 사용한다.
git clone https://github.com/Belweave/iphone-duo-design.git ~/.agents/skills/iphone-duo-design
npx skills를 사용할 때는 저장소 확인 당시 버전 1.7.2가 Node.js 20에서 시작되지 않았으므로 최신 Node.js 버전을 사용하라고 안내한다.
린터는 다음처럼 실행할 수 있다. 경고나 오류가 있으면 종료 코드가 1이며, --strict 옵션을 쓰면 정보 항목도 실패로 처리한다.
scripts/duo-lint path/to/YourApp
scripts/duo-lint path/to/YourApp --format json > duo-lint.json
scripts/duo-lint --list-rules
프로젝트는 MIT 라이선스로 배포된다.
댓글 (0)
로그인하면 이 기사에 내 생각을 남길 수 있어요