TIL 43일차 - [사용자 친화 웹] UI/UX

Yoon Kyung Park·2023년 6월 12일

TIL

목록 보기

43/75

UI, UX의 사전적 의미를 기억한다.

o
UI와 UX는 둘 다 사용자 중심의 디자인을 추구하며
사용자들에게 더 나은 경험을 제공하기 위함이라는 공통점이 있지만,
차이점도 있다.

UI는 User Interface의 약자로 사용자 인터페이스를 의미한다.
사용자 인터페이스는 사용자와 컴퓨터 간의 상호작용하는 시스템을 의미한다.
사용자가 컴퓨터를 사용함에 있어 쉽게 이해하고 조작할 수 있도록 하는
화면상의 그래픽 요소나 마우스, 키보드와 같은 물리적 요소의 입력 장치들이
사용자 인터페이스에 포함된다.

UX는 User Experience의 약자로 사용자 경험을 의미한다.
사용자 경험은 사용자가 제품이나 시스템 혹은 서비스를 사용함에 있어
제품, 시스템, 서비스 그 자체와 제품, 시스템, 서비스에 관련된 모든 요소들을 포함한 사용자의 총체적 경험을 포함한다.
사용함에 있어 편한지, 이 제품이 잘 알려져 있어서 사용하기에 어려움이 없었는지, 이 제품을 구매하거나 사용할 장소가 적당해서 접근하는 데 어려움이 없었는지, 사용하다가 고장났을 때 사후 처리는 잘 이루어졌는지 등 사용자가 제품을 사용하면서 느끼고 겪는 모든 경험들을 포함한다.

UX는 UI를 포함하며, 이 둘은 서로 보완관계에 있다.
그러나 좋은 UI가 반드시 좋은 UX를 제공하는 것은 아니며,
좋은 UX가 좋은 UI를 의미하는 것은 아니다.
다만, 나쁜 UI는 나쁜 UX를 제공하는 것은 맞다.

따라서 사용자 중심의 디자인을 추구하며 사용자들에게 더 나은 경험을 제공하기 위한 UI와 UX를 프론트엔드 개발자는 보다 더 좋은 사용자 경험을 제공하기 위해 노력해야 한다.

프론트엔드 개발자가 UX를 공부해야 하는 필요성을 이해한다.

o (위에서 설명함)
UI, UX의 관계를 이해한다.

o (위에서 설명함)
UI 디자인 패턴의 필요성을 이해한다.

o
UI 디자인 패턴은 화면에 배치할 수 있는 컴포넌트를 의미한다.
이는 프로그래밍 시, 자주 반복되는 문제들을 누군가 해결하여 올린 결과물들을
재사용하기 좋은 형태로 만든 패턴을 말한다.
즉, 자주 사용하는 UI 컴포넌트다.
UI 디자인 패턴 중 가장 많이 쓰이는 11가지 디자인 패턴이 있다.
자주 쓰이는 UI 디자인 패턴의 종류를 기억한다.

o
1) 모달(Modal)
2) 토글(Toggle)
3) 탭(Tab)
4) 태그(Tag)
5) 자동 완성(Auto Complete)
6) 드롭다운(Dropdown)
7) 아코디언(Accordion)
8) 캐러셀(Carousel)
9) 페이지네이션(Pagination)
10) 무한 스크롤(Infinite Scroll, Continuous Scroll)
11) GNB(Global Navigation Bar), LNB (Local Navigation Bar)
자주 쓰이는 UI 디자인 패턴이 필요한 상황과 주의사항을 이해한다.

o
1) 모달(Modal)
: 기존에 이용하던 화면 위에 오버레이 되는 창을 의미함.
닫기 버튼이나 모달 범위 밖을 클릭하면 모달이 닫힌다.
모달은 브라우저 설정에 영향을 받지 않아 꼭 보여주고 싶은 내용이 있다면, 모달을 사용하는 것이 좋다.

