최근 SNS나 YouTube를 보면, Claude Code나 Codex와 같은 AI를 사용하여 애플리케이션을 개발하는 사례가 급속도로 늘어나고 있는 것 같습니다.

저 자신도 UX 분석에 AI를 활용하는 경우가 있으며, 그 과정에서 "휴리스틱 평가 (Heuristic Evaluation)도 AI에게 맡길 수 있지 않을까"라는 생각을 하게 되었습니다.

물론 최종 판단은 인간이 수행하지만, 디자인 리뷰의 초안 만들기, 놓치는 부분의 감소, 리뷰 품질의 표준화는 AI가 잘할 수 있는 영역이라고 느끼고 있습니다.

그래서 이번에는 AI를 사용하여 휴리스틱 평가 도구를 만들어 보았습니다.

휴리스틱 평가 (Heuristic Evaluation)란, 웹사이트나 앱 화면을 미리 정해진 사용성 원칙에 비추어 확인하고, 사용하기 불편함으로 이어지는 문제를 찾아내는 평가 방법입니다.

여기서 말하는 "휴리스틱 (Heuristic)"이란, 엄격한 수식이나 절대적인 규칙이 아니라, 과거의 지견으로부터 도출된 경험칙이나 판단 기준을 의미합니다.

실제 사용자에게 조작하게 하는 것이 아니라, 디자이너나 UX 담당자 등의 평가자가 화면을 확인하며,

• 사용자가 현재 상태를 이해할 수 있는가
• 조작 방법을 망설임 없이 판단할 수 있는가
• 오조작을 방지하는 메커니즘이 있는가
• 화면 내 표현에 일관성이 있는가
• 필요한 정보를 쉽게 찾을 수 있는가

와 같은 관점에서 문제를 찾습니다.

휴리스틱 평가에서 자주 사용되는 것이, 사용성 연구자인 Jakob Nielsen이 제창한 "사용성 10원칙"입니다.

대표적인 평가 관점은 다음과 같습니다.

시스템 상태의 가시성

처리 중, 완료, 에러 등, 현재 무엇이 일어나고 있는지를 사용자가 파악할 수 있는가. -
실세계와의 일치

시스템 고유의 전문 용어가 아니라, 사용자가 평소 사용하는 언어나 이해하기 쉬운 표현으로 되어 있는가. -
사용자의 주도권과 자유도

잘못된 조작을 했을 경우, 되돌리기, 취소하기, 다시 하기와 같은 수단이 있는가. -
일관성과 표준

같은 의미의 버튼이나 조작이 화면에 따라 다른 표현으로 되어 있지 않은가. -
에러 방지

에러가 발생한 후 설명하는 것뿐만 아니라, 애초에 실수가 일어나기 어려운 설계가 되어 있는가. -
기억이 아닌 인식을 촉진

사용자가 이전 화면의 내용을 기억하지 못하더라도, 선택지나 필요한 정보를 화면상에서 확인할 수 있는가. -
유연성과 효율성

초보자도 사용하기 쉽고, 숙련된 사용자는 효율적으로 조작할 수 있는가. -
아름답고 최소한의 디자인

필요성이 낮은 정보나 장식이 중요한 정보의 이해를 방해하고 있지 않은가. -
에러로부터의 회복 지원

에러 메시지를 통해 무엇이 문제이며, 다음에 무엇을 해야 하는지 알 수 있는가. -
도움말과 문서

조작에 망설여질 때, 필요한 설명이나 서포트 정보에 접근할 수 있는가.

이러한 원칙을 사용함으로써, "왠지 사용하기 불편하다"라는 감각적인 지적을 일정 기준에 따라 정리할 수 있습니다.

예를 들어, 입력 폼을 평가했을 경우 다음과 같은 문제를 발견할 수 있습니다.

• 필수 항목이 알기 어렵다
• 입력 에러의 원인이 표시되지 않는다
• 전송 후 처리가 완료되었는지 알 수 없다
• 되돌리기 조작 시 입력 내용이 사라져 버린다
• 같은 의미의 버튼에 서로 다른 문구가 사용되고 있다
• 사용자가 이해하기 어려운 사내 용어가 표시되어 있다

