🍰 [221024 TIL] For the users, by the users, of the users…

 

✏️ 오늘 배운 것

UI/UX

UI는 사용자 인터페이스를, UX는 사용자 경험을 이르는 말로

사용자가 제품이나 서비스와 상호 작용하는 시스템과

이것을 이용하며 사용자가 직간접적으로 얻은 총체적 경험이

각각 UI와 UX이다.

사용자 친화적인 경험을 제공하기 위해 이미 정형화된 다양한 UI 디자인 패턴이 있고, ui-patterens.com 에서 여러 UI 패턴을 확인 가능하다.

UI 컴포넌트들은 컬럼 그리드 시스템이라는 UI 레이아웃에 따라 배치할 수 있다. 참고용 사이트 ⇒ material.io

 

피터 모빌의 7가지 UX 모델인 유용성, 사용성, 매력성, 신뢰성, 접근성, 검색 가능성, 가치성을 통해 UX의 평가를 할 수 있다.

또한 User Flow를 작성하여 어색하거나 매끄럽지 않은 부분을 수정하거나, 있으면 좋은 기능을 추가하거나, 없어도 되는 기능을 삭제할 수 있어 UX를 높일 수 있다.

 

UI와 UX는 제이콥 닐슨의 10가지 사용성 평가 기준에 따라 평가할 수 있다.

 

🍑 새롭게 알게 된 것

User Flow의 작성 방법

User Flow는 사용자가 제품에 진입한 시점을 시작으로 취할 수 있는 모든 행동을 의미한다.

 

User Flow 다이어그램을 작성할 때 기본적으로 사용하는 것으로는

사용자가 보게 될 화면인 직사각형
사용자가 취하게 될 행동인 다이아몬드
두 요소를 연결하는 화살표

세 가지의 요소가 있다.

 

게시판이 있는 웹사이트를 위한 User Flow 다이어그램

이 때 다른 페이지로 이동하고자 한다면?

게시판 페이지로 이동하는 버튼을 추가하여 문제를 해결한다.

게시판 페이지 내에서 특정 게시글을 찾아내고 싶다면?

게시글 검색 기능을 추가하여 쉽게 게시글을 찾을 수 있도록 UX를 개선한다.

 

시간복잡도

시간복잡도는 오늘 Daily Coding을 풀면서 제대로 접하게 된 개념이다.

이전에도 몇 번 수업을 들으며 들어본 적이 있는데, unshift()를 사용하면 배열 맨 앞에 요소를 추가할 수는 있지만 시간복잡도에서 걸린다거나 하는…

 

오늘 Daily Coding은 피보나치 수열을 재귀로 호출하는 문제였는데, 이미 재귀로 호출을 해보았지만 문제는 시간복잡도였다!

 

제일 쉽게 구현할 수 있는 코드인

function fibonacci(n) {
	if (n <= 1) return n;

	return fibonacci(n-1) + fibonacci(n-2);
}

는 한 번 코드를 수행하기 위해 무조건 n-1, n-2일 때의 함수를 호출해야 한다. n-1과 n-2일 때의 코드는 또한 각각 0과 1이 아니라면, 코드 수행을 위해 n-2, n-3 그리고 n-3, n-4를 또 호출해야 한다.

 

결국 이 코드는 하나의 코드를 수행하기 위해 호출을 2^N회 하기 때문에 O(2^N)의 시간복잡도를 가진다.

 

각 시간복잡도에 따른 그래프는 위와 같다. 참고로 O(2^N)의 시간복잡도는 horrible의 범위에 들어간다..ㅎㅎ

따라서 호출 횟수를 줄이기 위해 이미 계산된 피보나치 수열의 n번째 수는 저장해서 값을 불러내 O(N)의 시간복잡도를 갖도록 코드를 설계하는 방법을 배우게 되었다.

 

🙀 어려웠던 것

User Flow 다이어그램을 직접 그려봐야 익숙해질 것 같다!

사용자의 입장에서 무엇이 필요한 기능이고 무엇이 쓸모없는지 생각하는 것은 사실 코드 작성보다도 어려운 과제일 것이라는 생각이 든다..ㅋㅋ

UX가 유용성, 사용성, 매력성, 신뢰성, 접근성, 검색 가능성을 모두 고려하여 가치성까지 갖춰야 하기 때문에…

얼핏 보면 UI와 UX가 개발하는데 크게 영향을 주지 않을 법도 하지만 또한 가장 먼저 영향을 행사하기 시작하는 부분일 테니… 어렵지 않을 수 없다..!!

 

그리고 오늘 배운 것은 기본적인 세 개의 요소였는데 추가적인 다른 요소는 없는지 더 찾아봐야 할 것 같다.

 

✨ 느낀점

UI와 UX는 프론트 개발에서 생각보다 더 중요한 작용을 한다!

혼자 무언가를 만들어보려다가도 무엇을 해야할 지 모르겠다고 느끼는 가장 큰 이유가 이런 UI와 UX의 고려 없이 무작정 뭔가를 만들겠다!! 라고 생각하고 있기 때문이 아닐까 싶기도 하다.

 

선배 기수들의 깃허브를 봤을 때 README.md에 항상 사용자 흐름이라는 다이어그램이 존재했는데, 오늘 배운 내용으로 왜 해당 다이어그램이 필요한지 알 수 있었고, 더 자세한 설계를 할 수 있음을 느끼는 시간이었다.

모쪼록 수업으로 배우는 내용들은 사용할 수밖에 없는 것들이니 개인적으로 프로젝트를 하면서도 한 번씩 꼭 써봐야겠다!!