2) 토글(Toggle)
: On/Off를 설정할 때 많이 사용하는 스위치 버튼이다.
색상, 스위치의 위치, 그림자 등의 시각적 효과를 주어 사용자가 On 상태인지, Off 상태인지 등을 알 수 있도록 토글의 상태를 직관적으로 알 수 있게 해야 한다. 보통 2개의 옵션이 있을 때 사용하지만, 여러 개의 옵션이 있을 때에도 토글을 사용할 수 있다. 이때도 어느 옵션이 선택된 건지 사용자가 알 수 있도록 표현해야 한다. 그러나 옵션의 개수가 많을 경우에는 사용자에게 혼란을 줄 수 있으므로 탭을 사용하는 것이 더 좋다.
토글에는 대표적으로 네이버 로그인 창에서 IP보안 토글이나, 다크모드 설정 등이 있다.

3) 탭(Tab)
: 콘텐츠를 분리하여 보여주고 싶을 때 사용한다.
nav 공간에 가로로 한 줄로 배열된 형태가 가장 흔하지만,
여러 줄로 배열하거나 aside 공간에 세로로 배열할 수 있다.
탭을 사용하려면 각 섹션의 이름이 너무 길지 않고 명확하고 직관적으로 간단 명료하게 작성되어야 하고, 현재 어떤 섹션을 선택하여 보고 있는지 사용자가 알 수 있도록 색깔 차이를 주거나 그림자 등의 효과를 주어 표시해야 한다.

4) 태그(Tag)
: 콘텐츠를 설명하는 키워드를 사용하여 라벨을 붙이는 역할을 한다.
사용자들이 작성한 콘텐츠에 태그를 붙여 콘텐츠를 분류할 수 있고,
관련 콘텐츠만 검색하여 조회할 수 있다.
태그로 사용될 키워드는 사용자가 직접 입력하여 작성할 수도 있고,
개발자가 태그 키워드의 종류를 정해놓고 사용자가 골라 쓸 수 있게 할 수도 있다.
이때 중요한 것은 어떤 방식이든 사용자가 태그를 자유롭게 추가하고 삭제할 수 있도록 할 수 있어야 한다.
대표적으로 태그는 블로그나 인스타그램 등의 소셜 네트워크 서비스(SNS)에서 많이 사용된다.

5) 자동 완성(Auto Complete)
: 사용자가 내용을 입력 중일 때, 다 작성하지 않아도 사용자가 입력하고자 하는 내용과 일치할 가능성이 높은 연관성 있는 항목들을 검색창 아래 보여주는 것이다.
이는 사용자가 검색을 입력하는 시간을 줄여준다.
자동 완성 항목은 너무 많은 항목이 나오지 않도록 가장 연관성 높은 순으로 개수를 제한하여 보여주는 것이 좋으며, 키보드 방향키나 마우스 클릭 등으로 접근할 수 있도록 하는 것이 좋다. 또한 자동 완성 검색이 뜨지 않도록 설정할 수 있는 자동 완성 기능 On/Off 버튼을 만드는 것도 좋다.
대표적으로 구글이나 네이버 등의 검색 사이트에서 많이 사용된다.

6) 드롭다운(Dropdown)
: 사용자가 선택할 수 있는 항목들을 숨겨두었다가 아래로 펼쳐지면서 선택할 수 있도록 하는 패턴이다.
보통 오른쪽 검색창 끝에 있는 화살표 버튼을 누르면, 펼쳐지게 만들지만
마우스를 올려두어도 자동 검색창이 아래로 펼쳐지도록 만들 수 있다.
이때 사용자가 자신이 선택한 항목이 무엇인지 알 수 있도록 선택한 항목에 색상을 달리 하거나 효과를 줘야 한다.
주로 해당 사이트에 문의하거나 질의응답 혹은 탈퇴 사유를 작성할 때 많이 사용된다. 이는 관련된 질문 혹은 사유 등을 분류할 수 있도록 관련 분야를 드롭다운 형식으로 만들어 사용자가 해당 사항에 관련된 내용을 선택할 수 있도록 한다.

