[iOS 앱 개발 - Swift] Gesture Recognizer

이번에 공부한 내용은 아이폰과 아이패드에서 터치로 할 수 있는 다양한 동작들을 인식시키는 방법인 Gesture Recognizer입니다. 한 손가락 터치, 두 손가락 터치, 꼬집기(핀치), 회전, 스와이프 등의 동작에 대해 인식시키는 여러가지 기능이 구현되어 준비되어있고, 우리가 할 일은 이걸 사용하는 방법을 알고 적재적소에 이용하는 것이죠! 그게 개발자가 하는 일이죠 ㅋㅋㅋ

 

이 내용을 공부하면 우리가 흔히 "자연스럽고 익숙하다"라고 말하는 좋은 사용자 경험을 만들 수 있습니다. 모달 화면 중에 백그라운드를 터치하는 것으로도 dismiss 시킬 수 있다던지, 스와이프 동작으로 네비게이션 컨트롤러에서 뒤로 돌아갈 수 있다던지 등의 기능을 추가할 수 있어요. 이 부분에 대해 공부해두는건 꽤나 유용하고 잘 만들었다는 느낌을 주는 앱을 개발할 수 있다고 생각해요!

 

이 포스팅에서 다루는 내용과 예제는 edwith의 부스트코스 iOS 앱개발 강의에서 다루는 내용입니다. 전체 강의 모두 무료이고 강사분도 iOS 앱개발을 오래 해온 + 기술블로그를 운영해오던 분이기에 내용들을 예제를 통해 쉽게 잘 설명해줘서 매우 좋은 것 같아요! 간단한 앱 하나를 만들기 위해 필요한 내용들을 쭉 예시와 문서를 가져와서 알려주고, 프로젝트로 앱 하나를 만들면서 내용들을 공부할 수 있게 되어있어요. 확실히 만들면서 꾸준히 배우니 쉽고 빠르게 언어와 개발에 대한 지식을 얻을 수 있는 것 같네요 ㅋㅋㅋ

---

Gesture Recognizer란?

한 손가락 터치, 여러 손가락 터치, 꼬집기(Pinch), 회전, 밀어내기(Swipe), 끌기(Drag), 가장자리 끌기, 꾹 누르기 등의 터치와 관련된 제스처 이벤트를 인식하고, 액션 메세지를 보내 제스처 관련 이벤트를 처리할 수 있게 해줍니다.

UIGestureRecognizer 클래스

UIGestureRecognizer 클래스는 하위 클래스를 이용해 여러 제스처를 인식할 수 있습니다.

• UITapGestureRecognizer : 한 손가락 터치 또는 여러 손가락 터치
• UIPinchGestureRecognizer : 핀치
• UIRotationGestureRecognizer : 회전
• UISwipeGestureRecognizer : 스와이프
• UIPanGestureRecognizer : 드래그
• UIScreenEdgePanGestureRecognizer : 가장자리 드래그
• UILongPressGestureRecognizer : 길게 터치

제스처 인식해보기 - 1 : 스토리보드로 구현

제스처 인식을 위해 만들어볼 예제는 다음과 같습니다. TextField를 선택해서 키보드가 올라온 상태에서 키보드 위가 아닌 다른 영역을 터치하면 키보드가 내려가도록 할 겁니다. 이게 기본 기능이 아니라는게 의아할 정도로 익숙하고 편하게 사용하던 방법인데 말이죠 ㅋㅋㅋㅋ.

StoryBoard 상에서 View Controller에 Gesture Recognizer를 추가할 수 있습니다. (⌘ + shift + L)으로 접근하면 더 편하죠. Gesture Recognizer들이 아이콘으로 어떤 기능을 담고있는지를 직관적으로 보여주고 있어서 좋네요! ㅋㅋㅋ 이중에서 우리가 필요한 Tap Gesture Recognizer 를 골라서 뷰 컨트롤러에 추가해줍니다.

그러면 이렇게 View Controller의 상단 메뉴 바에 Recognizer가 추가된 것을 확인할 수 있습니다. 이제 할 일은 버튼에 액션을 연결하는 것 처럼 @IBAction 으로 함수를 하나 만들어 Recognizer에 연결해주는 것이예요. 쉽죠?

이렇게 해주면 사진처럼 뷰를 터치할 때 마다 touched라는 메세지가 뜨고, TextField를 편집중이였다면 편집을 종료하고 키보드를 아래로 내려줍니다.

