UI (User Interface, 사용자 인터페이스)
UI는 사람들이 컴퓨터와 상호 작용하는 시스템을 의미한다.
휴대폰, 모니터 화면상의 그래픽 요소 외에도 키보드, 마우스 등의 물리적 요소도 컴퓨터와 상호작용하기 위한 시스템이므로 UI라고 볼 수 있다.
스마트폰, 컴퓨터 뿐만 아니라 스마트워치, 키오스크, 터치스크린 안내판 등 화면과의 상호 작용을 통해 사용하는 기기들을 많이 볼 수 있는데 여기서 그래픽 UI인 GUI가 굉장히 중요한 역할을 하게 되었다.
GUI(Graphical User Interface, 그래픽 사용자 인터페이스)
GUI는 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업 환경을 말한다.
GUI의 예
- 운영체제(Mac OS, Window)의 화면
- 애플리케이션 화면
UX (User Experience, 사용자 경험)
UX의 사전적 의미는 사용자가 어떤 시스템, 제품, 서비스를 직/간접적으로 이용하면서 느끼고 생각하는 총체적 경험이다.
예)제품, 서비스 그 자체에 대한 경험, 홍보, 접근성, 사후 처리 등 직/간접적으로 관련된 모든 경험을 사용자 경험이라고 할 수 있다.
노트북을 예로 들어보면, 노트북의 성능이 아무리 뛰어나도 내구성이 약해서 잘 망가지고, 사후 처리 시스템이 잘 갖춰지지 않아 수리가 어렵다면 사용자 경험이 좋을 수 없을 것이다. 그 외에도 제품의 홍보가 잘 되어있지 않다면 제품을 사용하기까지 이어지는 것이 어려울 수 있다. 이렇게 제품 그 자체뿐만 아니라 제품과 관련된 모든 요소들이 UX에 영향을 주게된다.
UI와 UX의 관계
- UX는 UI를 포함한다.
- 좋은 UX가 좋은 UI를 의미하거나, 좋은 UI가 항상 좋은 UX를 보장하지는 않는다.
- UI와 UX는 서로 보완하는 역할을 한다. UX에서 부족한 것을 찾아내어 UI 개선점을 찾아낼 수 있고, UI를 개선함으로써 UX가 좋아질 수 있다.
UI 디자인 패턴
UI 디자인 패턴은 프로그래밍 시 자주 반복되어 나타나는 문제점을 해결할 때 재사용하기 좋은 형태로 만든 패턴을 말한다.
자주 사용되는 UI 컴포넌트라고 할 수 있는데, 자주 쓰이는 UI 디자인 패턴을 익혀두면 UI 디자인을 하기가 보다 쉬워지고, FE 개발자, 디자이너, PM과의 의사소통도 원활해져 협업 효율도 높아질 수 있다.
자주 사용되는 UI 디자인 패턴
Modal (모달): 모달은 기존에 이용하던 화면 위에 오버레이 되는 창을 말한다. 닫기 버튼, 혹은 모달 범위 바깥을 클릭하면 모달이 닫히는 것이 일반적이고, 모달창을 닫기 전에는 기존 화면과 상호작용 할 수 없다.
또 다른 브라우저 페이지를 여는 팝업창과는 구분되는 개념으로, 팝업은 브라우저에 의해 강제로 막힐 수 있지만, 모달은 브라우저 설정에 영향을 받지 않기 때문에 꼭 보여주고 싶은 내용이 있다면 모달을 사용하는 것이 좋다.
Toggle (토글): 토글은 On/Off를 설정할 때 사용하는 스위치 버튼이다. 색상, 스위치의 위치, 그림자 등의 시각적 효과를 주어 사용자가 토글의 상태를 직관적으로 알 수 있게 만들어야된다.
보통 On/Off와 같이 두 개의 옵션이 있을 때 사용하지만, 여러 개의 옵션이 있을 때에도 토글 사용이 가능하다. 하지만, 어느 옵션이 선택되어 있는지 직관적으로 알 수 있어야 되며, 옵션의 개수가 너무 많다면 Tab을 사용하는 것을 고려해야 된다.
Tab (탭): 탭은 컨텐츠를 분리해서 보여주고 싶을 때 사용한다. 탭을 사용할 때는 각 섹션의 이름이 너무 길지 않아야 하고, 섹션의 구분이 명확해야하며, 현재 선택한 섹션이 어떤 것인지 표시해줘야된다.
Tag (태그)
: 태그는 컨텐츠를 설명하는 키워드를 사용해서 라벨을 붙이는 역할을 한다. 사용자는 자신이 작성한 컨텐츠에 태그를 붙임으로써 컨텐츠를 분류할 수 있고, 태그를 사용하여 관련 컨텐츠들만 검색할 수도 있다.
태그로 사용 될 키워드는 사용자가 직접 작성하게 만들거나 개발자가 종류를 아예 정해놓을 수도 있다. 태그의 추가, 제거는 자유롭게 할 수 있도록 설정해놓아야된다.
Autocomplete (자동완성): 자동완성은 사용자가 내용을 입력 중일 때 사용자가 입력하고자 하는 내용과 일치할 가능성이 높은 항목을 보여주는 것이다. 사용자가 정보를 직접 입력하는 시간을 줄여주고, 정보를 검색할 때 많이 사용된다.
자동완성 항목은 너무 많은 항목이 나오지 않도록 개수를 제한하는 것이 좋고, 키보드 방향 키나 클릭 등으로 접근하여 사용할 수 있는 것이 좋다.
Dropdown (드롭다운): 드롭다운은 선택할 수 있는 항목들을 숨겨뒀다가 펼쳐지면서 선택할 수 있게해준다.
보통은 화살표 버튼을 누르면 펼쳐지게 만들지만, 그냥 마우스를 올려놓아도 펼쳐지게 만들 수도 있다. 드롭다운이 펼쳐지는 방식보다 중요한 것은 사용자가 자신이 선택한 항목을 정확히 알 수 있게 만드는 것이다.
이 외에도 Accordion(아코디언), Carousel(캐러셀), Pagination(페이지네이션), Infinite Scroll, Continuous Scroll(무한 스크롤), GNB (Global Navigation Bar), LNB (Local Navigation Bar) 등이 있고 자세한 내용은 UI Design patterns 홈페이지를 참고하면 좋다.
Grid System (그리드 시스템)
그리드(gird)는 수직, 수평으로 분할된 격자무늬를 뜻한다.
그리드 시스템은 화면을 격자로 나눈 다음 그 격자에 맞춰 컨텐츠를 배치하는 방법으로 질서 있는 구조의 UI를 구성할 수 있도록 도와준다.
웹 디자인 분야에서는 화면을 세로로 몇 개의 영역으로 나눌 것인가에 초점을 맞춘 Column Grid System을 사용하며, Margin, Column, Gutter라는 세 가지 요소로 구성된다.
컬럼 그리드 시스템에 대해서 자세히 알아보기 위해 material.io 홈페이지에 가서 참고하면 좋다.
Margin
Margin은 화면 양쪽의 여백을 의미한다.
너비를 px 같은 절대 단위를 사용해서 고정 값으로 사용해도 되고, vw, % 같은 상대 단위를 사용하여 유동성을 주어도 좋다.
페이지를 어떻게 디자인할 것인가에 따라 자유롭게 설정하시면 된다.
Column
Column은 콘텐츠가 위치하게 될, 세로로 나누어진 영역으로 컬럼 개수를 임의로 나눌 수도 있지만, 표준적으로 휴대폰에서 4개, 태블릿에서 8개, PC에서는 12개의 컬럼으로 나눈다.
각 디바이스의 화면 크기는 보통 위 이미지와 같다. 이미지 속 화면 크기의 구분선을 break point라고 하는데 내가 만들고자 하는 UI가 어디에 속하는지 파악하고 컬럼 개수를 정하면 된다.
Column은 상대 단위를 사용하여 컨텐츠가 창 크기에 맞춰 크기가 변하도록 설정하는 것이 좋다.
기기마다 화면의 크기가 조금씩 다르고, 브라우저의 크기를 사용자 마음대로 바꿀 수 있기 때문이다.
Gutter
Gutter는 Column 사이의 공간으로 컨텐츠를 구분하는데 도움을 준다.
Gutter의 간격이 좁을수록 컨텐츠들이 연관성 있어보이고, 넓을수록 각 컨텐츠가 독립적인 느낌을 준다.
Gutter는 아무리 넓어도 Column 너비보다는 작게 설정해야 된다.
Gutter가 너무 좁은 경우
Gutter가 너무 넓은 경우
