1# 디지털 세상에서 디자인은 피할 수 없는 숙명 

요즘 세상은 굉장히 간편한 방법으로 웹과 모바일을 통해 물건을 살 수 있습니다. 디지털 마케터로 일하고 있는 저 또한 그런데요. 그러다 보니 좀 더 확 눈에 띄는 광고, 직관적이고 예쁜 상세페이지에 더 관심을 가지고 구매 욕구를 가지게 됩니다. 이 정도 내용만 들어도 디지털 업계에서 디자인이 정말 중요하다는 건 누구나 아실거라고 생각합니다.

디지털에서 디자인이 중요한 이유를 원론적으로 살펴볼게요. 인터넷과 모바일이 일상화 되기 이전에 우리는 오프라인으로 물건을 구매 했었습니다. 물건이든 식료품이든 깔끔하게 인테리어 되어 있는 매장에 직접 방문하여 매대에 진열된 상품을 직접 만져보고 설명을 읽고 구매를 고민 했었죠. 여기에 오늘 세일 중인 전단지를 둘러보고 물품 근처에 상주하는 담당 직원이 옆에 붙어 이 제품은 뭐가 좋고, 신상이고, 사은품은 어떤 게 있고, 매력 포인트를 직접 말로 어필 했습니다. 마지막으로 구매 할 마음을 먹으면 카트에 담고 계산대에 가서 결제를 하는 방식이었습니다.

출처 : Freepik 

이후 인터넷과 스마트폰이 발전하고 대 디지털 세상이 도래하면서 온라인 구매 방식이 등장 하였습니다. 오프라인과 다르게 24시간 동안 운영이 가능하고 공간의 제약 없이 다양한 제품을 노출할 수 있었지만 치명적인 문제가 있었죠. 오프라인처럼 직접 만져보고 읽어보고, 전단지를 나눠주고, 담당 직원이 붙어서 이 제품의 매력 포인트를 직접 말할 수 없다는 것이었습니다. 이 경험을 개선하기 위해 디지털 디자인이 적극적으로 개입하기 시작했습니다. 말끔하게 꾸며진 매장 인테리어와 진열 매대는 현재 웹사이트와 앱이 되었고, 진열된 상품의 상세한 설명은 상세페이지라고 부르며, 각종 행사 전단지와 옆에서 매력 포인트를 어필하던 담당 직원은 광고 소재로 바뀌어 오프라인과 같은 경험을 제공하기 위해 지금도 다양한 온라인 업체들이 고군분투하고 있습니다.

출처 : Freepik 

현재는 온라인에서 물건 좀 팔아보려고 하는 수많은 사람들이 너도나도 광고 소재와 상세페이지 디자인을 남발하다 보니 고객들은 이를 받아들이는 피로도가 굉장히 높아졌습니다. 그래서 더 직관적이고 예쁜 구성의 디지털 디자인이 더 중요해지고 있습니다.

하지만 알고 있음에도 실천은 쉽지 않습니다. 어떤 회사의 디자이너는 매일 살인적인 업무 일정에 요청부터 죄송스럽고, 또 어떤 곳은 이제 갓 창업을 시작한 입장이라 디자이너가 없어 본인이나 마케터가 전담하기도 합니다. 유능한 디자이너와 함께 일하고 있는 팀원이나 결정권자 입장에서도 곤란하긴 마찬가지입니다. 이 디지털 디자인에 대한 이해도가 부족하다면, 명확한 요청 및 피드백을 제공하기 어렵거나 의도한 대로 작업물이 완성되지 않기도 하죠. 협업도 어렵습니다. 작업한 결과물을 보고 “이거 말고 좀 더 느낌이 살아나면 좋을 거 같아요”, “아.. 다 좋은데 뭔가 좀 촌스러운 느낌이 있는 것 같은데 그거 아시죠?” 등의 모호한 의사소통은 디자이너의 퇴사 욕구를 높이는 싸우기 좋은 멘트가 되곤 합니다.

오늘은 디자인을 너무나도 필요로 하지만, 위 문제들을 최소화하기 위해 저처럼 디자인 전공도 아니면서, 디자인에 대해 전혀 모르는 초보라도 같이 디지털 디자인을 보는 안목을 높일 수 있는 온라인 생존형 디자인을 함께 알아 보고자 합니다.

