Background
엘리스LXP는 올인원 교육 플랫폼으로 학습관리 시스템, 실습환경, 라이브 강의실 등 다양한 기능을 제공합니다. 최근 플랫폼에 커뮤니티 기능이 추가되면서 레이아웃이 복잡해지고 있습니다. 4개의 브레이크포인트를 통해 5개의 뷰포트를 제공하며 반응형 웹을 대응하고 있지만, 레이아웃의 복잡성이 증가함에 따라 기존 레이아웃 시스템으로 각 해상도에 최적화된 경험을 제공하는 데 어려움을 겪고 있습니다.
Glossary
커뮤니티 - 유저가 상호작용할 수 있는 통합 채널로서 AI 헬피, 헬프센터, 고객센터, AI 보조 도구 등의 기능이 포함된 화면의 우측 패널입니다.
Problem Definition
•
디바이스별 사용자 경험이 최적화되지 않아 저해상도 디바이스의 학습 경험이 좋지 않습니다. 특히, 앞으로 비즈니스의 주요 타겟 중 K12(초, 중, 고등학생)의 비율이 높아질 예정인데, 이들의 주요 디바이스는 태블릿과 크롬북 같은 저해상도의 디바이스입니다.
•
또한, 최근 SLM 기반의 학습 도우미인 AI 헬피가 추가 되었습니다. 기존 헬프센터보다 답변 속도가 월등히 빨라지며 학습 중 실시간으로 상호 작용할 수 있는 경험이 중요해졌습니다. 하지만, 저해상도 디바이스는 실시간으로 헬피와 상호 작용하기 어렵습니다. (플로팅 버튼 클릭 → 커뮤니티 패널 오픈 후 헬피 이용)
Goal
•
테블릿 해상도에 최적화된 레이아웃을 제공하여 초,중,고 유저에게 최상의 학습 경험 제공하기 위해 레이아웃 시스템 개선을 진행했습니다.
Analysis
패턴 분석
레이아웃 시스템 개선을 위해 서비스의 핵심 기능(워크스페이스)별 레이아웃 패턴을 분석하였습니다. 각 뷰포트 별 최대 사이즈와 최소 사이즈를 확인하여 브레이크포인트에 도달하기 전 레이아웃이 깨지거나 사용성에 영향을 미치는 구간이 있는지, 각 기능에서 통합할 수 있는 패턴이 있는지 확인하였습니다.
커뮤니티 기능이 화면 우측에 들어온 후 랩탑의 최소 사이즈에서 레이아웃이 깨져 사용성 이슈가 있는 부분과 각 기능에서 크게 사이드 네비게이션과 컨텐츠 영역을 사용하고 있는 패턴을 발견했습니다.
•
클래스룸: 사이드 네비게이션, 컨텐츠, 커뮤니티 - 총 3개의 컬럼
•
과목: 사이드 네비게이션, 컨텐츠(목차, 수업목록), 커뮤니티 - 총 4개의 컬럼
•
라이브강의실: 사이드 네비게이션, 컨텐츠(실시간 화면, 유저 목록), 커뮤니티 - 총 4개의 컬럼
•
랩탑에서 태블릿 해상도 분기점에 도달하기 전에 Contents 영역이 깨지고 있음.
◦
Contents 영역은 각 기능의 주요 컨텐츠가 들어와 유저가 중요하게 상호 작용하는 영역입니다.
•
각 기능별에 사이드 네비게이션과 컨텐츠 영역을 구성하여 시각적으로 같은 레이아웃이지만 구현 방식이 다른 문제도 발견할 수 있었습니다.
Solution
각 서비스의 패턴을 분석한 결과, 보다 세분화된 레이아웃 변경 방식의 필요성이 확인되었습니다. 기존에는 Viewport를 기준으로 레이아웃이 변경되었으나, 페이지의 복잡도가 높거나 커뮤니티 패널이 열려 있을 때 분기점에 도달하기 전에 레이아웃이 깨지는 문제가 발생했습니다. 이를 해결하기 위해 Viewport 내부의 특정 컨테이너를 기준으로 레이아웃이 변경되는 CSS-Container-Queries을 추가하였습니다.
Breakpoint를 추가하는 솔루션도 고려할 수 있지만, 이는 관리 비용의 증가로 이어질 것으로 우려되었습니다.
Container의 레이아웃 변경점을 Viewport의 변경 지점과 동일하게 사용하면, Breakpoint를 추가하지 않으면서도 세분화된 레이아웃 변경을 제공할 수 있을것으로 판단했습니다.
AS-IS
•
뷰포트의 너비 기준으로 각 브레이크포인트 도달했을 때 레이아웃이 변경되어, 레이아웃이 깨지는 구간이 발생
TO-BE
•
뷰포트 내부의 컨테이너를 기준으로 레이아웃이 변경되는 방식 추가
◦
뷰포트 기준으로 헤더, 바디, 커뮤니티, 푸터 등의 큰 범위의 레이아웃을 변경합니다.
◦
컨테이너 기준으로 메인 컨테이너 내부 요소의 레이아웃을 변경합니다.
•
뷰포트 내부의 특정 컨테이너에 브레이크포인트를 적용했기 때문에, 뷰포트 너비가 줄어들면 해당 컨테이너의 크기도 함께 줄어듭니다. 이로 인해 미리 정의된 레이아웃이 적절히 적용되면서, 레이아웃이 깨지는 문제를 해결할 수 있습니다.
•
뷰포트의 브레이크 포인트는 헤더, 커뮤니티 등 보다 상위 레벨의 레이아웃을 정책을 정의합니다.
Testing
프레이머를 이용하여 빠르게 실험하기
반응형 레이아웃을 설계할 때 중요한 점은 각 해상도에서 레이아웃이 어떻게 변경되는지 잘 보여줘야 하는 것 입니다. 브라우저 사이즈를 직접 조정하며 동적으로 확인하는 단계가 필요합니다. 하지만, 정적인 디자인 화면에서는 반응형의 동작을 확인하기 어렵습니다. 이 때문에 동적인 환경에서 테스트가 필요했고, 프레이머를 이용한 테스트를 진행했습니다.
프레이머는 디자인 리소스만으로 웹 환경에 빠르게 퍼블리시 할 수 있는 도구입니다. 피그마에서 레이아웃의 구조를 잘 잡아두었다면, 프레이머로 Import한 후 퍼블리시만 하면 웹사이트에서 동적인 동작을 바로 확인할 수 있습니다.
프레이머에서 직접 확인 - 
My Framer Site
My Framer Site