[UIUX] UI UX란 무엇인가

UI UX

UI는 사용자 인터페이스, UX는 사용자 경험을 말한다.

쉽게 말해 UI는 사용자가 사용하는 제품, 시스템, 서비스를 말하는 것이고, UX는 그걸 사용한 사용자의 평가같은 거다. 

그렇기때문에 UX는 UI를 포함하는 개념이다.

 

UI 디자인 패턴

• 모달 (Modal) - 페이지 위에 겹쳐지는 창으로 브라우저 탭이 새로 열리는 것과는 차이가 있음.
• 토글 (Toggle) - on/off 스위치
• 탭 (Tab)
• 태그 (Tag)
• 자동완성 (Autocomplete)
• 드롭다운 (Dropdown) - 설문조사 등에서 입력창을 누르면 아래로 선택지가 주르륵 뜨는 것
• 아코디언 (Accordion) - 누르면 접혀져 있던 내용이 펼쳐지며 상세 내용이 뜸
• 캐러셀 (Carousel) - 컨베이어 벨트처럼 옆으로 넘어가며 내용 표시
• 페이지네이션 (Pagination) - 블로그 등에서 목록 아래의 페이지 넘기기 기능
• 무한 스크롤 (Infinite Scroll, Continuous Scroll)
• GNB (Global Navigation Bar), LNB (Local Navigation Bar) - GNB는 상단에 항상 고정된 네비 바, LNB는 네비바를 누르면 드롭다운되는 서브 바

 

그리드 시스템 (Grid System)

화면의 배치와 구성을 돕는 시스템.

Margin, Column, Gutter로 이루어져 있음. 일반적으로 웹에서는 세로로 영역을 나눔

• Margin - 가측 여백
• Column - 콘텐츠가 들어갈 실질적인 영역, 보통 휴대폰에서 4개, 태블릿에서 8개, PC에서 12개 사용.
• Gutter - column과 column 사이의 여백, 컨텐츠끼리의 간격 일정하게 유지시켜줌

column 이해를 돕기 위한 그림

 

UX 만들 때 가치를 두어야 하는 것:

• 피터 모빌(Peter Morville)의 벌집 모형
• 제이콥 닐슨의 10가지 사용성 평가 기준 (Jakob’s Ten Usability Heuristics)

 

 

 

---

참고자료:

• 코드스테이츠 강의 자료