2# 모든 디자인에는 의도가 있습니다

‘그래 나도 할 수 있다!’라는 생각으로 무작정 앉아서 포토샵부터 켜셨다면 하루 종일 하얀 배경에 도형 몇 개와 엉성한 배치의 카피만이 나를 기다리고 있습니다. 듣기만 해도 절망적입니다. 자사가 가지고 있는 디자인 사례도 거의 없는 상황이라면 이런 경우가 더 많으실 겁니다. 하지만 포기해서는 안 됩니다.

위에서 말씀 드렸듯 디지털 디자인은 정말 우리의 환경에 많이 노출되고 있습니다. 키워드 몇 개만 검색하면 나오는 상품들의 상세페이지, SNS를 넘기다가 우연히 내 마음에 쏙 들었던 광고 소재 등 우리가 참고할 수 있는 디지털 디자인의 레퍼런스는 정말 쉽게 구할 수 있습니다. 적을 알고 나를 알라는 ‘지피지기’라는 말이 있죠. 이미 시중에 노출되고 있는 다른 회사들의 매력적인 디자인들은 이미 그 곳에서 치열하게 고민하고 만들어진 결과물입니다. 여기에 소비자들이 적극적으로 구매하고 있다면 더할 나위 없이 좋은 사례라고 볼 수 있습니다.

처음에는 그 레퍼런스를 메시지와 이미지만 바꾼다는 생각으로 그대로 따라서 제작 해보시는 것을 추천 드립니다. 너무 개성이 없는 것 같다구요? 우리는 현재 디자인 초보인 것을 명심해야 합니다. 그들이 만든 도형 배치, 모델과 상품의 구도, 텍스트의 크기와 위치, CTA 버튼 등 이런 자그마한 요소들이 고객들이 시각적으로 보기 편하도록 이미 설계가 전부 되어 있기 때문인데요. 만약 똑같이 따라했는데도 뭔가 허전하고, 어색하게 느껴진다면 똑같이 따라 하지 않았을 확률이 조금 더 높을 수 있습니다. 색상 정도는 브랜드 컬러에 맞게 변경하는 것은 무방하나, 기존보다 너무 쨍한 색상이나 탁한 색상을 조합한다면 이질감이 느껴질 수 있으니 꼭 유의해서 적용해야 합니다.

출처 : 페이스북 광고 라이브러리 - 로더렛 L'odeurlette 

위의 광고 소재를 예시로 들어보겠습니다. 우측에 판매 상품을 한눈에 볼 수 있도록 크게 구성되어 있습니다. 제품의 배치가 어색하지 않고 입체감이 느껴지도록 그림자 효과가 있구요. ‘베이비파우더 향을 퍼퓸 샴푸로 만들다’라는 두꺼운 폰트의 메인 문구를 통해 이 제품이 향에 특화된 샴푸임을 직관적으로 알 수 있습니다. ‘누구나 좋아하는 아기향기’라는 얇은 서브 문구와 포근한 이불에 덮여있는 아이의 발이 보이는 배경은 포근하게 느껴지는 향을 즉각적으로 상상하게 도와 줍니다. 강조되고 있는 텍스트의 색상을 통해 제가 이 소재를 보고 기억에 남는 것은 ‘30시간 지속되는 베이비파우더 향 샴푸’로 인식이 되었습니다. 광고 소재를 예시로 들었지만, 웹/앱의 UX/UI나 랜딩페이지의 디자인을 제작할 때도 비슷한 원리로 접근이 가능 합니다.

우리는 예술가가 아닌 상품을 팔아야 하기 때문에 크리에이티브라는 명분으로 무작정 창작을 하려는 시도는 매우 비효율적일 수 있습니다. 디자인을 크리에이티브하게 응용하는 것은 이후의 문제입니다. 시중에 나와 있는 디자인들은 왜 이렇게 배치 했을까 의도를 이해하고 충분한 레퍼런스 데이터가 축적 된 후에 우리의 의도에 맞는 새로운 방향으로 디자인 응용을 시도해 보는 순서가 좋습니다.

3# 묘한 차이를 부르는 여백과 자간, 그리고 황금비율 

