Learning to Detect UI Principle Violations via Reinforcement Learning

당신이 로봇에게 그림 그리는 법을 가르치고 있다고 상상해 보세요. 당신은 로봇에게 수백만 장의 사진을 보여주며 이렇게 말합니다. "색상이 물체와 일치하고 선이 직선인지 확인해." 로봇은 그 규칙을 따르는 데 아주 능숙해집니다. 하지만 그러다 당신이 로봇에게 문을 그려달라고 요청합니다. 로봇은 기술적으로는 손잡이가 달린 직사각형 형태의 문을 그려내지만, 손잡이를 너무 작게 그려서 사람이 잡을 수 없게 만들거나, 문틀을 벽과 같은 색으로 칠해 문이 어디서 시작되는지 알 수 없게 만듭니다. 로봇은 당신의 지시를 완벽하게 따랐지만, 결과물은 인간에게 쓸모없거나 심지어 위험할 수 있습니다. 이것이 현대의 "코딩 로봇"(AI 에이전트)들이 웹사이트를 구축할 때 겪는 문제입니다. 그들은 작동하는 코드를 만드는 데는 뛰어나지만(문이 열리도록 함), 사물이 어떻게 보여야 하고 어떻게 느껴져야 하는지에 대한 "인간의 규칙"을 놓치는 경우가 많습니다.

이를 해결하기 위해 과학자들은 모든 페이지를 확인하기 위해 사람을 고용하지 않고도 로봇의 작업물을 검사할 방법이 필요합니다. 단순히 체크리스트를 사용하는 것만으로는 부족한데, 어떤 나쁜 디자인은 까다롭기 때문입니다(예: 함정처럼 보이는 버튼). 또한 모든 페이지마다 사람을 고용할 수는 없는데, 이는 시간이 너무 오래 걸리고 비용이 너무 많이 들기 때문입니다. 이 논문은 웹사이트를 보고, 그림을 보며, 코드를 읽고, "이봐, 이 문 손잡이가 안 보여!"라거나 "이 표지판은 당신을 속이려 하고 있어!"라고 말할 수 있는 "스마트한 로봇 검사관"을 구축하는 것에 관한 것입니다. 연구진은 '강화 학습(Reinforcement Learning)'이라는 특별한 훈련 방법을 사용했는데, 이는 강아지에게 정답을 맞혔을 때 간식을 주고 틀렸을 때는 주지 않음으로써 스스로 실수를 찾아낼 때까지 가르치는 것과 같습니다.

---

나쁜 디자인을 찾아내는 법을 배운 로봇

자, 여기 이야기가 있습니다. UC 산타크루즈와 카네기 멜론 대학교의 연구진은 코딩 AI가 저지르는 실수를 잡아내기 위해 작고 매우 똑똑한 로봇 검사관을 만들기로 했습니다. 그들은 이를 "UI/UX 비평가(UI/UX critic)"라고 부릅니다. 이것은 단순히 그림이 완성되었는지만 확인하는 것이 아니라, 원근법이나 색상에 대한 선생님의 규칙이 잘 지켜졌는지까지 확인하는 엄격한 미술 선생님과 같습니다.

문제점: "작동은 하지만, 형편없는" 웹사이트
현재 AI 도구들은 웹사이트를 마구 찍어내고 있습니다. 이들은 코드가 실행되고 버튼이 클릭되도록 하는 데 훈련되어 있습니다. 하지만 이들은 사이트의 "분위기"나 "안전성"은 무시하곤 합니다. 웹사이트는 완벽하게 작동할 수도 있지만, 다음과 같은 문제를 가질 수 있습니다:

• 접근성 장벽: 손이 떨리는 사람에게는 너무 작은 문 손잡이나, 글자가 너무 연해서 읽을 수 없는 텍스트 같은 것들입니다.
• 다크 패턴(Dark patterns): 아주 작은 투명한 텍스트로 숨겨진 "아니요, 괜찮습니다" 버튼이나, "아니요, 차라리 제값을 다 내겠습니다"라고 말하며 거절할 때 죄책감을 느끼게 만드는 표지판 같은 것들입니다.
• 혼란스러운 레이아웃: 메뉴에 20개의 옵션이 모두 똑같이 생겨서, 마치 피자 한 판을 한 입에 다 먹으려는 듯 뇌가 혼란을 느끼게 만드는 상황 같은 것입니다.

연구진은 이러한 것들을 수동으로 확인하는 것은 너무 느리고, 거대하고 비싼 AI 모델을 사용하여 확인하는 것은 비용이 너무 많이 든다는 것을 알고 있었습니다. 그들은 "골디락스(Goldilocks)" 해결책, 즉 똑똑하면서도 작고 저렴한 모델이 필요했습니다.

해결책: "주입 및 검증(Inject and Verify)" 게임
이 작은 로봇 검사관을 가르치기 위해, 그들은 엄청난 양의 연습 테스트가 필요했습니다. 하지만 이런 특정한 나쁜 디자인이 포함된 실제 웹사이트를 찾는 것은 어렵습니다. 그래서 그들은 "주입 및 검증"이라는 영리한 게임을 발명했습니다.

