전표를 작성하는 화면을 만들 때 개발자는 입력하기 쉬운 폼부터 떠올린다. 하지만 사용자가 매일 보는 것은 거래명세서 한 장일 수 있다. 이 작업에서는 참고한 명세서와 같은 모습으로 작성하고 싶다는 요청이 반복됐다. 나는 이 요청을 단순한 장식 변경으로 보지 않았다. 공급받는 자와 공급자, 품목과 규격, 수량과 단가가 문서의 어느 자리에 놓이는지 자체가 업무를 이해하는 단서였기 때문이다.
양식을 닮게 만든다는 말의 범위
작성 화면에는 문서 상단의 양쪽 업체 표와 금액 띠, 품목 행, 합계와 배송지 같은 구역이 연결됐다. 여기서 중요한 것은 종이 그림을 배경에 깔고 입력칸을 올리는 방법을 선택했느냐가 아니다. 입력 값과 표시 값이 같은 문서 구조를 설명해야 한다는 점이다. 업체를 골랐을 때 관련 정보가 어디에 들어가는지, 숫자를 바꾸면 어느 합계가 바뀌는지 눈으로 따라갈 수 있어야 한다.
다만 입력 화면을 인쇄물과 완전히 같은 제약으로 묶을 필요는 없다. 검색창, 오류 안내, 새 거래처 등록 버튼은 종이에 없는 기능이다. 이 기능들이 문서의 핵심 읽기 순서를 가리지 않으면서 필요한 순간에 나타나게 해야 한다. 사용자에게 익숙한 배치를 남기는 일과 화면에서만 가능한 보조 동작을 추가하는 일은 함께 설계할 수 있다.
품목명과 규격은 읽는 순서의 문제였다
기록에는 품목명 뒤에 규격이 길게 이어지고 한 줄에 들어가지 않으면 다음 줄로 내려가게 하자는 요청이 있다. 데이터베이스에서 다른 열이라는 이유로 화면에서도 반드시 다른 칸을 만들 필요는 없다. 사용자가 문서를 읽을 때 한 항목으로 인식하는 정보를 같은 읽기 흐름으로 제공할 수 있다. 저장 구조와 화면 배치는 서로 다른 책임을 갖는다.
이때 긴 글자를 자르는 방식은 조심해야 한다. 줄임표가 깔끔해 보여도 주문 규격의 뒷부분이 사라지면 다른 제품으로 오해할 수 있다. 두 줄 이상을 허용하고 행 높이가 늘어나는 상황을 확인해야 한다. 합계나 서명 구역의 위치도 함께 살펴야 한다. 화면에서 읽히는 것과 인쇄할 때 다음 쪽으로 이어지는 문제는 각각 별도의 검수 대상이다.
검수용 내용은 짧고 예쁜 문장만 준비하면 부족하다. 실제로 길어지는 입력을 넣어야 줄바꿈과 다음 구역의 관계가 드러난다.
빈 줄과 덜 쓴 줄을 구분했다
종이 양식은 빈 줄이 많아도 자연스럽다. 화면도 같은 여백을 가질 수 있지만 그 줄을 전부 거래 데이터로 저장해서는 안 된다. 반대로 품목은 없고 수량만 입력된 줄을 빈 줄이라고 버리면 사용자가 이미 한 일을 잃는다. 보관된 작성 코드에서는 완전히 비어 있는 줄과 일부 입력된 줄을 구별하는 판단을 확인할 수 있다.
나는 여기에 명확한 피드백이 필요하다고 본다. 미완성 행이 있으면 어느 줄의 무엇을 확인해야 하는지 보여 주고 사용자가 고칠 기회를 준다. 작성 중 저장과 확정의 조건도 나눌 수 있다. 자동으로 지운 뒤 성공을 알리는 방식은 화면을 깨끗하게 만들지만 실제 입력을 보존하지 못한다. 익숙한 종이의 빈칸을 흉내 낼수록 저장할 값의 경계를 더 정확히 정해야 한다.
보기와 실제 출력은 다른 확인이다
이 프로젝트의 초기 보고서는 코드와 구성 검사를 설명하면서 실제 인쇄와 붙여넣기 검수를 따로 남겼다. 나는 이번 글에서도 그 범위를 합치지 않는다. 보관된 코드에서 문서 구성을 읽었다는 사실로 현재 프린터의 페이지 나눔이나 이미지 복사 성공을 증명할 수는 없다. 긴 품목, 긴 비고, 여러 쪽과 팝업 차단을 실제 출력 환경에서 확인해야 한다.
제작을 의뢰할 때는 빈 양식 한 장과 가장 긴 실제 입력의 형태를 함께 준비하면 좋다. 개인정보를 제거한 합성 내용으로 긴 업체명, 긴 규격, 부분 입력 행을 만들고 작성·저장·재열기·출력을 따라가 본다. 이때 확인할 것은 종이와 얼마나 비슷한가에 더해 직원이 값을 놓치지 않고 입력할 수 있는가다. 익숙한 형태는 출발점이고, 입력을 끝까지 지키는 동작이 완성도를 결정한다.