brunch

매거진 디자인 뉴스레터 디독

라이킷 68 댓글 2

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 김자유 Feb 07. 2020

디자인을 카피하는 것이 위험한 이유

*본 글은 디자인 뉴스레터 디독에서 발행한 글입니다.

해외 디자인 아티클 번역 뉴스레터 '디독' 구독링크: http://bit.ly/2FNQNpv

디독

page.stibee.com

누구나 디자인 영감을 받으려고 구글, 아마존, 애플같은 테크 분야에서 잘나가는 기업들을 참고한다. 이런 기업들은 분명 성공한 기업이고, 소비자들에게 유명하다는 건 명백하다. 그런데 같은 유형의 디자인 문제에서 그 회사들의 해결책을 그대로 가져와 사용하면 안되는 이유는 무엇일까?

사실 문제를 해결하는 방법에 대한 영감을 얻기 위해 속한 산업의(업계) 주요 기업들을 참고하는 건 좋은 생각이다. 하지만 다른 대기업에서 먼저 했다는 이유로 맹목적으로 디자인을 베끼는 것은 좋지 않다. 대기업은 별도의 브랜드 컨텍스트(brand context)를 활용해 운영되기도 하고, 그 기업이 성공했다고해서 그 회사의 디자인이 모두 좋은 디자인이라고 할 수는 없다.

확신하지 못하거나 다른 사람들을 설득해야 할 경우 따라해서는 안되는 디자인 예시가 있다.

1. 미니멀리즘 입력 필드

지난 몇 년 동안, 미니멀리즘은 디자이너들 사이에서 큰 인기를 끌었다. 기본 데이터 입력 필드조차 한줄로 바뀔 정도로 영향력이 컸다.

왼쪽 : 기존 입력 필드는 사용자가 정보를 입력하기 전에 클릭하거나 탭 해야하는 사각형으로 표시된다.

오른쪽 : 최근 미니멀 한 방식으로 입력 필드를 디자인 하는 것은 텍스트 상자 아래쪽 선만 사용한다.

이러한 입력 필드 스타일은 대기업 중의 대기업인 구글에서도 적용했었다. 2017년 전에는 구글의 머터리얼 디자인에 포함되어 있었다.

구글에는 분명히 멋진 재능을 가진 디자이너들과 엔지니어들이 일을 잘 하고 있다. 하지만 재능있는 팀이라고 그들이 시도하는 모든 것이 완벽하다는 걸 보장하지는 않는다. 이번 경우에서, 상자 모양에서 밑줄로 바꾼 것은 실제로 사용자 경험을 향상시키지 못했고,, 2017년에 구글은 머터리얼 디자인 입력 필드 구성 요소를 밑줄에서 사각형으로 다시 변경했다.

Susanna Zaraysky와 Michael Gilbert는 이러한 디자인 개선에 대한 연구 결과를 공개적으로 공유하면서, 수백 명의 사용자와 함께 사용적합성과 사용자 선호도를 모두 테스트한 후, "직사각형(박스) 모양의 폐쇄 텍스트 필드가 라인으로 된 필드보다 더 사용하기 편리했다"고 결론내렸다.

실험적이고 데이터 드리븐한 디자인을 하는 팀은 성공적인 해결책을 설정하기 전에 많은 실패를 해봐야한다. 단순히 결과를 옆에서 지켜보는 입장으로는 디자인의 어떤 측면이 철저히 테스트되었고, 아직 세심하게 검토하지 않았는지 추측할 수 없다.

2. 과도하게 꾸민 메뉴

아마존은 데이터 중심의 의사결정으로 잘 알려진 또 다른 IT 선도 기업이다. 그래서 아마존에서 한 것을 따르는 게 안전해보일 수 있다. 하지만 계속 따라하다보면 많은 아이디어가 성공적이지 않다는 것을 깨닫고 버려질 수 있다는 것을 명심하자. 시간이 지나서 사용하기 어려운 것으로 밝혀질 디자인은 면밀하게 성과를 주시하고, 빠르게 수정하는 대기업에게 그저 작은 부정적인 영향으로 그칠것이다. 하지만 지속적으로 모니터링하고, 업데이트 할 리소스가 없는 회사에서 위험한 디자인을 구현하면 더 많은 손실을 입게되기 때문에, 아마존이 사용했다는 이유로 베끼는 것은 주의해야 한다.

예를 들어, 아마존은 모바일 쇼핑 앱에서 장식적이고, 제품과 관련된 이미지를 배경으로 사용했다. 실외 난방 관련 용품을 사려고 했던 소비자들은 매력적인 화덕이미지 위에 겹쳐져있는 하위 카테고리의 메뉴 텍스트를 보았을 것이다. 안타깝게도 배경 이미지 때문에 일부 메뉴 레이블은 읽기가 어렵다. 이런 디자인은 이제 읽기 훨씬 쉬운 카테고리 메뉴로 바뀌었고, 일반 배경에 대비가 높은 텍스트 레이블로 나타낸다.

