Share
Sign In
Work
웹 최적화하기
Y
yiseo
👍🏻
1
❇️
yaer: 2024
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개로 제한한고 더보기 버튼을 활용해서 로딩 속도를 최적화시켰습니다.
텍스트가 짤리지 않도록
데스크탑에서 모바일로 변환 해도 닉네임이 잘리지 않도록 행 높이를 동일하게 해서 글자 길이에 따라 닉네임이 잘려서 노출되는 문제점을 해결했습니다.
기존에 모바일화면에서 잘리던 호텔명은 데이터 테이블이 아닌 타이틀로 분류해 모든 텍스트가 다 노출되도록 했습니다.
Yi
Subscribe to 'yiseo'
Welcome to 'yiseo'!
By subscribing to my site, you'll be the first to receive notifications and emails about the latest updates, including new posts.
Join SlashPage and subscribe to 'yiseo'!
Subscribe
👍🏻
1
Other posts in 'Work'See all
yiseo
오늘의 앱 디자인
콘셉트 정하기 먼저 아트워크 디자인 작업을 정하기 전에 콘셉트를 정해야 했어요. 닥터나우는 의사선생님과 비대면 진료를 할 수 있을 뿐 아니라 약을 배달 받을 수 있는 온라인 의료 솔루션인 만큼 당시 닥터나우 앱 소개는 '원격진료부터 약 배송까지'라고 되어있었습니다. 하지만 앱 카드는 하나이기 때문에 닥터나우가 사람들에게 전하는 메시지를 '비대면 진료'에 집중할 것인지 '약 배달'에 집중할 것인지 정해야 했었고 쉽고 빠른 약 배달을 메인 카피로 정해 약 배달에 집중하는 것으로 결정했습니다. 또한 오늘의 앱에 선정된 여러 가지 서비스를 둘러본 결과 아트의 형태가 일러스트형과 사진형으로 나뉘고 있었습니다. 닥터나우는 당시 브랜드 사진이 없었기에 일러스트형으로 제작하기로 했습니다. 1차 시안 그리기 3일 동안 러프하게 5가지의 시안을 만들고 팀원들에게 의견을 구했습니다. (러프안이었기 때문에 5번의 경우 자세히 그리지 않았습니다.) 의견을 취합한 결과 디자인의 방향성이 정해졌어요. 원격의료라는게 모르는 사람이 들었을 때 딱딱하고, 어렵고, 생소하기 때문에 처음보는 사람이 보아도 이해하기 쉬어야 한다. 편안하고 따뜻하게 다가갈 수 있도록 사람 이미지를 넣자. 배달이라는 느낌을 확실히 주자
yiseo
푸시 알림 UX 라이팅
yaer: 2023 at: tripbtoz role: product design teammate: only one 1. 어떤 문제가 있었는가? 1) 트립비토즈 UX 라이팅이 적용되지 않았음 트립비토즈 UX 라이팅 가이드가 있었음에도 불구하고 제목은 딱딱한 문체, 내용은 부드러운 문체를 혼합하여 사용하고있었습니다. 2) 제목과 내용이 중복되는 지점이 존재 제목과 내용이 똩같은 말을 하고 있어 공간을 비효율적으로 사용하고 중복된 내용을 전달하고 있었습니다. 2. 어떻게 해결했는가? 경제적인 공간 활용과 친절한 안내 1차 버전으로는 동사형 제목과 명사형 제목 두 가진 버전을 만들었고 사용자들의 피로감을 덜어주기 위해제목과 내용이 중복되지 않도록 작성했습니다. 트립캐시 소멸 안내의 경우 단순히 소멸된다는 딱딱한 안내를 넘어 혜택을 사용해보라는 배려심 넘치는 문구로 작성했습니다. 사용자에게 요구하는 메시지인 경우 명령조가 아닌 부탁의 어조를 사용해서 부담스럽지 않게 다가가려고 했습니다.
👍🏼
1
yiseo
디자인 토큰 학습하기
yaer: 2023 at: tripbtoz role: platform design teammate: only one 온보딩때 디자이너분들에게 설명했던 자료 중 일부입니다. 피그마에는 디자인 토큰을 관리할 수 있는 플러그인으로 ‘토큰 스튜디오’가 있습니다. 영어버전은 이해하기 어려운 지점이 있기 때문에 피그마 토큰 스튜디오 커뮤니티 파일을 번역해 공유했습니다. 👉🏻 피그마 커뮤니티 링크
👍🏼
1