FE 개발자가 왜 UI / UX??
개발자는 코딩만 하면 되는거 아닌가?
아니다. 프론트엔드 개발자의 가치는 내가 만드는 서비스의 가치와 동일하다고 생각한다. 개발자로 기술이 좋다고 해도 결과물이 형편이 없다면 그 가치를 인정받을 수 없다. "UI/UX는 디자이너가 신경쓰면 되잖아요." 프론트엔드 개발자가 UX를 선별하고 조율하는 것도 프론트엔드 개발자의 능력이다.
필자는 서비스를 개발 할 때 디자이너가 디자인 해준 UI/UX를 이상하다고 여겨질 때가 있었다. 하지만 이걸 "디자이너가 알아서 잘 하겠지~" 라고 하며 넘어가면 안되는 문제이다. 프론트엔드 개발자는 UI / UX를 보면서 "사용자가 쓰기에 어떨까?", "버튼 위치가 괜찮을까?" 를 생각해야 한다는 것이다.
복잡해진 웹
요즘 웹페이지를 보면 한눈에 보기 쉬운 웹페이지들이 더 많아졌다. 실제로 사용자가 사용하기에 복잡하고 어렵다면 사용할까? 아니다. 그렇기 때문에 프론트엔드 개발자도 UI / UX를 신경써야 한다.
UI / UX 란?
UI
UI는 User Interface로 사용자가 제품을 어떤 방식으로 이용하도록 만드는 디자인 하는것이다.
UI 과정 : 디자인 시스템 - UI 디자인 최종 산출물 - 하이파이 프로토타입
UX
UX는 User Experience로 사용자의 경험을 의미한다. 사용자가 어떤 제품, 시스템, 서비스 등을 직접적 혹은 간접적으로 이용하면서 느끼는 반응, 행동과 같은 경험을 총체적으로 설계하는 것이다.
사용자가 제품을 어떻게 쓰고 어떤 느낌을 받는 알아내고 문제가 있다면 해결해야 한다.
UX 과정 : 유저 리서치 - 정보 설계 - 유저 시나리오 - 와이어 프레임 - 로우/미드파이 프로토 타입
UX / UI 과정 : 유저 리서치 - 정보 설계 - 유저 시나리오 - 와이어프레임 - 디자인 시스템 - UI 디자인 최종 산출물 - 프로토타입 - 사용성 테스트
UX 과정에도 심리학 법칙이 있다. 존 야블론스키가 저술한 10가지 심리학 법칙이다.
UX의 10가지 심리학 법칙
1. 제이콥의 법칙
사용자는 본인이 오래 사용하면서 축적된 경험을 토대로 새로운 프로덕트를 판단하는 경향이 있다. 즉, 새로운 서비스를 사용해도 축적된 경험을 통해 서비스를 이해하려고 한다. 이를 "멘탈 모델"이라고 한다.
위 사진과 같이 우리는 검색, 공유, 장바구니, 마이페이지 등등 말하지 않아도 어떤 화면이 나타날지 사용자의 경험으로 알 수 있다.
2. 피츠의 법칙
목표물에 도달하는데 걸리는 시간은 목표물의 거리와 크기에 따라 달라진다. 터치 대상의 크기는 사용자가 정확하게 선택할 수 있도록 충분해야 하며 터치 대상 사이에 충분한 거리를 확보해야 한다.
터치 대상의 크기와 거리가 적당해야 다른 대상이 눌리는 것을 방지할 수 있기 때문에 목표물에 도달하는 시간은 터치 대상의 크기와 거리로 달라지는 것이다.
3. 힉의 법칙
선택지가 너무 많으면 인지 부하가 증가한다.
위 페이지는 옛날 야후 페이지이다. 한눈에 알아보기 힘든 정도라고 생각된다. 위와 같은 페이지는 선택지의 개수가 너무 많아 사용자의 인지 부하를 증가한다. 인간의 뇌는 화면 정보를 인식하고 처리하는데 한계가 있기 때문이다.
정보의 과잉, 과밀을 줄이려면 대표적인 방법은 다단 형태로 구분을 두어 하나의 단면에는 목적, 성격을 가진 객체끼리 그룹핑하여 보여주는 형태이다.
4. 밀러의 법칙
보통 사람은 작업을 기억에 7(+-2)개의 항목 밖에 저장하지 못한다.
사람의 기억 범위에 영향을 미치는 건 글자의 수가 아니라 정보를 덩어리화해서 기억한다. 즉, 글자 수 7자를 외우는 것과 단어 7개를 외우는데 드는 노력은 비슷하다는 것이다.
예시를 들면 2개의 전화번호 형태가 있다. 하나는 01012345678과 또 다른 하나는 010-1234-5678이 있다. 어떤게 더 외우기 쉬운 형태일까? 후자가 외우기 쉬운 형태이다.
5. 포스텔의 법칙
사용자는 채워 넣어야 할 정보의 양이 많아질수록 인지부하가 증가한다.
사용자의 입력은 무조건 수용하되, 요청하는 정보의 양은 보수적으로 책정한다. 한 번에 너무 많은 입력을 요청할 수록 인지 에너지를 많이 소모하게 되고, 그만큼 피로도가 쌓인다.
왼쪽과 오른쪽이 각각 있었을 때 어떤 화면이 덜 필요하겠는가?
6. 피크엔드의 법칙
사용자 경험은 평균이나 합계가 아니라절정의 순간이나 마지막 순간에 느낀 감정을 바탕으로 판단된다.
사람들은 긍정적인 순간보다 부정적인 순간을 더 강렬하게 기억한다. 따라서 사용자 여정 중 갑작스러운 순간을 세심하기 신경쓰면 더 좋은 사용자 경험을 줄 수 있다.
위와 같이 not found 페이지는 사용자가 접하는 부정적인 순간에도 양해 혹은 재미를 주면 오히려 더 즐거운 경험으로 바꿀 수 있는 기회가 된다.
7. 테슬러의 법칙
모든 시스템에는 더 이상 줄일 수 없는 일정 수준의 복잡성이 존재한다.
위와 같이 사용자가 이체를 누르고 계좌번호를 입력하지 않아도 사용자의 패턴을 파악해 추천 은행명을 표시해준다. 사용자를 어드바이스해 불편함의 간극을 줄이는 게 서비스 제공자의 역할이다.
8. 심미적 사용성 효과
사람들은 보기 좋은 디자인이 사용성이 더 뛰어나다고 인식한다.
심리학에 자동 인지 처리라는 개념이 있다. 이는 사람들이 외형만 보고 속을 판단하는 것을 말한다. 사람들이 웹사이트를 처음 보고 해상 웹사이트가 어떤지 평가하는 데 걸리는 시간은 50m/s 이내라고 한다. 즉, 심미적으로 뛰어난 웹사이트는 초기 수용 형성에 적잖은 영향을 미친 다는 것을 의미한다.
9. 폰 레스토프 효과
비슷한 사물이 여러 개 있으면 그중 가장 색다른 것만 기억한다.
중요한 정보나 핵심 동작을 시각적으로 눈에 띄게 하면 좋다.
위 앱에서 구매하기 버튼을 눈에 띄는 색상으로 표시해 두어 사용자가 어떤 동작을 해야 할지 명확하게 알 수 있다.
10. 도허티 임계
사용자의 관심을 유지하고 생산성을 높이기 위해서는 0.4초 이내에 시스템 피드백을 제공해야 한다.
사용자가 원하는 정보를 딜레이 없이 바로 보여주면 좋겠지만, 외부 정보를 불러온다면 어쩔 수 없는 딜레이가 발생한다. 보통 이런 딜레이를 스켈레톤 UI, 로딩 애니메이션 등 역동적인 볼거리를 제공함으로써 사용자가 느낄 수 있는 따분함을 해소해준다.
위 화면 스켈레톤 UI이다. 뼈대 화면을 보여주며 앞으로 로딩될 콘텐츠가 예상되어 실제 속도보다 더 느리게 느껴지지 않는 효과가 있다.