난 올해부터 웹서비스 개발 연합동아리 멋쟁이사자처럼 12기 디자인 파트로 활동하고 있다. 작년부터 PM으로 활동하면서 디자인을 제대로 배워보고 싶다는 마음을 항상 가지고 있었는데 좋은 기회인만큼 열심히 해보자!
디자인 세션에서 배운 내용을 공유해보려고 한다.
1. UX/UI에 대한 이해
UI = User Interface
UI는 사용자가 사용하는 서비스나 제품의 화면 안에 있는 모든 것을 의미한다.
UI는 껍데기다.
UX = User Experience
UX는 사용자가 제품이나 서비스와 상호작용할 때 전반적으로 느끼는 경험과 이를 개선하는 디자인 및 전략을 의미한다.
즉, UX는 UI라는 껍데기를 맛있게 만들어주는 것이다.
따라서 UX와 UI는 반드시 함께 고려되어야 하는 소울메이트 같은 존재로, UX에 기반하는 UI를 만들어야 한다.
2. 디자인 프로세스에 대한 이해
디자인씽킹 프로세스에 대한 개념을 구체화한 이론은 다양하게 존재하지만, 가장 대중적인 모델은 미국 스탠퍼드 대학 d.school의 모델이다.
디자인 프로세스는 공감 - 정의 - 아이데이션 - 프로토타입 - 테스트의 순서로 진행된다.
• Empathize(공감)
목표가 무엇인지 인지하고 소비자를 공감한다.
리서치 Data 분석, 관찰 조사, 인터뷰, 트렌드 조사 등을 실시한다.
• Define(정의)
공감 단계에서 수집한 데이터를 활용해서 해결해야 할 문제(Pain Point)를 정의한다.
• Ideate(아이데이션)
문제 해결 방법을 탐구하고 브레인스토밍을 진행한다.
• Prototype(프로토타입)
아이디어를 시각화하는 과정이다.
다양한 아이데이션 중 확실한 아이디어를 중심으로 포로토타입을 제작하고 UI 디자인을 진행한다,
• Test(테스트)
런칭 전 테스트를 진행하고 피드백을 반영한다.
피드백을 바탕으로 최종 출시할지, 이전 단계를 반복할지를 판단한다.
공감과 정의 단계는 UX 기획, 아이데이션과 프로토타입 단계는 UI 디자인, 테스트는 다시 UX 기획이라고 분류할 수 있다.
그럼 UI 디자인 프로세스에 대해 자세히 알아보도록 하자.
• 스케치 > 와이어프레임 > UI 디자인
Lo-Fi(스케치)
핸드 스케치, 아이디어를 러프하게 그려보는 단계이다.
아이디어 수정이 편리하다.
Mid-Fi(와이어프레임)
고도화된 스케치로 일종의 뼈대 작업을 진행한다.
일반적으로 기획자의 역할이다.
Hi-Fi(UI 디자인)
와이어프레임을 기준으로 제작한다.
팀원들과 디자인 커뮤니케이션을 진행하고 피드백을 하기 위해 제작된다.
• 프로토타이핑 > 디자인 시스템 > 핸드오프
프로토타이핑
예상 고객에게 프로토타입을 사용해보게 하고 피드백을 받아 제품 개선 시 반영하기도 하는데, 이를 프로토타이핑이라고 한다.
Low-Fi > Mid-Fi > High Fi 단계를 거쳐 프로토타이핑을 진행한다.
디자인 시스템
디자인 원칙과 규격, 재사용할 수 있는 UI 패턴과 컴포넌트, 코드를 포괄하는 시스템이다.
디자인 시스템을 지킴으로써 일관성 있는 제품의 인터페이스 유지가 가능하다.
실제로 프로젝트를 진행할때 디자인 시스템 구축이 굉장히 중요하다고 느꼈다.
https://blog.hwahae.co.kr/all/tech/13236
핸드오프
최종 단계이다.
개발자에게 파일을 넘길 때 제공하는 이미지의 크기, 위치, 색상, 폰트 등의 다양한 정보를 정리한다.
3. UX/UI 디자인 10가지 법칙
https://www.yes24.com/Product/Goods/92426632
이 책의 10가지 법칙을 바탕으로 토스 앱을 분석해보자.
1) 제이콥의 법칙
사용자는 본인이 오래 사용하면서 축척된 경험을 토대로 새로운 프로덕트를 판단하는 경향이 있다.
사용자는 우리 서비스 말고 다양한 서비스에서 시간을 사용하기 때문에 축척된 데이터를 기반으로 서비스를 이해한다.
토스 앱 역시 크게 다르지 않은 기본 디자인을 보여준다.
아래의 UI는 보기에는 예쁘지만 실제로 사용자들이 사용하기에는 불편하고 어색한 부분이 많다.
2) 피츠의 법칙
목표물에 도달하는 시간은 목표물의 거리와 크기에 따라 달라진다.
따라서 터치할 수 있는 영역 간의 거리는 적당해야 한다.
객체 간의 거리가 가깝다 -> 입력오류
객체 간의 거리가 멀다 -> 터치하기에 불편함
모바일은 중심부로 시선이 집중되기에 horizontal 보다는 vertical 형태로 구축해야 한다.
3) 힉 법칙
선택지가 너무 많으면 부하가 증가한다.
우리가 정보를 처리할 수 있는 단계도 있기 때문에 WF 단계에서부터 신경써야 한다.
토스 앱도 목적을 가진 요소마다 묶어서 그룹핑 함으로서 사용자의 부담을 줄이고 있다.
4) 밀러의 법칙
사람은 작업 기억에 7(+-2)개 항목 밖에 저장하지 못한다.
레이블에 종속된 각각의 요소들은 하나의 묶음이자 덩어리이다.
이 요소들을 적당히 배치하고 확실한 경계선을 설정해야 한다.
결국 힉과 밀러의 법칙은 우리가 어떤 기능에 집중할건지를 보여주는 것이기도 하다.
5) 포스텔의 법칙
유저는 채워 넣어야 할 정보가 많아질수록 인지부하, 즉 뇌 로딩이 느려진다.
토스의 디자인 시스템의원칙(TDS)중 하나인 "1 thing per one page" 역시 이러한 원칙 아래서 작동한 디자인이라고 볼 수 있다.
따라서 본인인증을 할때 한 페이지에 모든 단계를 집어넣는 것보다는 화면을 전환하면서 하는 방식이 좀 더 효과적일 수 있다.
6) 피크앤드의 법칙
사용자 경험은 평균이나 합계가 아니라 절정의 순간이나 마지막 순간에 느낀 감정을 바탕으로 판단한다.
토스도 실패 순간을 최대한 부드럽게 표현해서 실패에 대한 기억을 최소화하려고 노력한다.
7) 테슬러의 법칙
모든 시스템에는 더 이상 줄일 수 없는 일정 수준의 복잡성이 존재한다.
즉시화와 단순화가 핵심인 간편송금에서 은행을 일일히 다 찾는 것은 매우 복잡하다.
토스는 이 과정을 간편화함으로서 사용자에게 편리한 과정을 제공한다.
8) 심미적 사용성 효과
사람들은 보기 좋은 디자인이 사용성이 더 뛰어나다고 인식한다.
토스의 UI가 감각적이고 깔끔하다는 것은 유명하다.
https://toss.tech/article/toss-design-system
9) 폰 레스토프 효과
비슷한 사물이 여러 개 있으면 그중 가장 색다른 것만 기억한다.
비슷한 여러 요소가 있으면 특정 기능의 강조나 유도를 위해 사용하는 시각적 강조 효과를 말한다.
단, 너무 많이 쓰면 그 효과성이 떨어질 수 있다.
10) 도허티 임계
사용자의 관심 유지와 생산성 향상을 위해서는 0.4초 이내에 시스템 피드백 제공이 필요하다.
토스는 그 과정에서 독특한 애니메이션과 인터페이스, 문구를 활용해 그 시간 내의 따분함을 해소시켜준다.
10가지 디자인 법칙을 정리하면서 토스의 디자인 시스템을 자세히 봤는데 정말 체계적이라는 생각이 들었다. 나도 미래에 UI와 UX적으로 모두 만족도가 높은 서비스를 만들어보고 싶다..!
'공부기록 > 디자인' 카테고리의 다른 글
[디자인] #3 디자인 시스템 (0) | 2024.05.25 |
---|---|
[디자인] #2 Figma 심화 (0) | 2024.05.20 |