모든 UX 디자이너가 알아야 할 15가지 원칙

ux ui design

사용자 경험은 광범위한 분야입니다. UX 디자인을 하는 사람은 누구나 다양한 분야의 기술을 보유해야 합니다. 모든 유용한 정보를 하나의 글로 요약하는 일은 불가능하지만, 사람들에게 멋진 경험을 선사하기 위해 모든 UX 디자이너가 따라야 하는 중요한 원칙을 강조할 수는 있습니다.

다음은 모든 디자이너가 숙지해야 하는 15 가지 필수 원칙입니다.

1. UX는 UI 그 이상입니다

2. 대상을 파악하세요

3. 여러분은 사용자가 아닙니다

4. 짧은 주의 지속 시간에 맞춰 디자인을 조정하세요

5. UX 프로세스는 유동적입니다

6. 실제 제품을 제작하기 전에 프로토타입을 만드세요

7. 디자인할 때 실제 콘텐츠를 사용하세요

8. 단순함과 일관성을 유지하세요

9. 기억보다 인지가 더 중요합니다

10. 사용 및 접근 가능하도록 디자인하세요

11. 혼자서 문제를 해결하려고 하지 마세요

12. 한 번에 전부 해결하려고 하지 마세요

13. 오류 수정보다 예방이 더 쉽습니다

14. 유익한 피드백을 제공하세요

15. 극단적인 재디자인을 피하세요

1. UX는 UI 그 이상입니다

사용자 인터페이스는 사용자 경험의 일부입니다

UX와 UI가 마치 같은 개념인 것처럼 혼용하는 일은 많은 디자이너가 흔히 저지르는 실수입니다. 두 분야의 차이점을 이해하는 것이 매우 중요하며, 사용자 경험에 관해 알아야 할 사항에서 UX 디자인을 자세히 다뤘습니다. 간단히 말해 사용자 인터페이스는 인간과 제품의 상호 작용이 발생하는 공간이고, 사용자 경험은 제품과의 상호 작용 뒤에 나타나는 감정적 결과입니다.

아이폰의 소셜 네트워크 앱에서 볼 수 있는 피드 레이아웃은 사용자 인터페이스입니다. 당겨서 새로 고치는 손쉬운 동작에서 느끼는 사용자의 만족은 사용자 경험에 해당합니다.

아이폰의 소셜 네트워크 앱에서 볼 수 있는 피드 레이아웃은 사용자 인터페이스입니다. 당겨서 새로 고치는 손쉬운 동작에서 느끼는 사용자의 만족은 사용자 경험에 해당합니다. (이미지 크레딧: 라모션(Ramotion))

2. 대상을 파악하세요

사용자 리서치는 디자인 프로세스의 자연스러운 첫 단계입니다

제품을 디자인할 때 고려해야 하는 가장 중요한 요소 중 하나가 대상이라는 점은 놀라운 일이 아닙니다. 사용자가 좋아할 만한 제품을 디자인할 계획이라면 이들이 실제로 무엇을 원하고 필요로 하는지 알아야 합니다. 이는 UX 디자인 프로세스에서 사용자 리서치가 필수적인 부분이어야 한다는 뜻입니다. 디자인을 시작하기 전에 사용자를 가장 먼저 생각해야 합니다! 사용자를 먼저 생각함으로써 여러분의 제품을 사용할 사람들에게 가치 있는 제품을 제공하고 _기능 대신 이점_에 집중할 수 있습니다.

“사람들은 제품을 구매하는 것이 아니라 더 나은 자기 자신을 구매하는 것입니다.” 디자이너는 기능을 추가하길 멈춰야 할 때와 사람들이 특정한 경험과 관련해 좋아하는 부분을 유지할 때를 알아야 합니다.

“사람들은 제품을 구매하는 것이 아니라 더 나은 자기 자신을 구매하는 것입니다.” 디자이너는 기능을 추가하길 멈춰야 할 때와 사람들이 특정한 경험과 관련해 좋아하는 부분을 유지할 때를 알아야 합니다. (이미지 크레딧: 유저온보드(useronboard))