이러한 문제들은 하나하나 보기에는 작아 보여도, 쌓이게 되면 이탈이나 조작 실수로 이어집니다.

휴리스틱 평가는 이러한 문제들을 비교적 빠른 단계에서 발견하기 위한 방법입니다.

휴리스틱 평가와 사용자 테스트 (User Test)는 비슷해 보이지만 목적이 다릅니다.

휴리스틱 평가에서는 전문가나 담당자가 원칙에 기반하여 문제를 예측합니다. 반면, 사용자 테스트에서는 실제 사용자에게 제품을 조작하게 하여 그 행동이나 발언으로부터 문제를 발견합니다.

처음에 휴리스틱 평가로 명확한 문제를 제거하고, 그 후에 사용자 테스트로 실제 행동을 확인하는 조합이 현실적인 절차입니다.

지금까지 인간이 수행해 온 디자인 리뷰는,

・사람에 따라 지적 내용이 다르다

・리뷰 담당자에 따라 품질이 들쭉날쭉하다

・초보자에게는 리뷰 관점이 어렵다

・리뷰에 시간이 걸린다

와 같은 문제가 있었다고 생각합니다.

휴리스틱 평가 (Heuristic Evaluation)는 편리하지만, "10원칙을 알고 있다"는 것만으로는 실제 평가를 수행하기 어렵다는 문제가 있었습니다.

그래서 AI에게 리뷰를 맡기면 일정 수준의 품질로 지적할 수 있지 않을까? 라는 생각이 계기가 되었습니다.

개발은 거의 AI가 수행했으며, 제가 한 일은 의외로 적었습니다. 주로 담당한 것은

・요건(Requirements) 구상
・평가 항목 정리
・AI에게 지시
・동작 확인

정도였습니다.

반면, AI는

・UI 작성
・레이아웃
・구현 (Implementation)
・API 연결
・버그 수정

까지 담당하고 있습니다.

"직접 코드를 작성한다"기보다 "AI에게 구현을 의뢰한다"는 업무였습니다.

휴리스틱 평가에서는 화면을 일정한 평가 기준과 비교하여, 문제점과 개선안을 정리합니다.

이 작업에는,

• 여러 평가 항목을 누락 없이 확인하기
• 화면 내의 문제를 언어화하기
• 문제를 평가 원칙으로 분류하기
• 개선안을 일정한 형식으로 출력하기

와 같은 공정이 있습니다.

이러한 과정은 문장이나 이미지를 읽어 들여 지정된 기준과 비교하고 결과를 정리하는 생성형 AI (Generative AI)의 특성과 궁합이 좋지 않을까 생각했습니다. 물론, AI의 지적이 항상 옳은 것은 아닙니다.

그럼에도 불구하고, 사람이 리뷰를 시작하기 전의 1차 체크나 놓치는 부분을 줄이기 위한 보조 도구로서는 활용할 수 있는 가능성이 있다고 판단됩니다.

그래서 이번에 화면을 AI가 읽어 들여, 휴리스틱 평가의 관점에서 문제점과 개선안을 출력하는 도구를 만들어 보았습니다.

이번에 제작한 도구는,

스크린샷을 업로드한다

↓

AI가 해석

↓

평가 결과 표시

라는 흐름으로 되어 있습니다.

당초에는 URL을 입력하면 AI가 스크린샷을 생성하여 자동으로 해석해 주는 도구를 생각했으나, 테스트 단계에서 잘 작동하지 않는다는 점이 판명되어, 직접 캡처 이미지를 준비하여 입력하는 방식으로 변경했습니다.

평가 내용은 "Nielsen의 10원칙"이지만, 옵션으로

・모바일 친화성 (Mobile Friendly)
・시각적 계층 및 정보 설계 (Visual Hierarchy / Information Design)
・전환율 최적화 (CRO)

을 추가할 수 있습니다.

옵션 평가 관점으로서 표준 10개 항목에 더해,

