과자먹는 아데씨
안좋은 예시
사이트를 이용하는 한 소비자의 이야기
오늘도 책상앞에 앉아서 개발 공부를 하던 30대 남성 아데씨
헉! 벌써 돼지같이 과자를 다먹고 말았어요!
지금까지 마트에 장보러 가서 샀는 데, 나가기도 귀찮고 온라인으로 사면 할인도 많으니 쇼핑몰을 이용해봐야겠어요!
회원가입을 하려고 보는 데, 키보드로 타이핑도 안되고!
1900년도에서 생일연도까지 스크롤하느라 힘들었는데
이제는 전화번호를 한칸한칸 채우래요! 아오 답답해!
(🐶같은 거..)
그래서 다짐했어요
나는 절대로 저렇게 만들지 말아야지..
이 사이트를 이용하는 고객의 경험은 최악이였습니다.
설령 회원가입을 거치고 정상적으로 제품을 주문할 수 있는 사이트라고 해도
절대 다시는 이 사이트를 방문하지 않을 것이예요
UI (User Interface) 부분에 의한 UX(User Experience)가 최악이었기 때문이죠!
이처럼 사용자가 사이트를 방문할 때 경험할 수 있는 모든 경험(UX)으로 그 사이트 자체를 평가할 수 있습니다.
이렇게 사람의 경험에는 보이는 것과 보이지 않는 것으로 나뉘게 되는 데
보이지 않는 기능을 보이게 만들어 주는 Interface 작업을 UI가 맡아서 하게 됩니다!
좋은 예시
하는 수 없이 다른 사이트를 찾아보게 되었습니다
다른 쇼핑몰 까까나라의 회원가입 창을 가보았더니 굳이 새로 회원가입할 필요가 없이
기존에 가지고있던 카카오계정이나 네이버 계정으로 가입이 가능하네요!
아 내가 보고있는 창이 네이버의 창이구나
아이디와 비밀번호를 여기에 입력하면 되겠구나!
이렇게 직관적으로 알아볼 수 있는 것이 잘 짜여진 UI입니다.
간편한 가입으로 과자 구매까지 가능하게 되었습니다!
앞으로 더 즐거운 개발이 가능할 것 같아요~ 😍
이처럼 좋은 UI는 UX에 꼭 필요한 요소입니다.
하지만 UI만 좋다고 해서 반드시 좋은 UX라고 볼 수 없습니다.
빛좋은 개살구라는 말이 있듯이 보기에 좋지만 실제로 기능적인 문제가 있거나
제품의 컨셉과 맞지 않는 디자인은 오히려 독이 될 수 있습니다.
알고리즘을 풀어야 해서 수학적인 계산을 많이 하게 될 것 같아 계산기를 주문하였습니다.
자주 보고 많이 사용해야 하므로 미니멀하고 직관적이며 심플한 공학용 계산기를 가지고 싶었는 데 적혀있는 숫자의 폰트가 아래와 같다면?
편지의 필기체로 들어갔다면 참 예쁘겠지만 제가 원하는 계산기 컨셉과는 전혀 맞지 않는 폰트죠
미학적으로 좋지만 제 경험에는 좋지 않는 영향을 주게 됩니다.
이처럼 나쁜 UI는 항상 좋지 않은 UX를 제공하지만
좋은 UI라고 해서 좋은 UX를 준다고 보장하지는 못합니다.
UI/UX 개념
UX는 UI를 포함하는 개념입니다
그에 따라 좋은 UX가 되기 위해서는 7가지의 속성이 있어야 한다고 피터 모빌(Peter Morville)은 말합니다.
- UI에 속하는 부분
- 매력성
- 접근성
- UI에 일부 공통요소가 있는 부분
- 사용성
- 검색 가능성
- UI 외적인 부분
- 유용성
- 신뢰성
이 6가지 속성을 모두 고려한 가치성
디자인도 이쁘고 알기쉽게 한국어로 되어있는 데
원하는 상품이 어디있는지 찾기도 편하고
(내가 들어온 목적에 부합하는) 그밖에 다른 괜찮은 것들도 있다면
좋은 사이트로써 역할을 할 수 있겠죠?
이렇게 좋은 사이트가 되기 위해서는
좋은 UI를 포함한 좋은 UX가 잘 만들어져야 합니다
그럼 이런 UI와 UX는 어떻게 만들어야 할까요?
UI에 대해 먼저 살펴보겠습니다.
UI
웹사이트는 그리드 시스템으로 깔끔하게 정돈할 수 있습니다.
그리드(grid)는 수직, 수평으로 분할된 격자무늬를 뜻합니다.
요소: Margin, Column, Gutter
- Margin : 화면의 여백
- Column : 콘텐츠가 위치하게 될, 세로로 나누어진 영역입니다.
- Gutter : Column 사이의 공간 (콘텐츠를 구분하는 용도입니다.)
예를 들어 모바일은 4개의 컬럼, PC에서는 12개의 컬럼을 차지하는 방식으로 디자인을 구성합니다
UX
User Flow
글을 작성하는 커뮤니티에 들어왔을 때
가장 먼저 보일 것은 게시판 페이지입니다
여기서 사용자가 할 액션은 3가지
게시글 검색, 게시글 열람, 게시글 작성 입니다.
게시글을 검색할 경우
- 검색 결과를 보이며 열람할 수 있도록 안내해
- 열람한 글을 확인할 수 있게 됩니다.
게시글 작성을 하게 되면
- 글 작성페이지가 열리고 업로드 하게 되면
- 작성한 글을 확인할 수 있게 됩니다.
이렇게 확인하고 있는 글에서
게시판으로 돌아갈 수 있는 기능을 제공하여
유저가 웹사이트를 편리하게 이용할 수 있도록
미리 유저의 행동을 예측하고 기능을 준비해두어서 만족도를 높이기 위해 User Flow를 작성합니다.
와이어프레임과 프로토타입
디지털 그림을 그릴 때에는
우선 손으로 러프스케치를 그리고 뼈대와 구조를 잡아 도형을 그려가며
그리고 나서 어느정도 완성이 되었다 싶으면 스캔을 뜨고 태블릿으로 선을 따서 깔끔한 그림으로 수정합니다
이후 디테일한 표현이나 색감 등 여러 효과등을 추가하게 됩니다
와이어 프레임
웹 디자인이나 UI UX 모두 마찬가지 입니다.
Lo-Fi : 빠르게 구현하고 빠르게 수정하기 위해 뼈대를 그리는 작업 (러프 스케치)
Mid-Fi : 완성된 페이지를 예상할 수 있을 정도의 이미지를 그리는 작업 (선 따기)
Hi-Fi : 그림의 완성 (최종본, 목업)
개발자는 그림을 그리는 것이 아니기 때문에 시간관계상 Mid-Fi에서 마무리하는 것이 보통입니다
프로토타입
안타깝게도 웹페이지는 동적입니다 ! (?)
유저의 스크롤, 클릭, 키보드 입력에 상호작용 하여 다른 응답을 보여주어야 합니다.
UI를 그림으로 표현했다면
UX를 영화나 애니메이션을 표현해보겠습니다
움직이는 것을 모두 표현하고 수정하고 다시 표현하는 과정은 시간적으로 너무 비효율적인 과정입니다.
이를 위해 중간 중간 결과를 예측하고 피드백을 받으며 방향을 수정할 필요가 있습니다.
영화나 애니메이션에서는 이러한 작업을 스토리보드로 작업합니다
빠르게 러프스케치를 그려 구체화하고
어떤 인물이나 사물이 어떤 액션을 취하고
작용-반작용처럼 주고 받는 대상이 어떻게 작동하는 지 글로 명시합니다
프로토타입에서도 동일합니다.
Mid-Fi 와이어프레임을 가지고 어떻게 동작할 것인지 살펴보고 다른 팀원과 의견을 종합하기 위해서 프로토타입을 제작합니다.
이러한 프로토타입 과정에서 방향이 더 확실하게 잡히면 퀄리티를 높여 사용성 테스트를 해야 합니다.
영화로 치면 실제 촬영이전에 3D 작품을 빠르게 제작하여 미리 시뮬레이션 하는 과정과 동일합니다.
이러한 과정을 프로토타입으로 치면 Mid-Fi 프로토타입입니다.
이렇게 디자인에 이어 사용성 테스트까지 거쳐 대부분의 문제를 해결하고 나면 최종 결과물을 만들어야 합니다.
스토리보드에서 프리비즈를 거쳐 이와 같이 완성된 결과물을 볼 수 있는 것과 동일합니다.
이러한 것을 Hi-Fi 프로토타입이라고 합니다.
| Lo-Fi | Mid-Fi | Hi-Fi | |
|---|---|---|---|
| 와이어 프레임 | 빠르게 그려서 방향성 잡기 | 보다 높은 완성도로 완성된 페이지를 에상 | 목업. 잘 안함 |
| 프로토타입 | Userflow 기준 기능 확인 | 실질적인 사용성 테스트 | 개발 전 최종 점검 |
마무리
이렇게 사이트를 이용하는 유저의 입장과
사이트를 제작하는 프론트엔드 개발자의 입장에서
UI/UX를 살펴보았습니다~
그림, 영상을 설계하고 만든다는 개념으로 UI와 UX를 접근해 보았는 데
개인적으로 작성하면서 재미있는 포스팅이였습니다!