7) 아코디언(Accordion)
접었다 폈다 할 수 있는 컴포넌트 패턴으로
보통은 같은 분류의 아코디언을 여러 개 연속하여 배치한다.
주로 상하 관계를 가지는 관련된 내용들을 보여줘야 하는
트리 구조의 콘텐츠를 렌더링할 때 사용하거나 메뉴바로 사용할 수도 있고,
단순히 콘텐츠를 아코디언에 담아 핵심 내용이 먼저 보이도록하여
핵심 내용을 먼저 전달하려는 목적으로 사용할 수도 있다.
이러한 아코디언 방식은 여러 정보를 다 늘여 보여 주지 않고,
접어놓아서 화면을 깔끔하게 구성할 수 있다.

8) 캐러셀(Carousel)
: 캐러셀은 수하물 컨베이너 벨트 또는 회전목마를 의미하는 단어로
빙글 빙글 돌아가며 콘텐츠를 보여주는 방식이다.
자동으로 돌아가거나 사용자가 옆으로 넘겨야만 넘어가거나
이 중 선택하여 만들 수 있다.
다만, 사용자가 옆으로 넘겨야만 넘어가도록 만들 경우,
사용자가 다음 컨텐츠가 있음을 알 수 있도록 이전과 다음 컨텐츠의 일부를 옆에 배치하여 보이도록 하거나 콘텐츠를 넘기거나 정지할 수 있는 버튼과 해당 페이지를 아래에 표시하여 사용자가 명확하게 알 수 있도록 한다.
주로 G마켓, 올리브영 등 구매 페이지의 이벤트를 보여주는 경우 등에 사용된다.

9) 페이지네이션(Pagination)
: 한 페이지에 띄우기에 정보가 많은 경우 일정한 수 만큼 보이도록 하고
나머지는 다음 페이지에 보이도록 페이지를 구분하는 방식으로
아래에 전체 페이지 수와 해당 페이지를 나타낸다.
이는 사용자가 원하는 페이지로 바로바로 접근할 수 있다는 장점이 있지만,
페이지를 눌러 다음 페이지로 이동해야 함으로 사용자가 해당 페이지를
접근하여 파악하는 데 흐름이 끊길 수 있으므로
매끄러운 사용자 경험과는 조금 거리가 있다.
대표적으로 블로그에 많이 사용되며, 구글 검색 결과도 페이지 네이션으로 구현되어 있다.

10) 무한 스크롤(Infinite Scroll, Continuous Scroll)
: 모든 콘텐츠를 불러올 때까지 무한으로 스크롤을 내릴 수 있도록 하는 방식으로
페이지네이션과 마찬가지로 한 번에 콘텐츠를 띄우기에 정보가 너무 많은 경우에 사용한다.
다만, 페이지 네이션은 개수를 정하지만, 무한 스크롤은 페이지 하단에 도달하면,
추가 콘텐츠를 로드해 오는 방식으로 만든다.
처음부터 모든 콘텐츠를 로드해 와 보여주는 것은 진정한 의미의 무한 스크롤이라 할 수 없다.
이는 페이지네이션의 단점인 페이지를 선택하여 넘기기 때문에 발생하는
사용자의 흐름을 끊는 것없이 보다 더 매끄러운 사용자 경험을 제공할 수 있다.
다만, 콘텐츠의 끝이 어딘지 사용자는 알 수 없고,
이미 지나간 콘텐츠를 다시 찾기 어려운 점 등의 단점도 있다.

