# 웹 최적화하기

> yaer: 2024
at: tripbtoz
role: Product Design 
teammate: 1 PM, 1 FE, 1 BE, 1 PD

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

# 1. 어떤 문제가 있었는가?

- 시즌별로 url 규칙을 갖고 있으나, 다른 시즌 정보를 확인하려면 url 주소를 변경해야됐기 때문에 지난 시즌에 대한 명단을 **url 주소 변경 없이 확인하기는 어려운 지점이 있었습니다.**

- 랭킹 운영 지역 및 호텔의 참여 정보는 운영 국가가 늘어날수록 많아지다보니 결과 발표 화면에서 한 번에 불러들이는 데이터가 많아 **로딩이 오래 걸렸습니다.**

- 모바일 화면에서 랭킹 참여 정보 확인 시, 글자 길이에 따라 지역명/호텔명 또는 닉네임이 잘려서 노출되는 문제점이 있었습니다.

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

# 2. 고려해야 할 상황은?

1. 신규 기능 개발은 최대한 배제하는 방향으로 가야했습니다.

2. web 작업으로 PC / 모바일 모두 대응 할 수 있도록 반응형으로 제작해야 했습니다. 

3. 심미성, 가독성 고려한 디자인 필요했습니다.

4. 시즌별 정보, 리그별 정보, 호텔 정보등 대량의 정보를 어떻게 잘 보여줄 수 있을지 고민이 필요했습니다.

5. 모바일 환경에서 닉네임 및 참여 지역과 호텔의 이름이 짤리지 않도록 노출하는 방법에 대해 고민이 필요했습니다.

# 3. 어떻게 해결했는가?

랭킹 보상 지급 안내 화면에는 대량의 데이터 테이블이 있습니다. 이 테이블을 한눈에 알아보기 쉽게 제작되어야 하기 때문에 아래와 같은 원칙들을 고려하는 것이 중요했습니다.

> **데이터 테이블 작업시 고려해야 할 점
**

- 큰 데이터 테이블을 사용하면 길을 잃기 쉽다. 얼룩말 줄무늬는 사용자가 자신의 위치를 유지하는 데 도움이 될 수 있지만 색상 행은 매우 밝아야 한다. 그렇지 않으면 선택한 행처럼 보일 수 있기 때문이다.

- 테이블의 열 너비가 너무 많고 행 높이가 서로 다르면 상황이 지저분 해지고 정보가 덜 구조화된 것처럼 느껴진다. 그래서 행 높이를 고르게 하는 것이 좋다.

- 아무리 텍스트가 길어도 셀 안에 공백은 충분이 있어야 한다. 스크롤 비용이 더 들더라도 그게 낫다.

- 텍스트는 상단에 수직으로 정렬되어야 합니다.

- 데이터 목적에 맞게 정렬해 데이터 가시성을 높인다.

    - 단위 파악을 해야하는 숫자 데이터는 우측 정렬

    - 데이터 작성 길이가 일정하지 않은 사용자가 직접 정하는 데이터는 좌측 정렬

- 사용자가 테이블을 세로 혹은 가로로 스크롤하거나, 테이블을 가로질러 스크롤 하는 동안 어떤 데이터를 보고 있는지 쉽게 이해할 수 있도록 상황별로 정보를 고정한다.

👉🏻 [참고 사이트](https://ditoday.com/ui-%25EB%2594%2594%25EC%259E%2590%25EC%259D%25B8-%25EA%25B0%2580%25EC%259D%25B4%25EB%2593%259C-2-%25EB%258D%25B0%25EC%259D%25B4%25ED%2584%25B0-%25ED%2585%258C%25EC%259D%25B4%25EB%25B8%2594-%25EB%2594%2594%25EC%259E%2590%25EC%259D%25B8-%25EA%25B0%2580%25EC%259D%25B4%25EB%2593%259C/)

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

### 버튼으로 하나의 웹 페이지에서 시즌별 데이터 확인하기

가장 최 상위의 계층인 시즌 버튼을 맨 위에 두고 국가별 리그 버튼을 하위 계층에 두어 하나의 웹 페이지에서 시즌별 데이터를 확인할 수 있도록 했습니다.

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

### 데이터 목적에 맞는 정렬 방식으로 가시성 높임

데이터 속성에 따라 올바르게 데이터를 볼 수 있도록 사용자가 직접 입력하는 데이터는 좌측 정렬로 숫자 데이터는 우측 정렬로 디자인했습니다.

### 노출 데이터 제한과 더보기 활용으로 로딩 속도 최적화

기존에 모든 데이터를 한꺼번에 불러왔던 것을 항목 당 10개로 제한한고 더보기 버튼을 활용해서 로딩 속도를 최적화시켰습니다.

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

### 텍스트가 짤리지 않도록

데스크탑에서 모바일로 변환 해도 닉네임이 잘리지 않도록 행 높이를 동일하게 해서 글자 길이에 따라 닉네임이 잘려서 노출되는 문제점을 해결했습니다.

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

기존에 모바일화면에서 잘리던 호텔명은 데이터 테이블이 아닌 타이틀로 분류해 모든 텍스트가 다 노출되도록 했습니다. 

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

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