왼쪽 : 2016년 아마존의 모바일 쇼핑 앱은 메뉴 카테고리와 관련있는 배경 이미지 위에 겹쳐진 메뉴를 사용했지만, 일부 메뉴 레이블은 매우 읽기 어려웠다.

오른쪽 : 이 후 디자인은 일반적인 배경에 읽을 수 있는 메뉴 레이블과, 대표적인 이미지와 함께 표시한다.

아마존은 읽기 어려운 메뉴의 영향을 크게 인식하지 못했을 수 있다. 고객들이 이 메뉴로 고군분투하더라도, 아마존의 엄청나게 넓은 선택지, 낮은 가격, 무료 배송, 그리고 아주 많은 고객들이 이미 주소와 결제 정보가 있는 계정을 가지고 있기 때문에, 아마존을 계속 사용하려는 의욕이 매우 강할 것이다. 이런 장점을 가지고 있지 않은 전자 상거래 사이트들은 제품을 쉽게 찾을 수 없는 고객들을 잃을 위험이 훨씬 더 높다.

3. 접근하기 어려운 컨텐츠 : 회색 위에 회색

중요도가 낮은 정보의 대비를 줄이는 것은 가장 중요한 정보를 더 눈에 띄게 만들기 위한 효과적인 전략이다. 하지만 회색 바탕에 회색 텍스트를 표시할 때처럼 너무 밝아서 읽기 힘든 색을 사용하기 쉽다.

애플은 디자인이 우수하고, 뛰어난 사용자 경험의 많은 예를 만들어냈다. 하지만 안타깝게도, 디자인의 일부분을 지나치게 강조하는 문제가 있다. 이 글을 쓸 당시, Apple의 홈페이지에는 회색 배경에 회색 텍스트 인 제품 가격이 3.47의 명암비로 표시되어 있으며, 가장 작은 접근성 요구 사항을 충족하는 데 필요한 4.5 명암비에 한참 못 미치는 것으로 나타났다.

Apple.com: 회색 배경에 밝은 회색 텍스트로 표시된 제품 가격은 최소 텍스트 대비 요구사항을 충족하지 않는다.

물론, 낮은 명암비가 애플의 비즈니스를 위험하게 하거나, 소비자들이 애플의 제품을 사지 않게 하는 요인은 아니다. 그러나 애플이 이러한 큰 위험을 느끼지 않는다고해서 이 디자인이 괜찮다는 의미는 아니다. 많은 사람들이 읽지 못하거나 읽기 힘든 색상을 텍스트로 사용하는 것은 잘못되었다. 텍스트 색상을 몇 단계만 더 어둡게해서 조정해도 쉽게 해결할 수 있다.

엎친데 덮친 격으로, 애플이 강조하지 않기로 선택한 정보 (가격)은 그렇게 간단히 무시될 수 있는 것이 아니다. 어쩌면 애플은 고객이 제품 가격을 신경쓰지 않기를 바라지만, 모든 전자상거래 사용자 조사 연구 (B2C 구매자든, B2B구매자든)는 만장일치로 사용자들이 가격을 보고 싶다한다는 결론을 내렸다. 가격은 제품을 구매할 때 고려하는 가장 중요한 정보 중 하나다.

4. 컨텍스트를 사용해서 디자인 패턴의 한계 설명

많은 UX 전문가들은 동료들이 다른 성공한 기업들이 사용했다는 이유로 특정 디자인 패턴을 옳은 것이라 생각하고, 지지한다는 사실을 발견했다. 한 이해관계자는 “만약 애플에게도 적합하다면, 우리들에게도 적합하다.” 라고 말하기도 한다. 이런 태도의 문제점은 여러분은 애플이 아니라는 것이다. 동료에게 산업과 시장 그리고 고객의 주요 경험이 얼마나 각 브랜드의 사용자 경험을 특별하게 만드는지 설명 할 때, 바로 이 논리가 뒷받침하는 근거로 사용 된다는 것을 명심하자.

그리고 글로벌 기술 회사들은 항상 디자인을 바꾸기 때문에 오늘 사용하고 있는 디자인도 내일은 더 나은 것으로 대체 될 수 있다. 디자인 솔루션을 세우고 견고하게 하기위해 시간과 에너지를 투자를 하기 전에 프로토타입이나 A/B테스트를 진행하면서 디자인 솔루션이 고객들에게 긍정적인 영향을 미치는지 확실히 확인하자. 그렇지 않으면, 당신이 원하는 결과를 얻지 못할 수도 있다.

Reference

Zaraysky, S. "The Evolution of Material Design’s Text Fields." Medium. 1 November 2019. https://medium.com/google-design/the-evolution-of-material-designs-text-fields-603688b3fe03

*본 글은 디자인 뉴스레터 디독에서 발행한 글입니다.

해외 디자인 아티클 번역 뉴스레터 '디독' 구독링크: http://bit.ly/2FNQNpv

디독

page.stibee.com

keyword