요구 사항
프롬프트가 깔끔하게 적용되기 전에 프로젝트에 필요한 것, 그리고 아무것도 없을 때 스캐폴딩하는 방법.
프로젝트에 필요한 것
의도적으로 아주 적습니다. 각 디자인은 독립적입니다. 테마에서 값을 읽어오는 대신 자체적으로 색상, 여백, 서체를 담고 있어서, 미리 설치해야 할 디자인 시스템이 없습니다.
| 요구 사항 | 이유 |
|---|---|
| Expo SDK 52 이상 | 각 디자인이 테스트된 버전입니다. 더 오래된 SDK에서도 작동할 수 있지만 확인되지는 않았습니다. |
| TypeScript | 모든 디자인은 .tsx 형태로 제공됩니다. JavaScript 프로젝트에서는 타입을 직접 제거해야 합니다. |
| AI 코딩 에이전트 | Claude Code, Cursor, Windsurf, 또는 붙여넣은 프롬프트를 받아들이는 어떤 것이든. |
아직 프로젝트가 없다면
프롬프트가 대신 만들어 드리지만, 원하신다면 먼저 직접 만드셔도 됩니다:
npx create-expo-app@latest my-app --template blank-typescript
cd my-app
npx expo start프롬프트가 설치하는 것
각 디자인은 실제로 임포트하는 것만 선언하며, 프롬프트는 npm install 대신 npx expo install을 사용해 최신 버전이 아니라 여러분의 SDK에 맞는 버전이 설치되도록 합니다. 어떤 디자인이든 해당 페이지의 '제공 내용'에서 전체 목록을 볼 수 있습니다.
- 거의 모든 디자인이 모션에는 Reanimated를, 세이프 에어리어에는 safe-area-context를 사용합니다.
- 아이콘은 Phosphor에서, 이미지는 expo-image에서 가져옵니다.
- 폰트는 Expo Google Fonts 패키지에서 가져오며, 앱 루트에서 한 번만 로드됩니다.
Reanimated에는 설정 한 줄이 필요합니다
해당 Babel 플러그인은 babel.config.js의 plugins 배열 맨 마지막에 있어야 합니다. 붙여넣은 후 애니메이션이 전혀 움직이지 않는다면 거의 항상 이것이 원인입니다. 해결 방법은 문제 해결 항목에 있습니다.