[디자인] 로고에 맞는 배경 제작

항상 App 개발을 할 때 부가적으로 기간도 오래 걸리고 돈도 많이 나가는

App디자인에 대해서 마음속으로 언젠가는 꼭 내가 디자인을 배워서 정복하겠다는 꿈이 있었습니다

이번에 회사로 App제작 의뢰가 들어왔고 그에 맞춰 제2의 도전인 디자인에 첫걸음을 시작합니다

 

시작하기에 앞서 저는 일러스트 6 버전을 사용해서 디자인을 진행했는데

웬만하면 7 이상의 버전을 추천드립니다

그 이유는 6에서는 지원되지 않는 부분이 너무 많아서 생각보다 불편하고

대부분 블로그들에 나와있는 일러스트 기능 정보가 7 이상의 버전을 기준으로 작성되어 있기 때문에

6 이하의 버전을 사용하게 되면 디자인을 하는데 더 많은 시간이 걸립니다

 

의뢰를 받은 App 개발은 전열교환기 컨트롤 App으로 와이파이를 이용한 전열교환기 컨트롤러입니다.

App 디자인에서 가장 고민이 되는 부분은 바로 분위기인데요

App의 분위기를 어떻게 가져가느냐에 따라서 사용자가 느끼는 느낌이 확 다르기 때문입니다

요즘은 디자인 자체가 심플하고 화이트톤을 많이 선호하는 추세인 거 같습니다

 

먼저 배경에 깔아줄 이미지를 제작하기 위해 고민을 하다가 로고를 분위기를 이어받아서

색상을 뿌려주면 좋을 것 같다는 아이디어를 생각했습니다 창작의 고통이란 쉽지 않네요

먼저 제가 의뢰받은 회사의 아이콘은 하늘색, 녹색, 회색톤으로 구성되어 있습니다

마침 만드는 전열교환기 App의 경우 미세먼지 등을 다루기 때문에 약간 파란톤 및 녹색톤이 어울렸습니다

세 가지톤을 배경에 색칠하듯이 뿌리게 되면 자칫 유치한고 허접한 느낌을 낼 수 있기에

화이트톤의 배경에 아이콘의 세가지 색상을 적절히 표현하고 싶었습니다

 

여러 가지 생각하다가 타이틀도 넣어주어야 하고.. 타이틀을 넣기 위에 위쪽에 색상을 넣자니

이렇게도 허접스러운 배경화면이 되고 디자인을 했다기에는 좀.. 어딘가 마음에 들지 않습니다

그러다 문득 창문을 바라보았는데 커튼 형식의 곡선으로 세 가지 색상을

표현하면 어떨까라는 생각에 배경 작업을 시작했습니다

 

먼저 커튼의 곡선을 표시하기 위해서 도형을 만들었습니다

일러스트를 아직 처음 해서 시작하는 단계라는 점을 이해해주세요

가위 툴을 사용해서 곡선 뒤쪽 단면을 잘라줍니다

사용될 오른쪽 곡선을 제외한 나머지 부분은 제거해줍니다

다음은 네모 도형을 이용해서 만들어둔 반원위에 네모도형을 덮어서 그립니다

네모 도형도 마찬가지로 모서리 부분을 가위를 이용해 잘라줍니다

이렇게 나머지 잘린 오른쪽 부분은 제거하고 반원과 반 네모를 합치게 되면

제가 원했던 커튼 모양의 곡선 도형이 완성되었습니다

두 개의 도형은 그룹으로 묶어서 하나의 도형으로 만들어줍니다

 

하나로 만들어진 커튼 모양 도형을 복사해서 3개로 만들어준 뒤 아이콘 색상별로 지정해서

도형을 겹쳐놓게 되면 다음과 같은 결과물을 볼 수 있습니다

어떠신가요 이렇게만 보면 크게 디자인을 한 거 같다는 느낌은 없지만

첫 시작인 배경 콘셉트를 잡았다는 게 너무 만족스럽네요

앞으로 App을 만들어가면서 진행되는 디자인에 대해 열심히 포스팅해보도록 하겠습니다