3. 여러분은 사용자가 아닙니다

실제 사용자 테스트야말로 디자인 프로세스에 필수입니다

디자이너는 종종 인터페이스를 사용할 사람들이 자신과 비슷하다고 가정하곤 합니다. 그 결과, 디자이너는 스스로의 행동과 반응을 사용자에게 투영합니다. 그러나 스스로를 사용자라고 생각할 경우 오류가 발생합니다. 심리학에서는 이러한 효과를 _허위 합의_라고 부릅니다. 즉 다른 사람들이 나와 같은 생각을 하고, 주어진 상황에서 비슷하게 행동할 것이라고 가정하는 것입니다.

여러분의 제품을 사용할 사람들은 다양한 배경과 사고방식, 사고 모델과 각자 다른 목표를 가지고 있을 것입니다. 다시 말해, 디자이너는 사용자가 아닙니다.

디자이너가 허위 합의 편향을 극복하는 데 도움을 주는 사용성 테스트라는 기법이 있습니다. 사용자가 좋아하는 제품을 만들고 싶다면 테스트에 집중해야 합니다. (여러분의 동료, 친구나 가족이 아닌) 실제 사용자와 함께 테스트하면 해당 제품을 사용할 사람들에게 적합한 제품을 만드는 방법을 디자이너가 배울 수 있습니다. 오랜 시간이 소요될 수도 있지만, 적합한 방향으로 나아가고 있는지 확인할 수 있는 유일한 방법입니다.

UX 디자인은 가정을 세운 뒤 테스트를 통해 이를 검증하는 작업입니다.

UX 디자인은 가정을 세운 뒤 테스트를 통해 이를 검증하는 작업입니다.

4. 짧은 주의 지속 시간에 맞춰 디자인을 조정하세요

너무 많은 정보로 사용자를 압도하지 마세요

주의 지속 시간은 산만해지지 않고 작업에 집중 가능한 시간으로 정의할 수 있습니다. 2015년 마이크로소프트에서 실시한 연구에 따르면, 인간의 평균 주의 지속 시간은 12초에서 8초로 감소했다고 합니다. 이제 인간의 주의 지속 시간이 금붕어보다 짧아졌다는 뜻입니다. 디자이너는 사람들이 필요로 하는 정보를 최대한 빨리 얻도록 돕는 것을 목표로 두고 이러한 태도에 대응할 수 있어야 합니다.

앱과 웹사이트는 사용자가 소화할 수 있는 유의미한 콘텐츠를 제공해야 합니다.

앱과 웹사이트는 사용자가 소화할 수 있는 유의미한 콘텐츠를 제공해야 합니다. (이미지 크레딧: 세이퍼테크(safertech))

디자이너는 사용자 작업을 지원하지 않는 불필요한 요소나 콘텐츠를 제거해 인터페이스를 단순화해야 합니다. 이를 달성할 수 있는 한 가지 기법은 기능적 미니멀리즘입니다. 그러나 사용자의 경험이 제한되어야 한다는 뜻은 아닙니다. 모든 정보는 가치와 관련성이 있어야 합니다.

텍스트는 시각적 정보가 적을수록 더 눈에 띄고 사용자에게 미치는 영향이 커집니다.

텍스트는 시각적 정보가 적을수록 더 눈에 띄고 사용자에게 미치는 영향이 커집니다. (이미지 크레딧: 믹스드(Mixd))

5. UX 프로세스는 유동적입니다

여러분이 디자인하는 제품에 맞게 디자인 프로세스를 조정하세요

UX 프로세스는 UX 디자인의 성공 여부를 결정합니다. 명확한 UX 프로세스가 없다면 디자이너는 아무것도 모른 채 작업하게 될 수도 있습니다. 반면 명확하고 간결한 프로세스가 있다면 사용자에게 놀라운 경험을 선사할 수도 있습니다.

