여둘까 Office Layout 20

이 글은 여둘까 Office Layout 시리즈의 21번째 기록입니다. (총 22개)

오늘 한 일

모듈 분리 때 새어 나간 import 세 건을 고침
- 측정선에 마우스를 올리자 콘솔에 같은 오류가 줄줄이 찍혔다. 대조해 보니 같은 종류가 세 곳이었다 — 측정선 위에 마우스를 올렸다 뗄 때, 방 면적 라벨 위를 지날 때, 가구 이름표를 더블클릭할 때
- 자동 점검이 한 번도 밟지 않던 경로라 검사는 계속 통과였다. 셋 중 측정선 호버와 이름표 더블클릭을 회귀 검사에 넣었다(방 면적 라벨 호버는 아직 없다)
거리·면적 재기를 「📐 측정 ▾」 드롭다운으로 되돌림
- 이유: 아이콘만으로는 두 재기 도구가 구분되지 않는다. 아이콘 우선으로 정리한 것의 예외로 둔다
- 메뉴가 닫혀 있어도 재는 중인지 알 수 있게 바깥 버튼이 상태를 표시한다
방 안쪽 채우기
- 벽보다 아래에 방 전체 크기 사각형을 깔아 채운다. 벽 두께나 켜고 끈 면과 무관하게 덮인다
- 도면 위에 흰 바닥을 덮어 아래 선을 가리는 용도라 기본색이 흰색이다
PDF 내보내기 용량 문제 해결
- 압축을 켜지 않아 그림이 무압축으로 들어가고 있었다. 6000×4000 도면 한 장이 91MB에서 0.2MB가 됐다
- 쪽에 넣는 그림은 무손실을 기본으로 두고, 그 결과가 일정 크기를 넘을 때만 손실 압축으로 바꾼다
배치도 여러 개를 한 PDF로 묶을 때 나던 오류 해결
- 같은 원인이었다. 여덟 장 기준으로 다시 재보니 84초에 2.4MB로 나온다
- 저장이 막히면 조용히 끝나던 것을 붙잡아 알리고, 진행 문구와 결과 용량을 표시하게 했다

막힌 부분

파일이 크던 것과 아예 안 만들어지던 것이 한 뿌리였다

방 안쪽 채우기를 넣고 PDF를 뽑아 보니 크기가 너무 컸다. 그걸 고친 직후, 배치도 여러 개를 한 PDF로 묶는 기능에 여덟 개를 넣었더니 이번엔 PDF가 안 만들어졌다. 다른 문제로 보였다.

콘솔에 남은 오류는 RangeError: Invalid string length 한 줄이었다. PDF 만드는 라이브러리가 문서 전체를 자바스크립트 문자열 하나로 이어 붙이는데, 그 문자열에는 최대 길이가 있다. 압축이 꺼져 있으니 7500×5300 도면 한 장이 그 한도의 3분의 1가량을 먹었고, 여덟 장이면 도중에 한도를 넘긴다.

압축 옵션 하나가 빠져 있던 것이 두 증상의 원인이었다.

new window.jspdf.jsPDF({ orientation, unit: "px", format: [w, h], compress: true });

해결: 압축을 켜고, 쪽에 넣는 그림도 도면 성격에 맞춰 고르게 했다
확인: 7500×5300 여덟 장으로 84초·2.4MB. 배포 후 직접 여덟 개를 다시 넣어 보니 제대로 묶여 나왔다

무손실이 항상 작지는 않았다

압축만 켜면 끝인 줄 알았는데, 그림 종류에 따라 유불리가 뒤집혔다. 선 도면은 무손실(PNG)이 0.2MB로 압도적이지만, 스캔한 도면처럼 픽셀마다 잡티가 있으면 그 잡티까지 보존하느라 26MB가 됐다. 같은 그림을 손실 압축(JPEG)으로 담으면 8.6MB였다.

해결: 무손실을 먼저 만들고, 그 결과가 기준을 넘을 때만 손실로 바꿔 담는다
확인: 두 방식을 같은 자리에서 1:1로 잘라 나란히 대조 — 선도 글자도 육안으로 구분되지 않았다

메뉴 안에서 활성 표시를 쓰니 글자가 사라졌다

측정 도구를 드롭다운에 넣고 현재 모드를 표시하려고 기존 활성 표시를 그대로 썼더니, 그 항목의 글자가 안 보였다. 메뉴 항목 스타일이 배경을 지우도록 되어 있어서, 파란 배경은 사라지고 흰 글씨만 남은 상태였다.

해결: 메뉴 안에서 쓸 활성 표시를 따로 뒀다(연한 배경 + 진한 글씨)
교훈: 같은 표시를 다른 문맥에 재사용할 때는 그 문맥이 무엇을 덮어쓰는지 본다

재현이 안 된다고 정상은 아니었다

큰 도면 두 장·세 장으로 여러 번 재현했지만 전부 정상이었다. 실제로 넣은 건 여덟 장이었고, 한도를 넘기는 지점이 그 사이에 있었다.

교훈: 개수·크기가 방아쇠인 문제는 겪은 쪽의 숫자를 그대로 맞춰 재현한다. 그리고 콘솔을 먼저 본다

다음에 할 일

실제 브라우저에서 인쇄 미리보기로 PDF 배포본 모양 확인
파일 선택창 저장은 자동 검사로 안 덮이므로 사람이 확인

Series: 여둘까 Office Layout