날씨 구글 익스텐션 제작기 (2)
사이드 프로젝트 일기
정기모임에서 정했던 주제와 기능들을 가지고 첫 외부 모임에서 팀원들과 함께 프로젝트를 진행했습니다. 코로나가 주춤해진 시기였기에 카페의 회의룸을 빌려 모였죠. 디자이너는 저 말고도 다른 디자이너분들을 포함해 총 3명이었고, 개발진은 개인 사정으로 참석을 하지 못한 분을 제외하고 총 3명이 모였습니다. 저희는 익스텐션 내에 포함할 정보가 많은 구조가 아니었기에 각 요소 디자인에 조금 더 힘을 쏟았습니다.
01. 허밍
저희 팀은 서비스의 이름, 로고, 컬러를 우선적으로 결정해야 했습니다. 그중 첫 번째로 결정해야 하는 것은 브랜드의 이름이었죠. 저희들은 앞의 글에서 정리했던 것과 같이 "날씨에 맞는 음악"을 들려주는 서비스를 제공하려고 합니다. 팀원들과 이런 아이디어, 저런 이름 등 떠오르는 것들을 모두 정리하고 고르기로 했습니다.
아이디어 작성 사진날씨한곡
창
Muther
감바스
Music Weather
날뮤
허
감성에 빠지고 싶다
곡
Humming
MW
Music Window
뮤윈
많은 아이디어들이 나왔지만, 모든 팀원들이 동의했던 이름은 허밍이었습니다. 날씨에 맞는 음악을 듣고 흥얼거리는 생각에서 따온 허밍이란 이름은 회사 PC로 일을 하면서, 또는 노트북으로 강의를 들으면서 허밍을 한다는 이미지와 잘 어울렸기 때문이죠.
이름이 정해지고 다른 디자이너분이 로고 작업을 바로 시작했습니다. 브랜드의 컨셉은 3가지였어요. 허밍(Humming)은 실시간으로 날씨의 정보를 가져오고, 그 날씨와 관련된 음악을 제공하는 프로그램이었습니다. 이러한 특징을 대표할 수 있는 컨셉은 "리듬감", "이어짐", "날씨"라고 생각했습니다.
Humming에서 H를 따와 심벌로 설정했는데, H에 대한 대략적인 디자인이 완성되면 그 이후에 단어들에 대한 컨셉, 아이콘의 컨셉 등도 어느 정도 맞출 수 있으니 우선 과제로 진행했습니다. 초반 스케치 때 그렸던 심벌들의 예시를 첨부합니다.
02. 심벌
um이 반복되는 듯한 그림이 있는 이유는 리듬감과 어울리는지, 이어지는 형식의 모양을 활용할 수 있는 방안이 무엇인지 고민을 하기 위함입니다. H의 모양을 해치지 않으면서, 리듬감을 가져갈 수 있는 스타일을 고민했고, 직선과 곡선이 섞인 디자인은 끊어지는 듯한 느낌이 들었기에 최종적으로 배제를 했습니다.
저희들은 색을 고르기 위해 최종적으로 고민할 디자인 시안 3개를 남겨놓고 전부 과감하게 배제를 했어요. 선택지에 남아있어야 할 명확한 이유가 없는 디자인이라면 혼란을 줄 수 있기 때문이었죠. 저희들은 그렇게 최종 3개의 디자인 시안에 각각의 색을 입혀 투표지를 만들었습니다.
검은색 로고 두 개가 그려진 사진부터 시계방향으로 1 / 2 / 3 / 4처음으로 결정을 해야 했던 것은 심벌과 로고의 끝이 각이 진 것과 둥근 것이었습니다. 1번의 왼쪽 심벌은 선을 조금 더 꼬아 높은 음자리표와 비슷한 느낌으로 가져가려고 했어요. 또한 선의 시작과 끝 부분이 둥근 모양이 아닌 칼로 잘린 듯한 모양을 하고 있습니다. 저희는 이러한 느낌이 컨셉으로 잡은 이어짐과 반대되는 느낌을 줄 수 있을 것 같다고 생각했어요. 그 뒤 2, 3, 4번의 그림들은 앞에서 말한 최종 디자인 시안 3개입니다.
2번의 경우 음표 두 개와 H를 적절하게 섞어 그렸습니다. H의 모양이 조금 더 부각되는 디자인이었고, 왼쪽 윗부분이 끊겨있는 듯한 느낌이 든다는 단점이 있었습니다.
3번의 경우 최대한 꼬이지 않고 같은 모양을 반복하는 듯한 이미지를 형상화했습니다. H의 모양을 최대한 살렸고 동그란 부분을 최소화했죠.
4번은 끊지 않고 한 번에 연결된듯한 디자인, 그리고 왼쪽 윗부분을 연결시켜 높은 음자리표를 형상화했고, 동그란 부분을 축소하여 H를 표현할 수 있게 조금 다듬었습니다.
03. 색상
왼쪽부터 1 / 2/ 3 / 41번은 청량하면서도 푸른 녹음(綠陰)을 상징하는 색을 가져왔습니다. 날씨와 자연은 같은 묶음으로 분류되며, 날씨를 표현하는 방식 중 기본적으로 땅에 사용되는 초록색을 후보에 올렸습니다.
2번은 날씨 하면 생각나는 하늘보다 조금 더 깊은 색을 가져왔습니다. 컬러감을 살리기 위해 색의 채도를 높였고, 바탕이 되는 색으로 쓸 경우 정보를 보여주는 색은 하얀색으로 섞어 하늘과 구름의 느낌을 살리기 좋을 것 같았습니다.
3번은 땅과 나무에서 색을 가져왔습니다. 따뜻한 분위기를 낼 수 있는 색이며, 개인적인 공간을 구분하는데 쓰이는 책상, 문 등과 이미지가 비슷했습니다.
4번의 경우는 3번의 색이 조금 짙었기에 밝은 느낌으로 가져가 보면 어떨까 하는 생각으로 가져왔습니다. 포인트 색으로는 조금 약하다는 느낌이 있었지만, 듀오톤으로 가져가 보면 어떨까 싶었기에 후보에 올렸습니다.
04. 최종 결정
팀원들과 프로젝트를 도와주는 PM분들의 의견도 반영하여 투표를 진행했습니다. 최종적으로 결정된 심벌과 컬러는 전반적인 디자인을 할 때 적용할 예정입니다. 투표 결과는 심벌의 모양은 4번, 컬러는 3번이었습니다. 이러한 결과를 바탕으로 심벌과 로고를 디자인하였고, 애니메이션을 통해 그려지는 듯한 느낌도 부여했습니다.
다음 편에서는 결정된 심벌과 로고, 색상을 바탕으로 대략적인 형태의 와이어프레임, UI 디자인 등에 대해 써볼까 합니다. 개발에 관련된 글을 쓸 수 있다면 좋을 것 같은데, 개발 지식이 전무하여 어떻게 될지는 모르겠어요. 같은 개발팀원에 세 물어보고 써나갈지 말지 결정할 것 같습니다.
디자인과 개발의 과정을 최대한 상세하게 써보고 싶었어요. 그렇기 때문에 시안들도 올려 의도와 의미를 설명했습니다. 과정도 과정이지만 이러한 디자인을 왜 했는지에 대한 저와 저희 팀의 생각이 잘 전달되었으면 합니다. 부족한 글, 매번 읽어주셔서 감사합니다. 다음 편에서 만나요! :)