회사에서 좋은 소스의 이미지도 가지고 있고, 적절한 레퍼런스도 참고해 디자인을 제작하였습니다. 그런데 완성된 결과물을 보니 과한 디자인도 아닌 텍스트 중심의 디자인인데 레퍼런스보다 조금 촌스러운 것 같기도 하고, 아니면 뭔가 답답한 거 같기도 하고, 부자연스러운 것 같기도 합니다. 이 모호함 대체 뭐가 문제일까요?

이런 경우에는 황금비율을 적용 해보면 조금 더 개선 될 수 있습니다. 황금비율이란 대략 1:1.618의 비율로, 예술, 건축, 자연 그리고 디자인의 여러 분야에서 조화로운 비례를 이루는 데 사용되는 수학적 비율입니다. 디자인에서 황금비율을 적용할 때, 이 비율은 시각적인 균형과 매력을 증진하는 데 도움을 줍니다.

출처 : Freepik 

텍스트 디자인에서 황금비율을 적용하는 방법은 다음과 같습니다. 광고 소재를 예로 들어볼게요. 메인 텍스트와 서브 텍스트 그리고 CTA버튼이 있는 소재를 디자인 한다고 가정 해보겠습니다.

메인 텍스트는 광고의 가장 중요한 부분이며, 가장 큰 글꼴 크기를 사용합니다. 예를 들어, 메인 텍스트의 글꼴 크기를 24pt로 설정합니다. 서브 텍스트는 메인 텍스트보다 작지만 여전히 중요한 정보를 제공하기 때문에 황금비율을 적용해 메인텍스트 글꼴 크기를 1.618로 나눈 값으로 설정합니다. 대략 15pt로 설정 할 수 있습니다. CTA 버튼은 행동을 유도하는 요소이므로 주목도가 있어야 합니다. 서브 텍스트보다 조금 더 크거나, 적어도 눈에 띄도록 약간 크게 설정할 수 있으며, 버튼의 크기를 전체 광고 영역의 약 1/5 또는 1/6 정도의 크기가 적당할 수 있습니다. 여백 또한 중요하며, 텍스트와 버튼 주위에 적절한 공간을 두어 전체 디자인이 혼잡해 보이지 않도록 합니다.

텍스트 크기에 대한 황금비율이 적용 되었다면 행간과 여백에도 황금비율을 적용할 수 있습니다.

일반적으로 행간은 글꼴 크기의 120%~150% 사이에서 가장 가독성이 좋습니다. 여기에 황금비율을 적용할 수 있는데, 예를 들어, 메인 텍스트의 글꼴 크기가 24pt라면, 행간은 24pt x 1.618 39pt로 설정할 수 있습니다. 이는 텍스트 블록 전체에 여유롭고 조화로운 느낌을 줄 수 있습니다.

여백은 텍스트 주위의 공간으로, 텍스트가 숨 쉴 수 있는 공간을 제공합니다. 너무 좁은 여백은 혼잡해 보일 수 있고, 너무 넓은 여백은 디자인을 흩어져 보이게 할 수 있습니다. 여기에 황금비율 적용해 페이지나 광고의 여백을 결정할 때, 전체 크기의 약 1:1.618의 비율로 나누어 균형을 맞출 수 있습니다. 예를 들어, 전체 너비가 1024px인 경우, 주요 콘텐츠 영역을 633px (1024px / 1.618), 여백을 391px (1024px - 633px)로 설정할 수 있습니다.

텍스트 디자인에서 황금비율을 사용하는 것이 필수적인 규칙은 아니지만, 균형 잡힌 조화로운 디자인을 만드는 데 유용한 공식으로 활용할 수 있습니다.

마지막으로 PC에서 디자인 제작을 완료하셨다면 꼭 모바일로 전송하여 봤을 때 텍스트가 너무 작지 않았는지, 답답해 보이거나 너무 흩어져 있지 않은지 추가로 크로스체크를 해본다면 우리도 손쉽게 고객에게 선택 받을 수 있는 퀄리티의 디지털 디자인 물을 만들어 보실 수 있습니다.

디지털 디자인의 기본을 이해하시는 데 도움이 되었나요? 내용이 재밌으셨다면 다음에는 웹/앱 UX/UI에 대해 함께 분석해 보는 이야기로 준비 해보겠습니다😊 

• 목록