UI (User Interface, 사용자 인터페이스)
- 사람들이 컴퓨터와 상호 작용하는 시스템
GUI(Graphical User Interface, 그래픽 사용자 인터페이스)
- 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업 환경
UX (User Experience, 사용자 경험)
- 사용자가 어떤 시스템, 제품, 서비스를 직•간접적으로 이용하면서 느끼고 생각하는 총체적 경험
UI와 UX의 관계
- UX는 UI를 포함
- 좋은 UX가 좋은 UI를 의미하거나, 좋은 UI가 항상 좋은 UX를 보장하지 않는다.
- 나쁜 UI는 보통 나쁜 UX를 유발한다.
- UI와 UX는 서로를 보완하는 역할
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에 종속되는 서브 메뉴 혹은 특정 페이지에서만 볼 수 있는 메뉴
그 외
Design patterns
User Interface Design patterns are recurring solutions that solve common design problems. Design patterns are standard reference points for the experienced user interface designer. Design patterns provide a common language between designers. They allow for
ui-patterns.com
컬럼 그리드 시스템(Column Grid System)
웹 디자인 분야에서는 화면을 세로로 몇 개의 영역으로 나눌 것인가에 초점을 맞춘 컬럼 그리드 시스템을 사용한다.
- Margin : 화면 양쪽의 여백
- Column : 콘텐츠가 위치하게 될, 세로로 나누어진 영역
- Gutter : Column 사이의 공간
컬럼 그리드 시스템을 활용할 때 화면 가로 길이에 따라서 컬럼 개수가 달라지도록 코드를 작성하면, 다양한 디바이스와 다양한 환경에 유연하게 대응하는 UI를 만들 수 있으며, 이를 반응형 웹이라고 부른다.
UX 디자인 - 피터 모빌(Peter Morville)의 7요소
- 유용성(Useful) : 사용 가능한 기능을 제공하고 있는가
- 사용성(Usable) : 사용하기 쉬운가
- 매력성(Desirable) : 사용자들에게 매력적인가
- 신뢰성(Credible) : 믿고 사용할 수 있는가
- 접근성(Accessible) : 누구든지 제품이나 서비스에 접근할 수 있는가
- 검색 가능성(Findable) : 사용자가 원하는 기능이나 정보를 쉽게 찾을 수 있는가
- 가치성(Valuable) : 모든 요소들을 총합하여 고객에게 가치를 제공하고 있는가
UI/UX 사용성 평가 - 제이콥 닐슨의 10가지 사용성 평가 기준
- 시스템 상태의 가시성 (Visibility of system status)
- 시스템과 현실 세계의 일치 (Match between system and the real world)
- 사용자 제어 및 자유 (User control and freedom)
- 일관성 및 표준 (Consistency and standards)
- 오류 방지 (Error prevention)
- 기억보다는 직관 (Recognition rather than recall)
- 사용의 유연성과 효율성 (Flexibility and efficiency of use)
- 미학적이고 미니멀한 디자인 (Aesthetic and minimalist design)
- 오류의 인식, 진단, 복구를 지원 (Help users recognize, diagnose, and recover from errors)
- 도움말 및 설명 문서 (Help and documentation)
'코드스테이츠' 카테고리의 다른 글
| 비동기 (0) | 2023.04.25 |
|---|---|
| DOM (0) | 2023.04.18 |
| Web Server 기초 (0) | 2023.04.06 |
| REST API (0) | 2023.03.29 |
| 아고라스테이츠 과제 (0) | 2023.03.11 |
