산업 AI 솔루션 기업 프런트엔드 2021–2022

한눈에 보기

이 시기에 대해 먼저 적어둘 것이 있습니다. 여기서 한 일은 대부분 "주어진 요구사항을 화면으로 만드는" 작업이었습니다. 기술 선택을 놓고 대안을 저울질하기보다, AI 판독 결과를 사람이 빠르게 확인할 수 있는 화면을 만드는 데 시간을 썼어요. 그중 스스로 판단해 제안하고 관철한 건 SPA 전환 하나였고, 그게 이 시기의 가장 큰 배움이었습니다.

두 프로젝트 모두 AI 모델이 낸 결과를 사람이 판정하는 화면이라는 공통점이 있었습니다. 모델 정확도가 아무리 높아도, 판독관이 화면에서 확인하는 데 오래 걸리면 시스템이 안 쓰입니다. 프런트엔드가 성능의 일부인 도메인이었어요.

1. 관세청 불법 복제품 판독 시스템

출처: 이데일리 뉴스 참조

기술 스택: JavaScript, React, Redux, Bootstrap

1.1 판독 속도 개선 — 사람이 확인하는 시간을 줄이기

문제. 복제품 판독 속도가 느렸고, 판별 과정의 신속성과 정확성이 부족해 사용자가 불편을 겪었습니다. 정품과 복제품의 차이는 로고 마감이나 봉제선 같은 미세한 부분에서 나는데, 화면에서 그걸 확인할 방법이 부족했어요.

해결.

• 카메라 확대/축소와 이미지 크롭 기능을 추가해 판독관이 미세한 특징을 직접 확인하도록 했습니다. 판정 근거가 되는 부분을 눈으로 볼 수 있어야 결과를 신뢰할 수 있다고 봤어요.
• React와 비동기 처리로 최소 5개 이미지를 동시에 비교 분석하는 인터페이스를 구현했습니다. 한 장씩 열어보는 방식이면 비교 자체가 성립하지 않았습니다.

성과. 확대/축소·크롭 도입으로 판독 결과의 근거를 화면에서 직접 확인할 수 있게 됐습니다. AI가 낸 결과를 사람이 검증할 수 있는 형태로 보여주는 게 이 화면의 핵심이라는 걸 이때 이해했어요.

1.2 아코디언 UI — 많은 판독 데이터를 좁은 화면에

문제. 판독 데이터가 많은데 모바일 웹뷰로도 봐야 했습니다. 좁은 화면에서 다량의 결과를 어떻게 보여줄지가 문제였어요.

해결. React와 Bootstrap 기반 아코디언 UI로 상위 5개 판독 결과를 요약해 표시하고, 필요할 때 펼쳐 세부를 보도록 했습니다. 전부 펼쳐 보여주면 스크롤이 감당이 안 되고, 요약만 보여주면 판정을 못 하니 접었다 펴는 구조가 맞았습니다. 모바일 웹뷰 최적화로 공간 활용을 극대화했고요.

성과. 당시 보고서에 사용자 탐색 시간 40% 단축으로 기록돼 있습니다 — 다만 측정 방법은 남아 있지 않아서, 숫자보다는 "요약 우선 + 필요 시 확장" 구조가 모바일에서 통했다는 사실 쪽에 무게를 둡니다.

2. 공항 보안 검색 판독 시스템 (장비 납품)

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

기술 스택: JavaScript, React, Redux, Bootstrap, WebSocket

2.1 SPA 전환 — 이 시기에 제가 제안해서 관철한 작업

문제. 기존 화면이 바닐라 JavaScript 기반이라 로딩이 느리고 사용자 경험이 제한적이었습니다. 화면을 이동할 때마다 전체를 다시 그리니, 실시간 판독 화면과 통계 화면을 오가는 사용 패턴에서 특히 답답했어요.

해결. React 기반 SPA로 전환하고 클라이언트 측 렌더링으로 성능을 개선했습니다. 컴포넌트 기반 아키텍처를 도입해 개발 효율과 유지보수성도 함께 올렸습니다.

