UI/UX
UI: 사용자가 컴퓨터와 상호 작용하는 시스템
UX: 사용자가 어떤 시스템이나 서비스 등을 직접 또는 간접적으로 이용하면서 느끼고 생각하는 총체적 경험
UI와 UX의 관계
UX는 UI를 포함하며, 둘은 서로 보완하는 역할을 한다.
UI 패턴
내비게이션
GNB: 어느 페이지에서나 동일한 위치에 보이는 최상위 메뉴.
LNB: GNB에 종속되는 서브 메뉴 또는 특정 페이지에서만 볼 수 있는 메뉴.
브레드크럼: 계층적인 웹 구조에서 현재 위치를 표시해 주는 것으로, 상위 페이지에 이동할 수 있는 숏컷이 되기도 한다. (ex. 게시판 > 공지 > 장학)
창
모달: 기존 창 위에 오버레이되는 창.
팝업: 새로운 정보를 보여주기 위해 기존 창과는 별개로 열리는 새로운 웹 창.
컨텐츠
캐러셀: 여러 컨텐츠를 돌아가면서 표시해 주는 것. 자동으로 슬라이딩되기도 하고, 사용자가 직접 쓸어 넘길 수도 있다.
페이지네이션: 한 페이지에 띄울 정보가 많은 경우, 번호를 붙여 페이지를 구분해 주는 것.
무한 스크롤: 모든 컨텐츠를 불러올 때까지 무한으로 스크롤을 내릴 수 있는 것. 페이지의 맨 아래에 도달하면 추가 컨텐츠를 로드한다.
프로그레시브 디스클로저: 사용자의 집중과 관심을 유지할 수 있는 최소 데이터만 표시하고, 나머지는 점진적으로 공개하는 것. (ex. 더 보기)
아코디언: 접었다 폈다 할 수 있는 컴포넌트.
드롭다운: 선택할 수 있는 항목을 숨겨뒀다가 클릭 시 펼쳐지면서 선택할 수 있게 하는 것.
모핑 컨트롤: 현재 모드에서 사용할 수 있는 컨트롤이 표시되도록 하는 것. (ex. 팔로우↔언팔로우 버튼)
태그 클라우드: 태그들의 모음으로, 폰트 사이즈를 통해 태그의 중요성을 나타내기도 한다.
온보딩
플레이쓰루: 도움말과 확인 버튼이 같이 뜨며, 사용자가 차례대로 나타나는 도움말을 따라가며 UI를 익히도록 하는 것.
워크쓰루: 서비스의 시작 페이지. (ex. vscode의 시작하기)
인라인 힌트: 페이지 중간에 삽입된 힌트. 우측 상단에 x 버튼을 만들어 클릭 시 안 보이도록 만들기도 한다.
코치 마크: 사용자가 UI를 쉽게 이해할 수 있도록 도움말을 모두 담아 기존 페이지에 오버레이시킨 것.
컬럼 그리드 시스템
margin: 화면 양쪽 여백.
column: 컨텐츠가 위치하게 될 세로로 나눠진 영역. 디바이스 크기에 맞게 나눠야 한다.- 휴대폰: 4개
- 태블릿: 8개
- PC: 12개
gutter: column 사이의 공간으로 컨텐츠를 구분하는 용도.
좋은 UI를 위한 피터 모빌 벌집 모형
유용성: 서비스 목적에 맞고 사용할 수 있는 기능을 제공하고 있는가
사용성: 사용하기 쉬운가
매력성: 사용자에게 매력적인가
신뢰성: 믿고 사용할 수 있는가
접근성: 나이, 성별, 장애 여부와 관계 없이 누구든 접근할 수 있는가
검색 가능성: 사용자가 원하는 기능이나 정보를 쉽게 찾을 수 있는가
가치성: 위 요소를 모두 종합하여 가치를 제공하는가
제이콥 닐슨의 Ten Usability Heuristics
시스템 상태의 가시성: 합리적인 시간 내에 적절한 피드백을 통해 사용자에게 진행 상황에 대한 정보를 제공
시스템과 현실 세계의 일치: 사용자에게 친숙한 단어와 모양을 사용
사용자 제어와 자유: 현재 진행 중인 작업에서 벗어날 수 있는 방법과 실수를 되돌릴 수 있는 방법을 명확하게 제시
일관성과 표준: 일관적인 UX를 제공하기 위해 잘 알려진 UI 디자인 패턴을 사용하고, 일관적인 인터페이스와 정보 제공 방법
오류 방지: 오류가 발생하기 쉬운 상황을 제거해 사용자의 실수 방지
기억보다 직관: 사용자가 기억해야하는 정보를 줄임
사용의 유연성과 효율성: 초보와 전문가 모두에게 개별 맞춤 기능 제공
미학적이고 미니멀한 디자인: 불필요한 정보를 제외하고, 우선 순위가 높은 컨텐츠 순서로 제공
오류의 인식, 진단, 복구 지원: 사용자가 이해할 수 있게 문제 제시 및 해결 방법 제안
도움말과 설명서: 도움말이 필요 없게 만들되, 상황에 따라 도움이 될 문서를 제공
블로그 이사중 🚚 (https://sungjihyun.vercel.app)