로그인 기능을 구현하던 중, 키보드 레이아웃 관련 이슈가 발생했다.
😇 문제 상황과 원인
비밀번호 TextField의 보안을 위해 isSecureTextEntry 속성을 true로 지정해주었는데,
텍스트 필드를 이동할때마다 화면이 요동치는 현상이 발생하였다.
현재 뷰의 바텀 레이아웃을 KeyboardLayout에 맞춰줬는데, 키보드 위에 생기는 키체인 패스워드 영역 때문에 발생한 것.
키보드 레이아웃이 키체인 영역이 생길때마다 그에 맞게 늘어나게 되고, FirstResponder인 텍스트필드가 바뀔때마다 키체인 영역의 노출 여부도 바뀐다. 따라서 화면이 요동치는 것처럼 보이는 것이다.
한편 키체인 영역은 텍스트필드가 isSecureTextEntry == true 일때 등장하며,
1) 키체인에 저장된 암호를 불러올 수 있게된다(자동완성, AutoFill)
2) 텍스트필드의 텍스트를 복사할 수 없게된다(보안)
3) 스크린샷, 녹화시에도 어떤 값을 입력했는지 안보이게 된다(보안)
🧐 해결방법
키체인 영역 때문에 키보드레이아웃이 계속 바뀌는 상황을 해결해야했고, isSecureTextEntry 속성은 보안을 위해 꼭 true여야 했다.
여러 방법들을 찾으려 했지만 결국 textField의 textContentType을 .oneTimeCode로 설정하는 방향으로 해결했다.
textContentType을 .oneTimeCode으로 설정하면, 더이상 키체인 영역은 표시되지 않는다.
🧐 TextContentType이란?
textContentType | Apple Developer Documentation
The semantic meaning for a text input area.
developer.apple.com
UITextInputTraits의 하나로, 텍스트 입력값이 어떤 유형인지 나타내는 속성이다.
이 속성을 통해 키보드와 디바이스는 유저가 어떤 유형의 콘텐츠를 입력할지 예상할 수 있다.
시스템은 유형에 맞는 키보드를 자동으로 선택해주거나, 키보드 수정 등을 향상시킨다.
the system can in some cases automatically select an appropriate keyboard and improve keyboard corrections and proactive integration with other text input opportunities.
속성은 여러개를 같이 사용할 수 없고, default는 nil이다.
🧐 oneTimeCode란?
textContentType에 넣어줄 수 있는 UITextContentType 중 하나로, 일회성 인증코드 유형을 나타내는 타입이다.
휴대전화 번호 인증시 문자로 온 인증코드를 키보드 위에서 붙여넣기 할 수 있게 해주는 서비스를 만나본 적 있을텐데,
그때 텍스트필드의 textContentType이 바로 oneTimeCode이다.
oneTimeCode | Apple Developer Documentation
A property that defines the content in a text input area as a one-time code.
developer.apple.com
✅ 결론
- isSecureTextEntry를 사용하면 키체인 자동완성 영역이 키보드에 추가됨
- 키모드의 컨텐츠 타입을 oneTimeCode로 설정하면, 메세지로 인증코드가 올때 영역이 생기게 됨(동작 원리는 따로 있음)
- 따라서 보안 입력 모드로 작동하지만 키체인 자동완성 영역은 생기지 않게된다.
하지만 고민할 부분이 아직 많이 남아있다.
1. 그럼 인증코드 메시지가 도착하는 경우가 만에하나 생기면?
2. 키체인 자동완성 기능을 제공해야 사용자 편의성이 더 좋지 않을까?
3. 로그인 화면에서 비밀번호 텍스트필드만 보안 입력 모드로 처리했는데, 왜 아이디 텍스트필드에도 키체인 자동완성 영역이 표시되는걸까?(어떤 동작 원리인걸까?)
'트러블슈팅' 카테고리의 다른 글
CollectionView 페이징시 스크롤 멈춤현상 해결하기(feat. Activity Indicator, RefreshControl) (0) | 2023.09.24 |
---|---|
Navigation Bar의 SearchBar에서 키보드 내리기(feat. resignFirstResponder) (0) | 2023.08.09 |
다크모드와 CGColor(feat. layer.borderColor) (0) | 2023.07.26 |