Solana와 AI로 Kungu를 구축하는 모험
I’m happy to help translate the article for you! Could you please paste the text you’d like translated (excluding any code blocks or URLs) here? Once I have the content, I’ll provide the Korean translation while keeping the source line and formatting intact.
소개
안녕하세요, 커뮤니티 여러분! 오늘은 Solana 기반의 스페인어 커뮤니티 디렉터리 앱인 Kungu를 만드는 전체 사례 연구를 가져왔습니다. 이것은 순차적인 튜토리얼이 아니라, 실제 개발 과정을 기록한 연대기로, AI 프롬프트, 디자인 전환, 예기치 않은 오류 해결 등으로 가득합니다. 목표는 템플릿에서 시작해 고유한 시각적 아이덴티티를 가진 애플리케이션을 만들 수 있음을 보여주는 것이며, 개발 조수로서 AI를 활용하는 방법을 보여주는 것입니다.
도구
- Base: Beeman의 Solana Mobile Monorepo, bun으로 설치됨.
- UI 생성: Magic Patterns를 사용한 초기 프로토타이핑.
- 코드 어시스턴트: Codex(또는 유사 어시스턴트) 를 에디터(WebStorm)에 통합.
- Styling: 현대적이고 구체적인 설정: Uniwind(React Native에서 Tailwind 클래스를 사용하기 위해),
tailwind-variants및heroui-native. - 네비게이션: 파일 구조 기반 네비게이션을 제공하는 Expo Router.
- 애니메이션:
react-native-reanimated.
단계 1: 템플릿 복제
bun x create-seed@latest -t gh:beeman/solana-mobile-monorepo단계 2: 편집기에서 프로젝트 열기
생성된 폴더를 좋아하는 편집기(예: WebStorm)에서 엽니다. 이렇게 하면 AI가 프로젝트 구조, package.json 및 기존 코드를 액세스할 수 있습니다.
“Rolodex” 컴포넌트에 대한 프롬프트
Act as a React Native expert. I want to implement a 'Rolodex' style community directory in this specific project.
Project Context:
Location: apps/native
Routing: Expo Router (file-based)
Target File: apps/native/app/(drawer)/(tabs)/index.tsx
Tasks:
Create a Component: Create a new file apps/native/components/CommunityRolodex.tsx.
Component Logic: Define a COMMUNITIES array (name, logoUrl, link). Use a FlatList with a stacked card visual. Ensure it only renders for authenticated users.
Styling: Use the project's existing styling solution (uniwind).
Interaction: Use Linking.openURL for the external links.프롬프트를 실행해 보니 프로젝트가 Uniwind를 사용하고 있었고 NativeWind가 아니라는 것을 알게 되었습니다. 따라서 스타일에만 초점을 맞춘 새로운 프롬프트가 필요했으며, AI에게 className과 heroui-native 컴포넌트를 사용하도록 지시했습니다.
Neo‑Brutalism 스타일 변경
Rolodex 효과가 모바일에서 빡빡하게 느껴졌습니다. 강제로 적용하기보다는 Neo‑Brutalista 스타일을 채택했습니다: 고대비 색상, 굵은 테두리와 강한 그림자, 강렬한 타이포그래피. 이는 UI 전체를 이 새로운 시각적 방향으로 통합하고, 템플릿의 초기 look & feel을 버리는 것을 의미했습니다.
탐색 및 홈 화면 재디자인
- Drawer에서 Tab Bar로: 사이드 메뉴(Drawer)를 하단 네비게이션 바(Bottom Tab Bar)로 교체했으며, 이는 모바일 UX에서 금표준입니다.
- Home을 Wallet으로: Jupiter(jup.ag) 인터페이스 배치를 참고하여 홈 화면을 재설계했으며, 자산의 활용성과 시각화에 중점을 두고 Neo‑Brutalism 미학을 유지했습니다.
- 아이콘 및 폰트 조정: 특정 프롬프트를 통해 AI가 크기를 줄이고 요소들을 새로운 컴팩트하고 미니멀한 디자인에 맞게 정렬했습니다.
일반적인 오류와 해결책
Gradle 컴파일 오류
컴파일할 때 .../android/app/build/intermediates/... 폴더에서 오류가 발생했습니다. 이는 React Native 코드와 관련된 것이 아니라 Gradle 캐시와 관련된 문제였습니다.
cd android && ./gradlew clean && cd ..테마 변경 시 TypeScript 타입 오류
bun run check-types 실행 시 TypeScript가 systemColorScheme이 항상 'light' 또는 'dark'인지 보장할 수 없다는 오류가 발생했습니다.
// TypeScript가 불평하지 않도록 안전하게 매핑
const themeToSet = (systemColorScheme === 'light' || systemColorScheme === 'dark')
? systemColorScheme
: 'dark'; // 값이 예상치 못한 경우 기본값을 'dark'로 설정결론
Kungu는 단순한 “Rolodex 카드” 아이디어에서 강력한 시각 아이덴티티와 전문적인 구조를 갖춘 Web3 애플리케이션으로 진화했습니다. 가장 중요한 교훈은 피벗을 두려워하지 않는 것이었습니다: 초기 디자인은 성공하지 못했지만, 훨씬 더 흥미롭고 독특한 솔루션으로 이어졌습니다. AI를 코파일럿으로 사용함으로써 반복적인 코드 생성을 외주화하고 UX 및 디자인에 대한 전략적 결정을 집중할 수 있었습니다.
이 상세한 연대기가 여러분의 프로젝트에 영감을 주길 바랍니다! 여러분도 앱에서 네오‑브루탈리즘을 시도해 볼까요? 🚀