안 짜치는 독특함 구현하기

디자인, 이거 무시하시면 망합니다.

by 반한나

기업과 개인의 성장을 위한 온/오프라인 지류 제품 디자인 전문 기업

옐로우삭스는 팀의 존속과 성장을 위해 2025년 2월 27일부터 [성장의 날]을 도입하였습니다.

옐로우삭스 성장의 날은 팀 1인이 각자 자유롭게 주제를 선정하고,

내부적으로 강연한 뒤 이야기를 나누는 방식으로 진행됩니다.


* 현 포스트의 시각 자료 디자인은 조금 대충 만든 것이니... 부디 넘어가주시길

* 특정 내용은 옐로우삭스 및 발표자 개인에게만 적용되는 내용이니 선택적 수용 필수


첫번째 성장의 날 발표는 저, 김승학입니다.

오늘 제가 나눌 강의 주제는 다음과 같습니다.

어떻게 하면 안 짜치는 독특함을 구현할 수 있는가


현 포스트의 시각 자료 디자인은 조금 대충 만든 것이니... 부디 넘어가주시길


현대 사회, 문서가 대부분 온라인으로 넘어가면서 디자인은 정말 필수적인 역량이 되었습니다.

그럼 어떻게 하면 안 짜치는 디자인,

어울리고 효과적인 디자인, 브랜드 통일성을 가져갈 수 있을까요?



옐로우삭스의 디자인 원칙 : 죽어라, 뻔할 거면.


우선 옐로우삭스에게 디자인이란 무엇인지,

옐로우삭스의 디자인 원칙에 대해서 짚고 넘어가겠습니다.

%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C3.PNG?type=w1
%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C4.PNG?type=w1

본질 : 유저에게는 실용을 위한 미학

맞춤형 : 고객사에게는 원하시는 대로

브랜드로서는 : As Exclusive As Possible

슬라이드5.PNG
슬라이드6.PNG
죽어라, 뻔할 거면.

이걸 내부 문서에 내 걸 정도로 우리 팀은

창의적인 브랜드 정체성을 유지하고자 노력합니다.

%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C8.PNG?type=w1

단, 위의 원칙들을 지키는 선에서 말이죠.



뻔하지 않다-란?

%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C9.PNG?type=w1
한 번만 더
1. 생각하게 2. 보고싶게 3. 떠올리게
만드는 것입니다.


이번 포스팅에서 강조할 것은 위 세가지 항목들이긴 합니다만,

한 번 ' 만 ' 더라는 표현 역시 사실 중요하긴 합니다.

왜냐하면 한 번 이상 의도해버리면

직관성이 떨어지거나, 오히려 질척이는 것 같은 느낌을 주기 때문이죠.


각설하고, 그럼 위 세 가지를 어떻게 실현할 것이냐?

아주 간단합니다.

확실하게 뻔하지 않은 것을
단 하나만이라도-

1. 이미지화
2. 명사화
3. 반복(통일)


앞글자만 따서 "이.명.반"이라고 명명했습니다.

%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C10.PNG?type=w1 해당 이미지는 옐로우삭스의 정치성향과는 아무 관련이 없습니다...


먼저 '이미지화'와 '명사화'는 위 그림 하나로 설명이 됩니다.


- "이미지화"란 어떠한 개념이나 마스코트를 하나의 시각적 이미지로 표현할 것 (위 이명박 전대통령의 사진)

- "명사화"란 어떠한 개념에 이름을 붙일 것 (앞글자만 따서 '이. 명. 반'이라고 한 것)


이렇듯 "이미지화"와 "명사화"는 누구나 간단하게 할 수 있을 정도로 크게 어려운 법이 아니에요.

아무래도 "반복(통일)"이 가장 고오급 스킬이니 이것에 대해서 말씀을 드리고자 합니다.



옐로우삭스는 어떻게 반복을 구현하는가?


%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C12.PNG?type=w1

네, 위 자료를 보시면 아주 잘 나와있고요...

