버려지는 디자인, 통과되는 디자인 웹&앱 디자인 - 신승희

내가 회사에서 상사에게 제일 자주 하는 말이 뭘까 생각해보면 이것이다.

 

팀장님, 컨폼 부탁드려요:)

 

컨폼의 결과는 수정 그리고 수정이다. 디자인 욕심이 많으신 팀장님은 가장 최선의 것을 뽑아내길 원하시고 계속 되는 수정 끝에 불필요한 디자인은 버려지고 하나의 디자인만 남아 통과된다. 글 간격, 사진 컨텐츠 정도만 수정하면 될때가 있는 반면, 디자인 방향 자체를 바꿔야 할 때는 처음부터 다시 해야한다. 

디자이너로 일한다면, 컨폼은 뗄레야 뗄 수 없는 사이고 여러가지 버전이 만들어지는 것도 피할 수 없다. 컨폼 과정에서 왜 버려지고 왜 통과 됐는지 생각할 겨룰도 없이 팀장님이 말한대로 수정할 때가 있다. 이 책은 편집디자인이나 웹&앱 디자인 전공이 아닌 나 같은 사람에게 유용한 책이다. 한장 한장을 넘기면서 ‘아 그 때 그래서 그 디자인이 버려졌구나’ 하는 생각들이 스쳐지나갔다. 하드 밖으로 나가지 못하고 휴지통에 던져지는 나의 디자인들이 버려진 이유가 있었다. 읽은 거 적용하면서 통과되는 디자인을 많이 하길 바래본다.

​

 

​그리드 ;

그리드로 화면에 리듬감을 만들어라

---

① 자연스러운 리듬감

화면에 리듬감을 부여한다는 것은 강조하는 디자인과 덜 강조하는 디자인을 조화롭게 구성하는 것을 말합니다. ‘강-약-중강-약’으로 디자인의 강도를 조절하며 리듬감을 부여하면 고객에게 호감을 불러일으킵니다. 또한 시선을 매끄럽게 유도하며 화면에 좀 더 주의를 기울이게 하고, 자연스러운 변화를 적용한 시각적인 흐름은 경쾌한 리듬감을 만듭니다.

​

② 여백의 미

화면의 리듬감은 모듈의 넓이, 글자의 크기와 굵기, 글자 색상과 배경 색상의 조화로 이루어집니다. 그렇다면 단락을 나누기 위해 사용한 것은 무엇일까요? 여백입니다. 여백에 적절한 흐름을 만들어 숨통을 틔우면 디자인이 한층 새로워집니다.

 

 

​

타이포그래피 ;

속삭이는 글자, 크게 외치는 글자

---

① 폰트의 수는 4개 이하로 사용한다.

서체의 수를 최소한으로 유지하고 웹 사이트 전반에 걸쳐 동일하게 적용해야 합니다. 한번에 많은 스타일의 서체를 사용하면 전문성이 떨어지며 레이아웃이 흐트러져 보입니다. 본문용 서체는 시스템 서체나 산세리프 계열을 지정하는 것이 좋습니다.

제목용 몰입용 서체는 브랜드 이미지와 조화롭고 포인트가 될만한 서체 1~2종을 제한하여 지정합니다. 영문을 표현할 때는 영문 전용 서체를 사용하는 것이 좋습니다.

​

② 다양한 크기에서도 잘 보이고 폰트 패밀리가 있는 서체를 선택한다.

​

 

 

 

타이포그래피 ;

이야기의 리듬감을 확인하라

---

① 중요한 것과 덜 중요한 것

모든 것을 강조하는 것은 되려 어떤 것도 강조되지 않는 것과도 같습니다. 모든 이야기가 시끄럽게 큰소리로 외치는 것은 시끄러운 시장과도 같습니다. 정보의 중요성은 상대적입니다. ‘상대적으로’ 덜 중요한 것의 목소리를 낮춰보세요.

얇고, 작고, 좁게 만들면 비로소 중요한 이야기가 진짜 중요하게 여겨질 수 있습니다.

​

② 과감한 전달

이 사이트에서 얻을 수 있는 실익이 무엇인지 과감하게 알리세요.

​

 

 

그래픽 ;

몸짓 언어로 대화하듯

시각 언어로 대화하라

 

---

​

시각적요소

웹사이트도 미술 작품과 마찬가지로 멀리 떨어져서 보거나

눈을 게슴츠레 뜨고 보면 조형 요소와 그래픽 원리,

심미적 아름다움을 찾아 볼 수 있습니다.

점, 선, 면으로 이뤄진 형이 아름다운가?

여유로움을 느낄 공간이 있는가?

불균형 속의 균형이 있는가?

시각적 리듬이 있고 서로 조화로운가?

중요한 부분이 강하게 표현 되었는가?

 

 

 

UX 디자인 이론 ;

사용자와 함께 디자인하라

---

사용자의 만족과 브랜드 충성도는 제품, 서비스가 제공하는 가치에 더해 독특하고 감성적인 기억을 통해서 발생합니다. 오래도록 기억되는 만족감 높은 경험은 비즈니스의 성공을 불러옵니다. 사람을 이해하여 직간접적으로 느끼고 생각하는 지각과 반응, 행동 등 총체적인 ‘사용자 경험’을 디자인하여 최종으로 사람을 진실로 배려하는 것이 목표입니다.

 

​

사용자경험의 가치

제품과 서비스를 사용하여 상호작용을 통해 얻은 만족감과 기억은 상품의 특징으로 내재화됩니다. 모든사람이 동일하게 느끼는 것이 아니라 지극히 주관적이기 때문에 어떤 지각 반으이 있는지 디자이너는 사용자 의견에 귀기울여야 합니다. 사용자와 직접 대면하는 접점에 있는 UI를 유용하고 편리하게 디자인하여, 웹 사이트에 대한 총체적인 경험이 만족스럽도록 UX, 즉 사용자 경험에 가치를 두고 관리해야 합니다. UX는 인터랙션, 사용성, 정보의 구조와 인간 공학까지 여러 분야를 총괄하면서도 명확한 영역이 없으며, 평가에 대해서도 객관적으로 입증할 수 없는 것이 사실입니다. 결국 사용자 경험은 사용자에게 귀속된 개념으로 상품에 내재되어 있는 것이 아닙니다.

​

​

페르소나의 공감대 형성

사용자의 감정을 분석하는 것에서 나아가 인간 이해의 관점으로 바라보면 사용자가 경험하고 느낀 것이 무엇인지 이해할 수 있습니다. 가상의 인물, 즉 ‘페르소나’를 설정하고 인간으로서 완전히 ‘공감’할 때, 비로소 그 경험을 디자인 할 수 있습니다. 페르소나를 만드는 이유는 사용자에게 세부적으로 집중하기 위해서 입니다. 특정고객이 무엇을 좋아하고 어떻게 이용하는지 구체적으로 떠올리며 그들을 만족시켜 보세요. 백만 명을 만족스럽게 하기는 어려워도 몇 명의 공감대를 맞추는 것은 쉽습니다.

 

​

사용자스토리

설정한 페르소나가 서비스를 사용한다고 가정하고, 이 때 일어날 수 있는 일들을 이야기 형식으로 만드는 것이 ‘사용자스토리(User Story/Storyboard)’입니다. 고객은 상품을 구매하는 것이 아니라 상품에 담긴 경험과 스토리를 사는 것이기 때문입니다.

 

​

​

​

​

8단계 디자인메서드

---

페르소나를 분석하여

①’사용자의 열망’을 파악하고

②’메시지’에서 사용자에게 열망에 대한해결점을 제시합니다. 사용자는 이 상품을 찾기 위해 검색창에 특정

③’검색 키워드’를 예상해보고, 검색결과에서 한마디로 표현할 수 있는 우리의

④‘키워드’가 무엇인지 생각하고

⑤’키워드’를 이미지스케일에 대조하면 단어가 갖는 통계적인

⑥’색상’으로 선정할 수 있습니다.

⑦’혜택 및 자랑거리’는 이 상품을 통해

⑤’장애물’을 어떻게 해결하고 사용자가 어떤 혜택을 가져갈 수 있는지 적습니다. 한마디로 주변에 자랑거리를 만드는 것입니다. 최종으로 이 모든 것을 표현할 수 있는

⑧’메타포’가 탄생합니다.