UI / UX

상준·2024년 1월 31일

🍔 기초 지식 시리즈 🍔 (개발자가 되기 위해 꼭 알아야하는 IT 용어 책 내용 정리본)

목록 보기

3/41

리액트를 공부하시는 분들은 처음에 공식 문서나 책을 접하게 되고, 처음에 리액트 소개를 보게 됩니다. 들어가보면 다음과 같이 적혀있는데요, 여기서 사용자 인터페이스가 오늘 다룰 UI (User Interface)를 의미합니다.

UX는 User Experience의 약자로 정보 기기와 서비스를 사용하는 사람이 느끼는 경험을 의미합니다.
UX 역시 단순한 디자인 만을 고려하는 것이 아니라, 사용자와 제품 또는 서비스 간의 모든 상호 작용을 고려해야합니다. 여러 가지 요소가 UX를 형성하며, 중요한 점은 사용자가 제품, 서비스를 어떻게 사용하는지, 인식하는지에 영향을 미칩니다.

입력 장치(Input Devices) : 키보드, 마우스, 터치 스크린 등과 같은 장치를 통해 사용자가 시스템에 명령을 입력할 수 있습니다.
출력 장치(Output Devices) : 화면, 프린터, 스피커 등을 통해 시스템이 사용자에게 정보를 제공합니다.
인터페이스 요소(Interface Elements) : 버튼, 텍스트 상자, 메뉴 등과 같은 시각적 또는 그래픽 요소들이 사용자와 상호 작용하는 데 사용됩니다.
그래픽 디자인 : UI의 시각적인 부분은 사용자 경험을 크게 영향을 미칩니다. 아이콘, 색상, 레이아웃 등이 사용자가 시스템을 사용하는 동안의 편의성과 효율성을 결정합니다.
커맨드 및 제어 : 명령 줄 인터페이스(CLI)나 버튼, 메뉴 등을 통해 사용자는 시스템에 명령을 내릴 수 있습니다.
피드백 메커니즘(Feedback Mechanism): 사용자의 입력에 대한 시스템의 반응이나 상태 정보를 제공하여 사용자에게 피드백을 제공합니다.

유용성 (Usability) : 제품이나 서비스가 사용자의 목적을 얼마나 잘 수행하는지를 나타냅니다. 즉, 쉽게 사용하고 이해할 수 있어야 합니다.
유연성 (Flexibility) : 다양한 사용자의 요구에 부응할 수 있도록 설계되어야 합니다. 서로 다른 사용자 프로필과 필요에 따라 조절 가능한 기능이나 설정이 있는 것이 중요합니다.
효율성 (Efficiency) : 사용자가 목표를 달성하는 데 소요되는 시간과 노력을 최소화해야 합니다. 빠르게 작업을 수행하고 목적에 도달하는 것이 중요합니다.
만족도 (Satisfaction) : 사용자가 제품이나 서비스를 사용하며 얼마나 만족하는지에 대한 경험입니다. 디자인, 성능, 서비스 품질 등이 만족도에 영향을 미칩니다.
접근성 (Accessibility) : 모든 사용자, 포괄적으로 장애가 있는 사용자도 포함하여 모든 사용자에게 적절하게 제공되어야 합니다.
인상 (Aesthetics) : 디자인적으로 매력적이고 사용자에게 시각적으로 마음에 드는 요소를 포함하여 쾌적한 인상을 남겨야 합니다.
사용자 피드백 및 반응 (User Feedback and Response) : 사용자의 의견, 행동, 피드백에 민감하게 반응하고, 이를 통해 지속적으로 개선되어야 합니다.

이렇게 봐도 이해가 안될 수 있습니다. 한 가지 예시를 준비했어요.
비즈니스가 성공하기 위해서는 사람들이 상품을 구매하고 사용하기까지 고객이 어떤 경험을 하는지 자세하게 봐야하죠. 사람들을 위해 상점의 인테리어를 예쁘게 가꾸고, 고객 동선이 좀 더 편하도록 동선을 정비하기도 합니다.
IT 서비스에서도 비즈니스의 인테리어와 동선에 해당하는 용어가 바로 UI / UX 입니다. 디자인 뿐만 아니라 개발 스킬로 사용자의 경험과 접점 요소를 한층 매력있게 향상시키는 것이죠

우리가 앱을 사용하다보면 사용하기 불편하다고 생각되는 앱들을 발견할 수 있습니다. 버튼을 눌러도 아무런 표시도 없고, 화면 전환도 렉이 걸리는 앱들은 사용하기에 불편함이 느껴지죠.
반면 카카오톡, 네이버, 유튜브 등등 많이 사람들이 현재도 자주 이용하는 앱들은 이런 사용성이 매우 좋습니다. 메뉴 디자인도 예쁘고, 각 요소 역시
정갈하게 배치 되어있다고 생각하는데요, 앱 간 이러한 차이를 만드는 요소가 UI / UX입니다.

먼저 UI부터 살펴보겠습니다. UI는 사용자의 전자 기기가 상호작용하는 지점을 의미합니다. 스마트폰의 터치스크린, 키오스크의 화면 등등이 이에 해당하죠. 여기서 세부적으로 화면의 색상, 글씨체, 그래픽 등등이 UI에 해당하게 됩니다.
예시로 사진과 같은 카페를 보게 되면 외관부터 예뻐서 눈길이 가게 됩니다. 실제로 카페에 가면 판매하는 메뉴보다도 먼저 카페의 인테리어가 눈에 들어옵니다. 이와 마찬가지로 기능을 사용하기 이전에 앱의 디자인을 접하게 되는데요, 사용자가 만족하기 위해서는 앱의 목적에 맞는 메뉴 배치와, 여러 요소들을 충족해야 사용자가 만족할 것입니다.

UX는 사용자와 회사, 회사의 서비스 또는 제품 사이의 상호 작용에서 발생하는 모든 측면을 아우르는 것이라고 정의되었습니다. 이러한 정의 그대로 UX는 제품이나 서비스를 사용자가 소비하면서 느끼는 경험들을 의미하죠.
인스타에서 디자인이 예쁜 카페 홍보 포스팅을 보고 해당 카페에 도착했는데 대기 줄이 엄청나게 길다면 커피를 마시더라도 만족도가 떨어질 수 밖에 없을겁니다. 대기업 회사들은 이런 대기 줄 문제를 해결하기 위해서 모바일 주문 방식을 도입하였죠.
이 외에도 네비게이션 역시 대표적인 예시입니다. 운전 중에 정확한 길 안내, 교통 상황을 표시해줘야 사용자의 불편함이 줄어들겠죠. 저도 운전을 할 경우에 네비게이션의 막히지 않는 길로 자동 변경해주는 기능을 보고 세상 참 좋아졌구나를 느꼈던 경험이 있습니다. 이처럼 UX역시 일상생활에 녹아들어 사용자 중점으로 흘러갑니다.