권돌선생님의 블로그

XCode 로 팀 설정을 하다 오류가 생겼다.

내용을 보니, 번들 패키지명이 유니크하지 않고 이름이 겹칠 우려가 있으니

제대로 된 이름을 입력하라는 것이었다.

​

그래서 변경한다.

​

1. General 버튼 클릭, Bundle identifier 입력칸에 제대로 된 패키지명 입력

Xcode 내 General 화면, Bundle identifier 를 수정해주자

2. Signing & Capabilities 버튼 클럭, 서명완료된 것을 확인

Signing & Capabilities 화면, 서명이 완료된 것을 확인할 수 있다.

별 거 아닌 에러지만 처음보면 당황할 수 있다.

당황하지 않고 에러 내용을 잘 확인해보자!

지난 포스팅에

IOS 환경에서 웹뷰를 구현했는 데 문제는 웹뷰에 연결하는 시간이 오래 걸려

사용자가 텅 빈 화면을 볼 수 있다는 게 문제였다.

때문에 지난 포스팅에 이어 프로그레스바 옵션을 추가하겠다.

​

import WebKit
import UIKit

class ViewController: UIViewController, WKUIDelegate,WKNavigationDelegate {
    
    var webView : WKWebView!
    var progressView: UIProgressView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
            let site = "http://도메인주소.kr"
            let url = URL(string: site)
            let request = URLRequest(url: url!)
            webView = WKWebView(frame: self.view.frame)
            webView.navigationDelegate = self
            webView.uiDelegate = self
            webView.load(request)
            self.view.addSubview(webView)
           // 여기서부터 프로그레스바
            progressView = UIProgressView(progressViewStyle: .default) 
            progressView.sizeToFit()
            progressView.frame = CGRect(x: 0, y: 64, width: self.view.bounds.size.width, height: 20)
            self.view.addSubview(progressView)
            self.webView.addObserver(self, forKeyPath: #keyPath(WKWebView.estimatedProgress), options: .new, context: nil)
    }
    override func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer?) {
        if keyPath == "estimatedProgress" {
             progressView.progress = Float(webView.estimatedProgress)
             print(Float(webView.estimatedProgress))
            if Float(webView.estimatedProgress) == 1.0 { // 로딩이 다되면
                progressView.progress = 0 // 0 으로 초기화
            }
        }
     }
}

스타일 관련해서 디테일 한 부분은 공식문서 참고해주시고,

프로그레스바가 100프로 만족되면 0으로 초기화 시키는 로직을 추가하였다.

​

​

끝!

IOS 에서 WebView 를 구현하는 방법은 두가지가 있다고 한다.

​

기본 WebView 와 WK WebView 가 있는 데

​

기본 WebView 는 매우 예전부터 쓰는 방식이고 성능도 그다지 좋지 않아

애플 개발자 센터에서도 권장하지 않아 요즘엔 WK WebView 를 쓴다고 한다.

​

이제 시작해보자.

​

* 프로젝트 생성은 다들 아실테니 생략~

1. View Controller 소스 수정

import WebKit
import UIKit

class ViewController: UIViewController, WKUIDelegate {
    
    var webView : WKWebView!
    
    override func loadView() {
          let webConfiguration = WKWebViewConfiguration()
          webView = WKWebView(frame: .zero, configuration: webConfiguration)
          webView.uiDelegate = self
          view = webView
    }
    override func viewDidLoad() {
        super.viewDidLoad()
        let myURL = URL(string:"http://호출도메인.kr")
        let myRequest = URLRequest(url: myURL!)
        webView.load(myRequest)
    }
}

2. Info.plist 파일 수정 * http 사이트만 해당

나의 경우 http 사이트 였기 때문에 Info.plist 를 수정해야 한다.

1. App Transport Security Settings 추가 
2.위 1번 하위 속성-> Allow Arbitrary Loads

주의할 점은 하위 속성을 추가할 때 제목 앞부분의 화살표를 활성화 시키고 해야 된다는 점이다.

안 그러면 엉뚱한 곳에 생성된다.

​

3. Product -> Run 버튼 실행

​

​

잘 실행된다. 혹시 안되시는 분은 Xcode 의 개발자 서명이 안되있을 수 있으니

​

Xcode 로 개발하다가 빌드를 했더니 저런 에러가 나왔다.

​

