PART 4 · 만든 웹서비스를 Android와 iPhone 앱으로 확장합니다14장

만든 서비스를 Android 앱으로 만듭니다

기존 서버를 사용하는 Android 앱을 실행하고 확인합니다.

이어갈 프로젝트 · ai-stock-briefing

13장에서 앱 범위·화면·보안 기준을 정했습니다.

이번 장의 준비와 서비스

필요한 도구 · Android Studio · Android Emulator · 프로젝트 앱 도구

이미 준비한 계정과 기능은 그대로 이어갑니다.

android 준비 안내 →

서버 기능을 중복 구현하거나 키를 앱에 포함하지 않습니다.

순서대로 입력하는 커맨드

현재 단계와 입력 위치를 확인한 뒤 하나씩 복사하세요.

01시작 전 확인

Claude Code·Codex에 입력튜터 요청

현재 장을 시작하거나 다시 이어갈 때

먼저 확인 · 현재 장과 실제 프로젝트를 확인. 기존에 확인한 맥락은 재사용.

14장 시작해.

02공식 Android 환경을 준비합니다

Claude Code·Codex에 입력실습

Android 개발환경 조사

먼저 확인 · 현재 컴퓨터와 13장 앱 계획 확인.

현재 컴퓨터에서 공식 Android 앱을 만들고 Emulator로 실행할 준비가 되어 있는지 먼저 조사해줘.

앞에서 정한 앱 범위와 현재 `ai-stock-briefing` 프로젝트를 확인하고, 필요한 Android 도구는 Google 공식 자료와 현재 컴퓨터의 호환 조건을 기준으로 선택해줘.

설치가 필요하면 공식 출처, 설치 이유, 예상 다운로드 용량, 약관, 계정이나 관리자 승인 필요 여부를 먼저 쉬운 말로 알려주고 멈춰줘.

내가 확인하고 승인한 뒤에만 설치를 진행해줘. 다른 프로젝트의 환경은 임의로 바꾸지 마.

03Claude에게 Android 앱 구현을 맡깁니다

Claude Code·Codex에 입력실습

계획한 Android 앱 구현

먼저 확인 · 13장 계획과 필요한 도구 준비 확인. 아직 승인하지 않은 설치는 자동 수행하지 않음.

앞에서 정한 범위대로 기존 주식 서비스를 Android 앱으로 확장해줘.

앱에서 실제 시장과 기준일을 보고, 종목명이나 종목코드로 검색하고, 종목 가격과 1개월·3개월·1년 차트, 최근 공시와 DART 원문, AI 브리핑의 근거·출처·한계를 확인할 수 있어야 해.

로그인·관심종목·Push 알림·매매·포트폴리오는 추가하지 마.

현재 프로젝트를 먼저 조사하고, 주식 데이터·공시·Gemini·Database·Cache는 기존 서버 기능을 최대한 재사용해줘. 내부 기술과 구조는 현재 환경에 맞게 선택해줘.

13장에서 앱에 포함하기로 한 기능은 빠짐없이 구현해줘. 같은 의미의 항목은
용어와 숫자 표기, 단위·기준일·출처, 안내 문구를 웹서비스와 맞춰줘.
최근 공시 표시 수는 앱 화면에 맞게 정해줘.

제작 도구의 기본 화면을 그대로 두지 마. 지수와 종목은 흰 카드에 담고 카드 사이에 여백을 줘. 상승은 빨강, 하락은 파랑으로 웹과 같게 쓰고 색을 못 보는 사람도 알 수 있게 기호나 부호를 함께 써줘. 누르는 곳에는 강조색을 하나만 정해서 쓰고, 같은 정보를 한 화면에 여러 번 반복하지 마.

정상 결과만 보여주지 말고, 자료를 가져오는 중일 때와 검색 결과가 없을 때, 서버에 연결되지 않을 때를 사용자가 구분할 수 있게 해줘. 오류 화면에 내부 오류 문구를 그대로 내보내지 말고 사람이 읽는 말로 알려줘.

