Subscribe
🎵 자세한 포트폴리오
Meissa 브랜드 아이덴티티 디자인
B
Billie
프로젝트 개요
•
회사: (주)메이사
•
프로젝트 기간: 2021년 5월 — 2021년 6월 (1개월)
•
참여 인원: Product Designer (본인)
•
디자인 기여도: 100%
•
역할: 프로젝트 기획, 리드
프로젝트 배경
메이사는 스마트 건설 플랫폼을 개발/판매하는 회사로, 국내 유일 드론 영상 분석 기술을 갖춘 곳입니다. 드론으로 촬영한 2D 이미지를 정합하여 고해상도 지도로 활용하거나 3D로 모델링 된 가공 데이터를 제공합니다.
2020년, (주)카르타에서 (주)메이사로 사명을 변경하면서 새로워진 비전과 미션을 반영하고자 Brand Identity를 업데이트할 필요가 있었습니다.
Meissa Vision
단순 변환 데이터 제공을 넘어 loT, BIM, 360워크스루, CCTV 등 다채널로 수집된 데이터 결합하여 고객들에게 새로운 인사이트와 가치를 제공하겠다
단순 변환 데이터 제공을 넘어 loT, BIM, 360워크스루, CCTV 등 다채널로 수집된 데이터 결합하여 고객들에게 새로운 인사이트와 가치를 제공하겠다
1. Symbol
•
기존에는 로고 이미지와 상관 없이 원하지 않아도 ‘드론'이 주로 강조되는 경향이 있었습니다.
•
기존 로고는 일부러 건설사들처럼 두껍고 우직한 이미지를 만들어서 건설 산업의 회사라는 걸 알리려는 의도였다고 해요.
•
메이사로 로고를 바꾸게 된 시점에는 ‘기술 회사' 느낌을 더 강조하고 싶다는 니즈가 생겼습니다.
•
당시 새로 설정된 제품 목표를 바탕으로 메이사 심볼을 제작했습니다.
•
기존 [드론 데이터] + [BIM], [CCTV], [360도 파노라마 이미지], [실시간 위치] ... 등등
더 다양한 유형의 건설 현장 데이터를 Meissa Platform 안에 ‘융합'하여 생기는 인사이트와 가치를 전달하겠다는 의미를 담게 되었습니다.
•
메이사에서 제공하고자 하는 '융합'은 일반적인 '통합'과 다릅니다.
◦
건설에는 매우 다양한 데이터와 문서가 필요하지만, 정작 한 곳으로 잘 모이지 않고 각각 다른 솔루션을 사용하며 비효율을 감내하고 있습니다.
◦
메이사는 이러한 문제를 해결하기 위해 다양한 데이터를 융합하여 생기는 인사이트를 제공하고자 합니다.
•
그래서 우리 플랫폼에 다양한 데이터가 모이는 장면을 상상한 시안이 최종 채택되었습니다.
•
채택 이후에 알게된 것
◦
아주 많은 시안이 나왔었지만 결국 CARTA 당시 심볼과 적절한 유사성(육각형, 청록색 ...)이 있는 시안으로 채택되었습니다.
◦
CARTA 고객사, 인지하던 회사들이 금방 연결해서 기억할 수 있는 장점도 있었겠다 싶어요.
2. Typefaces
언어에 따라 쓰는 폰트가 달라요.
•
국어 문서 : Pretendard
•
일어 문서 : Pretendard JP
•
영어 문서 : Eloquia
2-1. 영어용 글꼴 - English : Eloquia
Eloquia라는 Grotesk(그로테스크) 계열의 유료 글꼴을 쓰고 있습니다. 메이사는 건설사를 대상으로 한 B2B 기업이므로 이성적, 논리적인 수렴형 메시지를 담은 기업입니다. 따라서 중립적이고 이성적인 인상을 줄 수 있는 Grotesk 계열이면서도, 지나치게 차갑고 딱딱한 분위기를 내지 않게 하기 위해서 Geometirc의 대중적인 특징도 함께 품은 글꼴을 최종 선택했습니다.
•
Geometric 계열에는 대표적으로 Google Sans나 삼성 Sharp Sans가 있습니다. 이런 글꼴은 대중적이고 친근한 느낌이 강한데, 제목이 아닌 본문과 같은 줄글에서 사용하게되면 눈이 금방 피로해지기 때문에 여기 저기 통일하여 사용하기 까다로운 경향이 있습니다.
•
저는 작업 효율성(타부서와의 커뮤니케이션 미스 줄이기, 적절한 폰트 찾는 시간 줄이기 ...)을 위해 로고부터 본문까지 다 커버 가능한 서체를 원했습니다.
•
저희가 주고 싶은 이미지는 이성적, 논리적인 수렴형 메시지에 가깝습니다. 근데 너무 차갑고 딱딱한 분위기는 또 안된다고 생각했어요. 그래도 고객들에게 우리가 만든 서비스가 금방 잘 쓸 수 있을 것처럼 다가오면 좋겠다는 마음도 있었거든요.
→ Eloquia는
•
Grotesk 계열 글꼴 중에서도 Geometric의 성격을 어느정도 품고 디자인 되었기 때문에, 제 고민을 해결해줄 수 있었습니다.
•
Display(제목용이라고 생각하셔도 무방)와 Text(본문용이라고 생각하셔도 무방)용 글꼴 구분이 잘 되어있고,
•
돈을 주고 사는 만큼 두께도 다양하여 확장성까지 있다고 생각했어요.
2-2. 국어/일어용 글꼴 - Korean(, Japanese) : Pretendard (, JP)
Pretendard라는 무료 글꼴을 사용하고 있습니다.
•
원래는 Noto Sans KR을 쓰고 있었지만 부족함이 많았어요.
◦
한글, 숫자, 영문 디자인이 서로 조화롭지 않았어요.
◦
기본 자간이 넓어서, 매번 자간을 수정해줘야 하는 추가작업이 필요했어요.
•
영문 폰트를 Eloquia로 정한 얼마 뒤, 국내에서Pretendard라는 디자이너들의 고충을 해소해줄 무료 폰트가 배포되었어요.
◦
한글, 숫자, 영문 디자인이 훨씬 조화로웠어요.
◦
숫자/영문 디자인이 영문 글꼴로 지정했던 Eloquia와 잘 맞아떨어졌어요.
◦
Web에 적용했을 때, Window 환경에서도 글자를 판독할 수 있는 정도가 Noto Sans와 비슷했어요.
(그 전에 Spoqa라는 글꼴을 적용했을 때는 엄청 심하게 깨졌었고, 판독성에 큰 영향을 미쳤거든요)
(그 전에 Spoqa라는 글꼴을 적용했을 때는 엄청 심하게 깨졌었고, 판독성에 큰 영향을 미쳤거든요)
3. Colors
Point Color
•
Point Color라고 부르지만, 실제로는 Main Color, Primary Color 등 사용하는 용어는 정해져있지 않아요.
•
청록색이 인쇄나 안좋은 모니터로 보는 UI에 쓰기엔 모호하고 어려운 부분이 있는데도 유지하기로 했어요.
•
일단 로고만 바뀌는 게 아니라 사명까지 한 번에 바뀌는 것이기 때문에, 어느 정도 이전 로고에서 보여주던 컬러를 유지하는 게 좋겠다고 합의했었거든요.
•
이미 디자인된 플랫폼 디자인이 청록색에 맞춰서 되어있기 때문에 (물론 컬러 코드 바꾸면 되는 거기야 하지만… 공수가 더 들 수밖에...) 대응 리소스를 줄일 수 있는 방안이기도 했어요.
•
CARTA 로고를 디자인했던 디자이너의 의도대로, 신뢰를 나타내는 컬러로도 적당하다고 판단했고요.
•
Light 모드에서는 #00ACC1, Dark 모드에서는 #26C6DA를 사용해요.
Background Color
•
포인트 컬러인 청록색을 받쳐주던 남색Navy을 블랙Black으로 변경했어요.
•
원래 청록색은 완전한 파란색/초록색의 옆에 있어야 더욱 청록처럼 보이는 경향이 있고, 그래서 남색을 같이 썼었거든요.
•
엔젤스윙, Xite cloud를 비롯한 경쟁사부터 + (특히 한국이 그런건지...) 기업 로고로 파란색을 너무너무너무 많이 쓰는 경향이 있어서, 조금이라도 다르게 하고 싶은 마음도 있었어요.
Grey Color
•
회색조 컬러는 가벼운 사용경험을 위해서 Cool Grey 계열을 사용합니다.
4. Elements (Products)
제품의 특징에 따른 결정
메이사는 건설현장의 다양한 데이터를 보여줘야 하는 특징이 있는데요.
→ 그래서 한 화면 안에서 많은 정보들을 보여줄 때 사용자가 부담을 덜 수 있는 방향을 고민하게 되었고,
→ 각 정보들끼리의 그룹핑이 잘 되게 하기 위해 카드 UI/디자인을 적극적으로 활용하게 되었습니다.
Card UI의 예시
Card UI는 보통 한꺼번에 많은 정보를 보여줘야 할 때, 각 정보들 간 구분이 잘 될 수 있도록 Card 안에 묶어주는 디자인 형식입니다.
그래서 Apple에서도 iOS 14와 macOS 11 (Big Sur) 버전부터 적극적으로 활용하고 있는 스타일이기도 하여 채택하고자 했습니다.
Subscribe to 'billieyoung'
Subscribe to my site to be the first to receive notifications and emails about the latest updates, including new posts.
Join Slashpage and subscribe to 'billieyoung'!
Join Slashpage and subscribe to 'billieyoung'!
