웹 최적화하기
Y
yiseo
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개로 제한한고 더보기 버튼을 활용해서 로딩 속도를 최적화시켰습니다.
텍스트가 짤리지 않도록
데스크탑에서 모바일로 변환 해도 닉네임이 잘리지 않도록 행 높이를 동일하게 해서 글자 길이에 따라 닉네임이 잘려서 노출되는 문제점을 해결했습니다.
기존에 모바일화면에서 잘리던 호텔명은 데이터 테이블이 아닌 타이틀로 분류해 모든 텍스트가 다 노출되도록 했습니다.
'yiseo' 구독하기
사이트를 구독하면 새 포스트 등 최신 업데이트를 알림과 메일로 가장 먼저 받아보실 수 있습니다.
Slashpage에 가입하고 'yiseo'을 구독하세요!
Slashpage에 가입하고 'yiseo'을 구독하세요!
구독
1