UI, UX

UI, UX의 정의와 관계

UI

• 사용자가 컴퓨터와 상호작용하는 시스템
• 물리적인 시스템 또한 UI라고 할 수 있습니다. ex)마우스, 키보드
• 특히 화면상의 그래픽을 통해 상호작용하는 시스템을 GUI라고 합니다.

UX

• 사용자가 제품을 직간접적으로 이용하면서 느끼는 총체적인 경험
• 제품 그 자체 뿐만 아니라 제품과 관련된 모든 요소가 UX에 영향을 미칩니다.

UI와 UX의 관계

• UX가 UI를 포함하는 관계
• UI가 좋다고 해서 항상 좋은 UX를 보장하지는 않습니다.
• 하지만 대체로 나쁜 UI는 나쁜 UX를 가져옵니다.

⭐️ 좋은 UI가 항상 좋은 UX를 가져오건 아니지만, 적어도 나쁜 UI를 만들지는 말자.

UI 디자인

디자인 패턴

소프트웨어 디자인 패턴(software design pattern)은 소프트웨어 공학의 소프트웨어 디자인에서 특정 문맥에서 공통적으로 발생하는 문제에 대해 재사용 가능한 해결책이다.
출처: 위키백과

• 재사용가능한 UI 디자인 → 쉽게 말하자면, 자주 쓰이는 UI 컴포넌트
• 모달 / 토글 / 탭 / 자동완성 / 드롭다운 / 아코디언 / 캐러셀 / 페이지네이션 / 무한스크롤 / GNB와 LNB 등등
• 각 디자인 패턴 별로 고려해야하는 요소에 맞게 사용하는 것이 중요합니다.

⭐️ 각 디자인 패턴 별로 고려해야하는 요소 예시

• 탭: 사용자가 선택한 섹션이 무엇인지 명확하게 표시해주어야 한다.
• 무한스크롤: 전체를 로드하는 것이 아니라 페이지 바닥에 도달할 때 로드해야 한다.
• GNB: 페이지 어디에 있든 사용할 수 있도록 항상 위치가 동일해야 한다.
• 이 외에도 각 디자인 패턴을 사용할 때 고려해야 하는 요소들이 있습니다.

레이아웃

• 그리드 시스템: 화면을 격자로 나눈 다음 격자에 맞추어 컨텐츠를 배치하는 방식
• 컬럼 그리드 시스템: 화면을 세로로 몇 개의 영역으로 나눌 것인가에 초점을 맞춘 그리드 시스템

⭐️ 컬럼 그리드 시스템의 3요소

• margin: 화면 양쪽의 여백
• column: 컨텐츠를 배치하는 영역
• glutter: column 사이의 영역

• 4 ・ 8 ・ 12 !!
  • 4 column: 스마트폰 화면에서는 주로 4개의 column으로 화면 분할
  • 8 column: 태블릿 화면에서는 주로 8개의 column으로 화면 분할
  • 12 column: PC 화면에서는 주로 12개의 column으로 화면 분할

UX 디자인

좋은 UX를 만드는 요소

• 피터 모빌의 벌집 모형: UX의 7가지 요소
  • Useful / Usable / Desiable / Credible / Accessable / Findable / Valuable

User Flow

• 사용자가 제품 진입 시점부터 취할 수 있는 모든 행동 → 사용자의 행동 흐름

⭐️ User Flow의 3요소

• 직사각형 : 사용자가 보게 될 화면 ( ex. 회원 가입 페이지, 로그인 페이지)
• 다이아몬드 : 사용자가 취하게 될 행동 ( ex. 로그인, 버튼 클릭, 업로드)
• 화살표 : 직사각형(화면)과 다이아몬드(행동)를 연결시켜주는 화살표

UI/UX 사용성 평가

• 더욱 보기 좋고 효율적인 UI/UX를 만들기 위해 지속적으로 평가하고 개선해나가야 합니다.
• 가장 대표적인 평가 기준으로는 제이콥 닐슨의 10가지 사용성 평가 기준이 있습니다.
  10 Heuristic Principles - Jakob Nielsen's (Usability Heuristics)
  
• 이러한 평가 기준을 통해, 제품 설계 과정에서 제품의 사용성을 지속적으로 확인해야 합니다.

❗️ 3줄 요약

• UI와 UX는 상호보완적인 관계 → 사용성 평가를 통해 서로를 계속해서 개선해나갈 수 있다.
• UI 디자인에서 알아둘 것은 디자인 패턴과 레이아웃 → 특히 레이아웃은 컬럼 그리드 시스템을 사용한다.
• UX 디자인에서 알아둘 것은 좋은 UX를 만드는 7요소와 User Flow

📕 참고 자료

• Design Patterns

• 반응형 레이아웃 그리드: 머티리얼 디자인