UX&UI 스터디6: 알라딘 vs 교보문고

이번에 할 스터디 주제는 알라딘과 교보문고를 진행하려 한다.

교보문고와 알라딘은 오프라인과 온라인에서 동시에 가장 많은 사용자 수를 확보하고 있는 서점으로 오프라인보다 온라인에서 더 많은 주문수를 기록하고 있다.
그리고 둘 다 EBook 서비스를 제공하고 있기도 하다.

둘의 서비스의 다른점과 공통점을 UI 적인 관점에서 비교해 분석해보려 한다.

1. 홈 화면

알라딘과 교보는 다양한 서비스를 하는 기업인만큼 홈에 다양한 내용을 한번에 요약해 보여주어야 한다.
특히 알라딘과 교보 둘다 MD,E-Book,중고책판매 등 다양한 분야로 서비스를 확장하고 있기 때문에 보여주어야 양이 특히 많다. 각 앱이 어떤 서비스를 보여주며 선택과 집중을 하고 있는지 알아봤다.

가장 신경써야할 점은 일반 커머스 서비스에서도 마찬가지겠지만 두 앱과 같이 책을 판매할때 가장 중요한건 요소들 사이의 레벨과 텍스트의 강약 조절을 통해 너무 복잡하지 않게 디자인 하는것이라고 생각한다.

두 앱의 홈 화면 구성

두 앱의 홈 화면 구성을 텍스트로 정리해봤다.
둘다 메인은 책 추천에 집중하면서 사용자들의 커뮤니티나 자신들의 MD 홍보를 중간중간 넣어두는 구성이다.

검색필드와 장바구니는 최상단에 고정해두어 어디서도 접근 가능하게 만들어두었다.

알라딘

알라딘의 홈 화면은 중구난방 이라는 느낌을 좀 받았던것 같다.
마진은 375px x 812px 기준 10PX로 20PX을 사용하는 교보에 비해 더 꽉찬 느낌을 줄 수 있는 비율을 사용한다.

하지만 알라딘의 홈 화면은 교보문고의 홈 화면보다 더 많은 공간을 사용함에도 불구하고 답답하다는 느낌을 준다.
책을 추천하고 내용을 보여주려 하다보니 텍스트가 많이 들어간다. 특히 도서추천 섹션은 텍스트 크기가 많고 사이즈가 작다

도서 추천 섹션, 문장과 추천 문구를 넣어 텍스트 량이 굉장히 많다.

알라딘 굿즈로 유명한데 굿즈를 홈 화면에 생각보다 많이 노출하지 않는다.

메인화면에 노출되는 굿즈가 메인인 섹션은 이거 하나

상단 탭바에 굿즈 페이지를 따로 빼놓아서 그 안으로 들어가야 상세 페이지가 나온다.

섹션끼리의 구분이 잘 안되고 결속력이 약한 이유는 텍스드의 양이 많고 작은데다가 텍스트 간격이 좁은 이유 때문인것 같다.
교보는 텍스트의 양을 최소화 시키고 디바이더를 사용해 구획을 나눠 더 깔끔한 느낌을 준다.

교보문고

교보문고는 메인의 롤링 베너를 가로비율 꽉차게 상태바 바로 하단 높이까지 이용한다.
알라딘의 경우 롤링베너 양옆으로 다음 베너가 노출되는 방식을 사용하는데 교보문고는 한번에 하나의 배너를 보여주는데 개인적으로 집중도는 이
쪽이 더 높다는 느낌을 받았다.

개인 맞춤화 추천이 자세하게 나온다. 오프라인 매장의 구매 도서 데이터와 연결되어 온라인에서 책을 구매한 이력이 없어도 온라인 서점에서 구매할 책을 추천 받을 수 있다.

텍스트 량의 차이는 많이 나지 않지만 이미지를 더 크게 사용하고 이미지 위에 텍스트를 얹어 사용하는 방식으로 실제보다 텍스트가 적어보이고 확실히 이런 차이들 때문에 알라딘보다 교보문고가 더 정돈되어 보였던것 같다.

