iOS WebView Bottom Navigation 구현

iOS UIWebView를 이용해서 웹앱을 만들고 Safari처럼 하단에 네비게이션 기능을 구현해 보자. Navigation Controller의 Bottom Bar를 이용해서 뒤로가기, 앞으로가기, 새로고침, 홈으로 가기  4개의 기능을 만든다. 특히 아이폰은 안드로이폰에서 제공하는 뒤로가기 버튼이 없기 때문에 웹앱의 경우 사용자들이 불편함을 많이 호소하는데 뒤로가기 뿐만 아니라 일반적으로 브라우저에서 제공하는 앞으로가기, 새로고침, 홈으로 가기 기능을 추가한다면 사용자들이 더 편리하게 앱을 사용할 수 있을것 같다.

우선 Xcode > File > New > Project... 로 <사진 1>과 같이 Single View App으로 프로젝트를 하나 생성한다.

<사진 1>

<사진 2>

<사진 2>는 스토리보드 화면이다. 우측 유틸리티 영역의 하단 필터바에서 webview로 검색을 하면 화면과 같이 2개의 웹뷰가 나타난다. 하나는 Web View이고 다른 하나는 Webkit View이다. 보이는 바와 같이 Web View는 deprecated 라고 표시된다. 예전부터 사용되어 오던 UIWebView인데 더 이상 사용되지 않는다. 좀 더 개선된 Webkit View를 Drag&Drop으로 View영역에 넣고 레이아웃을 적당히 설정한다.

우측 상단의 Assistant Editor를 열어서  ViewController.swift파일을 열고 CTRL키를 누른채 Web View를 마우스로 끌어다가 놓으면 <사진 3>과 같이 다이얼로그창이 열린다. Name을 webView로 입력하고 Connect버튼을 누르면 변수가 자동으로 생성된다.

<사진 3>

<사진 4>와 같이 ViewController에 WebKit을 import하고 viewDidLoad함수에 웹뷰 초기설정을 해준다. 이제 디바이스나 에뮬레이터로 실행을 해서 정상 동작하는 확인한다.

<사진 4>

<사진 5>

웹뷰가 정상적으로 동작을 한다면 다시 스토리보드에서 <사진 5>와 같이 Editor > Embed in > Navigation Controller를 추가해주면 <사진 6>과 같이 Navigation Controller Scene 추가된다. Navigation Controller는 Top Bar와 Bottom Bar 두 개가 있는데 우측 유틸리티 영역 > Navigation Controller > Bar Visibility에서 Shows Navigation Bar 체크를 해제하고 밑의 Shows Tool Bar를 체크해준다.

<사진 6>

<사진 7>과 같이 필터바에서 bar button으로 검색 후 Bar Button Item을 끌어다 Tool Bar에 놓는다. 4개의 기능을 구현할 것이므로 3개를 더 끌어다 놓은 후 <사진 3>에서 했던것 처럼 Assistant Editor를 열어 ViewController.swift파일을 열어서 CTRL키를 누른채 추가한 각 Bar Button Item을 모두 연결해준다. 이름은 back, forward, reload, home으로 입력한다. 이상없이 진행했다면 결과는 <사진 8>과 같이 보인다.

<사진 7>

<사진 8>

이제 각 버튼을 클릭했을때 기능을 구현해보자.

<사진 9>와 같이 Assistant Editor를 열고 Back 버튼을 CTRL키와 함께 에디터로 끌어다 놓으면 열리는 대화창에서 Connection을 Action, Name을 goBack, Type을 UIBarButtonItem으로 하고 Connect버튼을 누른다. 나머지 Forward, Reload, Home버튼도 모두 같은 방법으로 연결해주면 <사진 10>과 같이 보일 것이다.

<사진 9>

<사진 10>

<사진 11>

이제 각 버튼의 액션을 <사진 11>과 같이 코딩하면 모든 작업이 마무리된다. 에뮬레이터를 실행해서 확인해보자. 에뮬레이터 실행화면인 <사진 12>와 같이 홈화면이 보이고 페이지를 몇 번 이동한 후 뒤로가기, 앞으로가기, 새로고침, 홈으로 가기를 차례로 테스트해보자.

<사진 12>

추가적으로 Swipe Gesture를 통해서 뒤로가기, 앞으로가기 기능을 넣어보자. 구현이랄 것도 없다. UIWebView에서는 자체 기능이 없어서 별도로 작업을 해줘야 하지만 WKWebView에서는 <사진 7>에서와 같이 유틸리티 영역 > Web View > Interaction > Back/Forward Gestures 속성을 체크만 해주면 구현된다.