코딩 배경 지식 없이 4개의 실제 모바일 앱을 만든 방법 — 정확한 워크플로우 공개

저는 코딩 학습을 세 번이나 포기했습니다.

동기 부여가 부족해서가 아니었습니다. 저는 진심으로 만들고 싶은 앱 아이디어들이 있었습니다. 강의를 사고, 튜토리얼을 보고, 로드맵을 따랐습니다. 매번 똑같은 벽에 부딪혔습니다. 학습 자료들은 제가 아직 이해하지 못한 무언가를 이미 알고 있다고 가정했고, 그 간극을 메울 때쯤이면 그 뒤로 세 개의 새로운 간극이 나타나 있었습니다.

그러고 나서 저는 코딩을 먼저 배우려는 시도를 멈추고, Claude Code를 개발 파트너로 사용하여 **먼저 만드는 것 (build first)**을 시작했습니다.

6주 후, 저는 작동하는 습관 추적기(habit tracker)와 AI 기반 칼로리 추적기를 App Store에 출시했습니다.

이것은 제가 사용한 워크플로우(workflow)이며, 장별로 기록한 내용입니다. 저는 이후 저와 같은 상황에 처했던 모든 사람들을 위해 이를 한 권의 완전한 책으로 만들었습니다.

"먼저 배우고 나중에 만들기"의 문제점

모바일 앱 개발은 30년 동안 진화해 왔습니다. 1990년대와 2000년대 초반에는 소프트웨어를 구축하기 위해 컴파일러(compilers), 메모리 관리(memory management), 하드웨어 제약(hardware constraints)과 같은 깊은 기술적 전문 지식이 필요했습니다. 2000년대부터 2020년대까지는 React Native와 같은 프레임워크와 Expo 같은 도구들이 진입 장벽을 획기적으로 낮추었습니다. 하지만 실제 결과물을 출시하기 전까지는 여전히 수개월의 학습이 필요한 장벽이 존재했습니다.

우리는 이제 세 번째 시대에 와 있습니다. Claude Code와 같은 AI 파트너는 당신이 편집 중인 파일뿐만 아니라, 컴포넌트(components) 간의 관계, 데이터베이스 스키마(database schema), API 호출(API calls), 그리고 내비게이션 구조(navigation structure)를 동시에 이해하며 프로젝트 전체를 한꺼번에 파악합니다.

이것이 시사하는 바는 매우 중요합니다: 병목 현상은 더 이상 기술적 지식이 아닙니다. 당신이 원하는 것을 명확하게 설명하는 능력입니다.

그것은 학습 가능한 기술이며, 이 워크플로우가 개발하는 핵심 기술입니다.

설정하기: 실제로 작동하는 환경

설정 스택(setup stack)은 의도적으로 최소화했습니다:

• Node.js — 모든 것이 실행되는 런타임(runtime)
• Claude Code — 당신의 AI 개발 파트너 (CLI)
• Expo — iOS/Android의 복잡성을 처리하는 프레임워크(framework)
• 코드 에디터(code editor) — VS Code는 Claude Code와 함께 완벽하게 작동합니다

여기서 핵심적인 통찰은 여러분이 파일에 코드를 직접 작성하는 전통적인 개발 환경(development environment)을 구축하는 것이 아니라는 점입니다. 여러분은 화면, 기능, 동작을 설명하면 Claude Code가 이를 구축하는 **대화형 인터페이스 (conversation interface)**를 구축하는 것입니다.

이 환경에서 구축하는 첫 번째 프로젝트는 앱이 아닙니다. 그것은 20분 이내에 여러분의 실제 휴대폰에서 실행되는 "Hello World" 화면입니다. 이것은 심리적으로 매우 중요합니다. 실제 휴대폰 화면에 자신의 이름이 처음 나타나는 것을 보는 것은, 이것이 어렵다는 고정관념을 깨뜨려 줍니다.

여러분의 첫 번째 실제 테스트: 휴대폰에서 실행되는 앱

단 한 줄의 앱 로직을 작성하기 전에, 여러분은 파이프라인(pipeline)이 처음부터 끝까지 작동하는지 증명합니다:

1. Claude Code가 새로운 Expo 프로젝트의 스캐폴딩(scaffolds)을 수행합니다.
2. 여러분은 컴퓨터에서 이를 실행합니다.
3. 휴대폰의 Expo Go로 QR 코드를 스캔합니다.
4. 여러분의 앱이 화면에 나타납니다 — 실시간으로 변경 사항이 반영되며 라이브로 작동합니다.

이것을 **3단계 테스트 프로토콜 (Three-Stage Testing Protocol)**이라고 부릅니다: 컴퓨터(Computer) → 미러(Mirror, 노트북에서의 화면 미러링) → 실제 휴대폰(Physical Phone). 여러분이 구축하는 모든 기능은 다음 단계로 넘어가기 전에 이 세 단계를 모두 거쳐 테스트됩니다. 이는 실제 하드웨어에서만 나타나는 레이아웃 버그의 90%를 잡아냅니다.

이 프로토콜은 단순해 보이지만, 나중에 겪을 엄청난 좌절감을 줄여줍니다.

앱에 대한 사고방식을 바꾸는 프레임워크

복잡한 것을 만들기 전에, 기술적인 측면이 아닌 구조적인 측면에서 무엇이 앱을 작동하게 만드는지 이해할 가치가 있습니다.

**5요소 프레임워크 (Five-Element Framework)**는 모든 성공적인 앱을 다섯 가지 레이어(layer)로 나눕니다:

레이어 1 — 핵심 기능 (Core Function)
여러분의 앱이 탁월하게 수행하는 단 한 가지입니다. 열 가지가 아니라 하나입니다. 칼로리 추적기는 칼로리를 계산합니다. 습관 추적기는 습관을 추적합니다. 만약 여러분의 앱의 핵심 기능을 다섯 단어 이내로 설명할 수 없다면, 그 앱은 아직 구축할 준비가 되지 않은 것입니다.

레이어 2 — 핵심 루프 (Core Loop)
매일의 참여를 유도하는 반복 가능한 사이클입니다. 습관 추적기의 경우: 앱 열기 → 습관 확인 → 완료 표시 → 연속 기록(streak) 확인. 이 루프는 60초 이내에 완료될 수 있어야 하며, 그렇지 않으면 사용자는 돌아오지 않을 것입니다.

Layer 3 — 부가 기능 (Accessory Features)
핵심 기능을 변경하지 않으면서 그 주변을 보조하는 기능들입니다. 통계, 기록, 알림 등이 이에 해당합니다. 이러한 기능들은 핵심 루프(core loop)가 완벽하게 작동한 후에 구축해야 하며, 결코 그 이전에 구축해서는 안 됩니다.

Layer 4 — 표면적 (Surface Area)
사용자가 접하는 모든 화면과 상호작용입니다. 화면은 적을수록 좋습니다. 추가되는 모든 화면은 사용자가 내려야 하는 내비게이션(navigation) 결정입니다.

Layer 5 — 리텐션 훅 (Retention Hook)
사용자가 내일 다시 돌아와야 하는 이유입니다. 연속 기록(streaks), 진행률 표시기(progress indicators), 완료 퍼센트(completion percentages) 등이 있습니다. 이것이 사람들이 한 번만 사용하는 앱과 매일 사용하는 앱을 가르는 차이점입니다.

이 프레임워크는 기술적으로 작동하는 무언가를 만드는 것과 사람들이 실제로 사용하는 무언가를 만드는 것 사이의 차이를 결정합니다.

프로젝트 1: 로컬 습관 추적기 (The Local Habit Tracker)

첫 번째 실제 프로젝트는 AsyncStorage를 사용하여 모든 데이터를 기기에 로컬로 저장하는 습관 추적기입니다.

왜 로컬로 시작할까요? 로컬 저장소는 즉각적이기 때문입니다. 네트워크도, 인증(authentication)도, 구성해야 할 데이터베이스(database)도 없습니다. 몇 시간 내에 여러분의 휴대폰에서 앱 전체가 작동하는 것을 볼 수 있으며, 워크플로우가 매우 순수합니다. 기능을 설명하면, Claude Code가 이를 구축하고, 휴대폰에서 테스트하고, 반복(iterate)하는 방식입니다.

앱에는 다음 기능이 포함됩니다:

• 습관 추가 및 삭제
• 매일 습관 완료 표시
• 연속 기록(streak) 카운터
• 간단한 통계 보기

효과적인 프롬프팅(prompting) 워크플로우:

"습관 추적기 화면을 만들어줘. 습관 목록을 보여줘야 하고,
각 습관에는 체크박스가 있어야 해. 내가 습관을 체크하면
오늘 완료된 것으로 표시해야 해. 상단에는 연속 기록
카운터를 보여줘..."

적절하게 스캐폴딩(scaffolded)된 Expo 프로젝트에서 Claude Code에 이 단일 프롬프트를 전달하면 작동하는 화면이 생성됩니다. 그 다음에는 다음과 같이 반복합니다:

"새로운 습관을 만드는 방법을 추가해줘. 하단에 '추가' 버튼과 함께
텍스트 입력창을 보여줘."

"습관 목록이 길어지고 있어. 스크롤 뷰(scroll view)를 추가해줘."

"습관을 왼쪽으로 스와이프하면 삭제 옵션을 보여줘."

이것이 바로 워크플로우입니다. 설명(Describe) → 구축(Build) → 테스트(Test) → 다시 설명(Describe again).

중요: 개발 과정에서 Claude Code는 테스트를 위한 숨겨진 패널(데이터 초기화 버튼, 디버그 토글 등)을 추가할 수 있습니다. 이러한 요소들은 App Store에 제출하기 전에 반드시 제거해야 합니다. 매 제출 전 이를 반드시 검토하십시오.

프로젝트 2: 클라우드 백엔드 및 사용자 인증 추가

로컬 스토리지 (Local storage)는 단일 기기에서는 작동합니다. 하지만 사용자가 휴대폰을 바꾸거나 태블릿에서 데이터를 확인하고 싶어 하는 순간, 작동이 중단됩니다.

해결책은 Supabase입니다. 이는 PostgreSQL 데이터베이스, 인증 (Authentication), 그리고 실시간 구독 (Real-time subscriptions) 기능을 최소한의 설정으로 제공하는 오픈 소스 Firebase 대안입니다.

업그레이드된 습관 추적기 (Habit tracker)에는 다음 기능이 추가됩니다:

• 사용자 가입 및 로그인 — 이메일 + 비밀번호 방식이며, Supabase Auth에 의해 완전히 처리됩니다.
• 클라우드 동기화 (Cloud sync) — 습관 데이터가 Supabase에 저장되어 어떤 기기에서도 접근할 수 있습니다.
• 행 수준 보안 (Row-Level Security) — 각 사용자는 자신의 데이터만 읽고 쓸 수 있습니다.

여기서 사용된 로컬 캐시 (Local cache) + 클라우드 동기화 패턴은 이해할 가치가 있습니다:

쓰기 작업은 먼저 AsyncStorage로 전달되어 즉각적인 피드백을 제공한 후, 백그라운드에서 Supabase로 동기화됩니다. 읽기 작업은 AsyncStorage가 비어 있지 않는 한 AsyncStorage에서 가져오며, 비어 있는 경우에만 Supabase를 신뢰할 수 있는 원천 (Source of truth)으로 사용합니다.

이를 통해 앱은 로컬 앱의 느낌(즉각적인 반응)과 클라우드 앱의 내구성(휴대폰 변경 시에도 데이터 유지)을 동시에 갖게 됩니다.

Supabase 대시보드는 완전히 시각적입니다. 브라우저 인터페이스를 통해 테이블을 생성하고, 인증을 설정하며, 보안 정책을 구성할 수 있습니다. 기초적인 작업을 수행하는 데 SQL 지식은 필요하지 않습니다.

프로젝트 3: AI 칼로리 추적기

이 부분부터는 정말로 인상적인 결과가 나타납니다.

세 번째 프로젝트는 Anthropic의 비전 API (Vision API)를 앱에 추가합니다. 사용자가 카메라를 열어 식사를 촬영하면, 앱은 칼로리, 단백질, 탄수화물, 지방과 같은 영양 성분 분석 결과를 자동으로 반환합니다. 사진 한 장만으로 말이죠.

구현 방법:

1. 사용자가 휴대폰 카메라로 사진을 촬영합니다.
2. 이미지는 base64로 변환되어 Anthropic API로 전송됩니다.
3. Claude가 이미지를 분석하고 구조화된 영양 데이터 (structured nutritional data)를 반환합니다.
4. 앱은 상세 분석 내용을 표시하고 이를 하루 총량에 기록합니다.

각 이미지와 함께 Claude에 전송되는 프롬프트 (prompt):