1. 깨끗한 캔버스: 먼저, AI를 사용하여 수천 개의 완벽하고 깨끗한 웹사이트를 생성했습니다.
2. 방해 공작(Sabotage): 그다음, 매우 똑똑한 "선생님 AI"에게 이 웹사이트들을 비밀리에 망가뜨리라고 요청했습니다. 선생님 AI는 완벽한 페이지를 가져와서 버튼을 아주 작게 만들거나, 흐릿한 텍씨 속에 비용을 숨기거나, "아니요, 괜찮습니다"라는 링크를 무례하게 들리게 하는 등 특정 위반 사항을 주입합니다.
3. 현실 점검: 여기가 마법 같은 부분입니다. 선생님 AI는 단순히 "내가 망가뜨렸다"라고 말하는 데 그치지 않습니다. 그것을 증명해야 합니다. 시스템은 망가진 페이지의 스크린샷을 찍습니다. 만약 선생님 AI가 버튼을 보이지 않게 만들었다고 주장했는데 스크린샷에 여전히 버튼이 명확히 보인다면, 시스템은 "아니, 다시 해봐"라고 말합니다. 위반 사항은 코드에서뿐만 아니라 사진에서도 시각적으로 깨져 있어야 합니다.
4. 데이터셋: 그들은 각각 1개에서 3개의 검증된 가시적 실수가 포함된 약 10,000개의 페이지를 얻었습니다. 이것이 학생 로봇의 훈련 학교가 되었습니다.

훈련: 실행하며 배우기
그들이 선택한 학생 로봇은 "시각-언어 모델(Vision-Language Model, 40억 개의 파라미터를 가진 모델)"입니다. 이는 이 로봇이 텍스트(코드)를 읽고 동시에 사진(웹사이트 스크린샷)을 볼 수 있음을 의미합니다.

그들은 단순히 정답을 보여준 것이 아닙니다. 그들은 강화 학습을 사용했습니다. 로봇이 숨겨진 함정을 찾아야 하는 비디오 게임을 하고 있다고 상상해 보세요.

• 함정(위반 사항)을 발견하면 점수를 얻습니다.
• 함정을 놓치면 점수를 잃습니다.
• 늑대 소리를 내면(정상적인 디자인을 나쁘다고 하면) 점수를 잃습니다.
• 말을 너무 많이 해서 답변을 내놓기 전에 시간이 다 되면 0점을 받습니다.

로봇은 이 게임을 반복해서 플레이하며, 점수를 얻거나 잃을 때마다 자신의 뇌를 조정했습니다. 로봇은 스크린샷을 보고 코드만 보는 것이 아니라, 왜냐하면 버튼이 너무 작다와 같은 실수들은 텍스트가 아닌 사진에서만 보이기 때문입니다.

결과: 무지함에서 전문가로
훈련 전의 로봇은 꽤 형편없었습니다. 코드를 읽고 명백한 텍스트 오류를 찾을 수는 있었지만, 사진을 보고 "이 버튼이 너무 작은가요?"라고 물으면 대부분 틀린 답을 냈습니다. 로봇의 점수는 단 36%(micro-F1이라는 척도)였습니다. 이는 교과서는 공부했지만 실기 시험에는 낙제한 학생과 같았습니다.

강화 학습 훈련 후, 로봇은 전문가가 되었습니다. 로봇의 점수는 **84%**로 뛰어올랐습니다.

• 로봇은 낮은 대비의 색상(0%에서 64%로 상승)이나 지저み로운 간격(4%에서 94%로 상승)과 같은 시각적 실수를 찾아내는 데 매우 능숙해졌습니다.
• 사용자를 속이려는 다크 패턴과 같은 까다로운 디자인을 잡아내는 데 탁월해졌습니다.
• 또한, 명확한 답변을 주기 위해 자신의 "생각" 과정을 조절하여 간결해지는 법을 배웠고, 이는 더 빠르고 신뢰할 수 있게 만들었습니다.

이제 무엇을 할 수 있는가
이 작은 로봇은 단순한 장난감이 아닙니다. 연구진은 이 로봇이 다음과 같은 용도로 사용될 수 있다고 말합니다:

• 새로운 웹사이트를 즉시 **감사(Audit)**하여 안전하고 사용하기 쉬운지 확인합니다.
• 나쁜 훈련 데이터를 필터링하여 미래의 코딩 AI가 나쁜 사례로부터 배우지 않도록 합니다.
• 코딩 AI가 좋은 디자인을 만들었을 때 보상을 주어, 그들이 스스로 더 나은 디자이너가 되도록 돕습니다.

한계
연구진은 자신들의 로봇이 아직 할 수 없는 부분에 대해서도 솔직하게 밝히고 있습니다. 이 로봇은 여러 가지를 동시에 비교해야 하는 정말 어려운 작업, 예를 들어 메뉴에 옵션이 너무 많은지(밀러의 법칙 개념) 또는 버튼이 클릭해야 할 곳에서 너무 멀리 떨어져 있는지(피츠의 법칙)를 판단하는 데 여전히 어려움을 겪습니다. 이러한 작업은 현재의 로봇이 까다로워하는 약간의 "공간적 추론"을 필요로 합니다. 또한, "주입된" 실수들을 바탕으로 훈련되었기 때문에, 실제 세상의 복잡하고 이상한 웹사이트들을 어떻게 처리할지는 100% 확신할 수 없지만, 잘 해낼 것이라고 예상합니다.

요약하자면, 이 논문은 나쁜 디자인을 체크하기 위해 거대하고 비싼 뇌가 필요하지 않다는 것을 보여줍니다. 약간의 영리한 훈련과 많은 연습이 있다면, 작은 규모의 저렴한 로봇도 인간 사용자들이 싫어하는 보이지 않는 함정과 혼란스러운 레이아웃을 찾아낼 수 있으며, 이를 통해 인터넷을 모두에게 더 친근한 곳으로 만들 수 있습니다.