안드로이드] 웹뷰 어플 제작 쉽게 설명한 곳

웹이앱을만났을때 | 2021.07.06 17:40 | 조회 1187

템플릿 받기

https://github.com/slymax/webview

 

slymax/webview

a template project for android studio. Contribute to slymax/webview development by creating an account on GitHub.

github.com

클론을 따거나 ZIP파일을 받아 적당한 위치에 두고, 안드로이드 스튜디오에서 불러온다.

 

템플릿을 불러오면 이런 식의 화면이 나와있을것이다. 템플릿 수정 작업에서는 크게 네 가지를 알면 된다.

1. 노랑 : 빌드 메뉴 : 설정을 마치고 APK파일을 뽑아낼 때 사용

2. 빨강 : 프로젝트 파일 목록 : 이 포스트에서 가리키는 파일들은 모두 여기서 선택할 수 있다.

3. 초록 : 코드가 보여지는 공간 : 2번(빨강) 공간에서 더블클릭하면 이 공간에 열린다.

4. 보라 : 뭐 많이 표시해주는 공간 : 안드로이드에 빌드 시켜놓으면, 지금 뭐하고있는지 여기서 보여준다.

 

 

유사 앱 만들기 과정 : 작업 Section


템플릿 내용 수정하기

패키지 이름, 앱 이름, 그리고 내가 보여주고픈 웹서비스URL. 세 가지를 차례로 수정하자.

각각의 항목에 대해 💬시작✔️으로 표시해두었다.

 

💬 '[app]아래의 패키지 이름' 설정시작...

(좌) 체크상태 / (우) 체크 해제상태

  먼저 [app]아래의 패키지 이름을 원하는 대로 바꾸어주자. 왼쪽 사진의 좌측 초록박스에 보이는 'com.example.app'이 현재 패키지 이름이다. 중간의 example을 다른 이름으로 바꾸어줄 것이다. 이 패키지 이름은 프로젝트의 여러군데서 쓰이고있다. 무식하게 우클릭-이름바꾸기를 하면 기나긴 고통의 길을 걷게 될 것이다.

  왼쪽 사진의 [톱니바퀴]-[Compact Middle Packages 체크 해제] 과정을 수행한다. 그러면 묶여있던 com.example.app이 오른쪽 사진처럼 3단계의 디렉토리로 풀려보이게 된다.

 

(좌) Rename선택 방법 / (우) Rename 창

  왼쪽 사진처럼 [example 우클릭] - [Refactor] - [Rename]으로 창을 띄운다. 그 창에서 오른쪽사진처럼 example을 대체할 이름을 적어넣고, [Refactor]를 클릭하면 안드로이드 스튜디오가 열심히 패키지이름을 전부 바꿔준다.

 

잠시 후 [app]아래의 모든 com.example.app이 com.beermaster.app으로 바뀐 것을 확인할 수 있다.

✔️ '[app]아래의 패키지 이름' 설정 끝!

 

💬 '[gradle]아래의 패키지 이름' 설정시작...

build.gradle(Module: Webview-master.app)이다. 그 위에있는 파일이 아니다!!

패키지 이름 설정의 마지막이다. [Gradle Scripts]아래에 있는 app레벨★의 build.gradle을 열고, defaultConfig.applicationId를 변경해준다. 이미 했던 것처럼, example부분을 원하는 이름으로 바꾸어준다.

✔️ '[gradle]아래의 패키지 이름' 설정 끝!

 

💬 '앱 이름' 설정시작...

(좌) 앱 설치화면 / (우) 설치된 앱들

설치할 때와 설치 후 표시되는 '앱 이름'을 수정하자. 템플릿의 기본값은 Webview App이다.

 

(좌) strings.xml / (우) AndroidManifest.xml

[app]-[res]-[values]-[strings.xml] 파일 안에서 WebView App부분을 원하는 이름으로 바꾸어주면 된다.

참고로, 이 내용은 [app]-[manifests]-[AndroidManifest.xml]의 application, activity에 각각 적용된다.

✔️ '앱 이름' 설정 끝!

 

💬 '앱 이름' 설정시작...

앱에 웹서비스를 연결하는 두근대는 순간

이제 우리가 이미 서비스하고있는 웹프로그램의 url을 넣어주면, 아이콘을 제외하고는 모든 작업이 끝난다.

[app]-[java]-[com]-[우리가 지은 이름]-[app]-[MainActivity.java]로 들어가, 24번째 줄 주석을 풀어준다.

그 다음, 인수로 웹서비스의 url을 넣어준다.

✔️ '앱 이름' 설정 끝

 

템플릿 아이콘 설정하기

(좌) 사용할 이미지 / (우) 아이콘을 넣어줄 디렉토리

  우선 512x512px의 이미지 파일이 있어야 한다. 그림판이든 일러스트든 잘 그려서 가져오자. 원래같으면 모든 크기와 모양의 아이콘에 대응해서 열심히 작업해야하겠지만, 안드로이드 스튜디오는 512x512px이미지만 냅다 박으면 알아서 다 만드는 기능을 제공한다.

  오른쪽 사진에 보이는 [app]-[res]-[mipmap]-[ic_launcher]안에 아이콘을 집어넣어줄 것이다.

 

(좌) Image Asset 찾아가기

[ic_launcher 우클릭] - [New] - [Image Asset]을 눌러 설정창을 띄운다

 

(좌)Configure / (우)Confirm

다른 것은 건들필요 없고, [Path]에서 준비해둔 512x512px 이미지를 불러온뒤 [Next]-[Finish]로 설정창을 닫는다.

 