외부 서비스 Secret을 앱에 넣지 말고, 위치·카메라·마이크·연락처·사진처럼 필요하지 않은 권한도 요청하지 마.

사람의 설치 승인이나 계정 입력이 필요하면 그 지점에서 멈춰 안내해줘.

구현 뒤 Build와 필요한 자동 Test, 보안 검사, 기존 웹 기능 Regression을 수행해줘. 내부 명령과 로그를 나열하지 말고 통과 여부와 남은 문제를 쉬운 말로 요약해줘.

자동 검사만으로 끝내지 말고 공식 Emulator에 설치해 실제 사용자 흐름까지 확인할 준비를 해줘.

04Emulator에 앱을 설치하고 첫 화면을 엽니다

Claude Code·Codex에 입력실습

Emulator 설치·실행

먼저 확인 · 앱 Build와 Emulator 준비 확인.

준비한 Android 앱을 공식 Emulator에 설치하고 실행해줘.

앱 파일을 만들었다는 것으로 끝내지 말고 첫 화면이 실제로 나타나고 기존 주식 서비스의 자료를 받을 수 있는 상태까지 확인해줘.

설치나 실행 과정에서 내가 승인해야 하는 일이 나오면 멈춰서 알려줘.

준비가 끝나면 내가 Emulator에서 무엇을 직접 확인하면 되는지 안내해줘.

05연습용 연결과 실제 서비스 연결을 모두 확인합니다

Claude Code·Codex에 입력실습

개발용·Release 서버 연결

먼저 확인 · Emulator 실행과 현재 저장소·Vercel 배포 확인.

Emulator에서 확인할 연습용 연결과 실제 배포 앱의 연결을 구분해줘.

개발 편의를 위해 실제 배포 앱의 네트워크 보안을 낮추지 마.

Release 앱은 저장소와 Vercel의 실제 배포 상태를 확인해 현재 Production HTTPS 서버를 사용하게 해줘. 임의의 운영 주소를 만들지 마.

이번에 앱을 위해 서버에 새로 만든 기능이 있으면 배포에도 반영해줘. 그러지 않으면 Release 앱이 실제 주소에 연결돼도 자료를 받지 못해.

외부 API Key를 앱에 넣어 연결 문제를 우회하지 말고, 두 환경에서 실제 응답을 확인한 뒤 결과를 쉽게 요약해줘.

06앱과 웹을 나란히 놓고 대조합니다

Claude Code·Codex에 입력실습

웹과 앱 표현 대조

먼저 확인 · 독자가 검색·차트·공시·브리핑을 사용했는지 확인. 13장 앱 계획 범위 안에서 같은 종목·조회 시점·기간·정렬·페이지 조건으로 비교.

앱과 웹을 같은 종목으로 나란히 열고, 13장에서 앱에 포함하기로 한 기능을
대상으로 같은 것을 다르게 부르거나 다르게 적은 곳을 목록으로 알려줘.
용어와 숫자 표기, 단위·기준일·출처를 대조하고 계획한 기능의 누락도 확인해줘.
앱 화면에 맞게 정한 최근 공시 표시 수 차이는 오류로 보지 마.

이 범위에서 다르면 웹을 기준으로 앱을 고쳐줘. 웹과 서버는 바꾸지 마.

7. 자동 검사가 찾지 못한 불편을 발견합니다 선택·문제 발생 시

Claude Code·Codex에 입력선택·문제 발생 시

키보드 가림·상태 표시줄 겹침이 실제로 발생할 때만

먼저 확인 · 독자 화면에서 원문에 적힌 두 증상이 실제로 있는지 확인. 없는 증상을 주장하지 않음.

Android 앱에서 종목 검색은 성공했는데 검색 뒤에도 키보드가 계속 열려 있어 상세 화면과 스크롤을 가려.

그리고 화면 맨 위에서 시장 화면의 제목과 상세 화면의 첫 줄이 시계와 배터리가 보이는 상태 표시줄 글자와 겹쳐.