이 음식 이미지를 분석하여 다음을 포함하는 JSON 객체를 반환하세요:
- calories (number)
- protein_g (number)
...

JSON 출력을 요청하는 것은 필수적입니다. 구조화된 JSON 응답은 취약한 텍스트 파싱 (text parsing) 과정 없이 앱에서 직접 사용할 수 있습니다.

정확도는 일상적인 기록 용도로 진정 유용합니다. 임상 수준 (clinical-grade)은 아니지만, 해당 사용 사례 (use case)에는 충분합니다.

프로젝트 4: Supabase Edge Function을 통한 API 키 보안 강화

다음은 대부분의 초보자용 튜토리얼이 완전히 생략하지만, 실제 보안 취약점을 유발하는 문제입니다:

Anthropic API 키를 모바일 앱 내부에 절대 넣어서는 안 됩니다.

모바일 앱은 수백만 대의 기기에 설치되는 파일입니다. 누구나 바이너리 (binary)를 추출하여 그 안에 하드코딩된 문자열을 읽을 수 있으며, 여기에는 귀하의 API 키도 포함됩니다. 만약 키가 노출되면, 누구나 귀하의 계정으로 무제한의 API 비용을 발생시킬 수 있습니다.

올바른 아키텍처 (architecture):

모바일 앱 (Mobile App)
    ↓  (이미지 전송, API 키 없음)
Supabase Edge Function
...

Edge Function은 Supabase의 서버에서 실행됩니다. API 키는 서버의 환경 변수 (environment variable)로 저장됩니다. 모바일 앱은 이를 절대 볼 수 없습니다.

Claude Code는 평이한 영어 설명만으로 이 Edge Function을 구축합니다. 단 한 번의 명령으로 배포할 수 있습니다. 보안 모델이 첫날부터 올바르게 설정됩니다.

출시: App Store 및 Google Play

EAS (Expo Application Services)가 빌드 및 제출 프로세스를 처리합니다:

# iOS용 빌드
eas build --platform ios

...

EAS는 클라우드에서 귀하의 Expo 프로젝트를 네이티브 바이너리 (native binary)로 컴파일합니다. Xcode를 설치할 필요가 없습니다. iOS용 빌드를 위해 Mac이 필요하지 않습니다 (단, 연간 99달러의 Apple Developer 계정은 필요합니다).

두 스토어 모두 앱 설명 및 키워드, 스크린샷, 개인정보 처리방침 (Privacy Policy) URL, 그리고 연령 등급 설문조사가 제출 과정에서 필요합니다.

실제 결과

아무것도 모르는 상태에서 App Store에 앱을 출시하기까지 6주가 걸렸습니다.

이 일정은 실제 상황입니다. 마케팅용 과장이 아닙니다. 제한 요소는 기술적 난이도가 아니었습니다. 제가 원하는 것을 충분히 정밀하게 설명하는 법을 배우고, 체계적으로 테스트하는 법을 배우며, 두려움 없이 반복 (Iterate) 하는 법을 배우는 것이었습니다.

가장 중요한 변화는 정신적인 것입니다: 당신은 아직 충분히 알지 못하는 프로그래머가 아닙니다. 당신은 AI를 개발 파트너로 사용하는 프로덕트 전문가 (Product Person) 입니다. 이 둘은 서로 다른 기술을 요구하는 다른 역할이며, 두 번째 역할은 지금 당장 당신이 맡을 수 있습니다.

도서

저는 이 전체 워크플로우를 Building Mobile Apps with Claude Code — 비기술 창업자(Non-technical founders)와 바이브 코더(Vibe-coders)를 위한 186페이지 분량의 가이드북에 기록했습니다.

• 처음부터 App Store 출시까지 완료한 4개의 전체 프로젝트
• 스택 (Stack): Expo, React Native, Supabase, Anthropic vision API, EAS
• 사전 프로그래밍 경험은 전혀 필요하지 않음 — 언제나

Amazon (Kindle + Paperback) 및 Gumroad (PDF + EPUB, DRM-free)에서 구매 가능합니다.

비기술 창업자로서 AI로 제품을 만드는 것에 대한 더 많은 내용을 보고 싶다면 저를 팔로우하세요. 당신의 첫 번째 앱을 출시할 때 저를 태그해 주세요 — 저는 모든 글을 읽습니다.