바이브 코딩으로 하루만에 iOS 앱 만들기

테토, 에겐 테스트 iOS 앱 만들기! 기획부터 배포까지 개발자 회고록

1. 새벽 4시에 떠오른 아이디어

6월 26일 새벽 4시, 갑자기 잠에서 깨서 유튜브를 보고 있다가 테토녀, 에겐녀가 있는 썸네일을 발견했는데,
이걸로 간단한 테스트 앱을 만들고 광고를 붙여서 수익화가 가능한지 확인해보고자 4시부터 기획을 먼저 시작했다.

---

2. 기획 & 준비 과정

• 타깃: 20~30대 남녀, 심플하고 감각적인 디자인을 좋아하는 사람들
• 주요 기능
  • 성별 선택 → 질문 진행 → 광고 확인 → 결과 제공
  • 답변에 따라 점수 집계해서 결과 유형 도출
  • 결과에 맞는 이미지/설명 보여주기
  • 광고(AdMob) 연동
• 기술 스택:
  • iOS (UIKit)
  • Google AdMob
  • GitHub
• 디자인:
  • 앱에 사용될 캐릭터들 디자인은 전부 OpenAI의 Sora를 이용했다.
  • 이미지들은 접근성을 높이기 위해 귀여운 느낌의 3D 애니메이션으로 제작하는 것이 좋겠다고 생각했다.
• 성별 선택 이미지

• 테토남, 에겐남 이미지

• 테토녀, 에겐녀 이미지

3. 개발 과정

커서AI를 활용하여 기본 틀, 로직 구성

챗지피티로 기획한 내용을 커서 ai에게 입력한 후 그 내용을 토대로 커서AI가 성별 선택, 질문화면과 선택지, 결과 화면을 만들어 주었다.

• 일단 기본적인 화면 전환 로직은 구성이 되었으니 이제 디테일한 UI작업을 이어나갔다.

3-1. UI/UX 설계

• 성별 선택 화면
  첫 화면에서 남/여 이미지를 한눈에 고를 수 있게 디자인했고
  이미지뷰에 그림자랑 둥근 모서리, 터치 애니메이션도 추가했다.

• 질문 진행 화면
  질문마다 프로그레스바(진행률), 답변 버튼, 질문 텍스트를 배치하고
  프로그레스바에 퍼센트도 같이 보여주면서 사용자가 남은 질문 수를 쉽게 알 수 있도록 설계했다.

  

• 결과 화면
  결과 유형에 따라 대표 이미지, 결과 설명을 다르게 나타나도록 했으며 결과마다 다른 색상/이미지/설명으로 차별화를 시도했다.

  

</p>

3-2. 데이터 구조 & 로직

• 질문/답변/점수 집계 구조를 고민하면서 설계했다.
• 성별, 답변에 따라 점수를 누적해서 결과 유형을 도출하는 방식으로 구현하고 결과 유형별로 이미지랑 설명을 매핑해줬다.

3-3. 광고(AdMob) 연동

• 전면 광고(Interstitial Ad)
  마지막 질문에 답하면 전면 광고가 뜨고, 광고를 확인한 후 결과 화면으로 넘어가게 만들었다.(결과를 궁금해하는 사용자의 심리를 이용하여 광고 시청 유도)

• 테스트/실제 광고 ID 분기
  Debug/Release 빌드 타입에 따라 테스트용/실제 광고 ID를 자동으로 분기하도록 처리하였다. 이렇게 하면 심사시에는 테스트용 광고가 나오고 배포되면 실제 광고가 나오게 된다.

3-4. Info.plist & 빌드 설정

• GADApplicationIdentifier(앱 ID)는 Info.plist에 등록!
• User-Defined Setting으로 Debug/Release별 앱 ID를 관리했다.

3-5. app-ads.txt & 앱 인증

• GitHub Pages로 무료 호스팅해서 공식 웹사이트로 등록!
• 앱 인증도 마치고 광고가 정상적으로 노출되는 걸 확인했다.

---

4. 트러블 슈팅 & 시행착오

• 광고가 안 나올 때
  • 앱 ID/광고 단위 ID를 헷갈려서 광고가 안 뜨는 경우가 있었는데 앱ID는 프로젝트파일 -> Build Settings -> User-Defined에서 새로운 property를 생성하여 Debug/Release를 따로 넣어줬다. 광고 단위 ID는 #if DEBUG를 활용하여 분기적용하였다.
  • 앱스토어에 앱을 등록 안 하면 광고가 안 나오는 것도 경험해보았다.

---

6. 느낀 점

• 느낀 점
  바이브 코딩을 활용하여 앱을 기획, 디자인, 개발, 배포까지 해본건 이번이 처음이었는데 훨씬 빠르게 MVP를 개발할 수 있는 부분은 큰 장점이었지만, 이후에 나타나는 문제들을 해결하기 위해서는 결국에는 코드베이스의 구조와 설계방식을 파악을 해야 하고 그 능력의 중요성을 깨닫게 되었다. 앞으로 개발뿐만 아니라 디자인 부분도 Figma MCP를 활용하여 AI로 디자인을 하며 서비스를 개발하는 방식을 공부해 갈 예정이다.

---

끝!