손바닥에 아주 작은 나뭇가시 하나가 박혔던 경험, 다들 있으시죠? 눈에 잘 보이지도 않을 만큼 미세하지만, 무언가를 잡거나 손을 움직일 때마다 찌릿한 통증이 온 신경을 자극합니다. 별것 아닌 것 같아도 그 가시를 빼내기 전까지 우리는 일상의 평온한 몰입으로 돌아갈 수 없습니다.
프로덕트도 마찬가지입니다. 거대한 시스템 오류나 서버 다운만이 사용자를 괴롭히는 것이 아닙니다. 매일 반복하는 작업 동선 어딘가에 숨어있는 0.5초의 망설임, 메뉴를 찾지 못해 헤매는 찰나의 당혹감은 선생님들의 수업 현장에 박힌 '작은 가시'와 같습니다. 매쓰플랫 디테일 UX 개선 프로젝트는 바로 이 사소하지만 집요한 통증을 해소하고 싶다는 마음에서 시작되었습니다.
현장의 목소리에서 찾은 '사소하지만 결정적인' 문제들
매쓰플랫 디테일 UX 개선 프로젝트에서 가장 먼저 맞닥뜨린 문제는 기기 환경과 화면 해상도의 괴리였습니다. 매쓰플랫은 선생님이 태블릿을 들고 교실 곳곳을 누비며 학생들을 밀착 지도하는 '수업 현장'에 초점을 맞춘 서비스였습니다. 이에 따라 모든 UI 디자인은 태블릿에 최적화된 '태블릿 퍼스트(Tablet-first)' 원칙을 따르고 있었습니다.
실제 사용 데이터를 분석한 결과, 다소 다른 흥미로운 패턴이 발견되었습니다. 선생님들은 수업 중에는 태블릿을 활발히 사용하지만, 수업의 핵심인 '수업 준비(문제 은행 검색, 시험지 제작, 학습 관리)' 과정에서는 PC 사용 비중이 더 높았던 것입니다.
중앙에 좁게 갇힌 콘텐츠 영역 때문에 선생님들은 한 번에 많은 학생들을 채점할 수도 없었고, 이는 곧 작업 피로도로 직결되었습니다. 즉, 태블릿 퍼스트 원칙으로 제작된 화면이 '한눈에 들어오는 데이터의 양'을 현저히 줄이고 있었던 것이었습니다.
그리고, 기존의 서비스는 선생님이 학생을 선택하면 직전에 머물렀던 메뉴로 랜딩되는 '개별 맞춤형 접근성'을 지향했습니다. 오래 서비스를 이용한 선생님들에게는 이보다 편한 동선이 없었죠. 하지만 이 '익숙함'이 누군가에게는 '모호함'의 벽이 되었습니다.
새로 유입된 선생님들은 하위 뎁스에서의 선택이 상위 메뉴의 변화를 일으키는 비정형적인 구조에 당혹감을 느꼈습니다. '익숙한 편리함'을 유지해달라는 기존 유저와 '직관적인 구조'를 요구하는 신규 유저 사이의 간극. 우리는 이 양립하는 의견 사이에서 서비스의 지속 가능성을 고민해야 했습니다. 결국 메뉴 구성의 모호함을 걷어내고 더 명확한 위계를 세우는 것이 이번 개편의 핵심 목표가 되었습니다.
또, 제품이 고도화됨에 따라 설계 당시에는 예상치 못했던 '구조적 비대함'이 사용자 경험의 발목을 잡고 있었습니다. 특히 운영관리 메뉴는 프로덕트 내 기능이 지속적으로 증설되면서 성격이 다른 소메뉴 5개가 하나로 묶여 있는 상태였습니다.
가장 비슷한 성격끼리 그룹화하려던 의도와 달리, 특정 메뉴가 지나치게 비대해지면서 정작 사용자들은 그 안에서 원하는 기능을 찾기 위해 매번 불필요한 탐색 비용을 지불해야 했습니다. 여기에 더해, 각 메뉴가 의미하는 레이블의 직관성이 떨어지다 보니 사용자가 기능을 예측하기 어려워하는 현상까지 발생하고 있었습니다. 우리는 이 '비대해진 메뉴'와 '모호한 레이블'이 단순한 불편함을 넘어, 선생님들의 수업 몰입을 방해하는 허들이라고 판단했습니다.
해결의 실마리: '사용자 맥락'에서 다시 쓴 UX 전략
우리는 앞서 정의한 문제들을 해결하기 위해 단순히 보기 좋은 UI를 만드는 것을 넘어, 선생님들의 업무 효율과 심리적 안정감을 줄 수 있는 세 가지 핵심 해결 방식을 도출했습니다.
(1) 디바이스 환경의 최적화: 1920px로 확장된 '와이드 인터페이스'와 Side-bar 구조
가장 먼저 해결해야 할 과제는 PC 사용 환경에서의 정보 전달 효율을 높이는 것이었습니다. 좁은 중앙 정렬 구조에 갇혀 있던 콘텐츠 영역의 제한을 해제하고, 최대 1920px까지 확장한 화면에 최적화된 인터페이스를 설계했습니다.
•
GNB/LNB에서 Side-bar 메뉴 구조로의 전환: 기존 상단에 밀집되어 있던 GNB(Global Navigation Bar)와 LNB(Local Navigation Bar) 구조를 Side-bar(GNB + Side bar) 형태로 전면 개편했습니다. 이는 기능이 지속적으로 증설되더라도 사용자가 길을 잃지 않고 직관적으로 메뉴를 탐색할 수 있는 확장성 높은 환경을 제공합니다.
•
작업 반경의 확장: Side-bar 구조와 와이드 해상도의 결합을 통해 선생님들은 넓어진 화면을 온전히 활용할 수 있게 되었습니다. 이제 더 많은 학생의 학습 데이터와 채점 현황을 한눈에 파악하고 컨트롤할 수 있습니다.
•
작업 피로도 감소와 몰입도 향상: 기존에 정보량이 많아질 경우 화면을 좌우로 이동하며 확인해야 했던 불필요한 스크롤을 최소화했습니다. 시각적 동선이 간결해짐에 따라 수업 준비에 드는 물리적인 시간을 단축하고, 본연의 업무인 지도 활동에 더 깊이 몰입할 수 있도록 돕습니다.
(2) 구조적 안정성 확보: '학생 중심'의 직관적인 수업 구조 개편
기존 유저의 익숙함과 신규 유저의 직관성 사이에서 우리가 선택한 해답은 '보편적인 위계의 확립'이었습니다. 상위 메뉴의 변화가 하위 선택에 의해 결정되는 구조를 벗어나, 학생을 기준으로 한 SIDE BAR 구조도 새롭게 설계했습니다. (수업메뉴의 하위 메뉴는 학생 개인의 하위 메뉴로 종속되도록 변경함)
•
예측 가능한 UI: 학생을 선택하더라도 전체 메뉴 체계가 흔들리지 않도록 고정함으로써, 신규 선생님들도 별도의 학습 없이 현재 자신의 위치를 명확히 인지할 수 있게 했습니다.
•
안정적인 수업 경험: 사용자가 직전에 머물렀던 맥락을 시스템이 기억해 주는 편리함이 모든 선생님에게 당연하고 자연스러운 흐름이 되도록 개선했습니다. 이제 신규 유저라도 구조적 단절 없이 매끄럽게 최적의 수업 동선을 확보할 수 있습니다.
(3) 정보 설계(IA) 재정립: 비대해진 메뉴의 해체와 레이블 직관화
6개의 소메뉴가 엉켜있던 '운영관리' 메뉴의 비대함을 해소하기 위해, 철저히 선생님의 실제 사용 맥락에 맞춰 정보 설계를 다시 시작했습니다.
•
메뉴의 다이어트와 재배치: 비대해진 특정 메뉴를 해체하고, 보편적인 사용 흐름에 맞춰 가장 적절한 위치로 기능을 재배치했습니다. 이를 통해 기능을 찾기 위해 헤매던 탐색 비용을 획기적으로 낮췄습니다.
•
직관적인 레이블링: 기능의 의미를 모호하게 전달하던 전문 용어 중심의 레이블을, 누가 보더라도 그 역할을 단번에 짐작할 수 있는 직관적인 언어로 변경했습니다. 이제 선생님들은 "이걸 누르면 어떻게 될까?"라는 의문 없이 확신을 가지고 기능을 제어할 수 있습니다.
"바뀐 게 훨씬 좋아요" : 데이터와 목소리로 증명된 '작은 가시'의 해방
이번 UX 리뉴얼의 성과는 디자인팀의 확신이 아닌, 현장 선생님들의 생생한 목소리를 통해 증명되었습니다. 프로젝트 초기, 우리가 '가시'라고 정의했던 사소한 불편함들이 해결되었을 때 사용자들이 느끼는 해방감은 기대 이상이었습니다.
(1) "시야가 넓어지니 수업의 질이 달라졌어요"
가장 뜨거운 반응은 역시 화면 최대 넓이 제한 해제였습니다. "화면 폭이 넓어지니 학습 내역이 더 잘 보이고 훨씬 깔끔하다"는 피드백이 잇따랐습니다. 이는 단순히 심미적인 만족을 넘어, 선생님들이 한눈에 파악할 수 있는 데이터의 양이 늘어남에 따라 학생 개별 지도의 효율성이 극대화되었음을 의미합니다.
(2) "복잡했던 동선이 간결하고 명확해졌어요"
LNB를 사이드바로 이동하고 구조를 개편한 결과, "접근성이 좋아지고 간결해졌다"는 평가를 받았습니다. 특히 기존 메뉴가 상단에 몰려 있어 발생했던 오클릭 문제가 해결되었고, 프로필을 통해 관리 메뉴로 진입하는 동선이 명확해지면서 탐색의 피로도가 현저히 줄어들었습니다.
(3) "익숙함과 직관성, 두 마리 토끼를 잡다"
가장 고민이 깊었던 '수업 탭 이동' 인터렉션에 대해서도 "학생 간 마지막 작업 상태를 그대로 유지해 주는 것이 훨씬 좋다"는 긍정적인 반응을 얻었습니다. 신규 유저에게는 직관적인 위계를 제공하면서도, 기존 유저가 사랑했던 개인화된 편의성을 성공적으로 안착시킨 결과입니다.
마치며: 우리가 그리는 디자인의 미래
이번 프로젝트를 통해 우리가 다시 한번 깨달은 것은, ‘사용자가 지속적으로 불편하다'고 느끼는 지점에는 반드시 이유가 있다는 것입니다. 비대해진 메뉴를 해체하고, 물리적인 해상도의 제약을 해결하며, 파편화된 경험을 잇는 과정은 결국 선생님들이 오직 '학생'에게만 집중할 수 있는 환경을 만드는 일이었습니다.
매쓰플랫을 단순히 문제은행으로만 사용하는 것을 넘어, 제품의 모든 가치에 Deep Dive 하게 만드는 첫걸음은 이렇듯 사소한 가시를 뽑아내는 집요함에서 시작됩니다. 프리윌린은 앞으로도 사용자의 목소리를 나침반 삼아, 현장에 심리스한 교육경험을 제공할 것입니다. 0.1%의 디테일이 만드는 거대한 변화, 지금까지 매쓰플랫의 프로덕트 팀이었습니다.
