iOS에서 사용자 입력을 위한 화면을 구성할 때 가장 자주 겪는 UX 문제 중 하나는 키보드와 UI 요소의 충돌이다. 특히 UITextField나 UITextView 하단에 중요한 버튼(예: “확인”, “다음”, “완료”, “Import”)이 위치할 경우, 키보드가 올라오면서 버튼이 가려져 사용자 액션을 방해하게 된다. 이 글에서는 이러한 문제를 해결하는 방법 중 하나로 Import 화면에서 버튼을 입력창 바로 아래로 배치하는 전략을 중심으로 설명한다.
문제의 본질: 하단 고정 UI와 키보드의 충돌
기존의 많은 iOS 앱은 “Import”, “Continue”, “Login” 버튼을 view.bottomAnchor에 고정한다. 이는 평소엔 깔끔한 UI 구조를 제공하지만, 키보드가 올라오는 상황에서는 다음과 같은 문제가 발생한다:
- 버튼이 키보드에 가려진다
- 스크롤을 올려야 버튼이 보인다
- UX 흐름이 중단되고 사용자는 불편을 겪는다
특히 이러한 문제는 Wallet Import 같은 화면에서, 사용자가 지갑 주소나 니모닉을 입력한 뒤 “Import” 버튼을 눌러야 하는 흐름에서 자주 발생한다.
해결 전략: 버튼을 입력창 아래로 이동시키기
가장 간단하면서도 강력한 해결 방법은 다음과 같다:
버튼을 스크롤 뷰 안의 스택뷰에 포함시키고, 텍스트 입력창 바로 아래에 배치하는 것.
이를 구현하면 다음과 같은 효과가 있다:
- 사용자가 입력을 마치면 바로 아래에 버튼이 보여 자연스러운 흐름이 유지된다
- 키보드가 올라와도 버튼이 보인다 (scrollView에 의해)
- 사용자는 추가 조작 없이 즉시 버튼을 눌러 다음 단계로 진행할 수 있다
코드 구조 비교: 기존 vs 개선
기존 방식: 버튼이 하단에 고정되어 있었던 코드
footerBar.addSubview(buttonsBar)
footerBottomConstraint = footerBar.bottomAnchor.constraint(equalTo: view.bottomAnchor)
개선 방식: 버튼을 스택뷰에 포함
let stackView = [
tabBar,
.spacer(height: 30),
mnemonicControlsStackView,
.spacer(height: 20),
buttonsBar // ✅ Import 버튼을 아래로 이동
].asStackView(axis: .vertical)
scrollView.addSubview(stackView)
추가적으로 하단에 고정되어 있던 footerBar, footerBottomConstraint, keyboardChecker 등은 모두 제거 가능하다. 불필요한 오토레이아웃 제약도 사라지므로 코드 유지보수성도 향상된다.
UX 정합성: 왜 이렇게 배치해야 하는가?
Import 화면은 민감한 정보를 입력받는 단계다. 사용자는 긴장을 하고, 오타를 신경 쓰며, 집중해서 입력한다. 입력 직후 시선을 거의 움직이지 않고 손가락만으로 버튼을 누를 수 있어야 한다. 이러한 흐름을 유지하는 것은 단순한 UI 개선이 아니라, 앱의 신뢰도와 사용 경험을 크게 좌우하는 요소다.
또한 애플의 HIG(Human Interface Guidelines)에서도 다음과 같은 권고가 있다:
“Avoid placing critical actions in areas that may be covered by the keyboard or are hard to reach when typing.”
즉, 버튼이 하단에 고정되어 있을 경우 iPhone SE 또는 iPhone Mini 같은 좁은 화면에서는 치명적인 UX 결함으로 작용할 수 있다.
보완적으로 고려할 점
scrollView.keyboardDismissMode = .interactive설정으로, 스크롤 시 키보드를 자연스럽게 내리는 기능을 제공- 스크롤뷰의
contentInset.bottom을keyboardWillShow이벤트에 따라 동적으로 조정하여 더 부드러운 레이아웃 대응 - 특정 상황(예: 단어 수 12개 이상 입력 시)에서 키보드를 자동으로 내려주는 로직도 함께 구성
결론
텍스트 입력 후 눌러야 할 버튼이 화면 하단 고정이 아닌 입력창 바로 아래에 위치하도록 UI를 재배치하는 것은, 단순한 구조 변경 이상의 의미를 갖는다. 이는 UX 흐름을 방해하지 않으면서 사용자의 실수를 줄이고, 앱의 신뢰도를 높이는 강력한 방법이다. Import 화면과 같은 민감한 입력 단계에서는 이러한 작은 설계 판단이 큰 차이를 만들어낸다. iOS 개발자라면 이 구조를 기본 설계 패턴 중 하나로 삼는 것이 바람직하다.
답글 남기기