iOS 앱 개발 회사에서 인턴을 하고있는 제 친구의 말을 가져오자면, 왠만하면 코드로 구현하는 것보다 스토리상에서 모든 구현을 끝마치는 편이 좀 더 좋다고 하네요. 물론 개인차나 실력차가 있겠지만, 코드의 양과 버그의 양은 비례하기 때문에 코드로 구현하는 건 권장하는 방법은 아니라고 말해줬어요. 저 같은 초보 개발자는 스토리보드를 애용하는 걸로 합시다! ㅋㅋㅋㅋㅋ 따흑 ㅜㅜ

제스처 인식해보기 - 2 : 타겟-액션 사용하기

이전 포스팅에서 공부했던 타겟-액션 디자인패턴을 사용해볼 때가 바로 찾아왔네요! 조금은 모양새가 다르지만, 작동방법은 같으니 한 번 눈으로 따라와보세요.

이 방법에서는 Gesture Recognizer를 View Controller에 StoryBoard 상에서 추가해주지 않아도 됩니다. 코드에서 타겟-액션을 지정한 Gesture Recognizer를 View Controller에 추가해줄 것이거든요.

Recog를 추가하는 것은 화면에 로딩될 때 한 번만 실행해주면 되는 내용이기 때문에 ViewDidLoad() 함수 안에 넣어줄게요. UITapGestureRecognizer 타입의 tapGesture를 만들어주는데, 인자로 Target과 Action을 전달하도록 되어있죠. 액션에 대한 메세지를 전달할 타겟은 이 클래스이니 self, 액션은 위에서 작성했던 코드를 그대로 사용해서 tapView를 사용해줬습니다.

그 다음, 이렇게 만들어준 Gesture Recognizer를 View에 추가해야 정상적으로 작동하게 됩니다. view.addGestureRecognizer(tapGesture)로 등록해줍니다! 그러면 예시와 똑같은 결과를 얻을 수 있습니다.

 

 

제스처 인식해보기 - 3 : 델리게이트 사용하기

이전 포스팅에서 공부했던 델리게이트 디자인 패턴을 사용해볼 때가 바로 찾아왔네요! (데자뷰? ㅋㅋㅋㅋ) 이것도 이전에 작성했던 예제와 모양새가 거의 똑같으니 편하게 활용할 수 있을거예요. 여기에서도 Storyboard에서 Gesture Recognizer를 추가할 필요는 없어요. 만들어서 붙여주면 되니깐요. 이번에도 간단하게 만들기 위해, 대리자와 위임자를 같은 클래스안에서 작성해주게 될 거예요.

View Controller에서 UIGestureRecognizerDelegate 를 채택해주고, Gesture Recognizer 타입의 tapGesture를 만들어 view에 추가 및 delegate에 self를 선택해줍니다. delegate로 호출되는 메서드는 gestureRecognizer 예요. 해당 메서드안에 위에서 사용했던 코드를 넣어주고, return value만 추가로 작성해주면 됩니다.

 

그러면 예시와 같은 결과를 똑같이 얻을 수 있습니다!

---

이번에 공부한 내용은 정말로 유용하게 사용될 것이라고 생각되네요. 위에 서두에서 말했듯이, 매끄러운 사용자 경험과 익숙함을 주기 위해서 고려해야 할 제스처를 만들기 위해서 항상 사용될 코드와 기능이니까, 꼭 기억해두고 사용해야겠어요!

 

이 글은 edwith의 부스트코스 iOS 프로그래밍 강좌를 보면서 공부한 내용을 정리한 것입니다. 코드 리뷰를 제외한 전체 강좌가 무료로 개방되어있고, 네이버 아이디로도 강좌를 들을 수 있을만큼 진입장벽도 낮아요! 그렇다고해서 강사분이 별로인 것도 아닙니다. 네이버에서 iOS 개발 블로그로 유명한 야곰님이 강의를 맡으셔서 꼭 읽어봐야 하는 애플의 공식문서를 소개해주고, 여러 예제와 프로젝트를 진행하면서 공부할 수 있어서 빠르게 지식을 늘이는데 도움이 많이 되는 것 같아요! 관심이 있으신 분은 아래 링크를 한 번 확인해보시기 바랍니다!

 

https://cc.naver.com/cc?a=ltp.title&r=&i=&bw=953&px=300&py=187&sx=300&sy=187&m=1&nsc=edwith.all&u=https%3A%2F%2Fwww.edwith.org%2Fboostcourse-ios%2Fhome

[부스트코스] iOS 프로그래밍 강좌소개 : edwith