해외 직구 물류 업무를 한 시스템에서 다루는 관리자 웹
화면 비공개거래처·고객사 정보와 실제 주문·배송 데이터가 그대로 나오는 업무 화면이라 캡처를 싣지 않습니다.어떤 문제를 어떻게 풀었는지는 아래에 정리해 두었습니다.
현대글로비스의 해외 직구(CBI) 업무에 쓰는 다국어 관리자 웹입니다. 주문 업로드와 확정, 배송 조회, MBL 관리, 계약과 운임, 정산, 알림톡 발송, 거래처·고객사 계정과 권한 관리가 한 시스템에 들어 있습니다. 본사 관리자와 거래처, 고객사가 같은 시스템에 로그인하고, 권한에 따라 보이는 메뉴와 데이터가 다릅니다.
2026년 2월 20일에 프론트엔드 저장소가 만들어졌고, 그날부터 참여했습니다. 택배사 운송장 관리 화면에서 시작해서 거래처·고객사 계정, 계약 관리, 주문 업로드와 배송 관리, 알림 발송 화면을 만들었습니다. 프론트엔드는 세 명이 나눠 맡았습니다.
코드 밖의 일도 많았습니다. 4월에는 매주 화요일마다 현대글로비스와 화면 리뷰 회의를 했고, 그 뒤로도 회의가 이어졌습니다. 회의록은 제가 작성해서 이메일로 공유했습니다. 회의에서 나온 수정은 화면에 반영하고 다음 회의 전에 다시 확인했습니다. 화면별 진행도와 엑셀 다운로드 항목, 내부 테스트 결과는 구글 시트에 정리해 공유했습니다.
프로젝트는 2026년 10월 초에 마무리됐습니다. 인수인계 문서, 신규 개발자 온보딩 가이드, 교육 자료도 그때까지 모두 끝냈습니다.
문제, 선택, 결과 순서로 적었습니다.
결정 01
결정 02
결정 03
택배사별 운송장 번호 대역을 등록하고 관리하는 화면입니다. 이 프로젝트에서 가장 먼저 만든 화면이기도 합니다.
목록에서 사용 여부를 켜고 끄고, 등록과 수정은 드로어 폼으로 처리합니다.
거래처별 계약을 STEP 단위로 나눠 설정합니다. 어디까지 설정했는지 단계 번호로 보여줍니다.
표준 양식 엑셀을 올려 검증하고, 오류가 난 건을 확인한 뒤 주문을 확정합니다. 배송 보류와 취소 이력도 이쪽에서 봅니다.
알림톡 템플릿을 골라 발송하고, 발송 이력과 결과를 확인합니다.
그리드를 우클릭하면 엑셀 다운로드가 나옵니다. 컬럼 표시 여부는 화면별로 설정합니다.
화면을 만드는 일과 따로 맡았던 것들입니다.
현대글로비스와 하는 화면 리뷰 회의의 회의록을 작성해서 이메일로 공유했습니다. 모든 화면에 걸리는 공통 수정을 맨 앞에 두고, 화면별 수정과 다음 회의 일정·목표 순서로 적었습니다.
화면별 진행도와 내부 테스트 결과를 구글 시트로 관리했습니다.
그리드마다 엑셀에 담길 데이터를 시트에 적고 화면 경로 링크를 걸어 검토를 요청했습니다. 7월에는 모든 그리드를 점검해 문서를 마무리했고, 바뀐 화면은 시트에도 반영했습니다.
프론트와 백엔드가 서로 요청을 주고받는 방법을 Jira 사용법 문서로 정리해 공유했습니다. 모든 작업을 올리는 대신 협업 중 논의가 필요한 항목만 올리도록 단순하게 정했고, Slack에는 Jira와 Confluence 알림 채널을 연결했습니다.
프론트엔드 인수인계 문서, 신규 개발자 온보딩 가이드, 교육 자료를 만들어 프로젝트가 끝나기 전에 모두 마쳤습니다. 새 화면을 추가하는 순서, 공통 컴포넌트와 훅, 다국어 문구 등록 절차를 정리했습니다.
Next.js 보안 공지가 나왔을 때 공지된 취약 조건을 이 프로젝트 코드와 대조해서, 영향이 있는지와 업데이트 방법을 보고서로 정리했습니다.
화면이 서른 개를 넘고 회의가 이어지는 프로젝트라서, 무엇이 정해졌는지 남기는 일이 코드만큼 필요했습니다. 회의록은 공통 항목을 맨 앞에 두는 형식으로 자리 잡았고, 진행도와 다운로드 항목은 시트 한 곳에 모았습니다.
공용 훅과 공유 필터는 만들면서 사용법 문서를 같이 썼고, 9월에 그 문서들을 묶어 인수인계 문서와 온보딩 가이드로 정리했습니다. 인수인계 문서는 코드와 한 번 더 대조하면서 고쳤습니다. 현재 구현과 달라진 에러 처리 문서도 그때 표시해 뒀습니다.
프로젝트를 마칠 때까지 자동 테스트는 없었습니다. 인증, 주문, 정산 흐름부터 넣어야 한다고 인수인계 문서에 적어 뒀습니다.