11) GNB(Global Navigation Bar), LNB (Local Navigation Bar)
: GNB는 어느 페이지에 들어가든 사용할 수 있는 최상위의 메뉴를 의미한다.
LNB는 GNB에 속해 있는 서브 메뉴 혹은 특정 페이지에서만 볼 수 있는 메뉴를 의미한다.
보통 탭 형식으로 최상단에 위치한 메뉴가 GNB이고, 해당 메뉴에 마우스를 올렸을 때
드롭다운 형식으로 보여지는 서브 메뉴가 LNB다.
대표적으로 회사 사이트에 들어가면 [회사소개], [제품 소개], [투자 정보], [채용 정보], [오시는 길] 등이 GNB에 해당하며, 각 섹션에 마우스를 올리면 보여지는 [회사 소개] -[기업 소개],[CEO 인사말],[인재상] 등의 서브 메뉴가 LNB다.
GNB는 어느 페이지에 있든 사용할 수 있도록 항상 동일한 위치에 있어야 한다.
GNB가 있다 없다 한다거나 위치가 자꾸 변하면 사용자 경험에 좋지 않은 영향을 줄 수 있다.
UI 디자인 패턴의 필요성을 이해한다.

o
자주 쓰이는 UI 디자인 패턴을 사용하면, 보다 더 나은 사용자 경험을 제공할 수 있고, FE개발자, 디자이너, PM 간의 의사소통이 원활해져 협업할 때 효율성이 높아진다.
피터 모빌(Peter Morville)의 7요소를 기억한다.

o
좋은 UX를 만들기 위해 고려해야 할 7가지 요소를 피터 모빌이 정의했다.
1) 유용성 (Useful)
2) 사용성 (Usable)
3) 매력성 (Desirable)
4) 신뢰성 (Credible)
5) 접근성 (Accessible)
6) 검색 가능성 (Findable)
7) 가치성 (Valuable)
UX 7요소가 의미하는 바를 이해한다.

o
1) 유용성 (Useful)
: 제품이나 서비스가 목적에 맞는 사용 가능한 기능을 제공하고 있는가에 관한 요소다.

2) 사용성 (Usable)
: 제품이 본연의 기능을 제공하는 것을 넘어 사용하기 쉬운가에 관한 요소다.

3) 매력성 (Desirable)
: 제품이 사용자들에게 긍정적인 감정을 불러일으킬 정도로 매력적인가에 대한 요소다.

4) 신뢰성 (Credible)
: 사용자가 제품이나 서비스를 믿고 사용할 수 있는가에 대한 요소다.

5) 접근성 (Accessible)
: 누구든지 제품이나 서비스에 접근하여 비슷한 수준의 정보를 얻을 수 있는가에 대한 요소다.

6) 검색 가능성 (Findable)
: 사용자가 원하는 기능이나 정보를 쉽게 찾을 수 있는가에 대한 요소다.

7) 가치성 (Valuable)
: 6가지의 모든 요소들을 총합하여 고객에게 가치를 제공하고 있는가에 관한 요소다.
UX 7요소로 UX를 평가할 수 있음을 기억한다.

o
피터 모빌의 벌집 모형은 UX를 위해서 고려해야 할 7가지 요소를 제시하여
7가지를 이어 만든 7각형 도형을 만들어 UX를 얼마나 고려했는지, 사용자가 얼마나 좋은 UX를 경험했는지를 평가하기 위한 척도로도 사용할 수 있다.
또한, 사용자 설문 조사를 통해 개선점을 찾아낼 수도 있다.

[👇 피터 모빌의 벌집 모형으로 UX 평가하기]
User flow의 개념과 필요성을 이해한다.

o
사용자 흐름은 사용자가 제품에 진입한 시점을 기준으로 취할 수 있는 모든 행동을 의미한다. 사용자 흐름을 다이어그램으로 작성할 때,
직사각형, 화살표, 다이아몬드 이 3가지 요소를 사용하여 작성한다.

직사각형은 사용자가 보게 될 화면을 의미하며,
화살표는 직사각형과 다이아몬드를 연결해주며,
다이아몬드는 사용자가 취하게 될 행동을 의미한다.
User flow를 통해 UX를 디자인할 수 있음을 이해한다.

