서론
이번 포스팅은 홈 화면 View 구현에 대한 이야기입니다.
서버 통신 관련 내용은 다음 포스팅에 작성할게요.
이번 구현 내용에서도 MVVM에 대한 고민점이 포함되어 있습니다.
ViewController를 View로만 사용한다는 게 직접 해보니 꽤 어렵네요...
이미 잘 되어 있는 MVVM 프로젝트를 참고하면서 하면 과정이 효율적일 수 있습니다만,
제가 직접 고민하는 과정이 사라질 거 같아서 일부러 보지 않고 있습니다.
혹시나... 궁금해하시는 분이 계실 거 같아서 ㅎㅎㅋㅋ
프로젝트가 작은 편이라 제가 먼저 한 번씩 고민해본 뒤에 모범 MVVM 프로젝트를 참고해서 다시 한 번 리팩토링을 할 계획입니다.
답답하셔도 조금만 참아주세요 ㅎㅎ
홈 화면 스크린샷
홈 화면 스크린샷을 먼저 보여드릴게요.
상단에 Reset 버튼, Paste 버튼이 있고, 중앙에는 TextView가 배치되어 있습니다.
하단에는 버튼이 있는데, 이 버튼은 입력된 텍스트가 없으면 비활성화 됩니다.
NavigationBar 애니메이션
네이게이션바처럼 생긴 CustomView를 생성했습니다.
위 스크린샷의 2번 사진을 보시면 상단 뷰가 사라진 것을 볼 수 있죠?
그냥 똭! 하고 사라지는 게 아니라 위로 올라가는 애니메이션을 주었고,
나타날 때는 아래로 내려오는 애니메이션을 주었습니다.
숨기는 애니메이션
숨기는 애니메이션부터 볼게요.
상단바가 위로 올라가면서 스르륵 사라지는 게 포인트입니다.
1번 라인에서 textView에 패딩값을 주는 이유는 키보드가 올라온 채로 하단 내용을 볼 수 있도록 하기 위해서입니다.
textView 자체를 키보드 위로 올릴 수도 있겠지만, 그럼 textView가 위아래로 압축되어서 부자연스럽더라고요.
그래서 bottom을 300으로 늘렸고, 아래 나타나는 애니메이션에서는 다시 10으로 원상복구 시킵니다.
본격적인 상단바를 숨기는 애니메이션 코드는 그 다음 라인인 UIView.animate부터입니다.
animationDuration동안 애니메이션을 진행해서 사용자에게 보다 자연스러운 뷰를 보여주도록 했습니다.
(animationDuration은 하드코딩을 줄이기 위해 상수 선언해서 위에 배치해뒀습니다.)
상단바 높이인 topBarHeight만큼 위로 올라가고, 그 빈 자리만큼 텍스트뷰를 위로 당겨줘요.
그리고 alpha 값을 낮춰서 스르륵 사라지는 애니메이션까지 추가해주었습니다.
alpha 대신 isHidden 쓰면 스르륵 사라지지 않으니 주의합시다.
나타나는 애니메이션
키보드가 내려가면 상단바가 스르륵 나타나면 내려옵니다.
상단바를 보여주는 애니메이션입니다.
위에서 변경해준 textView의 bottom 패딩과 뷰들에 적용한 transform, alpha 값을 원상복구 시켜주었습니다.
직접 해보시면 아시겠지만 이 스르륵의 유무가 제 기준으론 정말 크더라고요.
개발자로서는 귀찮을 수 있지만 사용자가 좋으면 좋은거니 ㅎㅎ...
그런 의미에서 아래 버튼도 애니메이션을 줬습니다.
키보드가 사라지는 시점에 버튼이 갑자기 나타나니 뭔가 부자연스럽더라고요.
유난이라고 생각할 수도 있지만 눈에 한 번 보이니 계속 신경쓰이는 그런 느낌 아시죠? ㅋㅋ
맘 편하게 애니메이션을 적용해주었습니다.
붙여넣기 구현하기
iOS는 textView의 커서를 클릭하면 복사, 붙여넣기 등등을 할 수 있습니다.
근데 아이폰 유저는 공감할텐데 이 선택상자가 잘 안 나타날 때가 있어요.
그래서 Paste을 만들어서 오작동하는 일 없이 편하게 붙여넣기할 수 있게 했습니다.
UIPasteboard를 이용해 pasteboard의 데이터를 가져올 수 있습니다.
(공식문서 링크는 https://developer.apple.com/documentation/uikit/uipasteboard)
general pasteboard의 텍스트 데이터를 가져오고, 만약 데이터가 있다면 ViewModel의 데이터를 갱신합니다.
데이터가 갱신되면 데이터 바인딩의 클로저가 동작하면서 TextView에 입력이 됩니다!
추가로, UIPasteboard의 important라고 강조되어 있는 부분이 있는데요.
iOS 14부터는 붙여넣기를 할 때 권한 알림을 띄운다는 것이 좀 놀랐네요.
지금은 간단히 필요한 부분만 읽었는데요.
급한 일(면접이라던가... 토익이라던가...)이 모두 끝난 뒤,
나머지 내용도 학습해서 따로 포스팅을 진행하도록 하겠습니다.
텍스트 입력하기
텍스트뷰에 입력된 텍스트를 데이터에 넣어야겠죠?
UITextViewDelegate의 textViewDidEndEditing을 이용했습니다.
가독성을 위해 extension으로 분리를 시켜줬는데, 가독성이 좋아졌나...? 싶긴 해요.
왜냐하면 지난 포스팅에서 언급한 것처럼 가로로 긴 코드가 아니라 세로로 긴 코드를 작성하려고 하기 때문에
얘처럼 매개변수가 3개 이상인 메서드는 개행을 주고 있거든요.
그러다보니 extension이 있는 곳까지 스크롤을 해야해서 가독성이 오히려 떨어지는..? 느낌을 받더라고요.
메서드 하나하나의 가독성은 좋아지지만 전체적인 흐름의 시점에서는 가독성이 떨어지는 느낌이었습니다.
물론 extension으로 분리하는 코드 양이 많다면 파일을 분리하는 방법도 있겠지만,
저 한 줄을 위해 파일 분리는 과하다고 생각했어요.
이부분은 다른 분의 좋은 프로젝트를 참고해서 추후 수정해봐야겠네요 ㅎㅎ
다음 화면으로 데이터 전달하기
요약 버튼을 누르면 서버 통신을 시도하고, 요약 결과와 키워드를 전달 받습니다.
서버 통신 과정은 다음 포스팅에서 다룰거고,
여기에서는 요약 결과를 다음 화면으로 전달하는 내용을 말하려고 합니다.
지금까지는 이동하는 VC의 프로퍼티에 직접 접근해서 데이터를 전달했습니다.
이런식으로요!
그런데 MVVM은 VC가 데이터를 가지고 있으면 안 됩니다.
따라서 SummarizeViewController에는 summarizeData가 없으니 프로퍼티를 이용해 전달하지 못하는 거에요.
그렇다고 여기에서 ViewModel을 생성하면 두 VC 간의 의존도가 높아져 적절하지 않다고 생각했어요.
고민해본 결과 init을 이용하면 좋지 않을까? 생각했습니다.
SummarizeViewController에 init을 추가해주고,
SummarizeVC를 생성할 때 데이터를 전달하면
SummarizeVC는 데이터를 직접 가지지 않으면서 깔끔하게 데이터를 전달할 수 있습니다.
혹시 더 좋은 방법이 있다면... 조언 부탁드립니다.
다음 포스팅에서는 서버 통신에 대한 내용을 다루겠습니다.
감사합니다!
아직은 초보 개발자입니다.
더 효율적인 코드 훈수 환영합니다!
공감과 댓글 부탁드립니다.