[나만의 App 기획] 카카오맵(6) - 디자인 시스템Design System
이번 편 노동요
Childish Gambino - Sober
있는 거 그대로 가져갈 거라서 이름만 그럴싸하게 디자인 시스템이고 별 내용은 없다. 칠린 타임.
폰트
카카오맵의 기본 폰트는 핸드폰에 설치된 기본 폰트를 따른다.
나는 iOS 이용자라 카카오맵의 폰트는 iOS 기본 폰트 시스템을 따른다. 한글은 Apple SD 고딕 Neo 이며 한글을 제외한 문자는 SF Pro Text 다.
어차피 피그마로 만드는 거니까 다른 폰트 쓸까 했는데 광적인 집착이 생겨서 나도 기본 폰트를 쓰기로 했다.
아이콘
카카오맵의 아이콘은 동글동글하고 단순하다. 색조합도 파란색, 흰색 두 개의 조합으로 이루어져있다.
네이버 지도는 백미러도 달려있고 버스 위에 환기구 같은 것도 그려져있다. 자전거에는 사람까지 타고 있다. 색조합도 하나 더 많은 검은색, 흰색, 파란색 3개의 조합이다. 네이버 지도보다 카카오맵이 부드러운 이미지를 주는 이유에 이런 부분도 지대한 영향을 끼치리라 본다.
화면 구성
카카오맵은 호선에 대한 표시를 동그란 숫자 마크로 간단하게 표현하였다. 이렇게 압축한 마크들로 네이버 지도에 비해서 더 깔끔한 화면을 구성하였다. 그러다보니 네이버 지도와 같은 하얀색 배경으로는 구성이 되지 않고 상단 부분이 파란색 배경이다. 아무래도 저 부분까지 하얀색이면 여백이 너무 많아 부담스러울 것이다.
네이버 지도는 사용층이 카카오맵보다 더 넓고 평균 연령이 높아서 그런걸까. 글씨가 큼지막하고 양이 적다. 카카오맵에 비해 보여주는 정보도 적은 편이다.
둘 다 공통적으로 경로의 교통편 비율을 가로로 긴 막대로 표현하였다. 네이버 지도는 숫자를 써놔 정확히 얼마큼의 시간을 이용하는지 알려주었으나 카카오맵은 색깔과 길이만 표시하여 정확히 뭘 의미하는지는 모르겠다. 터치하여 상세 내용으로 들어가면 구체적으로 나오긴하지만 직관적이지 않은 점이 아쉽다. 어쩔 수 없이 차별점을 만들기 위한 부분이 존재할 수밖에 없으므로 그렇게 이해하고 넘어간다.
새로운 컴포넌트를 추가하기 위해 이런 부드러운 분위기를 유지하며 여백을 살리는 방향으로 가야할 것이다. 위치나 버튼 모양 등도 마찬가지다.
마치며
간단하게 카카오맵의 디자인을 살펴보았다. 뭘 바꿀 건 아니라서 이쯤에서 넘어간다. 아마 다음이 마지막이 될 것 같다. 이제 지금까지 한 걸 바탕으로 프로토타입을 뽑아낼 시간이다.