https://youtu.be/ADgIkx5NHJ8?si=XpKmaVu8SGpedSSn
이 블로그 게시물은 코딩 없이 모바일 앱을 만들고 출시하는 과정을 상세하게 설명합니다. 30분도 채 안 되는 시간에 모바일 앱을 구축하고 Apple 및 Android 스토어에 출시하는 방법을 다루며 [1], 이 모든 과정은 세 가지 AI 도구를 사용하여 이루어집니다 [1]. 이 비디오의 목적은 시청자가 처음부터 자신만의 모바일 앱을 만들 수 있도록 하는 것입니다 [1].
이 비디오에서 구축하는 앱은 **밸런타인데이를 위한 데이트 아이디어를 추천하는 앱**입니다 [1]. 이 앱은 사용자 위치, 예산, 그리고 데이트 시간(자녀가 있는 경우 외출 시간이 제한될 수 있기 때문에)을 기반으로 아이디어를 추천하도록 설계되었습니다 [1]. 이러한 문제는 많은 사람들이 겪는 흔한 문제이며, 해결할 가치가 있다고 판단되었습니다 [1].
앱 구축에 사용된 주요 도구는 다음과 같습니다:
* **Bolt (볼트): AI 기반 앱 빌더**
* **Bolt는 비기술 기업가를 위한 프롬프트 기반 AI 빌딩 플랫폼입니다** [1]. AI 코딩을 사용하여 단 한 줄의 코드도 작성하지 않고 소프트웨어와 웹사이트를 구축할 수 있습니다 [1]. 간단한 프롬프트를 통해 빌드되는 내용을 지속적으로 조정할 수 있습니다 [1].
* 최근 Bolt는 웹사이트 구축을 넘어 **네이티브 모바일 앱을 구축하고 iOS 및 Android 스토어에 출시할 수 있는 기능**을 발표했습니다 [1]. 이 기능이 이 비디오의 핵심입니다 [1].
* **앱 구축 과정 (Bolt 사용):**
1. **프롬프트 입력:** Bolt 웹사이트에서 "Expo로 모바일 앱 구축"을 선택한 후, "반복적인 데이트에 지친 기존 커플들을 위한 데이트 아이디어를 추천하는 모바일 앱을 만들어줘. 위치, 사용 가능한 시간, 예산을 기반으로 독창적인 데이트 아이디어를 추천해야 해"와 같은 프롬프트를 입력합니다 [1, 2].
2. **AI 코딩 과정:** 프롬프트를 입력하면 Bolt는 즉시 코드 작성, 앱 폴더 구조화, 구성 요소 포함, 의존성 다운로드 작업을 시작합니다 [2].
3. **미리보기:** 작업이 완료되면 앱의 미리보기가 표시됩니다 [2]. Bolt는 데이트 제안을 위해 실제 API에 연결하고 적절한 상태 관리를 구현해야 한다는 등의 추천 사항을 제공합니다 [2].
4. **실시간 시각화 (Expo Go 사용):** 앱의 실시간 시각화를 위해 Expo Go 앱을 다운로드하고 Bolt에서 제공하는 바코드를 스캔할 수 있습니다 [2]. 이렇게 하면 앱이 휴대폰에서 어떻게 보이는지 즉시 확인할 수 있습니다 [2].
5. **초기 기능 확인:** 앱은 세 가지 필드(위치, 날짜, 예산)를 입력하면 데이트 아이디어를 생성하도록 설계되었으며, "발견", "위시리스트", "프로필" 탭이 있습니다 [2]. 예를 들어, "로스앤젤레스, 2월 14일, $200"을 입력하면 "골든 게이트 공원에서 일몰 피크닉", "두 명을 위한 요리 수업"과 같은 아이디어가 생성됩니다 [2].
6. **위시리스트 기능 개선:** 처음에는 위시리스트에 항목을 추가하거나 제거하는 기능이 제대로 작동하지 않았습니다 [3]. **"위시리스트가 작동하도록 해주세요"**와 같은 프롬프트를 통해 이 문제를 해결했습니다 [3]. (소스 [3]에서 이 부분은 초기에는 더미 데이터만 있었으나, 프롬프트를 통해 수정되었음을 보여줍니다).
7. **로고 추가 및 중앙 정렬:** 앱 상단에 "boring date"라는 로고를 만들고 중앙에 배치하도록 프롬프트를 사용하여 앱의 시각적 요소를 개선했습니다 [3].
8. **API 통합 시도 (OpenAI):** OpenAI 프로젝트를 위한 API 경로를 생성하려 했으나 오류가 발생했습니다 [3]. **"이것들을 고쳐줘"**라고 요청하여 문제를 해결했습니다 [3]. 사용자는 OpenAI 대시보드에서 새 API 키를 생성하고(예: "boring date") 이를 앱의 프로필 탭에 입력하여 저장할 수 있습니다 [3].
9. **이미지 추가:** 초기에는 데이트 아이디어에 이미지가 포함되지 않았습니다 [4]. **"데이트에 썸네일 사진을 추가해 줄 수 있니"**라고 요청하여 이미지를 추가할 수 있었습니다 [5]. (소스 [5]에 따르면 이미지가 완벽하지는 않더라도 추가되었습니다).
10. **버전 롤백 기능:** 만약 앱 구축 과정에서 문제가 계속 발생하면, 이전 버전으로 롤백할 수 있는 기능이 있습니다 [5]. 이는 문제를 피하고 빠르게 해결하는 데 매우 유용합니다 [5]. (소스 [5]에서 필자는 이 기능을 "정말 아름답다"고 묘사합니다).
11. **배포 (향후 계획):** 현재는 Bolt 내에서 직접 앱 스토어로 배포하는 기능이 초기 테스트 단계에 있으며, 가까운 미래에 가능할 것이라고 언급됩니다 [5, 6].
* **현재 배포 방법:** Bolt에서 프로젝트 폴더를 다운로드(내보내기)합니다 [5].
* **VS Code (비주얼 스튜디오 코드): 코드 환경**
* Bolt에서 내보낸 프로젝트를 계속 작업하기 위해 Visual Studio Code (VS Code)가 사용됩니다 [7]. 사용자는 코딩 방법을 몰라도 이 환경에서 작업할 수 있습니다 [8].
* **VS Code 사용 과정:**
1. **프로젝트 열기:** VS Code를 다운로드 및 설치한 후, Bolt에서 다운로드한 압축 해제된 프로젝트 폴더(예: "boring date")를 엽니다 [7, 8].
2. **터미널 열기:** VS Code 내에서 터미널을 열고 명령을 실행할 수 있습니다 [8].
3. **의존성 설치:** `npm install` 명령을 실행하여 프로젝트에 필요한 의존성 패키지들을 다운로드합니다 [8]. 이 과정은 매우 빠르게 진행됩니다 [8].
4. **Expo 실행:** `npx Expo start` 명령을 실행하여 프로젝트를 시작합니다 [8]. 이 명령은 앱을 시각화할 수 있는 QR 코드를 생성합니다 [8].
5. **플랫폼 선택:** Android는 'a', iOS 시뮬레이터는 'i'를 눌러 앱을 열 수 있으며, 웹에서도 열 수 있습니다 [8]. (소스 [9]에 따르면, iOS/Android 개발자 라이선스 비용과 승인 시간 때문에 웹 배포를 먼저 시연했습니다).
* **Expo / EAS (이즈): 배포 플랫폼**
* **Expo (EAS라고도 불림)는 사람들이 네이티브 모바일 앱(Apple, Android)을 매우 쉽게 구축할 수 있도록 돕는 플랫폼입니다** [4]. 한 번 만들면 모든 다른 플랫폼에 쉽게 배포할 수 있도록 해줍니다 [4, 5]. 이는 단순히 앱을 시각화하는 QR 코드 앱이 아니라, 실제로 앱을 빌드하고 배포하거나 게시할 수 있는 도구입니다 [5].
* **앱 배포 과정 (Expo/EAS 사용):**
1. **Expo 계정 생성 및 프로젝트 생성:** Expo 웹사이트에 로그인하거나 계정을 만든 다음, 새 프로젝트를 생성합니다 (예: "boring date") [9].
2. **로컬 프로젝트 연결:**
* VS Code에서 `app.js` 파일의 슬러그(slug) 이름을 Expo 프로젝트의 새 슬러그로 변경합니다 [9].
* (선택 사항) 웹사이트의 파비콘(favicon)이나 앱 아이콘을 에셋 폴더에 업로드할 수 있습니다 [9].
* VS Code 터미널에서 `eas project:init --id [슬러그]`와 같은 Expo에서 제공하는 연결 명령을 복사하여 붙여넣어 로컬 프로젝트를 Expo에 연결합니다 [9, 10].
* 연결 후 `npm install`을 다시 실행하여 프로젝트가 성공적으로 연결되었는지 확인합니다 [10].
3. **웹에서 실행 (확인용):** `npm run web` 명령을 사용하여 로컬 서버에서 앱이 제대로 작동하는지 확인할 수 있습니다 [10].
4. **빌드 설정:** `npm EAS build configure` 명령을 실행하여 프로젝트 빌드를 설정합니다 [10].
5. **앱 빌드 및 배포:** `EAS build` 명령을 실행하여 앱을 빌드합니다 [10].
* 대상 플랫폼(예: Android)을 선택합니다 [10].
* Android 애플리케이션 ID를 지정합니다 [10].
* **GitHub 리포지토리 생성:** 코드를 저장할 GitHub 리포지토리를 생성해야 합니다 [10].
* **웹 배포 확인:** 이 과정을 통해 `boringdate.expo.app`과 같은 URL을 통해 웹에 성공적으로 배포된 앱을 확인할 수 있습니다 [10].
* **iOS/Android 스토어 배포:** iOS 또는 Android 스토어에 배포하려면 `EAS build -s` 명령을 사용하고 추가 질문에 답해야 합니다 [6, 10]. iOS의 경우 iOS 번들 식별자, Apple 계정 로그인(Apple ID), 암호화 관련 정보 등을 요구합니다 [6]. **이 과정은 개발자 라이선스 비용과 승인 절차가 필요합니다** [6, 9].
* **미래와 발전:**
* 가까운 미래에는 파일 다운로드 없이 Bolt 자체에서 앱 배포가 자동으로 이루어질 것으로 예상됩니다 [6].
* 앱을 만드는 것만큼 중요한 것은 **비즈니스를 시작하고 수익을 창출하는 것**입니다 [6]. 동영상에서는 스타트업을 수백만 달러 규모로 성장시키는 방법에 대한 다른 비디오를 시청할 것을 강력히 권장합니다 [6].
* **AI 코딩 부트캠프:**
* 이 영상의 제작자는 세계 최초의 AI 코딩 부트캠프를 시작한다고 발표했습니다 [7]. 이 부트캠프는 Bolt, Lovable, Replit, Superbase, Netlify, Reloom 등 주요 AI 코딩 도구의 전문가들이 직접 참여하여 앱 구축 및 출시 모범 사례를 가르칠 예정입니다 [7].
* 30일 과정으로, 앱의 범위 설정부터 구축 및 출시까지 지원하며 [7], 최첨단 AI 코딩 도구를 활용하여 스타트업을 시작하는 방법을 배울 수 있습니다 [7].
* 두 가지 패키지가 있으며, 프리미엄 패키지에는 일대일 코칭과 20만 팔로워 채널에 스타트업을 홍보해주는 혜택이 포함됩니다 [7].
이처럼 AI 도구를 활용하면 코딩 지식 없이도 아이디어를 실제 작동하는 앱으로 빠르게 구현하고 시장에 출시할 수 있습니다 [10]. 이는 마치 **수동으로 벽돌을 하나하나 쌓아 올리는 대신, AI 로봇이 설계도만 보고 뚝딱하고 완벽한 건물을 지어주는 것**과 같습니다. 여러분은 복잡한 건설 과정을 이해할 필요 없이, 그저 원하는 건물의 모습만 명확히 전달하면 되는 것이죠.