직원에게는 오늘 처리할 주문이 먼저 보이고, 대표에게는 아직 받지 못한 돈과 확인할 일이 먼저 보여야 한다. 회사 맞춤 ERP를 설명하는 화면도 이 차이를 드러내야 한다고 판단했다.
이번에는 공개용 체험의 배치를 자세히 들여다본다. 실제 업체 화면을 가져오지 않고 새로 만든 합성 예시이며, 읽는 순서와 조작의 순서를 어떻게 연결했는지가 이 글의 중심이다.
같은 자료라는 말보다 다음 행동을 먼저 놓았다
직원 쪽에 매출 카드부터 크게 놓으면 회사가 잘 돌아가는 것처럼 보여도 지금 해야 할 일이 묻힌다. 대표 쪽에 주문 입력 칸부터 늘어놓으면 현황을 보려던 사람이 다시 자료를 해석해야 한다. 나는 역할을 메뉴 이름으로만 나누지 않고, 각각의 첫 질문을 화면의 시작점으로 삼았다. 직원 예시는 품목·수량·매입처에서 요청서 준비로 이어지고, 대표 예시는 금액에서 내역과 확인할 업무로 이어진다.
메인에서는 두 화면을 나란히 놓아 관계를 먼저 읽게 했다. 직원이 요청서를 준비하면 대표 쪽의 주문 상태도 같은 상태를 보여 준다. 다만 월간 매출 카드까지 이 버튼으로 바뀌는 것은 아니다. 주문 준비와 재무 집계의 범위가 다르다는 설명을 가까이에 두었다. 한 화면에 보인다는 이유로 같은 계산의 결과라고 오해하지 않게 하는 것도 배치의 일이다.
카드가 답하는 질문과 내역이 답하는 질문
대표의 첫 화면은 매출·매입·미수금·미지급금의 합성 금액을 보여 준다. 여기서 멈추면 방문자는 보기 좋은 숫자만 보고 떠난다. 그래서 금액을 누르면 어떤 거래가 그 값을 만들었는지 읽도록 연결했다. 요약은 규모를, 내역은 확인 대상을 알려 준다. 가상 거래처와 담당자, 기한이 등장하는 이유도 돈의 크기 다음에 확인할 일을 찾게 하기 위해서다.
내역을 항상 펼쳐 두는 방법도 가능하다. 나는 이번 공개 체험에서는 첫 질문을 읽는 폭과 자세히 살펴보는 폭을 나눴다. 접힌 내역은 버튼으로 열고, 확장 여부를 상태로 알린다. 이 선택이 모든 ERP의 정답은 아니다. 하루 종일 같은 장부를 보는 실무 화면이라면 정렬·검색과 행 비교가 앞설 수 있다. 처음 방문한 사람이 자기 회사의 문제를 대입해 보는 화면이라는 목적에 맞춰 결정했다.
작은 화면에서도 입력의 정본은 하나다
PC에서 두 열을 쓴다고 모바일용 입력 폼을 따로 복제할 필요는 없다. 메인의 직원 화면 다음에 대표 화면이 오는 문서 순서를 유지하고, 좁아지면 한 열로 바꾸도록 구성했다. 입력 칸이 두 벌이면 한쪽 수량만 바뀌거나 숨겨 둔 버튼에 초점이 가는 문제가 생길 수 있다. 여기서는 같은 요소의 배치를 바꾸는 쪽을 택했다.
공개 CSS의 메인 쌍 화면은 1000px 이하에서 한 열이 된다. 상세 체험의 대표 영역은 다른 문맥이므로 850px 이하에서 나뉜 요약과 보조 예시를 세로로 놓고, 520px 이하에서는 여백과 지표 배치를 다시 조정한다. 숫자 자체를 표준값으로 권하지는 않는다. 글의 길이, 두 언어의 줄바꿈, 조작할 칸의 폭을 보고 해당 배치가 버틸 수 있는 경계를 정해야 한다.
열의 비율보다 먼저 확인한 최소 폭
격자의 열을 minmax(0, 1fr)로 정의한 부분은 눈에 잘 띄지 않는다. 하지만 긴 내용이 격자 항목의 최소 폭을 밀어내지 않게 하기 위한 중요한 조건이다. 상세 대표 영역에는 1.5 대 1의 비율을 사용하되 두 열 모두 최소 폭을 0으로 열어 두었다. 아래 코드는 현재 공개 화면의 두 격자 선언이다. 이것만 복사하면 전체 레이아웃이 완성되는 것은 아니며 자식 요소와 반응형 규칙이 함께 필요하다.
정보의 제목과 값은 관계를 가진 묶음으로 읽게 하고, 버튼과 링크는 실제 조작 요소로 두었다. 좁은 화면의 보조 카드 역시 실제 모바일 앱을 캡처한 것이 아니라 같은 합성 월간 자료를 요약한 화면 구성 예시다. 나는 이 차이를 설명문에 남겼다. 그럴듯한 기기 모양이 실제 운영 제품이나 현장 검수를 대신하게 두고 싶지 않았다.
코드와 구현 살펴보기
현재 공개 CSS의 격자 선언
.erp-demo-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:start}
.xp-owner-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:50px;align-items:start}상세 페이지를 만든 이유는 긴 설명을 숨기기 위해서가 아니다
메인에서 모든 시나리오를 펼치면 회사 소개를 읽는 사람이 중간에 업무 훈련을 시작해야 한다. 그래서 메인은 직원과 대표가 어떻게 연결되는지 보여 주고, 별도 체험에서는 견적에서 수금까지의 순서를 바꾸어 보게 했다. 역할별 구성, 자료 가져오기 검토, 복구 같은 이야기는 각각의 위치에서 읽는다. 방문자가 지금 궁금한 지점으로 이동할 수 있도록 실제 내부 링크를 사용했다.
이동 버튼은 다음 페이지에 무엇이 있는지 설명해야 한다. 화면 전체를 모호한 클릭 영역으로 만들기보다 제목이 있는 링크를 두고, 세부 영역에는 식별 가능한 앵커를 둔다. 키보드로 링크를 사용할 수 있는 구조와 넓은 조작 영역은 코드에서 챙겼지만, 이번 글을 쓰며 실제 기기 화면을 다시 검수한 것은 아니다. 소스와 저장된 검증 기록을 확인한 범위를 넘어서 사용성 성과를 말하지 않는다.
자기 회사 화면으로 옮길 때 적어 볼 것
이 구조를 적용하려면 화면 목록부터 만들기보다 직원과 대표가 아침에 묻는 질문을 각각 적어 보는 편이 좋다. 입력해야 할 값, 확인만 할 값, 다음 사람에게 넘길 상태를 구분한 뒤 한 거래가 두 화면에서 어떻게 이어지는지 추적한다. 둘의 합계가 다른 이유를 설명할 수 없다면 배치 이전에 자료의 범위를 다시 정해야 한다.
공유한 반응형 단일 입력 구조도 함께 볼 수 있다. 다만 역할에 맞게 화면을 간소화하는 일과 접근 권한을 강제하는 일은 다르다. 이 공개 예시의 역할 선택은 설명을 바꾸는 기능이다. 실제 서비스에서는 서버의 사용자 권한과 자료 조회 범위를 따로 구현해야 한다. 보기 편한 화면의 출발점은 역할의 질문이고, 자료를 보호하는 경계는 별도의 구현으로 남는다.