사용자 친화 웹 UI/UX
- UX는 UI를 포함합니다. 또한 좋은 UX가 좋은 UI를 의미하거나, 그 반대도 보장하지는 않습니다.
- UI와 UX는 서로 다르지만 떼려야 뗄 수 없는 관계이며 서로를 보완하는 역할을 합니다.
UI(User Interface, 사용자 인터페이스)
- 사람들이 컴퓨터와 상호 작용하는 시스템을 의미합니다.
자주 사용되는 UI 디자인 패턴
태그(tag)
- 태그는 콘텐츠를 설명하는 키워드를 사용해서 라벨을 붙이는 역할을 합니다.
- 태그를 붙임으로써 콘텐츠를 분류할 수 있고, 태그를 사용하여 관련 콘텐츠를 검색할 수도 있습니다.
- Tip : 태그의 추가와 제거를 자유롭게 할 수 있어야 합니다.
자동완성(Autocomplete)
- 사용자가 내용을 입력 중일 때 사용자가 입력하고자 하는 내용과 일치할 가능성이 높은 항목을 보여주는 역할을 합니다.
- 사용자가 정보를 직접 입력하는 시간을 줄여주고, 정보를 검색할 때 많이 사용합니다.
- Tip : 너무 많은 항목이 나오지 않도록 하고, 항목에 접근하기 편하게 하면 좋습니다.
드롭다운(Dropdown)
- 선택할 수 있는 항목들을 숨겨놓았다가, 클릭/마우스 호버 등의 이벤트가 발생하면 펼쳐지면서 선택할 수 있게 해주는 역할을 합니다.
- Tip : 사용자가 선택한 항목을 알 수 있게 표시하는 기능도 있으면 좋습니다.
아코디언(Accordion)
- 접었다 폈다 할 수 있는 컴포넌트로, 일부의 내용만 보여주다가 클릭/마우스 호버 등의 이벤트가 발생하면 펼쳐지면서 숨겨진 내용을 보여주는 역할을 합니다
- 메뉴바로 사용하거나 단순히 콘텐츠를 담는 용도로 사용합니다.
- Tip : 기본적으로 화면을 깔끔하게 구성하기 위해 사용되며, 상하관계/핵심내용 전달 등의 목적을 가질 때도 있습니다.
캐러셀(Carousel)
- 컨베이어 벨트나 회전목마처럼 빙글빙글 돌아가면서 콘텐츠를 보여주는 역할을 합니다.
- 주로 자동으로 넘어가거나, 사용자가 옆으로 넘겨야 넘어가는 방법으로 사용합니다.
- Tip : 사용자가 넘길 수 있는 캐러셀의 경우 콘텐츠를 넘길 수 있음을 직관적으로 알 수 있어야 됩니다. 이전/다음 콘텐츠의 일부가 보이게 배치를 하거나, 버튼을 배치하기도 합니다
페이지네이션(pagination)
- 한 페이지에 띄우기에 정보가 너무 많은 경우, 책 페이지를 넘기듯이 번호를 붙여 페이지를 구분하여 선택된 페이지만 보여주는 방식으로 사용합니다.
무한 스크롤(Infinite Scroll, Continuous Scroll)
- 말 그래도 모든 콘텐츠를 불러올 때까지 무한으로 스크롤을 내릴 수 있는 것을 의미합니다
- 매끄러운 사용자 경험을 제공하지만 콘텐츠의 끝이 어딘지 알 수 없고, 원하는 콘텐츠를 찾기 힘들다는 단점이 있습니다.
- Tip : 처음부터 모든 콘텐츠를 로드하는 것보다 페이지의 맨 아래에 도달하면 추가 콘텐츠를 로드해오는 방식을 지향해야합니다.
GNB (Global Navigation Bar), LNB (Local Navigation Bar)
- GNB는 어느 페이지에 들어가든 사용할 수 있는 최상위 메뉴, LNB는 GNB에 종속되는 서브 메뉴 혹은 특정 페이지에서만 볼 수 있는 메뉴를 의미합니다.
- Tip : GNB는 어느 페이지에 있든 사용할 수 있어야하고, 동일한 위치에 있어야 합니다.
스켈레톤(skeleton) UI
실제 데이터가 렌더링 되기 전 화면에 보이게 될 윤곽을 그려주는 로딩 애니메이션 입니다.

기타 다양한 패턴들 : https://ui-patterns.com/patterns
그리드 시스템(Grid System)
- 화면을 격자로 나눈 다음 그 격자에 맞춰 콘텐츠를 배치하는 방법입니다.
- 웹 디자인 분야에서는 화면을 세로로 몇 개의 영역으로 나눌 것인가에 초점을 맞춘 컬럼 그리드 시스템(Column Grid System)을 사용하기도 하며, Margin,Column,Gutter 라는 세 요소로 구성됩니다.
컬럼 그리드 시스템
Margin
- 화면 양쪽의 여백을 의미합니다.
- 절대 단위(px)를 사용하여 고정 값으로 사용해도 되고, 상대 단위(vw,%)를 사용하여 유동성 있게 설정할 수 있습니다.
Column
- 콘텐츠가 위치하게 될, 세로로 나누어진 영역입니다.
- 컬럼 개수를 임의로 나눌 수도 있지만, 표준적으로 화면 크기의 구분선인 break point을 기준으로 휴대폰에서 4개, 태블릿에서 8개, PC에서는 12개의 컬럼으로 나눕니다.

