Work
웹 최적화하기
Y
yiseo
Category
Empty
yaer: 2024
at: tripbtoz
role: Product Design
teammate: 1 PM, 1 FE, 1 BE, 1 PD
at: tripbtoz
role: Product Design
teammate: 1 PM, 1 FE, 1 BE, 1 PD
1. 어떤 문제가 있었는가?
•
시즌별로 url 규칙을 갖고 있으나, 다른 시즌 정보를 확인하려면 url 주소를 변경해야됐기 때문에 지난 시즌에 대한 명단을 url 주소 변경 없이 확인하기는 어려운 지점이 있었습니다.
•
랭킹 운영 지역 및 호텔의 참여 정보는 운영 국가가 늘어날수록 많아지다보니 결과 발표 화면에서 한 번에 불러들이는 데이터가 많아 로딩이 오래 걸렸습니다.
•
모바일 화면에서 랭킹 참여 정보 확인 시, 글자 길이에 따라 지역명/호텔명 또는 닉네임이 잘려서 노출되는 문제점이 있었습니다.
2. 고려해야 할 상황은?
1.
신규 기능 개발은 최대한 배제하는 방향으로 가야했습니다.
2.
web 작업으로 PC / 모바일 모두 대응 할 수 있도록 반응형으로 제작해야 했습니다.
3.
심미성, 가독성 고려한 디자인 필요했습니다.
4.
시즌별 정보, 리그별 정보, 호텔 정보등 대량의 정보를 어떻게 잘 보여줄 수 있을지 고민이 필요했습니다.
5.
모바일 환경에서 닉네임 및 참여 지역과 호텔의 이름이 짤리지 않도록 노출하는 방법에 대해 고민이 필요했습니다.
3. 어떻게 해결했는가?
랭킹 보상 지급 안내 화면에는 대량의 데이터 테이블이 있습니다. 이 테이블을 한눈에 알아보기 쉽게 제작되어야 하기 때문에 아래와 같은 원칙들을 고려하는 것이 중요했습니다.
데이터 테이블 작업시 고려해야 할 점
•
큰 데이터 테이블을 사용하면 길을 잃기 쉽다. 얼룩말 줄무늬는 사용자가 자신의 위치를 유지하는 데 도움이 될 수 있지만 색상 행은 매우 밝아야 한다. 그렇지 않으면 선택한 행처럼 보일 수 있기 때문이다.
•
테이블의 열 너비가 너무 많고 행 높이가 서로 다르면 상황이 지저분 해지고 정보가 덜 구조화된 것처럼 느껴진다. 그래서 행 높이를 고르게 하는 것이 좋다.
•
아무리 텍스트가 길어도 셀 안에 공백은 충분이 있어야 한다. 스크롤 비용이 더 들더라도 그게 낫다.
•
텍스트는 상단에 수직으로 정렬되어야 합니다.
•
데이터 목적에 맞게 정렬해 데이터 가시성을 높인다.
◦
단위 파악을 해야하는 숫자 데이터는 우측 정렬
◦
데이터 작성 길이가 일정하지 않은 사용자가 직접 정하는 데이터는 좌측 정렬
•
사용자가 테이블을 세로 혹은 가로로 스크롤하거나, 테이블을 가로질러 스크롤 하는 동안 어떤 데이터를 보고 있는지 쉽게 이해할 수 있도록 상황별로 정보를 고정한다.
👉🏻 참고 사이트
버튼으로 하나의 웹 페이지에서 시즌별 데이터 확인하기
가장 최 상위의 계층인 시즌 버튼을 맨 위에 두고 국가별 리그 버튼을 하위 계층에 두어 하나의 웹 페이지에서 시즌별 데이터를 확인할 수 있도록 했습니다.
데이터 목적에 맞는 정렬 방식으로 가시성 높임
데이터 속성에 따라 올바르게 데이터를 볼 수 있도록 사용자가 직접 입력하는 데이터는 좌측 정렬로 숫자 데이터는 우측 정렬로 디자인했습니다.
노출 데이터 제한과 더보기 활용으로 로딩 속도 최적화
기존에 모든 데이터를 한꺼번에 불러왔던 것을 항목 당 10개로 제한한고 더보기 버튼을 활용해서 로딩 속도를 최적화시켰습니다.
텍스트가 짤리지 않도록
데스크탑에서 모바일로 변환 해도 닉네임이 잘리지 않도록 행 높이를 동일하게 해서 글자 길이에 따라 닉네임이 잘려서 노출되는 문제점을 해결했습니다.
기존에 모바일화면에서 잘리던 호텔명은 데이터 테이블이 아닌 타이틀로 분류해 모든 텍스트가 다 노출되도록 했습니다.
Subscribe to 'yiseo'
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 'yiseo'!
Join Slashpage and subscribe to 'yiseo'!