o
User Flow 다이어그램을 그리면서 사용자 흐름을 작성하면,
필요한 기능을 추가하고, 필요 없는 기능은 삭제하면서 UX를 개선할 수 있다.
간단한 user flow를 그릴 수 있다.

o
[👇 간단한 user flow]

제이콥 닐슨의 10가지 사용성 평가 기준을 기억한다.

o
사용자 평가 기준 중에 하나로 더 보기 좋고 효율적인 UI와 더 나은 UX를 만들 수 있다.
제이콥 닐슨의 사용성 평가 기준이 각각 어떤 의미인지 이해한다.
o
1) 시스템 상태의 가시성 (Visibility of System Status)
: 적절한 피드백을 통해 사용자에게 진행 상황에 대한 정보를 제공한다.
ex) 파일 첨부를 위한 업로딩 상황을 보여준다.

2) 시스템과 현실 세계의 일치 (Match between System and the Real World)
: 사용자에게 친숙한 용어, 단어, 구문, 개념 등을 사용한다.
ex) 실제 악기의 생김새와 유사한 연주 애플리케이션

3) 사용자 제어 및 자유 (User Control and Freedom)
: 사용자의 실수를 대비하여 현재 진행 중인 작업에서 벗어나거나 실행을 취소하는 방법으로 사용자에게 탈출구를 제공한다.
ex) 삭제 시 바로 삭제되지 않고, 휴지통으로 이동하거나 실행취소 버튼을 누르도록 한다.

4) 일관성 및 표준 (Consistency and Standards)
: 외부 일관성과 내부 일관성이 있다.
- 외부 일관성은 사용자가 익숙한 UI를 제공하여 사용자가 사용함에 있어 편리하도록 한다.
- 내부 일관성은 사용자가 제품을 사용함에 있어 혼란스럽지 않도록 동일한 구조로 정보를 제공해야 한다.
  ex) 동일한 모양, 위치, 버튼 크기 등
5) 오류 방지 (Error Prevention)
: 오류가 발생하기 쉬운 상황을 제거하여 사용자의 실수를 방지한다.
ex) 삭제 버튼을 눌렀을 때, 확인 메시지를 팝업창으로 띄워 물어본다.

6) 기억보다는 직관 (Recognition rather than Recall)
: 사용자가 기억해야 하는 정보를 줄여줌으로써 사용자가 보다 나은 서비스를 경험하도록 한다.
ex) 최근 검색 기록 노출, 검색 기록 저장

7) 사용의 유용성과 효율성 (Flexibility and Efficiency of Use)
: 초보자와 전문가 모두에게 개별 맞춤 기능을 제공하도록 한다.
ex) 프로그램의 단축키를 사용자가 직접 설정할 수 있도록 한다.

8) 미학적이고 미니멀한 디자인 (Aesthetic and Minimalist Design)
: 인터페이스에 관련이 없거나 불필요한 정보가 포함되지 않도록 한다.
ex) 마이페이지나 장바구니처럼 사용 빈도가 적은 메뉴를 다 보여줄 필요 없이
필요할 때만 볼 수 있도록 숨겨놓는다

9) 오류의 인식, 진단, 복구를 지원
(Help users Recognize, Diagnose, and Recover from Errors)
: 사용자가 이해할 수 있는 언어를 사용하여, 문제가 무엇인지 정확하게 사용자에게 알려주고, 해결 방법을 제시한다.
ex) 생년월일을 6글자로 적었을 시, 생년월일은 8글자로 적어야 한다.는 메시지를 보여준다.

10) 도움말 및 설명 문서 (Help and Documentation)
: 추가 설명이 필요 없는 것이 가장 좋지만,
상황에 따라 이해하는 데 도움이 되는 문서를 제공한다.
ex) 비밀번호 설정 시, 강력한 비번 추천 받기
와이어프레임과 프로토타입의 특징을 기억한다.