일반 UX 디자인 플로. UX 프로세스는 프로젝트에 따라 크게 다릅니다.

일반 UX 디자인 플로. UX 프로세스는 프로젝트에 따라 크게 다릅니다.

많은 디자이너들이 모든 프로젝트에 적용할 수 있는 하나의 보편적인 UX 프로세스가 있다고 생각합니다. 안타깝게도 만능 UX 디자인이라는 것은 존재하지 않습니다. 각 프로젝트에 개별적인 단계를 지정할 수는 있지만, 항상 프로젝트의 필수 요건에 따라 정확한 UX 프로세스를 선별해야 합니다. 모든 프로젝트가 고유하며 필수 요건이 각자 다르기 때문입니다. 디자이너는 최고의 사용자 경험을 위해 프로젝트에 따라 디자인 프로세스를 조정할 준비가 되어 있어야 합니다. 예를 들어, 새 제품을 디자인하는 경우 사용자 리서치 및 필수 요건 이해에 더 많은 시간을 할애해야 할 것입니다. 그러나 기존 제품을 재디자인한다면 디자인 검증(사용성 및 A/B 테스트 수행 또는 분석 보고서 작업)에 더 많은 시간을 할애해야 합니다.

6. 실제 제품을 제작하기 전에 프로토타입을 만드세요

디지털 제품의 디자인 단계에서 프로토타이핑을 포함하세요

프로토타이핑을 건너뛰고 실제 제품 제작에 노력을 기울이는 일은 많은 디자인 팀에서 찾아볼 수 있는 흔한(그리고 위험한) 실수입니다. 훌륭하다고 생각하는 무언가를 만들기 위해 많은 노력을 기울였는데도, 실제로 출시했을 때 예상대로 작동하지 않는다는 사실을 깨닫게 되면 큰 스트레스를 받게 됩니다.

프로토타이핑은 테스트할 수 있도록 제품 모델을 만드는 것입니다. 엔지니어링 팀과 실제 제품을 제작하는 데 시간을 쏟기 전에 프로토타입을 통해 여러분이 세운 가설을 테스트할 수 있습니다. 디자이너는 프로토타이핑에 다양한 디자인 기법을 활용할 수 있습니다. 유용한 프로토타이핑 기법 중 하나는 쾌속 프로토타이핑입니다. 웹사이트 또는 앱과 같은 제품의 향후 단계를 신속히 제작해서 사용자 그룹과 함께 유효성을 검증하는 인기 있는 기법입니다.

Adobe XD의 모바일 앱 프로토타입

Adobe XD의 모바일 앱 프로토타입

7. 디자인할 때 실제 콘텐츠를 사용하세요

로렘 입숨(Lorem Ipsum) 및 더미 플레이스홀더(dummy placeholders)를 이용하지 마세요

거의 모든 제품이 텍스트, 이미지, 영상 등의 콘텐츠를 기반으로 합니다. 디자인은 콘텐츠 향상이라고도 할 수 있습니다. 그러나 많은 디자이너들이 디자인 단계에서 콘텐츠를 고려하지 않고 실제 카피 문구 대신 로렘 입숨을, 실제 이미지 대신 플레이스홀더를 이용하곤 합니다. 이러한 디자인은 디자이너의 아트보드에서는 멋지게 보일 수 있지만, 실제 데이터가 들어가면 완전히 달라질 수 있습니다.

로렌 입숨을 사용하면 텍스트의 의미 있는 부분은 사라지고, 텍스트 기반 콘텐츠가 시각적 디자인 요소로 변합니다.

로렌 입숨을 사용하면 텍스트의 의미 있는 부분은 사라지고, 텍스트 기반 콘텐츠가 시각적 디자인 요소로 변합니다. (이미지 크레딧: 스매싱 매거진(Smashing Magazine))

디자이너로서 우리의 목표는 실제 사용자 경험에 최대한 비슷하게 다가가는 것입니다. 따라서 실제 경험에서 멀어져서는 안 됩니다.

8. 단순함과 일관성을 유지하세요

