샘플 리포트 페이지는 어떻게 만들었나 — 좌표가 없으면 그리지 않는다

지난주에 판정의 네 요소를 썼는데, 그걸 실제로 보여 주는 페이지가 저희 사이트의 샘플 리포트예요. 오늘은 그 페이지를 만들면서 결정한 것들을 적어 볼게요. 마케팅 페이지지만 엔지니어링 원칙을 그대로 적용했어요.

원칙 1. 숫자는 손으로 적지 않아요

페이지 위에 "부품표 N행 중 M행 연결", "사양 일관성 7/8" 같은 숫자 카드가 있어요. 이 숫자들은 페이지 코드에 직접 쓴 게 아니라 판정 데이터에서 빌드 시점에 계산돼요.

export const stats = {
  bomRows: pages.reduce((n, p) => n + (p.bom?.length ?? 0), 0),
  bomLinked: pages.reduce((n, p) => n + (p.bom?.filter((r) => r.rects?.length).length ?? 0), 0),
  consistencyMatch: consistency.filter((c) => c.status === "match").length,
  // ...
};

판정 데이터가 바뀌면 숫자도 같이 바뀌어요. 마케팅 페이지의 숫자가 실제 데이터와 어긋나는 일이 구조적으로 없어요. 판정 제목도 마찬가지로 데이터에서 만들어져요. "LINER 두께 병기 — t0.4 / t1.0" 의 사양 문자열은 부품표 행에서 와요.

원칙 2. 좌표가 있는 판정만 도면 위에 그려요

뷰어에서 판정을 클릭하면 도면 위에 상자가 떠요. 그런데 판정 6건 중 좌표가 있는 건 2건뿐이에요. 나머지 4건(도면 세트 완전성, 결재란 공란, 사양 일관성, 저신뢰 목록)은 특정 영역을 가리키는 판정이 아니거나, 아직 영역 좌표를 안 뽑은 것들이에요.

유혹이 있었어요. "결재란 공란"이면 표제란 오른쪽 아래쯤에 상자를 그려 넣으면 보기 좋잖아요. 안 했어요. 그 좌표는 저희 파이프라인이 뽑은 게 아니라 제가 눈으로 찍은 거니까요. 그런 상자가 하나라도 있으면 다른 상자도 다 그런 거 아니냐는 의심을 받아요. 좌표 없는 판정은 페이지 번호만 표시하고 "좌표를 추정해 그리지 않는다"고 적어 뒀어요.

좌표가 있는 판정의 상자는 부품표 행 위치(src)와 도면 위 부품 영역(rects)이 전부 파이프라인 출력이에요. 라벨에 픽셀 좌표를 같이 찍어요. 확인하고 싶은 분은 원본 크기로 보고 맞춰 볼 수 있게요.

원칙 3. 고객 식별 정보는 가리되 도면은 보여 줘요

샘플에 쓴 도면은 실제 데모용 도면 세트예요. 처음엔 도면 이미지를 아예 빼고 좌표만 빈 캔버스에 그렸어요. 그랬더니 보시는 분이 "이미지가 안 보여요" 하셨고, 맞는 말씀이었어요. 도면 없이 좌표만 있으면 아무 의미가 없어요.

그래서 도면은 보여 주고, 표제란의 회사 로고와 직인 영역만 마스킹했어요. 마스킹 좌표는 뷰어에서 이미지 위에 덮는 방식이에요. 원본 이미지 자체는 별도 비공개 경로에 있고, 그 경로는 검색엔진 차단과 noindex 처리를 했어요. 완벽하진 않아요. 주소를 아는 사람은 원본을 볼 수 있어요. 이건 다음 단계로 마스킹된 사본으로 교체하는 걸 검토 중이에요.

원칙 4. 콘솔과 같은 데이터

리포트 페이지 아래에 "콘솔에서는 도면 위에서 직접 확인합니다"라는 섹션이 있어요. 리포트의 판정과 콘솔의 판정은 같은 데이터 파일에서 와요. 리포트용으로 예쁘게 다듬은 별도 데이터가 아니에요. 그래서 데모에서 콘솔을 열면 리포트와 같은 숫자가 나와요. 이게 안 맞으면 데모에서 바로 들켜요.

구현 메모

Next.js 정적 페이지예요. 판정 데이터는 TypeScript 모듈이라 빌드 시 타입 검사를 받아요. 부품표 행에 rects가 없는데 좌표 마커를 만들려고 하면 빌드가 실패해요.
뷰어는 클라이언트 컴포넌트예요. 이미지 위에 퍼센트 좌표로 상자를 그려서, 화면 크기가 바뀌어도 위치가 맞아요.
저신뢰 목록은 신뢰도 0.85 미만 항목을 데이터에서 필터해서 만들어요. 임계값을 바꾸면 목록이 바뀌어요.

배운 것

마케팅 페이지도 "데이터에서 생성"하면 좋은 점이 많아요. 숫자가 어긋날 일이 없고, 판정이 추가되면 페이지가 따라오고, 무엇보다 "이 숫자 진짜예요?"라는 질문에 코드를 보여 줄 수 있어요. 저희 같은 회사는 그 질문을 받는 게 일이에요.

다음 주는 보험 쪽 이야기예요. 청구 서류 처리에서 정확도보다 누락 체크가 왜 중요한지요.