o
+) section 1-unit 4-chapter1 참고
와이어프레임은 선으로 틀을 잡는다는 뜻으로 제품 기획 단계에서 페이지를 어떻게 구성할지, 페이지의 구조를 잡기 위한 목적으로 만든다.
와이어프레임을 표현할 때, 품질 수준(정확도)을 의미하는
fidelity(피델리티)에 따라 3가지로 나뉜다.

1) Lo-Fi Wireframe(Low Fidelity Wireframe)
: 손으로 빠르게 그린 수준의 와이어프레임으로 시간이 많이 들지 않고
수정하거나 새로운 의견을 반영하기 쉽다.
주로 아이디어를 구체화시키며 큰 그림을 잡을 때 좋다.

2) Mid-Fi Wireframe(Middle Fidelity Wireframe)
: 아이디어가 어느 정도 구체화되고, 확정된 후에 보기 좋게 다듬어 준 와이어프레임으로 이 수준에서는 와이어프레임을 보고도 해당 페이지가 어떻게 작동될 지 예상 가능하다.

3) Hi-Fi Wireframe(High Fidelity Wireframe)
: 와이어프레임을 완성본에 가깝게 구현한 수준으로, 와이어프레임보다는 목업에 가까운 형태다. 따라서 수정하기도 어렵고, 작성하는 데에도 시간이 오래 걸리기 때문에 와이어프레임을 작성하는 목적에는 맞지 않아서
거의 2단계 Mid-Fi Wireframe 까지 만드는 것이 좋다.

반면 프로토타입은 개발 하기 전에 작성하며,
실제 제품과 거의 비슷하게 구현한 것으로 페이지 이동과 상호작용이 가능하다.
프로토타입의 목적은 UI의 상호 작용을 시뮬레이션하는 것이다.
프로토타입 역시 최종 결과물과 유사한 정도에 따라 fidelity(피델리티)로 나뉜다.

1) Lo-Fi Prototype(Low Fidelity Prototype)
:구체적인 내용이 작성되어 있지 않은 상태에서 간단한 상호 작용과
페이지 이동 정도만 테스트해 볼 수 있는 수준을 의미한다.
User Flow 상에서 빠지거나 어색한 기능 혹은 페이지가 없는지 빠르게 검토할 수 있다.

2) Mid-Fi Prototype(Middle Fidelity Prototype)
: Hi-Fi 프로토타입처럼 완성도가 높지는 않지만,
Low-Fi 프로토타입 보다는 최종 결과물에 가까운 수준을 의미한다.
사용성 테스트를 하기 위해서는 적어도 이 수준의 프로토타입을 작성하는 것이 좋다.

3) Hi-Fi Prototype(High Fidelity Prototype)
: 최종 결과물과 거의 유사한 수준을 의미한다.
이 단계에서 디자인을 거의 확정하게 되며, 실제 제품과 거의 다를 것 없이
작동하기 때문에 사용성 테스트가 가능하다.
테스트를 통해 개발 비용이 들어가기 전에 UI/UX 관련 문제를 발견하고,
수정할 수 있어서 비용 절감 효과를 볼 수 있다.
와이어프레임과 프로토타입을 피델리티에 따라서 구분할 수 있다.

o (위에서 설명)

[👇 피델리티에 따라 구분한 와이어프레임]

[👇 피델리티에 따라 구분한 프로토타입]
와이어프레임과 프로토타입의 차이점을 이해한다.

o
[👇 차이점]

프로토타입만 잘 작성해도 화면 구성과 사용자 흐름(user flow)을 개선함으로써
좋은 UI와 좋은 UX를 디자인할 수 있어 최종 결과물의 완성도를 향상할 수 있다.
또한 프로젝트 기획 내용을 직관적으로 전달할 수 있기 때문에
프로젝트 내부 인원 뿐만 아니라 외부 인원과의 소통에도 큰 도움이 된다.