단순함으로 꽉 채운 ‘서울마이트리’ 지도 조닝 작업기
복잡하고 화려한 일러스트가 빛날 때가 있는 반면, 단순한 일러스트가 더 돋보일 때가 있어요. 이번에 소개할 서울마이트리의 지도 조닝 작업도 복잡하고 화려한 작업물보다 심플함이 빛나는 작업물이에요. 어떤 작업이었는지 차근차근 적어보겠습니다!
✷ 서울마이트리는 어떤 프로젝트일까요?
‘특별한 날, 특별한 공간에 내 나무를 심어보세요.’ 서울마이트리 홈페이지 메인에 있는 문구입니다. 어떤 프로젝트일지 예상이 가시나요? 기부를 통해 특별한 의미가 담긴 나무를 서울시 주요 공간에 심을 수 있는 캠페인입니다. 사단법인 ‘생명의숲’에서 진행하고 있는 시민과 함께 도시의 숲을 조성하고 가꾸는 프로젝트랍니다.
에그프라이데이는 서울마이트리 웹사이트에서 기증받은 나무를 확인할 수 있는 ‘내 나무 찾기’ 서비스의 지도 조닝 작업을 진행하였습니다. 처음 서울마이트리에서 전달받은 공원의 식재 지도를 확인하고 고민에 빠지게 되었는데요, 그 이유는 생각보다 정보가 복잡하고 스팟마다 통일성이 없었기 때문이에요.
클라이언트에게 전달 받은 식재 지도식재 지도가 익숙한 분들은 쉽게 이해할 수 있겠지만, 기부자를 비롯한 일반인들에게는 이해하기 어려워 보였거든요. 그래서 최대한 심플하게 디자인하고 정돈해서 모두가 이해하기 쉬운 식재 지도를 만들기로 계획했습니다.
✷ 단순하고 모두가 이해하기 쉬운 식재 지도!
앞서 보여드린 식재 지도 A, B, C의 완성본입니다. 어떠신가요? 기존 지도보다 훨씬 알아보기 쉬워졌죠? 우선, 인도와 차도, 건물을 단계별로 나누어 디자인을 통일하고 단순화했습니다. 인도는 빗금 패턴으로 정리하고, 차도는 중앙선만 추가해 인도와 쉽게 구별할 수 있도록 디자인했어요. 건물은 외곽선 없이 단순한 형태로 표현해 중요한 정보보다 튀지 않도록 하면서도 배경과 어우러지도록 연출했습니다.
이번 작업에서 가장 중요한 목표는 기부자분들이 내 나무가 어디 심어져있는지 쉽게 확인할 수 있도록 하는 점이었는데요, 그래서 기부받은 나무의 위치는 컬러와 외곽선이 있는 아이콘을 활용해 강조했습니다. 알파벳으로 구역을 나눈 부분은 그룹으로 식재된 나무의 위치를 나타냅니다. 숫자와 나무 모양 아이콘으로 표시된 나무는 한 그루씩 기증받아 식재된 나무를 의미하고요.
공원에는 기부받은 나무 외에도 이미 심어져 있던 나무와 꽃이 있습니다. 이 부분 역시 지도에 꼭 포함해야 했어요. 기증받은 나무와 기존 나무가 혼동되어서는 안 되니까요. 기존의 나무와 꽃은 패턴이 들어간 아이콘을 사용하여 컬러로 강조된 기부 나무와 명확히 구분했어요.
지도에 사용된 컬러는 ‘서울마이트리’ 프로젝트의 이미지와 잘 어울리는 산뜻한 색상을 활용하여 프로젝트 이미지를 돋보이게 하고, 기존 웹사이트와도 조화를 이루도록 디자인했습니다. 산뜻한 컬러와 깔끔한 레이아웃 덕분에 귀여운 이미지로 완성되어 만족스러웠던 작업이었습니다!
✷ 마치며
오늘은 서울마이트리의 ‘내 나무 찾기’ 지도 조닝 작업을 소개해드렸습니다. 마지막으로 실제 웹사이트에서 보이는 모습을 소개하며 글을 마무리하려고 합니다! 하단의 링크를 통해 사이트에 게시된 지도를 직접 확인하실 수 있습니다:) 오늘도 긴 글 읽어주셔서 감사해요! 다음에도 재밌는 작업기와 함께 돌아올게요! 감사합니다.