만든것들 깃에 추가할지 말지 물어보는 내용

"방금 니가 던진 이미지로 이거저거 많이 만들어놨는데, Git에 추가할까?" 하고 물어보는 내용이다. 추가하기를 원하면 [Add]만 계속 누르면 된다. 적당한 순간에 언젠간 닫힌다. 원하지 않으면 그냥 캔슬 눌러버리면 된다. 여기까지 왔다면, 이제는 빌드과정중 에러와의 싸움만 남았다.

 

 

유사 앱 만들기 과정 : 배포 Section


서명키 만들기

이제 실제로 APK파일을 뽑아볼 순간이다.

 

  [Build]-[Generate Signed Bundle / APK]로 창을 열어준다. 이 포스트에서는 APK를 기준으로 설명할 것이므로, 아래의 APK에 체크하고 넘어간다.

 

(좌)에서 Create New를 누르면 / (우)가 나타난다.

  넘어왔다면, 일단 앱에 사용되는 Key를 새로 만들면 된다. [Create new]를 눌러 오른쪽사진처럼 물흐르듯 빈칸을 채워주면 된다. 오른쪽 사진에서 이유는 잘 모르겠지만, 클릭과 키보드입력이 전부 안먹힐 때가 자주 있다. 그럴땐 다 끄고 [Build]-[Generate Signed Bundle/APK]부터 시작하는게 빠르다.

  New Key Store 창에서 설정한 Key store Password, Alias, Key Password 세 가지를 잘 기억해두어야 한다.

 

서명된 APK 만들기

Key를 잘 만들었다면, 비밀번호와 Key alias를 입력하고 다음으로 넘어간다.

Build Variants는 release를 선택하고, Signature Versions은 V1, V2 둘 다 체크한다. 개발과정에서 V2만 체크를 한 적이 있는데, 구글플레이에 올라가지 않는 현상을 겪었다.

[Finish]를 누르면 프로젝트로부터 Apk를 추출하기 시작한다.

 

(좌) Apk가 잘 뽑힌 로그 / (우) 잘 뽑힌 Apk 실물 영접

  왼쪽에는 Build로그, 오른쪽에는 Event Log를 띄워두고 보면 에러잡기에 도움이 된다. 이 화면과 같이 나오면 별문제없이 잘 완료된 것이다.

  뽑힌 Apk가 있는 위치는 프로젝트 폴더 아래의 app/release에 'app-release.apk'라는 이름으로 있다. 이게 이걸 핸드폰에 옮겨서 설치해보면 된다. 에뮬레이터로 돌릴 수도 있지만, 여기에 대한 설명은 굳이 여기에 적지 않는다.

 

SDK를 설치하지 않아 일어나는 에러

Gradle sync failed: 
com.android.tools.idea.gradle.project.sync.idea.issues.SdkPlatformNotFoundException: 
Module: 'app' platform 'android-29' not found

이건 그냥 필요한 버전의 SDK를 깔아주면 된다. 저 오류의 경우 'android-29'를 못찾는다고 했으니, 사진에서 API Level이 29인 'Android 10.0 (Q)'를 깔면 된다.




출처 : https://studioplug.tistory.com/370
facebook twitter
287개(1/15페이지)
강좌
번호 제목 글쓴이 조회 날짜
287 PTR 등록방법 카페24 웹이앱을만났을때 224 2022.05.10 11:41
286 [jquery] 소스상 class 명 변경하기 웹이앱을만났을때 485 2021.09.15 16:49
285 centos 회사] 로그 파일 쉽게 삭제하는 법 웹이앱을만났을때 802 2021.07.27 15:13
284 centos 회사] 리눅스 정기 쉘 /etc/cron.daily 웹이앱을만났을때 631 2021.07.27 15:09
283 centos] php 소스 그대로 보이는 경우 웹이앱을만났을때 693 2021.07.27 11:39
282 centos ] ftp 설정 웹이앱을만났을때 711 2021.07.26 23:33
281 엣지 브라우저 검색기록 지우기 웹이앱을만났을때 680 2021.07.26 15:23
280 centos] 특정사용자만 접근통제 웹이앱을만났을때 504 2021.07.24 09:30
279 centos] 시간 조정하기 웹이앱을만났을때 528 2021.07.23 09:39
278 ajax 이용한 데이타 저장하기 웹이앱을만났을때 426 2021.07.16 15:52
277 [centos] ssl 설치 도메인 구성하는 파일 웹이앱을만났을때 590 2021.07.15 15:09
276 mod_ssl 설치하기 웹이앱을만났을때 612 2021.07.15 14:03
275 [centos] 업데이트 및 설치 안되는거 해결 웹이앱을만났을때 844 2021.07.15 14:00
274 폴더권한 부여 및 사용자 추가 웹이앱을만났을때 405 2021.07.12 11:38
273 umber_format() expects parameter 1 to be 웹이앱을만났을때 520 2021.07.09 16:18
272 ERR_CLEARTEXT_NOT_PERMITTED 웹이앱을만났을때 480 2021.07.06 18:12
>> 안드로이드] 웹뷰 어플 제작 쉽게 설명한 곳 웹이앱을만났을때 1188 2021.07.06 17:40
270 PHP] 오늘일 기준 한달 일주일 전 웹이앱을만났을때 489 2021.06.30 16:32
269 centos] 일정 시간에 명령어 실행 웹이앱을만났을때 674 2021.06.30 15:43
268 number_format 오류 해결법 웹이앱을만났을때 638 2021.06.28 16:27