Gutter
- Gutter는 Column 사이의 공간으로, 콘텐츠를 구분하는데 도움을 줍니다.
- 간격이 좁을수록 콘텐츠들이 연관성 있어 보이고, 넓을수록 각 콘텐츠가 독립적인 느낌을 주지만 정도가 심하면 UI가 어수선해지므로 주의해야 합니다.
컬럼 그리드 시스템에 대한 더 다양한 정보 : https://m2.material.io/design/layout/responsive-layout-grid.html#columns-gutters-and-margins
UX(User Experience, 사용자 경험)
- 사전적 의미는 사용자가 어떤 시스템,제품,서비스를 직/간접적으로 이용하면서 느끼고 생각하는 총체적 경험입니다.
좋은 UX를 만드는 요소

- 유용성(Useful) : 사용 가능한가?
- 제품이나 서비스가 목적에 맞는, 사용 가능한 기능을 제공하고 있는가에 관한 요소입니다.
- 사용성(Usable) : 사용하기 쉬운가?
- 제품이 본연의 기능을 제공하는 것을 넘어서 사용하기 쉬운가에 관한 요소입니다.
- 가능한 단순하면서 직관적이고 사용하기 쉽게 만들어야 합니다.
- 매력성(Desirable) : 매력적인가?
- 제품이 사용자에게 매력적인가에 대한 요소입니다.
- 디자인이 보기에 좋을지, 사용자에게 긍정적인 감정을 불러일으킬 수 있는지, 사용자가 해당 제품이나 서비스를 이용하고 싶어 하는지가 중요합니다.
- 신뢰성(Credible) : 신뢰할 수 있는가?
- 사용자가 제품이나 서비스를 믿고 사용할 수 있는가에 관한 요소입니다.
- 접근성(Accessible) : 접근하기 쉬운가?
- 나이,성별,장애 여부를 떠나서 누구든지 제품이나 서비스를 접근할 수 있는가에 관한 요소입니다.
- 검색 가능성(Findable) : 찾기 쉬운가?
- 사용자가 원하는 기능이나 정보를 쉽게 찾을 수 있는가에 관한 요소입니다.
- 가치성(Valuable) : 가치를 제공하는가?
- 위에서 언급된 모든 요소들을 총합하여 고객에게 가치를 제공하고 있는가에 관한 요소입니다.
- 가능한 모든 요소를 고르게 고려하는 것이 좋고, 제품 사용자들이 공통적으로 중요하게 생각하는 요소에 집중하는 것도 UX를 효율적으로 개선하는 전략이 될 수 있습니다.
사용자 흐름(User Flow)
- 사용자 흐름은 사용자가 제품에 진입한 시점을 시작으로 취할 수 있는 모든 행동을 뜻합니다.
- 다이어그램을 그려서 정리할 수 있습니다.
User Flow 다이어그램
작성법
사용자 흐름을 다이어그램으로 작성할 때, 기본적으로 세 가지 요소를 사용합니다.
- 직사각형
- 사용자가 보게 될 화면을 표현합니다.
- 다이아몬드
- 사용자가 취하게 될 행동을 표현합니다.
- 화살표
- 직사각형(화면)과 다이아몬드(행동)를 연결시켜주는 역할을 합니다.
다이어그램을 사용하면 좋은 이유
- 사용자 흐름 상 어색하거나 매끄럽지 않은 부분을 발견하여 방지할 수 있습니다.
- 있으면 좋은 기능/없어도 상관없는 기능을 발견해 추가/수정할 수 있습니다.
다이어그램 도구
The Online Collaborative Whiteboard for Teams
A visual collaborative whiteboard where teams can diagram, brainstorm, and organize ideas together.
www.figma.com
모든 팀을 위한 시각 협업 플랫폼 | Miro
분산된 팀을 위한 확장 가능하고 안전한 장치 간, 기업 급 팀 협업 화이트보드. 전 세계 3,500만 명 이상의 사용자와 함께하세요.
miro.com
'프론트엔드 > Section3' 카테고리의 다른 글
| 네트워크 (2) | 2023.05.01 |
|---|---|
| 웹 표준 & 접근성 (3) | 2023.04.25 |
| React 상태관리 Redux (0) | 2023.04.24 |
| React Custom Component (1) | 2023.04.18 |
| 와이어프레임 & 프로토타입 (1) | 2023.04.13 |