brunch

You can make anything
by writing

C.S.Lewis

by 김자유 Feb 17. 2019

시니어 디자이너가 주니어에게 하는 조언 7가지


목차


1.명확성

2.움직이는 인터페이스

3.고집 부리기

4.피드백 시스템

5.메타포

6.일관성 있는 컨텍스트

7.방어적인 디자인

8.후기



2018년, Jimmy라는 사람이 있었다. 그는 Shmuckle이라는 회사의 디자이너였다. 그가 바라는 것은 오직, 언젠가 유명한 디자이너가 되는 것 뿐이었다. 그의 뮤즈이자 영감의 원천은 스티브 잡스였다. 잡스를 존경하면서, 그는 회사에서 항상 좋은 디자인에 대해 설파했다. 지미는 즐거움, 직관적인 디자인, 혁신에 대한 모든 것이었다. 그가 크리에이티브 블록(매너리즘)에 처하기 전까지는…


Jimmy는 회사에서 그의 경력에 도움이 되는 중요한 프로젝트를 맡고 있었다. 그의 임무는 그들의 제품의 메인 대시보드를 리디자인 하는 일이었다. 하지만 그는 적절한 인터페이스를 내놓지 못 했다. 백업 플랜으로, 그는 그가 좋아하는 디자인 비디오들을 싹 보고, 아티클을 읽고 팟캐스트를 들었다. 하지만 달라지는 건 없었다. 그는 여전히 어떻게 해야 할지 몰랐다.


운 좋게도, 회사의 시니어 디자이너 Sarah가 그 옆을 지나갔다. 그녀는 불쌍한 Jimmy가 괴로워하는 모습을 봤다. 그녀는 본인의 주니어 시절을 떠올리며 씩 웃었다. 지금의 그녀는 크리에이티브 블록을 뛰어넘을 수 있는 갖가지 트릭과 팁들을 경험하고 알고 있다. 


Sarah: Jimmy. 어제 새 디자인 시안 업데이트 안 했던데, 무슨 문제 있어?
 

Jimmy: 개선된 인터페이스를 디자인하고 있어. 사용하기 쉽고 통계도 잘 보여줘야 하고, 몇 가지 사용성 이슈도 해결해야 하는데, 잘 모르겠어… 좋은 건지 모르겠어. 유저 테스트도 해봤는데 몇몇은 좋다고 하고, 몇몇은 별로라고 하고, 몇몇은 바꿔야 한대. 어떻게 해야할지 모르겠어.


Sarah: 괜찮아! 기초가 적절하게 안 되어있을 때면 흔히 일어나는 일이야. 봐봐, 좋은 프로덕트를 디자인하기 위한 몇 가지 원칙을 알려줄게. 당연히 주술 같은 건 아냐. 막힐 때마다 적용해 봐.


Jimmy는 바로 노트와 펜을 꺼내들고, 크리스마스 선물을 기다리는 아이처럼 “그게 뭔데?”하고 물었다.

Sarah: 일단 밖으로 나가자. 책상 앞에 너무 오래 앉아있었으니까. 리프레시가 필요해.

Sarah는 커피를 들고 말했다. 


Sarah: 자, 들어 봐. 제품 제작이 완료되면 꼭 확인해야 할 중요한 원칙들이 있어. 디자인은 꼭 이것들을 포함해야 해.


1.명확성


Sarah: Jimmy, 하나만 기억해야 한다면 이거야. ‘어지러운 마음은 어지러운 프로덕트로 나타난다.’ 그러니 결과에 영향을 주고 싶지 않다면 항상 생각을 정리해. 디자인 의사 결정을 할 때, 네가 주의해야 하는 몇 가지가 있어.


비즈니스 목표, 고객의 문제 그리고 기능성이 디자인에 동기를 부여한다. 차례대로;

미적인 것 때문에 기능을 희생하지 말 것

다음 단계로 무엇을 할 것인지 항상 스스로 설명할 것

네거티브 스페이스, 컬러, 폰트, 그래픽, UI 요소 등 중요한 내용들은 밑줄 쳐둘 것

텍스트는 모든 사이즈에서 읽을 수 있을 것

아이콘은 정확하고 예리할 것

추가 사항은 적절하고 알아보기 힘들게 만들 것

유저가 직관적으로 본인이 뭘 해야 할지, 어디에 위치해 있는지 항상 알 수 있도록 할 것


<10 Small design mistakes we still make>

https://uxplanet.org/10-small-design-mistakes-we-still-make-1cd5f60bc708
 


모든 제품의 최종본은 디자인 단계에서 명확성(혹은 명확성의 결여된 부분)의 부산물이다. 명확한 의도는 명확한 결과물을 낳는다. -Massimo Viggnelli


Sarah: Massimo Viggnelli가 <The Vignelli Canon>에서 “혼란스럽고 복잡한 디자인은 항상 그것을 만든 사람에 대한 무언가를 이야기한다."고 말했던 게 기억 나. 혼란스럽고 복잡한 마음을 가진 사람이 만들었다는 뜻이지.