2. 메뉴

메뉴의 경우 교보보다 알라딘이 더 깔끔하게 구성되어있다.
매뉴에서 스크롤을 내려야 하도록 디자인을 하는것은 좋지 않다고 생각한다. 메뉴는 정보량이 많아 스크롤까지 내리게 한다면 집중력이 흐려질 수 있고
실제로 교보문고는 메뉴를 정리했다기보다 홈화면의 컨텐츠를 그냥 메뉴에 박아두었다는 느낌이 든다.

3.GNB

알라딘은 높이 50px / 교보는 세로 66px로 GNB 높이가 높고 버튼의 크기가 크다.
알라딘의 경우 가운데에 이벤트 버튼이 있는데 이게 정확히 무슨 버튼인지 처음에는 파악하기 힘든데 그게 중앙에 위치하고 있어 무의식적으로 누르게된다.
홈 버튼을 가운데에 배치하는게 더 나았을거라는 생각을 했다. 게다가 GNB항목이 7개나 되어서 복잡하다 굳이 이벤트 버튼을 GNB에 넣었어야했을까? 하는 생각도 든다.
교보는 알림 버튼을 플로팅 버튼으로 따로 빼서 GNB에 따로 넣지 않으므로서 최소한의 필요한 버튼만을 제공한다는 느낌을 받았다.
알림버튼은 플로팅 버튼으로 굳이 GNB에 집어넣지 않아도 화면에 계속 띄워 둘 수 있게 디자인되어있다.

4. 상품 목록

상품 목록 컴포넌트를 비교해봤다. 교보가 크기 자체를 더 크게 사용했다.
이미지 화질차이가 너무난다! 교보는 상품 목록과 상품상세의 이미지의 화질이 알라딘보다 크게 떨어지는것을 알 수 있었다.

모바일 화면으로 보면 화질 차이가 극명하게 보인다.

알라딘의 경우 사이즈를 작게 해 화면에 최대 3권의 책까지 보이게 하는 반면 교보는 컴포넌트의 사이즈가 커 최대 2개의 책이 보인다.
알라딘은 따로 메뉴를 열지 않아도 상단에 카테고리 드롭박스를 위치해 더 편하게 이용이 가능하게 디자인했음을 알 수 있다.

알라딘은 상품 목록에 미리보기가 있다. 알라딘의 E-Book 서비스가 잘 되어있어 이용을 많이 하는데 그런 자신들의 장점을 살려 상품 목록 컴포넌트에
E-Book으로 미리보기를 넣어 내용을 확인 할 수 있게 하여 오프라인 서점의 최대의 단점인 내용을 미리 훑어볼 수 없다는 점을 최대한 상쇄하려고 하는 느낌을 받았다.

5. 상품상세

알라딘의 경우 책을 3D로 보여준다 책표지의 화질은 역시 교보보다 훨씬 좋다
바로 옆에 플로팅 버튼으로 미리보기-공유-즐겨찾기-적용가능 쿠폰 을 플로팅 버튼 형식으로 좌측에 띄워주면서 바로 확인 가능하도록 한 점이 좋았다.
교보의 경우 혜택과 적립금을 밑으로 쭉 떨어뜨려 보여줘서 일일히 스크롤 해야하는 방식이다.

6. 마치며

시장에서 가장 큰 두 서비스인 만큼 너무 앱의 규모도 커서 주요 기능만 추려 비교를 해야 했기 때문에 놓친 부분들이 꽤 많다.
시간을 좀 더 들여서 마이페이지와 주문직전까지의 프로세스는 어떻게 다른지 더 분석해보고싶다.
더해서 책과 같은 텍스트가 많이 들어가는 상품들을 위한 컴포넌트를 만들때 어떤 방식이 효율적인지, 비슷한 컨텐츠를 계속해서 보여줘야하는
화면에서 컴포넌트를 어떤 방식으로 차이점을 조금씩 주어서 만들수 있는지를 배울 수 있는 스터디 였다.