银行应用界面整备
我们把一家地方银行运营的五款手机应用,改为适配顶部带刘海、底部带主屏指示条的新款智能手机屏幕。旧界面是按早年的小屏尺寸用数字写死位置画出来的,在新屏幕上,顶部菜单和底部按钮可能被裁掉或相互重叠。金融应用里按钮、输入框或认证页面显示不对,就会直接妨碍业务办理。我们逐个检查界面,区分哪些按统一标准修改、哪些要按应用单独处理,改完的界面再逐一复核。
避开刘海与主屏指示条重新摆放的界面布局
新款智能手机在屏幕顶部中央多了一块刘海,底部边缘多了一条主屏指示条。我们逐个检查并修改了地方银行五款应用的界面,让顶部状态栏与菜单区域、底部按钮与标签栏都不侵入这些区域。不同机型的屏幕比例和顶部高度各不相同,因此以厂商设计规范中的安全区域为准整理了布局规则,避免界面被裁切或重叠。

用数字写死小屏尺寸的旧界面代码
这家地方银行应用的旧界面代码,是按早年小屏手机的固定屏幕尺寸,把各元素的位置和大小直接写成数字画出来的。这样的代码一旦屏幕尺寸改变就会错位。我们找出这些经不起尺寸变化的数值,按当下机型的规格改成随屏幕确定位置与大小。

连底部按钮与键盘重叠都复核到的回归检查
金融应用中,按钮、输入框、认证步骤或提示文字显示不对,用户就很难办完这项业务。凡是改过布局的界面,我们都逐一重新检查。重点检查固定在屏幕底部的按钮被键盘遮住,或与滚动区域重叠的情况。

五款应用共用的标准与按应用的单独处理
我们同时修改了这家地方银行的五款应用。这家银行按使用者和业务把应用分开运营,例如个人客户与企业客户的手机银行是两个独立应用。多个应用中反复出现的界面模式统一到一套标准,各应用不同的旧结构则单独分析处理。按运维合同负责的另一家银行的应用,也做了同样的界面适配。问题相同,但每个应用的代码结构和界面规范不同,因此按各自的状态进行修改。

项目亮点
五款银行应用适配带刘海与主屏指示条的新屏幕规格
整理按小屏尺寸用数字写死位置的旧界面代码
以底部固定按钮、键盘与滚动区域重叠为重点的回归检查
洞察
GA4 client_storage: 'none'은 정말 쿠키를 막을까?
두 달 전 이 블로그에 「GA4 쿠키 없이 쓰기」라는 글을 썼습니다. clientstorage: 'none' 으로 쿠키 저장을 끄고, 자체 분석이 쓰던 익명 ID 를 clientid 로 넘기면 쿠키 0개로 GA4 를 쓸 수 있다는 내…
GA4 Measurement Protocol: gtag.js 없이 서버에서 이벤트 보내기
랜딩 페이지의 전송량을 파일 단위로 쪼개 보다가, 가장 큰 파일이 우리 코드가 아니라는 것을 알았습니다. Google Analytics 의 gtag.js 였고, 방문 한 번에 176KB 를 받고 있었습니다. 페이지 전체가 1,094K…
중소 제조업 AI 도입 순서: DX를 먼저 끝내야 할까?
공장을 가진 중소·중견 제조기업 16만여 곳 가운데 스마트공장을 도입한 곳은 19.5%입니다. 회사가 작을수록 이 비율은 더 떨어집니다. 중소벤처기업부가 2025년 4월에 낸 제1차 스마트제조혁신 실태조사 결과입니다. 그림: 기업 규…
Next.js loading.tsx와 404: 버튼이 화면보다 먼저 살아나게 하기
관리 화면 왼쪽 위에 사이드바를 접고 펴는 ☰ 버튼이 있습니다. 폭 하나 바꾸는 버튼인데, 대시보드에서 누르면 2초 넘게 아무 반응이 없었습니다. 레이아웃만 바꾸는 일이 왜 이렇게 오래 걸리는지부터 들여다봤습니다. Next.js 16…



