🗺 이런 지도 UI 보았니?!

lalable

7 min readMay 5, 2021

UX를 고려하여 가독성, 심미성 높은 UI로 녹여내자! 🧭

1. 작업 리스트를 작성하자! 📂

💁‍♀️ 작업에 들어가기 전, 정해진 시간을 합리적으로 사용하기 위해서는 필요한 목록을 정리할 필요가 있겠죠?

디자인 작업에 들어가기 전 작업 목록을 정리한 후 레퍼런스 조사에 착수하는 게 좋겠죠?😆

2. 빠른 피드백을 위한 Lo-Fi

대략적인 작업 리스트가 나왔다고 해서 바로 Hi-Fi로 작업을 하는 건 반복적인 수정을 부르는 지름길입니다. 내 머릿속에 그려지는 레이아웃을 형상화하기 위해서 Lo-Fi를 활용해보세요. 지금 펜과 종이만 있다면 5분이면 작업물을 추출할 수 있습니다.🤩

Paper Prototype은 피드백의 수용이 빠른 방법이겠죠? 어떤 툴을 사용하는 것보다 초기 단계의 좋은 시뮬레이션 방법이 될 수 있습니다.✍️

👉 Paper Prototype 의 장점?
1 짧은 시간 투자로 초안 시뮬레이션을 추출할 수 있다.
2 모든 요소의 이동이 용이하다.(=피드백의 적극적인 수용이 가능하다.)
3 글보다 그림으로 표현하여 구체적인 의사소통에 효과적이다.

3. 📚 레퍼런스, 아무거나 찾지 말자!

레퍼런스 조사 시, 아무 지도나 찾으면 안 되겠죠? 필자는 우리가 어떤 지도를 목표로 하는지 고민해 보았습니다. 🤔 여신 티켓의 맵은 경로를 탐색하기 위한 지도가 아닌 탐색을 위한 지도입니다. 즉, 위치를 기반으로 시술을 탐색하는 역할입니다!!!

👆‘에어비앤비(airbnb)’의 지도는 선택한 지역의 인근 숙소를 찾아준다는 점에서 여신티켓에서 추구하는 병원 탐색과 유사한 기능을 가진다고 판단하였습니다.

👆‘똑닥’의 지도 또한, 사용자가 선택한 지역을 중심으로 병원을 조회한다는 부분에서 여신티켓의 맵과 유사한 목적을 가지고 있었습니다.

👆‘카카오 헤어샵’의 경우, 위치를 기반으로 헤어샵을 소개해 주고, 상단의 카테고리에서 네일샵과 스위칭되는 것을 볼 수 있습니다. 이점은 여신티켓의 병원정보에 녹여낸다면 좋을 것 같다는 생각이 들었습니다.

👆‘다이닝코드’의 경우, 현 위치를 중심으로 정확한 거리를 선택할 수 있고 100점 만점의 점수로 표기하여 사용자가 조금 더 세분화된 평가를 얻을 수 있다는 장점이 있었습니다.

4. 📐 Component를 작성하자!

서비스와 동일한 성향의 레퍼런스 조사가 끝났다면 컴포넌트를 작성할 단계입니다!!!
😜 컴포넌트는 디자인 소스를 간소화하고 개발자와의 소통, 개발코드의 재사용을 위해서도 꼭 필요하겠죠?

(1) 🔍 검색 필드(Search Field)

사용자에게 지도를 최대한으로 노출해야 하는 페이지므로 검색필드(Search Filed)가 최소화된 공간만을 소비할 수 있도록 하였습니다. 다만!!! 😤지도의 구조상 배경이 다소 복잡해질 수 있는 점을 고려하여, Filed를 흰색(#FFFFFF)으로 표현하되 그림자(Drop Shdow)효과를 추가하여 입체감을 더하고 지도 레이어 상위에 표현된 공간감을 주었습니다.

(2) 필터칩(Filter Chip)

검색 필터의 하단에는 필터칩을 추가해 주었습니다.
상황에 따라 위치하는 '이 지역검색'과 중복 선택이 가능한 필터인 '여신 이벤트, 모바일 예약, 주차 가능, 코로나 안심'을 스크롤 방식으로 배치하여 재미요소와 주요 기능인만큼 시각적인 강조가 될 수 있도록 하였습니다.😆

😍 인터렉션을 넣으면 이런 모습이 되겠죠?

(3) 📍마크업(Mark Up)

Mark Up의 색상은 필터칩의 4개의 색상과 동일하게 사용하였습니다.😉 각각 지정된 색상의 필터를 선택할 때마다 마크업에 형태와 색상에 반영되어 사용자가 직관적으로 알 수 있도록 하였습니다.🙆‍♀️
또한, 2차원 공간에 세워져있는 형태를 구현하기 위하여 마크업에 Shadow에 Blur를 적용하여 둥둥~떠있는 느낌을 주었습니다.

5. 개선전~개선후(AS IS — TO BE)

💁‍♀️ 왼쪽은 개선 전, 오른쪽은 개선 후의 UI입니다. 이번 패치에서 진행하고자 하는 목표와 기능을 담아서 완성하였습니다. 우선 유저의 반응을 수집한 후, 다음 패치에 부족한 부분을 수정하고 좋았던 기능은 더욱 업그레이드할 계획입니다.
💃 (다음 패치의 업데이트 내용도 잊지 않고 업로드하겠습니다!!!🌚)

더 상세한 시안의 필자의 드리블에서 확인할 수 있습니다!!!🙋‍♀️

map

map designed by goen kim. Connect with them on Dribbble; the global community for designers and creative professionals.

dribbble.com

6. 마치며..💙

오늘은 지도 UI를 제작하는 과정에 대해서 이야기를 해보았는데요~😆 이 글을 읽으시는 많은 분들에게 도움이 되면 좋겠습니다!!!😍 멀지 않은 미래에 다음 패치에 진행될 지도를 다룰 예정이니 그때도 잊지 말고 찾아주세요.😜

이번에 업데이트된 사항의 상세 피드백은 다음 업데이트될 아티클에서 한 번에 다루기로 하고 오늘도 열공하시는 많은 디자이너분들께 이 글을 바칩니다.👩‍💻