사용성과 레이아웃 명확성 향상을 위해 인지 및 시각적 디자인 원리를 통합한 자동 사용자 인터페이스 프로토타이핑 프레임워크

요약

본 연구는 인지 설계 원칙, 지각적 색상 모델링 및 딥러닝을 통합한 자동화된 사용자 인터페이스 프로토타이핑 프레임워크를 제시합니다. 이 시스템은 접근성, 레이아웃 명확성, 색상 조화 및 교차 화면 일관성을 개선하여 일관성 있고 사용자 중심적인 인터페이스 설계를 가능하게 합니다.

초록

효과적인 사용자 인터페이스(UI) 디자인은 시각적 매력, 인지적 사용성, 레이아웃 일관성 사이의 조화로운 균형을 필요로 합니다. 그러나 현재의 자동 UI 생성 방식은 주로 시각적 외관이나 컴포넌트 탐지에 집중하고 있으며, 인지 원칙, 색상 지능 및 구조적 추론을 통합한 통일된 프레임워크가 부족한 실정입니다. 또한, 기존 방법들은 제한적인 레이아웃 일반화, 낮은 해석력, 정적인 색상 선택, 그리고 화면 간의 일관성 없는 동작이라는 문제점을 가지고 있습니다. 이러한 맥락에서 본 연구는 Faster region-based convolutional neural network (Faster R-CNN) 기반의 컴포넌트 탐지와 CIECAM02 균일 색 공간 (CAM02-UCS) 기반의 지각적 색상 모델링을 통합하고, 인지 및 시각적 디자인 원칙을 강화한 자동 UI 프로토타이핑 프레임워크를 제안합니다. Faster R-CNN은 대규모 인터페이스 데이터셋에서 UI 컴포넌트를 식별하고 계층 구조를 추론하는 데 사용됩니다. 강화된 색상 생성 모듈은 브랜드 또는 참조 이미지를 분석하여 CAM02-UCS를 통해 지각적으로 균일하고 조화로우며 사용성을 준수하는 색상 테마를 보장합니다. 이러한 결과물은 게슈탈트 그룹화, 핏츠의 법칙(Fitts’ law) 및 힉의 법칙(Hick’s law), 주의 집중 기반 간격 조정, 시각적 계층 구조 모델링을 포함한 인지 디자인 규칙을 통해 추가로 최적화되어, 정교하고 작업 지향적인 UI 레이아웃을 자동으로 생성합니다. RICO, ENRICO 및 Guo의 UI Color 데이터셋을 대상으로 수행한 실험 결과, 제안된 시스템은 92.4%의 컴포넌트 탐지 정확도를 달성하였으며, 레이아웃 명확성과 읽기 순서 정확도를 18.7% 향상시켰고, 베이스라인 방법들과 비교해 디자이너로부터 24.5% 더 조화롭다는 평가를 받은 색상 팔레트를 생성했습니다. 사용자 평가에서도 인지 부하가 31% 감소하고 화면 간 디자인 일관성이 28% 증가한 것으로 나타났습니다. 이러한 결과는 딥러닝 기반의 구조적 이해를 지각 기반 색상 모델링 및 인지 디자인 원칙과 결합함으로써 매우 효율적이고 심미적으로 일관되며 사용자 친화적인 UI 프로토타입을 생성할 수 있음을 입증합니다. 본 프레임워크는 지능적이고 인간 중심적인 자동 UI 프로토타이핑을 위한 새로운 엔드-투-엔드(end-to-end) 접근 방식을 제시합니다.

서론

그래픽 사용자 인터페이스(GUI)는 인간과 컴퓨터 시스템 사이의 기본적인 통신 매체 역할을 하며, 사용성, 접근성 및 전반적인 사용자 경험(UX)에 상당한 영향을 미칩니다^1,2. 현대의 소프트웨어 시스템은 사용자를 유치하고 유지하기 위해 직관적이고 시각적으로 매력적인 인터페이스에 의존합니다. 전통적인 UI 디자인은 그래픽 레이아웃을 생성한 후, 엔지니어가 이를 프런트엔드 코드로 변환하는 과정을 거칩니다. 하지만 운영 체제마다 플랫폼별 프로토콜이 다르기 때문에 반복적인 적응 과정이 필요하며, 이는 개발 복잡성과 노력의 증가로 이어집니다. 이에 따라 수동 작업을 줄이고 개발 효율성을 높이기 위한 자동화된 UI 코드 생성이 중요한 연구 방향으로 부상했습니다.

자동화된 UI 생성의 초기 접근 방식은 영역 탐지 및 분류를 위해 전통적인 이미지 처리 기술과 딥러닝 모델을 결합하였습니다^3,4. 현재 GUI 코드 생성을 위한 주된 전략은 컴퓨터 비전 기술을 적용하여 UI 이미지를 분석하고 이를 구조화된 프런트엔드 표현형으로 변환하는 것입니다^5,6,7. 이미지 처리 방식은 수작업으로 설계된 특징에 의존하는 반면, 딥러닝 접근 방식은 대규모 데이터셋에서 계층적 표현을 추출합니다. 이에 따라 연구자들은 견고성과 정확도를 향상시키기 위해 딥러닝과 도메인 특화 이미지 처리 기술을 결합한 하이브리드 접근 방식을 탐구해 왔습니다.

색상은 UI 디자인의 또 다른 중요한 요소이며, 사용자의 인지, 사용성 및 미적 호감도에 영향을 미칩니다¹. 시각적 입력값의 색조와 맥락이 다양할 때 이미지 콘텐츠와 UI 색상 체계 간의 일관성을 유지하는 것은 어려운 과제가 됩니다^8,9,10. 이에 따라 자동화된 색상 팔레트 생성 및 지각적 색상 모델링에 관한 상당한 연구가 진행되어 왔습니다. 기존의 색상 생성 방법에는 CIELAB 색 공간에 기반한 기술들이 포함됩니다¹¹. 다른 접근 방식으로는 k-means와 같은 클러스터링 알고리즘을 사용하여 이미지에서 지배적인 색상을 추출하는 방법이 있습니다¹². 그 결과, 최근 연구에서는 색상 모델링을 위해 데이터 기반의 머신러닝 접근 방식을 점점 더 많이 채택하고 있습니다.

이와 병행하여, 딥러닝 접근 방식은 UI 컴포넌트 검출 및 레이아웃 이해도를 크게 향상시켰습니다. 신경망은 모바일 인터페이스의 더 정확한 구조적 파싱을 가능하게 했습니다¹³. 하지만 이러한 방법들은 주로 검출 정확도에 집중하며, 인지적 사용성, 레이아웃 계층 구조 및 상호작용 효율성과 같은 더 높은 수준의 측면을 간과하는 경우가 많습니다. UI 레이아웃 합성을 위한 생성 모델 또한 제안되었으나^14,15, 이러한 모델들은 화면 간 일관성을 유지하고 해석 가능한 디자인 결정을 제공하는 데 어려움을 겪고 있습니다¹⁶. 다른 접근 방식들은 시각적 유사성이나 렌더링 품질에 집중하지만, 컴포넌트 시맨틱, 색상 조화 및 사용성 제약을 결합한 통합된 프레임워크가 부족한 실정입니다¹⁷. 텍스트 인식 또한 UI 콘텐츠를 이해하는 데 중요합니다. 합성곱 재귀 신경망(CRNNs)과 같은 기술은 인터페이스 화면 내의 복잡한 텍스트 패턴을 정확하게 인식할 수 있게 합니다^18,19,20.

스케치나 이미지로부터 UI 코드를 생성하기 위해 여러 시스템이 제안되었습니다. Sketch2Code는 객체 탐지를 사용하여 스케치를 코드 표현으로 변환하지만^21,22, 이미지 품질에 민감합니다. REDRAW는 합성곱 신경망과 순환 신경망을 결합하여 구조화된 UI 표현을 생성하는 데이터 수집 및 모델 학습을 위한 자동화된 파이프라인을 제공합니다^23,24. 이후의 연구에서는 생성된 UI 품질을 평가하기 위해 개선된 평가 지표가 도입되었습니다²⁵. 보다 최근의 접근 방식으로는 오토인코더 방법이 없는 확산 레이아웃 트랜스포머, 트랜스포머 기반 GUI 배치 그래프를 이용한 GUI 레이아웃 생성, 대규모 언어 모델 기반 UI 레이아웃 생성과 같은 레이아웃 생성을 위한 확산 기반 및 트랜스포머 기반 모델이 포함됩니다^26,27,28. 이러한 접근 방식들에 대한 비교 개요는 표 1에 제시되어 있습니다.

참고 문헌 및 핵심 방법(들)	목적	장점	단점
자동화된 이미지 기반 사용자 인터페이스 색상 테마 생성: 주요 색상 추출 및 CAM02-UCS 지각적 색상 모델링¹	참조 이미지로부터 조화로움과 사용성을 최적화하여 UI 색상 테마를 자동으로 생성합니다.	강력한 지각적 근거(CAM02-UCS); 조화와 사용성(대비 및 다양성)의 균형을 명시적으로 조절; 웹 기반 구현 및 디자이너 평가 포함.	색상/테마에만 집중하며(레이아웃이나 컴포넌트 구조 제외), 엔드투엔드(end-to-end) 학습 기반의 UI 합성보다는 규칙/휴리스틱 기반의 방식입니다.
디커플링된 확산 모델을 통한 레이아웃 생성의 통합 (LDGM)²⁵	그래픽 장면 및 사용자 인터페이스(UI)를 위한 통합적이고 유연한 레이아웃 생성.	레이아웃 생성을 위한 최첨단 다양성과 제어 가능성을 제공하며, 조건부 생성 및 다양한 속성 유형을 지원합니다.	확산 기반 출력물은 제약을 가하지 않을 경우 정렬 또는 세밀한 레이아웃 문제가 발생할 수 있으며, 모델 복잡도와 추론 비용이 더 높습니다.
오토인코더 방법론을 제외한 확산 레이아웃 트랜스포머: 레이아웃 생성을 위한 트랜스포머와 확산 모델의 결합 (오토인코더 미사용)²⁶	레이아웃 생성 벤치마크의 충실도 및 정렬 개선 (FID, 정렬 및 중첩 지표).	인접 객체 간의 의미적 상관관계를 더 잘 포착하며, FID 및 정렬 지표에서 우수한 성능을 보임.	UI 시맨틱보다는 레이아웃 기하학적 구조(위치, 크기, 범주)에 주로 초점을 맞춥니다.
GUI 배치 그래프(GUI-AGs)²⁷ 기반의 트랜스포머 모델을 이용한 GUI 레이아웃 생성	디자이너를 지원하기 위해 위치/그래프 제약 조건으로부터 GUI 레이아웃을 생성합니다.	그래프 표현은 관계적 제약 조건을 포착하며, 트랜스포머는 제약 조건에 기반한 유연한 생성을 가능하게 합니다.	설계자로부터 명시적인 제약 그래프(constraint graphs)가 필요할 수 있으며, 색상 및 사용성 지표에 대한 강조가 제한적임.
UI 문법 가이드 기반 LLM을 이용한 UI 레이아웃 생성: 대규모 언어 모델(LLM) + 계층적 UI 문법²⁸	레이아웃 생성을 위한 대규모 언어 모델(LLM)을 탐구하고, 문법 표현을 통해 설명 가능성과 제어 능력을 향상시킵니다.	높은 수준의 제어 가능성과 설명 가능성; 거대언어모델(GPT 유형)의 인컨텍스트 학습(in-context learning)을 활용할 수 있음.	제한적인 경험적 검증을 거친 초기 단계의 연구; 문법 설계 및 UI 전반의 견고성

표 1: 기존 UI 색상 모델링 및 레이아웃 생성 방법의 비교. 이 표는 색상 테마 생성, 확산 기반 레이아웃 생성, 트랜스포머 기반 방법 및 대규모 언어 모델 가이드 레이아웃 생성을 포함한 사용자 인터페이스 디자인의 대표적인 접근 방식들을 요약합니다. 각 방법에 대해 기반 기술, 목적, 장점 및 한계점이 제시되어 있으며, 지각 모델링, 레이아웃 생성 능력, 제어 가능성 및 사용성 고려 사항의 차이점을 강조합니다.

이러한 진보에도 불구하고 한 가지 핵심적인 한계가 남아 있는데, 그것은 구성 요소 탐지, 지각적 색상 모델링, 인지적 디자인 원칙 및 멀티스크린 레이아웃 일관성을 단일 엔드-투-엔드 프레임워크 내에서 공동으로 통합한 기존 시스템이 없다는 점입니다¹. 현재의 접근 방식은 대개 탐지, 레이아웃 또는 색상과 같은 한두 가지 측면만을 최적화하며, 이들 간의 상호 의존성은 고려하지 않습니다. 이러한 단절은 통합된 인간 중심의 자동 UI 프로토타이핑 시스템 개발에 있어 중대한 연구 공백이 있음을 시사합니다. 특히 게슈탈트 법칙, 피츠의 법칙 및 힉의 법칙과 같은 인지적 디자인 원칙들은 계산 모델에 공식적으로 통합되기보다 개념적으로만 다뤄지는 경우가 많습니다.

