brunch

AI 시선추적과 UX/UI 디자인 평가의 혁신

딥러닝 기반 예측 모델을 통한 데이터 중심의 디자인 검증 프로세스 가속화

by 유훈식 교수

1. UX 평가 패러다임의 급진적 변화와 Attention Insight의 등장


디자인 검증의 새로운 요구: 워크플로우의 통합 가속화


현대의 디지털 제품 개발 환경은 인공지능(AI) 기술의 비약적인 발전으로 인해 급격한 패러다임 변화를 경험하고 있다. 특히 AI 코딩과 같은 기술이 개발 영역에서 자동화를 가속화하면서, 개발 과정을 담당하는 전문가의 영역이 재정의되고 있다. 과거에는 기획, 디자인, 개발이 폭포수(Waterfall) 방식처럼 순차적으로 진행되어 업무 영역이 분절되고 병목 현상이 발생하기 쉬웠다. 그러나 이제는 AI를 활용해 코드를 생성하고 작업하는 방식이 보편화되면서, 개발 워크플로우 자체가 통합적인 형태로 변화하고 있다. 이러한 변화 속에서 디자이너와 개발자의 영역이 이전보다 상당히 가까워졌으며, 디자인 검증 역시 개발 속도에 보조를 맞추어 즉각적이고 반복적으로 이루어져야 한다는 요구가 강력해졌다. 즉각적인 데이터 기반의 피드백 도구가 요구되는 환경은, 기존의 느리고 비용이 많이 드는 검증 방식으로는 충족될 수 없다.


기존 시선 추적 평가의 근본적 한계 극복


전통적인 UX 평가는 사용자의 관심과 욕구를 직접적으로 파악하는 데 근본적인 어려움이 있었다. 텍스트 리뷰 데이터나 사용자의 행동 기반 데이터는 사용자의 관심을 간접적으로 보여줄 뿐이며 , 전문가들의 주관적인 평가 척도에 의존하는 경향이 강했다. 이러한 한계를 보완하기 위해 전용 시선 추적 장치(Eye Tracker)를 사용하는 연구들이 활발히 진행되었으나, 이 방식은 고가의 하드웨어 장비가 필수적이라는 단점을 안고 있다. 고가 장비의 의존성은 연구의 접근성을 현저히 낮추었으며, 피실험자 또는 참여 사용자 수를 대규모로 확보하는 데 제약을 발생시켰다. Attention Insight는 딥러닝 기반의 AI 기술을 활용하여 이러한 물적, 시간적 제약을 제거함으로써 UX 평가 방식을 혁신한다. 이 도구는 AI 개발 환경의 가속화에 발맞춰 디자인 검증 과정의 병목 현상을 해소하고, 디자인-개발-검증 주기의 통합 및 가속을 실질적으로 가능하게 만든다.


Attention-insight-landing.jpeg


2. Attention Insight의 핵심 기술: AI 시각적 주의 예측의 과학


합성곱 신경망(CNN) 기반의 시뮬레이션 원리


Attention Insight의 기술적 기반은 심층 학습 알고리즘(Deep learning algorithm)인 합성곱 신경망(Convolutional Neural Network, CNN)이다. 이 AI 모델은 사람들이 웹사이트, 광고, 제품 또는 비디오에서 어디를 보는지 정확하게 예측하기 위해, 수백만 건의 실제 아이 트래킹 응시 데이터에 대해 광범위하게 훈련되었다. 이러한 대규모 데이터 학습을 통해 Attention Insight는 인간 참가자를 동원할 필요 없이도, 실제 시선 추적 히트맵과 최대 96%의 정확도로 일치하는 예측 결과를 생성할 수 있다. 이는 기존 시선 추적 연구의 높은 비용과 긴 소요 시간을 즉각적이고 비용 효율적인 방식으로 대체하는 핵심적인 원리이다.

이미지_2025-12-16_110845610.png


상향식 및 하향식 주의 모델의 통합 분석


Attention Insight는 단순히 시각적 요소의 대비나 밝기를 측정하는 수준을 넘어, 인간의 복잡한 인지적 주의 과정을 모방하기 위해 두 가지 유형의 시각적 주의(Saliency) 모델을 통합적으로 활용한다. 첫째, 상향식 주의(Bottom-Up) 모델은 저수준 이미지 특징(Low-level image features)에 기반한 Finegrained 모델을 사용한다. 이 모델은 색상, 대비, 가장자리 등 시각적 요소 자체의 두드러짐을 분석하여, 사용자가 무의식적으로 주목하는 영역을 추정한다. 둘째, 하향식 주의(Top-Down) 모델은 딥 뉴럴 네트워크 기반의 ViNet과 같이, 일반적인 사람들의 응시 패턴으로 훈련된 고수준 모델을 사용한다. 이는 사용자의 목표나 인지적 과제에 의해 유도되는 시각적 관련 영역을 결정한다.


