비개발자의 하이브리드앱 개발 도전기 with 챗GPT

챗GPT와 함께한 비개발자의 하이브리드앱 개발 도전기를 정리합니다. 저는 개발 언어를 모릅니다만 챗GPT를 이용해서 업무에 필요한 파이썬 자동화를 성공한 적은 있습니다. 조잡한 하이브리드앱 제작에는 처음 시행착오로 인한 실패 시간을 포함해 약 10시간 정도가 투입된 것 같습니다. 챗GPT가 동일한 오류를 무한으로 루프하는데 개발을 몰라서 답답한 적도 있습니다만 조잡하지만 앱을 만드는데는 성공했습니다.

거북이 미디어 하이브리드앱 제작 ver1 완료 화면

아래와 같은 과정을 거쳐 거북이 미디어의 원시적인 하이브리드앱 제작이 완료됐습니다. 남은 건 구글 플레이에 개발자 등록한 후 앱 등록 신청하는 것입니다.

개발 지식이 전무한 상태에서 그림판으로 만든 조잡한 기획서와 챗GPT를 통해 하이브리드앱 제작한 방법을 공유드립니다.

거북이 미디어 하이브리드앱 개발 도전기 - 버전1 — 거북이 미디어 하이브리드앱 개발 도전기 – 버전1

하이브리드앱 개발 목표

내 블로그를 하이브리드앱으로 제작해서 구글 플레이에 론칭한다
화면 하단에 홈탭, 게시판탭, 검색탭, 더보기탭을 고정해서 이동을 편하게 한다
마지막 단계에서 앱에서 뒤로가기 및 앱 종료, 오프라인 시 경고창, 앱 버전 표시 기능을 추가함

하이브리드앱 개발을 위한 기술 구조(윈도우즈 OS 기준)

명령 프롬프트(CMD) : 전체 작업은 윈도우즈에 기본 탑재된 명령프롬프트(CMD) 창을 통해 진행
Node.js : 앱 개발에 필요한 기본 환경. 프로젝트 초기화와 도구 실행에 사용
Capacitor : 기존 웹사이트를 앱으로 감싸는 역할을 함. Cordova보다 안정적이고 현대적
Ionic (Angular 없이) : Ionic은 UI 구성을 위해 사용. Angular는 제외하고 HTML/CSS로만 구성
Android Studio : 실제 안드로이드 기기 또는 에뮬레이터에서 앱을 빌드하고 테스트
VS Code : HTML, CSS, 설정 파일들을 작성하고 수정하는 코드 편집기
Java JDK : Android 앱을 컴파일하는 데 필요한 필수 도구

※ 처음에는 Ionic + Cordova로 시도했지만 크롬 웹뷰 연결 등에서 문제가 발생 → Capacitor로 전환해 성공적으로 앱 제작

하이브리드 앱 개발 프로세스 요약

1단계: 기본 프로그램 설치

Node.js, Android Studio, Java JDK, VS Code 설치
환경변수 설정 및 테스트까지 완료
비개발자 입장에서는 내 휴대폰에서 직접 테스트할 수 있도록 폰의 설정에서 개발자도구 디버깅을 해제하면 단계별로 제대로 작동하는지 확인할 수 있었음

2단계: 앱 제작 순서

프로젝트 기본 세팅

gobookiapp라는 이름의 앱 개발 프로젝트 폴더 생성
필요한 기본 라이브러리 설치 (Capacitor 등)

Capacitor 환경 설정

capacitor.config.ts 파일에 앱 이름과 ID 설정
- 앱 이름: GobookiApp
- 앱 ID: net.gobooki.app (도메인을 거꾸로 구성)
웹 파일이 들어갈 위치로 www/ 폴더 지정

하단 탭 UI 만들기

HTML과 CSS만 사용해서 하단 탭 메뉴 직접 구성
각 탭은 <iframe>을 사용해 웹 페이지를 앱 안에 띄우는 방식

탭 이름	연결 주소
홈	https://gobooki.net
게시판	https://gobooki.net/forum
검색	직접 만든 `search.html` (구글 애드센스 검색 포함)
더보기	`more.html` (앱 정보, 버전 등 텍스트 기반 화면)

웹 리소스 배치 (www 폴더)

www/index.html에 전체 탭 구조 및 iframe 작성
필요 시 search.html, more.html 추가로 생성
오프라인 감지, 앱 종료 처리, 버전 표시 등 기능도 HTML에 구현

Android 플랫폼 연동

Capacitor로 안드로이드 플랫폼 추가
Android Studio에서 열어 실제 기기 또는 에뮬레이터에서 테스트할 준비 완료

Android 앱 빌드 및 실행

Android Studio에서 앱 실행 확인
앱 이름, 아이콘, 스플래시 화면 설정도 반영
검색, 탭 이동, 앱 정보, 오프라인 대응 등 기능 모두 정상 확인

1차 앱 완성 후 기능 고도화

뒤로가기 처리: iframe 내부 페이지가 존재하면 뒤로 이동, 아니면 앱 종료
오프라인 안내창: 네트워크가 끊겼을 때 사용자에게 경고 메시지 표시
앱 버전 자동 표시: 더보기 화면에서 Capacitor를 통해 실제 버전 표시
검색탭 : 구글 애드센스의 검색 기능을 이용하려 했지만 앱 상단의 광고와 넓은 간격으로 데스크톱과 피시에서 너무 하단에 검색이 위치함. 따라서 검색 페이지는 광고가 없도록 설정(애드센스 자동광고에서 처리 가능)

※ 로딩 중에 “로딩 중” 글과 아이콘 나오는 기능을 구현하려고 했지만 에러가 계속되서 이건 포기함

3단계 : 구글 플레이에 앱 등록하기(진행 중)

단계	설명
1. AAB 파일 만들기	Google Play에 업로드할 앱 파일 생성 (APK 아님)
2. 앱 정보 입력	앱 이름, 설명, 스크린샷 등 작성
3. 콘텐츠 등급, 타겟 설정	연령대, 광고 포함 여부 등
4. 정책 문서 추가	개인정보처리방침 URL 등
5. 검토 제출	검토(1~7일 소요), 승인되면 출시