🍀 힐다 레코드

🏅 파리 올림픽 특집 페이지

전석희

Aug 8, 20242y ago

곧 끝나가는 파리 올림픽, 잘 보고 계신가요? 저는 매우 즐겁게 보고 응원하고 있는데요!
올림픽 기간 때마다 네이버와 다음에서는 특집 페이지가 생기는 것을 아셨나요?
경기를 검색해보면 나와서 이미 알고 계신 분이 많으실거라 생각됩니다.
예전에는 자주 사용하던 네이버에서만 슉 확인만 했었는데요.

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

첫 페이지

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

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

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

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

오늘날짜의 경기 알림

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

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

대한민국의 메달 현황

a. 네이버

•

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

•

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

•

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

b. 다음

•

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

•

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

일정

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

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

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

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

카드형태로 일정이 나옴

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

네이버는 "NOW"라고 텍스트가 쓰여져있음

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

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

날짜별/종목별

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

그렇다면 조금 더 세세하게 봐보도록 하겠습니다.

•

날짜별

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

일정을 보여주는 카드도 조금씩 표현 방법과 들어가 있는 콘텐츠가 다른 것을 확인할 수 있었습니다.

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

•

종목별

종목 구분

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

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

종목 찾기

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

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

•

전체일정

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

영상

네이버

•

영상 탭에 진입 시 상단에 30초 미리보기로 최신 영상부터 보여주고, 30초가 지나면 자동으로 우측으로 스와이프됩니다. (수동으로 스와이프 가능)

•

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

•

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

•

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

•

파리 주요 영상 → 종목별 영상 → 영광의 순간들 → 방송사별 영상 → 오늘의 숏 → 실시간 응원 순으로 콘텐츠가 구성되어있습니다.

•

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

•

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

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

경기 일정 카드

네이버

•

예정 경기일 때 파란색 예정이라는 뱃지가 있음

•

라이브가 진행 중일 때에는 버튼이 빨간색으로 활성화되며 [응원] 버튼 외에 [영상]버튼이 생긴다.

•

더 가까운 경기나 하고 있는 경기는 파랗게 포커싱이 되어있음

•

시간 순이 잘보이게 좌측에 라인과 시간 표기를 해 시간별이라는 것을 직관적으로 알 수 있음

•

종료된 경기는 메달을 땄을 때 뱃지가 달리며, 종목에 따라 점수 or 순위가 표기된다.

•

카드에서 선수 이름을 눌렀을 때 선수 응원 페이지로 넘어간다.

•

종목별도 동일하게 예정경기/ 종료경기로 나뉘며 뱃지로 표현되고 있다.

•

종목별은 둥근 카드 형식이 아닌 리스트 형식으로 표기

•

예정경기가 라이브일 때 포커싱되며, 응원버튼도 Primary 색상으로 변경

•

카드 형식이며 우측 상단에 뱃지로 경기중/예정/종료를 표기

•

종료된 경기에 메달일 경우 메달 뱃지, 순위일 때는 순위가 표기, 점수일 때에는 점수 표기

이렇게 간단하게 네이버와 다음의 파리올림픽 특집 페이지를 분석해보았습니다.

경기 일정을 소개하고 영상, 뉴스, 선수 프로필, 응원 등 같은 콘텐츠를 UX적으로 UI적으로 다르게 표현할 수 있다는 것을 직접 느껴볼 수 있었습니다.

이렇게 다른 사이트들이 콘텐츠를 어떻게 표현하는지
다양한 표현 방식을 익혀두어 나중에 작업을 할 때에도 넓게 생각하고 더 맞는 방법으로 적용할 수 있을 것 같습니다

Subscribe to 'hilda'

Subscribe to my site to be the first to receive notifications and emails about the latest updates, including new posts.
Join Slashpage and subscribe to 'hilda'!