알아보니 내가 Xcode로 첫개발을 하다보니 개발자 등록을 안해놔서 생긴 문제라고 한다.

안드로이드 스튜디오는 그런게 없었는데.. 애플은 조금 더 철저한 거 같다.

해결하는 방법을 차근차근 알아보자.

​

​

1 . Xcode 를 눌러서 Prefrences (환경설정) 버튼 클릭

​

2. Accounts 버튼 클릭 후 좌측 하단의 +버튼 클릭

​

3. Apple ID 클릭 후 우측 하단의 Continue 버튼 클릭

4. Apple ID 적고 NEXT 버튼 클릭

5. 우측 하단의 Manage Certificates(인증서 관리) 버튼 클릭

6. 좌측 하단의 + 버튼을 클릭하여 개발환경을 등록하고, 등록이 됐으면 Done 버튼을 클릭하여 설정을

마무리한다.

7. 최종적으로 프로젝트 아이콘을 눌러 Signing & Capabilities 버튼을 클릭 후 team 설정을 해준다.

​

끝.

지난 포스팅에 웹뷰를 구현하는 것을 올렸다.

​

이번 포스팅에서는 웹뷰 설정하는 것을 작성해보겠다.

​

1 . 세팅 변수 설정

mWebView = findViewById(R.id.webView); // 웹뷰 선언
mWebView.setWebChromeClient(new WebChromeClient()); // 웹 크롬클라이언트를 웹뷰에 설정한다.
mWebSettings = mWebView.getSettings(); // 웹뷰에서 webSettings를 사용할 수 있도록 함.

2. 설정 하기

mWebSettings.setJavaScriptEnabled(true); 
//웹뷰에서 javascript를 사용하도록 설정
mWebSettings.setJavaScriptCanOpenWindowsAutomatically(true); 
//window.open() 동작하도록 설정
mWebSettings.setLoadsImagesAutomatically(true);
// 앱에 등록된 이미지를 자동으로 로드하도록 설정
mWebSettings.setUseWideViewPort(true);
// 웹뷰에 wide viewport를 사용하도록 설정함.
mWebSettings.setLoadWithOverviewMode(true);
// 메타 태그 설정
mWebSettings.setDefaultFixedFontSize(14);
// 기본 고정 글꼴 크기
mWebSettings.setSupportZoom(true);
// 화면 줌 기능을 사용할 수 있도록 설정함
mWebSettings.setBuiltInZoomControls(true);
// 화면 확대,축소 사용 여부
mWebSettings.setDisplayZoomControls(true);
// 화면 확대,축소 시 WebView 에서 확대/축소 컨트롤 표시 여부
mWebSettings.setCasheMode(LOAD_NO_CACHE);
// 캐시모드 설정
// LOAD_CACHE_ELSE_NETWORK 기간이 만료돼 캐시를 못 쓸 경우, 네트워크를 사용
// LOAD_CACHE_ONLY 네트웍을 사용하지 않고 캐시로만 사용
// LOAD_DEFAULT 캐시를 사용하고 만료된 경우 네트워크를 사용
// LOAD_NORMAL 기본적인 모드로 캐시를 사용
// LOAD_NO_CACHE 캐시모드를 사용하지 않고, 네트워크를 통해서만 호출
mWebSettings.setDomStorageEnabled(false);
// 로컬 스토리지 사용여부를 묻는 용도로, ex) 팝업창 등을 하루동안 보지않기 기능 사용에 필요함
mWebSettings.setAppCacheEnabled(false);
// 앱 내부 캐시 사용 여부 설정 
mWebSettings.setAllowFileAccess(true);
// 웹뷰내에서 파일 액세스 활성화 여부 
mWebSettings.setUserAgentString(true);
// 앱에서 띄운 웹뷰인지 인지할 수 있도록 설정

더 있는 것 같은 데.. 필요하면 더 추가하도록 하자

기존에 플러터로 웹뷰를 구현했지만 크로스플랫폼의 한계 때문인지,

성능이 비 정상적으로 느려터져서 네이티브 플랫폼(자바)으로 바꿨다.

​

프로젝트 생성은 다 아실테니 생략

​

1. AndroidManifest.xml 파일 수정

MainActivity 파일에 웹뷰를 진행한다는 가정으로 하겠다.

바뀐 부분 소스만 붙여넣기 편하게 적어놓는 다.