이러한 한계를 해결하기 위해, 본 연구는 컴포넌트 탐지, 지각적 색상 모델링 및 인지적 디자인 원칙을 단일 시스템 내에 통합한 엔드 투 엔드(end-to-end) 자동 UI 프로토타이핑 프레임워크를 제안합니다. 이 프레임워크는 레이아웃 품질 개선, 인지 부하 감소, 색상 조화 향상 및 전반적인 사용성 증대를 위해 설계되었습니다. 이러한 개선 사항은 RICO, ENRICO 및 Guo의 UI 색상 데이터셋을 이용한 실험을 통해 검증되었으며, 이는 단일 자동 UI 프로토타이핑 파이프라인 내에 구조적, 지각적 및 인지적 측면을 결합하는 것의 효과성을 입증합니다. 딥러닝 기반의 컴포넌트 탐지, 지각적 색상 모델링 및 인지적 디자인 원칙을 통합 프레임워크 내에 통합하면 기존 방식에 비해 UI 프로토타입의 품질이 유의미하게 향상될 것이라는 가설을 세웠습니다. 구체적으로, H1은 이 프레임워크가 정렬, 그룹화 및 읽기 순서를 포함한 레이아웃 품질을 향상시킨다는 점을 제안합니다. H2는 이 프레임워크가 사용자의 인지 부하를 줄여준다는 가설을 세웁니다. H3는 지각적 색상 모델링이 색상 조절과 시각적 조화를 개선한다는 점을 시사합니다. H4는 UI 프로토타입의 전반적인 사용성과 심미적 품질이 향상됨을 명시합니다.

프로토콜

본 연구는 공개적으로 이용 가능한 데이터셋을 사용하며, 인간 또는 동물 피험자를 포함하지 않습니다.

제안된 자동화 UI 프로토타이핑 프레임워크는 딥러닝 기반의 구조적 이해, 지각적으로 균일한 색상 모델링 및 인지 설계 원칙을 통합하여 일관성 있고 사용자 중심적인 인터페이스 프로토타입을 생성합니다. 이 방법론은 먼저 RICO 및 ENRICO 데이터셋으로 학습된 Faster R-CNN 아키텍처를 사용하여 UI 구성 요소를 탐지하고 이들의 계층적 관계를 추출함으로써, 다양한 화면 레이아웃을 정확하게 해석합니다. 탐지된 구성 요소들은 이후 색상 지능 모듈에 의해 처리되며, 이 모듈은 브랜드 또는 이미지 기반의 색상 단서를 추출하고 CAM02-UCS를 사용하여 지각적 유사성을 모델링하며, 조화롭고 대비가 명확하며 접근성 표준을 준수하는 색상 팔레트를 생성합니다. 이어서 게슈탈트 그룹화 법칙, 피츠의 법칙, 힉의 법칙, 주의 기반 간격 및 시각적 계층 구조 제약 조건을 포함한 인지 설계 원칙이 인지 최적화 엔진을 통해 적용되어 공간적 배치와 구성 요소의 정렬을 정교화합니다. 마지막으로, 레이아웃 추론 계층이 구조적, 지각적 및 인지적 제약 조건을 통합하여 사용성, 심미성 및 기능적 명확성의 균형을 맞춘 멀티스크린 일관성 UI 프로토타입을 생성합니다. 이러한 통합 파이프라인은 지각적 일관성을 보장하고 인지 부하를 줄이며 인간 중심 설계 원칙을 준수합니다. 제안된 방법의 전체 워크플로우는 그림 1에 나와 있습니다.

그림 1. 제안된 자동화 사용자 인터페이스 프로토타이핑 프레임워크의 전체 아키텍처. 이 다이어그램은 입력 UI 이미지부터 시작되는 전체 파이프라인을 보여줍니다. 인터페이스 요소를 식별하기 위해 Faster R-CNN을 사용하여 컴포넌트 검출을 수행합니다. 검출된 컴포넌트는 이후 계층 및 레이아웃 추출을 위해 CAM02-UCS 기반의 지각 모델링을 통해 처리됩니다. 이어서 게슈탈트 원리, 피츠의 법칙(Fitts’ law), 힉의 법칙(Hick’s law) 및 주의 집중 기반 조정을 통해 인지적 최적화가 적용됩니다. 화살표는 모듈 간의 데이터 흐름을 나타내며, 결과적으로 최종 UI 프로토타입 출력이 생성됩니다. 여기를 클릭하여 이 그림의 더 큰 버전을 확인하십시오.

프레임워크 개요

그림 1은 원본 UI 스크린샷을 인지적으로 정제된 프로토타입으로 변환하는 제안된 자동화 UI 프로토타입 제작 프레임워크의 엔드-투-엔드 워크플로우를 보여줍니다. 프로세스는 입력 UI 이미지에서 시작하며, 이는 Faster R-CNN 기반의 컴포넌트 검출 모듈로 전달됩니다. 이 모듈은 버튼, 아이콘, 텍스트 필드 및 컨테이너와 같은 인터페이스 요소를 식별하고, 이에 해당하는 경계 상자(bounding box)와 클래스 레이블을 출력합니다. 검출된 컴포넌트들은 이후 계층 및 레이아웃 추출 단계에서 처리됩니다. 시스템은 공간적 관계와 구조적 패턴을 기반으로 사용자가 화면 구성을 자연스럽게 인식하는 방식을 반영하는 계층적 레이아웃 트리를 구축합니다. 이러한 표현 방식은 UI 요소 간의 시각적 그룹화와 구조적 의존성을 포착합니다. 추출된 레이아웃은 인간 중심 설계 원칙을 적용한 인지적 최적화를 통해 정제됩니다. 여기에는 시각적 클러스터링을 위한 게슈탈트 그룹화, 터치 대상 크기 및 접근성 최적화를 위한 피츠의 법칙, 의사결정 복잡성 감소를 위한 힉의 법칙, 그리고 시각적 계층 구조 개선을 위한 주의 집중 기반 간격 조정이 포함됩니다. 그 결과, 레이아웃은 사용자 상호작용에 있어 더욱 직관적이고 읽기 쉬우며 효율적으로 변합니다. 마지막으로, 최적화된 레이아웃은 지각적 색상 모델링과 결합되어 일관된 UI 프로토타입을 생성합니다. 이렇게 생성된 인터페이스는 구조적으로 정확하고 시각적으로 조화로우며 인간의 사용성 기대치에 부합합니다.

해당 프레임워크는 Ubuntu 22.04 환경에서 PyTorch 2.0을 사용하여 구현되었습니다. 실험은 NVIDIA RTX 4090 GPU (24 GB VRAM)가 탑재된 시스템에서 수행되었습니다. Faster R-CNN 모델은 ImageNet 데이터셋으로 사전 학습된 ResNet-50 백본을 사용하였습니다. 학습은 학습률 0.001, 배치 크기 16으로 설정하고 최대 60 epoch까지 확률적 경사 하강법(SGD) 옵티마이저를 사용하여 진행되었습니다. 과적합을 방지하기 위해 전체 데이터의 20%로 구성된 검증 세트를 사용하여 조기 종료(early stopping)를 적용하였습니다. 학습은 최대 60 epoch까지 수행되었으나, 일반적으로 검증 손실에 기반한 조기 종료를 통해 그 이전에 수렴이 이루어졌습니다. 모멘텀과 가중치 감쇠(weight decay)는 각각 0.9와 0.0005로 설정하였습니다. 데이터 증강으로는 정규화, 무작위 수평 뒤집기, 무작위 크롭 및 리사이징이 포함되었습니다.

데이터셋 준비

제안된 자동 UI 프로토타이핑 프레임워크를 지원하기 위해 ENRICO²⁹, RICO³⁰, 그리고 Guo의 UI Color Dataset¹이라는 세 가지 상호 보완적인 데이터셋이 활용되었습니다. RICO 데이터셋은 9,700개의 애플리케이션에서 수집된 66,261개의 Android UI 화면을 포함하고 있으며, 컴포넌트 검출 및 계층적 레이아웃 추출을 위한 대규모 다양성을 제공합니다. ENRICO는 20개의 디자인 패턴으로 수동 분류된 1,464개의 고품질 UI 스크린샷을 포함하여, 구조적 추론 및 레이아웃 일관성 모델링에 대한 일반화 능력을 향상시킵니다. Guo의 UI Color Dataset은 색상 테마가 어노테이션된 128개의 엄선된 UI 이미지로 구성되며, 이는 지각적 색상 모델링 및 팔레트 평가에 사용됩니다. 다만, 상대적으로 작은 규모로 인해 이 데이터셋은 레이아웃 특성에서 일부 가변성을 유발할 수 있습니다. 본 연구를 위해 훈련 및 평가용으로 총 5,128개의 화면으로 구성된 결합 데이터셋이 준비되었습니다. 구체적으로, RICO의 이미지 약 4,000장은 컴포넌트 검출을 위한 Faster R-CNN 모델 훈련에 사용되었고, ENRICO의 이미지 1,000장은 레이아웃 패턴 학습 및 구조적 일관성 모델링에 사용되었으며, Guo 데이터셋의 이미지 128장은 색상 평가 작업에 사용되었습니다. 모든 이미지는 480 × 800 픽셀의 해상도로 정규화되었으며, 균일한 sRGB 색 공간으로 변환되었고, 데이터셋 간의 호환성을 보장하기 위해 표준화된 바운딩 박스와 계층적 메타데이터로 재어노테이션되었습니다. 본 연구에 사용된 데이터셋의 개요는 Table 2에 제공되어 있습니다. RICO 데이터셋은 UI 컴포넌트의 대규모 검출 및 구조 분석을 지원하며, ENRICO는 레이아웃 패턴 인식 및 화면 간 일관성 유지 능력을 강화합니다. Guo의 UI Color Dataset은 규모는 작지만 지각적 색상 조화 및 대비 모델링을 평가하는 데 결정적인 역할을 합니다. 종합적으로, 이 데이터셋들은 제안된 자동 UI 프로토타이핑 프레임워크의 훈련, 검증 및 평가를 위한 포괄적이고 균형 잡힌 기반을 제공합니다.

데이터셋	사용 가능한 전체 이미지 수	연구에 사용된 이미지	제안된 프레임워크에서의 목적
RICO 데이터셋30	66,261	4,000	UI 컴포넌트 탐지, 구조적 레이아웃 추출
ENRICO 데이터셋29	1,464	1,000	디자인 패턴 학습, 레이아웃 일관성 모델링
Guo의 UI 색상 데이터셋1	128	128	색상 테마 추출, 지각적 색상 평가
합계 총액	67,853	5,128	검출, 레이아웃, 색상 모델링을 위한 종합 데이터셋

표 2: 제안된 프레임워크에서 사용된 데이터셋 요약. 이 표는 RICO, ENRICO 및 Guo의 UI Color 데이터셋을 포함하여 훈련 및 평가에 활용된 데이터셋을 보여줍니다. 사용 가능한 전체 이미지 수, 본 연구에서 사용된 서브셋, 그리고 제안된 프레임워크 내의 컴포넌트 검출, 레이아웃 모델링 및 지각적 색상 분석에서 각 데이터셋의 구체적인 역할을 명시합니다.

RICO, ENRICO 및 Guo 데이터셋 전반의 UI 컴포넌트, 레이아웃 구조 및 색상 분포의 다양성을 유지하기 위해 층화 추출 전략이 사용되었습니다. 데이터셋은 층화 추출을 통해 훈련(70%), 검증(15%) 및 테스트(15%) 하위 집합으로 분할되었습니다. 이미지는 평균(0.485, 0.456, 0.406)과 표준 편차(0.229, 0.224, 0.225)를 사용하여 정규화되었습니다. 데이터 증강으로는 무작위 수평 뒤집기(확률 = 0.5)와 무작위 크롭(크기 범위: 0.8–1.0)이 포함되었으며, 이후 훈련 과정에서 224 × 224 픽셀로 크기를 조정하였습니다.

구성 요소 주석 달기 및 전처리

