회원가입화면 텍스트 필드 픽셀터지는 문제

프로젝트: 사용자 회원가입 화면 개선

기술 스택: Flutter, Dart

문제 정의: 사용자 회원가입 화면에서 여러 개의 텍스트 필드를 사용하여 회원 정보를 입력하는 UI를 구성했습니다. 그러나 사용자가 텍스트 필드에 입력할 때, 소프트 키보드가 올라오면서 화면에 배치된 위젯들이 제대로 표시되지 않아 overflow pixels 오류가 발생했습니다. 이는 사용자가 키보드에 의해 가려진 입력 필드를 스크롤할 수 없게 되어 사용자 경험(UX)을 저해하는 문제로 이어졌습니다.

해결 방법: 이 문제를 해결하기 위해 Flutter의 SingleChildScrollView 위젯을 사용하여 화면이 소프트 키보드로 인해 축소될 때도 모든 컨텐츠가 화면에 적절히 표시되도록 했습니다. SingleChildScrollView는 화면 크기를 초과하는 컨텐츠를 스크롤할 수 있는 기능을 제공합니다.

구현 세부사항:

1. UI 구성: 기존에는 Column 위젯을 사용하여 회원가입 입력 필드를 나열했습니다. 이 구조에서는 화면 크기를 초과하는 입력 필드가 발생할 경우, 키보드가 올라왔을 때 오류가 발생했습니다.
2. 스크롤 기능 추가: SingleChildScrollView를 사용하여 body 부분을 감싸서 화면이 축소되어도 모든 입력 필드를 스크롤할 수 있도록 변경했습니다.

dart

코드 복사

body: SingleChildScrollView( child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ // 기존의 모든 위젯들... ], ), ),

1. 결과: 이 수정으로 인해 키보드가 올라오더라도 사용자는 스크롤을 통해 모든 입력 필드를 사용할 수 있게 되었고, overflow pixels 오류가 발생하지 않도록 했습니다.

성과:

• UI가 보다 유연하게 동작하며, 다양한 화면 크기에서 안정적인 사용자 경험을 제공하게 되었습니다.
• 코드 변경을 통해 사용자 입력의 편의성을 개선하였으며, 입력 필드 간의 접근성을 높였습니다.

추가적인 고려 사항:

• SingleChildScrollView 사용 시 화면의 높이에 따라 UI 요소가 축소될 수 있으므로, 중요한 입력 필드가 가려지지 않도록 Padding과 SizedBox 등을 적절히 활용하여 UI를 구성해야 합니다.
• 키보드가 올라올 때 UI가 튀지 않도록 resizeToAvoidBottomInset 속성을 활용하여 추가적인 레이아웃 조정을 고려할 수 있습니다.

---