프론트엔드 개발자가 UI/UX를 알아야하는 이유? - UX/UI의 10가지 심리학 법칙
프론트엔드 개발자가 UI/UX를 알아야하는 이유?
요즘 가장 많이드는 생각은 “내가 일을 잘하는 것일까?”, “일을 잘하는 것의 기준은 뭘까?” 이다.
스타트업에서 사수없이 일하려다 보니 많은 고민이 생긴다. 그래서 다른 사람들이 생각하기에 프론트엔드 업무 잘하는 사람은 어떤 사람인지 찾아보다가 가장 공감되는 부분을 찾았다.
시니어 개발자가 말하는, 프론트엔드 업무와 잘하는 프론트엔드 개발자란 게시글 일부
안타까운 말이지만 프론트엔드의 가치는 먼저 내가 만드는 서비스의 가치입니다.
프론트엔드 기술이 좋다고 해도 결과물이 형편이 없다면 가치를 인정받을 수 없습니다.
아무리 실력있는 개발자라도 형편없는 디자인과 UX를 가진 서비스를 만들어낸다면 사람들은 구현해낸 능력을 보지 않습니다. 그보다 먼저 별점 테러를 받고 있겠죠.
그래서 일단 잘 만드는 게 중요합니다. ‘디자인과 UX는 개발자가 관여하지 않는 거 아닌가요?’라는 생각을 가지고 계신다면 마인드를 고치시길 바랍니다.
개발자가 얼마큼 서포트를 해주느냐에 따라서 디자인과 UX는 얼마든지 더 좋아질 수 있습니다. 좋은 디자이너와 UX를 선별하고 조율하는 것도 프론트엔드의 능력입니다. 좋은 서비스를 만드는 회사를 고르는 것도 본인의 능력입니다.
위의 말 중 특히 개발자가 얼마큼 서포트를 해주느냐에 따라서 디자인과 UX는 얼마든지 더 좋아질 수 있습니다. 라는 문구가 와닿았다.
실제로 일하면서 디자이너분이 작업하신 부분을 공유해주실 때 가끔 “사용자가 쓰기에 좀 불편하지 않을까?”, “이 버튼이 이 위치에 있는것이 맞나?” 이런 생각이 들 때가 가끔 있었다.
내가 느끼는 것이 정답도 아니고 UX, UI에 대해 잘 모르는 상태였기에 공부해야겠다고 생각하였다.
UX/UI란?
UI는 User Interface(유저 인터페이스)로, 대략 눈에 보이는 ‘디자인’적인 요소라고 생각하면 된다.
즉, 사용자가 서비스를 사용할 때 마주하는 디자인 (ex. 폰트, 컬러, 레이아웃, 간격, 애니메이션 효과 등)을 UI라고 생각하면 된다.
UX는 User Experience(사용자 경험)으로, UI의 디자인적 요소들을 바탕으로 만들어진 서비스를 사용하는 사용자가 겪는 경험과 감정 등을 말한다.
정리하자면, 프로덕트를 사용하는 유저가 편리하도록 UI를 디자인해서, 더 나은 사용자 경험을 제공하는 것이 목적이라고 할 수 있다.
위의 하인즈 케첩의 예시를 통해 UI/UX를 쉽게 이해해 보자. 초기 하인즈는 유리병 형태였지만, 사용자가 밑에 조금 남아있는 케첩을 먹기에는 힘들었다고 한다.
유리병 UI는 좋지 않은 UX를 불러왔기에 오른쪽과 같이 플라스틱 형태의 UI로 변경했고, 결국 사용자에게 긍정적인 UX를 줄 수 있었다.
이렇듯 UI와 UX는 별개의 것이 아니라는 것을 알 수 있다. 또한 UX는 UI를 포함한다. 즉, 좋은 UX가 좋은 UI를 의미하거나, 좋은 UI가 항상 좋은 UX를 보장하지는 않는다는 것이다.
UX/UI의 10가지 심리학 법칙
존 야블론스키가 저술한 ≪UX/UI의 10가지 심리학 법칙≫에서 소개하는 10가지 UX 법칙에 따라 토스 앱을 분석한 게시글의 설명이 쉽고 예시를 통해 이해할 수 있어 가져와봤다.
[주니어 기획자들을 위한 실전서] 토스에서 찾아본 10가지 UX 법칙
1. 제이콥의 법칙
사용자는 새로운 경험을 이해하기 위해 기존 경험을 활용한다는 관점이다.
즉, 새로운 웹사이트를 방문하더라도 기존에 다른 웹사이트를 이용했던 경험을 기반으로 UI를 이해한다는 것이다.
토스의 메인 화면은 여타 다른 금융앱과 크게 다르지 않은 디자인을 보여준다. 우측 뱅크샐러드와 비교해보면, 전체 자산 화면의 UI가 크게 차이나지 않는다는 것을 확인할 수 있다.
2. 피츠의 법칙
목표물에 도달하는 데 걸리는 시간은 목표물의 거리와 크기에 따라 달라진다.
터치 대상의 크기는 사용자가 정확하게 선택할 수 있도록 충분히 커야 하며, 터치 대상 사이에 충분한 거리를 확보해야 한다는 개념이다.
이때, 터치 대상의 크기가 작으면 대상을 문제없이 선택했을 때조차 사용성이 떨어지기에 서비스 기획 시 위 개념을 알아두면 좋다.
3. 힉의 법칙
의사결정에 걸리는 시간은 선택지의 개수와 복잡성에 비례해 늘어난다는 법칙이다.
즉, 선택지가 많을수록 결정하기까지의 고민하는 시간이 늘어나기에 의사결정 시간이 사용성에 큰 영향을 받는다면 선택지의 개수를 최소화는 것이 좋다.
대표적인 예시가 다단 형태로 구분을 두어 하나의 단면에는 하나의 목적을 가진 성격을 가진 객체끼리 그룹핑(예: 쇼핑할인 BEST와 3개의 카드 추천 인터페이스)하여 보여주는 형태로 제공하는 점이다.
4. 밀러의 법칙
보통 사람은 7개 정도밖에 기억하지 못한다. 전화번호가 7자리인 이유로 대중적으로 많이 알려진 법칙이다.
그런데 사실 7은 마법의 숫자는 아니라고 한다. 중요한 것은 덩어리화인데, 인간의 단기 기억은 한계가 있어서 정보를 덩어리로 만들면 효과적으로 암기할 수 있다.
덩어리화는 암기는 물론 인지에도 도움이 된다. 전화번호를 하이픈(-)을 사용해 덩어리화 해서 표현하는 것과, 글이 제목과 여러 단락으로 나뉠 때 가독성이 올라가는 것이 그 예이다.
마찬가지로 UI를 표현할 때 덩어리화를 이용해 요소 간에 적합성에 따라 여백을 표시해야 한다.
토스는 하나의 레이블에 적당한 객체 수와 확실한 경계선을 두어 덩어리화한 케이스라고 볼 수 있다.
5. 포스텔의 법칙
유저는 채워 넣어야 할 정보의 양이 많아질수록 인지부하가 증가한다.
한 번에 너무 많은 입력 작업을 요청할수록 인지 에너지를 많이 소모하게 되고, 그만큼 피로도가 쌓인다.
토스는 서비스 초기부터 1 thing / 1 page 철학을 서비스 곳곳에 잘 녹여내 왔다. 놀랍도록 쉽고 간편한 회원가입 프로세스에도 ‘포스텔의 법칙’이 숨어있다.
6. 피크엔드 법칙
인간은 경험 전체의 평균이나 합계보다, 절정의 순간과 마지막 순간에 느낀 감정을 바탕으로 경험 자체를 판단하는 경향이 있다.
더불어, 사람들은 긍정적인 순간보다 부정적인 순간을 더 강렬하게 기억하고는 한다. 따라서 사용자 여정 중에 갑작스러운, 혹은 피크의 순간을 세심하게 신경 쓰면 더 유려한 사용자 경험을 줄 수 있다는 말이다.
토스는 실패 순간도 최대한 부드럽게 표현하려는 세심한 노력을 곳곳에서 찾을 수 있다. 귀여운 애니메이션을 보여준다던가, 토스 특유의 친근한 비격식체 문구를 보여줌으로써 작은 실패로 느껴지도록 불편함을 최소화했다.
7. 심미적 사용성 효과
사람들은 보기 좋은 디자인이 사용성이 더 뛰어나다고 인식한다.
기존 금융앱들은 복잡하고 어렵다는 이미지가 강했지만, 토스는 훨씬 쉬운 사용성은 물론 금융앱 답지 않게 캐주얼하고 둥글둥글한 디자인 덕에 ‘금융앱’이 가지고 있던 딱딱한 이미지와 더욱 상반되게 느껴졌다.
사람들이 웹사이트를 처음 보고 해당 웹사이트가 어떤지 평가하는 데 걸리는 시간은 50m/s 이내(20분의 1초)라고 한다.
즉, 심미적으로 뛰어난 웹사이트는 초기 수용 형성에 적잖은 영향을 미친다는 것을 시사한다.
8. 폰 레스토프 효과
비슷한 사물이 여러 개 있다면 그중, 가장 차이나는 한 가지만 눈에 들어오고 기억할 가능성이 크다는 개념이다.
따라서 중요한 정보나 핵심 동작을 시각적으로 눈에 띄게 하자. 따라서 특정 요소를 강조할 때는 색상 대비를 확실하게 해 주자.
처음 서비스에 유입된 사용자에게 길을 알려주거나, 새로운 기능을 소개할 때, 혹은 알림이나 배지를 사용할 때 자주 마주할 수 있다.
단, 시각적 강조를 너무 무분별하게 남발하는 경우, 사용자의 집중력을 저하시켜 산만해지게 만들 수 있다.
9. 테슬러의 법칙
모든 시스템에는 더 이상 줄일 수 없는 일정 수준의 복잡성이 존재한다.
토스는 사용자가 계좌번호를 입력하면 해당 계좌번호에서 은행별 계좌번호 고유의 패턴을 파악해서 은행 선택 드롭다운 아래에 추천 은행명 버튼을 표시해준다.
이를 클릭하면 드롭다운으로 일일이 찾지 않아도 즉시 해당 은행을 선택할 수 있다.
즉시성, 단순화가 생명인 간편송금 기능에서 사용자가 은행 선택 드롭다운을 펼쳐 수 십 개나 되는 은행 리스트 중 내가 원하는 은행을 찾는다는 것은 매우 수고스러울 것이다.
이렇게 필연적인 복잡성이 발생할 때, 사용자를 어드바이스해 불편함의 간극을 줄이는 게 서비스 제공자의 역할이다.
10. 도허티 임계
사용자의 관심을 유지하고 생산성을 높이기 위해서는 0.4초 이내에 시스템 피드백을 제공해야 한다.
시스템의 반응 속도는 전체 사용자 경험을 좌우하는 중요한 요소로, 사용자에게 처리 시간에 대한 시각적인 피드백을 주면 좋다.
피드백을 주면 사용자는 대기시간에 더 관대해지고, 실제 웹이 더 빠르게 작동한다고 느낀다.
사용자가 원하는 정보를 딜레이 없이 바로 보여주면 좋겠지만, 외부 정보를 불러온다면 어쩔 수 없는 딜레이가 발생한다.
보통 이런 딜레이를 스켈레톤 UI, 로딩 애니메이션(progress animation) 등 역동적인 볼거리를 제공함으로써 사용자가 느낄 수 있는 따분함을 해소해준다.
느낀점
각 법칙을 알아보면서 내가 어떤 서비스를 사용할 때 실제로 느끼는 생각이 다 나타나져 있는것 같아서 신기했다.
디자인이라고 하면 단순히 사용자가 이쁘게 느끼는 것이라고 생각했는데 위의 법칙들을 고려해가면서 서비스를 만들고 있었다는게 당연하면서도 대단하다고 생각했다.
위의 예시는 앱이여서 웹이랑은 다른 부분이 존재할 것이라고 생각한다. 내가 프로젝트를 만들게 된다면 오늘 배운 개념이 어떻게하면 잘 녹아들 수 있는지 고민해봐야겠다고 다짐했다.
또한 회사에서 디자이너분이 결과물을 보여주셨을 때 어떤걸 중점으로 봐야하고, 어느 부분에서 피드백을 할 수 있는지에 대해 조금이나마 알게 된 것 같다.
📑 참고 자료