brunch

라이킷 18 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by Hilda Aug 10. 2024

파리 올림픽 특집 페이지 분석

UXUI 분석

곧 끝나가는 파리 올림픽, 잘 보고 계신가요? 저는 매우 즐겁게 보고 응원하고 있습니다.

올림픽 기간 때마다 네이버와 다음에서는 특집 페이지가 생기는 것을 아셨나요?

경기를 검색해 보면 나와서 이미 알고 계신 분이 많으실 거라 생각됩니다.

저도 알고는 있지만, 깊게 페이지를 살펴볼 생각을 못했었는데요! 이번 기회에 살펴보았습니다.

이런 특집 페이지에서 사용자 경험을 어떻게 고려해서 구성했을지 분석해 보는 것도 저에게 많은 도움이 될 것 같아서 저 나름대로 UXUI 분석을 해보았습니다.

첫 페이지

첫 페이지인 메인화면입니다.

- 네이버의 경우 기존 네이버 스포츠 안에 "PARIS NOW"라는 탭 메뉴를 따로 만들어 거기서 볼 수 있게 했습니다.

- 다음의 경우 다음 스포츠 안에 GO! PARiS라는 메뉴가 있고 눌렀을 때 단독 페이지로 이동합니다.

여기서 살짝 여담이지만 다음의 PARiS는 i만 소문자로 해놓은 이유가 살짝 궁금해지네용..

오늘날짜의 경기 알림

- 네이버 : 오늘의 올림픽 경기라는 타이틀, 다섯 개의 경기를 리스트 형태로 우선적으로 보여주고 하단 화살표를 누르면 더 많은 일정이 나오며 파리 일정 전체 보기 버튼이 나와 일정 부분으로 이동할 수 있게 합니다.

- 다음 : 오늘의 주요 경기라는 타이틀, 경기 하나씩 카드 형태로 보여주며 좌우로 스와이프 해 볼 수 있습니다. 그리고 우측에 총 9개의 경기라고 표시되어 있어 대한민국 경기가 오늘 몇 개 있는지 바로 인지할 수 있는 점이 좋았습니다.

대한민국의 메달 현황

둘 다 메달을 간단하게 그린 일러스트와 자세하게 그린 일러스트 2가지 타입을 사용하고 있습니다.

a. 네이버

- 홈화면에 띠배너 형태로 메달 현황이 나오며, 클릭 시 메달 페이지로 이동

- 메달 페이지에서 대한민국 순위와 함께 합계 메달 개수와 폭죽이 터지는 애니메이션이 같이 나오며,
메달리스트도 확인 가능

- 순위 리스트에서 꺽쇠를 클릭 시 종목별 어떤 메달을 획득했는지 확인 가능

b. 다음

- 홈화면 상단에 크게 위치해 있으며 클릭하면 동일하게 메달 페이지로 이동

- 메달 페이지에서 대한민국 옆 꺽쇠를 누르면 종목별 어떤 메달을 획득했는지 확인 가능

일정

일정 탭으로 들어갔을 때 화면입니다.

일단 큰 구조에서는 탭메뉴 > 날짜 > 일정 인건 동일하고 그 안에 세세하게 다른 점을 확인할 수 있었습니다.

1. 날짜별/종목별로 탭메뉴로 나뉨

2. 대한민국 경기만 확인할 수 있게 토글버튼 or 체크박스로 분류할 수 있게 함

3. 카드형태로 일정이 나옴

- 아래 이미지와 같이 일정을 보다가 하단 플로팅 버튼을 통해 진행 중인 경기 일정으로 바로 되돌아갈 수 있음

- 네이버는 "NOW"라고 텍스트가 쓰여있음
아마 PARIS NOW라는 타이틀을 가지고 있기에 now라고 버튼명을 쓴 것 같지만.. 영어로 now만 적혀있어 바로 인지하기 어려울 수 있겠다는 생각

- 다음은 "진행 중인 경기"로 직관적인 표현을 사용, 좌측에 화살표를 통해 더 직관적으로 알 수 있게 했다. (위의 이미지의 경우 골프가 진행 중이고 접속시간은 밤 11시여서 11시쯤에 하는 경기도 있기에 화살표가

아래로 표기, 저기서 스크롤을 내리면 화살표가 위로 간다)

날짜별/종목별

먼저 네이버와 다음 모두 날짜별, 종목별로 일정을 나눠놓는 것은 동일했으나 다음의 경우에는 전체일정도 볼 수 있게 되어있었습니다.

날짜별

먼저 네이버, 다음 모두 일주일 단위로 날짜로 선택할 수 있게 했으며 해당 날짜의 시간 순으로 일정을 보여주고 있습니다.

* 일정을 보여주는 카드도 조금씩 표현 방법이 다르게 들어간 것을 확인할 수 있었습니다.

카드는 마지막에 좀 더 자세히 살펴보도록 하겠습니다!

종목별

[종목구분]

네이버

- 픽토그램을 활용해 직관적으로 종목을 확인할 수 있음

- 칩형태로 텍스트로만 표현했고, 접속한 날짜 기준으로 경기가 있는 종목에는 빨간 점으로 표시

[종목 찾기]

네이버

- 종목 찾기를 누르면 하단 드로어가 나오며 찾을 수 있음, 스크롤 형태

- 전종목을 누르면 하단에 바로 종목별로 선택할 수 있게 나오며, 스와이프 형태

전체일정

다음에서만 있던 메뉴였습니다.

전체 일정을 클릭 시 표 형식으로 날짜별 일정과 메달결정되는 일정도 아이콘으로 잘 표현된 것 같습니다.

영상

네이버

- 영상 탭에 진입 시 상단에 30초 미리 보기로 최신 영상부터 보여주고, 30초가 지나면 자동으로 우측으로

스와이프 됩니다. (수동으로 스와이프 가능)

- 미리 보기 → 최신영상/날짜별 영상 → 인기영상 순으로 콘텐츠가 구성되어 있습니다.

- 네이버 클립 기능이 있기 때문에 클립 칩도 확인이 가능합니다. (숏폼)

- 파리 주요 영상이 상단에 위치

- 파리 주요 영상 → 종목별 영상 → 영광의 순간들 → 방송사별 영상 → 오늘의 숏 → 실시간 응원 순으로

콘텐츠가 구성되어 있습니다.

- 오늘의 숏을 보면 숏폼은 이제 주요한 콘텐츠 같다는 생각이 듭니다.

- 실시간 응원은 아무래도 다음카카오다 보니까 실시간 채팅도 같이 넣어놓은 것 같았습니다!

영상을 보여주는 카드 디자인 자체도 네이버와 다음이 다른 방식으로 사용하는 것을 볼 수 있으며 네이버의 경우 영상의 끝에 더 보기 버튼이 있고 누르면 리스트가 더 나오는 방식이며, 다음의 경우는 새로운 00 영상 1/20과 같이 4개의 영상이 새로고침되며 새로운 영상을 보여줍니다.