brunch

You can make anything
by writing

- C.S.Lewis -

by 박창선 Apr 05. 2019

[제작기]보여줄 것만 보여주는 회사소개서

깔끔하다...라는 아이는 어느 집 자식일까


놀랍게도 대다수의 클라이언트 분들이 아주 공통적으로 원하는 코드가 있었습니다. 


'깔끔하고 심플한 디자인!'


깔끔한 녀석은 어떻게 만들어지나.... 하고 한참을 고민해보았습니다. 사람들은 무엇을 깔끔해하나.... 그냥 아무것도 없으면 깔끔해지는걸까? 음 그건 아니었습니다. 흰 바탕에 맑은고딕으로 마구 써진 장표를 깔끔하다고 하진 않으니까요.


또는 정렬만 맞으면 되는걸까... 위계가 잘 맞으면 되는걸까... 고민을 해보니 '심플' 이라는 느낌은 굉장히 복합적인 레이아웃의 미묘함에서 비롯된다는 걸 알게 되었습니다. 결과물이 심플하지, 만드는 과정은 심플하지 않더라구요.


몇 가지 만들면서 느낀 것들을 좀 얘기해보려고 합니당.





01

잘 만든 

베이스



우선 흰바탕에 대한 얘길 해볼께요. 흰 바탕은 옳습니다. 옳긴한데 마냥 희게만 만드는 게 장땡은 아니더라구요. 게슈탈트 이론에서도 말하듯 사람은 배경과 전경을 한꺼번에 봐요. 이 때 '흰 배경 = 없다' 라고 느끼게 되면 요소들이 둥실둥실 떠다니는 것처럼 보입니다. 불안해져요. 


흰색이 나쁘다는 얘긴 아닙니다. 흰 배경이어도 요소들이 잘 달라붙어있는 디자인들이 충분히 많거든요. 차이는 '구성' 에서 오는 것 같아요. 흰 배경을 '배경이다!' 라고 느낄 수 있게 만들어줘야 하죠. 공간을 구성하는 건 3가지 요소가 있습니다.



영역과 무게와, 거리

각 요소들이 차지하고 있는 영역. 그러니까 너는 56평 아파트, 나는 7평원룸..이렇게 각자의 영역이 정해지고 영역은 곧 권력관계를 만들어요. 영역은 심리적인 부분을 건드려요. 명품관 가방들이 보석조각마냥 진열장 하나를 독차지 하고 있는 것과 비슷한 원리랄까요. 차지하는 영역이 클수록 집중도와 의미가 커지거든요. 


컬러나 음영은 무게감을 만들어요. 컬러가 들어간 쪽은 확실히 무겁고, 검은바탕이 있는 쪽도 무거운 느낌입니다. 무겁고 가벼움은 심미적인 부분을 크게 건드려요. 균형을 일부러 깨뜨려서 역동감이나 불안감을 의도적으로 부여할 수있습니다. 반대로 적절한 균형분배로 차분하고 느린 시선을 만들 수도 있어요.


거리는 각 요소간의 관계를 의미해요. 우리는 종종 물리적 거리로 관계를 규정해요. 친구다. 애인이다. 썸이다. 부모의 원수 등.. 다양한 관계의 거리를 떠올려보세요. 부모의 원수는 늘 수 년 만에 만날 만큼 멀리 떨어져있고, 애인은 종종 마이너스의 거리를 만들기도 하죠(오버레이) 이처럼 요소끼리의 거리감. 또는 외곽선으로부터의 거리감 등등이 연결과 단절을 만들어내요. 일종의 리듬감이랄까요.



02

보여주고

싶은 것


위 3가지의 요소를 잘 정돈해보았어요. 영역을 구분하고 컬러를 잡고, 밝기를 규정했습니당. 그리드를 만들고, 그 위에 레이아웃을 짜면서 관계를 잡아보았어요. 이 때 관계라는 건...단순히 이론적인 거리와 수치에 집중하기 보다는 그 논리관계를 따져보는 게 더 중요한 것 같아요.



무엇을 보여주고 

싶은지가 중요해요.


요소가 많아도 

결국 보여주고자 하는 것은 

하나거든요. 



왼쪽엔 컬러로 적절한 무게를 주고, 오른쪽은 볼드 폰트로 무게를 주었어요. 이미지에 먼저 시선이 가지만, 이내 시선은 텍스트로 향할 거에요. 그러면서 대제목을 먼저 읽게 될거고... 그 다음 중제목, 본문볼드, 본문라이트...순으로 시선이 내려가게끔 해보았어요. 최초시선은 그리 오래 머물지 않으니, 그 다음 어딘가에 휴게소를 만들어주는 게 중요하더라구요.


'보여주고 싶은' 핵심이 있어야 하는 곳이죠. 

무작정 크게 펑! 놔둔다고 '오냐 그래 널 봐주마..' 라고 하진 않더라구요.


이것만 봐라

그래서 이런 식의 포인트를 잡아보았어요.

우린 다 잘하고 있다! 라는 의미니까 수치에 초점을 맞추었어요. 무엇이 플러스 되는지는 돋보기를 대고 보든, 정독을 하든 궁금한 사람이 알아서 할 일이다..라는 쿨내도 나네요. 이 장표에서 중요한 건 '뭔가 계속 증가하고 있어!' 라는 이미지를 구축하는 것이니까요.



여긴 텍스트가 중요했어요. 우측의 이미지는 사실 별로 중요하지 않죠. 그래서 텍스트에 무게감을 싣고 나머지 설명텍스트는 확 죽여놓은 상태에요. 



나머지 자료는 중요하지 않다. 14년만 봐라! 라는 쿨함을 표현했어요. x,y축에 대한 설명도 없어요. 바로 이런 카리스마에 클라이언트님들이 뻑이 가고 그래요. 쩌렀다 진짜. 그래프가 의미하는 건 '증가/감소' 둘 중 하나일 뿐이거든요. 올랐는지 떨어졌는지. 그리고 증감폭이 어느정도 수준인지를 시각화시켜주는 게 주목적이었답니다. 때문에 각 장표의 목적이 정확히 무엇인지..그걸 달성하기 위해서 어떤 데이터가 필요한 지를 먼저 체크해보았어요. (구체적인 수치자료는 엑셀파일로 어펜딕스로 빼서 별도파일로 만들었어요.)



그래프도 마찬가지. 그래프에서도 나머지 내용은 다 거들뿐, 빨간색만 봐줘..라는 게 포인트였습니다. 표는 그래프와 달리 증감이 한 눈에 보이지 않으니 일일이 찝어주고 시각자극을 줘야 했어요. 어딜 봐야 할 지 친절히 콕 찝어주는 츤데레적인 디자인이었습니다.




잘 분할된 베이스는 매우 중요해요. 이 땐 좀 더 정량적인 기준을 많이 따르는 편이에요. 하지만 요소를 뿌리고 정돈하는 작업을 할 때 가장 중요하게 생각하는 건 논리관계에요 :) 이 때 자잘자잘한 요소들이 눈을 가리면..핵심논리를 보기가 좀 어려워지더라구요. 뭔말이지...싶기도 하고. 그래서 쓸데없는 것들을 하나하나 지워나가면서 중심이 되는 요소를 찾는 것을 중요하게 생각한답니다.







*위 시안은 애프터모멘트에서 제작했던 지난 결과물을 바탕으로 재구성한 시안입니다 :) 원래 시안엔 여러가지 프라이빗한 대외비 등이 가득해서..ㅎㅎ 실제 시안이미지를 쓸 순 없더라구요. 참고바랍니당!~




매거진 선택

키워드 선택 0 / 3 0
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari