S3) Unit 2. [사용자 친화 웹] UI/UX

📣 UI/UX 개념

✔️ UI(User Interface) : 사람들이 컴퓨터와 상호 작용하는 시스템
➰ 화면상의 그래픽, 키보드, 마우스 등

✔️ GUI(Graphical User Interface) : 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업 환경
➰ 운영체제의 화면, 애플리케이션 화면, 프론트엔드 개발자로서의 UI는 대부분 GUI를 의미

✔️ UX(User Experience) : 사용자가 어떤 시스템, 제품, 서비스를 직간접적으로 이용하면서 느끼고 생각하는 총체적 경험
➰ 제품, 서비스 그 자체에 대한 경험 + 홍보, 접근성, 사후처리 등 관련된 모든 경험을 말한다.

📣 UI와 UX 의 관계

✔️ UX는 UI를 포함한다.
➰ 좋은 UX가 좋은 UI를 의미하거나, 좋은 UI가 항상 좋은 UX를 보장하지는 않는다.
➰ 나쁜 UI는 보통 나쁜 UX를 유발한다.
➰ 둘은 서로 뗄 수 없는 관계이며, 서로를 보완하는 역할을 한다.

---

📣 UI 디자인 패턴

✔️ UI 디자인 패턴 : 프로그래밍 시 자주 반복되어 나타나는 문제점을 해결하고자, 과거의 다른 사람이 해결한 결과물을 재사용하기 좋은 형태로 만든 패턴
➰ 자주 사용되는 UI 컴포넌트

1️⃣ 모달(Modal)
✔️ 기존에 이용하던 화면 위에 오버레이 되는 창
➰ 닫기 버튼, 모달 범위 밖을 클릭하면 모달이 닫히는 것이 일반적이며, 모달을 닫기 전에는 기존 화면과 상호작용 할 수 없다.
➰ 다른 브라우저 페이지를 여는 팝업창과는 구분되는 개념!

2️⃣ 토글(Toggle)
✔️ On/Off를 설정할 때 사용하는 스위치 버튼
➰ 색상, 스위치의 위치, 그림자 등의 시작적 효과를 주어 사용자가 토글의 상태를 직관적으로 알 수 있게 만들어야 한다.

3️⃣ 탭(Tab)
✔️ 콘텐츠를 분리해서 보여주고 싶을 때 사용하는 UI 디자인 패턴
➰ 가로 한 줄로 배열된 형태가 가장 흔하며, 세로로 배열하거나 여러 줄로 배열할 수도 있다.
➰ 각 섹션의 이름이 너무 길지 않아야 하고, 섹션의 구분이 명확해야 하며, 현재 어떤 섹션을 보고 있는지 표시해 주어야 한다.

4️⃣ 태그(Tag)
✔️ 콘텐츠를 설명하는 키워드를 사용해서 라벨을 붙이는 역할
➰ 사용자들은 자신이 작성한 콘텐츠에 태그를 붙임으로써 콘텐츠를 분류할 수 있고, 태그를 사용하여 관련 콘텐츠들만 검색할 수도 있다.
➰ 태그로 사용될 키워드는 사용자가 직접 작성하게 만들 수도 있고, 개발자가 종류를 정해놓을 수도 있다.
➰ 태그의 추가와 제거는 자유롭게 할 수 있어야 한다.

5️⃣ 자동완성(Autocomplete)
✔️ 사용자가 내용을 입력 중일 때 사용자가 입력하고자 하는 내용과 일치할 가능성이 높은 항목을 보여주는 것
➰ 사용자가 직접 입력하는 시간을 줄여주고, 정보를 검색할 때 많이 사용한다.
➰ 너무 많은 항목이 나오지 않도록 개수를 제한하는 것이 좋고, 키보드 방향 키나 클릭 등으로 접근하여 사용할 수 있도록 하는 것이 좋다.