근데 이런 특정한 요소가 아니라, "무드"로도 우리는 반복(통일감)을 구현해낼 수 있습니다.

아래 예시 사진들을 보시죠.

%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C13.PNG?type=w1
%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C14.PNG?type=w1 출처 : 핀터레스트
%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C15.PNG?type=w1 출처 : 핀터레스트
%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C16.PNG?type=w1 출처 : 핀터레스트
%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C17.PNG?type=w1 위 사진과 달리 코믹이라는 느낌만 부과해도 통일성을 충분히 가집니다.출처 : 핀터레스트

모두 비슷한 느낌을 가지죠?

(조금 아닌 거 같아도 그냥 그렇다고 합시다.)



깜짝 QUIZ!
아래 사진에 가장 어울리지 않는 폰트는?


정답은 댓글로 남겨주세요!

%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C22.PNG?type=w1
%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C19.PNG?type=w1
%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C20.PNG?type=w1
%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C21.PNG?type=w1

정답은 댓글로 남겨주세요! 바로 답글 남겨드림.

사실 정답보다, 각각이 주는 느낌이 어떻게 다른지를 따져보는 것이 중요합니다.




통일감 있는 스타일을 위한

작업 및 검토 순서

%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C23.PNG?type=w1

위의 과정처럼

[ 최대(본질, 메시지) → 최소(세부 요소) → 소 → 중 → 대 ]

- 로 이어지는 과정이 필요합니다.


무엇보다 중요한 것은 본질, 메시지(사용 목적에 맞는가 등)이고요,

이 다음 단계에서는 각 요소들이 통일성을 가지는지,

전체 요소들의 흐름이 잘 맞는지 확인하는 과정이 필요하죠.


< (참조) 약간의 팁 >

- 배경이 바뀌면 내용 자체가 전환되는 느낌이 든다.

- 일정 이상의 여백은 세련됨을 준다.

- 대부분의 시선은 문서의 왼쪽 상단에서 오른쪽 하단으로 이어진다.
ㄴ 이러한 시선의 이동을 참조하여 요소들을 배치할 것.

- 주제와 부주제만 강조되어도 멋진 디자인이다.
ㄴ 주제와 부주제 외에는 다 걷어내도 좋다는 뜻


비슷한 무드를 지닌 이미지들 모음


안 짜치는 디자인을 위한 미감을 키우기 위해서는

수많은 디자인들을 보고, 그것을 명명하고 분석하는 것이 필수적입니다.

슬라이드24.PNG 조형 요소 + 세련 무드


슬라이드25.PNG 코믹 (내 취향인가봐...)
슬라이드26.PNG 컬러감 + 깔끔 무드

창문 요소를 위해 글자를 왜곡화한 것은 아주 현명한 선택.

이러한 각 세부적인 요소들이 차이를 만듭니다.

슬라이드27.PNG 90s 코믹 감성 (내 취향인가봐...)

솔직히 "너를 마시고 싶다!"라는 글자가 코믹을 의도한 것인지는 모르겠습니다.

뭔가 진지해서 더 웃기는 거 같기도 하고...ㅋㅋㅋㅋㅋㅋㅋ

그냥 뭔가 이질적인 느낌들이 너무 혼란하게 웃기네옄ㅋㅋㅋ.


슬라이드28.PNG

정리하자면, 본질을 맞춤형으로 관통하는 (이게 제일 중요함)

우리 혹은 당신만의 독창적인 것

반복하여 보여주어라.


그 스타일을 완성하기 위해서는 요소들을 세분화하고

어울리는 것을 어울리도록 만들어야 한다.

그것을 얼마나 세심하게 구현해느냐- 그게 세련이다.



끝으로 영상하나 올리겠습니다.

이것만으로 당신의 미감은 200% 성장할 것입니다.

질문 및 자기만의 브랜딩/디자인 꿀팁 있으면 답글 달아주기!

위 문제 답변도 잊지말고 답변 남겨주기~

슬라이드31.PNG 들어주셔서 감사합니다란 뜻
keyword
매거진의 이전글얘네 뭐임?