🧩 Chapter 07 · 최신 · 2026.03

앱 구조가
생각보다 복잡했다

버튼 하나 연결하려고 했는데, 앱 안에 앱이 또 있었어요.
구조를 파악하느라 시간이 걸렸고, AI도 이 부분에선 한계가 있었습니다.

🔍 새로운 사실 발견

앱이 3겹으로 쌓여 있었다

이전 챕터(06)에서 "포토북 만들기 버튼을 누르면 아무 반응이 없다"는 문제를 발견했어요. 원인을 파헤치다 보니, 기존에 몰랐던 중요한 사실이 드러났습니다. 이전 담당자에게 물어봤더니 이런 이야기를 해줬어요:

💬 이전 담당자에게 들은 내용
"사진 선택하는 부분, 그거 모바일에디터 웹뷰에서 처리하는 거야. 그냥 네이티브 앱 화면 아니고, 웹 페이지가 앱 안에 열려있는 거거든. 그러니까 앱 코드만 봐서는 전체 흐름을 알 수 없어."

이 말을 듣고 AI와 함께 구조를 다시 파악해봤더니, 앱이 총 3개의 층으로 구성되어 있었습니다.

📱
1층: 네이티브 앱 앱 코드
진짜 앱 코드로 만들어진 화면들. 로그인, 나의스토리 목록, 사진 그리드 화면 등이 여기에 해당해요. 우리가 지금까지 작업하던 영역.
↓
🌐
2층: 홈 웹뷰 웹페이지
앱 메인 화면(홈)이 사실은 웹페이지예요. 앱 안에 내장된 브라우저처럼 동작해서, 앱처럼 보이지만 실제론 웹 화면. 이전 챕터에서 여기에 "나의스토리" 아이콘을 끼워넣었던 거예요.
↓
📸
3층: 모바일에디터 웹뷰 또 다른 웹페이지
"포토북 만들기"를 누르면 열리는 사진 선택 화면도 웹페이지예요! 이게 포토북 편집의 핵심 단계인데, 별도로 개발된 웹 서비스가 앱 안에서 열리는 구조입니다. 이전엔 이 사실을 몰랐어요.
🤖 AI의 한계

구조 파악에는 AI도 힘들었다

이번 작업에서 솔직하게 느낀 점이 있어요. AI는 코드를 정말 잘 읽어줍니다. 파일을 열어서 "이 코드가 뭔지" 설명해주는 건 완벽해요. 하지만 "전체 흐름이 어떻게 연결되는지" 파악하는 건 달랐습니다.

✅
AI가 잘하는 것
특정 파일의 코드를 읽고 설명해주기.
"이 함수가 뭐 하는 건지" 물어보면 정확히 알려줘요.
에러 메시지 보고 원인 찾아주기.
코드 작성하기.
❌
AI가 어려워하는 것
"앱 전체가 어떤 구조인지" 큰 그림 파악하기.
코드에 안 적힌 배경 지식(3층 구조 같은 것) 파악하기.
기획자/담당자만 아는 맥락 이해하기.
😤 실제로 있었던 일
AI와 함께 수십 개의 파일을 열어보며 구조를 파악하려 했는데, 계속 "이 파일을 보자, 저 파일을 보자"를 반복했어요. 파일들이 어떻게 연결되는지 전체 지도가 없으니까 미로를 한 칸씩 걸어가는 느낌이었습니다. 결국 이전 담당자에게 직접 물어봤을 때 비로소 전체 그림이 잡혔어요.
01
배운 점: 구조적 맥락은 사람이 먼저 파악해야 한다
AI에게 작업을 맡기기 전에, 사람이 먼저 "이 앱이 어떤 구조로 되어있는지"를 이해하고 있어야 해요. 그 맥락을 AI에게 알려줘야 AI가 제대로 도와줄 수 있습니다. AI는 내가 가진 정보 안에서 최선을 다할 뿐, 내가 모르는 걸 먼저 알고 있지는 않아요.
📋 또 다른 문제

기획이 아직 확정되지 않았다

구조를 파악하고 나서 또 다른 문제가 있었어요. 새 기능을 어떻게 붙일지 기획이 아직 완전히 정해지지 않은 상태였습니다.

❓
스토리에서 포토북 만들기를 어떤 경로로?
나의스토리에서 "포토북 만들기" 버튼을 누르면, 기존 포토북 구매 흐름으로 가야 할까? 아니면 완전히 새로운 흐름을 만들어야 할까? 아직 결정 안 됨.
❓
사진 선택은 어디서?
스토리에서 사진이 자동으로 묶여 있는데, 사용자가 직접 골라서 수정도 할 수 있어야 할까? 이 과정이 모바일에디터 웹뷰에서 일어나야 하는 건지 네이티브에서 해결되는 건지 미확정.
❓
기존 흐름과 얼마나 겹쳐야 할까?
완전히 새로 만들면 시간이 오래 걸리고, 기존 흐름을 재사용하면 어색한 경험이 생길 수 있어요. 정확히 어디부터 새로 만들고 어디부터 기존 걸 쓸지 경계가 불분명.
💡 이게 왜 문제가 되나요?
AI와 함께 코딩할 때, "이렇게 만들어줘"라고 구체적으로 말할 수 있어야 빠르게 진행돼요. 그런데 기획이 미확정 상태라면 AI에게 뭘 만들어달라고 할 수가 없어요. "이 경우엔 어떻게 하지?", "저 예외 상황은?" 이런 물음들이 계속 나와서 코드를 쓰다 멈추고, 방향을 다시 생각하는 일이 반복됐습니다. 소위 말하는 "바이브코딩"(AI와 흥에 맞춰 빠르게 코딩하기)이 잘 안 됐어요.
02
배운 점: 기획이 명확해야 AI도 빠르게 달릴 수 있다
AI를 활용한 빠른 개발은 "무엇을 만들지"가 명확할 때 빛을 발합니다. 기획 단계에서 예외사항들을 미리 정리해두지 않으면, 개발 중에 계속 막히게 돼요. 기획의 완성도가 개발 속도를 결정합니다.
📍 현재 상태

지금은 어디쯤 와 있나요?

우여곡절이 있었지만, 확인하고 결정한 것들이 있어요.

✅
3층 구조 파악 완료
네이티브 앱 → 홈 웹뷰 → 모바일에디터 웹뷰, 이 세 층이 어떻게 연결되는지 이해했어요.
✅
연결 방식 결정
스토리에서 포토북 제작으로 넘어갈 때 "웹팀이 만든 전용 URL을 앱에서 연다"는 방식으로 결정. 기존 흐름을 최대한 재활용하는 방향.
🔄
웹팀 협업 준비 중
포토북 종류 선택 전용 페이지가 필요해서, 웹팀과 협업 논의 중이에요.
⏳
기획 일부 확정 대기 중
세부 사용자 경험(UX)의 일부는 아직 논의 중. 기획이 확정되는 대로 해당 부분 구현 예정.
🧩 이 챕터의 핵심
빠른 개발에는 "맥락"과 "기획" 두 가지가 선행되어야 한다
앱 구조라는 맥락을 모른 상태에선 AI도 코드 파편만 볼 뿐 전체 그림을 그려줄 수 없었어요. 기획 확정이 안 된 상태에선 AI와 빠르게 달리고 싶어도 방향이 없어서 속도가 안 났고요. 이 두 가지가 갖춰질 때 AI와의 협업이 비로소 제 속도를 냅니다.
⚠ 구조 파악 필수 ⚠ 기획 선행 필수 ✓ 3층 구조 이해 완료 ✓ 연결 방식 결정
← 이전: 연결
07 / 07
처음으로 →