훌륭한 사용자 인터페이스의 특징은 단순함과 일관성입니다

디지털 제품의 맥락에서 단순함이란 제품을 이해하고 상호 작용하기 쉽다는 의미로 쓰입니다. 사용자가 앱 사용 방법을 이해하려고 설명서를 읽거나 앱을 둘러보는 데 필요한 정보를 찾아볼 필요가 없도록 쉽게 만들어야 합니다. 디자인 요소를 명확하게 드러내고, 사용자가 가야 하는 곳으로 영리하게 안내하는 일 또한 인터페이스 디자이너로서 여러분이 맡은 일입니다.

힙멍크(Hipmunk) 홈페이지의 가장 중요한 요소는 사용자가 집중할 수 있도록 강조되어 있습니다. 이는 사용자가 다음에 무엇을 해야 하는지 명확하게 보여줍니다.

힙멍크(Hipmunk) 홈페이지의 가장 중요한 요소는 사용자가 집중할 수 있도록 강조되어 있습니다. 이는 사용자가 다음에 무엇을 해야 하는지 명확하게 보여줍니다.

인터페이스 또한 디자인 전반에 걸쳐 일관성을 유지해야 합니다. 더 창의적이고 기억에 남을 만한 디자인을 위해 많은 디자이너가 의도적으로 스타일에 불일치성을 더하곤 합니다. 예를 들어, 웹사이트 내의 다른 페이지에서 다양한 색상 조합을 활용하는 것입니다. 이러한 디자인 결정은 사용자에게 자주 혼란과 짜증을 야기합니다. 따라서 디자인 요소를 친숙하게 유지하고 모든 단계에서 가장 중요한 디자인 요소를 강조하는 것이 항상 중요합니다. 여러분의 제품 디자인에 놀람 최소화 원칙을 적용하는 걸 잊지 마세요.

9. 기억보다 인지가 더 중요합니다

사용자가 인지할 수 있는 요소를 보여줄 경우, 무언가를 처음부터 기억할 필요가 없기 때문에 사용성이 향상됩니다

인간의 기억력에는 한계가 있기 때문에 디자이너는 사용자가 제품의 특정 기능에 관한 정보를 기억하게 하는 대신, 이 특정 기능을 사용하는 방법을 자동으로 인지하게 해야 합니다. 정보 및 인터페이스 기능을 가시적이고 쉽게 이용하게 만들어 인지 부담을 최소화하세요.

유튜브는 회상 대신 인지를 이용합니다. 최근 시청한 영상 목록을 사용자에게 보여줌으로써 사용자가 며칠 전 시청하기 시작한 동영상을 잊지 않고 계속 시청할 수 있게 돕습니다.

유튜브는 회상 대신 인지를 이용합니다. 최근 시청한 영상 목록을 사용자에게 보여줌으로써 사용자가 며칠 전 시청하기 시작한 동영상을 잊지 않고 계속 시청할 수 있게 돕습니다.

10. 사용 및 접근 가능하도록 디자인하세요

여러분의 제품과 상호 작용할 다양한 사용자를 위해 디자인하세요

디자인에 관한 한 디자이너는 기능과 접근성 대신 큰 요소에 집중 및 관심 끌기에 집착하는 경우가 많습니다. 대부분의 사람이 무언가가 아름답게 보일 수 있도록 노력합니다. 이 때문에 디자이너는 종종 사용성보다 미학을 더 중요하게 여기는 상황에 놓입니다. 물론 미학은 중요하며 우리 모두 디자인이 매력적으로 다가가도록 노력해야 하지만, 먼저 사용할 수 있는 제품을 디자인해야 합니다. 디지털 제품과 서비스의 가장 중요한 역할은 기능 수행입니다.

사람들은 유쾌한 애니메이션이 있다거나 시각적으로 흥미롭다는 이유로 디지털 제품을 사용하지 않습니다. 실제적인 가치를 제공하기 때문에 디지털 제품을 사용하는 것입니다.