Jimmy는 나중의 영감을 위해 그녀의 말을 받아적었다.


2. 움직이는 인터페이스


Sarah: 이제, 이걸 기억해. 우리는 언제나 현재의 업무를 명확하게 하고 집중해야 하는 디지털 프로덕트를 디자인하잖아. 실사용 가능한 앱은 시기 적절한 화면을 보장함으로써 유저의 니즈를 반영해. 그리고 앱은 유저가 무엇을 하려고 하는지까지 확장되었지. 예를 들어, 유저가 문제를 해결하기 위해 네 앱을 켰는데 그에게 솔루션을 주지 못 한다면, 넌 안 좋은 선택지를 제공한 거야.


그녀는 잠깐 멈춰서 몇 초 쉰 뒤 그녀의 생각을 다시 말하기 시작했다.


Sarah: 봐봐, 우리가 해야 하는 것은 우리의 해결책이 적절한 유저에게, 적절한 타이밍에 적절한 맥락으로 닿도록 하는 거야. 물론 당연히, 이상적인 상태에 도달하기까지는 오랜 시간이 걸리겠지. 어떻게 도달하냐고? 계속 하는 거지, 뭐!


<How Not to Design a Product Like Everyone Else’s>

https://uxplanet.org/how-not-to-design-a-product-like-everyones-else-18b6c32b342


3.고집 부리기 


Sarah: 몇몇 디자이너와 개발자는 소프트웨어가 유연하고 유저의 모든 니즈에 맞출 수 있어야 한다고 말해. 하지만, Jimmy. 그건 개소리야. 심지어 이런 말도 있어.

모두를 만족시키려고 하는 것은 스트레스, 고통, 자원 낭비, 좌절을 만들어내는 레시피와도 같다. 그러니 사람들을 잃는 것을 두려워하지말고, 당신의 비전을 잃는 것을 두려워하라. -작자 미상 


Sarah: 위대하고 유용한 디지털 프로덕트는 항상 그것의 수용자에게 명확한 그림을 그려줘. 누가 진짜 유저일까? 이걸 항상 명심하고 그들의 니즈를 반영한 해결책을 개발해야 해. 위대한 디지털 프로덕트는 비전을 갖고 있어.


Sarah는 창문 옆에 기대어 지나가는 사람들을 지켜봤다.

Jimmy: 그럼 나머지 유저들은 어떻게 해?


Sarah: 나머지는 줄을 설 거야. 메인 유저를 만족시킨 다음에 그들에게 돌아가면 돼. 메인이랄는 건, 우리가 제품을 만드는 이유가 되는 사람들이야. 기억해, 그들이 네 비전을 좋아하지 않을까 걱정하지 마. 시장에는 그들을 만족시켜줄 수많은 비전들이 있어. 우리가 할 일은 우리만의 색깔을 찾는 거야. 


누군가 소프트웨어를 사용할 때, 그들은 단순히 기능만 보지 않는다. 그들은 접점을 찾는다. 비전을 찾는다. -Getting Real by 37Signals


4.피드백 시스템


Sarah: 다음 중요한 원칙은 피드백이야. 피드백은 행동을 유지하고 결과를 보여줘서 사람들에게 정보를 제공해.


탭할 때 인터렉티브 요소들은 잠깐 강조할 것

진행 인디케이터는 장기 실행 작업 상태를 줄 것

애니메이션과 사운드로 행동의 결과를 분명하게 알 수 있음


Jimmy. 너도 봤 듯 모든 디지털 세상이 이렇게 발전하고 있음에도 우린 여전히 인간적인 인터렉션 (휴먼 인터렉션)이 필요하다고 느껴. 우리의 몸(눈이나 촉각 센서)은 뇌로 신호를 보내기 위해 피드백을 느껴야 해. 이건 내가 언급한 첫 번째 포인트처럼 우리의 디자인이 스크린에서 일어나는 일에 대해 명확한 피드백을 줘야 한다는 걸 의미해. 그리고 사용자는 그걸 이해하려고 노력하면 안 돼. 


그러니 시간이 있을 땐 언제든지, 사람의 마음이 어떻게 작동하는지에 대한 책을 읽었으면 해. 그럼 역량도 강화 될거야.


Sarah가 회사를 돌아다니며 커피를 홀짝이며 말했다.


5.메타포

Sarah: 메타포- 내가 말하는 건 문학적인 비유가 아니고 비슷한 걸 말하는 거야.

Jimmy: Digital Shakespear처럼?

Sarah: 알다시피 사람들은 앱의 인터페이스와 행동이 익숙한 경험의 메타포일 때 더 빨리 학습해. 이 경험은 디지털이나 실제 세상에서 배울 수 있어.


메타포는 스크린에서 상호작용되기 때문에 잘 작동해. 그들은 그 밑에 있는 내용을 드러내기 위해 관점을 옮겨. 콘텐츠를 드래그하고 스와핑 하지. 사람들은 스위치를 토글 하고, 슬라이더를 움직이고, 피커 값을 스크롤 해. 그래서 항상 핵심 고객이 사용하는 다른 앱을 배워야 해. 그러면 비슷한 경험을 디자인할 수 있고, 어떤 기능을 없애거나, 불편하게 배우는 상황을 만들 수 있어.




