🤷♀️ 왜 갑자기?
최근에 사이드프로젝트도 많이 해보고 있고, 이직 준비를 하면서 겪었던 과제를 해결하면서
내가 어떤 개발자이지? 내가 지금 뭐를 중심적으로 개발했지? 라는 생각을 하게 됐다.
공통적으로 내가 대답한 답은,
"사용자의 쉬운 경험, 사용자의 익숙한 경험"을 중시 했던 것 같다.
내 생각 뿐만이 아니라, 실제로 프론트엔드가 UIUX를 공부 해야할 이유가 있다.
- 유저들의 기대치와 요구사항이 계속 변화하고 있다.
- 경쟁이 치열한 시장에서는 우수한 UI/UX가 제품 또는 서비스의 주요 차별화 요소가 되고 있다.
- 더 나은 경험을 위해 기술적 혁신과 함께 UI/UX 디자인 및 개발도 계속 발전하고 있다.
이런 생각들을 하다 나와 같은 연차와 나와 같은 생각을 하고 있는 사람들을 위해 블로그를 작성한다.
UI/UX
UI
UI (User Interface)는 사용자와 시스템 또는 애플리케이션 간의 상호작용을 표현하는 디자인 요소와 요소의 배치를 의미한다.
화면 디자인, 버튼, 메뉴, 아이콘, 색상, 레이아웃 등과 관련이 있다.
사용자가 시스템 또는 애플리케이션을 어떻게 조작하고 상호작용하는지를 시각적으로 표현한다.
UX
User Experience(사용자 경험)는 사용자가 제품, 서비스 또는 애플리케이션과 상호작용하는 과정에서 느끼는 전반적인 경험을 의미한다.
사용자의 만족도, 편의성, 효율성, 접근성 및 사용자의 감정과 관련이 있다.
사용자의 요구사항을 충족, 작업을 쉽게 수행할 수 있도록 설계하고 최적화하는 데 초점을 맞춘다.
예시 사진
이것보다 UIUX의 예시를 설명하는데에 더 나은 사진을 못 본듯.
UI의 케찹은
진짜 이쁘고, 감성적이고, 옛날 레트로 갬성을 불러일으키고, 누가봐도 이쁘다.
하지만, 딱봐도 병으로 생겨서 케찹짤때 겁나 불편하다고 생각이 든다.
UX의 케찹은
케찹을 짤때 아래로 향하게 툭툭 내려치면서, 케찹을 짯던 기억이 있을텐데, 그걸 아주 쉽게 보완했다.
아예 세워놓는 디자인을 통해 우리가 불필요한 행동을 하지 않게 되었고, 훨씬 편해졌다.
결론
UI가 괜찮다고 해서 UX까지 괜찮은 건 아니라는 걸 알려주는 이미지이다.
그리고 UX가 편리해지게 UI도 같이 변경되면서, UX는 UI를 포함하고 있다고 말할 수 있다.
이렇게 UIUX가 별개가 아니듯,
좋은 UX가 좋은 UI가 아니고
좋은 UI가 좋은 UX가 아니다.
개발자가 꼭 알아야해?
나는 꼭 알아야된다 주의의 개발자긴 하지만,
공부 안해서 나쁠 건 없다고 생각한다.
- 최근 채용공고에서 UIUX에 관심이 많은 사람 우대 조건에 많이 보이고 있다.
- 복잡해진 웹 때문에, 정보 표현하는 방식이 다양해지면서 사용자 입장에서 더 고려를 해야한다.
📜 10가지 UX 법칙
제이콥의 법칙
유저는 익숙한 경험을 토대로 새로운 제품을 판단한다.
다른 서비스에서 축적된 경험으로 다른 서비스를 이해하려고 할때 멘탈 모델이라고 부른다.
기존 방식을 아예 버린 후, 아예 새롭게 UX를 제공한다면, 유저는 새롭게 학습해야해서 불쾌할 수 있다.
*멘탈 모델 : 시스템, 사물이 실제로 어떠한 방식으로 작동할 것이라고 생각하는 인간의 사고 과정을 구조화
피츠의 법칙
목표물에 도달하는 데 걸리는 시간은 목표물의 거리와 크기에 따라 달라진다.
- 터치할 수 있는 영역간의 거리는 적당해야한다. (입력 오류가 안날 수 있는 정도)
- 너무 크기가 커서도, 너무 작아서도 안된다.
- 모바일 특성상 사용자 시선이 중심으로 집중되서, Horizontal 보다 Vertical 형태가 더 좋다.
힉의 법칙
선택지가 너무 많으면 인지 부하가 증가한다.
- 선택지의 갯수가 증가할수록, 사용자의 인지 부하도 증가된다. (뇌 자체에서 선택시간이 길어짐)
- 사용자가 빠르게 목적을 달성 할 수 있도록 그룹핑 해주는 형식도 좋다.
밀러의 법칙
인간의 작업 기억 용량과 작업의 복잡도 사이의 관계를 설명하는 심리학적 원리
- 보통 사람은 작업을 7(+-2)개의 항목 밖에 기억하지 못한다.
- 심리학자 조지 밀러라는 사람이 정보 처리 용량의 관한 한계에 대한 논문 자료도 있다.
- 사람은 글자 수가 아니라, 정보 덩어리로 기억한다. (글자수 7 = 단어 7)
- 덩어리화의 대표적인 예시가 핸드폰 번호
포스텔의 법칙
유저는 채워 넣어야 할 정보의 양이 많아질수록 인지부하가 증가한다.
- 사용자의 입력은 무조건 수용하되, 사용자에게 요청하는 정보의 양은 보수적으로 책정한다.
- 한번에 너무 많은 정보를 입력 요청하게 되면, 피로감과 에너지 소모가 커진다.
피크엔드의 법칙
사용자의 경험은 평균이나 합계가 아니라 절정의 순간이나, 마지막 순간에 느낀 감정을 바탕으로 판단된다.
- 우리가 앱을 사용하면서 중요한 순간, 특히 실패했던 경험을 더 오래 기억하려는 경향이 있다.
테슬러의 법칙
모든 시스템에는 더 이상 줄일 수 없는 일정 수준의 복잡성이 존재한다.
- 토스는 은행별 계좌번호 고유의 패턴을 파악해서 추천 은행명을 표시해준다.
- 필연적인 복잡성이 발생할때, 사용자를 어드바이스해 불편함의 간극을 줄이는 게 서비스 제공자 역할
심미적 사용성 효과
사람들은 보기 좋은 디자인이 사용성이 뛰어나다고 인식한다.
- 예를들어 금융앱이 딱딱하고 복잡하고 어렵다라는 인식이 있었는데 토스는 이쁘고, 사용성도 뛰어난 것
- 사람들은 웹사이트가 어떤지 평가하는데 50m/s 가 걸린다고 한다.
폰 레스토프 효과
동일한 요소들 중에서 눈에 띄는 요소가 기억에 더 오래 남는 현상을 말한다.
- 비슷한 여러 객체가 있을땐, 특정 기능을 강조하거나 유도하기 위해 보색 컬러 같은 시각적인 효과를 적용한다.
- 예를들어, 온보딩 기능, 알림 기능
- 시각적 강조를 남발하면, 집중력이 떨어질 수 있고, 산만해질 수 있다.
도허티 임계
사용자와 컴퓨터 간의 인터랙션 시 가장 적절한 시간 범위를 나타내는 개념
- 사용자의 관심을 유지하고 생산성을 높이기 위해서는 0.4초 이내의 시스템 피드백을 제공한다.
- 정보를 전달할때 딜레이가 생길땐, 스켈레톤 UI, 로딩 애니메이션으로 역동적인 볼거리를 제공해 지루함을 해소시킨다.
마무리
실제로 난 정말 편하고 간단하고 이쁜 서비스만 찾아다녔다.
주식을 처음 시작하려고 할때도, 증권앱 어떤 걸로 할지 고민하다가
토스가 너무 내 눈엔 쉽고 편했어서 나의 첫 증권앱이었다.
UIUX 법칙을 공부해보면서, 토스가 얼마나 고민한지 느껴졌고,
실제 다녔던 회사에서도 왜 그렇게 디자인 리뷰가 길어졌는지도 너무 이해가 됐다.
UIUX 법칙을 공부하면서, 실제 사용자로써, 개발자로써 공감가는 것들도 너무 많았다.
더 나은 서비스, 더 나은 제품을 만들려면, 프론트엔드로써 사용자 중심의 UX 공부는 더 필수라고 느껴졌고,
의견이나, 아이디어를 제공할 수 있는 지식을 길러야한다고 느꼈다.
사실 요즘, 프론트엔드가 아닌 다른 개발자로 방향을 전환해야하나 싶었는데, 아직 그 고민은 너무 일렀다.
조금 더 사용자들이 쉽게 접근하고 이해할 수 있는 인터페이스를 많이 개발해보고,
UX적으로 좋고, 유명한 프로젝트를 경험해보고 싶다.
