[ UI ] UI를 그릴 때 고려해야 할 사항

우리는 웹/모바일 UI를 그릴 때 다양한 부분을 고려해야한다.
모바일은 2D 세계이고 우리가 사는 세계는 3D 세계이다.
따라서, 그 간근에서 오는 부분을 최소화하는 것부터 시작하는 것이
좋은 UI의 시작이라고 생각한다.

 

아래의 원칙 7가지는 고민 및 AI의 도움을 추가 보안된 주간적인 자료임을 말씀드립니다.

 

unsplash

고려해야 할 주요 UI 디자인 원칙

1. 시각적 계층 구조

좋은 UI는 크기, 색상, 대비, 간격을 사용하여 중요한 순서대로 콘텐츠를 사용자에게 
안내해야 합니다.

연구 근거: 시각적 계층 구조는 게슈탈트 심리학 원리와 인지 부하 이론에서 비롯됩니다.
닐슨 노먼 그룹의 연구에 따르면 사용자는 인터페이스를 완전히 읽지 않고 스캔하는 것으로
일관되게 나타났습니다.

이유
우리의 뇌는 인지 자원이 제한되어 있습니다. 좋은 시각적 계층 구조는 정보를
처리하는 데 필요한 정신적 노력을 줄여 사용자가 다음을 수행할 수 있도록 합니다

• 의식적인 노력 없이 필요한 것을 빠르게 찾기
• 더 적은 오류로 더 효율적으로 작업 완료
• 인터페이스를 장시간 사용할 때 인지 피로가 줄어듬

사례 : 비지니스 CTA
중요한 요소(예: 콜 투 액션)가 시각적으로 두드러지면 전환율이
일반적으로 향상됩니다. Amazon의 연구에 따르면 시각적 계층을 최적화하면
구매 완료율이 1~3% 증가하여 규모 면에서 큰 영향을 미치는 것으로 나타났습니다.

https://www.nngroup.com/articles/how-users-read-on-the-web/

 

"Web Form Design: Filling in the Blanks" by Luke Wroblewski

 

 

2. 일관성

요소는 인터페이스 전체에서 일관된 스타일, 위치 및 동작을 유지해야 합니다.

연구 근거: 일관성은 야콥 닐슨의 사용성 휴리스틱과 최소 놀라움의 원리에 기반을
두고 있습니다. 인간의 뇌는 시스템 작동 방식에 대한 정신적 모델을 생성하며,
일관성은 이러한 모델을 뒷받침합니다.

이유
일관된 인터페이스를 통해 사용자는 다음을 수행할 수 있습니다

• 시스템의 여러 부분 간에 지식 전달
• 요소와 상호 작용하기 전에 요소가 어떻게 작동할지 예측 가능
• 시스템을 더 빨리 배우고 그 지식을 더 오래 유지 가능

사례 : 측정 가능 UI
Microsoft의 연구에 따르면 일관성 없는 UI를 사용하는 애플리케이션은
교육 시간이 5~25% 더 필요하고 사용자 오류가 약 17% 더 많은 것으로 나타났습니다.

https://www.nngroup.com/articles/ten-usability-heuristics/

https://sis.binus.ac.id/2022/05/12/why-is-consistency-so-important-in-user-interface-design/

 

 

3. 명확성 및 가독성

정보는 적절한 글꼴 크기, 대비, 간격으로 쉽게 스캔할 수 있어야 합니다.

연구 근거: 이 원칙은 타이포그래피 연구, 접근성 표준(WCAG), 가독성 연구에서
도출됩니다. 가독성 컨소시엄은 형식이 이해 속도와 정확도에 어떻게 영향을
미치는지에 대한 광범위한 연구를 수행하고 있습니다.

이유: 명확하고 읽기 쉬운 인터페이스:

• 다양한 시각 능력과 환경을 가진 사용자를 수용합니다
• 장시간 사용 시 눈의 피로를 줄여줍니다
• 더 빠른 정보 처리 및 의사 결정 지원

사례:
Google은 결과 페이지에서 텍스트 대비와 가독성을 개선하면 사용자 만족도와
참여도 지표가 10% 증가한다는 사실을 발견했습니다.

Text Legibility and the Letter Superiority Effect by Kevin Larson

https://m2.material.io/design/color/text-legibility.html

 

4. 반응형 디자인

인터페이스는 사용성을 유지하면서 다양한 화면 크기에 맞게 조정되어야 합니다.

연구 근거: Ethan Marcotte는 2010년에 반응형 디자인을 도입했지만, 이는 보편적인 디자인과 기기에 구애받지 않는 컴퓨팅이라는 더 깊은 원칙에 기반하고 있습니다.

이유
전 세계 모바일 트래픽이 데스크톱 트래픽을 초과하는 상황에서:

• 애플리케이션은 여러 장치 유형과 화면 크기에서 작동 필요
• 사용자는 기기 간 이동 시 일관된 경험을 기대
• 기업은 각 플랫폼에 대해 별도의 인터페이스를 유지 관리할 여유 감소

 

 

 

5. 접근성

요소는 적절한 대비, 터치 대상 크기 및 스크린 리더 호환성을 고려하여 디자인되어야 합니다.

연구 근거: 이는 윤리적 원칙과 법적 요구 사항(예: ADA, 섹션 508, EAA) 모두에 근거하고
있습니다. WebAIM 및 W3C와 같은 기관의 광범위한 연구가 뒷받침하고 있습니다.

이유
접근 가능한 디자인

• 장애인(전 세계 인구의 15~20%)이 제품을 사용할 수 있도록 가능
• 장애인뿐만 아니라 모든 사람의 사용성을 향상시키는 경우가 많음
• 조직을 법적 책임으로부터 보호

 

 

6. 시각적 피드백

사용자는 요소와 상호 작용할 때 명확한 피드백을 받을 수 있어야 합니다.

연구 근거: 이 원칙은 행동 심리학, 특히 강화에 관한 B.F. 스키너의 연구와
사용자 경험 및 편의성에 관한 돈 노먼의 연구에서 비롯됩니다.

이유
적절한 피드백

• 시스템과 상호 작용할 때 사용자의 불확실성과 불안감을 줄여줌
• 오류가 영구적으로 발생하기 전에 작업을 확인하여 오류를 방지
• 사용자 만족도를 높이는 통제감을 조성

 

 

7. 미니멀리즘

인터페이스는 군더더기를 피하고 필요한 정보만 표시해야 합니다.

연구 근거: 미니멀리즘은 힉스 법칙(선택의 수가 증가함에 따라 결정 시간이 증가함)과
밀러 법칙(인간은 약 7±2개의 정보 덩어리를 동시에 처리할 수 있음)에 의해 뒷받침됩니다.

이유:
최소한의 인터페이스:

• 중요한 작업과 정보에 사용자 주의 집중
• 인지 부하를 줄여 더 빠른 의사 결정으로 이어짐
• 산만함으로 인한 사용자 오류 발생 가능성 감소