울면서개발하기
VERA ERP 개발일지

메인 화면·출력물·새 디자인, 그리고 공통코드 조회 6배 빠르게

· 커밋 22개

변환 화면이 메뉴에서 열리기 시작하자, 셸 자체에서 빠진 것들이 눈에 띄었다. 로그인하면 처음 보이는 메인 화면, 시작 공지 팝업, 즐겨찾기, 알림, 출력물이다. 이날은 이것들을 원본 넥사크로 화면 그대로 셸에 붙였다. 오후에는 새 디자인 시안을 만들었고, 밤에는 운영에서 잰 숫자를 보고 느린 곳을 줄였다.

한 일

셸: 메인 화면과 상단 기능

  • 메인 화면(업무 목록, 공지 탭, 일정 달력, 즐겨찾기)을 원본 화면 그대로 변환해 띄운다. 열린 메뉴 창이 없을 때 작업 영역에 보인다. 일정 달력의 공휴일 조회도 TO-BE 서버로 옮겼다
  • 로그인 직후 한 번 뜨는 시작 공지 팝업. “다시 보지 않기”도 원본처럼 동작한다
  • 상단바의 즐겨찾기 관리·개인환경설정은 원본 팝업 화면 그대로
  • /show/{메뉴코드} 주소로 들어오면 셸이 뜬 뒤 그 메뉴를 바로 연다(여러 개도 된다)
  • 알림 단추는 따로 만들어 두었던 알림 패널을 버리고 원본 알림 팝업을 쓴다. 실시간 수신은 TO-BE 셸이 받아 원본 팝업의 목록에 이어 준다

출력물: 리포트 도구에서 Jasper 로

레거시 출력물은 상용 리포트 도구를 썼는데, 갖고 있는 것이 기한이 끝난 체험판이라 쓸 수 없었다. 화면 쪽은 원본 그대로 두고, 리포트 뷰어 자리에서 서버가 만든 PDF 를 받아 브라우저로 보여 주게 바꿨다. 양식은 Jasper 로 하나씩 다시 만든다. 첫 예시로 합계잔액시산표를 원본 양식의 배치·열 너비·SQL 그대로 옮겼다. 글꼴은 나눔고딕(OFL)이다. 양식이 아직 없는 출력물은 없다고 알려 준다.

  • 원본 리포트 양식 파일 28개(회계 21, 예산 7)를 저장소에 넣어 다시 만들 기준으로 삼았다. 넣기 전에 접속 정보·연락처 같은 것이 없는지 확인했다
  • 비어 있던 출력 목록 메뉴는 화면 코드와 양식 파일을 대조해 목록 데이터를 다시 만들었다
  • 견적서 PDF 는 레거시가 이미 Jasper 를 쓰고 있어서, 원본 양식 파일을 그대로 읽어 만든다

새 메뉴: 예산집행현황 차트

TO-BE 에만 있는 첫 화면이다. 원본 예산집행현황 화면을 복사해(원본은 그대로) 부서별·계정과목별·예산계획별 탭 위에 가로 막대 차트(예산·집행)와 집행률 점을 얹었다. 이를 위해 Nx 에 차트 컴포넌트를 만들었고, 값 축 두 개(금액 축 + 반대편 비율 축)를 지원한다. 쪽 넘기기(Pagination)와 나눔 막대도 이날 만들었다. 나눔 막대가 없어서 모든 메뉴 창의 도움말 팝업이 초기화 중에 멈추고 있었다.

새 디자인 시안과 메뉴 배치

  • 원본 테마 위에 덮어씌우는 새 스킨을 만들었다. 크기·위치는 그대로 두고(글자 잘림 방지) 색·선·둥글기·그림자만 바꾼다. 강조색은 파랑 하나
  • 개인환경설정의 “메뉴타입·테마” 값을 TO-BE 에서는 메뉴 배치(위쪽+왼쪽 / 왼쪽만)와 화면 디자인(기존 / 새 디자인)으로 다시 정의했다. 공통코드 값은 AS-IS 와 함께 쓰므로 그대로 두고, TO-BE 에서 보이는 이름만 바꾼다

화면 디자이너와 사용자 전환

  • 디자이너를 운영에서도 로그인한 사용자가 볼 수 있게 했다. 저장은 없는 보기 전용이다
  • % 로 적힌 위치·크기도 끌어서 바꿀 수 있게 했다. 부모 영역 크기 기준으로 다시 계산해 단위는 % 로 지킨다
  • 사용자 전환(관리자가 다른 사용자로 들어가 보기)을 TO-BE 서버로 옮겼다. 서버가 전환 권한을 확인하고, 전환 중 다시 전환하는 것은 막는다. 전환 중이면 상단바에 표시하고, 로그아웃 단추가 “원래 계정으로”로 바뀐다