전환을 제안할 때 근거로 든 건 두 가지였습니다. 하나는 화면 전환이 잦은 사용 패턴이라 페이지 단위 로드가 구조적으로 불리하다는 것, 다른 하나는 같은 판독 화면이 프로젝트마다 조금씩 다르게 복사되고 있어서 컴포넌트로 묶지 않으면 계속 늘어난다는 것이었어요. 후자는 실제로 커스텀 요청이 늘면서 체감이 컸습니다.

성과. 페이지 탐색이 빨라지고 즉각적인 피드백이 가능해졌습니다. 무엇보다 화면을 조립해서 만들 수 있게 되면서 회사별 커스텀 요청에 대응하는 속도가 달라졌어요.

2.2 웹소켓 실시간 비디오 판독

문제. 비디오 판독 데이터를 실시간으로 사용자에게 제공해야 했습니다. 보안 검색은 물건이 지나가는 그 순간에 결과가 떠야 의미가 있으니, 폴링으로는 성립하지 않는 요구사항이었어요.

해결. 웹소켓 양방향 통신으로 실시간 데이터를 전송했습니다. 단화면·양화면 모드를 구현하고 줌/확대를 붙여 편의성을 높였습니다. 양화면 모드는 두 각도의 영상을 나란히 봐야 하는 검색 방식 때문에 필요했습니다.

성과. 물건이 지나가는 중에 판독 결과를 확인할 수 있게 됐습니다. 탐지 정확도는 모델의 몫이라 화면 작업의 성과로 적지 않습니다.

2.3 사용자 정의 설정

문제. 납품처마다 요구가 달랐습니다. 장비 구성도, 통계로 보고 싶은 것도 제각각이었어요.

해결. 카메라 위치, 통계 설정, 2D/3D 비디오 판독 등 옵션을 설정으로 뺐습니다. 요구가 올 때마다 분기 코드를 넣는 대신 설정 항목을 늘리는 방향으로 갔어요.

성과. 설정으로 대응할 수 있는 요청이었기 때문에, 회사별 커스텀 요청이 늘어도 분기 코드는 늘지 않았습니다.

2.4 데이터 시각화

문제. 비디오 판독 데이터로 금지 품목의 패턴을 분석해야 했습니다.

해결. 직선·도넛·원형 등 그래프를 다양화하고, 사용자가 통계 조건을 직접 설정하는 기능을 구현했습니다.

성과. 통계 조건을 사용자가 직접 바꿀 수 있게 됐습니다.

2.5 세계 보안 엑스포(SECON) 2021–2022 참여

전시 부스에서 시스템을 직접 시연했습니다. 만든 화면을 실제 사용자 앞에서 설명해보는 경험이었고, 그 자리에서 나온 질문들이 이후 설정 기능 방향에 영향을 줬습니다. 기술 교류로 네트워킹이 넓어졌고 새 프로젝트 문의와 기획 기회로도 이어졌습니다.

3. 이 시기에 배운 것

• AI 제품에서 프런트엔드는 결과를 전달하는 껍데기가 아니라 판정 과정의 일부입니다. 모델이 아무리 정확해도 판독관이 근거를 화면에서 확인하지 못하면 그 결과는 신뢰받지 못해요. 확대/축소와 크롭을 넣은 게 그래서였습니다.
• 같은 화면이 프로젝트마다 복사되고 있으면 그건 구조 신호입니다. SPA 전환을 제안한 실질적인 근거가 성능보다 이쪽이었고, 실제로 효과도 그쪽이 컸습니다.
• 커스텀 요청이 늘어나는 게 항상 나쁜 신호는 아닙니다. 분기 코드로 받으면 부채가 되고, 설정으로 받으면 제품이 됩니다.
• 그리고 솔직히, 이 시기의 저는 주어진 요구사항을 구현하는 데 대부분의 시간을 썼습니다. 대안을 비교하고 근거를 남기는 습관은 이후에 생겼어요. 그래서 이 문서에는 "왜 그걸 골랐나"가 SPA 전환 말고는 거의 없습니다. 그게 이 시기의 정직한 기록이라고 생각합니다.