6.일관성 있는 컨텍스트


Jimmy: 연습해보자. 예를 들어 메인 스크린에 달력이 있어. 가이드라고 생각해? 아니면 리스트라고 생각해?” 사라가 물었다. “흠.. 우린 가이드를 써. 더 간단하고 구조적일 거야. 맞아?


Sarah: 그건 사용자의 메인 목표에 달려있어. 가이드나 리스트 형 달력을 가지고 있어야 할까? 그건 목표가 무엇인지에 달려있어. 모든 페이지에 글로벌 내비게이션이 필요한가?


다시 말하지만, 컨텍스트에 따라 달라. 왜 컨텍스트가 일관성보다 훨씬 더 중요한지에 대한 이유야. 만약 문맥상 더 맞다면,  일관성이 없어도 다른 형태나 스타일을 가는 게 괜찮아. 일관된 것보다 정확한게 더 나아.


좋은 디자인은 적절한 상황에 맞는 것에 의한 제품이고, 시각적으로 뛰어나더라도 컨텍스트와 상관없는 걸 만드는 건 아니다. 훌륭한 디자인 솔루션은 항상 상황에 맞는 고려를 한다. - Massimo Vignelli


7.방어적인 디자인(defensive design) 


Jimmy: 방어적인 것의 의미가 뭐지?


Sarah: 다른 사람들이 직관적인 디자인(intuitive design)이라고 알고 있는 것이지.


Jimmy: 오! 스티브 잡스가 많이 얘기했었어.


Sarah: 그렇지… 그런데 직관적이라는 게 무엇인지 생각해본 적 있어?


Jimmy: 사용자의 행동을 예측하는 것? 그래서 행동하기 전에 니즈를 해결하는 것?


Sarah: 그렇기도 하고, 아니기도 해. 당신의 행동을 예측하는 게 아니라 상황이 잘못되고 있을 때를 위한 방어적인 디자인이야. 항상 일은 잘못되지. 아무리 디자인으로 신경 썼든, 얼마나 많이 연구에 투자했든지 간에 당신의 제품은 항상 백업 계획이 있어야 해. 방어적인 디자인은 어떤 문제가 일어나는 걸 항상 조심하는 것이야

나를 믿어, 만약 사용자가 부정적인 경험을 하면, 사용자들은 그걸 잊지 않을 거야.
 

Jimmy: 잘 모르겠는데..

Sarah: 안전하게 운전하는걸 예를 들어보자. 차를 운전할 때, 사고 날까 봐 항상 조심해 : 난폭한 운전자, 길 건너는 아이들, 다른 위험한 시나리오. 그래서 디자이너로서 UX를 망치지 않게 항상 수정할 수 있는지 지켜봐야 해. 훌륭한 방어적인 디자인은 고객의 경험을 깨거나 향상할 수 있기 때문이야.


 Sarah: 끝이야. 적은 게 있니?

Jimmy: 끝이라니? 더 있지 않아?

Sarah: 물론 많이 있지. 그리고 모든 사람이나 회사는 그들만의 디자인 원칙을 가지고 있어. 하지만 멋진 디자인을 위해 모든 디자인 원칙을 알 필요는 없어. 이 기본으로 좋은 시작이 되기 충분해. 그리고 만약 그것들을 사용하면, 넌 이미 다른 사람보다 나은 거야. 다른 디자인 원칙은 시간과 인내를 가지면 알게 될 거야. 이제 다시 일하러 가. 


8.후기


물론 우리가 사용하는 훨씬 더 많은 원칙들이 있지만 문제는 여전히 많은 사람들이 이걸 사용하지 않는다는 것이다. 그건 주로 중요하지 않은 업무와 목표를 우선시해서 발생한다. 우린 항상 우리 제품과 사용자에 맞는 적절한 균형을 찾아야 한다. 


참조

Getting Real by 37 Signals

The Vignelli Canon by Massimo Vignelli

 

난 Laroche.fm라는 팟캐스트를 진행하고 있다. 만약 디자인과 비즈니스에 관심이 있다면, 들어보면 좋겠다. 그리고 나의 새로운 아티클, 읽은 목록, 팟케스트 에피소드에 대한 업데이트를 받고 싶다면 My Weekly Newsletter에 가입하시길.



저자 Eugen Eşanu
원문 링크: https://medium.com/@eugenesanu/7-basic-design-principles-we-forget-about-8f5c15d4b527
번역: REASIGN
문의reasign.newsletter@gmail.com

*무단 전재 및 재배포 금지(링크 공유는 가능)



해외 디자인 아티클을 한글판으로 편하게 받아보세요!

읽는 디자인, <디독D.dok>(구:REASIGN) 구독링크: http://bit.ly/2FNQNpv


브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari