[iOS] WebView로 Hybrid 앱을 만들어보자!

안녕하세요 :D

오늘은 WebView로 Hybrid 앱을 만들어보도록하겠습니다!

Hybrid 앱이란 앱과 웹이 결합되어있는 앱을 말해요!!

그럼 같이 만들어볼까요?!

---

실행 영상

먼저 실행 영상부터 살펴보겠습니다 :ㅇ

 

 

 

 

---

Outlet 구성

 

 

위 실행 영상에서 보았듯이 이 프로젝트에서는 웹 페이지로 이동하는 버튼들과 종료, 리턴, 전, 후 처리를 해주는 버튼, 

Url을 적어줄 TextField,

Web 화면을 띄워줄 WKWebView,

loading 부분을 맡는 ActivityIndicator 으로 구성했습니다.

 

loadWebPage 함수 

 

웹 페이지 로드하는 함수를 볼까요?? 

이 loadWebPage는 다른 기능을 수행할때도 계속 사용될 친구에요!

URLRequest를 사용하여 WebView.load에 로드해주고있습니다.

 

 

해당 웹 페이지로 이동하는 버튼

해당 버튼을 누르면 웹 페이지로 이동하도록 되어있다고 했는데, 

어떻게 구성되어있는지 살펴 봅시다!

 

 

아주 간단하게 위에 만들어놨던 loadWebPage를 호출해서 주소 값을 넘겨주고 있습니다! 

 

 

웹 주소를 입력해서 이동하기

이번에는 TextField에 주소를 입력해서 이동할 수 있는 기능을 구현해보겠습니다.

아래 이미지처럼 Go 버튼을 누르면 TextField에 적은 주소로 이동하도록 만들었어요!

평소에 웹 사이트에서 https:// 나 https://를 치지 않고도 해당 사이트로 잘 이동 했었죠?

checkUrl 함수가 그 기능을 합니다!!

자동으로 https://www를 적어주어서 daum.net 혹은 naver.com / google.com 을 적어도 웹페이지가 잘 나오도록 말이죠!

 

정지, 재부팅, 이전으로, 이후로 버튼

이 부분은 굉장히 어려워 보이지만, WebView에 다 만들어져있어요!!

그냥 함수를 불러와서 사용해주면 됩니다! 

 

HTML 에 링크 삽입하기

WKWebView에는 없는게 없는 것 같아요....

HTML load해주는 loadHTMLString 함수를 선언해주고 위에 htmlString 값을 넘겨줬습니다!

 

파일 내부에 HTML 코드를 작성하고 파일 자체를 불러오기

파일을 데리고 와야하는 부분이라 Bundel이라는 명령어를 사용했어요! 

이미지에 설명해 놓았지만 자세히 알고 싶은 분들을 위해 링크 연결해 놓겠습니다. Developer 서류 참고하세요!

파일 이름은 htmlView 타입은 html !

fileURLWithPath로 파일의 경로도 넣어줍니다!!

 

 

UIActivityIndicatorView 로딩 중일때 나오는 표시

 

UIActivityIndicatorView을 사용하려면 WKNavigationDelegate 받아와야합니다!

각각 didCommit, didFinish, didFail 등을 설정해주었어요!

 

 

 

---

마치며

Hybrid 앱이 정말 많다고 하더라구요!

편리하기도 하고 어렵지 않아서? 

이번에 만들어보니까 정말 쉽고 재미있었던 것 같아요.

WebView를 사용해서 여러가지 많이 해보고 싶어요!!!

 

이 프로젝트 말고 다른 Web을 이용해서 만든 프로젝트들도 많이 있어요!

아래 Git링크로 들어가시면 다양한 프로젝트가 있으니 궁금하신 분은 참고하세요 ㅎㅎ :D

 

https://github.com/sojin2/TIL/tree/main/Lecture/Academy/Day04

GitHub - sojin2/TIL