브라우저 기반 의류 분류 지원 웹앱 프로토타입 연구: 실시간 촬영·분석 기반 분리배출 가이드

2-1 소비자 단계 소재 분류의 필요성과 관련 사례

의류 폐기물의 순환 처리를 위해서는 배출 초기 단계에서의 정확한 소재 확인이 필수적이며, 이는 이후 재사용·재활용 공정으로 이어지는 전체 흐름의 효율성에 직접적인 영향을 미친다[3]. 재활용 체계에서는 수거 이후 진행되는 선별·재질 분리 단계에서 혼입률이 높아질수록 재활용 품질이 저하되는 경향이 있으며, 이러한 후속 단계의 효율 저하는 주로 배출 단계에서의 분류 오류에 기인한다고 보고된다[3],[7]. 즉, 초기 배출 단계의 소재 식별 정확도는 후속 재활용 공정의 성능을 결정하는 중요한 요소로 평가된다.

기존 연구들은 가정 배출 단계에서 소재를 정확히 구분하기 어려운 이유로 라벨 손상, 세탁 과정에서의 물리적 변형, 혼방 섬유 증가 등 외형 기반 판단 한계를 제시하며, 소비자 환경에서 활용 가능한 저비용·비전문가용 분류 보조도구의 필요성을 반복적으로 언급한다[2],[3]. 이러한 문제 제기는 산업 현장에서 NIR 기반 자동 선별 기술이 발전하고 있음에도 불구하고, 가정 단계에서 접근 가능한 실용적 도구가 거의 부재하다는 구조적 공백을 보여준다. 본 연구는 이러한 공백을 보완하기 위해 브라우저 기반 경량 분류·안내 시스템의 구현 가능성을 탐색하고자 한다.

2-2 섬유 분류 기술의 유형: 분광 기반과 카메라 기반

섬유 분류 기술은 크게 분광 기반 분석과 카메라 기반 인식 기술로 구분된다. 분광 기반 방식(NIR, 라만 등)은 의류 섬유의 화학적 조성을 직접 측정하여 높은 정확도를 제공하지만, 장비 비용, 설치 환경, 전문 인력 등의 요구사항으로 인해 가정이나 소규모 현장에서 활용되기 어렵다[8]–[11].

반면 카메라 기반 기술은 촬영 이미지를 활용하여 섬유의 시각적 특징을 분석한다는 점에서 접근성이 높다. 그러나 고해상도 처리와 대규모 모델은 브라우저나 모바일 환경에서 실행하기 어려운 경우가 많다. 이러한 제약을 고려해 본 연구는 경량 구조와 실시간 처리 가능성을 우선시하여 Fashion-MNIST 데이터셋을 기반으로 한 경량 모델을 채택하였다[12]. 해당 데이터셋은 28×28 그레이스케일 구조로 설계되어 브라우저와 같은 제한된 자원 환경에서 추론 성능을 유지하기에 적합하다.

2-3 브라우저 기반 경량 모델의 구조와 동작 원리

브라우저 기반 온디바이스 모델은 입력 이미지를 서버로 전송하지 않고 로컬 장치 내에서 처리하기 때문에 지연 시간을 줄이고 개인정보 유출 위험을 최소화할 수 있다[5],[6]. TensorFlow.js는 WebGL을 활용해 이미지 연산을 병렬 처리하여 모바일 및 저사양 환경에서도 추론 가능성을 확보한다.

본 연구에서는 브라우저 환경의 제약을 고려해 경량 합성곱 신경망(CNN) 구조를 직접 설계하였으며, 입력 이미지는 28×28 그레이스케일로 변환해 연산량을 최소화하였다. 모델의 설계 과정에서는 MobileNet 계열 경량 모델에서 제시된 구조적 개념(예: depthwise convolution, 채널 경량화 기법 등)을 참고하여[13],[14], 실시간 처리에 적합한 소형 구조를 구성하였다. 설계된 모델은 TensorFlow.js 형식으로 변환해 브라우저에서 직접 로드·추론이 가능하며, 정수 양자화 등을 통해 모델 크기와 실행 경로를 단순화하였다. 이러한 구성은 별도 설치 없이도 실시간 분류·안내가 가능한 경량 프로토타입 구축에 적합하다.

2-4 의류 분류 결과의 탄소 환산 및 데이터 기반 포인트 산정

의류 폐기물의 처리 방식에 따른 탄소배출량 차이는 LCA(Life Cycle Assessment) 기반 연구에서 반복적으로 확인되었다. 선행 연구는 의류 폐기물이 매립될 경우 톤당 약 423.4 kg CO₂eq가 배출되며, 재활용 공정 적용 시 톤당 약 1,142.1 kg CO₂eq의 배출 회피 효과가 발생할 수 있음을 제시한다[15]. 또한 재사용·재활용이 신규 섬유 생산을 대체할 때 추가적인 절감 효과가 발생함이 보고된 바 있다[3].

본 연구에서는 이러한 톤 단위 계수를 소비자 단위로 환산하기 위해, 의류 제품군 LCA 연구에서 제시된 평균 무게 범위(0.4~0.6 kg)를 참고해 중앙값인 0.5 kg을 기준으로 적용하였다[16]. 이에 따라 재활용 경로로 전환된 의류 1벌은 약 2.89 kg CO₂eq의 절감 효과가 있는 것으로 추정된다. 이는 특정 소재의 대표값이 아니라 실험 환경에서 절감량을 직관적으로 표현하기 위한 연구용 계산 기준이다.

포인트 산정 규칙(1 kg CO₂eq당 30P)은 환경 행동 연구에서 활용되는 단순 선형 인센티브 구조를 참고해 설정한 시범 규칙이며, 모든 계산은 외부 서버 전송 없이 브라우저 내부에서 수행된다.

3-1 전체 아키텍처

본 연구에서 제안하는 시스템은 의류 촬영 후 전처리, 분류, 신뢰도 검증, 보완 분석, 가이드 생성의 절차로 구성된다. 모든 단계는 외부 서버 연산 없이 브라우저 내부에서 온디바이스 방식으로 수행된다.

촬영된 이미지는 먼저 전처리 모듈을 거쳐 모델 입력 형식에 맞게 변환된다. 전처리에는 비율 유지 리사이즈, 중심·가장자리 크롭, 색상 정규화, 대비 조정, 경계 보존 기반 노이즈 억제가 포함되며, 이는 조명·배경·주름과 같은 촬영 환경의 영향을 완화하기 위한 것이다. 이후 경량 CNN 기반 분류기가 상의, 하의, 원피스, 겉옷 중 하나로 의류를 분류한다.

분류 결과는 예측 신뢰도 기준으로 평가된다. 기준 이상이면 결과가 그대로 채택되고, 기준 미만일 경우 색상·밝기·엣지 같은 단순 특성을 활용한 보완 분석이 수행된다. 다중 크롭 평가와 가중 투표를 통해 불확실성을 낮추며, 여전히 결과가 모호한 경우 재촬영을 안내한다.

모든 연산은 TensorFlow.js 기반으로 로컬 메모리에서 수행되며, 실행 백엔드는 WebGL 또는 WebAssembly 중 환경에 맞게 자동 선택된다. 또한 브라우저 캐시를 활용해 재로딩 비용을 줄여 네트워크 상태와 관계없이 분석 절차가 지속될 수 있도록 하였다.

그림 1은 본 연구에서 제안한 의류 분리배출 지원 시스템의 전체 아키텍처를 보여준다. 사용자가 스마트폰으로 의류를 촬영하면, 입력 이미지는 전처리 과정을 거쳐 분류 모델에 전달된다. 경량 CNN 기반 분류기는 의류 종류를 판별하며, 이후 예측 신뢰도를 기준으로 결과의 안정성이 검증된다. 신뢰도가 충분한 경우 결과가 그대로 채택되고, 낮은 경우에는 보완 분석 절차가 수행된 후 최종 결정 단계로 통합된다. 이러한 과정을 통해 분리배출 가이드가 생성되어 사용자에게 제공된다.

Fig. 1.

EcoWear AI-based hybrid clothing analysis system workflow

플로우차트의 색상 구분은 단계별 역할을 명확히 하기 위한 것으로, 사용자 입력·출력 단계(초록), AI 분석 및 처리 단계(파란색), 판단 및 분기 단계(주황색)를 각각 나타낸다. 이는 전체 흐름에서 각 모듈의 기능적 위치를 직관적으로 이해하도록 돕는다.

본 시스템은 TensorFlow.js 기반 온디바이스 구조로 구현되어 별도 설치 과정 없이 브라우저에서 직접 실행될 수 있으며, 실시간 분류와 가이드 제공이 가능하도록 설계되었다. 이러한 특성은 소비자 환경에서의 접근성과 활용성을 높이는 요소로 작용한다.

3-2 AI 모델 설계

본 연구는 모바일 및 웹 환경에서의 실시간 처리를 위해 경량 합성곱 신경망(CNN) 구조를 설계하였다. AI 모델은 입력 이미지를 분석하여 상의, 하의, 원피스, 겉옷의 네 범주로 의류의 종류(형태)를 분류한다. 이 분류 결과는 분리배출 안내의 기본 입력값으로 사용되며, 주요 소재(Cotton, Polyester, Nylon, Wool, Rayon, Denim, Mixed)에 대한 최종 가이드는 분류된 의류 종류 정보와 표 1의 소재 분류 체계 및 우선 규칙을 결합하여 도출된다. 모델은 파라미터 및 연산량을 제한하고자 입력 이미지를 28×28 크기의 그레이스케일로 변환하며, 분류 범주는 상기 네 항목으로 설정하였다. 설계된 CNN은 여러 개의 합성곱 계층과 풀링 계층을 통해 기본적인 형태·질감 정보를 추출하고, 마지막 완전연결층에서 네 가지 의류 범주에 대한 확률 값을 출력한다. 활성화 함수로는 ReLU를 사용하였으며, 드롭아웃을 적용하여 안정적인 표현력을 확보한다. 이러한 구조적 선택은 브라우저와 같은 제한된 자원 환경에서의 처리에 적합하다.

Table 1.

Material classification scheme (definitions and priority rules)

학습은 경량화 및 실시간 추론에 적합한 Fashion-MNIST 데이터셋을 기반으로 진행하였다. 해당 데이터는 10개 클래스 구조이지만, 분리배출 안내의 행동 단위 대응성을 고려하여 상기 네 범주로 재구성하였다. 학습된 모델은 TensorFlow.js 형식으로 변환해 브라우저에서 직접 로드·추론이 가능하도록 구현하였다. 변환 과정에서는 정수 양자화를 적용하여 모델 크기를 줄이고, 배치 정규화 융합 및 불필요 연산 제거를 통해 실행 경로를 단순화하였다. 이러한 구성은 별도 설치 없이도 웹 환경에서 실시간 분류·안내 서비스를 제공할 수 있도록 하며, 경량 CNN 구조의 브라우저 적용 가능성을 검증하는 데 초점을 둔다.

그림 2는 경량 CNN 기반으로 학습된 의류 분류 모델의 성능 지표를 보여준다. 학습 과정에서 손실값은 지속적으로 감소하고 정확도는 점진적으로 향상되는 흐름을 나타내며, 이는 모델이 안정적으로 수렴했음을 의미한다. 또한 각 클래스별 정확도와 전체 혼동 행렬 결과는 제한된 입력 조건에서도 제안 모델이 안정적인 분류 성능을 유지함을 확인하는 근거로 활용될 수 있다.

Fig. 2.

Training curves (loss and accuracy) of the lightweight CNN-based clothing classifier

3-3 프로토타입 구현

프로토타입은 Progressive Web Application(PWA) 구조로 구현되었다. 핵심 기능은 HTML5, CSS3, JavaScript, TensorFlow.js 기반으로 개발되었으며, 별도의 설치 없이 브라우저에서 즉시 실행된다.

화면 흐름은 촬영, 확인, 분석, 사용자 선택, 분리배출 안내, 보완 분석의 여섯 단계로 구성된다. 사용자가 의류를 촬영하면 확인 단계를 거쳐 분석 모듈에 전달된다. 분석 결과 화면에서는 경량 CNN 기반 분류 결과와 함께 해당 소재에 맞는 분리배출 가이드가 제공된다. 사용자가 직접 선택한 정보는 시스템의 예측 결과와 비교해 기록된다.

예측 신뢰도가 기준치에 미달할 경우 보완 분석 기능이 자동으로 실행되어 색상이나 밝기, 엣지와 같은 기초 시각 정보를 활용해 후보 범주를 재평가한다. 이러한 하이브리드 구조는 입력 조건이 불안정한 상황에서도 분석 흐름을 유지하도록 설계된 것으로, 브라우저 기반 온디바이스 방식의 장점인 낮은 응답 지연과 개인정보 비전송 특성과 함께 안정적인 안내 제공에 기여한다.

그림 3은 사용자가 의류 촬영을 마친 후 나타나는 종류 선택 화면을 보여준다. 촬영된 이미지를 확인하면서 필요에 따라 직접 카테고리를 선택하거나 수정할 수 있으며, 이는 AI 분석 결과를 보완하는 사용자 참여형 기능으로 활용된다.

Fig. 3.

Clothing photography completion and type selection interface

그림 4는 AI 분석이 완료된 뒤 제공되는 최종 분리배출 가이드 화면이다. 분석된 의류의 카테고리와 함께 적합한 분리배출 방법이 함께 안내되며, 사용자는 이를 기반으로 즉시 배출 과정을 수행할 수 있다. 이는 본 연구에서 제시한 시스템의 핵심 기능으로, 실제 행동을 지원하는 단계라 할 수 있다.

Fig. 4.

AI analysis results and waste separation guide provision

표 2는 소재별 분리배출 가이드 문구를 가지고 소재 특징과 이에 따른 배출 가이드에 대해 나타낸 것이다.

Table 2.

Material-specific waste separation guidance phrases

그림 4는 표 2의 “소재별 분리배출 가이드 문구”를 화면 요소로 구현한 결과를 보여준다. 화면의 Recommended method는 표 2의 Basic 경로를 그대로 제시하며, Note에는 Exceptions 항목이 반영된다. Recyclability는 해당 소재의 기본 경로에 대한 재활용 용이성(High/Medium/Low)을 요약한 값이다. 또한 Expected points와 CO₂eq saved는 동일 규칙에 따라 산출된 정량 지표를 함께 제공하여, 사용자가 즉시 행동(수거함 찾기/재분석)으로 이어지도록 한다.

예를 들어 Cotton의 기본 경로는 “Textile bin; clean before disposal.”이며, 오염이나 젖음이 심한 경우 일반폐기로 전환하도록 안내한다. Mixed Material의 경우 두 섬유가 혼합된 특성을 고려해, 코팅·라미네이트가 포함된 경우 일반폐기를 권고하는 보수적 가이드를 제시한다.

4-1 AI 모델 통합 및 동작 확인

본 연구는 경량 CNN 기반 모델을 TensorFlow.js 형식으로 변환하여 브라우저 환경에서 동작하도록 구현하였다. 변환된 모델은 소형 CNN 수준의 비교적 적은 파라미터 수를 가지며, 크롬 브라우저에서 로딩과 추론이 정상적으로 수행되었다. 이는 경량화된 딥러닝 모델이 웹 기반 환경에서도 적용 가능함을 확인한 결과이다.

성능 측정은 크롬 개발자 도구를 활용하여 진행하였다. 평균 추론 시간은 29.7ms였으며, 최단 19.2ms에서 최장 38.6ms 범위로 나타났다. 이는 사용자가 촬영 직후 결과를 확인할 수 있는 수준으로, 실시간 서비스 제공에 적합한 속도이다. 메모리 사용량은 약 104.2MB로 측정되었고, 이는 중저가 모바일 기기에서도 부담 없이 동작 가능한 수준이다.

정확도는 Fashion-MNIST 기준 94%로 확인되었다. 이는 설계된 경량 CNN 모델이 제한된 입력 크기에서도 안정적인 분류 성능을 제공할 수 있음을 의미한다. 본 연구는 모델 성능 평가에 더해, 실제 브라우저 환경에서의 로딩·추론 과정이 안정적으로 이루어짐을 확인했다는 점에서 의의가 있다.

표 3은 개발된 시스템을 크롬 브라우저 환경에서 실행했을 때의 성능 지표를 요약한 것이다. 모델 정확도, 추론 시간, 메모리 사용량 등이 포함되어 있으며, 실험실 환경과 실제 사용 환경 간의 차이를 보여준다. 이를 통해 도메인 차이와 모바일 환경의 제약을 함께 확인할 수 있다.

Table 3.

System performance actually measured in browser environment

그림 5는 브라우저 환경에서 확인된 실시간 추론 성능을 시각적으로 제시한 것이다. 추론 시간의 범위와 메모리 사용량 변화를 통해 제안된 시스템이 모바일 및 웹 환경에서도 원활히 동작할 수 있음을 검증한다.

Fig. 5.

Real-time AI inference performance measured in browser environment

4-2 실제 환경 테스트 결과

실제 스마트폰으로 촬영된 이미지를 기반으로 시스템을 평가한 결과, 학습 데이터(Fashion-MNIST)의 28×28 회색조 이미지와 실제 고해상도 컬러 이미지 간의 차이에서 비롯된 도메인 갭이 확인되었다. 조명 변화, 복잡한 배경, 의류의 주름·변형과 같은 요소는 분류 안정성에 영향을 주었으며, 이는 실사용 환경에서 성능이 일부 저하될 수 있음을 보여준다.

이러한 관찰을 정량화하기 위해 실제 촬영 이미지를 기반으로 소규모 검증셋을 구성하여 실증 테스트를 수행하였다. 총 171장의 이미지로 평가한 결과 전체 정확도는 84.21%였으며, 특정 시각적 구조를 가진 의류(예: 데님 조직)의 경우 재현율이 93.10%로 나타나 실제 환경에서도 일정 수준의 식별 성능을 유지함을 확인하였다. 반면 조도가 낮거나 배경 대비가 충분하지 않은 이미지에서는 오분류가 증가하는 경향이 관찰되었다.

이 결과는 실사용 환경에서 발생하는 도메인 차이의 영향을 정량적으로 확인한 것으로, 향후 데이터 다양성 확대, 전이학습 적용, 신뢰도 임계값(θ) 조정 등을 통해 모델의 견고성을 강화할 필요성을 시사한다. 본 연구의 실제 환경 테스트는 브라우저 기반 시스템의 동작 가능성과 현장 적용 가능성을 검증하기 위한 단계이며, 향후 연구에서는 보다 확장된 실제 촬영 데이터 기반 평가가 필요할 것으로 보이며, 이는 시스템의 실사용 안정성 검증을 위한 중요한 단계가 될 것이다.

그림 6은 실제 촬영 이미지를 기반으로 구성된 검증셋(총 171장)에 대해 수행한 성능 평가 결과를 시각적으로 제시한다. 혼동 행렬에서는 데님(81건)과 논데님(63건)에 대한 True Positive 비율이 확인되며, 전체 정확도는 84.21%로 나타났다. 클래스별 정밀도·재현율·F1-score 비교에서는 데님 이미지를 상대적으로 안정적으로 인식하는 경향이 나타났고(재현율 0.93), 밝기 저하나 배경 대비가 낮은 일부 이미지에서 오분류가 발생하였다. 데이터셋 분포 그래프는 데님(87장)과 논데님(84장)이 유사한 규모로 구성되어 있음을 보여주어, 실증 검증이 특정 클래스에 편향되지 않도록 구성되었음을 확인할 수 있다.

Fig. 6.

Classification performance on real-world denim dataset (confusion matrix and per-class metrics)

이와 같은 결과는 실제 촬영 환경에서 나타나는 도메인 차이가 분류 성능에 영향을 미칠 수 있음을 보여주는 동시에, 제안된 시스템이 실사용 환경에서도 일정 수준의 분류 능력을 유지함을 뒷받침한다.

4-3 하이브리드 시스템 구현 효과

AI 분석이 불확실할 때 안정적인 안내를 유지하기 위해 하이브리드 절차를 적용하였다. 색상 분포, 밝기 히스토그램, 엣지 강도와 같은 단순 이미지 특성을 활용해 후보 범주를 재평가하고, 결과가 애매할 경우 재촬영 안내를 제시한다. 이 절차는 분류 신뢰도가 낮은 상황에서도 기본 가이드를 지속하도록 돕는다.

표 4는 시스템의 주요 구성 요소와 각 특징을 요약한 것이다. AI 분석 모듈은 경량 CNN 추론을 담당하고, 이미지 분석 모듈은 브라우저 Canvas API를 활용해 색상·밝기·엣지 특성을 계산한다. 하이브리드 모듈은 분류 신뢰도에 따라 절차를 전환하며, UI/UX는 PWA 기반 화면 흐름으로 촬영, 확인, 분석 결과, 사용자 선택, 가이드, 보완 분석을 제공한다.

Table 4.

System components and their characteristics

4-4 한계와 확장 가능성

본 연구는 브라우저 환경에서 동작하는 경량 AI 기반 의류 분류 시스템의 설계와 실증 테스트를 중심으로 이루어졌다. 다만 학습 데이터(Fashion-MNIST)와 실제 촬영 이미지 간의 도메인 차이로 인해 일부 환경에서 분류 성능이 저하되는 현상이 확인되었다. 이는 조명, 배경, 의류의 주름 등 현실적인 촬영 조건의 변동성과 결합되어 발생하는 제한점으로 해석된다.

향후에는 실제 촬영 이미지를 기반으로 한 데이터 다양성 확대와 전이학습 적용, 신뢰도 임계값 조정 등을 통해 모델의 견고성을 강화할 필요가 있다. 또한 지자체 분리배출 지침과의 연계를 정교화함으로써 실사용 환경에서의 안내 효과를 더욱 높일 수 있을 것으로 기대된다.