RIDIBOOKS Home
리디북스 서점(Web)은 데스크톱과 모바일 버전으로 이용할 수 있습니다.
이 말은 곧 서점 관련 태스크를 진행할 때마다 데스크톱, 모바일용 화면을 각각 별개로 제작해야 한다는 의미입니다.
또한, 디바이스의 크기가 점점 커지고 다양해지면서 다양한 해상도를 대응하기가 어려운 문제점이 있었습니다. 사용자 데이터를 통한 기준 해상도는 있었지만 이 또한 빠르게 변화하기 때문에 매번 기준 해상도를 변경할 수도 없었습니다. 이러한 문제점을 해결하기 위해 리디북스 서점 홈에 Responsive(반응형 웹)를 도입하기로 하였고, 동시에 UX/UI를 개선하였습니다.
기준 해상도와 Breakpoint 정하기
먼저 데이터부터 확인하였습니다. 국내 기준 화면 해상도 통계, 그리고 GA(Google Analytics)를 통한 리디북스 사용자 기준 화면 해상도 통계를 확인하여 사용자가 가장 많이 사용하는 모바일/태블릿/데스크톱의 해상도를 각각 파악하고 이 데이터를 바탕으로 디자인 시 기준 해상도와 Breakpoint(중단점)를 정하였습니다.
UX/UI 개선
Responsive를 적용하기로 하면서 기존 디자인을 개선하는 동시에 데스크톱, 모바일에 공통으로 적용할 수 있는 UX/UI를 고민해야 했습니다. 여러 페이지를 동시에 적용하기에는 무리가 있었기 때문에 우선 순위가 높은 홈 화면을 먼저 적용하기로 하였고, 이에 대한 각 장르별 사용자의 목표를 작성하여 해당 내용을 바탕으로 와이어 프레임과 주요 사항들을 정의해 나갔습니다.
각 장르별 사용자의 목표
- 다양한 해상도에서 동일한 UX/UI 제공
- 장르 내 단행본/연재 홈 접근성 향상
- 콘텐츠 중심의 UI 및 섹션 모듈화
- 중요도 낮은 기능 제거 및 재배치
- UI를 크게 변경하는 것보다 일관성 있는 시스템으로 관리할 수 있도록 개선
1. GNB
추후 메뉴 확장성을 고려하여 GNB를 개선하는 작업을 진행하였습니다. 메뉴가 추가될 경우 모바일에서 좌우 스와이프로 메뉴를 탐색할 수 있게 하였고, 기존에는 다르게 제공되었던 데스크톱과 모바일의 메뉴들을 동일한 형태로 제공하는 것을 중점으로 작업하였습니다.
2. 퀵 메뉴
신간, 베스트셀러, 이벤트 메뉴 등 사용자가 자주 접하는 메뉴들을 퀵 메뉴로 제공하여 해당 메뉴에 빠르게 접근할 수 있도록 하였습니다.
3. 섹션 모듈화
섹션은 총 4개의 타입으로 모듈화하여 일관성 있게 사용할 수 있도록 하였습니다. 섹션 내에는 '다음' 버튼을 포함하여 사용자가 '전체 보기' 리스트로 이동하지 않고도 도서를 더 많이 탐색할 수 있도록 하였습니다.