사람들은 유쾌한 애니메이션이 있다거나 시각적으로 흥미롭다는 이유로 디지털 제품을 사용하지 않습니다. 실제적인 가치를 제공하기 때문에 디지털 제품을 사용하는 것입니다. (이미지 크레딧: 네오스팟(neospot))

접근 가능한 디자인은 다양한 사용자가 디지털 제품을 성공적으로 탐색, 이해 및 사용하게 해줍니다. 잘 디자인한 제품은 시력이 좋지 않거나 시각 장애, 청각 장애, 인지 장애 또는 운동 장애가 있는 사용자를 포함해 모든 사용자가 접근할 수 있습니다. 디자인을 고려할 때 접근성 때문에 제약이 생기는 것은 사실이지만, 제품의 접근성을 개선하면 모든 사용자의 사용성이 향상됩니다.

웹을 탐색하는 시각 장애인

웹을 탐색하는 시각 장애인 (이미지 크레딧: UXMag)

11. 혼자서 문제를 해결하려고 하지 마세요

디자인은 팀 스포츠이니 혼자 작업하지 마세요

린든 존슨(Lyndon Johnson)이 말한 것처럼 “함께 해결할 수 없는 문제는 없으며, 혼자서 해결할 수 있는 문제는 거의 없습니다.” 훌륭한 사용자 경험은 디자이너, 개발자, 이해 관계자 및 사용자들의 협업을 통해 이루어집니다. ‘홀로 천재’ 같은 개념은 존재하지 않습니다. 디자인할 때는 최대한 많은 사람들과 협력해 작업에 관한 아이디어, 인사이트 및 생각을 얻어야 합니다.

12. 한 번에 전부 해결하려고 하지 마세요

디자인은 반복적인 프로세스입니다

UX 디자인은 선형 프로세스가 아니라는 점을 이해하는 것이 중요합니다. UX 프로세스의 단계(아이디어화, 프로토타이핑, 테스트)는 종종 상당히 크게 겹치는 경우가 많으며 서로 자주 반복됩니다. 문제와 사용자, 프로젝트 세부 정보(특히 제약)를 더 많이 알게 될수록 실행했던 리서치를 다시 들여다보거나 새로운 디자인 아이디어를 시도해야 할 수도 있습니다. 단 한 번의 반복으로는 완벽한 디자인이 나올 수 없습니다. 실제 사용자와 함께 테스트하고, 귀중한 피드백을 수집하고, 이 피드백에 기반해 과정을 반복할 수 있을 때까지 아이디어를 수정하세요.

UX 디자인은 선형 프로세스가 아닙니다. 훌륭한 제품을 만들기 위해서는 많은 수정 및 테스트가 필요합니다. 핵심은 가정을 정의하고, 테스트하고, 수정하고, 이를 반복하는 것입니다.

UX 디자인은 선형 프로세스가 아닙니다. 훌륭한 제품을 만들기 위해서는 많은 수정 및 테스트가 필요합니다. 핵심은 가정을 정의하고, 테스트하고, 수정하고, 이를 반복하는 것입니다.

13. 오류 수정보다 예방이 더 쉽습니다

잠재적 오류를 최소화할 수 있도록 제품을 설계하세요

오류를 범하는 것은 인간의 특징입니다. 사람들이 사용자 인터페이스를 사용할 때 오류가 자주 발생합니다. 사용자의 실수로 발생하는 경우도 있고, 앱에 문제가 생겨 발생할 때도 있습니다. 원인이 무엇이든, 이러한 오류와 대응 방법은 사용자 경험에 큰 영향을 미칩니다. 사용자는 오류를 싫어하며, 자신이 그러한 행동을 유발했다는 생각은 더더욱 싫어합니다. 따라서 오류가 발생하기 쉬운 조건을 완전히 없애거나, 사용자가 작업을 수행하기 전 오류를 확인해 알려야 합니다.

트위터는 사용자가 잘못된 이메일 주소를 입력하는 것을 막아줍니다. 사용자가 기존 계정에 로그인하거나 비밀번호를 재설정할 수 있도록 안내합니다.