사용자가 검색을 마치면 키보드가 자연스럽게 닫히고, 바로 상세 화면을 보며 차트·공시·AI 브리핑까지 내려갈 수 있게 고쳐줘. 앱의 모든 화면이 위아래 시스템 영역을 침범하지 않게 해줘.

기존 검색 결과와 서버 기능은 바꾸지 말고, 원인은 Claude가 조사해 필요한 부분만 수정해줘.

수정 뒤 자동 Test와 기존 기능 재검사를 수행하고, Emulator에서 같은 검색 흐름을 다시 확인해줘.

08앱에 Secret과 불필요한 권한이 없는지 확인합니다

Claude Code·Codex에 입력실습

앱 보안·권한·회귀 검증

먼저 확인 · 완성 앱과 실제 사용자 흐름 확인.

완성한 Android 앱과 저장소에 외부 서비스 Secret이 들어 있지 않은지 검사해줘.

위치·카메라·마이크·연락처·사진처럼 이번 기능에 필요하지 않은 권한을 요청하지 않는지도 확인해줘.

실제 Secret 값이나 내부 검사 명령은 출력하지 말고, 발견 여부와 앱이 사용하는 권한을 쉬운 말로 알려줘.

기존 웹 기능 Regression과 이번 Android 핵심 흐름도 다시 확인한 뒤, 통과하지 못한 것이 있다면 완료라고 하지 마.

09앱에 Secret과 불필요한 권한이 없는지 확인합니다

Claude Code·Codex에 입력실습

정상 Android 상태 Git 기록

먼저 확인 · 앱·서버·배포 반영 및 검사 결과 확인.

이번 작업을 마무리해줘.

이번 장에서 만든 Android 앱과 서버 변경, 배포 반영 내용을 함께 정리해줘.

GitHub에 보내지는 말고 Git 기록까지만 해줘.

10이 장을 마쳤는지 확인합니다

Claude Code·Codex에 입력튜터 요청

이번 장 완료 조건을 확인할 때

먼저 확인 · 현재 장과 실제 프로젝트를 확인. 기존에 확인한 맥락은 재사용.

장 완료 확인해줘.

이 장에서 막혔을 때

디버깅 → 내 정상 기록으로 복구 → 장별 Source로 재시작

Git 명령을 외우거나 직접 입력할 필요는 없습니다. 아래 요청문을 그대로 붙여넣으면 Claude Code가 확인하고 처리합니다.

1. 디버깅 --- 먼저 무엇이 어긋났는지 그대로 말하고 고쳐봅니다. 대부분 여기서 해결됩니다.

지금 작업이 책과 다르게 진행됐어.
현재 상태와 화면에 나온 문제를 확인하고 원인을 찾아서 고쳐줘.

Emulator가 열리지 않거나 앱이 설치되지 않을 때는 환경부터 다시 확인하게 합니다.

공식 Emulator가 실행되지 않아.
현재 컴퓨터에 필요한 Android 도구가 준비됐는지 다시 확인하고,
빠진 것이 있으면 공식 출처와 이유를 알려준 뒤 진행해줘.

앱이 열리는데 자료가 비어 있으면 서버 연결을 확인하게 합니다.

앱은 열리는데 시장 자료가 비어 있어.
앱이 어느 주소로 요청하고 있고 그 주소가 지금 응답하는지 확인해서 고쳐줘.

앱 화면이 웹과 달라 보이면 무엇이 다른지 대조하게 합니다.

앱 화면이 웹서비스와 다르게 보여.
같은 종목에서 웹과 앱이 보여주는 항목과 숫자를 대조해서
빠지거나 줄여서 표시되는 것이 있으면 고쳐줘.

Release 앱이 실제 주소에 연결되지 않으면 배포까지 확인하게 합니다.

Release 앱이 실제 서버에서 자료를 받지 못해.
이번에 앱을 위해 서버에 새로 만든 기능이 배포에 반영됐는지 확인하고
반영되지 않았으면 배포까지 진행해줘.

2. 내 정상 기록으로 복구 --- 해결되지 않으면 실습하면서 내 프로젝트에 남겨둔 정상 기록으로 돌아갑니다. 지금까지 한 작업은 먼저 따로 보존합니다.

