20강: 모바일 앱

앱스토어 없이 앱 만들기

오늘 끝나면 이런 걸 갖게 돼요

지금까지 만든 웹사이트를 스마트폰 홈 화면에 설치할 수 있어요. 아이콘을 눌렀을 때 주소창 없이 앱처럼 열리면 성공입니다.

이번 실습에서는 설치까지만 완성해요. 오프라인 저장과 알림은 설치가 끝난 뒤 고르는 확장 기능입니다.

1단계: 앱 아이콘을 준비해요

먼저 정사각형 로고 PNG(피엔지 이미지 파일) 한 장을 준비하세요. 원본 크기는 512 × 512픽셀이 알맞고, 작은 글자보다 단순한 그림이 잘 보여요.

로고를 고르거나 만들고 PNG로 내려받는 일은 사람이 해야 해요. 원본 PNG를 준비하는 일만 직접 하시면 나머지는 클로드가 해요.

파일을 어디에 넣을지 모르겠다면 클로드에게 먼저 폴더 위치를 물어보세요. 안내받은 곳에 PNG를 넣으면 클로드가 크기를 바꾸고 설정에 연결합니다.

2단계: 설치에 필요한 설정을 맡겨요

PWA(Progressive Web App, 웹사이트를 앱처럼 설치하는 방식)는 같은 웹사이트를 홈 화면에서 앱처럼 열게 해요. 웹과 앱 두 모습으로 쓰는 변신 로봇과 비슷합니다.

로봇의 명함은 웹 앱 매니페스트(Web App Manifest, 앱 이름과 아이콘을 적는 설정 파일)예요. Next.js 프로젝트에서는 app/manifest.ts나 app/manifest.json으로 만들 수 있어요. 직접 코드를 쓰지 말고 클로드에게 이렇게 말하세요.

이 Next.js 프로젝트를 스마트폰 홈 화면에 설치할 수 있는 PWA로 만들어줘.

먼저 프로젝트 구조, 설치된 Next.js 버전, 기존 manifest 파일과 아이콘을 확인해줘.
현재 프로젝트에 맞는 Next.js 공식 PWA 가이드를 기준으로 작업해줘.

이번 목표는 하나야.
배포된 사이트를 홈 화면에 추가하고, 아이콘을 눌렀을 때 주소창 없이 열리게 해줘.

내가 준비한 정사각형 원본 PNG의 위치를 먼저 확인해줘.
원본이 없거나 PNG가 아니면 임의로 만들지 말고 나에게 알려줘.
원본을 찌그러뜨리지 말고 192x192와 512x512 아이콘으로 만들어줘.

프로젝트 구조에 맞는 위치에 manifest를 만들거나 기존 파일을 안전하게 수정해줘.
앱 이름, 짧은 이름, 설명, 시작 주소, 배경색, 테마 색상은 현재 프로젝트를 보고 먼저 제안해줘.
확실하지 않은 값만 나에게 물어보고, 내가 확인하기 전에는 파일을 바꾸지 마.
표시 방식은 standalone으로 하고, 만든 아이콘 경로를 연결해줘.

이번에는 서비스 워커, 오프라인 캐시, 푸시 알림, Serwist, next-pwa를 추가하지 마.
바꾸거나 만들 파일과 확인 방법을 먼저 보여주고 내 승인을 기다려줘.
승인 뒤 작업하고, 프로젝트에 이미 있는 검사 방법으로 오류가 없는지 확인해줘.

계획이 나오면 앱 이름, 색상, 아이콘 원본이 맞는지 확인하세요. 파일 작성과 연결은 클로드가 맡습니다.

3단계: 저장하고 배포해요

홈 화면 설치는 안전한 보안 연결인 HTTPS에서 확인해야 해요. 16강에서 Vercel(버셀, 웹사이트 배포 서비스)에 올린 주소는 HTTPS가 적용돼 있습니다.

명령어를 직접 입력하지 말고 저장과 업로드를 한 번에 맡기세요.

방금 만든 PWA 설정을 깃허브에 올릴 준비를 해줘.
바뀐 파일과 검사 결과를 먼저 보여주고, 원본 로고와 필요한 아이콘이 모두 있는지 확인해줘.
비밀번호나 API 키가 포함되지 않았는지도 확인해줘.

문제가 없으면 지금 상태를 저장하고 main 갈래를 깃허브에 올려줘.
실행 전에 무엇을 할지 먼저 보여 주고 내 승인을 기다려줘.
로그인이나 브라우저 권한 승인이 필요하면 그 화면에서 멈춰서 알려줘.

로그인, 권한 승인, 배포 완료 확인만 직접 하시면 나머지는 클로드가 해요. Vercel에서 새 배포가 완료됐다는 표시가 나오면 스마트폰을 준비하세요.

4단계: 스마트폰에 설치해요

배포된 웹사이트 주소를 스마트폰에서 여세요. 설치 메뉴의 위치는 휴대전화와 브라우저에 따라 조금 달라요.

• 안드로이드 크롬: 브라우저 메뉴에서 홈 화면에 추가 또는 앱 설치를 고르세요.
• 아이폰 사파리: 공유 버튼을 누르고 홈 화면에 추가를 고르세요.

홈 화면의 새 아이콘을 눌러 보세요. 브라우저 주소창 없이 사이트가 열리면 이번 실습은 끝났어요.

아이콘이 없거나 웹 브라우저처럼 열린다면 아래 문장을 보내세요.

배포된 사이트를 홈 화면에 추가했는데 아래 문제가 생겼어.

[배포된 주소를 여기에 붙여넣기]

[아이콘이 안 보임 / 주소창이 보임 / 설치 메뉴가 없음 중 해당 내용을 적기]

배포된 주소와 현재 manifest, 아이콘 경로를 확인해 원인을 찾아줘.
다른 기능은 건드리지 말고, 고치기 전에 원인과 바꿀 파일을 먼저 보여줘.

오프라인 기능은 나중에 붙여요

홈 화면 설치와 오프라인 동작은 같은 일이 아니에요. 설치에는 올바른 매니페스트와 HTTPS가 필요하고, 오프라인 저장에는 서비스 워커(Service Worker, 인터넷 연결과 저장된 파일 사용을 관리하는 작업자)가 더 필요합니다.

서비스 워커는 출장 전에 필요한 서류를 챙겨 두는 비서와 비슷해요. Serwist(서위스트)는 Next.js에서 이 저장 과정을 구성할 때 쓸 수 있는 도구예요.

이 프로젝트에 오프라인 안내 화면과 캐시를 추가할 수 있는지 먼저 조사해줘.
현재 Next.js 버전과 빌드 도구가 Turbopack인지 webpack인지 확인하고,
Next.js와 Serwist 공식 문서에서 이 프로젝트에 맞는 방식만 골라줘.

설치 전에 저장할 화면과 데이터의 범위를 설명해줘.
로그인한 사람의 정보나 자주 바뀌는 데이터는 임의로 저장하지 마.
Turbopack을 쓰고 있다면 Serwist의 Turbopack 방식을 사용해줘.
바꿀 파일, 주의점, 온라인과 오프라인에서 확인할 방법을 먼저 보여주고 내 승인을 기다려줘.

푸시 알림도 별도 기능이에요. 아이폰에서는 홈 화면에 설치한 앱에서만 웹 푸시 알림을 받을 수 있어요. 설치를 먼저 끝낸 뒤 필요할 때 추가하세요.

회사에서는 이렇게 쓰고 있어요

디온웍스의 사내 인사관리 시스템 DGHR은 직원 10명이 쓰는 PWA예요. 직원은 전달받은 주소를 열어 홈 화면에 추가합니다.

출근 버튼을 누르면 GPS(위치 정보)로 회사 건물 반경 100m 안인지 확인해요. 앱스토어에 공개하지 않아도 사내 도구를 앱처럼 열 수 있습니다.

PWA와 네이티브 앱은 달라요

네이티브 앱은 앱스토어에 등록하는 앱이에요. 스마트폰 기능을 깊게 써야 한다면 필요하지만, 만드는 과정과 배포 방식이 PWA와 다릅니다.

사내 도구나 웹서비스를 홈 화면에서 열고 싶다면 PWA부터 확인하세요. 블루투스 정밀 제어나 3D 게임처럼 기기 기능과 성능이 중요하다면 네이티브 앱을 검토해야 합니다.

이번 강에서 기억할 것

• PWA는 웹사이트를 홈 화면에 설치해 앱처럼 쓰는 방식이에요.
• 매니페스트는 앱 이름, 색상, 아이콘을 적는 명함이에요.
• 원본 로고 PNG는 사람이 준비하고, 크기 변환과 연결은 클로드에게 맡겨요.
• 이번 성공 기준은 홈 화면 아이콘으로 주소창 없이 열기 하나예요.
• 오프라인 저장이 필요할 때만 서비스 워커와 Serwist를 따로 검토해요.

이런 분께 추천해요

만든 웹사이트를 스마트폰 홈 화면에서 열고 싶은 분께 알맞아요. 앱스토어 공개가 필요 없는 사내 도구나 작은 서비스를 운영하는 분에게도 유용합니다.

참고 링크

• MDN Web Docs - PWA 시작하기 (PWA의 모든 것을 설명하는 공식 문서)
• web.dev - PWA 학습 경로 (구글이 만든 단계별 PWA 강좌)
• Next.js 공식 PWA 만들기 가이드 (영문) (별도 패키지 없이 만드는 지금의 표준 방법)
• Serwist (영문) (오프라인 캐시가 필요할 때 검토하는 도구)
• 오토프로그 랩스 아카이브 - PWA 기초 문서 (우리 아카이브의 PWA 상세 소개)

20강을 마치며

1강에서 개념을 익힌 뒤 기획, 화면, 데이터, 로그인, 오류 해결, 배포, 개선까지 한 흐름으로 경험했어요. 마지막에는 같은 웹사이트를 스마트폰 홈 화면에도 올렸습니다.

이제 새 프로젝트를 시작해도 되고, 지금 만든 서비스의 불편한 점 하나를 골라 개선해도 됩니다. 방향을 말하고, 결과를 확인하고, 고칠 점을 다시 알려 주는 흐름을 계속 쓰세요.

다음 걸음

• 오토프로그 랩스에서 필요한 도구와 자동화 사례를 찾아보세요.
• 혼자 막힌 부분을 함께 풀고 싶다면 오토프로그 교육을 확인하세요.
• 만든 것을 알리는 방법은 『팔리는 바이브 코딩』에서 이어서 볼 수 있어요.
• 질문이나 협업 문의는 Profile & 문의하기에 남겨 주세요.

이메일은 ai@d-onworks.com, GitHub는 digiwood7입니다.

20강까지 함께해 주셔서 감사합니다. 여기서 과정을 마칩니다.