6️⃣ 드롭다운(Dropdown)
✔️ 선택할 수 있는 항목들을 숨겨놓았다가, 펼쳐지면서 선택할 수 있게 해주는 UI 디자인 패턴
➰ 드롭다운이 펼쳐지는 방식보다 중요한 것은 사용자가 자신이 선택한 항목을 정확히 알 수 있게 만드는 것이다.

7️⃣ 캐러셀(Carousel)
✔️ 컨베이어 벨트나 회전목마처럼 빙글빙글 돌아가면서 콘텐츠를 표시해 주는 UI 디자인 패턴
➰ 자동으로 돌아가거나, 사용자가 옆으로 넘겨야만 넘어가게끔 만들 수 있다.
➰ 콘텐츠가 넘어갈 수 있음을 직관적으로 알 수 있게 해야 한다.

8️⃣ 페이지네이션(Pagination)
✔️ 책 페이지를 넘기듯이 번호를 붙여 페이지를 구분해주는 것
➰ 페이지를 넘기기 위해서는 잠시 멈춰야 하기 때문에 매끄러운 사용자 경험과는 거리가 멀 수도 있다.

9️⃣ 무한스크롤(Infinite Scroll, Continuous Scroll)
✔️ 모든 컨텐츠를 불러올 때까지 무한으로 스크롤을 내릴 수 있는 것
➰ 페이지네이션보다는 더 매끄러운 사용자 경험을 제공하지만, 콘텐츠의 끝이 어딘지 알 수 없고 지나친 콘텐츠를 찾기 힘들다는 단점이 있다.
➰ 페이지 끝에 도달했을 때 추가 콘텐츠를 로드해서 보여주는 방식으로 구현한다.
➰ 처음부터 모든 콘텐츠를 로드해온 후 조금씩 보여주는 방식은 진정한 의미의 무한스크롤이 아니다.

🔟 GNB(Global Navigation Bar), LNB(Local Navigation Bar)
✔️ GNB : 어느 페이지에 들어가든 사용할 수 있는 최상위 메뉴
➰ 항상 동일한 위치에 있어야 한다.
✔️ LNB : GNB에 종속되는 서브 메뉴 혹은 특정 페이지에서만 볼 수 있는 메뉴

---

📣 UI 레이아웃

✔️ 그리드 시스템(Grid System) : 질서 있는 구조의 UI를 구성할 수 있게 도와주는 시스템
➰ 그리드 : 수직, 수평으로 분할된 격자무늬
➰ 화면을 격자로 나눈 다음 그 격자에 맞춰서 콘텐츠를 배치하는 방법
➰ 화면을 세로로 몇 개의 영역으로 나눌 것인가에 초점을 맞춘 '컬럼 그리드 시스템' 을 사용한다.

✔️ 컬럼 그리드 시스템(Column Grid System)
1️⃣ Margin : 화면 양쪽의 여백
➰ px 같은 절대 단위를 사용해도 되고, vw / % 같은 상대 단위를 사용해도 된다.

2️⃣ Column : 콘텐츠가 위치하게 될 세로로 나누어진 영역
➰ 컬럼 개수를 임의로 나눠도 되지만, 표준적으로 휴대폰에서 4개, 태블릿에서 8개, PC에서는 12개로 나눈다.
➰ 이미지 속 화면 크기의 구분선을 break point라고 하며, 내가 만들고자 하는 UI가 어디에 속하는지 파악하고 컬럼 개수를 정하면 된다.
➰ Column은 상대 단위를 사용하여 콘텐츠가 창 크기에 맞춰서 변하도로 설정하는 것이 좋다.
➰ 기기마다 화면의 크기가 조금씩 다르고, 브라우저의 크기를 사용자 마음대로 바꿀 수 있기 때문이다.

3️⃣ Gutter : Column 사이의 공간
➰ 콘텐츠를 구분하는데 도움을 준다.
➰ 간격이 좁을수록 콘텐츠들이 연관성 있어 보이고, 넓을수록 각 콘텐츠가 독립적인 느낌을 준다.
➰ 너무 좁거나, 너무 넓게 설정하지 않도록 주의해야 한다.
➰ Gutter는 아무리 넓어도 컬럼 너비보다는 작게 설정한다.

