iOS 앱 첫 화면에 튜토리얼뷰를 넣어보았습니다.
갑자기 튜토리얼이요..?
스타트업에서 일을 하면 많은 장단점이 있다. 물론 장점이 내게 더 큰 매력이었기 때문에 스타트업에 종사하고있다. 하지만 장점처럼 느껴졌던 부분이 단점으로 다가올 때가 있다. 이번 주가 그랬다. 효율성 있고, 유도리있게 진행되는 업무방식을 좋아하지만… 갑자기 급하게 개발이 추가되어 바쁜 한 주를 보내게 되었다.
이 앱은 현재 출시된지 한 달 정도되었다. 유저들의 피드백을 들었을 때, 처음 사용법을 익히기 어렵다는 의견이 있었다. 그래서 기획에서 급하게 튜토리얼을 추가해 앱 첫화면에 튜토리얼을 추가하는 작업을 했다.
빠르게 진행해야해서 디자이너도 통이미지로 작업을해서 기기별로 이미지 사이즈도 다르게 적용해줘야 했다.
그 작업 과정을 소개하려고 한다.🙃
(p.s 블로그에는 튜토리얼뷰라고 칭하지만 코드에는 introView라고 칭하고 있다. 참고하길 바란다.)
1. 튜토리얼 이미지 적용하기
1.튜토리얼 이미지뷰를 넣어준다.
먼저 디자이너에게 아이폰SE/아이폰기본(6,7,8)4.7인치/아이폰(plus)5.5인치/아이폰X 이렇게 총 4가지 사이즈를 위한 이미지를 넘겨받아서 스토리보드에서 적용했다.(나는 뷰가 편해서 코드를 짜기 전에 스토리보드에서 뷰를 먼저 만들어주는게 편하다. 아마 개취일 것 같다.) 이렇게 한 이유는 위의 이미지에서 보이는 것처럼 하단 플로팅버튼의 화살표 위치가 맞아야했기 때문이다.
2.상단에 다시는 보지 않기 와 X닫기 버튼을 넣고 오토레이아웃을 맞춰준다.
3.기기별로 다른 이미지로 적용해준다.
나는 스크린의로 넓이와 높이로 기기를 분별할 수 있는 struct를 만들어놨다.
4.DeviceAdjust Struct를 이용해 앱의 첫 화면에 코드로 이미지를 바꿔준다. 이제 이미지는 잘 불릴 것이다. (아이콘처럼 보이는건 Image Literal을 사용해서 그렇다.😜 )
2. 닫기 || 다시 보지 않기
여느 앱과 같이 오른쪽의 X버튼을 누르면 다음에 앱을 다시 켰을 때 튜토리얼이 다시 나오고 왼쪽의 다시 보지 않기 버튼을 누르면 다시는 열리지 않게 만들어줘야 했다.
그렇기 때문에 유저의 선택(닫기 또는 다시보지않기)을 앱 내의 Userdefault로 저장해줬다.
1.Userdefaul에 introview(튜토리얼뷰)를 추가해준다.
처음 가입하는 사람은 Userdefault에 “YES”라고 기본값을 저장해주는 코드를 넣어줬지만, 이미 가입해있는 사람은 값이 nil이기 때문에 “Yes”를 넣어주고 다음에 또 뷰가 나올 수 있도록 코드를 만들어준다.
2.버튼의 Action 함수를 만들어 코드를 작성해준다.
다시 보지 않기를 눌렀을 경우는 removeSuperview()를 사용해 뷰를 삭제해 준다.
3. 완성-!!
다 됐다! 이제 각종 테스트를 해보고 업데이트를 올려주면 된다.
블로그 글에 스크린샷은 없지만 회원가입 완료하는 부분에서 튜토리얼뷰의 Userdefault를 저장해주는 것 잊지 말고 넣어줘야 한다.
갑자기 추가해서 코드에서 리팩토리해야하거나 클린코드로 수정해야할 부분이 있을 수 있다. 그래도 급하게 적용해서 올리는 것도 경험이라고 생각한다. 약간의 여유가 생기면 전체적으로 코드를 더 잘 짤수있는 고민을 하고싶다.
어떤 피드백이든 환영합니다! 코드에서 수정되었으면 좋겠는 부분이나 더 좋은 다른 방법 언제든지 댓글주세요~🤩