향후 앱 번들로 출시할 때 잔에러 처리용이다.

​

2. MainActivity.Java 파일 수정

MainActivity 전체파일

​

3. Run 버튼으로 실행

앱 실행

Run 으로 실행하면 정상적으로 잘 작동한다.

​

다음 포스팅에서는 앱번들 출시에 필요한 Key.store 파일을 안드로이드 스튜디오에서

GUI 환경으로 만드는 방법과, App bundle 파일을 만드는 방법을 알아보겠다.

​

​

​

지난 포스팅에서 M1 맥북기준 KeyStore를 만들었다.

이제 KeyStore 설정을 할 차례다.

​

우선 플러터 프로젝트의 android 폴더 하위에

key.properties 파일을 생성한다. 오타에 주의하자.

​

key.properties 파일 생성

이제 key.properties 에 이 내용을 채워넣는다.

storePassword 와 keyPassword를 입력하는데, 지난 포스팅에서 입력했던 비밀번호를

동일하게 작성하면 된다.

keyAlias 의 경우 지난 포스팅을 확인해보자 .

이 명령어를 보면 upload 란 이름으로 만들었기에 keyAlias 를 upload 라고 작성한다.

storeFile의 경우 지난 포스팅에서 만들었던 upload-keystore.jks 의 파일 경로를 작성한다.

​

다음으로 android/app/build.gradle 파일을 수정한다.

​

android 윗부분에 keystore 프라퍼티를 추가한다.

def keystoreProperties = new Properties()
def keystorePropertiesFile = rootProject.file('key.properties')
    if (keystorePropertiesFile.exists()) {
    keystoreProperties.load(new FileInputStream(keystorePropertiesFile))
    }

​

다음으로 signingConfigs 를 추가한다.

​

​

 signingConfigs {
        release {
        keyAlias keystoreProperties['keyAlias']
        keyPassword keystoreProperties['keyPassword']
        storeFile keystoreProperties['storeFile'] ? file(keystoreProperties['storeFile']) : null
        storePassword keystoreProperties['storePassword']
        }
    }

마지막으로 buildTypes 의 release 부분을 수정한다.

​

signingConfigs.debug -> signingConfigs.release 로 변경한다.

​

이제 모든 설정은 끝났고, 앱번들을 만들어 플레이스토어에 등록하면 된다.

​

앱번들 만드는방법은 이 포스팅을 참고하자 !

JDK 버전 확인

필자는 있기 때문에 저렇게 나오고, 없는 경우

이곳으로 가서 Mac 용 JDK를 다운받는데, 필자는 8버전으로 했다.(개인적으로 가장 안정적인듯)

그다음 터미널에서 Application 을 찾아 jdk 경로로 찾아가야 하는데, user 밑에 jdk가 설치되는 경우도 있고

최상위 경로에 설치되는 경우도 있는데 필자의 경우 최상위 경로에 있어 그 기준으로 하겠다.

cd /
ls -al

최상위 경로에 Applications 폴더

Android Studio.app

보면 글자 사이사이 여백이 있기 때문에 명령어에 싱글쿼터('')를 추가해준다.

설명을 위해 한단계 한단계 썼지만 나머지는 쉬우니 한번에 접근하자.

​

bin 폴더까지 접근하자

이제 Key Tool 을 만들자.

keytool -genkey -v -keystore ~/upload-keystore.jks -keyalg RSA -keysize 2048 -validity 10000 -alias upload -storetype JKS

이렇게 하면 Key를 만들수 있게 되는데, 중간중간 비밀번호/조직명/이름/국가코드 등 입력하게 되는데

차후 다음 단계에서 진행할 때 비밀번호가 필요하니 꼭 외워두자.

​

자 이제 사용자 계정 root1 기준 하위 디렉토리를 확인해보자.

​

이렇게 keystore 파일이 생성되었다.

​

다음 포스팅에서는 KeyStore 파일을 설정해보겠다.

기존에는 구글 안드로이드의 경우에는 앱 출시의 경우

.apk 파일 확장자로 작성했지만, 2021년 구글의 정책 업데이트로

신규 앱의 경우 .aab 확장자로 출시하도록 변경됐다.

​

기존 앱은 .apk 확장자로 가능하지만 나 같은 경우 신규 앱이기에

bundle 파일 제작 명령어를 남긴다.

간단하다. 용량도 엄청 작아졌다.

​