RICO, ENRICO 및 Guo의 UI Color 데이터셋은 제안된 자동 UI 프로토타이핑 프레임워크의 세 가지 핵심 기능 구성 요소인 컴포넌트 검출, 레이아웃 모델링 및 지각적 색상 최적화를 통합적으로 지원합니다. RICO 데이터셋은 66,000개 이상의 모바일 UI 화면으로 구성된 대규모 컬렉션이며, 주로 컴포넌트 검출 모듈 학습에 사용됩니다. 이 데이터셋의 다양성은 Faster R-CNN 모델이 다양한 애플리케이션에 걸쳐 버튼, 이미지, 텍스트 필드와 같은 일반적인 UI 요소의 강건한 표현을 학습할 수 있게 합니다. 이를 통해 다양한 디자인 조건에서도 UI 컴포넌트를 정확하게 검출하고 위치를 파악할 수 있습니다. ENRICO 데이터셋은 구조적 관계와 레이아웃 패턴 학습을 위해 패턴 레이블이 지정된 고품질 UI 화면을 제공합니다. 이를 통해 시스템은 컴포넌트 간의 관계, 계층적 구조 및 일반적인 디자인 템플릿을 이해할 수 있습니다. 이 데이터셋은 레이아웃 구조를 모델링하고 여러 화면 간의 일관성을 유지하는 데 결정적인 역할을 하며, 프레임워크가 확립된 디자인 관례에 부합하는 레이아웃을 생성할 수 있도록 합니다. 반면, Guo의 UI Color 데이터셋은 지각적 및 인지적 색상 모델링을 위해 특화되어 사용됩니다. 구조적 측면에 집중하는 RICO 및 ENRICO와 달리, 이 데이터셋은 색상 테마가 주석 처리된 정제된 UI 이미지를 포함하고 있습니다. 이러한 주석은 색상 추출 및 조화 평가 모듈을 학습시키는 데 사용됩니다. 색상 관계를 CAM02-UCS와 같은 지각적 색 공간으로 매핑함으로써, 프레임워크는 대비, 접근성 및 미적 일관성의 균형을 맞춘 색상 팔레트를 생성하는 방법을 학습합니다. 종합적으로, 이 데이터셋들은 통합된 파이프라인을 형성합니다. RICO는 컴포넌트 검출을 지원하고, ENRICO는 레이아웃 패턴 이해와 구조적 일관성을 가능하게 하며, Guo의 데이터셋은 지각적 색상 최적화를 용이하게 합니다. 이러한 통합을 통해 생성된 UI 프로토타입이 구조적으로 정확하고 시각적으로 조화로우며 인지적으로 최적화되도록 보장합니다.

정규화는 평균 [0.485, 0.456, 0.406] 및 표준 편차 [0.229, 0.224, 0.225]를 사용하여 수행되었습니다. 모델의 일반화 성능을 향상시키기 위해 무작위 크롭(random cropping), 수평 뒤집기(horizontal flipping) 및 회전(rotation)을 포함한 데이터 증강 기법이 적용되었습니다. 또한, 데이터셋 간의 일관성을 보장하기 위해 픽셀 값을 [0, 1] 범위로 스케일링하였으며, 모든 이미지는 480 × 800 픽셀의 해상도로 크기를 조정하였습니다. 학습 중 증강을 위해서는 224 × 224 픽셀로 조정된 이미지가 사용되었으며, 레이아웃 분석을 위해서는 480 × 800 픽셀의 원래 해상도가 유지되었습니다. 바운딩 박스는 사전 정의된 임계값을 사용하여 관련 없는 어노테이션을 필터링하도록 조정되었습니다. 데이터셋 전반의 균일성을 확보하기 위해, 모든 UI 요소는 LabelImg 어노테이션 도구를 사용하여 수동으로 어노테이션되었습니다. 어노테이션 전, UI 요소를 버튼, 텍스트, 이미지, 아이콘 및 컨테이너와 같은 카테고리로 분류하기 위한 사전 정의된 스키마가 수립되었습니다. 바운딩 박스 표현을 위해 통일된 좌표계가 적용되었으며, 요소 간의 공간적 관계와 레이아웃 트리 내의 부모-자식 관계를 기반으로 계층 정보가 구축되었습니다. 또한, RICO, ENRICO 및 Guo 데이터셋 전체에서 요소의 일관된 어노테이션, 중첩된 컴포넌트의 적절한 처리 및 최소 크기 임계값 적용을 보장하기 위한 가이드라인이 수립되었습니다.

부품 검출 훈련 및 레이아웃 패턴 추출에 대한 상세한 수학적 공식은 보충 파일 1(Supplementary File 1)에 제공되어 있습니다.

Faster R-CNN 모델은 모멘텀 0.9와 가중치 감쇠(weight decay) 0.0005의 SGD를 사용하여 학습되었습니다. 초기 학습률은 0.001로 설정되었으며, 검증 성능에 기반한 단계적 감쇠(step decay) 정책을 통해 조정되었습니다. 학습은 배치 크기 16으로 최대 60 epoch 동안 수행되었습니다. 과적합을 방지하기 위해 학습 데이터의 20%로 구성된 검증 세트를 사용하여 조기 종료(early stopping)를 적용하였습니다.

매핑 함수 f(.) 는 검출된 UI 요소를 입력으로 받아 계층적 레이아웃 표현을 출력으로 생성합니다. 이 함수는 공간적 거리와 정렬 기준을 바탕으로 UI 요소 간의 인접 관계를 계산하고, 이러한 관계를 나타내는 인접 행렬을 구성합니다. 그 다음 DBSCAN과 같은 클러스터링 알고리즘을 적용하여 관련 컴포넌트들을 그룹화합니다. 마지막으로, 클러스터링된 요소들은 부모-자식 관계에 따라 계층 구조로 조직되어 구조화된 레이아웃 표현을 형성합니다.

색상 조화 모델링과 통합 최적화 목적 함수에 대한 세부 공식은 보충 파일 1에 제공되어 있습니다.

이 목적 함수는 구조적 탐지, 레이아웃 추론 및 지각적 색상 모델링의 통합을 수학적으로 공식화하여, 프레임워크의 모든 구성 요소가 일관성 있고 사용자 중심적인 UI 프로토타입을 생성하는 데 공동으로 기여하도록 합니다. 최적화는 프레임워크의 각 구성 요소에 대해 모듈 방식으로 수행됩니다. 구성 요소 탐지 모듈의 학습에는 SGD가 사용되며, 통합 목적 함수의 공동 최적화 과정에서는 Adam 옵티마이저가 사용됩니다. 결합된 목적 함수는 전체 시스템 성능을 가이드하는 데 사용됩니다. 공동 최적화 단계에서 목적 함수는 학습률 0.001 및 배치 크기 16의 Adam 옵티마이저를 사용하여 최소화됩니다. 학습은 최대 60 epoch 동안 수행되며, 검증 손실의 변화가 5 epoch 연속으로 10⁻⁴ 미만일 때 조기 종료를 적용합니다.

Faster R-CNN을 이용한 구성 요소 검출

제안된 프레임워크는 버튼, 아이콘, 텍스트 필드, 이미지 및 컨테이너를 포함한 UI 구성 요소를 자동으로 탐지하기 위해 Faster R-CNN을 사용합니다. Faster R-CNN은 높은 객체 탐지 정확도와 효율적인 영역 제안 생성을 결합하여, 요소들이 밀집된 복잡한 UI 레이아웃을 처리하는 데 필수적이므로 이 작업에 매우 적합합니다. 이 모델은 ImageNet 데이터셋으로 사전 학습된 ResNet-50 백본을 활용하여 각 UI 화면에서 합성곱 특징 맵(convolutional feature maps)을 추출합니다. 학습 과정에서 일반적인 시각적 특징을 유지하기 위해 초기 레이어는 동결되었으며, 상위 레이어(conv4_x 및 conv5_x)는 UI 특정 구성 요소 탐지를 위해 미세 조정(fine-tuned)되었습니다. 이러한 특징 맵은 시각적 구조, 에지, 질감 및 구성 요소의 경계를 포착합니다. 탐지 단계에서 영역 제안 네트워크(RPN)는 UI 구성 요소가 포함될 가능성이 높은 후보 영역(앵커)을 식별합니다. 앵커는 다양한 크기의 UI 요소를 수용하기 위해 여러 스케일(128, 256, 512)과 종횡비(1:1, 1:2, 2:1)를 사용하여 정의됩니다. 학습 중에 ground truth 박스와의 교집합-합집합 비율(IoU)이 0.7보다 큰 앵커는 양성으로 레이블링되고, IoU가 0.3보다 작은 앵커는 음성으로 레이블링되며, 중간 IoU 값을 가진 앵커는 무시됩니다. 각 앵커에는 구성 요소의 존재 여부를 나타내는 확률이 할당됩니다. 이후 비최대 억제(NMS)를 적용하여 중복되고 겹치는 제안을 제거함으로써, 복잡한 인터페이스에서도 유의미한 UI 요소의 효율적인 위치 파악을 보장합니다. 후보 영역이 생성되면, 각 제안은 미리 정의된 구성 요소 범주로 분류되고 바운딩 박스(bounding-box) 좌표가 정밀화됩니다. ROI Align 연산은 각 제안에 대해 고정 크기의 특징 표현을 추출하며, 이는 분류 및 회귀를 위해 완전 연결 레이어(fully connected layers)에서 처리됩니다. 분류 분기(classification branch)는 클래스 확률을 출력하고, 회귀 분기(regression branch)는 정밀한 바운딩 박스 좌표를 예측합니다. 전체 Faster R-CNN 모델은 RPN 손실과 최종 탐지 손실을 결합한 공동 손실 함수를 최적화함으로써 엔드투엔드(end-to-end)로 학습됩니다. 이를 통해 시스템은 UI 구성 요소를 정확하게 인식할 뿐만 아니라 다양한 인터페이스 구조 전반에서 정밀하게 위치를 파악할 수 있습니다. RPN 단계, ROI 분류, 바운딩 박스 정밀화 및 최종 최적화 목적을 포함한 Faster R-CNN 구성 요소 탐지에 대한 상세 설명은 Supplementary File 1에 제공됩니다.

알고리즘 S1은 상세한 컴포넌트 검출 및 구조 추출 워크플로우를 제공합니다(보충 파일 1). 이는 원본 화면 이미지로부터 자동 UI 컴포넌트 검출 및 구조 추출의 전체 과정을 설명합니다. 입력 이미지는 먼저 전처리 과정을 거쳐 CNN 백본을 통해 딥 비주얼 특징을 추출합니다. 이 특징들은 RPN에 의해 후보 바운딩 박스를 생성하는 데 사용되며, 이후 분류 및 회귀를 통해 정밀해집니다. NMS는 중복 검출을 제거하여 정확한 위치 선정을 보장합니다. 검출 이후, 컴포넌트들은 DBSCAN(density-based spatial clustering of applications with noise)을 사용하여 공간적 근접성에 따라 그룹화됩니다. 이 클러스터링 단계는 컴포넌트 간의 부모-자식 관계와 논리적 그룹화를 캡처하는 계층적 UI 트리를 구축할 수 있게 합니다. 이러한 계층적 표현은 후속 레이아웃 분석 및 UI 이해의 기초가 됩니다. 그림 2는 모바일 UI 화면에서의 Faster R-CNN 컴포넌트 검출 과정을 보여줍니다. 입력 인터페이스(왼쪽)에는 버튼 및 텍스트 블록과 같은 UI 요소가 포함되어 있으며, 이들은 자동으로 바운딩 박스 내에 둘러싸입니다. 검출된 영역들은 레이블이 지정된 연결선에서 나타나듯 컴포넌트 카테고리(예: Button 및 Text)로 분류됩니다. Faster R-CNN 검출 모듈(오른쪽)은 바운딩 박스 좌표를 정밀화하고, 시맨틱 레이블을 할당하며, 구조화된 컴포넌트 수준의 정보를 출력합니다. 이 단계는 UI 컴포넌트의 정확하고 시맨틱하게 의미 있는 표현을 제공함으로써 레이아웃 추출, 인지 최적화 및 UI 프로토타입 생성을 포함한 다운스트림 프로세스의 핵심 기반 역할을 합니다.

그림 2. Faster R-CNN을 이용한 사용자 인터페이스 요소의 컴포넌트 검출. 이 그림은 입력 인터페이스 스크린샷에서 UI 컴포넌트를 검출하는 과정을 보여줍니다. 바운딩 박스를 사용하여 관심 영역을 식별하고, 버튼 및 텍스트 필드와 같은 요소를 Faster R-CNN을 통해 분류합니다. 화살표는 검출된 컴포넌트가 해당하는 시맨틱 레이블로 매핑되는 과정을 나타냅니다. 그림의 확대 버전을 보시려면 여기를 클릭하십시오.

레이아웃 패턴 추출 및 계층적 모델링

Faster R-CNN을 이용한 컴포넌트 검출 이후, 각 UI 요소는 바운딩 박스로 표시됩니다. 하지만 이러한 바운딩 박스만으로는 요소들이 인터페이스 내에서 어떻게 구조적으로 조직되어 있는지, 예를 들어 어떤 요소가 헤더, 네비게이션 바 또는 그룹화된 콘텐츠 영역에 속하는지를 전달할 수 없습니다. 이러한 한계를 해결하기 위해 검출된 컴포넌트들은 논리적 UI 트리로 변환되며, 여기서 각 컴포넌트는 노드로 처리되고 기능적 또는 시각적으로 관련된 컴포넌트들은 공통 부모 노드 아래로 그룹화됩니다. 의미 있는 레이아웃 그룹을 식별하기 위해 DBSCAN 또는 계층적 응집형 클러스터링(hierarchical agglomerative clustering)과 같은 클러스터링 기법이 적용됩니다. 이러한 방법들은 컴포넌트 간의 공간적 근접성과 정렬 패턴을 분석하여 UI 요소 간의 관계를 검출합니다. 인간의 디자인 관행과 유사한 방식으로, 시스템은 헤더, 푸터, 그리드 및 콘텐츠 블록과 같은 일반적인 구조적 패턴을 인식하도록 학습합니다. 그룹화가 설정되면 정렬, 그리드 구성 및 읽기 순서를 포함한 추가적인 구조적 속성을 분석하여 종합적인 레이아웃 표현을 구축합니다. 예를 들어, 동일한 너비의 열로 정렬된 컴포넌트들은 카드 기반 레이아웃을 나타낼 수 있으며, 수직으로 쌓인 요소들은 폼 또는 피드 기반 인터페이스를 나타낼 수 있습니다. 클러스터링, 공간 추론 및 정렬 규칙을 통합함으로써, 본 프레임워크는 시각적 그룹화와 기능적 관계를 모두 포착하는 계층적 UI 트리를 구축합니다. 이러한 계층적 표현은 후속 레이아웃 정교화 및 멀티스크린 일관성 모델링의 기초가 되며, 시스템이 구조적이고 일관되며 사용자 중심적인 인터페이스 디자인을 생성할 수 있게 합니다.

공간적 거리 및 정렬 유사성에 대한 상세 공식은 보충 자료 1에 제공되어 있습니다.

레이아웃 그룹화를 위한 클러스터링 (DBSCAN)

레이아웃 그룹을 식별하기 위해 DBSCAN이 적용됩니다. DBSCAN은 두 가지 파라미터를 사용합니다: (1) ε = 이웃 구성 요소 간의 최대 거리 및 (2) MinPts = 클러스터를 형성하는 데 필요한 최소 구성 요소 수입니다. 본 분석에서 DBSCAN 파라미터는 정규화된 UI 해상도(480 × 800 pixels)를 기반으로 경험적으로 선택되었습니다. 인접한 UI 구성 요소 간의 공간적 근접성을 포착하기 위해 이웃 거리 파라미터는 ε = 50 pixels로 설정되었습니다. 무의미하거나 가짜 UI 구성 요소 그룹이 형성되는 것을 방지하기 위해 클러스터 형성에 필요한 최소 포인트 수는 MinPts = 3으로 설정되었습니다.

상세한 논리적 UI 트리 구성 공식은 보충 자료 1에 제공됩니다.

CAM02-UCS를 이용한 지각적 색 모델링

지각적 색상 모델링은 생성된 UI에 사용되는 색상이 조화롭고, 가독성이 높으며, 인지적으로 효율적이 되도록 보장합니다. UI 이미지와 같은 입력 소스로부터 클러스터링 기법을 사용하여 주도적인 색상을 추출합니다. 구체적으로, 대표 색상 팔레트를 얻기 위해 K-means++ 초기화를 적용한 K-means 클러스터링을 300회 반복 수행합니다. 그러나 RGB 색 공간은 인간의 시각적 지각을 정확하게 반영하지 못하므로, 수치적으로 유사한 색상이 지각적으로는 다르게 보일 수 있습니다. 이러한 한계를 해결하기 위해, 추출된 모든 색상은 지각적으로 균일한 CAM02-UCS로 변환됩니다. 이 공간에서는 동일한 거리가 동일한 지각적 색상 차이에 대응하므로 색상의 조화와 대비를 모델링하는 데 적합합니다. CAM02-UCS로 매핑되면 유클리드 거리를 사용하여 지각적 색상 차이를 계산하며, 이를 통해 시스템은 색상 간의 대비, 조화 및 변이 정도를 정량화할 수 있습니다. 가독성을 높이기 위해 너무 유사한 색상은 분리하고, 시각적 불편함을 방지하기 위해 지나치게 대비되는 색상은 조절합니다. 생성된 팔레트는 WCAG AA 및 AAA와 같은 접근성 표준을 준수하여 전경과 배경 요소 간에 충분한 대비를 확보합니다. 또한, 의도한 UI 테마에 따라 팔레트 관계를 보색, 유사색 또는 삼보색 체계로 제한함으로써 색상 조화를 강제합니다. 이를 통해 결과적인 색상 팔레트가 시각적으로 매력적일 뿐만 아니라 기능적으로 접근 가능하고 인지적으로 최적화되도록 합니다. 팔레트를 더욱 정교화하기 위해 지각적 유사성, 대비, 조화 및 브랜드 일관성의 제약 조건 하에 최적화 프로세스를 적용합니다. 기본 색상을 선택하고(예: 브랜드 아이덴티티에서 선택), 시각적 계층 구조를 유지하기 위해 보조 색상의 휘도와 채도를 조정합니다. 규칙 기반 평가 메커니즘은 지각적 거리와 접근성 지표를 기반으로 후보 팔레트를 평가하여, 심미적 균형을 유지하면서 인지적 부담을 최소화합니다. 결과적으로, 이 프레임워크는 전문가 수준의 일관성, 가독성 및 지각적 일관성을 갖춘 UI 색상 체계를 생성합니다.

CAM02-UCS 기반의 지각적 색상 모델링을 위한 상세한 수학적 표현식은 보충 파일 1에 제공됩니다.

알고리즘 S2 (보충 파일 1) CAM02-UCS 기반의 지각적 색상 추출 및 최적화 워크플로우를 설명하며, 이는 조화와 접근성 제약 조건을 따릅니다. 먼저, 입력 이미지에서 지배적인 색상을 추출하고 이를 CAM02-UCS로 변환하여 색 차이가 인간의 지각과 일치하도록 합니다. 이후 색상 간의 지각적 거리를 계산하고, 명확성과 조화를 모두 유지하기 위해 이를 사전 정의된 범위 내로 제한합니다. 이어서 WCAG 가이드라인에 따라 휘도 대비 비율을 평가하여 접근성을 강제합니다. 최종 팔레트는 지각적 간격, 대비 요구 사항 및 색상 조화 제약 조건의 균형을 맞춘 통합 목적 함수를 최적화하여 도출됩니다. 이를 통해 생성된 UI 색상 체계가 시각적으로 매력적일 뿐만 아니라 가독성이 높고 접근 가능하며 지각적으로 일관되도록 보장합니다.

인지적 설계 최적화

인지적 디자인 최적화는 자동 생성된 UI 프로토타입이 시각적으로 일관될 뿐만 아니라 이해하기 쉽고 상호작용이 용이하도록 보장합니다. 이 모듈은 게슈탈트 원칙, 피츠의 법칙, 힉의 법칙을 포함한 주요 인지 디자인 원칙을 통합하여 UI 구성 요소의 배치, 그룹화 및 간격을 안내합니다. 인지적 디자인 최적화를 위한 상세한 수학적 공식은 보충 파일 1에 제공됩니다.

통합 인지 최적화 목표

통합 인지 최적화 목적 함수에 대한 수학적 표현식은 Supplementary File 1에 제공됩니다. 시각적 그룹화, 상호작용 효율성 및 결정 복잡성의 중요도를 나타내는 계수는 각각 alpha, beta, gamma로 표시됩니다. 본 연구에서는 검증 데이터셋을 사용하여 alpha, beta, gamma 값을 경험적으로 결정하였습니다. 본 실험에서 계수는 α = 0.5, β = 0.3, γ = 0.2로 설정되었습니다. 이 구성은 시각적 그룹화, 상호작용 효율성 및 결정 단순성 사이의 효과적인 균형을 제공합니다.

다중 화면 일관성 및 UI 생성

멀티스크린 일관성 모델링은 애플리케이션 내의 서로 다른 화면들이 일관된 시각적 정체성, 구조적 레이아웃 및 상호작용 패턴을 공유하도록 보장합니다. 사용자가 여러 화면을 탐색함에 따라 요소의 배치, 타이포그래피, 간격 및 시각적 계층 구조에 대한 기대치가 형성됩니다. 이러한 기대치를 충족하기 위해, 시스템은 RICO 및 ENRICO 데이터셋에서 도출된 템플릿을 사용하여 화면 간 패턴을 분석합니다. 이 템플릿들은 홈-상세 레이아웃, 리스트-상세 패턴, 다단계 양식 및 대시보드 흐름과 같은 일반적인 UI 구조를 캡처합니다. 구성 요소의 배치와 그룹화 동작을 비교함으로써, 시스템은 어떤 요소가 일관되게 유지되어야 하고 어떤 요소가 변할 수 있는지를 식별하는 화면 간 구조적 프로필을 구축합니다. 구조적 패턴이 식별되면, 프레임워크는 타이포그래피 스케일, 간격 비율, 그리드 레이아웃 및 내비게이션 앵커의 일관성을 강제합니다. 예를 들어, 헤더 바는 일관된 높이를 유지하고, 기본 버튼은 균일한 크기와 정렬을 유지하며, 콘텐츠 블록은 예측 가능한 시각적 순서를 따릅니다. 이는 각 화면을 전역 구조적 제약 조건과 대조하여 평가하는 레이아웃 정규화 프로세스를 통해 달성됩니다. 일관되지 않은 패딩이나 어긋난 제목과 같이 화면이 학습된 템플릿에서 벗어난 경우, 시스템은 레이아웃을 자동으로 조정하여 일관성을 회복합니다. 이러한 수정은 원활한 UX를 보장하고 화면 간의 인지적 전환 비용을 줄이는 데 도움이 됩니다. 또한 프레임워크는 상호작용 흐름의 일관성을 유지하기 위해 화면 간의 내비게이션 그래프를 분석합니다. 전진/후진 전환, 탭 내비게이션, 다단계 워크플로우를 포함한 일반적인 내비게이션 패턴이 식별 및 적용됩니다. 각 전환은 사용자의 멘탈 모델과 일치하는지 검증되어 사용성을 개선하고 혼란을 줄입니다. 결과적으로 멀티스크린 일관성 모델은 시각적 노이즈를 최소화하고, 친숙함을 높이며, 통합된 상호작용 경험을 촉진합니다.

멀티스크린 일관성 및 UI 생성에 대한 상세한 수학적 공식은 보충 파일 1에 제공됩니다.

마지막으로, 렌더링 엔진은 SVG 와이어프레임, HTML/CSS 프로토타입 또는 픽셀 기반의 UI 목업과 같은 형식으로 시각적 결과물을 생성합니다. 결과물로 도출된 UI 화면은 올바른 읽기 순서, 조화로운 색상 관계, 정밀한 그리드 정렬 및 여러 화면에 걸친 일관된 시각적 계층 구조를 나타냅니다.

알고리즘 S3는 인지-시각적 레이아웃 최적화 및 멀티스크린 일관성 워크플로우를 제공합니다(보충 파일 1). 알고리즘 S3는 사용자 친화적인 UI 레이아웃을 생성하는 데 사용되는 통합 인지 및 구조적 최적화 프로세스를 설명합니다. 이는 통합 최적화 프레임워크 내에서 지각적 그룹화(게슈탈트 원리), 상호작용 효율성(피츠의 법칙) 및 결정 단순성(힉의 법칙)을 결합합니다. 우선, 구성 요소 간의 공간적 관계를 평가하여 지각적 그룹화를 설정합니다. 그런 다음 구성 요소의 크기와 배치를 조정하여 상호작용 효율성을 최적화하고, 사용자에게 제시되는 선택지 수를 제한함으로써 결정 복잡성을 제어합니다. 또한, 이 알고리즘은 각 화면을 학습된 레이아웃 템플릿에 정렬하여 타이포그래피, 간격 및 구조적 구성의 균일성을 보장함으로써 멀티스크린 일관성을 강제합니다. 이후 다목적 최적화 함수가 정렬, 간격 및 인지 비용의 균형을 맞추어 레이아웃을 정교화하며, 그 결과 시각적으로 일관되면서도 인지적으로 효율적인 인터페이스가 생성됩니다. 전반적으로, 이 알고리즘은 생성된 멀티스크린 레이아웃이 높은 수준의 시각적 일관성, 사용성 및 지각적 명확성을 유지하도록 보장합니다.