Attention Insight는 이 두 가지 모델을 통합하여, 시선 추적 데이터와 상향식 및 하향식 주의 맵 간의 일치도를 측정한다. 이러한 인지적 시뮬레이션은 사용자가 단순히 눈에 띄는 영역을 보는 것을 넘어, 무엇을 찾으려 하는지까지 예측할 수 있도록 한다. 결과적으로, CTA나 정보 전달과 같은 복잡한 UX 목표의 성공 여부를 평가하는 데 필수적인 통찰을 제공하며, 시각적 계층 구조가 사용자의 인지적 경로를 얼마나 잘 지원하는지 심층적으로 파악할 수 있다.


3. 핵심 지표: 주관적 디자인을 객관적 데이터로 전환하는 도구


Attention Insight가 제공하는 다양한 지표는 디자이너가 주관적이거나 근거가 불분명한 '느낌'에 기반한 피드백 대신, 객관적인 데이터에 기반하여 디자인 의사 결정을 내릴 수 있도록 돕는다. 이는 정성적 분석 도구와 정량적 검증 도구를 결합하여 가능하다.


figma-plugin-hero.png


시각적 주의의 정성적 분석 지표


주의 히트맵(Attention Heatmap)은 AI가 예측한 시선 집중 영역을 즉각적으로 시각화하여 보여준다. 이를 통해 디자이너는 사용자의 시선이 의도한 흐름을 따르는지, 아니면 불필요한 영역에 분산되는지 등을 빠르게 진단할 수 있다. 또한 대비 맵(Contrast map)은 디자인 요소와 배경 간의 대비 수준을 명확히 표시하여, 핵심 요소가 충분한 시각적 분리를 확보하여 주의를 끌고 있는지 확인하게 한다. 이러한 정성적 분석은 시각적 계층 구조의 문제를 빠르게 찾아내는 데 매우 효과적이다.


Mercedes-page-contrast-map.jpg


디자인 성과 정량화 지표


정량적 지표는 디자인의 효과를 수치화하여, 개선 노력의 필요성과 그 성과를 이해 관계자들에게 명확하게 입증하는 데 기여한다. 명확성 점수(Clarity Score)는 디자인이 사용자에게 정보를 얼마나 명료하게 전달하는지 수치화하여 측정하는 핵심 지표이다. 예를 들어, 이 점수가 46점으로 '보통의 어려움(Moderate Difficulty)'을 나타낸다면, 이는 콘텐츠 접근성에 문제가 있음을 객관적으로 나타낸다. 57점 이상은 '최적 명확성(Optimal Clarity)' 범위로 간주된다. 이 점수는 화면의 혼잡도를 객관적으로 평가하고 디자인 평가의 표준화에 기여하며, 디자인 개선의 필요성을 구체적인 수치로 증명할 수 있게 한다.

Attention-Insigh-clarity-score.png


또한, 주의 백분율(Percentage of Attention)초점 점수(Focus Score)는 CTA 버튼, 핵심 헤드라인 등 미리 설정된 특정 관심 영역(Area of Interest)이 전체 화면에서 받는 주목도를 정량적으로 측정한다. 이러한 측정값을 통해 가장 중요한 디자인 요소에 시청자의 주의가 신속하게 집중되도록 최적화되었는지 검증하고, 디자인 결정에 대한 데이터 기반의 정당성을 부여할 수 있다. 마지막으로, AI 추천(AI Recommendation) 기능은 학습된 패턴을 기반으로 디자인 개선 방향에 대한 실행 가능한 제안을 제공하여, 반복적인 디자인 과정의 효율을 높이는 데 기여한다.


4. 성공적인 활용 사례: 데이터 기반의 디자인 최적화와 비즈니스 성과


Attention Insight는 UX/UI 디자인 단계의 내부 검증뿐만 아니라, 고객의 시선을 끄는 광고 소재 제작 및 마케팅 캠페인 분석 전반에 걸쳐 강력한 효율성을 제공하며 실제 비즈니스 핵심 성과 지표(KPI) 개선에 직접적으로 기여했다.


모바일 앱 UX 개선을 통한 접근성 확보: Augmented Classroom 사례


Augmented Classroom은 초기 앱 정보 화면에서 콘텐츠 접근성 문제가 심각했으며, 대부분의 첫 방문자가 핵심 콘텐츠를 찾지 못해 좌절했다. 초기 디자인에 대한 Attention Insight의 분석 결과, 화면 하단의 CTA 버튼들은 주목도가 매우 낮았고, 긴 텍스트 영역에 가장 많은 주목이 집중되는 패턴이 확인되었다. 또한 명확성 점수는 46점으로, 디자인이 보통의 어려움을 유발함을 나타냈다.


디자이너는 이 분석 결과를 바탕으로 주로 여백(Whitespace)을 늘려 페이지를 덜 혼잡하게 만드는 방향으로 반복적인 최적화를 수행했다. 이 과정을 통해 최종적으로 명료한 3단계 사용자 흐름을 갖춘 디자인에 도달했다. 결과적으로 디바이스 버튼들이 받는 주목도는 8.6%에서 28.2%로 228% 향상되었으며, 명확성 점수는 59점으로 '최적 명확성' 범위에 진입했다. 이러한 디자인 개선은 A/B 테스트에서 CTA 클릭률을 110% 높였고, 궁극적으로 모바일 앱 다운로드가 180% 증가하는 비즈니스 성과로 이어졌다. 이 사례는 주의(Attention) 분석이 실제 전환(Conversion) 증가로 직결되는 명확한 인과 관계를 보여준다.

After-image-augmented-classroom.jpg
After-heatmap-augmented-classroom.jpg


마케팅 캠페인 및 전환율 극대화 사례


Attention Insight는 웹사이트뿐만 아니라 광고 영상 및 포스터 분석에도 활용되어 마케팅 캠페인의 효율을 높이는 데 기여한다. 구체적인 성공 사례를 보면, Filmelier는 Attention Insight를 사용하여 CTA 버튼 클릭률을 258% 증가시켰으며, Humana는 배너 광고의 클릭률(CTR)을 433% 증가시키는 뛰어난 성과를 달성했다. 또한 The Skin Deep은 홈페이지 전환율을 93% 향상시켰고, Sport Chek은 거래량을 7.3% 증가시켰다. 이러한 다양한 산업 및 미디어에서의 성공 사례들은 Attention Insight가 UX/UI 디자인 검증을 넘어, 고객의 시선 확보가 필수적인 모든 시각적 콘텐츠의 최적화에 강력한 도구임을 입증한다.

이미지_2025-12-16_110640208.png


5. 결론: 미래 디자인 검증 워크플로우에서의 역할


Attention Insight는 고비용과 시간 소모가 컸던 전통적인 시선 추적 평가 방식을 딥러닝 기반의 합성곱 신경망 기술로 혁신하고, 빠르고 저렴하며 객관적인 시각적 주의 평가를 제공한다. 디자이너는 이제 인간 참가자 없이도 최대 96%의 정확도를 가진 예측 히트맵과 표준화된 명확성 점수를 활용하여, 디자인 결정에 데이터 기반의 정당성을 부여한다. 이 도구는 이해 관계자의 주관적인 요구가 아닌, 수치화된 주의 데이터를 바탕으로 디자인 개선의 우선순위를 설정하고, 반복적인 디자인 최적화 과정을 가속함으로써 개발 및 검증 주기의 통합에 필수적인 역할을 수행한다. 결과적으로 Attention Insight는 디자인 결정의 신뢰성을 높이고 비즈니스 성과를 극대화하며, 미래의 UX/UI 워크플로우에서 필수적인 표준 검증 도구로 확고히 자리매김한다.



AI 활용 UX/UI 디자인을 공부하고 AI 디자이너 자격증도 취득하고 싶다면?

이미지_2025-12-17_122206099.png

https://onoffmix.com/event/335943

AI를 활용하는 UXUI 디자이너들과 함께 소통하며 성장하고 싶다면?

https://litt.ly/aidesign

AI를 활용한 UX/UI 디자인을 책으로 공부하고 싶다면?

https://www.yes24.com/product/goods/148121780

AI 시대에 나만의 AI스타트업/비즈니스 시스템을 만들고 싶다면?

https://www.smit.ac.kr/major/ai-startup-introduce.php


keyword
매거진의 이전글UI디자인 에이전트 Stitch를 써보자