---

📣 좋은 UX를 만드는 요소

✔️ 피터 모빌의 벌집 모형 -> UX의 7가지 요소를 제시

1️⃣ 유용성(Useful) : 사용 가능한가?
✔️ 제품이나 서비스가 목적에 맞는 사용 가능한 기능을 제공하고 있는가에 관한 요소
➰ 꼭 목적에 맞지 않더라도 비실용적인 추가적인 기능을 제공하는지도 관련이 있다(디자인)

2️⃣ 사용성(Usable) : 사용하기 쉬운가?
✔️ 제품이 본연의 기능을 제공하는 것을 넘어서 사용하기 쉬운가에 관한 요소
➰ 기능이 아무리 잘 작동하더라고 사용자가 사용하기 어렵다면 좋은 UX를 제공하기 어렵다.
➰ UI 디자인 패턴과 연관이 깊다.

3️⃣ 매력성(Desirable) : 매력적인가?
✔️ 제품이 사용자들에게 매력적인가에 대한 요소
➰ 디자인부터 이지미, 브랜딩 등의 여러 요소들이 사용자에게 긍정적인 감정을 불러일으킬 수 있는지, 사용자들이 이용하고 싶어 하는지가 중요하다.

4️⃣ 신뢰성(Credible) : 신뢰할 수 있는가?
✔️ 사용자가 제품이나 서비스를 믿고 사용할 수 있는가에 관한 요소
➰ 결함이 있는 제품을 속여 판매하더나, 가치를 과장하여 홍보한다거나, 사용자의 개인 정보를 유출하는 등의 일이 없어야 한다.
➰ 장기적으로는 믿을 수 있는 브랜드 이미지를 구축하는 것이 좋다.

5️⃣ 접근성(Accessible) : 접근하기 쉬운가?
✔️ 나이, 성별, 장애 여부를 떠나서 누구든지 서비스에 접근할 수 있는가에 대한 요소
➰ 고연령자를 위해 글자 키우기나 돋보기 기능, 음성 안내 기능 등 누구라도 비슷한 수준의 정보를 얻을 수 있는 장치를 구비해 놓는 것이 접근성을 높여준다.

6️⃣ 검색 가능성(Findable) : 찾기 쉬운가?
✔️ 사용자가 원하는 기능이나 정보를 쉽게 찾을 수 있는가에 관한 요소
➰ 사용자가 특정 페이지에 접근하려고 할 때 찾기 힘들다면 좋은 UX를 주기 어렵다.
➰ 내비게이션 바, 검색 기능을 넣거나 콘텐츠를 직관적으로 배치하는 것이 검색 가능성을 높인다.

7️⃣ 가치성(Valuable) : 가치를 제공하는가?
✔️ 위의 언급된 6가지 요소들을 총합하여 고객에게 가치를 제공하고 있는가에 관한 요소
➰ 사용자의 가치판단기준은 각자 다르므로, 가능한 모든 요소를 고르게 고려해야 하며 해당 제품 사용자들의 공통 중요 요소를 찾아내 그 요소에 집중하는 것도 효율적이다.

---

📣 User Flow

✔️ 사용자가 제품에 진입한 시점을 시작으로 취할 수 있는 모든 행동
➰ 보통 다이어그램을 그려서 정리한다.

 

📣 User Flow 다이어그램 작성법

✔️ 기본적으로 세가지 요소를 사용한다.
1. 직사각형 : 사용자가 보게 될 화면(회원 가입 페이지, 로그인 페이지 등)
2. 다이아몬드 : 사용자가 취하게 될 행동(로그인, 버튼 클릭 등)
3. 화살표 : 직사각형과 다이아몬드를 연결시켜주는 화살표

📣 User Flow 다이어그램을 그리면 좋은 이유

1. 사용자 흐름 상 어색하거나 매끄럽지 않은 부분을 발견하여 수정할 수 있다.
2. 있으면 좋은 기능을 발견하여 추가하거나 없어도 상관 없는 기능을 발견하고 삭제할 수 있다.

