brunch

라이킷 84 댓글 3

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 헤이그래픽스ㅣHeigraphics Feb 20. 2022

5년 차 디자이너 : 웹 포트폴리오 리뉴얼 제작기(2)

EP.02 : 디자인

지난번 나의 퍼스널 브랜딩 기획 단계를 바탕으로 웹 포트폴리오의 Main 페이지 디자인을 시작했다. 여기서 잠깐! 나의 개인적인 의견일 수도 있으나, 나는 항상 나무 하나하나를 설계하기 전에 숲을 어떻게 구성할지 구조를 먼저 설계한다. 왜냐하면 큰 숲의 골자를 정하기 전에 나무를 만들었을 때, 최종적으로 전체 숲의 큰 생태계 흐름은 무너지게 되어있다. 결국 디자인의 통일성과 균형이 중요하다는 말을 하고 싶었다. 디자인의 통일성이 무너지는 순간 내가 표현하고 전달하고 싶은 ‘무언가'는 사용자 혹은 소비자에게 올바르게 도달할 수 없다.

누구나 오해를 받는 건 싫어하지 않는가? 나도 마찬가지다. 내가 전달하려는 나의 의도와 디자인들이 나를 필요로 하는 모두에게 더도 말고 덜도 말고 올바르게 도달하길 원한다. 그래서 나는 큰 틀의 설계를 시작해 본다.

큰 골자(=디자인 시스템)를 짜기 위해서는 어떤 게 필요할까?

Color System 컬러 시스템

Typography 폰트

Wireframe 와이어프레임(= 레이아웃)

이미지 출처 : 디자인 로그 / velog.io/@suzypark

나는 보통 이렇게 3가지는 기본적으로 필요하다고 생각한다. 그리고 프로젝트의 성격에 따라 더 추가되거나 변형될 수 있다. 물론 나의 방법이고 생각이니, 꼭 이게 정답이라고 단정 짓진 않았으면 한다. 각자의 방법과 이론이 있을 테니까. 다시 돌아와서, 컬러 시스템, 폰트, 와이어 프레임 혹은 레이아웃만 통일하게 가져가도 전체적인 브랜드의 톤 앤 매너를 잘! 유지할 수 있다. 결국 브랜드의 톤 앤 매너를 잘 유지한다는 것은 브랜드가 얘기하고자 하는 바를 시각적으로 잘 전달하고 있다는 뜻이다.

나의 글을 봐주시는 디자이너 분들이나 혹은 이 글을 보지 않는 다른 디자이너분들 중 나의 의견에 동의를 못하시는 분들도 있을 것이다.

“내가 쓰고 싶은 컬러 다 쓸 거야!”

“ 내가 쓰고 싶은 폰트 다 가져와야지!”

“그냥 꽉꽉 채워 넣자! 다다익선! ” 등등 여러 경우가 있을 것이다. 절대 나쁘다는 게 아니다. 근데 이 말은 꼭 드리고 싶다. 1-2년 차인 나를 돌아봤을 때, 나 역시 마찬가지였다. 내가 예쁘다고 생각한 모든 요소들을 다 가져와서 다 사용하고 다 적용해 보고 싶었다.

근데 그런 시행착오를 겪으면서 느꼈던 건 ‘덜어냄'의 중요성이었다. 때론 절제한 컬러의 사용이, 혹은 적절한 여백의 사용이, 더하여 알맞은 폰트의 사용이 서비스의 목적을 좀 더 명확히 표현해 주기도 한다. 아니 명확하게 한다. 결국 ‘과함'은 본질을 흐릴 수도 있다는 것을 명심했으면 좋겠다.

일단 나의 디자인 시스템 설계를 시작하겠다.

STEP.01 : 컬러 시스템

디자인 시스템의 기본 구성요소는 색상이다. 어떠한 이미지와 의미를 동반하며 그만큼 브랜드 메시지를 잘 전달할 수 있는 직관적인 요소이다.

Primary color : hei white

화이트는 컬러 스펙트럼 내의 모든 색상의 균등한 밸런스를 포함하면서, 모든 색상이 긍정적이고 부정적인 경향 두 가지를 다 가지고 있다. 즉, 가장 기본적인 특징은 균형이다.

Secondary color : hei blue

파란색은 신뢰감과 안정감을 주는 색이며 또한 솔직함을 나타낸다. 헤이 그래픽스의 디자인은 한정적인 디자인을 하지 않는다. 하지만 안정적인 룩앤필의 디자인을 지향하고 추구한다.

미니멀리즘 즉, 본질에 충실한 디자인을 지향한다는 메시지를 잘 전달할 수 있는 컬러 시스템이라고 말하고 싶다.

STEP.02 : 폰트

서체는 사용자들에게 브랜드의 이야기를 전달하는 역할을 한다. 올바른 서체의 일관된 사용은 강력한 브랜드의 성격을 만들기도 한다. 다양한 무게의 서체 정보의 위계 등 타이포그래피의 올바른 활용은 브랜드를 보다 논리적이고 믿을 수 있는 브랜드로 만들어 준다. 그렇기 때문에 목적과 활용에 따른 올바른 서체의 선택이 필요하다. 나는 개인적으로 용도별로 3가지 정도 선택하여 사용한다.

Title font

화려해도 된다. (그렇다고 자기주장이 너어어어무 센 친구들은 자제해 주길 바라면서~) 타이틀은 워낙 크고 글자의 수가 다른 섹션에 비해 적기 때문에 웬만하면 가독성이 좋을 수밖에 없다. 물론 취향의 차이가 있겠지만 타이틀 폰트만큼은 자신의 취향이 깃든, 기교 있는 폰트를 선택해도 무방할 것 같다. 그래서 나는 아래의 폰트 타입 페이스를 선택하였다.

Font : cirrus cumulus-master

나는 사물의 기본적인 형태를 표현하는 기하학적인 도형을 응용한 디자인을 좋아한다. 개인의 취향이다. 그래서 브랜드 디자인에 더 매력을 느끼는 이유일지도 모른다. cirrus cumulus 폰트를 선택한 건 지오메트릭 한 디자인에 매력을 느꼈고 헤이그래픽스라는 브랜드 자체를 잘 표현할 수 있을 것 같아서 선택했다.

Subject font

이제 각 섹션의 주제를 시각적으로 전달해 줄 폰트를 선택해야 한다. 섹션의 주제를 전달해야 하는 만큼 가독성은 좋아야 하며 Description 폰트와의 시각적 밸런스가 잘 이루어져야 한다.

일단 세 리프와 산세리프 중 산세리프를 선택했다. 그리고 여러 산세리프체 중 그로테스크를 선택하였다. 그로테스크체는 19세기 - 20세기 초에 탄생한 서체이며 다소 단단하고 굵은 디자인으로 제목에 적합한 것이 특징이다. 그리고 다른 산세리프체들과는 다르게 세리프의 클래식함을 가지고 있다는 게 크게 매력적이다.

Font : Sporting Grotesque

하지만 개성이 있는 만큼 쉽게 질릴 수 있으니 그 점 감안하길 바란다. 나도 언제 질려 바꿀지도 모를 일이다...

Description font

취향을 전부 덜어내자. 주제에 관련된 설명을 표현해야 되는 만큼 가독성이 매우 매우 매우 중요하다. “누가 설명까지 읽겠어? 대충 제목만 보고 넘기겠지. 자간이고 행간이고 누가 알아주겠어~” 그건 당신의 생각이다. 나의 글 혹은 서비스의 설명까지 도달해 준 사용자에게 ‘가독성의 시련’을 준다는 것은 다시 집으로 돌려보내는 일이다. 설명까지 도달했다는 뜻은 나에게 혹은 내가 만든 서비스에 관심이 있고 함께하고 싶다는 것이다. 당신은 그 성의를 무시한 것이나 마찬가지다.

또한 나는 자간과 행간이 폰트의 선택만큼 중요하다고 생각한다. 물론 정확한 답은 없지만 가독성이 좋은 최적의 수준은 유지해야 한다. 이렇게 생각하면 좋을 것 같다. 우리는 책이나 신문을 볼 때 행간이 왜 거슬리다고 생각하지 않을까? 그 이유는 바로 하나다. 적당한 간격의 범위, 즉 우리 눈이 안정적으로 인식하는 그 범위를 유지하고 있기 때문이다.

꼭 화려하고 주목받아야 디자인이 아니다.
거슬리지 않는 것이 가장 좋은 디자인이다.

그래서 Description 폰트는 한글 폰트와 영문 폰트 두 가지를 선택했다. 여러분들도 아시겠지만 보통 외국에서 만든 영문 폰트는 한글이 호환되지 않는다. 그래서 2가지를 선택하여 사용하기로 했다.

ENG font

Font : hk-grotesk

KOR font

Font : 87mm 일상체

STEP.02 : 와이어프레임

