[TIL] #24. UI / UX

2022.6.27. (월)

1. 오늘의 소감

• 오늘은 UI / UX의 개념과 UI 디자인 패턴 및 레이아웃 구성법, 그리고 UX 평가 기준에 대해 배웠다. 여러모로 개발 전 기획 단계에서 활용할 수 있는 기초 지식들이었다! 특히 ‘피터모빌의 벌집 모형' 이나 ‘제이콥 닐슨의 10가지 사용성 평가 기준'은 기획자나 디자이너와 소통할 때도 활용할 수 있을 듯 하다.
• 아무래도 개발자는 구현과 기능에만 치우쳐서 코딩하다보니 기획자나 디자이너분들보다 UI / UX를 신경을 덜 쓰게 된다🤔. 하지만 프론트엔드에서는 개발자도 UI / UX 를 이해해야 더 좋은 화면 구현할 수 있고, 현업에서 기획자와 디자이너와의 대화가 오고갈 때 요구사항을 제대로 이해할 수 있다. 앞으로도 UI / UX 에 대해 꾸준히 공부하고, 코딩할 때도 사용자 경험을 고려하는 습관을 들여야겠다.🔥
• 나는 UI 라고 하면 보통 화면의 그래픽 요소(GUI)만 생각했었는데, 물리적 UI 로서 키보드와 마우스도 UI에 해당된다는 사실이 신기했다. UI는 사용자 인터페이스라는 말 그대로, 사람과 컴퓨터가 상호작용하는 시스템, 다른 말로 매개체, 접점이다…! 즉 우리가 어떤 소프트웨어를 사용하기위해 사용하는 매개체(화면이든, 물리적 요소든)가 있다면 그건 UI라고 부를 수 있다. 다만 프론트엔드 개발자 입장에서 주로 다루게 될 UI 요소는 GUI 기 때문에 UI를 GUI 라고 생각해도 된다. (정확하게는 GUI 는 UI 의 일부분)

2. 학습한 키워드

• UI, UX, UI 디자인 패턴, 컬럼 그리드 시스템, 피터 모빌의 벌집 모형(= 좋은 UX 를 만드는 요소), User Flow, 제이콥 닐습의 10가지 사용성 평가 기준, 휴리스틱, UI 컴포넌트들(모달, 자동완성, 드롭다운, 아코디언, 토글, 태그 등등…)

3. 키워드를 바탕으로 학습 내용 설명해보기

• UI 란 무엇인가? 사용자가 컴퓨터와 상호작용하기 위해 필요한 매개체이다.
• UI 는 화면의 그래픽 요소(GUI) 만 의미하지 않는다. 키보드나 마우스도 사용자가 컴퓨터와 상호작용하는데 필요한 매개체이기 때문에 (물리적) UI라고 할 수 있다. 다만 프론트엔드 개발자 입장에서 다루게 될 UI 는 거의 GUI 이기 때문에 UI = GUI 라고 봐도 무방하다. (정확히는 GUI 는 UI 의 일부분이다.)
• UX 란 무엇인가? 사용자가 제품이나 서비스에 관해 얻는 총체적인 경험이다.
• 총체적이란 말은 제품이나 서비스 그 자체에 대한 경험뿐만 아니라, 홍보, 접근성, 사후 처리 등 직간접적인 모든 경험을 포함한다는 의이이다. UX는 당연하게도 UI를 포함하는 개념이다. 물론 프론트엔드 개발자에게 가장 중요한 UX는 UI다. (그 중에서도 GUI)
• UX 와 UI는 보완 관계다. UX가 좋지 않은 곳을 발견해 UI 개선점을 찾아낼 수 있고, UI를 개선해 UX를 향상시킬 수 있다. 주의할 것은, 좋은 UX 가 좋은 UI를 의미하거나, 좋은 UI가 좋은 UX를 보장하지는 않는다. 하지만 나쁜 UI 는 나쁜 UX를 유발한다.
• UI 디자인 패턴은 자주 사용되는 UI 컴포넌트들을 의미한다. 대표적인 UI 디자인 패턴으로 모달, 토글, 탭, 태그, 드롭다운, 아코디언, 캐러셀, 페이지네이션, GNB, LNB 등이 있다.
• 모달(Modal)은 기존 화면 위에 오버레이 되는 창이다. 모달 창을 닫기 전까지 기존 화면과 상호작용 할 수 없다. 모달과 팝업은 다르다. 팝업은 새 웹창을 띄우는 것이기에 브라우저에 의해 강제로 막힐 수 있다(팝업 허용 메시지를 떠올려보자). 꼭 보여주고 싶은 내용이라면 모달을 사용하는 게 좋다.
• 피터 모빌의 벌집 모형은 좋은 UX를 만드는 요소 7가지를 소개하고 있다.
  • 유용성 - 사용 가능한가? (목적에 맞는 기능을 제공)
  • 사용성 - 사용하기 쉬운가? (가능한 단순하고 직관적)
  • 매력성 - 매력적인가? (사용자에게 긍정적 감정 일으키는지)
  • 신뢰성 - 신뢰할 수 있는가? (회사가 폐단을 일으키지 않는지)
  • 접근성 - 접근하기 쉬운가? (웹 접근성 요소)
  • 검색 가능성 - 원하는 기능이나 정보를 찾기 쉬운가? (검색창, 네비게이션 바 등 제공)
  • 가치성 - 가치를 제공하는가? (모든 요소를 총합한 평가, 즉, 그래서 쓸만한가?)
  ⇒ 피터 모빌은 서비스 기획 시 UX 고려 요소로 사용해도 되지만, 제품이나 서비스의 UX 평가 요소로 활용하기도 좋다. 7각형이라서 방사형 그래프 그리기 좋다!
• 제이콥 닐슨의 10가지 사용성 평가 기준내 식대로 이 10가지 기준을 쉽게 풀어쓰면 이렇다.
  1. 피드백 보여주자 (파일 업로드 % 보여주기)
  2. 친숙한 단어 & 이미지(아이콘) 쓰자 (연주 앱 악기 메뉴가 실제 악기 이미지 or 아이콘)
  3. 실행 취소 기능 만들자 (삭제 후 실행취소 버튼 제공)
  4. 익숙하고 일관적인 디자인 사용하자 (플랫폼 업계 관습 디자인 따르기, 내부 디자인도 일관적이게)
  5. 실수 방지용 확인 과정 만들자 (삭제 버튼 누른 후 정말 삭제할 것인지 확인 한 번 더)
  6. 떠올리기 쉽게 만들자 (사용자가 기억해야할 정보 줄이기, 최근 검색 기록)
  7. 뉴비용, 고인물용 기능 둘 다 제공하자 (단축키 설정 창)
  8. 보기좋은 UI 가 쓰기도 좋다. (미학적이고 미니멀하게. 사용 빈도 적은 메뉴 숨기기, 중요한 것 부터 잘 제공하자)
  9. 문제가 뭔지 정확히 알려주자, 해결방법도 (아이디 유효성 통과 조건 표시)
  10. 사용자가 모르는 거 없게 하자 (툴팁)
  ⇒ 사용성 평가 기준은 서비스 중인 앱 평가에도 사용할 수 있지만, 제품 설계 단계에서 앱 기획을 위해 사용할 수도 있다.