1차 웹서비스 완성
지난 번 포스팅에서 타로봇 1차 웹서비스 완성을 다뤘습니다.
2023.05.06 - [개발, 코딩/타로봇 개발] - ChatGPT를 이용한 인공지능 타로술사 타로봇 개발기 (Feat. 조코딩님 강의)
이후 자잘한 안내 멘트, CSS 등의 수정이 있었으나 큰 틀은 거의 같은 상태입니다.
어렵게 만든 웹페이지를 버리고 안드로이드 앱을 개발하기는 아까워서 알아보니 React Native의 웹뷰를 사용하면 웹페이지 URL만 교체하여 쉽게 앱을 만들 수 있다는 것을 알 수 있었습니다.
아직 완성은 못하였으나 계속 반복하여 테스트를 하기 위해 필요한 개발 환경 및 빌드 순서를 기억하기 어려워서 간단하게나마 정리를 해보려고 합니다 (Mac이 없는 관계로 Windows 환경으로만 정리하였습니다)
해당 과정은 아래 조코딩님 강의 영상을 참고하여 진행하였습니다.
https://www.youtube.com/watch?v=yjPl8Injlbw
Node.js 설치
저의 경우 이미 웹서비스의 백엔드 구축을 위해 설치하였으나 그렇지 않은 분들은 Node.js 설치가 필요합니다.
기본값으로 진행하여 설치해주시면 됩니다.
Visual Studio Code 설치
https://code.visualstudio.com/
수많은 언어를 지원하고 편리한 확장 플러그인과 Git 지원 등으로 엄청나게 편리한 통합 개발 환경입니다.
이것 또한 기본값으로 설치 진행하면 됩니다.
Git 설치
https://git-scm.com/download/win
이것 또한 기본값으로 설치 진행하시기 바랍니다.
Expo 가입 및 설치
일반 사이트처럼 가입하시면 됩니다.
요즘엔 크롬 브라우저 등에서 로그인 정보를 기억해주므로 ID/PW를 기억하지 않는 경우가 많은데 Expo 가입 정보를 커맨드라인을 통해 입력하여 로그인해야 할 일이 있으므로 꼭 기억해놓으시기 바랍니다.
환경 구성 및 expo-cli, eas-cli 설치, 설정
환경 구성
우선 웹뷰앱을 만들 폴더를 영문으로 원하는 위치에 생성 후 해당 폴더를 우클릭하여 CODE로 열기를 선택합니다.
폴더를 신뢰하겠냐는 메세지를 확인 후 수락합니다.
상단 메뉴의 터미널(T) 선택 후 새 터미널을 눌러줍니다.
VSCODE 하단에 분할 화면이 만들어지며 터미널이 열립니다.
기본적으로 powershell로 열리는데 권한 문제 등이 있기 때문에 CMD 창으로 다시 열어줍니다.
expo-cli 설치
npm install -g expo-cli
expo를 커맨드라인에서 사용할 수 있도록 설치합니다.
npm 명령이 실행되지 않으면 Node.js 설치를 다시 확인해야합니다.
-g 옵션은 해당 폴더/프로젝트 외에도 사용할 수 있도록 하는 전역 설치 옵션입니다.
자주 사용되므로 expo와 eas는 -g 옵션을 주어 전역으로 설치하길 권장드립니다.
eas-cli 설치
npm install -g eas-cli
같은 방법은 eas-cli를 설치합니다.
eas는 빌드를 위한 것이라고 생각하면 편할 것 같습니다.
eas 로그인
eas login
위 명령어를 입력한 뒤 expo.dev에 가입했던 ID와 PW를 입력하여 로그인합니다.
로그인 완료 메세지를 확인합니다.
프로젝트 생성
npx create-expo-app my-app
이번엔 npx 명령어인 것에 주의합니다.
프로젝트를 생성하기 원하는 폴더가 맞는지 터미널에서 경로를 다시 한번 확인한 뒤 위의 명령을 입력합니다.
'my-app' 이라는 이름은 원하는 앱 이름으로 변경하시면 됩니다.
VSCODE 좌측의 탐색기를 보면 자동으로 생성된 프로젝트 파일 및 폴더 구조를 확인할 수 있습니다.
cd my-app
이후 모든 명령어는 생성한 프로젝트 폴더 내에서 이루어져야 하므로 위와 같이 cd 명령을 통해 해당 폴더로 이동합니다.
eas 빌드 구성
eas build:configure
프로젝트 폴더 내에 들어와있는 것을 확인한 상태에서 위 명령을 실행해줍니다.
중간에 콜론(:) 기호를 유의하셔서 입력하시면 됩니다.
expo 아이디와 프로젝트 폴더명으로 자동으로 EAS 프로젝트 이름을 추천해주니 특별한 경우가 아니라면 그대로 사용하면 됩니다.
Windows PC 환경의 경우 iOS 빌드가 불가능하므로 화살표 키를 움직여서 Android를 선택한 뒤 엔터키를 입력합니다.
EAS 빌드 준비 완료 메세지를 확인합니다.
빌드를 위한 eas.json 파일 수정
{
"build": {
"preview": {
"android": {
"buildType": "apk"
}
},
"preview2": {
"android": {
"gradleCommand": ":app:assembleRelease"
}
},
"preview3": {
"developmentClient": true
},
"production": {}
}
}
VSCODE 좌측의 탐색기에서 eas.json을 선택한 뒤 모든 내용을 위의 코드로 바꿔줍니다.
변경 후 Ctrl+S를 눌러서 저장해줍니다.
WebView 컴포넌트 설치
npx expo install react-native-webview
웹뷰를 사용한 앱을 만들기 위해 WebView 컴포넌트를 위 명령어를 통해 설치합니다.
기본 WebView 코드 입력
import * as React from 'react';
import { WebView } from 'react-native-webview';
export default function App() {
return (
<WebView
style={styles.container}
source={{ uri: 'https://expo.dev' }}
/>
);
}
VSCODE 좌측의 탐색기에서 App.js 를 선택한 뒤 위 코드를 입력해줍니다.
다음과 같이 기본 코드가 만들어져있을텐데, style 관련 코드는 남겨두는 것이 좋습니다.
사용하지 않는 첫줄의 import 코드와 두번째 줄의 Text, View는 삭제합니다.
아래는 변경한 코드입니다.
import { StyleSheet } from 'react-native';
import * as React from 'react';
import { WebView } from 'react-native-webview';
export default function App() {
return (
<WebView
style={styles.container}
source={{ uri: 'https://expo.dev' }}
/>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
원하는 웹페이지 주소 적용
코드 중 위의 부분만 원하는 웹페이지의 주소로 변경해주면 됩니다.
저는 제가 만든 타로봇 웹페이지의 주소를 입력하였습니다.
변경 후 Ctrl + S 를 눌러서 저장해줍니다.
테스트용 apk 파일 생성을 위한 eas build
eas build -p android --profile preview
위와 같은 명령어를 입력하면 테스트용 apk 파일을 생성하기 위한 빌드 과정이 진행됩니다.
실제 구글 스토어에 출시를 하기 위해서도 필요한 ID로, 일반적으로 'com.회사명.앱이름' 의 구조로 사용합니다.
Expo ID와 현재 프로젝트명을 기반으로 ID를 추천해주니 그대로 엔터를 입력하면 자동 적용됩니다.
서버 대기열에 EAS 빌드가 들어간 뒤 잠시 후 빌드가 진행됩니다.
빌드 완료 및 테스트
빌드가 완료된 이후 expo.dev에 임시로 만들어진 apk 다운로드 링크와 함께 안드로이드 에뮬레이터의 실행 여부를 묻습니다.
apk 파일 링크 전달 및 설치, 실행
해당 apk 링크를 카톡이나 구글 드라이브 등을 통해 실제 안드로이드용 스마트폰으로 전달한 뒤 브라우저를 통해 접속하면 빌드된 apk 파일을 다운로드 받을 수 있게 됩니다.
스마트폰에 설정된 정책에 따라 보안 경고가 뜨면서 설치 여부를 몇차례 확인하게 되는데 모두 무시하고 설치를 진행해주면 본인의 스마트폰 또는 태블릿 등의 안드로이드 기기에서 동작을 직접 확인해볼 수 있습니다.
안드로이드 에뮬레이터 설치 및 실행
아직 확실하진 않은데, 제가 사용하는 다른 환경에서는 안드로이드 스튜디오가 설치되어있음에도 이 단계에서 계속 오류가 발생하였습니다.
안드로이드 스튜디오가 아예 설치되어있지않더라도 자체적으로 실행이 가능한 것인지, 선택 가능한 에뮬레이터 종류가 항상 저렇게 표시되는 것인지 아니면 환경에 따라 다른 것인지는 조금 더 확인이 필요한 부분입니다.
저는 첫번째 것으로 선택을 해보았습니다.
화면 정렬에 약간 문제가 있어보이나 어쨌든 다음과 같이 정상적으로 실행되었습니다.
실제 앱 배포를 위해서 최소한 앱종료 기능이나 (현재는 뒤로 가기를 누르면 그냥 백그라운드에 남아있는 상태로 꺼짐) 뒤로 가기 등의 네비게이션 버튼을 추가해야할 것 같습니다.
마치며
웹페이지 주소 입력을 제외한 99%의 과정이 모두 그대로 따라하면 되는 부분이나 매번 기억나지 않는 부분을 유튜브 영상을 통해서 찾다보니 조금 힘들어져서 이렇게 정리를 해보았습니다.
유튜브 영상과 순서가 조금 다를 수 있는데 제 나름대로 최적화를 시킨 것이니 (실제로 다시 처음부터 해보면서 기록, 정리하였습니다) 자잘한 설명은 대충 넘기시고 순서대로 따라만 해보신다면 일단 기본적인 웹뷰 앱 빌드까지는 성공하실 것으로 생각됩니다.
1차적으로 여기에 간단한 네비게이션 정도만 추가하여 구글 스토어 배포를 해보려고 합니다.
성공하면 다시 포스팅하도록 하겠습니다.
'개발, 코딩 > 웹사이트, 앱 개발' 카테고리의 다른 글
앱스토어 출시 후 정책 위반으로 앱 삭제 및 광고비 증발 (5) | 2023.08.16 |
---|---|
구글 플레이 스토어 출시를 위한 AAB (Android App Bundle) 빌드 방법 (4) | 2023.05.15 |
비로그인 무료 ChatGPT 서비스 - FreeGPT (맞춤형 사전 프롬프팅) (0) | 2023.05.14 |
화면 크기로 모바일, 데스크탑 버전 구분을 위한 @media 쿼리가 인식되지 않을 때 (0) | 2023.05.07 |
ChatGPT를 이용한 인공지능 타로술사 타로봇 개발기 (Feat. 조코딩님 강의) (1) | 2023.05.06 |