[사용자 친화 웹] UI/UX - 1

코드스테이즈 41기 교육 내용을 정리하고 있습니다.
틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다.

 

✨UIUX 개념

UI

• user interface 사람이 컴퓨터와 상호 작용하는 시스템을 말한다.

UI하면 막 앱에서 버튼, 텍스트 입력 이렇게 거창한걸 생각하는데, 이것도 물로 UI에 포함 되지만 키보드, 마우스와 같이 컴퓨터에 붙어서 컴퓨터에 명령을 줄수 있는 장치도 UI이다.

 

위에서 말한 앱에서 버튼, 텍스트는 그래픽 사용자 인터페이스 GUI이다.

 

UX

• user experience 사용자 경험이다.

UX는 상당히 포괄적인 개념이라 생각한다.

제품 외형, 서비스, 편리성, 홍보, 사후처리 등 직-간접적으로 이용하면 느끼는 모든 경험이다.

 

UI와 UX

UX는 UI를 포함한다.

사실 이 말이 나에게 혼란을 주는 것 같았다.

나는 이렇게 이해 하고 싶다.

 

UX는 UI경험을 포함한다.

 

UX가 좋다고 UI가 무조건 좋다 할수 없다.

군인 시계로 알려진 카시오를 예로 들겠다.

이 시계를 바꾸는 이유는 잃어버리지 않는 이상 없다.

훈련을 수십번을 나가고, 기스가 나고, 물에 들어가고 등등

어떠한 고문을 가해도 멀쩡하다

 

빛도 나고, 알람도 해주고, 배터리도 10년전지 그런다는데..

 

이 시계를 쓰는 사람들은 UX가 좋았을 것이다

하지만 안이쁘다

 

휴가때도 이건 풀고 나간다.

 

또한 UI가 좋다고 UX가 무조건 좋다 할수 없다.

카카오 키보드를 예로 들겠다

이쁘다 카카오 어피치의 얼굴 스페이스바가 상당히 귀엽다.

무선이라 선도 없어 깔끔하다

사용은 안해봤지만 리뷰가...

 

https://www.youtube.com/watch?v=3BTSlGf8-hc 

 

✨UI 디자인 패턴

모달

기존에 이용하던 화면 위에 오버레이 되는 창을 뜻한다.

구글홈

토글

on/off 할수 있는 스위치이다

야간모드 등으로 많이 본 스위치!

탭

콘텐츠를 분리해서 보여주고 싶은 경우 사용한다.

유튜브에서 원하는 종류의 영상을 찾는 경우 상단 탭을 사용 할 수 있다

유튜브

 

태그

콘텐츠를 설명하는 키워드를 사영해서 라벨을 붙이는 역할을 한다.

블로그 글을 포스팅하면 아래 많이 볼 수 있다.

인스타 해쉬태그도..?

티스토리

드롭다운

항목을 숨겼다 펼쳐기면서 선택할 수 있게 해준다.

설문이나 간단한 가입을 하는 경우 만날수 있다

코드스테이츠

아코디언

내용을 숨겼다 버튼 등이 눌리면 콘텐츠를 쫙 보여준다.

UI를 더 좋게 하기 위해 숨겨둔다.

코드스테이츠

캐러셀

공항의 수하물 컨베이어 벨트, 또는 회전목마라는 뜻의 영단어로, 컨베이어 벨트나 회전목마처럼 빙글빙글 돌아가면서 콘텐츠를 표시해 주는 UI 디자인 패턴이다.

피파4

페이지네이션

한 페이지에 정보가 너무 많은 경우, 한 페이지에 보여줄 정보의 개수를 정해 개수 이상을 다음 페이지에 저장하고 버튼을 눌러 컨텐츠에 접근하게 한다.

구글

무한 스크롤

모든 컨텐츠를 불러 올때까지 무한하게 스크롤을 내릴수 있다.

일정 페이지에 도달하면 다음 컨텐츠를 불러옵니다.

유튜브

GNB / LNB

GNB(Global Navigation Bar)는 어느 페이지에 들어가든 사용할 수 있는 최상위 메뉴, LNB(Local Navigation Bar)는 GNB에 종속되는 서브 메뉴 혹은 특정 페이지에서만 볼 수 있는 메뉴를 뜻한다. 위 예시에서는 탭 형식으로 최상단에 위치한 메뉴가 GNB, 마우스를 올렸을 때 드롭다운 형식으로 내려오는 서브 메뉴가 LNB이다.

 

예시를 보는게 더 좋을것 같다.

상단 회사소개/ 팀문화/ 인재영입/ 블로그를 보여주는 메뉴가 GNB

아래 작고 귀여운 메뉴들이 LNB

 

UI 디자인 패턴을 적절하게 사용하면 사용자에게 좋은 경험을 분명 줄수 있다.