산업 AI 솔루션 프론트엔드 2021 ~ 2022 경력 기술서

한눈에 보기

핵심 역량

1. 판독 화면 (관세청 불법 복제품 판독 시스템)

출처: 이데일리 뉴스 참조

정품과 복제품의 차이는 로고 마감이나 봉제선 같은 미세한 부분에서 납니다. 그런데 화면에서 그 부분을 확인할 방법이 부족했습니다. 그래서 확대/축소와 이미지 크롭을 넣어 판독관이 판정 근거를 화면에서 직접 확인하게 했고, React 비동기 처리로 이미지 최소 5장을 나란히 비교하는 화면을 만들었습니다.

모바일 웹뷰에서는 아코디언 UI로 상위 5개 결과를 요약해 보여 주고 필요할 때 펼치게 했습니다. 당시 보고서에는 탐색 시간 40% 단축으로 남아 있지만 측정 방법은 보존되지 않았습니다.

2. 실시간 판독 (공항 보안 검색 판독 시스템)

출처: SECON 사진 촬영 및 아시아투데이 뉴스 일부 캡쳐

보안 검색은 물건이 지나가는 순간에 결과가 떠야 의미가 있어서, WebSocket 양방향 통신으로 비디오 판독 결과를 실시간으로 받았습니다. 두 각도의 영상을 나란히 봐야 하는 검색 방식에 맞춰 단화면·양화면 모드와 줌을 만들었고, 두 창의 설정은 localStorage와 소켓 메시지로 맞췄습니다. 시스템은 공항에 장비와 함께 납품됐습니다.

• 단화면·양화면 두 창의 설정을 맞춘 방법2022-07-24설정을 localStorage에 두고 소켓 메시지 16갈래로 창끼리 맞췄다 — 상태 동기화를 새로고침으로 푼 구조공항 보안 검색 판독 화면은 단화면과 양화면이 브라우저 창 두 개였습니다. 한쪽에서 토글을 누르면 다른 창도 따라와야 해서, 설정값을 localStorage에 적고 소켓으로 문자열을 되쏘고 storage 이벤트로 새로고침하는 구조였어요. 스냅샷 코드에서 그 세 층을 다시 읽고, 같은 문제를 2년 뒤 어떻게 다르게 풀었는지 이어 적습니다.

3. SPA 전환 (직접 제안)

옛 화면은 판독·검색·통계를 한 HTML 안에 두고 display:none으로 바꿔 가며 보여 주는 바닐라 JavaScript 구조였습니다. 같은 판독 화면이 프로젝트마다 조금씩 다르게 복사되는 것을 보고 React SPA 전환을 제안했고, 2021-04, 2021-10, 2022-03 세 차례에 걸쳐 옮겼습니다. 화면을 컴포넌트로 조립할 수 있게 되면서 회사별 커스텀 요청에 대응하는 속도가 빨라졌습니다.

• 옛 화면과 React SPA가 한 저장소에 같이 있던 이유2021-12-23바닐라 Jinja 화면과 React SPA가 한 저장소에 같이 있었다 — 세 번 시도한 전환이 어디까지 갔나첫 직장에서 공항 보안 검색 판독 시스템의 화면을 React SPA로 바꾸는 일은 한 번에 끝나지 않았습니다. 당시 쓴 지원서를 보면 2021년 4월에 시작해 10월엔 옛 JS를 다시 고치고 2022년 봄에 납품용으로 또 리팩토링한 세 번의 시도였어요. 퇴사 전에 보관한 코드에는 옛 서버 템플릿 다섯 개가 그대로 남아 있었고, 옛 화면과 새 화면이 같은 메뉴를 어떻게 다르게 만들었는지를 코드로 되짚었습니다.

4. 납품처별 설정

납품처마다 보고 싶은 것과 기준이 달랐습니다. 요구가 올 때마다 분기 코드를 넣는 대신, 판독 상자를 그리는 클래스별 색·임계값·표시 여부 세 가지를 설정으로 빼서 받았습니다.

• 판독 상자를 그리는 서버 설정 세 가지2022-04-01메인 화면의 판독 박스는 서버 설정 셋이 그린다 — 색·임계값·켜짐을 화면 열두 곳이 각자 물었다공항 보안 검색 판독 화면에서 AI가 찾은 물체 상자는 클래스마다 색·임계값·표시 여부 세 값으로 그려집니다. 당시 지원서를 보면 임계값을 직접 입력하는 것과 레이블 위치·상자 표시 옵션은 납품처 한 곳의 요구로 들어온 것이었어요. 그 세 값은 서버 설정 한 벌에서 오는데, 화면 쪽 열두 파일이 각자 같은 주소를 부르고 같은 조회 함수를 복사해 갖고 있었습니다. 보일지와 울릴지를 정하는 경계 비교가 파일마다 달랐던 것까지, 남은 코드로만 되짚었습니다.

5. 통계 시각화

금지 품목의 패턴을 볼 수 있도록 직선·도넛·원형 그래프를 만들고, 통계 조건을 사용자가 직접 정하게 했습니다. 세계 보안 엑스포(SECON) 2021·2022 전시 부스에서는 이 화면들을 직접 시연했습니다.