# 🏅 파리 올림픽 특집 페이지

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

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

## 첫 페이지

![Image](https://upload.cafenono.com/image/slashpagePost/20240808/104925_HrSEoah0euUmIUKRKh?q=80&s=1280x180&t=outside&f=webp)

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

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

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

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

**오늘날짜의 경기 알림**

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

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

## **대한민국의 메달 현황**

![Image](https://upload.cafenono.com/image/slashpagePost/20240808/105002_SusCAzzxJerK61lu5J?q=80&s=1280x180&t=outside&f=webp)

a. **네이버**

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

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

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

b. **다음**

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

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

---

## 일정

![Image](https://upload.cafenono.com/image/slashpagePost/20240807/233821_3rbH4ysIBqaa9z0mUT?q=80&s=1280x180&t=outside&f=webp)

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

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

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

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

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

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

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

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

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

![Image](https://upload.cafenono.com/image/slashpagePost/20240808/160439_MwwIL7DNrAxX3DXAt8?q=80&s=1280x180&t=outside&f=webp)

### 날짜별/종목별

![Image](https://upload.cafenono.com/image/slashpagePost/20240808/091248_2Rm9xWcLH0k3i0oJAF?q=80&s=1280x180&t=outside&f=webp)

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

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

- **날짜별**
- 

![Image](https://upload.cafenono.com/image/slashpagePost/20240808/091456_urtogBoYs5P4NqkU56?q=80&s=1280x180&t=outside&f=webp)

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

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

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

- **종목별**

![Image](https://upload.cafenono.com/image/slashpagePost/20240808/093322_jxZihzUjXCXww8LSoA?q=80&s=1280x180&t=outside&f=webp)

1. **종목 구분**

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

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

2. **종목 찾기**

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

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

- **전체일정**

![Image](https://upload.cafenono.com/image/slashpagePost/20240808/095148_EhQUs1kOxpUZ2RXN1M?q=80&s=1280x180&t=outside&f=webp)

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

## 영상

![Image](https://upload.cafenono.com/image/slashpagePost/20240808/130246_Drf7qKrgvT5bUuXE8r?q=80&s=1280x180&t=outside&f=webp)

**네이버**

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

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

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

![Image](https://upload.cafenono.com/image/slashpagePost/20240808/130301_0x7BOn7GMT74xCJJWN?q=80&s=1280x180&t=outside&f=webp)

**다음**

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

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

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

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

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

## 경기 일정 카드

### 네이버

![Image](https://upload.cafenono.com/image/slashpagePost/20240808/135849_hWY9A5XuXdDZ9k9a9P?q=80&s=1280x180&t=outside&f=webp)

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

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

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

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

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

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

![Image](https://upload.cafenono.com/image/slashpagePost/20240808/135313_vIIS6noKXq9mLTxYx3?q=80&s=1280x180&t=outside&f=webp)

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

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

### 다음

![Image](https://upload.cafenono.com/image/slashpagePost/20240808/141421_1E0fFzfOQaePAF2zUY?q=80&s=1280x180&t=outside&f=webp)

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

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

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

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

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

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

For the site tree, see the [root Markdown](https://slashpage.com/hilda.md).