・접근성 (Accessibility, WCAG): 장애가 있는 사용자에 대한 대응 상황을 평가
・모바일 친화성 (Mobile Friendly): 스마트폰·태블릿에서의 조작성을 평가
・시각적 계층 및 정보 설계 (Visual Hierarchy / Information Design): 정보의 우선순위나 시선 유도 설계를 평가
・전환율 최적화 (CRO): 사용자의 목표 달성을 촉진하는 설계를 평가

를 포함하며, 단순히 "이 부분이 나쁘다"가 아니라 개선안까지 출력하도록 했습니다.

평가 결과는 분석 완료 후 다음과 같은 내용이 표시됩니다.

종합 스코어 아래에는 총평 텍스트가 표시됩니다.

다음은 평가 샘플입니다.

ヒューリスティック評価サンプル.png

실제로 개발하며 느낀 점은 코드를 작성하는 것이 아니었습니다. 가장 어려웠던 것은 AI에게 "무엇을 만들어 주길 원하는지"를 정확하게 전달하는 것이었습니다.

예를 들어, "평가해 줘"라고만 하면 기대한 결과가 나오지 않습니다. 평가 기준을 세밀하게 정의하고, 출력 형식도 정하고, 채점 방법도 정하며, 개선안의 상세도(Granularity)도 지정해야 합니다.

그렇게 하면 갑자기 정밀도가 올라갑니다. 즉, AI 개발에서는 프로그래밍 능력보다 설계 능력이나 요건 정의 능력이 더 중요해진다고 느꼈습니다.

또한 앞서 언급했듯이, AI는 "네, 할 수 있습니다"라고 쉽게 할 수 있다고 선언하지만, 막상 구현해 보면 "역시 할 수 없었습니다"라고 하는 경우가 종종 있습니다.

그 대신 "이 방법이라면 구현 가능합니다"라며 다른 대안을 세트로 제시해 주었기 때문에, 이번에는 그 새로운 접근 방식을 채택함으로써 무사히 넘길 수 있었습니다.

실제로 사용해 보니 매번 상당히 유사한 관점으로 리뷰를 해줍니다.

물론 디자인의 아름다움, 브랜드 이미지, 감성적인 인상 등은 여전히 인간의 판단이 필요합니다.

하지만 정보 부족, 버튼 배치, 라벨, 조작 흐름, 일관성 같은 규칙 기반(Rule-based)의 지적은 충분히 실용적인 수준이었습니다. 특히 리뷰 전 셀프 체크에는 상당히 도움이 될 것 같습니다.

이번에 가장 인상 깊었던 점은, AI는 "개발자"라기보다 "우수한 페어 프로그래머 (Pair Programmer)"에 가깝다는 것입니다. 코드는 고속으로 작성해 줍니다. 하지만 무엇을 만들지, 어떤 품질을 목표로 할지, 어떻게 평가할지는 인간이 결정해야 합니다.

즉, AI 시대에 가치가 높아지는 것은 코드를 작성하는 능력뿐만 아니라, 문제를 정리하고 요건을 정의하며 AI에게 적절한 지시를 내리는 능력이라는 것을 느꼈습니다.

이번에는 휴리스틱 (Heuristic) 평가를 대상으로 했지만, 앞으로는 더욱 발전시키고 싶습니다.

예를 들어, 브랜드 이미지 평가, 감성 (Emotional) 평가, 디자인 리뷰 (Design Review) AI 에이전트화 등입니다.

단순한 체크 도구가 아니라, 'AI 디자인 리뷰 어시스턴트 (AI Design Review Assistant)'와 같은 것을 목표로 하고 있습니다.

이번 개발에서 가장 놀라웠던 점은, 'AI로 이 정도까지 만들 수 있게 되었다'는 것보다 '인간의 역할이 변했다'는 것이었습니다.

이전에는 '코드를 작성하는 것'이 개발의 중심이었지만, 지금은 '무엇을 만들어야 하는지를 정의하고, AI에게 구현하게 하는 것'이 중요해지고 있습니다.

휴리스틱 평가 도구는 그 변화를 실감할 수 있었던 프로젝트였습니다.

마찬가지로 디자인 리뷰나 UI 개선에 종사하고 계신 분이라면, AI를 '리뷰의 보조 역할'로 도입하는 것만으로도 큰 효과를 느낄 수 있을지도 모릅니다.