현재 작업은 잃지 않도록 먼저 별도로 보존해줘.
이 프로젝트에서 마지막으로 정상 동작했던 상태를 찾아 안전하게 복구해줘.

3. 장별 Source로 재시작 --- 그래도 이어갈 수 없을 때 사용합니다. 14장의 남은 실습은 건너뛰게 되므로 마지막 수단입니다.

내 현재 작업을 먼저 안전하게 보존해줘.
아래 14장 완성 Source에서 다시 시작해줘.
https://github.com/buildyourownai-lab/develop-like-a-pro-with-ai/tree/main/chapters/ch14/source/ai-stock-briefing
내 인증키와 Database, Cache 접속 정보를 입력할 자리를 알려주고
준비가 끝나면 14장을 마친 상태인지 확인해줘.

방향부터 확인하고, 더 필요할 때 다음 힌트를 펼치세요.

웹은 되는데 Emulator는 연결 안 됨

1단계 — 방향

어디에서 실행되는 localhost인지 봅니다.

2단계 — 범위

PC·Emulator·운영 서버 주소를 구분합니다.

3단계 — 위치·원인 후보

앱 설정의 서버 주소와 실제 네트워크 접근을 확인합니다.

정답을 요청했을 때

해당 환경에서 도달 가능한 주소를 사용하고 실제 앱 요청을 검사합니다. 키를 앱에 넣어 우회하지 않습니다.

검증 주의

이 설명만으로 원인이 확인됐거나 수정됐다고 말하지 않습니다. 현재 프로젝트의 근거를 먼저 대조합니다.

키보드가 화면을 가림

1단계 — 방향

자동 Test와 실제 사용성 확인은 다릅니다.

2단계 — 범위

같은 검색 동작을 직접 반복합니다.

3단계 — 위치·원인 후보

입력 완료 뒤 키보드·스크롤·결과 위치를 확인합니다.

정답을 요청했을 때

관련 UI만 수정한 뒤 같은 기기 흐름과 기존 기능을 다시 확인합니다.

검증 주의

이 설명만으로 원인이 확인됐거나 수정됐다고 말하지 않습니다. 현재 프로젝트의 근거를 먼저 대조합니다.

디버깅 → 정상 기록 복구 → 장별 소스로 재시작 →

이번 장의 완료 체크리스트

개발환경공식 설치·용량·Emulator 상태 확인
범위 구현계획한 화면과 기능만 구현
주소 연결Emulator에서 접근 가능한 서버 주소 확인
전체 사용검색·종목·차트·공시·브리핑 흐름 사용
사용성·경계키보드·오류·권한·Secret 확인
회귀·기록웹과 앱 관련 검사와 완료 기록

장 완료 확인해줘.

실제 프로젝트에서 튜터와 확인합니다. 사이트를 열어본 기록은 학습 완료가 아닙니다.

장별 소스와 저자 검증 기록

저자는 13장을 끝낸 상태에서 14장 요청문만으로 Android 앱까지 갔습니다. Android 16, API 36 공식 Emulator에 앱을 설치해 시장 화면과 기준일, 상승률 상위·하락률 상위 각 5종목을 확인하고, SK하이닉스를 검색해 1개월·3개월·1년 차트와 최근 1년 공시를 봤습니다. 공시에서 DART 공식 원문이 열리는 것과 AI 브리핑의 근거·출처·한계가 웹과 같은 항목으로 나오는 것도 확인했습니다. Release 앱은 Vercel Production HTTPS 주소에서 실제 자료를 받았습니다. Source 안의 Test는 136개이고 이 장에서 새로 생긴 것은 23개입니다. 근거는 verification/chapter-14/에 있습니다.

14장 완성 소스 ↗저자 검증 상세 기록 ↗

장별 소스는 해당 장까지의 기준 상태입니다. 정상 실습은 내 프로젝트를 이어가고, 완성 소스는 비교·복구할 때 사용합니다.

자료 판본 1c784213

이 장의 개발 용어