➰ 다이어그램을 그리다보면 사용자 흐름을 빈틈 없이, 보다 더 편리하게 다듬어 나가는 과정을 거치면서 UX를 개선할 수 있다.

---

📣 제이콥 닐슨의 10가지 사용성 평가 기준(Jakob's Ten Usability Heuristics)

✔️ Heuristic(휴리스틱) : 완벽한 지식 대신 직관과 경험을 활용하는 방법론

1️⃣ 시스템 상태의 가시성
✔️ 합리적인 시간 내에 적절한 피드백을 통해 사용자에게 진행 상황에 대한 정보를 항상 제공해야 한다.
﹒ 피드백이 존재하나요?
﹒ 피드백이 즉시 제공되나요?
﹒ 피드백이 명확한가요?
➰ 파일 첨부를 위한 업로딩 상황을 표시한다.

2️⃣ 시스템과 현실 세계의 일치
✔️ 내부 전문용어가 아닌 사용자에게 친숙한 단어, 구문 및 개념을 사용한다.
➰ 연주 애플리케이션의 모습이 실제 악기의 생김새와 유사하다.

3️⃣ 사용자 제어 및 자유
✔️ 현재 진행 중인 작업에거 벗어날 수 있는 방법, 혹은 실수로 수행한 작업을 취소할 수 있는 '탈출구'를 명확하게 제공해야 한다.
➰ 삭제 직후에 취소할 수 있는 버튼이 잠시 나타난다.

4️⃣ 일관성 및 표준
✔️ 외부 일관성 : 일관적인 사용자 경험을 제공하기 위해 플랫폼 및 업계의 관슴을 따른다.
﹒ 사용자에게 익숙한 UI 를 제공한다.
✔️ 내부 일관성 : 제품의 인터페이스나 정보 제공에 일관성이 있어야 한다.
➰ 한 제품 내에서는 같은 인터페이스를 유지한다(버튼의 모양, 위치 등)

5️⃣ 오류 방지
✔️ 오류가 발생하기 쉬운 상황을 제거하여 사용자의 실수를 방지한다.
➰ 삭제 버튼을 눌렀을 때, 의사를 다시 한 번 확인한다.

6️⃣ 기억보다는 직관
✔️ 사용자가 기억해야 하는 정보를 줄인다.
➰ 최근 검색 했던 단어 목록을 확인할 수 있다.

7️⃣ 사용의 유연성과 효율성
✔️ 초보자와 전문가 모두에게 개별 맞춤 기능을 제공한다.
➰ 프로그램의 단축키를 직접 설정하여 사용할 수 있다.

8️⃣ 미학적이고 미니멀한 디자인
✔️ 인터페이스에는 관련 없거나 불필요한 정보가 포함되지 않도록 하며, 콘텐츠와 기능의 우선순위를 정하고 순위가 높은 것을 잘 제공하고 있는지 확인한다.
➰사용 빈도가 적은 메뉴를 다 보여줄 필요는 없다(숨겨놓았다가 필요할 때에만 볼 수 있게 한다)

9️⃣ 오류의 인식, 진단, 복구를 지원
✔️ 사용자가 이해할 수 있는 언어로 문제를 표시하고, 해결 방법을 제안한다.
➰ 영문 성을 입력해야하는 폼에서는 영어를 입력해야 함을 명확하게 보여준다.

🔟 도움말 및 설명 문서
✔️ 추가 설명이 필요 없는 것이 가장 좋지만, 상황에 따라 도움이 되는 문서를 제공한다.
➰ 간단한 안내를 통해 검색에 도움을 준다.

---

📣 와이어프레임(Wireframe)

✔️ 와이어프레임 : 선으로 틀을 잡는다 -> 제품 기획 단계에서 페이지를 어떻게 구성할 것인지 구조를 잡기 위해 만든다.
➰ 와이어프레임을 표현할 때의 품질 수준을 '피델리티'로 표현하며 3가지 레벨로 나눈다.

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

2️⃣ Middle Fidelity Wireframe(Mid-Fi Wireframe)
✔️ Lo-Fi 와이어프레임을 그리면서 아이디어가 어느정도 구체화되고 확정된 후에 보기 좋게 다듬은 것
➰ 해당 페이지가 어떻게 작동하게 될 지 예상할 수 있다.

3️⃣ High Fidelity Wireframe(Hi-fi Wireframe)
✔️ 와이어프레임을 완성본에 가깝게 작성한 것
➰ 목업에 가까운 형태이며, 시간도 많이 들고 수정도 어렵기 때문에 Hi-Fi까지 작성하는 경우는 거의 없다.

📣 프로토타입(prototype)

✔️ 프로토타입 : 실제 제품과 거의 흡사하게 구현한 것
➰ 본격적으로 개발에 들어가기 전 단게에 작성하며 UI의 상호작용을 시뮬레이션 하는 것이 목적이다.
➰ 페이지 이동과 상호 작용이 가능하다.
➰ 얼마나 최종 결과물과 흡사한지에 따라 레벨을 나눈다.

1️⃣ Low Fidelity Prototype(Lo-Fi Prototype)
✔️ 간단한 상호 작용과 페이지 이동 정도만 테스트해볼 수 있는 수준
➰ User Flow 상에서 빠지거나 어색한 기능 혹은 페이지가 있는지 빠르게 검토할 수 있다.

2️⃣ Middle Fidelity Prototype(Mid-Fi Prototype)
✔️ Lo-Fi 보다는 최종 결과물에 가깝고 Hi-Fi 보다는 완성도가 높지 않은 수준
➰ 적어도 이 수준까지는 작성해 주는 것이 사용성 테스트를 하기 위해 좋다.

3️⃣ High Fidelity Prototype(Hi-Fi Prototype)
✔️ 최종 결과물과 거의 유사한 수준
➰ 디자인을 거의 확정하고, 사용성 테스트가 가능하다.
➰ 테스트를 통해 개발 비용이 들어가기 이전에 UI/UX 관련 문제를 수정할 수 있어 비용 절감 효과를 볼 수 있다.

📣 와이어프레임과 프로토타입의 차이

	와이어프레임	프로토타입
작성 시기	기획 단계	개발 전 단계
작성 목적	화면 구조 설계	UI 상호작용 시뮬레이션
특징	정적	동적
피델리티	Low ~ Middle (High 는 거의 작성하지 않는다)	Middle ~ High (Low는 테스트에 적합하지 않다)

➰ 프로토타입만 잘 작성해도 화면 구성과 사용자 흐름을 개선함으로써 좋은 UI, UX를 디자인 할 수 있다.

---

📣 Figma

✔️ UI 디자인 & 프로토타이밍 툴

📣 Figma 특징

1️⃣ 실시간 협업 기능
➰ 한 화면에서 여러 명의 사람이 동시에 작업할 수 있는 기능을 제공한다.

2️⃣ 다양한 환경 지원
➰ 브라우저만 사용할 수 있다면 어떤 환경에서는 사용이 가능하다.

3️⃣ 자동 저장 및 버전 관리
➰ 자동 저장 기능과 히스토리 기능을 제공한다.

4️⃣ 다양한 폰트 무료 지원
➰ 구글 폰트를 활용할 수 있으며, 폰트가 없어 화면이 깨지는 현상도 발생하지 않는다.
➰ 사용자 PC에 저장된 로컬 폰트도 사용 가능하다.

5️⃣ 오토 레이아웃 기능
➰ 요소들 사이의 간격과 정렬에 규칙을 부여할 수 있고, 크기가 변하더라도 이를 유지할 수 있다.

6️⃣ 프로토타이핑
➰ Figma에서 제공하는 프로토타입 기능을 활용하면 Lo-Fi 수준의 프로토타입부터 Hi-Fi 수준까지 제작 가능하다.