UI와 UX에 대한 기초 이해

• UI (User Interface)

source: 한국방송통신전파진흥원(2012.06)

• "사람들이 컴퓨터와 상호 작용하는 시스템"
• 화면상의 그래픽 요소 외에도, 키보드, 마우스 등의 물리적 요소도 인간이 컴퓨터와 상호 작용하기 위한 시스템이므로 UI
• ex) 피쳐폰: 숫자 키, 방향 키 등 물리적 UI (터치로 상호작용 어려움)
  스마트폰:  화면 터치를 통한 상호작용 비율 증가 (모바일 디바이스의 그래픽 UI 중요성 👍)
  컴퓨터: 마우스 등장 이후 그래픽 UI*의 중요성 👍 (직관적, 간편함)
• 프론트엔드 개발자에게 가장 중요한 요소 중 하나

 

 

• UX (User Experience)

source: https://careerfoundry.com/en/blog/ux-design/what-does-a-ux-designer-actually-do/

• "사용자가 어떤 시스템, 제품, 서비스를 직•간접적으로 이용하면서 느끼고 생각하는 총체적 경험"
• 제품, 서비스 그 자체에 대한 경험은 물론, 홍보, 접근성, 사후 처리 등 직간접적으로 관련된 총체적인 경험
• (제품 그 자체뿐만 아니라) 제품과 관련된 모든 요소가 UX에 영향을 미침

 

 

• UI 디자인 패턴

• 모달
• 토글
• 탭
• 태그
• 자동완성
• 드롭다운
• 아코디언
• 캐러셀
• 페이지네이션
• 무한스크롤
• GNB, LNB

참고) https://ui-patterns.com/patterns

 

 

 

• UI와 UX의 차이점

source: https://bootcamp.uxdesign.cc/basic-introduction-to-user-experience-and-user-interface-design-f0aae08a2b44

• UX는 UI를 포함 (UI ⊂ UX)
• 좋은 UX가 좋은 UI를 의미하거나, 좋은 UI가 항상 좋은 UX를 보장하지는 않음
• UI와 UX는 서로 다르지만 떼려야 뗄 수 없는 관계이며, 서로를 개선시키며 보완, 발전됨

 

 

 

* 그래픽 UI (Graphical User Interface, 그래픽 사용자 인터페이스) source: https://www.indeed.com/career-advice/career-development/gui-meaning - "사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업 환경" - ex) 운영체제(Window, Mac OS)의 화면, 애플리케이션 화면 - 프론트엔드 개발자로서의 UI는 대부분 이 GUI를 의미