개발 생초보의 바이브 코딩으로 앱 만들기 (2) : 코드를 짜보자.

⭐️26/01/14 앱이 출시 되었습니다!!
https://apps.apple.com/us/app/star-clear/id6757729574

Star Clear App - App Store

 
**완성된 코드는 아래 깃헙에서 확인할 수 있습니다.
https://github.com/kiteday/Star-Clear/tree/main/src/screens

Star-Clear/src/screens at main · kiteday/Star-Clear

 
1편은 다음 링크를 참조해주세요!
https://kiteday.tistory.com/87

개발 생초보의 바이브 코딩으로 앱 만들기 (1) : 아이디어부터 기획서까지

 

---

코딩 시작

 
 
Claude에 매력을 느끼지 못했다기보다 솔직히 말하자면 돈이 없는 KBS(개백수)인 나.. 돈을 안쓰고 해보고 싶었다. 
 
그래서 대안으로 선택했던 것이 바로 'Google AI Studio' 일명 제미나이 빌더이다. 옵션에 따라 추후에 돈을 지불해야할 수도 있지만 코드를 짜는 것만큼은 무료로 이용할 수 있다.
 
https://aistudio.google.com/apps

https://accounts.google.com/v3/signin/identifier?continue=https%3A%2F%2Faistudio.google.com%2Fapps&dsh=S423121720%3A1768193441622358&followup=https%3A%2F%2Faistudio.google.com%2Fapps&ifkv=AXbMIuBBRi3hbibN67S3DtZxjBmHEBYUl0QnuZDIf1cErnvvcPA8yfseARIwJgP3xId8V_XuNG8joA&passive=1209600&flowName=WebLiteSignIn&flowEntry=ServiceLogin

 

 
이렇게 앞서 Claude로 작성해서 구체화 한 아이디어들을 입력으로 주어 전체 코드를 작성하고 내 생각을 추가하며 코드 업데이트를 반복해 초기 코드를 완성했다.
 
특히 제미나이 빌더를 이용하면 바로 웹 상의 프로토타입을 확인할 수 있어 이런 UI로 작동하는구나를 로컬에서 돌리지 않고도 확인할 수 있었다.
이렇게 바로 완성~
이라고 하면 정말 좋지만, 이제 시작이다.
 
이전에 웹을 만들었을 때는 Github.io만으로 쉽게 배포할 수 있었으나, 모바일 앱은 그보단 더 많은 공을 들여야 한다.
 

위 버튼들의 기능을 이용해 제미나이 빌더로 만든 웹페이지를 쉽게 배포까지 완성할 수 있다.

 
앞으로 크게 세 가지 수정 방안이 필요했다.

1. 현재 코드는 프로토타입 수준일 뿐, 완성 코드까지 수정이 필요하다. (각 기능 수정, 로컬로 코드 이식 후 오류 수정 등)
2. 어느 플랫폼에 등록하느냐에 따라 추가 개발환경 세팅 및 코딩이 필요하다. (나의 경우엔 현재 아이폰을 사용하고 있어서 iOS - Apple Store에 먼저 등록하고자 했기 때문에 Xcode를 사용했다.)
3. 각 스토어에 등록하기 위한 Terms를 맞추기, 계정 등록이 필요하다. (앱을 실행했을 때 Track 허용하기 버튼 생성, Apple Store Connect 계정 등록 등)

 
이를 순서대로 완성해야 앱을 등록할 수 있다.
그래서 가장 먼저 로컬 환경에 코드를 옮기는 과정부터 시작했다.

 
나는 iOS 앱을 만들고자 했기 때문에 Xcode도 함께 설치해주었고 Vscode와 Xcode를 왔다 갔다 하며 환경설정 및 코드 수정을 해주었다.
에러와 기능 수정에서는 Gemini로 (무료판을 썼습니다.) 질의응답을 해가며 수정했다.
https://gemini.google.com/app
 
이렇게 코드를 직접 짜보고 느낀 점은 모든 코딩과 오류를 인공지능에 의존해서 완성할 순 없다. 는 것이었다.
 
제미나이는 내 오류를 나보다 잘 모르기 때문에 100% 맞는 해결방법을 제안해주지는 않는다. 그래도 이전에 고군분투하던 것보다 획기적으로 오류를 수정하는데 쓰는 시간이 줄었다. 내가 준 정보를 바탕으로 오류 원인 분석을 빠르게 해주었기 때문이다.

제미나이와의 핑퐁을 반복하며 에러를 수정했다. 제미나이가 하란대로 한다고 오류가 100% 잡히는 것은 아니다. 그래도 문제의 원인을 파악하긴 굿이다.

 
또한 개발환경을 빌드하고 실행하기 위한 명령어와 기초적인 리눅스 셀 스크립트는 알아야 이 프로젝트를 수월하게 할 수 있는 것 같다.
(아주 자주쓰는 명령어들은 하단에 정리해두었다.)
모든 개발 프로젝트가 그러하듯 수정에 수정에 수정을 거듭하여 완성한 코드는 깃허브에서 확인하시길!
출시 버전은 깃허브 버전과 약간 다른데 구글 AdMob 광고를 넣어서 그 부분만 수정했다!
 
