실타래처럼 엉킨 UI, 데이터로 개선하기

📝 기고 : UX Team, UX Designer Hong (김태홍)

‘스파게티 코드’, 들어보셨나요?

개발 과정에서 시간이 지나면서 코드를 지속적으로 수정하고 추가하다 보면 점점 복잡해져 유지보수가 어려운 상태에 이르게 됩니다. 스파게티 코드란 뒤엉킨 스파게티 면발처럼 어디서부터 손대야 할지 모를 정도로 복잡한 코드를 비유하는 표현입니다. 엉킨 실타래를 푸는 것처럼 업무 난이도가 높아지고 효율이 떨어지게 되죠.
이 문제는 UI에서도 동일하게 발생할 수 있습니다. 특히 B2B SaaS 제품에서는 시간이 지날수록 기능이 추가되면서, 화면 내 정보와 옵션이 점점 얽히게 됩니다. 그 결과 UI의 위계 구조가 흐려지고, 사용성 저하와 유지보수의 어려움이 커지는 상황에 맞닥들이게 됩니다.

데이터스페이스의 설문 편집 기능도 이러한 문제를 겪고 있었습니다. 이 기능은 제품 초기부터 존재했던 핵심 기능 중 하나입니다. 새로운 기능이 추가될 때마다 기존 UI를 유지하면서 업데이트하는 방식을 택했는데, 그 결과 UI는 점점 복잡해졌습니다. 특히 좌측 문항 카드 영역은 작은 공간에 많은 정보가 담겨 복잡한 구조였고, 가독성과 사용성이 저하된 상태였습니다.

이 영역은 사용자가 원하는 문항을 찾고, 설정이 올바르게 적용되었는지 검토하는 중요한 역할을 합니다. 하지만 점점 정보가 추가되면서 사용자들이 핵심 정보를 빠르게 인지하기 어려워졌죠. 이때 UI가 ’스파게티’처럼 복잡해져 더 이상 손대기 어려운 시점에 도달했다고 느꼈습니다.

문제점 분석

기존 문항 카드 영역의 주요 문제는 크게 세 가지였습니다.

1. UI 유지보수성 악화

작은 영역 안에 많은 정보를 담다 보니, 각 정보가 서로 다른 방식으로 표시되거나 숨겨졌습니다. 새로운 정보가 추가될 때마다 모든 케이스를 고려하고 검토해야 했고, 복잡한 레이아웃 때문에 반응형 대응도 어려웠습니다.

2. 사용성 저하

기능이 서로 다른 시기에 추가되고, 그때마다 우선순위를 재설정하는 과정이 반복되면서 정보의 위계가 지나치게 복잡해졌습니다. 여러 개의 정보가 한 화면에 동시에 표시될 경우, 오히려 중요한 요소를 찾기 어려워졌습니다. 또 새로운 기능을 추가할 때마다 어디에, 어떻게 배치할지 고민하는 시간이 점점 길어졌습니다.

3. 코드 복잡도 증가

이 문제는 UI 뿐 아니라 코드에서도 마찬가지였습니다. 단순한 스타일 수정에도 코드 구조가 복잡해 예상보다 많은 시간이 걸렸고, 부모-자식 컴포넌트 간의 설정이 얽혀 있어 수정 시 예기치 않은 문제가 발생하기도 했습니다.

이러한 문제를 스프린트 기간 내에 해결해 UI를 개선하기 위해, 팀을 설득하고 빠르게 의사 결정해야 했습니다. 객관적인 데이터로 현 상태를 점검하기 위해 내부 사용자의 의견을 반영하며 빠르게 인사이트를 얻고 개선안을 마련하고자 했습니다.

해결책: 정보 구조 재정비와 UI 최적화

1. 정보 위계 재설정

먼저 정보 위계를 재설정하는 작업을 진행했습니다. 유사한 기능들을 그룹화하여 정보의 우선순위를 명확하게 정리했습니다. 기존 UI에서 독립적으로 표시되던 요소들을 재구성해, 중요한 정보가 한눈에 들어오도록 조정했습니다.

2. 레이아웃 최적화

제한된 공간에서 정보를 효율적으로 배치하기 위해, 아이콘과 칩(Chip) UI를 적극 활용했습니다. 이를 통해 사용자가 설정을 빠르게 인식할 수 있도록 만들었습니다.

두 사항을 고려해 개선 시안을 팀과 공유했고 긍정적인 반응을 볼 수 있었지만, 사용성을 보장하기 위해 빠르게 사용성 테스트를 계획했습니다. 특히 로직이나 파이핑을 검수하는 과정에 대한 우려와 피드백이 많았기 때문에, 사용자 입장에서 문제없이 사용할 수 있을지 테스트를 통한 결과 데이터로 확인하고자 했습니다.

