예쁜 디자인은 좋은 디자인인가?
매번 포스팅을 할 때마다 "UXer여 예쁨에 대한 집착을 버려라!" 라고 역설하는 나
의미없는 예쁨은 가라! 사용성만 남고! 디자인의 껍데기는 가라! 알맹이만 남고!
근데 사실 예쁜 게 나쁜 건 아니다. 누구나 똑같은 기능을 가지고 있더라도 예쁜 거랑 안 예쁜 거 있으면 예쁜 거 고르잖아요...?
그래서 오늘의 포스팅은 예쁨에 대한 것
예쁨이란 무엇인가?
아니 너무 철학적이니까
어떤 요소가 디자인을 '예쁘다'고 느끼게 만드는가?
에 대해 한번쯤 생각해보면 좋을 것 같다.
하우스 파티 초대장을 디자인한다고 생각해보자. 김소소씨는 하우스메이트와 함께 파티를 열어 친구들을 초대하고자 초대장을 준비한다. 마음에 드는 폰트를 골라서 쓱쓱 내용을 써내려가는 소소 씨. 그렇지만 남에게 보내기에는 영... 좋지 않다. 왜 좋지 않을까?
이런 초대장을 듣도보도 못 했기 때문에 당연히 안 좋다는 것 말고, 진지하게 이유를 생각해 보자. 일단은... 여백이라곤 없다. 초대장은 '언제, 어디서, 무슨 행사가 열리는지'를 한눈에 알아볼 수 있어야 하는데, 이건 어째 영 알아보기가 힘들다. (사실 일부러 더 알아보기 힘들게 이상한 데에서 띄우려고 했는데 내 국문학도의 DNA가 그것을 막아섰다)
이 초대장을 좀더 나은 초대장으로 만들기 위해서는 어떻게 해야 할까?
정보를 그룹핑(Grouping) 한 후 사이사이에 엔터를 쳐 본다.
파티 이름 / 파티 설명 / 날짜,시간,장소 / 덧붙이는 말
네 개의 그룹으로 정보를 분류하여 그룹 사이에 공백을 두자, 이제야 그나마 무슨 내용인지 알아볼 만하다.
공백은 디자인에 있어 아주 중요한 요소이다. 한 칸을 띄우고 작성된 정보는 새롭고, 중요한 정보라는 사인을 준다. 왜냐하면 눈에 띄니까. 공백 역시 디자인의 중요한 한 부분이라는 것이다. (수업에서 배운내용 마치 내가 가르치는것처럼하기) 여기까지만 마치고 지인들에게 보낼 수도 있겠지만, 소소 씨는 타이포그래피(Typography)를 좀더 활용해 보기로 한다.
근데 타이포그래피란 무엇인가
는 사실 잘 몰라서 이 포스팅 쓸려고 찾아봄
네이버 만화애니메이션사전ㅋㅋㅋ에 따르면 정의는 이러합니다. 물론 저 폰트 제가 꽤 좋아하지만서도 (공병각체가 사고 싶지만 살 여건이 안될 때 꿩 대신 닭... 대신 닭가슴살 통조림 정도로 쓸 수 있는 폰트임) 중요한 정보를 모두 필기체형 폰트로 기입하면 가독성이 떨어지는 것이 사실.
매우 비루하지만... 이렇게 2가지 폰트와 다양한 크기, 굵기를 활용하면 좀더 한눈에 보기 편한 초대장이 된다.
초대장 타이틀은 필기체로 사용하되 앞에 ★을 붙여 강조해주고, 파티에 대한 설명은 단정한 산세리프 서체를 사용해 크게 기입한다. 왜 날짜랑 장소보다 저게 크냐고? 이 파티에서 맥주 무한 제공은 그 무엇보다도 정말 엄청나게 핵중요한 사항이기 때문임. (엄격근엄) 맥주 무한 제공 안하면 아무도 파티 안 와. 안주는 님들이 고르세요 술은 제가 고른다. 날짜랑 장소가 더 중요하면 저걸 더 크게 만들어야 됩니다ㅋㅋㅋㅋ 하지만 날짜와 장소 역시 가독성이 좋은 폰트를 사용하고 위아래에 충분한 여백을 주어 중요성을 강조해 보았다.
이제 꽤나 멋진 초대장이 됐는데, 아직 뭔가 허전하긴 하다. 왜냐면
검정 일색의 초대장은 너무나 단조롭기 때문. 그래서 포인트 컬러로 주황색을 사용해 강조하고 싶은 부분을 칠해 주기로 한다. 타이틀, "맥주무한제공", 날짜와 시간, 그리고 참석 여부를 회신해 주어야 하는 날짜. 이 정도를 강조하고 나니 비로소 만족스러워져, 소소씨는 이 초대장을 지인들에게 카X오톡으로 전송한다.
누군가 이 포스트의 스크롤을 여기까지 내렸다면 아마 ...??? 그래서 어쩌란건가 싶을 것이다. 진자 뭐 어쩌란거임 유딩초딩한테 리디자인 시켜도 이 정도는 할 수 있음 이거 그림판 아니고 포토샵인 거 실화?? 이분 어도비 왜 샀대?
그 말인즉슨, 효율적이고 바람직한 타이포그래피/컬러 활용의 가이드라인을 모두가 어느 정도는 상식 선에서 알고 있다는 소리다. 엥? 상식선을 벗어나면 어떻게 되나고요?
이렇게 됨
왜요 타이포그래피 잘 활용했구만 ㅇ_"ㅇ이라고 화가 나신다면 당신은 이미 비상식인(?)
폰트 종류 무려 4개! 매립지뢰 같은 곳곳의 크기테러! 날짜와 장소를 보려면 현미경을 대야만 한다! 이 초대장에서 가장 중요한 정보는 정녕 보낸 사람(심지어 이름 아니고 별칭) 일동인가!
무조건 예뻐 보이겠다고 내가 좋아하는 폰트 다 때려 박으면 이렇게 됩니다.
그렇다면 이번엔 좀더 가볍고 익숙한 '컬러 활용의 잘못된 예'를 하나 들어보자.
디자이너를_고통스럽게_하는_디자인.jpg
아니 근데 좀 덜 구려 내가 원하는 만큼 구리질 않어
일단 다른 건 다 그렇다치고 ㅋㅋㅋ 날짜와 장소가 정말 가독성이 탁월하게 구린데... (만족) 정말 중요하다고 생각해서 그라데이션 넣었지만 실패하는 참혹한 현장입니다. 그리고 퍼플~마젠타 계열 색상을 너무 좋아하는 소소씨는 참석여부 회신메시지에 약간... 암호 같은 게 숨어있을 것만 같은 색상강조를 넣고 마는데 사실 의미라곤 없음.
이 모든 테러블 초대장의 공통점을 한마디로 말하라고 한다면, 아마 모두가 "못생겼다"라고 하지 않을까?
인간 보편의 미감이라는 것은 대개 불편한 부분을 용납하지 않는다. 그러니까, 우리가 예쁘다고 하는 것이 사실은 시선의 흐름, 눈의 편안함, 정보의 가시성 등 여러 가지 다양한 요인들을 고려해서 만들어진 디자인일 수 있다는 것임.
(사족) 저는 팀플을 n년 하면서 정보전달을 위한 ppt만 파왔기 때문에 이제 빠른 시간 안에 제법 양질의 발표용 프리젠테이션을 뽑아낼 수 있다고 생각하는데요, 피티깎는노인 하면서 깨달은 것은 ppt에서 예쁨과 정보 전달력이 그다지 양극단에 서 있지 않다는 것 (그러나 완전히 같은 방향도 아니기 때문에 중심을 잘 잡아야 한다는 것) 입니다
아래의 디자인 가이드들을 읽어보면, '예쁘다'와 '보기 편하다'가 거의 동의어이고, '보기 편한 것'과 '사용하기 편한 것' 사이의 거리가 생각보다 훨씬 가깝다는 사실을 알 수 있다. 머티리얼 디자인 읽고 헉 세상에 이런 것이... 하며 감동받으셨다구요? 일단 연락처 좀 알려주세요 같이 주접떨게
iOS 가이드라인
https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/
구글의 Material Design
Design
Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.
material.io
그리고 아래↓는 내가 구독하고 있는 유튜브 채널에서 예전에 올렸던 색상 이론 관련 영상.
색상에 대한 기본적인 이해가 좀 필요하다 싶으신 분(=나)들은 한번 보시면 괜찮을 것 같음
https://www.youtube.com/watch?v=AvgCkHrcj90
여러분(?) 진짜 웃긴 얘기 해드릴까여 끝까지 스크롤 내린 분만 볼 수 있는 웃긴썰
저 이거 포스팅 하기 전에 6장의 초대장을 미리 만들어두고 시작했는데 ㅋㅋㅋㅋㅋ 포스팅하면서 자꾸만 부족한 부분이 발견돼서 수정했어요 특히 테러블한 거 ㅋㅋㅋㅋㅋㅋㅋㅋ 아니 테러블하게 만들려니까 봐줄만하게 바꾸는 것보다 100배 어려움.. 시험에서 80점 받기보다 0점 받기가 천배 어려운거 아시져 아직도 0점 아니고 한 15점이어서 너무 고통스럽다고 나는 빵점짜리 디자인을 원 해 !
시간 나시면 빵점짜리 디자인 한번 도전해보세요 의외로 보편미감을 거스르기는 어렵답니다 (진짜임)
아무튼 예쁨에 대한 단상은 여기서 마무리
약간... 쫌 생산성 없는 포스팅이었던 것 같지만 아무튼 그러합니다. 2만