API: 프로그램이 다른 서비스와 정해진 방식으로 요청·응답을 주고받는 연결 방법.
API Key: 서비스 사용 자격을 확인하는 값. 안전한 입력 위치에 직접 넣으며 값은 공개하지 않습니다.
Test: 정한 완료 조건을 반복 확인하는 검사. 검사하지 않은 전체 정확성을 보증하지 않습니다.
Regression: 수정 뒤 기존 기능까지 다시 확인하는 회귀 검사.
Cache: 같은 조건에서 계산·생성한 결과를 일정 조건 동안 재사용하는 저장 방식.
Database: 자료를 구조적으로 저장하고 조회하는 곳.
Production: 실제 운영 배포 환경. 로컬·Preview와 설정이 다를 수 있습니다.

튜터 사용 안내 실습 자료 업데이트

현재 컴퓨터에서 공식 Android 앱을 만들고 Emulator로 실행할 준비가 되어 있는지 먼저 조사해줘. 앞에서 정한 앱 범위와 현재 `ai-stock-briefing` 프로젝트를 확인하고, 필요한 Android 도구는 Google 공식 자료와 현재 컴퓨터의 호환 조건을 기준으로 선택해줘. 설치가 필요하면 공식 출처, 설치 이유, 예상 다운로드 용량, 약관, 계정이나 관리자 승인 필요 여부를 먼저 쉬운 말로 알려주고 멈춰줘. 내가 확인하고 승인한 뒤에만 설치를 진행해줘. 다른 프로젝트의 환경은 임의로 바꾸지 마.

앞에서 정한 범위대로 기존 주식 서비스를 Android 앱으로 확장해줘. 앱에서 실제 시장과 기준일을 보고, 종목명이나 종목코드로 검색하고, 종목 가격과 1개월·3개월·1년 차트, 최근 공시와 DART 원문, AI 브리핑의 근거·출처·한계를 확인할 수 있어야 해. 로그인·관심종목·Push 알림·매매·포트폴리오는 추가하지 마. 현재 프로젝트를 먼저 조사하고, 주식 데이터·공시·Gemini·Database·Cache는 기존 서버 기능을 최대한 재사용해줘. 내부 기술과 구조는 현재 환경에 맞게 선택해줘. 13장에서 앱에 포함하기로 한 기능은 빠짐없이 구현해줘. 같은 의미의 항목은 용어와 숫자 표기, 단위·기준일·출처, 안내 문구를 웹서비스와 맞춰줘. 최근 공시 표시 수는 앱 화면에 맞게 정해줘. 제작 도구의 기본 화면을 그대로 두지 마. 지수와 종목은 흰 카드에 담고 카드 사이에 여백을 줘. 상승은 빨강, 하락은 파랑으로 웹과 같게 쓰고 색을 못 보는 사람도 알 수 있게 기호나 부호를 함께 써줘. 누르는 곳에는 강조색을 하나만 정해서 쓰고, 같은 정보를 한 화면에 여러 번 반복하지 마. 정상 결과만 보여주지 말고, 자료를 가져오는 중일 때와 검색 결과가 없을 때, 서버에 연결되지 않을 때를 사용자가 구분할 수 있게 해줘. 오류 화면에 내부 오류 문구를 그대로 내보내지 말고 사람이 읽는 말로 알려줘. 외부 서비스 Secret을 앱에 넣지 말고, 위치·카메라·마이크·연락처·사진처럼 필요하지 않은 권한도 요청하지 마. 사람의 설치 승인이나 계정 입력이 필요하면 그 지점에서 멈춰 안내해줘. 구현 뒤 Build와 필요한 자동 Test, 보안 검사, 기존 웹 기능 Regression을 수행해줘. 내부 명령과 로그를 나열하지 말고 통과 여부와 남은 문제를 쉬운 말로 요약해줘. 자동 검사만으로 끝내지 말고 공식 Emulator에 설치해 실제 사용자 흐름까지 확인할 준비를 해줘.

