대표는 이동 중에 현황을 보고 직원은 사무실에서 긴 문서를 작성할 수 있다. 같은 ERP라도 화면을 쓰는 장소와 목적이 다르다. 이 프로젝트에서도 모바일에서 작업하기 편한지 묻는 요청이 이어졌고, 별도 기능을 만들면 누락이 생길 수 있다는 우려가 나왔다. 최종 방향은 같은 자료와 작성 기능을 쓰면서 화면을 모바일에 맞추는 것이었다. 나는 이를 작은 PC 화면을 만드는 일이 아니라 업무의 정본을 유지하며 표현을 다시 정하는 일로 읽었다.
메뉴가 접힌다고 모바일 업무가 끝나지는 않는다
보관된 초기 검토는 메뉴 접기와 폭 조정 같은 대응이 있어도 고정 폭 명세서와 큰 비교 표, 작은 검색창이 남아 있음을 구분했다. 페이지가 열리고 가로로 움직일 수 있다는 사실만으로 입력하기 편하다고 말하기는 어렵다. 사용자는 숫자를 고치고 오류를 읽고 저장까지 해야 한다. 모바일 대응의 기준을 사이트가 열린다는 수준으로 잡으면 실제 업무에서 필요한 부분을 놓친다.
나는 먼저 어떤 항목이 현재 폼에 있는지 목록을 만들고 좁은 화면에서의 위치를 대응시키는 편이 좋다고 본다. 겉으로 복잡해 보이는 필드라도 업무에 필요하다면 몰래 빼지 않는다. 종이 출력 모양을 유지해야 하는 화면과 손가락으로 입력하는 화면의 배치를 구분할 수는 있다. 다만 같은 값을 다른 저장 규칙으로 관리하지 않아야 화면에 따른 결과 차이를 줄일 수 있다.
입력과 계산, 저장 경로를 공유한다
당시 모바일 반영 기록은 기존 계산과 저장 경로를 유지하고 화면 구성을 바꾼 범위를 설명한다. 단순한 표에서는 같은 셀과 입력 요소를 카드 형태로 읽게 하는 코드도 남아 있다. 작은 화면용 폼을 따로 복제하지 않으면 한쪽에서만 오류가 수정되거나 항목이 추가되는 문제를 줄일 수 있다. 공통 기능과 화면별 표현의 책임을 어디에서 나눌지 정한 것이다.
그렇다고 모든 표를 카드로 바꾸지는 않는다. 여러 공급처의 수량을 열끼리 비교해야 하거나 합쳐진 머리글이 있으면 가로 관계가 중요할 수 있다. 요약과 상세를 나누거나 필요한 표에만 가로 탐색을 두는 선택도 가능하다. 회사에 맞춘다는 원칙은 모바일에도 적용된다. 같은 CSS 규칙을 모든 표에 덮기보다 사용자가 그 표에서 어떤 판단을 하는지 먼저 살핀다.
키보드가 올라온 뒤의 화면도 생각한다
휴대전화에서는 숫자 입력을 누르는 순간 화면의 사용 가능한 높이가 달라진다. 하단 저장 버튼이 입력을 가리거나 검색 결과가 키보드 아래에 놓이면 작업이 끊긴다. 보관된 코드와 검사 기록에는 보이는 화면 범위를 고려한 팝업 위치와 입력 구성의 확인 범위가 있다. 이런 계산이 존재한다는 사실과 실제 기기에서 편하게 조작된다는 사실은 구분해야 한다.
입력 글자 크기, 터치할 영역, 현재 행의 표시와 초점도 함께 봐야 한다. 가로 스크롤이 없다는 검사 하나로 이 문제들을 모두 확인할 수 없다. 작성 중 오류가 생겼을 때 입력 내용이 남는지와 오류로 이동할 수 있는지도 중요하다. 대표가 읽는 요약은 빨리 훑을 수 있어야 하고 직원의 편집은 실수를 고칠 수 있어야 한다. 동일한 자료를 사용하더라도 두 화면의 검토 질문은 달라질 수 있다.
반영 기록과 실기기 검수를 구분했다
제공 자료에는 초기 모바일 검토와 이후 반영 기록이 함께 있다. 앞 문서의 미대응 상태를 마지막 상태로 읽거나, 뒤 문서의 배포 확인을 실제 모든 휴대전화 사용 완료로 읽으면 둘 다 잘못이다. 이후 기록은 공통 입력·계산·저장 경로와 파일 반영 검사를 설명하면서 실제 휴대전화 검수가 남았다고 적었다. 나는 글에서도 이 시점 차이를 유지했다. 작업이 발전한 부분과 아직 남은 확인을 동시에 남기는 방식이다.
다른 회사에 적용할 때는 원래 필드 목록과 저장 값의 대응표를 먼저 만들고 작은 화면에서도 동일하게 보존되는지 살핀다. 이후 실제 기기에서 검색·입력·첨부·오류 수정·저장까지 업무를 따라가면 된다. 이번 발행에서는 사용자의 지시에 따라 보관된 코드와 작업 기록을 근거로 글을 썼으며 브라우저 실화면을 다시 조작하지 않았다. 모바일 최적화는 기능을 줄였다는 표시가 아니라 필요한 일을 다른 환경에서도 빠뜨리지 않도록 설계했다는 설명이어야 한다.