프런트엔드 & UI
apple-design
Apple의 유동적 인터페이스 원칙을 웹의 스프링과 제스처로 옮깁니다.
무엇인가
Apple WWDC 디자인 세션, 특히 Designing Fluid Interfaces에서 뽑아낸 지식을 CSS, Pointer Events, 스프링 라이브러리에 대응시킵니다. 반응성, 중단 가능성, 관성, 머티리얼, 타이포그래피, 접근성을 다룹니다.
Apple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible tran
디자인에 왜 중요한가
- 피드백이 pointer-down에서 발생하므로 눌린 요소가 죽은 느낌을 주지 않습니다.
- 애니메이션이 화면에 살아 있는 현재 값에서 출발해, 중단 시 눈에 띄는 점프가 사라집니다.
- 튕기는 동작이 도착 지점을 예측하므로, 던진 결과가 제스처가 겨눈 곳에 안착합니다.
다루는 내용
- Response
- Direct manipulation
- Interruptibility
- Momentum projection
- Materials and depth
- Reduced motion and accessibility
설치 방법
apple-design
-
저장소를 클론하세요.
git clone https://github.com/emilkowalski/skills -
Codex에 스킬 파일 경로를 지정하세요.
skills/apple-design/SKILL.md -
그다음 원하는 UI를 설명하세요. Codex가 스킬을 따릅니다.
Codex로 실행하는 법
-
Codex에 시트, 드로어, 드래그 인터랙션을 만들어 달라고 하세요.
-
포인터 캡처로 1:1 추적하며 속도 이력을 기록합니다.
-
손을 떼면 기본 제공되는 감쇠 값으로 속도를 스프링에 넘깁니다.
여기 모인 플러그인은 모두 무료 오픈소스이며, 실제 업스트림 출처로 연결됩니다.
codex-design 목록에서 더 보기 ↗다른 Codex 디자인 플러그인
프런트엔드 & UI 무엇을 하나 gpt-taste GSAP 스크롤 모션과 빈틈없는 벤토 그리드로 수상작급 랜딩 페이지를 만듭니다. 
디자인 시스템 무엇을 하나 Stitch Design Taste Google Stitch가 흔해 빠진 화면 대신 개성 있는 화면을 내놓도록 DESIGN.md를 작성합니다. 
프런트엔드 & UI 무엇을 하나 image-to-code 디자인 이미지를 먼저 생성하고 분석한 뒤, 그에 맞는 프런트엔드 코드를 만듭니다. 
프런트엔드 & UI 무엇을 하나 imagegen-frontend-mobile 프리미엄 모바일 앱 화면 플로우를 코드가 아니라 이미지로 생성합니다. 다음 단계
세팅 없이, Open Design으로 디자인하기
이 플러그인을 직접 설치해도 되고, Open Design으로 Codex 주위에 잘 정돈된 디자인 레이어를 통째로 두를 수도 있습니다. 키는 직접 가져오고, 산출물도 직접 소유하세요.