디자인 입시생이라면 다들 이 과정이 익숙할 것이다. 도화지에 채색을 하기 전 연필로 스케치를 뜬다. 웹 디자인뿐만 아니라 모든 디자인 분야에 적용되는 과정이라고 생각한다. 나 또한 뮤지션들의 앨범 커버를 위해 수십 장의 스케치를 뜬다. 결국 웹 디자인을 본격적으로 진행하기 전에 스케치 단계가 필요하다. 와이어 프레임이다. 모노톤을 기반으로 기본 도형과 라인을 활용하여 콘텐츠들의 위치를 정하는 것이다.

내부 콘텐츠들의 위치를 러프하게 정하다 보면 전체적인 큰 그림이 보일 것이다. 그러면 그 큰 그림 위에 브랜드의 색을 입혀나가면 된다. 나는 개인적으로 피그마(Figma)를 이용해서 와이어 프레임을 그리는 게 편해서 피그마(Figma)로 작업한 와이어 프레임을 공유한다. 참고로 와이어 프레임을 어떻게 그려야 하고 무슨 색으로 해야 하고... 그런 정의는 없다. 본인이 알아보기 쉽게 최대한 간단하게 작업하면 된다.

Web renewal : wireframe

STEP.04 : 디자인

Navigator

현 웹사이트는 작품 위주의 메뉴 구성을 가지고 있다. 그리고 종류가 많다. 어쩌면 큰 카테고리 안에 있어야 할 항목들인데 밖으로 분산된 느낌을 지울 수 없다. 또한 작품 위주의 구성이다 보니 ‘헤이그래픽스'에 대한 정보가 다소 부족해 보인다.

어쩌면 내 작품을 방문자에게 제공하기 전에 나에 대한 정보를 안내하고 소개하는 것이 먼저였을 것이다. 기본이 중요한 것처럼. 그래서 메뉴를 about / work / contact로 구성하여 이전보다 정리된 형태로 진행한다.

Web renewal : navigator / main art

Slogan

이번 웹 사이트 리뉴얼의 목적은 ‘나다움'을 담아내는 것. 그것을 대중들에게 소개하는 것이다. 그래서 내가 디자인을 대하는 자세 혹은 이념을 꼭 넣고 싶었다. 내가 어떤 생각을 하면서 디자인을 하는지 솔직하게 보여줘야 서로(회사 ↔ 나) 핏을 오해 없이 맞출 수 있다.

Web renewal : slogan

Web renewal : art

Work

내가 어떤 디자인을 할 수 있는지 분류하고 싶었다. 나는 단순히 2D 디자이너가 아니다. 2D/3D는 그저 표현 방법일 뿐이다. 나는 BX디자이너다. 그렇다면 BX디자이너로서 나는 어떤 디자인을 할 수 있다고 명확하게 말할 수 있는가.

Web renewal : work

Brand Identity / NFT / Package / Album / Poster 이렇게 크게 5가지로 분류했다. 아무래도 엔터테인먼트 업계에서 디자인 활동을 하다 보니 album과 poster 항목이 특이하게 보일 수도 있다. 하지만 내 특이한 이력이 나에게는 장점이다.

my narrative

보통 career라는 표현을 많이 쓴다. 아무래도 경력 기술서이니까 그렇다. 경력은 내가 겪어 지내 온 여러 가지 일을 뜻한다. 결국 헤이그래픽스라는 이야기의 중심이며 서사라고 생각한다. 그래서 나는 career를 조금 다르게 narrative로 표현했다. 조금은 딱딱할법한 부분을 감성적으로 전달하고 싶었다.

Web renewal : my narrative

Footer

Button Design

버튼 디자인에도 마우스 호버와 클릭 부분에 secondary color를 적용하여 브랜드의 정체성을 녹여 전체적인 통일성을 유지했다.

정말 긴 글을 끝까지 봐주셔서 감사합니다. 이렇게 요점만 간단히(?) 글로 옮겨 적었지만 작업이 생각보다 정말 많이 오래 걸렸고 진행하고 엎어지고의 반복을 통해 지금의 아웃풋이 나올 수 있었다. 지금 페이지별로 크롭핑된 이미지라 다소 와닿지 않을 수 있다. 테스트링크를 공유할까 생각해봤지만, 아직 작업의 과정이라 공유가 어려울 것 같다.

그리고 WIX로 작업하는 게 생각보다 정말 쉽지 않다. 이것도 나중에 아주 심도 있게 리뷰를 하려고 한다. 코딩을 못하는 나로서는 최선의 방법이기에. 하여튼! 현재 이렇게 Main page를 진행했고 이제 about page를 진행할 예정이다. 다음 편에서는 기획과 디자인 시스템을 바탕으로 통일성 있는 about page 디자인 작업기를 공유하려 한다.