운영 빌드에서 원본 주석 지우기

원본 화면 스크립트의 머리 주석에는 작성자 이름과 연락처가 적혀 있다. 이것이 운영 번들(화면 스크립트는 문자열로 들어간다)에 그대로 나가고 있었다. 운영 빌드에서 JS 파서(acorn)로 주석만 지우고, 결과물에 작성자 표시나 휴대폰 번호 꼴이 남아 있으면 빌드를 멈추게 했다. AS-IS 배포 빌드에도 같은 정리 스크립트를 붙였다.

버그 고친 것

  • 화면 배율 125%·150%·90% 에서 폼에 스크롤바가 생겼다 없어졌다 하며 떨리던 것
  • 예산집행현황이 어느 연도로 조회해도 0건이던 것(아래 기술 메모)
  • Div·Tab 안의 그리드에 행 번호·상태 칸 공통 초기화가 걸리지 않던 것
  • 결의신청의 조회 단추가 아무 반응이 없던 것. 공통 스크립트가 넥사크로 데이터셋의 내부 필드를 직접 읽고 있었다
  • 메뉴 창이 처음에 최대화 크기로 보였다가 줄어들던 것

성능

  • 공통코드 표에 색인을 하나 더했다(아래 기술 메모)
  • 화면 거래 응답의 행을 “열 이름 객체” 대신 “값 배열”로 보내는 방식을 더했다. 요청 머리에 표시가 있을 때만 그렇게 보내서, 배포 전에 열어 둔 화면도 깨지지 않는다. 1.8MB 짜리 큰 조회의 응답 만들기·전송·해석 시간을 줄이려는 것이다

기술 메모

null 과 undefined 의 차이로 0건. 값을 넣지 않은 입력 칸의 초기값을 null 로 두었더니, 화면 스크립트가 escape() 로 감싸 보내면서 문자열 "null" 이 서버로 갔다. SQL 이 사업명을 "null" 로 걸러 늘 0건이었다. 원본 넥사크로는 undefined 라 "undefined" 가 가고, 서버가 이것을 빈 값으로 바꾼다. 초기값을 원본처럼 undefined 로 바꿔 해결했다.

escape(null)      // "null"      → 그대로 조건 값이 된다
escape(undefined) // "undefined" → 레거시 서버가 빈 값으로 바꾼다

스크롤바 떨림, 이번에는 소수점. 폼 영역 크기를 clientWidth 로 읽었는데, 이 값은 반올림한 정수라 화면 배율이 100% 가 아니면 실제 영역보다 1px 미만 클 수 있다. 그만큼 넘쳐 스크롤바가 생기고, 영역이 줄어 안 넘치고, 스크롤바가 사라지고, 다시 넘치는 순환이 돌았다. 운영에서 150% · 1200×640 창으로 재 보니 0.5초에 109번 바뀌었다. ResizeObserver 의 contentRect(소수 값)를 내림해서 쓰니 0번이 됐다.

ro = new ResizeObserver((entries) => {
  const r = entries[entries.length - 1]?.contentRect
  if (r) apply(Math.floor(r.width), Math.floor(r.height))
})

복합 기본키의 둘째 열로만 찾으면 색인을 못 탄다. 공통코드 표의 기본키가 (코드, 상위코드) 순서인데, 화면은 상위코드 IN (...) 으로 조회한다. 그래서 조회할 때마다 6만 행을 훑었다. (상위코드, 정렬순서) 색인을 더하니 서버 대기 시간이 0.21초에서 0.035초로, 결의신청 창이 보이기까지 0.89초에서 0.4초 안팎으로 줄었다. 같은 표를 쓰는 AS-IS 도 함께 빨라졌다.

CREATE INDEX IX_COMM_CODE_UP ON COMM_CODE (UP_CODE, SORT_ORD);

CONNECT BY → WITH RECURSIVE. 출력 목록 조회는 원래 Oracle 계층 쿼리였는데 표가 MySQL 쪽에 있어 재귀 CTE 로 바꿨다. 예시 표로 쓰면 이렇다(MySQL 8).

-- Oracle
SELECT EMPNO, ENAME, LEVEL
  FROM EMP
 START WITH MGR IS NULL
CONNECT BY PRIOR EMPNO = MGR;

-- MySQL 8
WITH RECURSIVE T AS (
  SELECT EMPNO, ENAME, MGR, 1 AS LVL
    FROM EMP
   WHERE MGR IS NULL
  UNION ALL
  SELECT E.EMPNO, E.ENAME, E.MGR, T.LVL + 1
    FROM EMP E
    JOIN T ON E.MGR = T.EMPNO
)
SELECT EMPNO, ENAME, LVL FROM T;

다음에

  • 나머지 출력물 양식을 Jasper 로 다시 만들기
  • 새 디자인을 전체 화면에서 점검하기