구글 AdMob을 등록하기 위해선 https://admob.google.com/ 사이트에서 계정을 생성한 뒤(구글 계정으로 생성가능) 승인을 받으면 된다.
주의해야할 점은 테스트 모드와 실제 광고 모드의 키 값이 다르다는 것! 실제 광고 키값으로 계속 테스트를 하면 매크로로 인식해 광고가 막힐 수 있다고 한다. 개발 상에서는 꼭 테스트 모드로 확인하고 이후 실제 광고 + 휴대폰 기기로 테스트 할 때는 휴대폰을 등록해서 오류가 아님을 입증하면 된다.

 
갤럭시는 휴대폰 설정에서 이를 찾을 수 있는데 아이폰은 휴대폰 설정에서 기기 ID가 나오지 않는다. 
개발 환경에서 아이폰 기기 ID는 가장 쉬운 방법은 Xcode에서 실제 기기를 테스트 할 때 찍히는 log를 보면 된다.
이렇게 광고 설정도 마무리 되면 정말 출시만 남았다.
 
 
사실 다하고 나서 생각해보니 Android보다 iOS가 난이도가 더 높은 것 같다. iOS를 해야겠다는 큰 목적이나 이유는 없고 단지 내가 개발하는 환경? 맥북. 내 테스트 기기? 아이폰이라 그랬다. (삼성 공기계가 있었는데 썼었는데 박살나버려서 테스트 불가..)
"만약 내가 코딩 초심자다! 난 앱 첨만들어본다!", "안드로이드 환경 테스트할 여건이 된다!" 라고 하신다면 Andriod Studio로 개발해보시길 추천한다.
 
그 이유는 코딩 + 설정 난이도도 있고, 다음 단계인 계정 등록에도 있다. (Apple 앱스토어 업로드를 위한 계정 등록비는 1년에 129000원이고, 구글은 1회 약 3만원이다.)
 
자세한 계정 등록과 앱스토어 등록의 여정은 다음편에,,
 

---

자주쓰는 명령어들

📦 빌드 및 프로젝트 관리

• npm run build: React나 Vue 같은 프레임워크로 작성된 코드를 실제 웹 정적 파일로 변환할 때 사용합니다.
• npx cap copy: 웹 빌드 결과물(dist 또는 build 폴더)을 각 플랫폼(iOS/Android) 폴더로 복사합니다.
• npx cap sync: copy와 비슷하지만, 플러그인 설정까지 동기화해 주는 가장 자주 쓰는 명령어입니다.

📱 iOS 전용 명령어

• npx cap open ios: 현재 프로젝트를 Xcode에서 실행할 때 사용합니다.
• npx cap add ios: 프로젝트에 iOS 플랫폼 폴더를 처음 생성할 때 사용합니다.

🎨 자산(Assets) 관련 명령어

• npx @capacitor/assets generate --ios: 프로젝트 루트의 assets 폴더에 있는 icon.png 파일을 바탕으로 iOS에 필요한 모든 크기의 앱 아이콘을 자동으로 생성합니다.

🧹 초기화 및 삭제 (주의 필요)

• rm -rf ios: 생성된 iOS 폴더에 문제가 생겨 아예 삭제하고 새로 만들고 싶을 때 사용합니다. (-rf는 강제로 폴더를 지우는 옵션이므로 신중히 사용해야 합니다.)
• rm -rf node_modules: 설치된 패키지들이 꼬였을 때 전체를 삭제하고 npm install로 다시 설치하기 위해 사용합니다.

 

코드를 수정하고 Xcode에 업데이트 할 때 제일 많이 쓰는 명령어

 

• npm run build (웹 코드 빌드)
• npx cap sync ios (iOS 폴더로 동기화)
• npx cap open ios (Xcode 열기)

 

Capacitor 설정을 다시 하기 위해 더미 파일을 지우는 명령어

1. Xcode 빌드 캐시 및 파생 데이터 삭제
가장 먼저 수행해야 할 작업으로, Xcode가 생성한 임시 빌드 파일들을 지웁니다.

• rm -rf ~/Library/Developer/Xcode/DerivedData: Xcode의 모든 파생 데이터(캐시)를 강제로 삭제합니다.
• Xcode 메뉴 사용 시: Product > Clean Build Folder (단축키: Shift + Command + K)를 눌러 현재 프로젝트의 빌드 파일을 지울 수 있습니다.

2. Capacitor 플랫폼 폴더 초기화 (필요한 경우)
iOS 폴더 자체의 설정이 너무 꼬였다면 폴더를 지우고 다시 만드는 것이 확실합니다.

• rm -rf ios: 기존의 iOS 플랫폼 폴더를 통째로 삭제합니다.
• npx cap add ios: iOS 플랫폼 폴더를 새롭게 생성합니다.

3. 깨끗한 상태에서 동기화 진행 (Clean Sync)
캐시를 지운 후 코드를 다시 빌드하고 동기화하는 표준 절차입니다.

1. npm run build: 웹 소스 코드를 최신 상태로 빌드합니다.
2. npx cap sync ios: 웹 빌드 결과물을 iOS 폴더로 복사하고 플러그인을 동기화합니다.

클린 동기화 세트

1. 이전 빌드 결과물 삭제
rm -rf dist build 

2. 웹 코드 빌드
npm run build 

3. Capacitor 동기화 및 네이티브 설정 갱신
npx cap sync ios

4. (선택사항) Xcode 열기
npx cap open ios
 

추가 내용

npx cap  open ios로 열어야 하는게 기본이지만 나중에 AdMob을 붙이고 나서는 CocoPod 설정을 함께 고려해주어야 하기 때문에 ios/App으로 경로를 들어가서 open ./App.xcworkspace/ 명령어로 Xcode를 열어주었다.