은행 앱 화면 규격 대응 사례: 노치 · 안전 영역 정비

01 / 04

노치와 홈 막대를 비켜 다시 놓은 화면 배치

새 스마트폰은 화면 위쪽 가운데가 파인 노치와, 아래쪽 가장자리의 홈 막대가 생겼습니다. 지방은행 앱 다섯 개의 상단 상태 표시줄과 메뉴 영역, 하단 버튼과 탭이 이 영역을 침범하지 않도록 화면마다 배치를 점검하고 고쳤습니다. 기기마다 화면 비율과 상단 높이가 달라도 화면이 잘리거나 겹치지 않게, 제조사 디자인 지침의 안전 영역을 기준으로 배치 규칙을 정리했습니다.

02 / 04

작은 화면 크기를 숫자로 박아 둔 오래된 화면 코드

지방은행 앱들의 오래된 화면 코드는 예전 작은 스마트폰의 고정된 화면 크기를 기준으로, 요소의 위치와 크기를 숫자로 직접 적어 그린 것이었습니다. 이런 코드는 화면 크기가 바뀌면 그대로 어긋납니다. 화면 크기 변화에 약한 숫자 값을 찾아내, 지금 기기 규격에 맞게 화면을 따라 위치와 크기가 정해지도록 보완했습니다.

03 / 04

하단 버튼과 키보드가 겹치는 경우까지 다시 본 회귀 확인

금융 앱은 버튼, 입력칸, 인증 단계, 안내 문구가 잘못 보이면 사용자가 그 업무를 마치기 어렵습니다. 배치를 고친 화면은 하나씩 다시 확인했습니다. 특히 화면 아래에 고정된 버튼이 키보드에 가려지거나 스크롤 영역과 겹치는 경우를 중점으로 봤습니다.

04 / 04

다섯 개 앱에 함께 쓴 공통 기준과 앱별 처리

지방은행의 앱 다섯 개를 동시에 고쳤습니다. 이 은행은 개인 고객용과 기업 고객용 모바일 뱅킹을 앱으로 따로 두는 등, 쓰는 사람과 업무에 따라 앱을 나눠 운영합니다. 여러 앱에서 반복되는 화면 패턴은 하나의 기준으로 맞추고, 앱마다 다른 오래된 구조는 따로 분석해 처리했습니다. 운영 계약으로 맡고 있던 다른 은행의 앱에도 같은 화면 대응을 했습니다. 같은 문제라도 앱마다 코드 구조와 화면 정책이 달라, 각 앱의 상태에 맞춰 고쳤습니다.

은행 앱 화면 정비

노치와 홈 막대를 비켜 다시 놓은 화면 배치

작은 화면 크기를 숫자로 박아 둔 오래된 화면 코드

하단 버튼과 키보드가 겹치는 경우까지 다시 본 회귀 확인

다섯 개 앱에 함께 쓴 공통 기준과 앱별 처리

이 작업의 포인트

인사이트

GA4 client_storage: 'none'은 정말 쿠키를 막을까?

GA4 Measurement Protocol: gtag.js 없이 서버에서 이벤트 보내기

중소 제조업 AI 도입 순서: DX를 먼저 끝내야 할까?

Next.js loading.tsx와 404: 버튼이 화면보다 먼저 살아나게 하기