u i _ u x

UI, UX 개념

hee.hee 2022. 6. 27. 13:22

UI

UI(User Interface, 사용자 인터페이스)는 사람들이 컴퓨터와 상호 작용하는 시스템을 의미한다. 화면상에서의 상호 작용이 더 직관적이고 간편하기 때문에 현대 사회에서는 그래픽 UI, 즉, GUI(Graphical User Interface)가 중요하다. GUI는 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업 환경을 말한다. GUI의 예시는 우리가 보는 운영체제(Window, Mac OS)의 화면, 혹은 애플리케이션 화면이 있습니다. 프론트엔드 개발자로서의 UI는 대부분 이 GUI를 의미한다. 프론트엔드에서 UI는 곧 GUI를 의미한다고 봐도 좋다.

UX

UX(User Experience, 사용자 경험)의 사전적 의미는 사용자가 어떤 시스템, 제품, 서비스를 직•간접적으로 이용하면서 느끼고 생각하는 총체적 경험. 제품, 서비스 그 자체에 대한 경험은 물론, 홍보, 접근성, 사후 처리 등 직간접적으로 관련된 모든 경험을 사용자 경험이라고 할 수 있다. 제품과 관련된 모든 말 그대로 총체적 경험이 UX에 영향을 준다.

UX에 영향을 주는 이 많은 요소 중에 프론트엔드 개발자에게 가장 중요한 요소는 바로 UI이다. 좋은 프론트엔드 개발자라면 제품이나 서비스의 UI가 사용자로 하여금 가능하면 좋은 UX를 가질 수 있도록 해야한다.

좋은 UI -> 좋은 UX
나쁜 UI -> 나쁜 UX
좋은 UX !== 좋은 UI

나쁜 UI는 보통 나쁜 UX를 유발한다. UI와 UX는 서로 다르지만 떼려야 뗄 수 없는 관계이며, 서로를 보완하는 역할을 한다. UX가 좋지 않은 곳을 찾아냄으로써 UI 개선점을 찾아낼 수 있고, UI를 개선함으로써 UX가 좋아지기도 한다. 여기서 UX가 UI를 포함하는 개념이다. 일반적으로 UI의 형태에 따라 UX가 결정되는 경우가 많습니다만, 반대로 좋은 UX가 좋은 UI를 의미하지는 않는다.

UI 디자인

UI 디자인 패턴

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

자주 쓰이는 UI 디자인 패턴을 익혀두면 UI를 디자인하기 보다 쉬워지고, 프론트엔드 개발자, 디자이너, PM과의 의사소통도 원활해져 협업 효율도 높아진다.

자주 쓰이는 UI 디자인 패턴의 예시

https://urclass.codestates.com/77beef40-40e0-401b-8c0a-08e4ddac0601?playlist=2258

urclass.codestates.com

UI 레이아웃 - 그리드 시스템

https://urclass.codestates.com/540ea706-6733-4fcb-a252-68a230f173f5?playlist=2258

urclass.codestates.com

https://material.io/design/layout/responsive-layout-grid.html#columns-gutters-and-margins

Material Design

Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.

material.io

UX 디자인

좋은 UX를 만드는 요소, "피터 모빌(Peter Morville)의 UX 7요소"

유용성(Useful) : 사용 가능한가?
사용성(Usable) : 사용하기 쉬운가?
매력성(Desirable) : 매력적인가?
신뢰성(Credible) : 신뢰할 수 있는가?
접근성(Accessible) : 접근하기 쉬운가?
검색 가능성(Findable) : 찾기 쉬운가?
가치성(Valuable) : 가치를 제공하는가?

https://urclass.codestates.com/a614cceb-7a0b-4648-b3bf-781438f867e8?playlist=2258

urclass.codestates.com

User Flow와 다이어그램

https://urclass.codestates.com/3c438353-2294-49a9-a9a0-852daca6dbc4?playlist=2258

urclass.codestates.com

UI/UX 사용성 평가

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

https://urclass.codestates.com/46a4ac69-e083-4826-a4b4-49b5056aa95a?playlist=2258

urclass.codestates.com

나의 언어로 정리하기

UI, UX란?

UI란 User Interface로, 유저와 상호작용하며 소통하는 수단을 말한다. 컴퓨터에서 모니터, 마우스, 키보드 등도 UI이다.프론트엔드에서 말하는 UI는 GUI( Graphic User Interface) 라고 볼 수 있다. 그래픽으로 유저와 소통하는 것을 말한다.UX는 User Experience, 사용자 경험. 웹앱을 사용하며 느끼는 모든 것들이 사용자 경험으로 이어진다.UI는 UX에 포함되며, 좋은 UI는 좋은 UX로 이어진다. 하지만, 좋은 UX가 곧 좋은 UI를 의미하는 것은 아니다.

자주 쓰이는 UI 디자인 패턴

모달, 토글, 탭, 태그, 자동완성, 드롭다운, 아코디언, 캐러셀, 무한스크롤, 페이지네이션, GNB와 LNB가 있다.각각의 디자인 패턴을 적절한 상황과 용도, UX를 고려하여 사용하면 된다.

UI 레이아웃

위에서 이야기한 다양한 디자인 패턴으로 만들어진 컴포넌트들을 어떻게 배치하는지에 대한 것이다.

컬럼 그리드 시스템은 웹 디자인에서 많이 쓰이는 레이아웃 방법론이다.

레이아웃의 구성 요소는 세가지. 마진, 컬럼, 거터. 컨텐츠가 들어갈 화면을 세로로 나누었을 때 양 옆의 남는 공백은 마진, 거터와 함께 컨텐츠가 들어갈 자리가 컬럼, 컨텐츠 사이와 컬럼의 간격이 거터이다. 이 세 간격을 조절하고 활용하며 UI 레이아웃을 만든다.

보통 스마트폰은 4, 태블릿은 8, 모니터는 12개의 컬럼으로 잡는다. 이 세 사이즈 모두에 대응할 수 있게 반응형 웹으로 만들면 더 좋은 UI가 될 수 있고, 좋은 UX로 이어질 수 있다.

좋은 UX를 만드는 요소(피터모빌의 UX 7가지 요소)

유용성(사용 그 자체), 사용성(쉬운가), 매력성, 신뢰성, 접근성(누구에게나 장벽이 없는가), 검색 가능성, 가치성

제이콥 닐슨의 10가지 사용성 평가 기준

앱 평가에 쓰이기도 기획 단계에서 쓰이면 앱 완성도를 높이고 효율적으로 개발할 수 있을 것이다.

1. 시스템의 가시성(지속적인, 가시적인 피드백, 상태)

2. 시스템과 현실 세계의 일치(내부 전문 용어 아닌, 현실과 닮게)

3. 사용자 제어 및 자유(실수 탈출구)

4. 일관성 및 표준(사용자가 익숙한 것)

5. 오류 방지(오류 상황을 방지)

6. 기억 보다 직관(사용자가 기억하지 않아도 됨)

7. 사용자의 유연성과 효율성(사용자 맞춤)

8. 미학적이고 미니멀한 디자인

9. 오류의 인식, 진단, 복구를 지원(뭐가 문제인지, 어떻게 해결할지 알려줌)

10. 도움말 및 설명 문서(뭐가 필요한지 도움이 되는 요소/안내를 제공)