최소한의 디자인
이것만 알아도 GUI 디자인 평가! 가능합니다.
'디자인' 이라고 하면 늘 다른 세계의 사람들의 영역으로 치부했었습니다. 하지만 직장을 다니면서 한글, 워드, 프리젠테이션 파일 등의 문서를 작성할때마다 막히는 부분이 '디자인' 이었습니다. 예전 직장 동료 중 디자인을 잘하는 분이 있었는데, 그분이 작성한 문서는 뭐랄까요? 일목요연하고 음... 뭔가 '간지'가 있었거든요. 참 부러웠습니다. 그 분에게 문서 작성하는 방법을 알려달라고 하면 '그냥', '그냥 하는건데 ... ' 라는 말만 돌아왔습니다. 똑같은 내용을 써도 저는 늘 보기 싫고 그분의 문서는 보기가 좋았습니다. 네, '보기 좋게 하는 것'.
물론 지금은 디자인이 '보기 좋게'만 하는 것이 아님을 알고 있습니다. 어떻게 보면 '소통하고 이해하고 행동하게 하는 것' 에 더 가까운 것 같아요. 뭐 예술의 영역으로 가면 더한 개념도 있겠지요. 아니 다른 시각으로 봐야할지도 모릅니다.
소프트웨어에도 디자인이 중요합니다. 보통 UI / UX 라고 얘기하면 디자이너의 영역이 크다고 할 수 있는데요. 기획자나 개발자도 비즈니스 담당자도 디자인을 어느 정도 알고 있으면 정말 일하기가 좋습니다. 설득하느라 시간과 감정을 소비하는 시간이 줄거든요. 뭐 어설프게 알면 더 힘들어질 수도 있겠습니다.
디자인을 잘 하려면 어떤 소양이 필요할까? 나름대로 연구하고 고민한 끝에 정리한 것이 아래의 두 가지였습니다. 실제로 그렇게 했더니 효과가 좋았습니다. 적어도 지금까지는요.
- 명료함과 미스터리
- 대비(Contrast), 반복(Repetition), 정렬(Alignment), 배치(Proximity)
우리는 혼자 사는 것이 아니라 타자(다른 사람들 ...)와 소통하면서 삽니다. 소통에 중요한 것 중에 하나가 나의 생각과 말하려는 것을 상대방에게 명확하게 이해하도록 전달하는 겁니다. 나의 마음을, 나의 생각을 명확하게 표현하는 것. 또 하나가 있습니다. 소통은 하고 싶은데 숨기고 싶은 겁니다. 뭐라고 얘기할까요? 상대방을 궁금하게 하는 것. 그리고 다가오게 하는 것. 앞에 말한 것은 직접적으로 뭔가를 전달하는 것이고 후자는 간접적 방법이라 할 수 있어요. 그래서 우리는 그 사이에서 왔다가 갔다가 합니다. 이것을 '칩 키드'라는 분은 '명료함'과 '미스터리'라는 키워드로 디자인의 한 끗 차이를 이야기 합니다. 디자인의 차이는 이 둘의 줄타기라고. 저도 전적으로 동의해서 지금 인용하고 있습니다.
하지만, 저는 '명료함', '미스터리'라는 개념적이고 추상적인 이야기보다는 구체적이고 실무적인 이야기를 하고 싶습니다. 그리고 '미스터리' 보다는 '명료함'을 가지고 얘기하고 싶은데요. 디자인을 모르는 사람이 실무에서 활용하면 좋은 것들을 이야기하고 싶어요. 바로 앞서 언급한 싸가지!(된소리로!) 대비, 반복, 정렬, 배치입니다. 이것들만 잘 이해하고 실행하면 정말 괜찮은 결과물이 나올 수 있고 누군가에게 조언까지 해줄 수 있다고 단언합니다. 실제로 제가 이 4가지 관점으로 결과물들을 평가하기도 하고 직접 만들기도 합니다. 그럼 하나하나 짚어볼까요?
첫번째, 대비입니다. 정확히 말하면 지면에 위치한 요소가 서로 비슷해지지않도록 만드는 것. 똑같은 것이 아니라면 아주 다르게 만드는 것. 쉽게 말하면 내가 강조하거나 전하고 싶은 것을 '팍 튈 수 있게' 만드는 것입니다. 과감함이 필요합니다.
두번째, 반복입니다. 시각 요소를 전체에 걸쳐 반복해서 통일성이나 일관성을 주는 것을 말합니다. 말하기에서는 강조하기 위해서 쓰이기도 합니다.
세번째는 정렬입니다. 도면이나 지면 위에 시각 요소들을 기준에 맞게 가지런하게 놓는 것을 말합니다. 줄을 잘 서면 뭔가 힘을 가진것처럼 보입니다. 북한의 열병식을 보시면 아실거에요.
마지막으로 배치입니다. 관련이 있는 시각 요소들은 가까이에 두어 어느 하나의 그룹을 이룰 수 있도록 하는 것입니다. 구분이나 분류하기가 쉽도록 말이죠.
위 4가지 요소를 각각 적용해 볼 수 있지만, 실제로는 이 4가지 요소를 모두 활용하는 경우가 대부분입니다. 복합적이죠. 아래 예시를 보세요. 아래 그림 문서는 Page라는 문서편집 프로그램의 템플릿입니다. 4가지 요소가 적절하게 활용된 사례입니다.
대비(빨강), 정렬(파랑), 반복(노랑), 배치(녹색)을 적용한 문서 예시1위 그림처럼 하나하나 뜯어보는 것도 중요하고 적절하게 혼합해서 사용하는 것도 중요합니다. 지름길은 없습니다. 이 4가지 관점으로 계속 연습해야 합니다. 추가로 좋은 사례들을 많이 접하고 분석해보는것도 추천합니다. 어느 정도 숙달되면 시각요소들을 가지고 하나의 스토리를 만들 수 있어요.
특정한 상황이 주어지면 전략에 맞게 '미스터리'의 접근법을 사용하는 것도 추천하고 싶습니다. 특히 예술적인 작품에 활용될 수 있다고 생각합니다. 아무래도 실무는 의사소통이 중요하기 때문에 '미스터리'보다 '명료함'에 가깝게 접근해서 말씀 드렸습니다. 시간이 된다면 '미스터리'함에 대해서도 얘기하는 것도 좋을 것 같습니다. 그 있잖아요. 길가다 포스터를 봤는데, 자꾸 생각나게 하는 것! 그것이 이 '미스터리'에 있지 않을까요?
마지막으로 아래에 참고도서를 적어두었습니다. 참고도서도 중요하지만 타이포그래피 수업이 있다면 오프라인 수업으로 꼭 들어보셨으면 좋겠어요. 저는 타이포그래피를 경험하기 이전과 이후의 세상이 많이 달라졌다고 생각합니다. 아까 '대비' 처럼 말입니다. 스티브 잡스도 타이포그래피의 중요성을 얘기했다고 하죠. 책이 좋을 수 있지만 빠르게 익히고 싶다면 실습이 있는 오프라인 수업을 찾아서 들어보시길 강력하게 추천합니다.
FYI.
#참고도서
- 디자이너가 아닌 사람들을 위한 디자인북 / 로빈 윌리암스
- 100, 모든 기획자 디자이너가 알아야할 사람에 대한 100가지 사실 / 수잔웨인쉔크
- 한끝차이 디자인법칙 / 칩 키드
- 텍스트와 타이포그래피 / 얀 미덴도르프
- 타이포 그래피 / 에밀 루더
- 공예문화 / 야나기 무네요시
- 매거진B / JOH
#참고사이트
- 애플 디자인 가이드: https://developer.apple.com/design/human-interface-guidelines/
- 구글 material 디자인 가이드: https://material.io
- 디자인학교: https://designerschool.net
