UI (User Interface)
: 사람들이 컴퓨터와 상호작용하는 시스템을 말합니다. 보통 UI라고 부르는 예시들로 화면상의 그래픽 요소와, 키보드와 마우스같은 물리적 요소도 컴퓨터와 상호 작용하기 위한 시스템이므로 UI라고 볼 수 있습니다.
GUI
: GUI는 UI에 그래픽요소가 추가된 것으로 그래픽을 통해 사용자와 컴퓨터가 상호작용하는 것을 말합니다.
UX (User Experience)
: 사용자가 어떤 서비스를 이용하면서 느끼는 모든 경험을 말합니다.
UX는 UI를 포함하지만, 둘은 별개로 좋은 UI가 좋은 UX를 보장하거나 좋은 UX가 좋은 UI를 보장하지는 않습니다.
자주쓰는 UI 디자인 패턴
-
모달 (Modal)
기존에 이용하던 화면 위에 뜨는 창을 말합니다. 팝업과는 다르게 브라우저 설정에 영향을 받지 않아, 꼭 보여주고 싶은 내용이 있을 때 사용합니다. -
토글 (Toggle)
On/Off 상태 를 설정할 때 사용하는 스위치 버튼입니다. 다크모드 구현 혹은 설정 중 두가지 옵션만 있는 경우에 자주 사용됩니다. -
탭 (Tab)
콘텐츠를 분리해서 보여주고 싶을 때 사용하는 UI 디자인 패턴입니다. -
태그 (Tag)
콘텐츠를 설명하는 키워드를 사용해서 라벨을 붙이는 역할을 합니다. -
자동완성 (Autocomplete)
말 그대로 사용자가 내용을 입력 중인 내용과 어느정도 일치하는 항목들을 자동으로 완성시켜 보여주는 디자인 패턴입니다. -
드롭다운 (Dropdown)
선택할 수 있는 항목들을 숨겨놓았다가, 클릭하면 항목들이 펼쳐지고 해당 항목 중에 선택을 할 수 있는 디자인 패턴입니다. -
아코디언 (Accordion)
접었다 폈다 할 수 있는 컴포넌트로, 보통 같은 분류의 아코디언을 여러 개 연속해서 배치합니다. 보다 간결한 페이지를 만들기 위해, 상하 관계를 표현하거나, 핵심적인 내용을 먼저 보여주고싶을 때 사용되는 디자인 패턴입니다. -
캐러셀 (Carousel)
컨베이어 벨트가 작동되듯이, 컨텐츠가 돌아가며 표시되는 디자인 패턴입니다. -
페이지네이션 (Pagination)
한 페이지에 표시될 정보가 너무 많은 경우 숫자 번호로 이루어진 페이지로 적절히 배분하는 디자인 패턴입니다. 페이지가 전환되는 경우, 브라우저가 잠시 멈추기 때문에 UX관점에서 보았을 때 좋지 않습니다. -
무한스크롤 (Infinite Scroll, Continuous Scroll)
스크롤이 맨 밑까지 내려가면 다시 표시할 데이터를 로딩해와서 무한적으로 스크롤 할 수 있게하는 디자인 패턴입니다. 페이지네이션과 마찬가지로 한 페이지에 담을 내용이 많을 때 사용합니다. -
GNB (Global Navigation Bar), LNB (Local Navigation Bar)
GNB는 페이지 어디서든 보이는 메인메뉴 네비게이션 바, LNB는 GNB에 종속되어 서브 메뉴를 나타내주는 네비게이션 바입니다.
이 외에 더 다양한 디자인 패턴은 여기서 확인하실 수 있습니다.
