[iOS] 애플리케이션 개발 프로젝트 6주차

1월 12일에는 여섯번째 미팅을 진행했다!
이번 미팅에서는 웹사이트의 HTML 파일을 앱에 표시하는 과정을 진행해보았다.

1. 웹 페이지 표시

이 단계에서는 앱 실행 시 회색 페이지 대신 애플 웹사이트가 표시되도록 다음 과정을 진행해보자. 다음 링크는 웹페이지를 표시할 수 있는 WKWebView 클래스에 대한 애플 공식 문서이다.

1. WebViewController.swift 파일을 위 링크(WKWebView 클래스 문서) 중간에 나오는 예제 코드와 똑같이 수정한다. 아래 이미지에서 파랗게 표시된 부분이 추가되는 코드이다.
   
2. 앱을 실행(►)해 애플 웹사이트가 나타나는 것을 확인한다.

2. HTML 파일 추가

웹사이트 대신 직접 작성한 컨텐츠를 html로 앱에 저장해 사용자에게 보여줄 수 있다. 이 단계에서는 노션에 작성한 컨텐츠를 html로 내보낸 후 Xcode 프로젝트에 추가한다.

1. 노션에 작성한 컨텐츠 페이지 오른쪽 상단의 더보기(...) 버튼 > 내보내기 > 하위 페이지 포함 > 내보내기를 클릭한다
   
2. 다운로드 받은 파일을 압축 해제 > 폴더명을 website로 변경 > 앱에서 보여줄 파일명을 index.html로 변경한다.
   
3. Bright 폴더에서 오른쪽 클릭 > Add Files to Bright 선택
   
4. index.html 파일이 포함된 폴더(website) 선택 > Create folder references 선택 > Add 버튼 클릭
   

3. HTML 파일 표시

1. WebViewController.swift 파일 25~27번째 줄 (a)코드를 (b)코드로 변경한 후 저장한다.

(a) 웹페이지를 요청해서 표시하는 코드

let myURL = URL(string:"https://www.apple.com") // myURL은 문자열 https://www.apple.com 의 URL형식
let myRequest = URLRequest(url: myURL!) // myRequest는 myURL요청해서 받은 것
webView.load(myRequest) //webView에 myRequest 표시하라

(b) html 파일을 불러와서 표시하는 코드

let myURL = Bundle.main.url(forResource: "index", withExtension: "html", subdirectory: "website")! // myURL은 파일 시스템의 wesite 폴더에 있는 index.html
webView.loadFileURL(myURL, allowingReadAccessTo: myURL) //webView에 myURL을 표시하라

2. 앱을 실행해(►) html 파일이 표시되는지 확인
   

4. 온보딩 마지막 페이지를 스와이프하면 새로 만든 화면으로 이동하도록 처리하기

1. OnboardingViewController.swift 82번째 줄에 아래의 코드를 추가한다.

func onboardingWillTransitonToLeaving() {
            
  let storyBoard : UIStoryboard = UIStoryboard(name: "Main", bundle:nil) // storyBoard는 Main.story 보드
  let nextViewController = storyBoard.instantiateViewController(withIdentifier: "WebView1") // nextViewController는 WebView1이라는 이름을 가진 뷰컨트롤러
  nextViewController.modalPresentationStyle = .fullScreen // nextViewController를 표시하는 형식은 풀스크린
  self.present(nextViewController, animated:false, completion:nil) // newViewController를 애니메이션없이 표시하라         
}

2. 스토리보드에서 WebViewController 선택 > 아이덴티티 인스펙터에서 Storyboard ID에 WebView1 입력
   
3. Entry point 화살표를 onboarding 페이지로 이동
   
4. 앱을 실행한 후 온보딩 페이지를 스와이프해 마지막 페이지에 웹페이지가 표시되는지 확인한다.