박주철

예약과 다건 처리, 주소록, Excel 미리보기, 출력 요청이 한 화면 흐름으로 이어졌습니다. 여기에 스프레드시트 코드까지 첫 진입에 포함돼 업무를 시작하기 전부터 내려받아야 할 JavaScript가 컸습니다.

• 운영 흐름 구현

  공통 화면 틀과 표, 모달, 폼 위에 조회, 예약, 다건 처리, 주소 선택, Excel 미리보기와 출력 요청 변환을 연결했습니다.

• 측정 뒤 지연 로딩 적용

  번들 분석 결과를 보고 페이지 라우트와 스프레드시트 라이브러리를 첫 진입에서 뺐습니다. 인증과 API 초기화까지 더 나누는 안은 첫 클릭 부담이 커 적용하지 않았습니다.

초기 진입에 필요하지 않은 화면과 Excel 코드를 옮긴 뒤 같은 빌드 산출물에서 초기 JavaScript와 gzip 크기를 다시 비교했습니다.

초기 JavaScript

2,405.50 → 616.59 kB

약 74% 감소. 페이지와 스프레드시트 코드 지연 로딩 결과

gzip 압축 기준

815.10 → 204.38 kB

약 75% 감소. 같은 초기 진입 파일 비교

웹에서 출력 버튼이 동작해도 장비가 라벨을 출력했다는 뜻은 아닙니다. 웹과 앱의 메시지, Android 권한, Bluetooth 연결, 프린터 SDK 가운데 어디서 멈췄는지 알 수 있어야 했습니다.

• 웹과 앱의 역할 구분

  업무 화면은 WebView에 두고 출력 데이터 변환, 장비 상태, 프린터 명령은 Android 네이티브 모듈이 맡도록 구현했습니다.

• 실기기 출력 점검

  Android 16/API 36에서 장비 탐색 호출을 추적하고 취소 처리와 Bluetooth 권한을 보완한 뒤 실물 라벨을 출력했습니다.

요청 수신과 장비 출력을 따로 점검해 웹 요청 성공이 물리 출력 성공으로 잘못 기록되지 않게 했습니다.

모바일 출력 검증

Android 16 / API 36

권한·Bluetooth 연결·실물 라벨 출력 흐름 확인

모든 차트에 같은 옵션을 강제하면 설정 화면이 복잡해집니다. 미리보기와 편집 상태가 따로 움직이면 사용자가 현재 결과를 믿기도 어렵습니다.

모든 차트에 같은 옵션을 붙이는 대신 차트 종류에 따라 필요한 설정을 고르고, 데이터가 바뀔 때 미리보기와 설정 화면이 함께 갱신되게 만들었습니다.

• 차트에 맞는 설정만 노출

  현재 차트에서 쓸 수 있는 옵션만 보여주고 여섯 영역의 설정 패널과 미리보기를 연결했습니다.

• 편집 상태를 역할별로 구성

  데이터 필드, 미리보기 렌더링, 설정 상태가 서로 덮어쓰지 않도록 나누고 하나의 편집 모델을 바라보게 했습니다.

옵션 변경, 패널 접기, 드래그 앤 드롭, 툴팁까지 같은 편집 흐름에서 점검했습니다. 작업 속도 향상처럼 측정하지 않은 성과는 적지 않았습니다.

데이터·미리보기·설정

상태 동기화

사용자가 고른 데이터 역할과 설정이 실제 렌더 결과에 이어지도록 정렬

혼합 차트 미리보기

다시 그리는 범위 축소

불필요한 화면 재생성과 스크롤 흔들림을 줄인 범위로 한정

비정형 자료를 모델에 바로 넘기면 근거와 추측이 섞이기 쉽고, 일부 문서만 보강하고 싶을 때도 전체 산출물이 흔들릴 수 있었습니다.

AI가 처음부터 문서를 완성한다고 가정하지 않았습니다. 입력 자료와 생성 결과를 사람이 볼 수 있게 두고 수정 범위를 작게 제한했습니다.

• 저장소를 읽고 먼저 미리보기

  규칙으로 모은 파일과 구조 정보를 AI에 보내기 전에 사용자가 확인하도록 했습니다.

• 검수용 워크북에서 부분 수정

  확인한 자료로 요구사항, 기능, 화면 초안을 만들고 선택한 시트와 셀만 다시 작성하도록 구현했습니다.

자료 수집부터 초안, 워크북 검수, 부분 수정까지 각 단계를 따로 실행해 볼 수 있게 했습니다. 지원하지 않는 항목은 임의로 채우지 않고 사람이 결정할 내용으로 남겼습니다.

자료 수집 → 미리보기

근거 우선

규칙 기반 수집 결과를 먼저 확인한 뒤 AI 초안에 사용

사람 중심 산출물

검수용 워크북

요구사항·기능·화면 단위를 표로 검토하고 export

sheet / cell revision

선택 범위 수정

전체 재생성 대신 수정 대상과 보존 문맥을 함께 전달

여러 외부 API와 기준 데이터 조회가 한 요청 안에 묶이면 일부 지연이 전체 화면 지연으로 번질 수 있었습니다. 운영 반영도 파일 단위로 이뤄져 누락과 설정 노출 위험을 함께 관리해야 했습니다.

외부 API가 느리거나 실패해도 첫 화면 전체가 멈추지 않도록 로딩 순서를 바꾸고, 캐시가 최신인지 만료됐는지에 따라 사용할 값을 골랐습니다.

• 필수 정보부터 표시

  첫 화면에 필요한 정보와 뒤에 불러올 정보를 나누고 최신 캐시, 만료 캐시, 기준 데이터를 각각 다뤘습니다.

• 바뀐 파일만 운영 반영

  전체 파일을 덮어쓰지 않고 배포 목록과 SHA-256 해시로 대상을 좁힌 뒤 주요 화면을 다시 실행했습니다.

서로 다른 날 진행한 두 배포를 합산하지 않았습니다. 각 작업의 파일 수와 해시 결과를 따로 기록했고, 운영 스모크 테스트와 최종 테스트도 별도로 남겼습니다.

기본 정보 운영 점검

약 2.85초 → 0.11초

2026-07-08 당시 첫 요청과 캐시 응답 비교

대기질 운영 점검

약 2.02초 → 0.07초

2026-07-08 당시 첫 요청과 캐시 응답 비교

최종 회귀

131 tests / skipped 1

최종 mvn test로 확인하고 운영 반영 후에는 hash와 smoke를 별도로 확인