[UI / UX]

키워드 : UI, UX, UI와 UX의 차이점

---

1. UI, UX란 ?

 

1-1. UI (User Interface, 사용자 인터페이스)

• 사용자와 컴퓨터가 상호작용하는 시스템을 일컫는다.
• 그래픽 요소와 물리적 요소를 모두 포함하는 개념이다.
• FE 개발자에게 UI는 곧 GUI(Graphical User Interface, 그래픽 사용자 인터페이스)

 

1-2. UX (User Experience, 사용자 경험)

• 사용자가 제품이나 서비스를 이용하면서 느끼는 총제적인 경험을 일컫는다.
• 홍보, 접근성, 사후 처리 등의 경험까지 포함된다.
• FE 개발자에게 가장 중요한 UX 요소는 UI가 된다.

 🔎 UX와 UI의 관계
UX는 UI를 포함하는 개념. 일반적으로 나쁜 UI는 나쁜 UX를 유발한다(항상 해당하는 것은 아님).

 

 

2. UI 디자인

2-1. UI 디자인 패턴

자주 사용하는 UI 컴포넌트

• 모달(Modal) : 기존 화면 위에 오버레이 되는 창. ⍯ 팝업창
• 토글(Toggle)
• 탭(Tab)
• 태그(Tag)
• 자동 완성(Auto complete)
• 드롭 다운(Drop down)
• 아코디언(Accordion) : 접었다 펼다 할 수 있는 컴포넌트
• 캐러셀(Carousel) : 빙글빙글 돌아가며 콘텐츠 표시
• 페이지네이션(Pagination)
• 무한 스크롤(Infinite Scroll / Continuous Scroll)
• GNB(Global Navigation Bar) & LNB(Local Navigation Bar) : GNB는 최상위 메뉴. LNB는 GNB에 종속되는 서브 메뉴

이외에도, 다양한 패턴이 존재.

 

2-2. UI 레이아웃

• 그리드 시스템(Grid System) : 화면을 격자로 나눠 격자에 맞춰 콘텐츠 배치
• 컬럼 그리드 시스템(Column Grid System) : 웹디자인에서는 화면을 세로로 나누는 컬럼 그리드 시스템을 사용. 아래 3요소로 구성
  • Margin : 화면 양쪽의 여백
  • Column : 콘텐츠가 위치하는 세로로 나뉜 영역. 일반적으로,
    • 스마트폰 : 4개
    • 태블릿 : 8개
    • PC : 12개로 구분
  • Grutter : 컬럼 간 간격
• 반응형 웹 : 화면 가로 길이에 따라 컬럼 개수가 달라지도록 코딩 시 다양한 디바이스 및 환경에서 유연하게 대응 가능.

 

3. UX 디자인

3-1. 좋은 UX를 만드는 7요소 (by 피터 모빌의 벌집 모형)

1. 유용성(Useful)
   • 목적에 맞는 사용 가능한 기능을 제공해야 한다.
2. 사용성(Usable)
   • 사용이 쉬워야 한다 → 가능한 직관적이어야 한다.
3. 매력성(Desirable)
   • 사용자의 구매 & 이용 욕구를 불러일으킬 수 있어야 한다.
4. 신뢰성(Credible)
   • 믿고 사용할 수 있어야 한다.
   • 거짓, 과장 홍보, 개인정보 유출 등 신뢰성을 저해하는 요소가 없어야 한다.
5. 접근성(Accessible)
   • 남녀노소, 장애 유무를 떠나 누구나 접근 및 이용할 수 있어야 한다.
6. 검색 가능성(Findable)
   • 원하는 기능이나 정보를 쉽게 찾을 수 있어야 한다.
7. 가치성(Valuable)
   • 1~6번의 모든 요소를 총합하여 사용자에게 가치를 제공해야 한다.
   • 가능한 모든 요소가 고르게 적용되어야 한다.

 

3-2. User Flow (사용자 흐름)

• 사용자가 제품/서비스를 이용 시, 취할 수 있는 모든 일련의 행동. (일종의 고객 여정과 비슷한 개념)
• 다이어그램으로 정리해서 파악한다 :
  • 사용자의 흐름을 전체적으로 파악이 가능하며, 흐름 상의 매끄럽지 않은 부분 등이 쉽게 파악 가능하여 수정 및 삭제가 용이하다.
• 다이어그램 작성 시, 3가지 기본 요소 :
  • 직사각형 : 사용자가 보게 될 화면
  • 다이아몬드 : 사용자가 취할 행동
  • 화살표 : 직사각형과 다이아몬드를 연결

 

4. UI / UX 사용성 평가

제이콥 닐슨의 10가지 사용성 평가 기준(Jakob’s Ten Usability Heuristics)

• 사용자 평가 기준은 애플리케이션의 사용성을 평가하는데 사용될 뿐만 아니라, 애플리케이션 기획 단계 시 활용하면 완성도 높은 애플리케이션 제작이 가능하다.

1. 시스템 상태의 가시성(Visibility of system status)
   • 사용자가 진행 상태(상황)을 확인 할 수 있도록, 피드백을 항상 제공한다.
2. 시스템과 현실 세계의 일치(Match between system and the real world)
   • 전문 용어가 아닌 사용자가 이해할 수 있는 일반적인 용어 및 개념을 사용한다.
3. 사용자 제어 및 자유(User control and freedom)
   • 사용자가 실수를 취소할 수 있는 방법을 제공한다.
4. 일관성 및 표준(Consistency and standads)
   1. 외부 일관성 : 플랫폼 및 업계의 관습 준수
   2. 내부 일관성 : 사용자 혼란 방지를 위해 일관적인 인터페이스 및 정보 제공 방식 준수
5. 오류 방지(Error Prevention)
   • 오류 발생 가능성을 낮춰준다 → 사용자 실수 방지. ex) 삭제 버튼 클릭 시, 재확인 창 표시
6. 기억보다는 직관(Recognition rather than recall)
   • 사용자가 기억에 의존해서 이용해야 하기 보다는 직관적으로 이용 가능하도록 한다.
7. 사용의 유연성과 효율성(Flexibility and efficiency of use)
   • 커스터마이징 가능한 기능을 제공하여 사용의 유연성 및 효율성을 지닌다.
8. 미학적이고 미니멀한 디자인(Aesthetic and minimalist design)
   • 불필요한 기능 및 정보를 제공하지 않는다.
9. 오류의 인식, 진단, 복구를 지원(Help users recognize, diagnose and recover from errors)
   • 사용자가 이해 가능한 언어로 문제 상황을 표시하고 해결책을 제안한다.
10. 도움말 및 설명 문서(Help and documentation)
    • 상황에 따라 이해하는데 도움이 되는 문서를 제공한다.

 

---

# 느낀점

피터 모빌의 모형과 제이콥 닐슨의 사용성 평가 기준을 공부하면서, 공감되는 부분이 많았다.

애플리케이션 제작 시, 기획할 때부터 둘의 이론을 활용 및 참고하여 적용한다면 확실히 애플리케이션의 방향성을 제대로 잡을 수 있을 뿐만 아니라 더욱 수준 높은 사용자 경험을 제공할 수 있겠다라는 생각이 들었다.

또한 사용자 흐름을 다이어그램으로 정리한다면 개선해야할 점이나 문제점을 쉽게 확인이 가능하고, 전체적인 애플리케이션의 틀을 잡는 데도 도움이 될 것이라 생각한다.

오늘 배운 개념들을 잘 기억하여 향후 프로젝트 진행 시 적용해보고자 한다.