UT(사용성 테스트)와 결과 데이터 분석

1. 프로토타입 제작

개선 전/후 UI를 각각 프로토타입으로 제작해 직접 비교할 수 있도록 만들었습니다. 약 100개의 문항을 생성하고, 무작위로 파이핑과 로직 설정을 적용해 실제 사용 환경과 유사하게 세팅했습니다.

2. 대상자 설정 및 테스트 진행

테스트 대상은 내부 사용자 중 헤비 사용자(기능을 자주 사용하는 사용자)와 신규 사용자(기능을 거의 사용하지 않는 사용자)을 뽑아 진행했습니다. 이때 신규 사용자는 실제 데이터스페이스 고객과 유사한 조건을 갖추도록 해당 기능의 배경 지식이나 사용 경험이 거의 없는 사용자를 선정해 테스트 신뢰도를 높였습니다.

또한 테스트 순서에 따라 결과가 달라질 수 있음을 고려해, 변동성을 고려해 사용자의 UI 테스트 순서를 무작위로 배치하여 결과의 신뢰도를 높였습니다.

미션은 파이핑 문항 찾기와 로직 설정 문항 찾기, 두 가지로 진행되었습니다. 사용자에게 문항 카드 UI만 보고 특정 설정이 적용된 문항을 찾는 미션을 주고, 수행 과정을 관찰하며 실수 여부와 수행 소요 시간을 측정했습니다.

3. 테스트 결과 분석

1) 정확도 향상

우선 테스트 참여자들이 미션에서 제시한 조건의 문항을 정확하게 파악하는지 확인했습니다. 그 결과 개선 전 UI에서 더 많은 실수가 발생한다는 점을 알 수 있었습니다. 이를 통해 UI 인지 정확도가 개선되었음을 확인할 수 있었습니다.

2) 소요 시간 단축

사용자가 각 미션에서 소요한 시간을 측정해 비교한 결과, 파이핑 문항 찾기 미션에서는 개선 후 UI에서 평균 45% 더 빠른 속도로 수행함을 확인했습니다. 이는 칩(Chip) UI 활용으로 정보 구분이 쉬워진 결과로 분석되었습니다.

반면 로직 설정 문항 찾기 미션에서는 개선 후 UI에서 평균 11% 더 긴 시간이 소요되었습니다. 기존 UI에서는 로직 설정이 크고 강조되었던 반면, 개선 UI에서는 파이핑과 같은 스타일로 적용되었는데요. 미션 후 사용자 인터뷰에서는 자세한 피드백을 확인한 결과, 두 정보가 동시에 표시될 때 사용자는 더 신경 써서 검토하게 되므로 시간이 더 소요된다는 것을 알 수 있었습니다.

최종 개선 UI

테스트를 통해 팀에 제기한 기존 UI의 문제점을 다시 확인할 수 있었습니다. 실무자 입장에서 유지 보수가 어려울 뿐 아니라 사용자의 사용성에도 영향을 주었기 때문입니다. 결과를 종합적으로 분석했을 때에도, 테스트 UI에서 정보 인지 정확성이나 소요 시간이 크게 개선되었기 때문에 방향성에 대한 확신이 생겼습니다. 다만 로직과 파이핑 문항을 보여주는 방식은 추가 개선을 거쳐 색상을 구분하는 최종안을 제안할 수 있었습니다.

마치며

이번 UI 개선을 통해 유지보수성을 높이고 사용성을 향상하는 두 가지 목표를 모두 달성할 수 있었습니다. 기존 UI의 문제를 객관적인 데이터로 검증하고, 사용성 테스트를 거쳐 개선안을 도출한 덕분에 팀을 설득하고 빠르게 의사 결정을 내릴 수 있었습니다.

물론 개선 과정에서 모든 문제가 완벽히 해결된 것은 아니었고, 로직과 파이핑 문항의 시각적 구분 등 추가적인 개선이 필요한 부분도 발견되었습니다. 하지만 이 또한 실사용자의 피드백을 바탕으로 빠르게 보완할 수 있었고, 최종적으로 더 나은 사용자 경험을 제공할 수 있었습니다.

이번 경험을 통해 UI 개선은 단순히 디자인의 심플함이나 유려함을 고려한 변경이 아니라, 데이터 기반의 의사결정과 실 사용자 테스트가 필수적인 과정임을 다시 한번 확인할 수 있었습니다. 앞으로도 지속적으로 데이터를 활용하여 데이터스페이스의 UI를 최적화해 나갈 계획입니다.