준비한 Android 앱을 공식 Emulator에 설치하고 실행해줘. 앱 파일을 만들었다는 것으로 끝내지 말고 첫 화면이 실제로 나타나고 기존 주식 서비스의 자료를 받을 수 있는 상태까지 확인해줘. 설치나 실행 과정에서 내가 승인해야 하는 일이 나오면 멈춰서 알려줘. 준비가 끝나면 내가 Emulator에서 무엇을 직접 확인하면 되는지 안내해줘.

Emulator에서 확인할 연습용 연결과 실제 배포 앱의 연결을 구분해줘. 개발 편의를 위해 실제 배포 앱의 네트워크 보안을 낮추지 마. Release 앱은 저장소와 Vercel의 실제 배포 상태를 확인해 현재 Production HTTPS 서버를 사용하게 해줘. 임의의 운영 주소를 만들지 마. 이번에 앱을 위해 서버에 새로 만든 기능이 있으면 배포에도 반영해줘. 그러지 않으면 Release 앱이 실제 주소에 연결돼도 자료를 받지 못해. 외부 API Key를 앱에 넣어 연결 문제를 우회하지 말고, 두 환경에서 실제 응답을 확인한 뒤 결과를 쉽게 요약해줘.

앱과 웹을 같은 종목으로 나란히 열고, 13장에서 앱에 포함하기로 한 기능을 대상으로 같은 것을 다르게 부르거나 다르게 적은 곳을 목록으로 알려줘. 용어와 숫자 표기, 단위·기준일·출처를 대조하고 계획한 기능의 누락도 확인해줘. 앱 화면에 맞게 정한 최근 공시 표시 수 차이는 오류로 보지 마. 이 범위에서 다르면 웹을 기준으로 앱을 고쳐줘. 웹과 서버는 바꾸지 마.

Android 앱에서 종목 검색은 성공했는데 검색 뒤에도 키보드가 계속 열려 있어 상세 화면과 스크롤을 가려. 그리고 화면 맨 위에서 시장 화면의 제목과 상세 화면의 첫 줄이 시계와 배터리가 보이는 상태 표시줄 글자와 겹쳐. 사용자가 검색을 마치면 키보드가 자연스럽게 닫히고, 바로 상세 화면을 보며 차트·공시·AI 브리핑까지 내려갈 수 있게 고쳐줘. 앱의 모든 화면이 위아래 시스템 영역을 침범하지 않게 해줘. 기존 검색 결과와 서버 기능은 바꾸지 말고, 원인은 Claude가 조사해 필요한 부분만 수정해줘. 수정 뒤 자동 Test와 기존 기능 재검사를 수행하고, Emulator에서 같은 검색 흐름을 다시 확인해줘.

완성한 Android 앱과 저장소에 외부 서비스 Secret이 들어 있지 않은지 검사해줘. 위치·카메라·마이크·연락처·사진처럼 이번 기능에 필요하지 않은 권한을 요청하지 않는지도 확인해줘. 실제 Secret 값이나 내부 검사 명령은 출력하지 말고, 발견 여부와 앱이 사용하는 권한을 쉬운 말로 알려줘. 기존 웹 기능 Regression과 이번 Android 핵심 흐름도 다시 확인한 뒤, 통과하지 못한 것이 있다면 완료라고 하지 마.

공식 Emulator가 실행되지 않아. 현재 컴퓨터에 필요한 Android 도구가 준비됐는지 다시 확인하고, 빠진 것이 있으면 공식 출처와 이유를 알려준 뒤 진행해줘.

Release 앱이 실제 서버에서 자료를 받지 못해. 이번에 앱을 위해 서버에 새로 만든 기능이 배포에 반영됐는지 확인하고 반영되지 않았으면 배포까지 진행해줘.

내 현재 작업을 먼저 안전하게 보존해줘. 아래 14장 완성 Source에서 다시 시작해줘. https://github.com/buildyourownai-lab/develop-like-a-pro-with-ai/tree/main/chapters/ch14/source/ai-stock-briefing 내 인증키와 Database, Cache 접속 정보를 입력할 자리를 알려주고 준비가 끝나면 14장을 마친 상태인지 확인해줘.