디자이너가 자주 쓰는 비주얼 콘셉트 11가지
10년 치 실무를 하며 모아놓은 레퍼런스 창고 대방출
최근 워킹 환경을 클라우드 베이스로 이관하고 있는 도중 컴퓨터에서 레퍼런스 창고를 발견했습니다. 추억의 콘셉트 창고를 보다가 브런치에 공유하면 재밌겠다 싶어서 정리를 해 봤어요.
10년 치 자료지만 어떤 게 10년 전의 레퍼런스인지 구별이 안 갈 정도로 멋진 작업물들이 많아요! 이미지들은 비핸스나 핀터레스트를 통해 얻은 것들입니다만 중간에 제 작업물도 하나 껴 있습니다 ㅋㅁㅋ
-이미지 출처를 모두 밝히지 못하는 점 양해 부탁드립니다, 저작권은 해당 작업자에게 있습니다-
들어가기 전에, 디자인 콘셉트를 간단히 한 줄로 정의해 봅시다.
우선 콘셉트란 뭘까요? 제품이나 사람, 작품 등이 지향하는 이미지, 방향을 통틀어 콘셉트라고 합니다. 특장점, 개발 의도로 번역될 수도 있겠네요.
제품 콘셉트와 디자인 콘셉트가 반드시 일치하지 않을수도 있습니다. 디자인 콘셉트는 메타포 (은유, 비유)를 통한 '통일된 느낌, 방향성'에 방점을 찍고 있어요. 디자이너가 의도하는 느낌으로 통일된 룩앤필 (look & feel) 혹은 톤 앤 매너 (tone & manner)를 잡는 것, 이것이 '디자인 콘셉트'입니다. (흔히 컨셉 잡는다, 라고 표현하기도 하죠 ㅎㅎ)
여담으로 bx 디자이너는 스토리텔러가 되어야 합니다. 메타포를 찾고, 메타포와 제품 혹은 서비스를 연결 짓는 일이 주요 업무이기 때문이죠.
1. 쉐이프(도형) 그래픽의 활용
기본 도형부터 시작해 봅시다. 쉐이프 (도형)의 종류로는 원, 삼각형, 사각형, 라인이 있습니다. 오각형, 육각형, 대각선, 그 외 플루이드 도형들은 모두 위 네 가지 기본 도형에서 응용된 복합 도형입니다. 저는 원을 가장 사랑합니다. 원은 메타포를 붙일 수 있는 게 아주 많기 때문이죠.
특히 스타트업들은 플랫폼이 되고 싶어 하는 경우가 부지기수입니다. 원은 이들이 좋아하는 연결, 초연결, 데이터, 클라우드, 규모, 빅데이터 등을 비유하기에 최적인 도형입니다.
점 (원)
점과 선을 연결하니 데이터의 흐름 같죠? '점과 선으로 연결한 메타포를 통해 빅데이터와 초연결을 표현했습니다'..라는 의도가 바로 '디자인 콘셉트'가 되는 것입니다.
선과 면, 패턴의 등장점과 선 다음으로는 면이 등장합니다. 사각형, 삼각형 등은 패턴으로 발전하며 패턴은 디자인 시스템을 아주아주 효율적이고 간지 나게 돕죠. 메타포를 제대로 개발하면 리플릿이든 홈페이지든 여기저기 응용할 수 있어서 디자인 시간을 단축시키고 보는 사람으로 하여금 make sense가 되게 합니다. 이것이 작업을 시작하기 전 디자인 콘셉트가 반드시 정의되어야 하는 궁극적인 이유죠. 그래서 저는 1장짜리 작업물을 할 때가 가장 힘들어요. 맥락이 없어서.
패턴형으로 응용
조합2. 실사(실제 이미지)와 쉐이프(도형)의 조합
다음으로는 연혁이나 팀원을 소개할 때 가장 많이 쓰는 그래픽 스타일입니다. 실사 이미지의 배경을 제거하고 원이나 사각형 등 도형을 조합하는 식입니다. 만약 디자인 콘셉트를 사각형 기반에서 출발했다고 정의한다면 여기서도 사각형 도형이 사용되어야겠죠?
3. 쉐이프 (도형) 안에 실사 이미지 넣기
도형 안에 사진을 넣는 스타일입니다. 가장 흔하게 볼 수 있는 디자인 스타일입니다. 쉐입의 느낌이 강하기 때문에 전체 디자인 콘셉트의 맥락에 맞는 도형을 사용해야 일관된 분위기를 유지할 수 있습니다.
뜬금없이 예쁘다고 사용하면 안됩니다.
텍스트 안에 넣기도 합니다, 주로 마스크 기능을 이용하죠.레이어(층위)의 메타포를 활용하여 쉐입 안에 있는 실사 이미지에 모션을 넣을 수도 있습니다.
응용4. 실사와 폰트 (타이포그래피)의 조합
제가 가장 사랑하고 애용하는 디자인 스타일입니다. 심플하고, 만들기 쉽고, 간지 납니다. 주로 배경이 제거된 실사 이미지와 함께 사용되죠. 사진을 오브젝트로 사용하고, 폰트가 데코레이션을 하는 스타일입니다.
이 스타일이 보기 좋고 재밌는 이유는 아웃라인이 단조롭지 않고 다이내믹하기 때문입니다. 조형미의 원리 중 하나예요.
사람의 팔, 다리가 사각 프레임의 단조로움을 깨기 때문에 재밌는 겁니다
마카롱의 그림자가 디자인의 완성도를 높여주네요. 텍스트 위에 진짜 마카롱이 올라간 것 같죠? 이런 기법들이 바로 메타포입니다.
2번에서 응용된 버전
자전거 이미지만 있었다면 특징이 없었을 텐데 타이포그래피를 통해 오브젝트에 힘을 실었습니다
등불이 텍스트의 아웃라인을 깨 주고 있죠? 5. 가변 되는 타이포그래피 / 쉐이프
역시 패턴으로 응용하기 좋아서 자주 사용되는 기법입니다. 텍스트를 늘리거나, 쉐이프를 블록으로 디자인한 후 플렉시블 하게 활용하는 그래픽 스타일이에요. 이 기술을 가장 잘 사용하는 회사가 플러스 엑스라고...
텍스트가 가변 됩니다
블록들이 가변 됩니다.
로고 개발할 때 진정한 가성비 발휘6. 기하학 (패턴)의 응용
라인 메타포가 적극적으로 쓰이는 스타일입니다. 수학과 논리, 데이터, 우주, 기본, 기초, 질서, 근본이 되는, 근원적인, 내가 기본 공식이다 이런 느낌을 전달할 때 주로 사용합니다.
연결, 파생, 커뮤니티, 체인 시스템을 이야기하기에도 좋아요.7. 플랜테리어 (?) / 쉐도우 / 미니멀 / 인테리어
비교적 최근에 볼 수 있는 트렌드입니다. 인테리어 트렌드에서 출발한 듯한 플랜테리어 메타포는 미니멀리즘을 표방하고 있습니다. 이 또한 제가 무척 사랑하는 사조입니다. 가장 효자 노릇을 하는 식물로는 몬스테라가 있어요. 줄기(라인)와 가운데가 뻥뻥 뚫린 넓은 입사귀(면)의 자유곡선 조합은 이미지를 딱 놓는 순간 그대로 완성되어 버립니다.
그리너리가 한창 유행하였습니다.
덩달아 식물 그림자, 창 그림자도 대유행 중입니다.그림자를 넣는 이유가 뭘까요?
앞서 설명한 바와 동일하게 이미지의 정형적인 아우트라인을 탈피하고 다이나믹한 요소를 추가하는 것입니다. 쉽게 말해 밀도를 높여서 완성도를 올리기 위함이죠. 있고 없고 간지의 차이가 큽니다.
그러나 과도한 사용은 좋지 않다고 생각됩니다.8. 일러스트레이션
일러스트레이션을 사용하면 전반적으로 귀여운 느낌을 줍니다. 소비자에게 친근하게 다가가고 싶을 때 사용하는 그래픽 요소입니다.
최근 트렌드는 3d의 급부상이죠. bx 디자이너를 지망한다면 3d는 필수적으로 배워야 하는 툴이 아닐까 생각합니다. 풍문으로 기술적 난이도가 많이 낮아졌다고 합니다. 저도 언젠가... 그 언젠가 배워보려고 합니다.
9. 화려한 배경색 / 그라디언트 배경
이미지를 full로 사용하고 그 위에 컬러 배경을 사용하는 기법입니다. 밀도를 높이는데 아주 효과가 좋습니다. 무언가 심심하다면 뒤에 백그라운드 이미지를 깔아보세요. 주의할 점은 이미지의 투명도가 낮아야 고유 명도값이 전해지면서 밀도 있는 인상을 줄 수 있습니다. (opacity 최소 80% 이상) 쉽게 말해 이미지를 너무 투명하게 사용하면 맥아리 없는 (<-전문 용어) 디자인이 나옵니다.
10. 플루이드 쉐이프
이것도 비교적 최근에 대유행 중인 스타일입니다. 정방형의 원, 사각형, 대각선, 라인 등이 모두 지겨워지기 시작한 디자이너들은 탈 쉐이프를 시도합니다. 탈 그리드처럼 탈 쉐이프를 지향하기 때문에 매우 현대적인 뉘앙스입니다. 쉐이프 안에 이미지를 넣기도 하죠.
11. 아치, 그리고 아치
이 또한 인테리어에서 파생된 디자인 스타일입니다. 최근 유독 많이 보여서 따로 실어봤어요.
그러나 이상하게 찾으려니 레퍼런스가 없었다....전반적으로 선, 원, 삼각형, 사각형에서 출발한 도형들의 round 값이 조절되는 정도 및 어떤 메타포와 조합하느냐에 따라 변형되는 양상입니다. 모방은 창조의 어머니라는 말이 실감이 나시나요? 머릿속에 다양한 레퍼런스들이 있다면 a와 b를 융합하여 새로운 것이 창조됩니다. 그러니까 디자인을 잘 하고 싶다면 열심히, 깊게, 시간을 내서 많은 레퍼런스들을 들여다봐야 합니다.
유행, 트렌드. 결코 나쁜 것이 아니에요.
완벽히 새로운 것은 없습니다. 새로워 보이는 것도 큰 흐름 안에서 약간의 변이의 연속으로 탄생합니다. 여러분의 창조성이 트렌드 안에 있고 트렌드의 탄생과 변화에 서로 영향을 받는 것이죠.
최근 글을 쓰지 않았더니 쓰고 싶은 콘텐츠가 쌓였네요 :)
좋은 현상입니다!
! 좋아요, 공유와 댓글은 콘텐츠를 만드는 힘이 됩니다!
-디자인하기로
https://www.youtube.com/channel/UC--hf0xHdxDQfqNIn4h8k6g