트위터는 사용자가 잘못된 이메일 주소를 입력하는 것을 막아줍니다. 사용자가 기존 계정에 로그인하거나 비밀번호를 재설정할 수 있도록 안내합니다.

14. 유익한 피드백을 제공하세요

앱이나 웹사이트는 항상 사용자에게 지금 무슨 일이 일어나고 있는지 알려야 합니다

시스템 상태의 가시성은 사용자 인터페이스 디자인에서 가장 중요한 원칙 중 하나입니다. 사용자는 언제든 시스템 내의 현재 상황을 알고 싶어 합니다. 앱은 사용자가 추측하게 해서는 안 되며, 적절한 시각적 피드백을 통해 무슨 일이 일어나고 있는지 알려야 합니다. 사용자가 작업할 때 움직이는 상태 표시처럼 즉각적인 시각 피드백을 제공하는 방법은 인터페이스가 작동 중임을 알리기 좋습니다. 로딩 스피너 같은 간단한 애니메이션을 피드백 메시지로 사용해 시스템이 요청을 처리하고 있다는 것을 사용자에게 알릴 수 있습니다.

로딩 스피너 같은 간단한 애니메이션을 피드백 메시지로 사용해 시스템이 요청을 처리하고 있다는 것을 사용자에게 알릴 수 있습니다. (이미지 크레딧: 텀블러(Tumblr))

15. 극단적인 재디자인을 피하세요

베버(Weber)의 최소한의 식별 차이 법칙을 기억하세요

리서치에 따르면 사용자는 기존 제품에 대대적인 변화가 있을 경우 그러한 변화가 자신에게 이익이 된다 해도 달가워하지 않습니다. 변화가 큰 재디자인을 할 경우, 사용자들이 좋아하지 않을 가능성이 매우 큽니다. 이 현상에는 심지어 과학적 명칭도 있습니다. 베버의 ‘최소한의 식별 차이 법칙’입니다. 무언가가 아주 약간 바뀔 경우 눈치챌 만한 큰 차이로 여겨지지 않는다는 뜻입니다.

이베이(eBay)는 사용자가 극단적인 변화를 좋아하지 않는다는 사실을 힘든 방식으로 배운 회사 중 하나입니다. 하룻밤 사이 이베이는 웹사이트 대부분의 페이지를 밝은 노란색 배경에서 흰색 배경으로 바꿨습니다. 그리고 이 변경 사항에 관해 따지는 고객들의 불만 제보가 곧바로 쏟아졌습니다. 많은 불만 제보 때문에 이베이는 기존 디자인을 다시 불러와야 했습니다. 그 뒤 이베이 팀은 다른 전략을 따랐습니다. 몇 달에 걸쳐 배경색을 아주 서서히 연하게 변경해 마지막에는 노란색이 사라지고 흰색만 남게 된 것입니다. 예상대로 이번에는 거의 누구도 변화를 눈치채지 못했습니다.

따라서 재디자인에 접근하는 가장 좋은 방법은 이곳저곳에서 아주 조금씩 서서히 변경하는 것입니다. 이렇게 하면 대부분의 사용자가 재디자인이 완전히 끝나기 전까지 여러분이 재디자인을 하고 있다는 사실조차 알아차리지 못합니다.

결론은, 실수를 두려워하지 마세요

모든 사람은 실수를 하며, 실수를 통해서만 무언가를 배울 수 있습니다

실수를 통해 진정으로 배울 수 있습니다. 실수가 두려워서 모든 것을 완벽하게 해내려고 한다면 배울 기회를 놓치게 될 것입니다. 위의 15가지 원칙을 따르되 무엇보다 새로운 UX 디자인 기술과 접근 방식을 계속 시도해 여러분과 고객에게 가장 적합한 방법을 찾으세요.

어도비의 올인원 프로토타이핑 및 디자인 도구 어도비 XD를 더 자세히 알아보세요.