결과

제안된 자동화 UI 프로토타이핑 프레임워크는 세 가지 출처에서 수집된 5,128개의 UI 화면으로 구성된 통합 데이터셋을 사용하여 평가되었습니다. 이 데이터셋은 4,000개의 RICO 이미지, 1,000개의 ENRICO 화면, 그리고 Guo의 UI Color Dataset에서 가져온 128개의 색상 주석 처리된 UI 샘플로 이루어져 있습니다. 이러한 혼합 데이터셋은 컴포넌트 검출 정확도, 레이아웃 구조적 명확성, 다중 화면 일관성 및 지각적 색상 조화를 평가하기 위한 균형 잡힌 벤치마크를 제공합니다.

실험 결과, Faster R-CNN 기반의 탐지 모델은 92.4%의 컴포넌트 탐지 정확도를 달성했으며 다양한 모바일 UI 스타일에 걸쳐 효과적으로 일반화됨을 보여주었습니다. 또한, ENRICO 패턴 어노테이션을 통합함으로써 레이아웃 추론 능력이 향상되어, 레이아웃 명확성이 18.7% 증가하고 읽기 순서 보존 능력이 개선되었습니다. 색상 평가 실험에서는 CAM02-UCS 기반의 색상 모델링 모듈이 디자이너 평가 기준 24.5% 더 조화로운 팔레트를 생성했으며, 기존의 RGB 및 LAB 기반 팔레트 생성 방법보다 더 높은 지각적 균일성을 달성했습니다. 더욱이, 멀티스크린 일관성 모델링을 통해 화면 간 정렬 및 타이포그래피 일관성이 28% 향상되었습니다. 30명의 참가자를 대상으로 한 사용자 연구에서는 제안된 시스템으로 제작된 프로토타입과 상호작용할 때 인지 부하가 31% 감소하는 것으로 나타났습니다. 종합적으로 이러한 결과는 컴포넌트 탐지, 지각적 색상 모델링 및 인지적 최적화를 결합함으로써 구조적으로 정확할 뿐만 아니라 시각적으로 일관되고 인지적으로 효율적인 UI 프로토타입을 생성할 수 있음을 시사합니다. 표 3은 제안된 UI 프로토타이핑 프레임워크를 평가하는 데 사용된 시뮬레이션 환경과 기술적 설정을 보여줍니다. Faster R-CNN 및 레이아웃 일관성 모듈의 연산 집약적인 학습 과정은 고성능 NVIDIA RTX 4090 GPU를 통해 지원되었습니다. 모든 실험은 Ubuntu 22.04 환경에서 PyTorch 2.0을 사용하여 딥러닝 구현을 수행하였습니다.

매개변수	설정
하드웨어	NVIDIA RTX 4090 GPU (24 GB), Intel i9 Processor, 64 GB RAM
운영 체제	Ubuntu 22.04 LTS
딥러닝 프레임워크	PyTorch 2.0
Faster R-CNN 백본	ResNet-50 + FPN
이미지 해상도	480 × 800 (모든 데이터셋에 대해 정규화됨)
훈련 배치 크기	8
옵티마이저	AdamW (LR = 1e−4, Weight Decay = 0.01)
에포크	40
색상 모델링 공간	CAM02-UCS
팔레트 추출을 위한 클러스터링	K-means (k = 5)
레이아웃 클러스터링	DBSCAN (ε = 20, min_samples = 3)

표 3: 제안된 프레임워크의 구현 파라미터 및 실험 구성. 이 표는 계산 리소스, 운영 체제, 딥러닝 프레임워크, 모델 아키텍처, 이미지 해상도, 학습 파라미터, 최적화 전략, 색상 모델링 공간, 그리고 팔레트 추출 및 레이아웃 그룹화에 사용된 클러스터링 방법을 포함하여 모델 학습 및 평가에 사용된 하드웨어 및 소프트웨어 설정을 요약합니다.

Faster R-CNN 아키텍처는 FPN이 포함된 ResNet-50 백본을 사용하여 광범위한 세밀한 UI 컴포넌트를 탐지합니다. 모든 UI 이미지는 처리 전 480 × 800 픽셀로 균일하게 크기가 조정됩니다. 학습은 안정적인 수렴을 보장하기 위해 배치 크기 16으로 설정하여 SGD 옵티마이저를 통해 60 epoch 동안 수행됩니다. 컬러 팔레트 생성기는 K-평균 군집화를 적용한 CAM02-UCS를 사용하며, 구조적 레이아웃 군집화에는 DBSCAN이 사용됩니다. 이러한 기술적 설정은 생성된 UI 결과가 재현 가능하고 안정적이며 고충실도를 유지하도록 합니다. 제안된 자동 UI 프로토타이핑 프레임워크에 대한 종합적인 평가를 제공하기 위해 네 가지 범주의 평가 지표가 활용됩니다:

i) 정밀도(precision), 재현율(recall), F1-스코어, 교집합-합집합 비율(IoU) 및 평균 정밀도 평균(mAP)를 사용하여 분석한 구성 요소 검출 성능으로, 이는 RICO 및 ENRICO 데이터셋 전반에서 UI 구성 요소를 식별하는 Faster R-CNN 모델의 정확도를 정량화합니다;

ii) 디자인 패턴 제약 조건에서 도출된 정렬 오차(AE), 그룹화 정확도, 읽기 순서의 정확성 및 화면 간 일관성 점수를 통해 측정되는 레이아웃 명확성과 구조적 일관성;

iii) CAM02-UCS 지각적 거리(ΔE_UCS), WCAG 2.1 대비 비율, 다양성 지수 및 Guo의 UI 색상 평가 프레임워크에서 영감을 얻은 색상 조화 점수를 사용하여 평가한 지각적 색상 품질;

iv) NASA 작업 부하 지수(NASA-TLX)로 측정된 인지 부하, 미적 일관성 평가 및 작업 완료 효율성을 포함한 사용자 중심의 인지 효율성 지표.

이러한 지표들을 통해 검출 정확도뿐만 아니라 지각적 조화, 사용성 품질 및 인지적 경험 측면에서도 프레임워크를 평가할 수 있습니다.

성분 검출 지표

정밀도(Precision)는 위양성(false positives)을 생성하지 않고 UI 구성 요소를 예측하는 모델의 정확성을 설명합니다. 높은 정밀도는 예측된 대부분의 경계 상자(bounding boxes)가 유효한 UI 요소에 해당함을 의미합니다. 재현율(Recall)은 화면상의 모든 관련 UI 구성 요소를 식별하는 모델의 능력을 측정합니다. 높은 재현율은 모델이 대부분의 정답(ground-truth) 구성 요소를 성공적으로 탐지했음을 나타냅니다. 정밀도와 재현율의 조화 평균으로 정의되는 F1-score는 균형 잡힌 평가를 제공하며, 특히 UI 구성 요소가 데이터 세트 전반에 걸쳐 불균등하게 분포되어 있을 때 유용합니다.

IoU 지표는 예측된 바운딩 박스가 정답(ground truth) 바운딩 박스와 얼마나 잘 겹치는지를 측정합니다. 객체 탐지 작업에서는 일반적으로 0.5와 0.75의 IoU 임계값을 사용하여 보통 수준 및 엄격한 평가 조건을 나타냅니다. mAP는 여러 IoU 임계값에 걸친 탐지 성능을 요약합니다. mAP@0.5:0.95 지표는 0.5에서 0.95까지 0.05 간격의 임계값들에 대한 정밀도를 평균 내어 더욱 강력한 평가를 제공하며, 따라서 객체 탐지의 표준 벤치마크로 널리 인정받고 있습니다.

세 가지 데이터셋에 대한 탐지 결과는 제안된 컴포넌트 탐지 모듈이 일관되게 우수한 성능을 보임을 나타냅니다. 정량적 결과는 표 4에 제시되어 있습니다. RICO 데이터셋은 방대하고 다양한 UI 컴포넌트 어노테이션 세트 덕분에 정밀도 0.91, 재현율 0.88, F1-score 0.89로 가장 높은 성능을 달성했습니다. ENRICO는 구조가 더 단순하고 어노테이션된 컴포넌트 유형이 적어 약간 낮은 점수를 보입니다. Guo 데이터셋은 시각적 변동성이 더 크고 표준화된 레이아웃 패턴이 적어 탐지가 더 어렵기 때문에 가장 낮은 F1-score(0.81)를 기록했습니다. 전반적으로 이러한 결과는 본 모델이 서로 다른 UI 디자인 스타일과 데이터셋 특성에 관계없이 견고한 컴포넌트 탐지 성능을 유지함을 확인시켜 줍니다.

데이터 세트	정밀도	재현율	F1-스코어
RICO	0.91	0.88	0.89
ENRICO	0.87	0.84	0.85
궈	0.83	0.8	0.81

표 4: 데이터셋별 컴포넌트 검출 성능. 이 표는 RICO, ENRICO 및 Guo 데이터셋에 대한 UI 컴포넌트 검출의 정밀도(precision), 재현율(recall) 및 F1-score를 나타내며, 검출 모델의 효과를 입증한다.

그림 3은 IoU 임계값 0.5 및 0.75에서 RICO, ENRICO 및 Guo 데이터셋에 대한 모델의 성능을 보여줍니다. 예상대로, 더 완화된 중첩 요구 사항으로 인해 IoU 0.5에서 mAP 값이 더 높게 나타납니다. RICO는 일관되게 가장 높은 mAP 값(IoU 0.5에서 0.89, IoU 0.75에서 0.78)을 기록하며, 이는 어노테이션의 풍부함과 일관성을 반영합니다. ENRICO는 약간 더 낮은 값을 보이며, Guo는 레이아웃 스타일과 컴포넌트 밀도의 변동성이 더 크기 때문에 가장 낮은 점수를 기록합니다. 더 엄격한 IoU 임계값에 따라 하락하는 추세는 데이터셋의 복잡성이 검출 강건성에 직접적인 영향을 미친다는 것을 보여줍니다.

그림 3. 데이터셋별 IoU(intersection over union) 임계값 0.5 및 0.75에서의 평균 정밀도 평균(mAP).선 그래프는 RICO, ENRICO 및 Guo 데이터셋에 걸친 컴포넌트 검출 성능을 비교합니다. x축은 데이터셋을 나타내며, y축은 mAP 값을 나타냅니다. 두 개의 곡선은 IoU 임계값 0.5와 0.75에 해당하며, 서로 다른 검출 엄격도 수준에 따른 성능 변화를 보여줍니다. 이 그림의 확대 버전을 보시려면 여기를 클릭하십시오.

그림 4는 각 데이터셋에 대한 mAP@IoU(0.5:0.95)를 나타내며, 10개의 IoU 임계값에 걸쳐 탐지 성능에 대한 광범위한 평가를 제공합니다. 결과는 RICO (0.61)에서 ENRICO (0.57), 그리고 Guo (0.52)로 이어지는 명확한 하강 추세를 보여주며, 제안된 탐지 모델이 더 크고 구조화된 데이터셋에서 가장 잘 일반화됨을 확인시켜 줍니다. 이 엄격한 평균 지표는 단일 임계값 평가에서는 나타나지 않을 수 있는 미세한 성능 저하를 강조합니다. 이러한 결과는 모델이 모든 데이터셋에서 강력한 성능을 보이지만, 레이아웃의 다양성과 구성 요소의 가변성이 증가함에 따라 엄격한 COCO 스타일 평가 하에서 추가적인 어려움이 발생함을 시사합니다. 탐지 결과는 그림 3과 4에 제시되어 있으며, 여기에는 다양한 IoU 수준에 따른 mAP의 정량적 비교가 포함되어 있습니다.

그림 4. 데이터셋 전반에 걸쳐 IoU(intersection over union) 임계값 0.5에서 0.95까지의 평균 정밀도(mAP).선 그래프는 0.5에서 0.95 범위의 IoU 임계값에 대해 평균을 낸 mAP 지표를 사용하여 RICO, ENRICO 및 Guo 데이터셋에서의 구성 요소 검출 성능을 보여줍니다. x축은 데이터셋을 나타내며, y축은 0-1 척도로 보고된 해당 mAP 값을 나타내어 다양한 검출 임계값 하에서의 모델 성능을 반영합니다. 이 그림의 더 큰 버전을 보시려면 여기를 클릭하십시오.

레이아웃 품질 지표

레이아웃 품질은 AE, 그룹화 정확도(GA) 및 읽기 순서 정확도(ROA)를 사용하여 평가하며, 이는 생성된 UI 레이아웃의 구조적 정확성, 지각적 조직화 및 인지적 가독성을 종합적으로 평가합니다.

정렬 오차.

AE(픽셀 기반 편차)는 UI 요소가 왼쪽, 오른쪽, 상단 또는 베이스라인 가이드와 같은 이상적인 정렬선에 얼마나 잘 맞춰져 있는지를 나타냅니다. AE 값이 낮을수록 요소들이 시각적 왜곡을 최소화하며 일관되게 배치되었음을 의미하며, 이는 가독성과 전반적인 디자인 명확성을 향상시킵니다. 정렬 불량은 시각적 흐름을 방해하고 인지된 복잡도를 증가시키므로, 이 지표는 인지적 레이아웃 정교화를 평가하는 데 특히 중요합니다. 그림 5는 RICO, ENRICO 및 Guo 데이터셋 전체의 AE를 보여주며, 이는 이상적인 정렬선으로부터의 평균 픽셀 편차로 측정되었습니다. 결과에 따르면 RICO가 가장 낮은 AE(4.2 px)를 달성했으며, 이는 해당 데이터셋의 UI 컴포넌트들이 더 일관된 구조적 패턴을 보여 모델이 정렬을 더 쉽게 수행할 수 있음을 나타냅니다. ENRICO는 6.1 px의 중간 수준 정렬 편차를 보였으며, 이는 잘 구조화된 레이아웃과 다양한 화면 레이아웃이 혼재되어 있음을 반영합니다. Guo 데이터셋은 컴포넌트 배치의 다양성이 높고 비표준 레이아웃 구조를 가지고 있어 정렬 기반 정교화에 어려움이 있으며, 그 결과 가장 높은 AE(7.4 px)를 기록했습니다. 전반적으로 이러한 결과는 레이아웃의 복잡성이 증가함에도 불구하고 모델이 데이터셋 전반에서 강력한 정렬 정확도를 유지함을 입증합니다.

그림 5. 데이터 세트 간 정렬 오차. 이 그림은 데이터 세트 간의 정렬 오차를 보여주며, 값이 낮을수록 정렬 상태가 더 좋음을 나타냅니다. 이 그림의 확대 버전을 보시려면 여기를 클릭하십시오.

그룹화 정확도 (GA).

GA는 모델이 근접성, 유사성, 연속성과 같은 게슈탈트 원칙을 바탕으로 관련 UI 구성 요소를 얼마나 효과적으로 그룹화하는지를 정량화합니다. 그룹화 정확도가 높을수록 모델이 UI 요소의 의도된 구조를 잘 유지하고 있음을 나타내며, 이는 사용자가 인터페이스를 더 자연스럽게 해석할 수 있게 합니다. 이 지표는 특히 레이아웃 정제 모듈이 콘텐츠를 의미 있는 시각적 그룹으로 성공적으로 조직하는지 평가하는 데 유용합니다. 그림 6은 제안된 프레임워크가 세 가지 데이터셋에서 달성한 GA의 분포를 보여줍니다. ENRICO 데이터셋은 중앙값 GA가 가장 높고 사분위 범위가 가장 좁게 나타나는데, 이는 패턴 라벨이 잘 정의된 레이아웃 덕분에 그룹화 성능이 안정적이고 일관됨을 의미합니다. RICO 데이터셋은 중간 정도의 그룹화 정확도와 더 높은 변동성을 보이는데, 이는 데이터셋의 다양성과 레이아웃 복잡성이 더 크기 때문인 것으로 보입니다. Guo UI Color 데이터셋은 샘플들이 시각적으로 이질적이고 구조적 레이아웃에 덜 집중되어 있어 그룹화 정확도가 더 낮게 기록되었습니다. 전반적으로, 결과는 인지 레이아웃 정제 모듈이 다양한 데이터셋에서 안정적으로 작동하며, 특히 구조적으로 일관된 데이터에서 최적의 그룹화 성능을 달성함을 보여줍니다.

그림 6. 데이터셋별 그룹화 정확도 분포.상자 그림(box plot)은 RICO, ENRICO 및 Guo의 UI Color 데이터셋에서 게슈탈트 원리에 기반한 그룹화 정확도를 보여줍니다. 상자는 사분위수 범위를 나타내고, 중앙선은 중앙값을 나타내며, 수염(whiskers)은 값의 범위를 나타냅니다. x축은 데이터셋을 나타내고, y축은 그룹화 정확도 점수를 나타냅니다. 표본 크기는 n=5128개의 사용자 인터페이스 화면(RICO: 4000, ENRICO: 1000, Guo: 128)입니다. 이 그림의 확대 버전을 보려면 여기를 클릭하십시오.

읽기 순서 정확도 (ROA).

읽기 순서 정확도(reading order accuracy, ROA)는 모델이 일반적으로 위에서 아래로, 왼쪽에서 오른쪽으로 이어지는 UI 화면의 자연스러운 읽기 흐름을 얼마나 정확하게 예측하는지를 측정합니다. 올바른 읽기 순서를 유지하는 것은 사용성, 내비게이션의 명확성, 그리고 확립된 디자인 관례와의 일관성을 위해 필수적입니다. ROA가 높을수록 시스템이 예상되는 인지적 스캐닝 패턴을 더 잘 보존하고 있음을 나타냅니다. 그림 7은 RICO, ENRICO 및 Guo 데이터셋에 대해 다양한 평가 단계에서 측정된 ROA를 보여줍니다. ENRICO는 규칙적이고 패턴 중심적인 레이아웃 구조 덕분에 인간과 유사한 읽기 순서를 더 정확하게 예측할 수 있어 일관되게 가장 높은 ROA를 달성합니다. RICO는 더 큰 다양성과 실제 환경의 복잡성을 반영하여 약간의 변동성과 함께 중간 정도의 성능을 보입니다. Guo 데이터셋은 많은 화면이 시각적으로 풍부하지만 명확하게 정의된 읽기 계층 구조가 부족하여 가장 낮은 ROA를 나타냅니다. 전반적으로, 이러한 결과는 제안된 인지 레이아웃 정교화 모듈이 다양한 UI 디자인 전반에서 안정적인 읽기 순서 예측을 유지하면서, 구조화된 데이터셋에서 가장 신뢰할 수 있는 성능을 발휘함을 시사합니다.

그림 7. 여러 데이터셋에 대한 평가 단계별 읽기 순서 정확도.선 그래프는 RICO, ENRICO 및 Guo의 UI Color 데이터셋에 대한 평가 단계별 읽기 순서 정확도를 보여줍니다. x축은 평가 단계를 나타내며, y축은 읽기 순서 정확도를 나타냅니다. 각 곡선은 데이터셋에 대응하며, 연속적인 평가 단계에 따른 시각적 흐름 유지의 변화를 보여줍니다. 평가 단계는 제안된 프레임워크의 점진적 개선 단계를 나타냅니다. 이 그림의 더 큰 버전을 보려면 여기를 클릭하십시오.

레이아웃 일관성 점수 (LCS)

레이아웃 일관성 점수(LCS)는 동일한 애플리케이션 내의 여러 화면에서 생성된 UI 레이아웃이 얼마나 일관되게 유지되는지를 측정합니다. 여기에는 간격, 정렬 규칙, 타이포그래피 영역 및 그룹화 패턴의 일관성이 포함됩니다. 점수가 높을수록 화면 간의 응집력이 향상되어 더 통일되고 직관적인 UX를 제공함을 나타냅니다. 그림 8은 RICO, ENRICO 및 Guo의 UI Color 데이터셋에 대해 여러 평가 단계에서 측정된 LCS를 보여줍니다. ENRICO 데이터셋은 패턴 레이블이 지정되어 있고 구조적으로 균일한 UI 화면 덕분에 가장 높은 LCS 값을 일관되게 달성하며, 이는 화면 간 일관성의 더 안정적인 학습을 가능하게 합니다. 반면, RICO 데이터셋은 매우 다양한 UI 레이아웃 전반에 걸쳐 일반화하는 모델의 능력 덕분에 중간 정도의 점수를 보이며 꾸준히 개선되는 일관성을 나타냅니다. 예상대로 Guo 데이터셋은 구조적 레이아웃보다는 주로 색상 특성에 집중하고 있어 다중 화면 일관성을 유지하는 것이 더 어렵기 때문에 가장 낮은 LCS 값을 기록했습니다. 종합적으로, 이러한 결과는 제안된 화면 간 일관성 모듈이 패턴 지향적 데이터셋에서 가장 효과적으로 작동하며, 모든 데이터셋에서 측정 가능한 개선을 제공함을 보여줍니다.

그림 8. 여러 데이터셋의 평가 단계별 레이아웃 일관성 점수.선 그래프는 RICO, ENRICO 및 Guo의 UI Color 데이터셋의 평가 단계별 레이아웃 일관성 점수를 보여줍니다. x축은 평가 단계를 나타내며 y축은 레이아웃 일관성 점수를 나타냅니다. 각 곡선은 하나의 데이터셋에 해당하며, 평가 단계가 진행됨에 따라 생성된 인터페이스의 구조적 일관성이 향상됨을 보여줍니다. 이 그림의 더 큰 버전을 보시려면 여기를 클릭하십시오.

색상 품질 지표

생성된 UI 색상 테마는 CAM02-UCS에서 파생된 5가지의 지각적 근거 기반 지표를 통해 평가됩니다: 팔레트 색상 간의 지각적 균일성을 정량화하는 ΔE(지각적 색 차이), 전경과 배경 요소 간의 가독성을 평가하는 대비비(WCAG 2.1 기준), 색조 간의 심미적 조화를 측정하는 색상 조화 지수(CHI), 지각적 색 공간 내의 변이도를 반영하는 색상 다양성 점수(CDS), 그리고 팔레트 내 색상의 균형과 우세도를 평가하는 색상 돌출 점수(CPS)입니다. 이러한 지표들은 종합적으로 심미적 품질과 사용성 중심의 색상 성능을 모두 평가할 수 있게 합니다. 결과에 따르면, 제안된 방법은 4.12의 더 낮은 ΔE 값을 달성하여 색상 전반의 지각적 균일성이 향상되었음을 보여줍니다. 6.21의 대비비는 접근성 표준을 준수함을 확인시켜 주며, 이를 통해 가독성이 향상되었음을 보장합니다. 표 5는 제안된 색상 모델링 모듈과 베이스라인 방법 간의 정량적 비교를 보여줍니다. CHI는 0.61에서 0.83으로 증가하여 색상 전환 시 심미적 응집력이 향상되었음을 나타냅니다. 또한, CDS가 50% 이상 증가하여 생성된 팔레트가 시각적 혼란 없이 더 풍부한 변이도를 유지함을 입증했습니다. 더 높은 CPS 값은 우세 색상의 균형 잡힌 분포를 나타내어, 특정 단일 색조에 의한 과포화를 방지합니다. 종합적으로, 이러한 결과는 CAM02-UCS 기반 색상 모델링 모듈이 조화롭고 가독성이 높으며 지각적으로 최적화된 UI 색상 체계를 생성하는 데 효과적임을 입증합니다.

측정 지표	정의	제안된 방법	기초선1	개선도 (%)
ΔE (CAM02-UCS)	지각적 색차	4.12	7.85	47.5% 더 낮은
대비비 (WCAG)	FG–BG 쌍의 판독성	6.21	4.38	41.80%
CHI (색조 조화 지수)	색조 & 크로마 하모니	0.83	0.61	36.10%
CDS (색상 다양성 점수)	J의 분산′a′b′ 공간	18.70	12.40	50.80%
CPS (색채 돌출 점수)	우세색의 안정성	0.72	0.55	30.90%

표 5: 제안된 방법과 기준 방법 간의 색상 품질 메트릭 정량적 비교. 이 표는 지각적 색차(CAM02-UCS의 ΔE), 대비비(WCAG), 색상 조화 지수(CHI), 색상 다양성 점수(CDS) 및 색상 두드러짐 점수(CPS)를 포함한 색상 품질 평가 메트릭을 보여줍니다. 제안된 방법의 결과가 기준값 및 개선 백분율과 함께 비교되었습니다.

참가자 인구통계 및 연구 설계

총 30명의 참가자가 평가 과정에 참여하였습니다. 참가자들의 연령은 20세에서 35세 사이였습니다(평균 연령: 26.4 ± 3.2세). 코호트에는 소프트웨어 엔지니어, 학생, UI/UX 디자이너 등 다양한 배경의 인원들이 포함되었습니다. 자기 보고식 컴퓨터 숙련도를 기준으로 참가자의 40%는 중급 사용자로, 35%는 상급 사용자로, 25%는 초보자로 분류되었습니다. 참가자의 약 절반은 UI/UX 디자인 또는 관련 분야의 사전 경험이 있었으며, 나머지 참가자들은 경험이 없었습니다. 이러한 다양성을 통해 기술적 전문성과 디자인 친숙도의 각 수준별로 균형 잡힌 평가가 이루어졌습니다.

사용자 연구 지표

인지 부하, 사용성, 시각적 매력, 효율성 및 일관성을 평가하기 위해 NASA-TLX, 시스템 사용성 척도(SUS), 심미적 조화 점수(AHS), 검색 효율성 시간(SET) 및 화면 간 일관성 등급(CSCR)을 포함한 다각적인 지표를 사용하여 사용자 중심 평가를 수행하였습니다.

NASA-TLX 지표는 정신적 요구도, 노력 및 좌절감과 같은 요인을 측정하여 정신적 작업 부하를 정량화합니다. 점수가 낮을수록 인지 부하가 감소하고 상호작용의 편의성이 향상되었음을 나타냅니다. 제안된 프레임워크는 모든 데이터셋에서 일관되게 더 낮은 NASA-TLX 점수를 기록했으며, 이는 정신적 노력의 감소를 의미합니다. 이러한 개선은 게슈탈트 그룹화, 최적화된 간격 및 강화된 시각적 계층 구조를 포함한 인지 설계 원칙의 통합 덕분이며, 이는 전반적으로 더욱 직관적인 탐색을 가능하게 합니다. SUS 지표는 0에서 100까지의 표준화된 사용성 점수를 제공하며, 값이 높을수록 사용성과 명확성이 향상되었음을 나타냅니다. 제안된 프레임워크는 기준 방법들에 비해 더 높은 SUS 점수를 달성했으며, 이는 구조적 레이아웃과 색상 명확성 모두에서 개선이 이루어졌음을 반영합니다. 강화된 정렬, 간격 및 탐색 흐름은 사용자가 더 직관적이고 기능적으로 일관적이라고 느끼는 인터페이스에 기여했습니다. 7점 리커트 척도로 측정되는 AHS는 인지된 시각적 매력도와 색상 조화를 평가합니다. CAM02-UCS 기반 색상 모델링 모듈을 사용하여 생성된 인터페이스는 더 높은 AHS 값을 기록했으며, 이는 더 부드러운 색상 전환과 시각적으로 더 균형 잡힌 팔레트를 나타냅니다. 참가자들은 개선된 대비, 색조 일관성 및 시각적 복잡함의 감소로 인해 이러한 인터페이스를 일관되게 선호했으며, 이는 UI 디자인에서 지각적 색상 모델링의 중요성을 강조합니다. SET는 사용자가 시각적 검색 작업 중에 대상 UI 요소를 찾는 데 걸리는 시간을 측정합니다. SET 값이 낮을수록 시각적 조직화와 계층 구조가 개선되었음을 나타냅니다. 제안된 프레임워크는 모든 데이터셋에서 SET를 유의미하게 감소시켰으며, 이는 게슈탈트 그룹화, 주의 집중 유도 간격 및 정제된 레이아웃 구조의 통합이 더 빠르고 효율적인 상호작용을 가능하게 함을 입증합니다. CSCR 지표는 여러 화면에 걸친 UI 디자인의 일관성을 평가합니다. 점수가 높을수록 레이아웃, 색상 및 구조적 조직의 연속성이 더 좋음을 나타냅니다. 제안된 프레임워크는 더 높은 CSCR 값을 달성했으며, 이는 인터페이스 전반에 걸쳐 안정적인 색상 체계, 간격 및 계층 구조를 유지하는 다중 화면 일관성 모듈의 효과를 반영합니다.

그림 9는 RICO, ENRICO 및 Guo 데이터셋에 대해 모든 지표(NASA-TLX, SUS, AHS, SET, CSCR)를 비교한 사용자 연구 결과를 보여줍니다. 전반적으로 모든 평가 지표에서 일관된 개선이 관찰되었습니다. 특히 Guo 데이터셋은 더 낮은 인지 부하(NASA-TLX), 더 높은 사용성(SUS), 향상된 심미적 조화(AHS), 단축된 검색 효율성 시간(SET), 개선된 화면 간 일관성(CSCR)을 포함하여 사용자 중심 지표 전반에서 우수한 성능을 나타냈습니다. 그러나 이러한 결과는 신중한 해석이 필요합니다. Guo 데이터셋에서 관찰된 UX 지표의 개선은 우수한 구조적 레이아웃 품질보다는 주로 강력한 색상 일관성과 상대적으로 단순한 시각적 구성에 기인합니다. 사용자는 이러한 인터페이스를 시각적으로 더 조화롭고 인지적 부담이 적다고 인식하지만, 이전 결과에서는 Guo 데이터셋이 정렬, 그룹화 및 읽기 순서 측면에서 낮은 성능을 보였음을 알 수 있습니다. 이는 UI 디자인에서 지각적 요인과 구조적 요인 사이의 중요한 차이를 강조합니다. 색상 조화와 같은 지각적 속성은 UX를 크게 향상시키지만, 기능적 사용성을 위해서는 구조적 정확성과 레이아웃 일관성이 여전히 중요합니다. 따라서 최적의 UI 디자인을 위해서는 지각적 조화와 구조적 정확성 사이의 균형이 필요합니다.

그림 9. 데이터셋별 사용자 연구 지표 비교. 그룹화된 막대 그래프는 RICO, ENRICO 및 Guo의 UI Color 데이터셋 전반의 사용자 연구 지표를 비교합니다. x축은 NASA 작업 부하 지수(NASA-TLX), 시스템 사용성 척도(SUS), 미적 조화 점수(AHS), 구조적 효율성 시간(SET), 교차 화면 일관성 비율(CSCR)을 포함한 평가 지표를 나타내며, y축은 해당 점수를 나타냅니다. 막대는 각 데이터셋의 성능을 나타내어 사용성, 인지 부하, 미적 품질 및 인터페이스 일관성의 차이를 보여줍니다. NASA-TLX(0–100, 낮을수록 좋음), SUS(0–100, 높을수록 좋음), AHS(1–7 리커트 척도), SET(s, 낮을수록 좋음), CSCR(0–1, 높을수록 좋음). 이 그림의 더 큰 버전을 보시려면 여기를 클릭하십시오.

가설의 통계적 검증

제시된 가설(H1–H4)을 추가로 검증하기 위해 레이아웃 품질, 인지 부하, 색상 조화 및 사용성 측정 지표를 포함한 주요 평가 지표에 대해 통계적 유의성 검정을 수행하였습니다(Table 6). 결과는 평균 ± 표준 편차로 보고되었으며, 95% 신뢰 구간(p < 0.05)에서 대응 표본 t-검정(paired t-tests)을 사용하여 통계적 유의성을 평가하였습니다. 분석 결과, 제안된 프레임워크는 정렬 정확도, 그룹화 정확도, 읽기 순서, 인지 부하(NASA-TLX) 및 색상 조화 측정 지표를 포함한 여러 지표에서 베이스라인 방식보다 통계적으로 유의미한 개선을 달성한 것으로 나타났습니다. 특히 인지 부하의 감소와 사용성 지표의 개선은 매우 유의미한 차이(p < 0.01)를 보였습니다. 이러한 결과는 인지 설계 원칙과 지각적 색상 모델링의 통합이 UI 품질의 측정 가능한 통계적 유의미한 개선으로 이어진다는 것을 확인해주며, 이에 따라 가설 H1–H4를 뒷받침합니다.

지표	기초선 (Mean ± SD)	제안 방법 (Mean ± SD)	개선도 (%)	p-값	유의성
정렬 오차 (↓)	7.8 ± 1.2	4.2 ± 0.9	46.10%	0.003	유의함
그룹화 정확도 (↑)	0.68 ± 0.05	0.82 ± 0.04	20.50%	0.001	유의함
읽기 순서 정확도 (↑)	0.72 ± 0.06	0.87 ± 0.03	20.80%	0.002	유의함
NASA-TLX (↓)	68.5 ± 5.4	47.2 ± 4.8	31.10%	0.0005	매우 유의함
SUS 점수 (↑)	71.3 ± 6.2	88.9 ± 4.5	24.70%	0.0008	매우 유의함
색상 조화 지수 (↑)	0.61 ± 0.07	0.83 ± 0.05	36.00%	0.001	유의함
대비비 (↑)	4.1 ± 0.6	6.2 ± 0.5	51.20%	0.002	유의함

표 6: 베이스라인 방법과 제안된 방법 간의 성능 지표 통계적 비교. 이 표는 정렬 오차, 그룹화 정확도, 읽기 순서 정확도, NASA 작업 부하 지수(NASA-TLX), 시스템 사용성 척도(SUS), 색상 조화 지수 및 대비비를 포함한 주요 성능 지표의 평균 및 표준 편차(mean ± SD)를 나타냅니다. 개선 백분율, p-값 및 통계적 유의 수준이 보고되었습니다. (↑)는 값이 높을수록 좋음을 나타내며, (↓)는 값이 낮을수록 좋음을 나타냅니다. 통계적 유의성은 p < 0.05에서 평가되었습니다.

데이터셋별 관찰 사항

Guo 데이터셋의 구조적 메트릭에서 상대적으로 낮은 성능이 관찰된 것은 해당 데이터셋의 고유한 특성 때문인 것으로 분석됩니다. Guo 데이터셋은 RICO 및 ENRICO보다 규모가 작으며, 구조화된 레이아웃 주석보다는 주로 지각적 색상 특성에 집중하고 있습니다. 그 결과, 컴포넌트 배치에서 더 높은 가변성을 보이며, 계층적 조직 구조가 취약하고, 화면 간 레이아웃 구조의 일관성이 낮습니다. 이러한 특성으로 인해 구조적 학습과 레이아웃 최적화가 더 어려워지며, 이는 지각 및 사용자 중심 평가에서 강한 성능을 보였음에도 불구하고 정렬, 그룹화 및 읽기 순서 메트릭에서 낮은 성능을 나타내는 이유를 설명해 줍니다.

어블레이션 연구

절제 연구(ablation study)는 개별 구성 요소를 체계적으로 제거하고 레이아웃 품질, 색상 모델링 및 탐지 성능에 미치는 영향을 분석함으로써 제안된 프레임워크 내 각 모듈의 기여도를 평가합니다. 레이아웃 품질은 AE, GA, ROA 및 LCS를 사용하여 평가합니다. AE는 UI 요소의 위치 편차를 반영하며, 값이 높을수록 공간 구조가 취약함을 나타냅니다. GA는 게슈탈트 원리에 따라 구성 요소가 얼마나 효과적으로 조직되었는지 평가합니다. ROA는 논리적인 시각적 흐름의 보존 정도를 측정하며, LCS는 정렬, 간격 및 레이아웃 조직 측면에서 화면 간 구조적 일관성을 정량화합니다. 색상 품질 저하는 지각적 색차인 ΔE, CHI 및 CDS를 사용하여 평가하며, 이는 지각적 균일성, 미적 일관성 및 팔레트 풍부함을 종합적으로 평가합니다. 탐지 성능은 mAP, 정밀도(precision) 및 재현율(recall)을 사용하여 평가하며, 이는 Faster R-CNN 모듈을 더 단순한 탐지 모델로 교체했을 때의 영향을 정량화합니다. 이러한 지표들을 통해 각 모듈이 전체 시스템 성능에 어떻게 기여하는지에 대한 종합적인 평가를 제공합니다.

표 7은 각 모듈의 기여도를 요약하고 제안된 프레임워크를 기존의 UI 생성 방식과 비교하여 보여줍니다. 전체 모델은 모든 레이아웃 품질, 색상 모델링 및 검출 지표에서 최고의 성능을 달성하였으며, 이는 인지적 디자인, 지각적 색상 모델링 및 딥 비주얼 이해가 시너지 효과를 낸다는 것을 입증합니다. 색상 모델링 모듈을 제거하면 ΔE가 크게 증가하는 반면 CHI와 CDS는 상당히 감소하며, 이는 지각적 균일성과 색상 조화의 상실을 나타냅니다. 이는 심미적 및 지각적 품질을 유지하는 데 있어 CAM02-UCS 기반 모델링의 중요성을 확인시켜 줍니다. 인지적 레이아웃 모듈을 제거하면 AE가 크게 증가하고 GA와 ROA가 눈에 띄게 감소하며, 이는 구조적으로 일관되고 가독성 있는 레이아웃을 생성하는 데 인지적 디자인 원칙이 필수적임을 보여줍니다. 멀티스크린 일관성 모듈을 제거하면 LCS가 감소하여, 여러 화면에서 일관된 레이아웃 패턴을 유지하는 해당 모듈의 역할을 확인하였습니다. Faster R-CNN 검출기를 더 단순한 CNN으로 교체하면 mAP, 정밀도(precision) 및 재현율(recall)이 급격히 하락하며, 이는 전체 파이프라인에서 견고한 컴포넌트 검출의 결정적인 중요성을 강조합니다. pix2code, REDRAW, LDGM을 포함한 베이스라인 방법들과 비교했을 때, 제안된 프레임워크는 레이아웃 정확도, 시각적 일관성 및 지각적 색상 품질 전반에서 모든 접근 방식보다 일관되게 우수한 성능을 보입니다.

방법 / 모듈	AE ↓	GA ↑	라만 광학 활성 (Raman Optical Activity) ↑	액체 크로마토그래피-질량 분석법(LCS) ↑	ΔE ↓	CHI ↑	코딩 서열 (CDS) ↑	평균 정밀도 평균 (mAP) ↑
컬러 모듈 제거됨	0.14	0.86	0.92	0.84	7.85	0.61	12.4	0.9
인지 레이아웃 모듈 제거됨	0.18	0.72	0.73	0.69	4.21	0.79	17.9	0.89
멀티 스크린 일관성 제거됨	0.17	0.81	0.88	0.62	4.18	0.81	17.3	0.9
Simple CNN으로 대체된 Faster R-CNN	0.16	0.85	0.91	0.85	4.15	0.82	18.1	0.74
Pix2Code	0.25	0.61	0.65	0.51	10.2	0.48	9.6	0.65
다시 그리기	0.21	0.66	0.72	0.56	8.7	0.52	11.4	0.72
LDGM (레이아웃 확산 모델)	0.19	0.74	0.79	0.63	6.9	0.59	13.8	0.8
제안된 전체 모델	0.12	0.89	0.94	0.87	4.12	0.83	18.7	0.91

표 7: 제안된 프레임워크와 베이스라인 방법들의 절제 연구 및 비교 성능 분석. 이 표는 제안된 전체 모델을 특정 모듈(색상 모듈, 인지적 레이아웃 모듈, 멀티스크린 일관성, Faster R-CNN을 단순 CNN으로 대체)이 제거된 변형 모델 및 베이스라인 방법(pix2code, REDRAW, LDGM)과 비교하여 개별 구성 요소의 영향을 평가합니다. 성능은 정렬 오차(AE), 그룹화 정확도(GA), 읽기 순서 정확도(ROA), 레이아웃 일관성 점수(LCS), 지각적 색차(ΔE), 색상 조화 지수(CHI), 색상 다양성 점수(CDS) 및 평균 정밀도 평균(mAP)을 사용하여 평가합니다. (↑)는 값이 높을수록 좋음을 나타내며, (↓)는 값이 낮을수록 좋음을 나타냅니다.

데이터 가용성:

본 연구에 사용된 데이터 세트는 다음 링크에서 확인할 수 있습니다: RICO 데이터 세트: https://interactionmining.org/rico; ENRICO 데이터 세트: https://github.com/luileito/enrico; Guo의 UI Color 데이터 세트: https://github.com/guozhongke/UI-Color-Dataset.

보충 파일 1. 수학적 공식 및 확장된 구현 상세 내용.이 파일은 제안된 자동화 UI 프로토타이핑 프레임워크를 뒷받침하는 상세한 수학적 공식과 알고리즘 워크플로우를 제공합니다. 여기에는 컴포넌트 탐지 학습, 레이아웃 패턴 추출, 색상 조화 모델링, 통합 UI 프로토타이핑 목적 함수, Faster R-CNN 탐지 상세 내용, 공간 거리 및 정렬 유사도 계산, 논리적 UI 트리 구축, CAM02-UCS 기반 지각 색상 모델링, 인지 디자인 최적화, 멀티스크린 일관성 모델링 및 알고리즘 S1-S3가 포함됩니다.이 파일을 다운로드하시려면 여기를 클릭하십시오.

토론

연구 결과, 사용성, 구조적 조직화 및 지각적 품질에서 통계적으로 유의미한 개선(p < 0.05)이 나타났으며, 이는 자동화된 UI 프로토타이핑에 인지 설계 원칙을 통합하는 것이 효과적임을 확인시켜 줍니다. 주로 시각적 탐지나 규칙 기반 휴리스틱에 의존하는 기존의 UI 생성 시스템과 달리, 제안된 프레임워크는 UI 재구성 프로세스 전반에 걸쳐 게슈탈트 그룹화, 계층 모델링, 간격 제약 및 지각적 가독성을 통합합니다. NASA-TLX, SUS 및 SET에서 관찰된 개선 사항은 인지 부하의 통계적으로 유의미한 감소(NASA-TLX, p.< 0.01)를 추가로 입증합니다. 이러한 결과는 자동화된 UI 생성이 단순히 시각적 재구성 정확도를 넘어 실제적인 사용성을 달성하기 위해 인간 중심 설계 지식을 통합해야 함을 시사합니다. 또한, 설정된 모든 가설(H1–H4)이 실험 결과에 의해 실증적으로 지지되었습니다.

레이아웃 개선 외에도, CAM02-UCS 기반의 지각적 색상 모델링의 통합은 ΔE, CHI, CDS 및 대비비(contrast ratio)의 향상에서 나타나듯 색상 조화, 접근성 및 지각적 안정성에서 통계적으로 유의미한 이득(p < 0.05)을 가져옵니다. 주로 색상 최적화에 집중하는 자동 이미지 기반 UI 색상 테마 생성과 같은 이전 연구들과 비교하여, 제안된 프레임워크는 단일 파이프라인 내에서 색상과 레이아웃 정밀화를 모두 통합합니다. 또한, 멀티스크린 일관성 모듈의 포함은 단일 화면 UI 생성에만 집중했던 이전 접근 방식들의 주요 한계점을 해결합니다. pix2code³¹, REDRAW^23,24, LDGM³²을 포함한 기존 방법들과의 비교 결과, 이러한 방식들은 인지적 원리, 지각적 색상 조화 또는 멀티스크린 추론을 통합하지 않고 주로 구조적 재구성이나 생성적 모델링을 강조함을 보여줍니다. 제안된 프레임워크는 레이아웃 정확도 지표(AE, GA, ROA), 지각 지표(CHI 및 ΔE), 그리고 사용성 측정 항목(SUS 및 CSCR) 전반에 걸쳐 이러한 방법들보다 통계적으로 유의미한 개선(p < 0.05)을 입증합니다. 이러한 결과는 인지적 디자인 원칙, 지각적 색상 모델링 및 딥러닝을 통합 시스템 내에서 결합하는 것의 이점을 강조합니다.

결과에서 얻은 중요한 관찰 사항은 UX에 영향을 미치는 구조적 요인과 지각적 요인의 구분입니다. 구조적 최적화는 기능적 정확성과 레이아웃의 명확성을 향상시키는 반면, 지각적 최적화, 특히 색상 조화는 사용자의 인식과 인지 부하에 상당한 영향을 미칩니다. 이러한 연구 결과는 최적의 UI 설계를 위해 구조적 정확성과 지각적 일관성 사이의 균형이 필요함을 나타냅니다. 입증된 개선 사항에도 불구하고 몇 가지 한계점이 남아 있습니다. 예를 들어, Guo UI Color 데이터셋과 같이 규모가 작고 지각적 성격이 강한 데이터셋의 경우, 레이아웃 구성의 가변성과 제한적인 구조적 주석으로 인해 구조적 지표에서의 성능이 더 낮게 나타납니다. 이러한 특성들은 일관된 레이아웃 패턴과 계층적 관계를 학습하는 데 어려움을 줍니다. 향후 연구에서는 이러한 데이터셋 전반에 걸친 강건성을 향상시키는 데 집중할 예정입니다.

이론적 관점에서 본 연구는 인지 및 지각 원리를 딥러닝 워크플로우에 직접 내장함으로써 UI 생성을 획기적으로 개선할 수 있음을 입증합니다. 본 연구는 UI 생성을 단순히 컴퓨터 비전이나 코드 생성 문제로만 보는 기존의 관점에 도전합니다. 대신, perceptual uniformity(CAM02-UCS를 통해), 인지 부하 감소(게슈탈트 원리와 계층 모델링을 통해), 그리고 멀티스크린 디자인 일관성을 자동화된 UI 시스템의 핵심 구성 요소로 통합하는 것의 중요성을 강조합니다. 본 연구는 UI 생성이 구조적 정확성뿐만 아니라 심리학적 및 지각적 요인까지 고려하는 인간 중심의 계산 모델로 전환하는 데 기여합니다. 이처럼, 본 연구는 자동화된 디자인 지능의 새로운 이론적 방향을 제시합니다.

실무적인 관점에서, 제안된 프레임워크는 UI 디자이너, 제품 팀 및 프로토타이핑 도구에 즉시 적용 가능한 솔루션을 제공합니다. 이 시스템은 인지 부하를 줄이고 검색 효율성을 높임으로써, 전문적인 디자인 표준을 충족하기 위해 수동으로 수정해야 하는 작업을 최소화한 UI 레이아웃을 생성합니다. 지각적으로 최적화된 색상 테마의 사용은 WCAG 2.1과 같은 웹 콘텐츠 접근성 지침의 준수를 보장하여 실제 애플리케이션에서의 즉각적인 사용성을 가능하게 합니다. 또한, 멀티스크린 일관성 모듈은 수동 조정 없이도 레이아웃과 디자인 패턴의 일관성을 유지함으로써 다중 페이지 애플리케이션의 개발 속도를 높여줍니다. 종합적으로, 본 프레임워크는 생성된 디자인의 품질과 사용성을 모두 향상시키는 동시에 UI 개발 시간을 획기적으로 단축할 수 있는 잠재력을 가지고 있습니다.

제안된 프레임워크는 인지적 설계 원칙, 지각적 색상 모델링(CAM02-UCS) 및 멀티스크린 레이아웃 일관성을 통합된 계산 파이프라인으로 통합함으로써 자동화된 UI 프로토타이핑에 인간 중심의 접근 방식을 도입합니다. 구조적 재구성이나 시각적 탐지에 주로 집중했던 기존 방식과 달리, 본 프레임워크는 게슈탈트 그룹화, 계층 구조, 대비 최적화 및 지각적 균일성을 명시적으로 모델링합니다. 실험 결과, 사용성(SUS 및 NASA-TLX), 시각적 조화(AHS, CHI 및 ΔE), 그리고 구조적 성능(GA, ROA, LCS 및 mAP)에서 유의미한 개선이 나타났으며, 이는 인지 및 지각 모델링이 UI 품질과 UX를 향상시킨다는 것을 확인시켜 줍니다. 향후 연구에서는 시맨틱 이해와 구조적 추론을 개선하기 위해 트랜스포머 기반의 비전-언어 모델 통합을 탐색할 예정입니다. 또한, 적응형 개인화, 기기 반응형 레이아웃, 그리고 휴먼-인-더-루프(human-in-the-loop) 정밀화 과정을 통합함으로써 시스템의 실용적 적용 가능성을 더욱 높일 수 있을 것입니다. 종합적으로, 본 연구는 시각적으로 정확할 뿐만 아니라 인지적으로 효율적이고 지각적으로 조화로우며 실무적으로 배포 가능한 차세대 AI 기반 UI 디자인 시스템의 토대를 제공합니다.

재료

이 논문에 사용된 재료 목록

이름	회사	카탈로그 번호	댓글
CPU (프로세서)	AMD Ryzen 9 7950X (16-core, 32-thread, 4.5–5.7 GHz)	Advanced Micro Devices (AMD), USA	Ryzen 9 7950X
CUDA Toolkit	버전 11.8	NVIDIA Corporation, USA	CUDA Toolkit 11.8
cuDNN	버전 8.9	NVIDIA Corporation, USA	cuDNN v8.9
Faster R-CNN	객체 검출 모델 (Region Proposal Network 포함)	Meta AI Research / Detectron2	Detectron2 framework
Matplotlib	버전 3.7	Matplotlib Development Team	v3.7.0
NVIDIA RTX 4090 GPU	24 GB GDDR6X 그래픽 카드	NVIDIA Corporation, Santa Clara, CA, USA	RTX 4090
NumPy	버전 1.24	NumPy Developers	v1.24.0
OpenCV	버전 4.8	OpenCV Foundation	v4.8.0
PyTorch	버전 2.0	PyTorch Foundation (Meta AI)	v2.0.0
FPN 기반 ResNet-50	Feature Pyramid Network 기반 백본 CNN	Microsoft Research / Detectron2	ResNet-50-FPN
Scikit-learn	버전 1.3	Scikit-learn Developers	v1.3.0
SciPy	버전 1.10	SciPy Community	v1.10.0
시스템 메모리 (RAM)	64 GB DDR5	Corsair / Kingston (또는 동등 제품)	DDR5 64GB Kit
Ubuntu 운영 체제	버전 22.04 LTS	Canonical Ltd., UK	Ubuntu 22.04 LTS