UXUI 디자인 프로세스
전반적인 UX / UI 디자인 프로세스에 대해 알고 싶으세요?
UX / UI 디자인이 중요한 이유는 사용자 만족도 향상, 경쟁력 강화, 사용자 유지 및 이탈 방지, 비용절감, 브랜드 이미지 강화 등이 있습니다. 이러한 이유로 UX UI 디자이너들은 다양한 각도에서 문제를 보고 해결하는 관점을 잊지 말아야 합니다. 어떠한 프로세스로 업무를 진행하는지 살펴보도록 하겠습니다.
정확한 UXUI 디자인 프로세스는 무엇인가요?
지금 사용하는 앱이나 웹 모든 것들은 여러 가지 프로세스를 거쳐 개발 및 디자인됩니다. 정확하게 구분하고 진행되는 것은 아니지만 프로세스의 흐름에 따라 업무를 진행합니다.
전반적인 UXUI 디자인 프로세스 간단하게 흐름을 생각해 본다면 당연한 거니까 머릿속으로 이미지를 그리며 일을 진행하시면 도움이 될 것입니다. 지금 내가 하는 업무가 어디에 속해 있는지 또 내가 이야기 하고 알아야 하는 업무들을 파악한다면 사람들에게 커뮤니케이션하는 방법들이 쉬워질 것입니다.
먼저 주어진 일에 사전 연구, 데스트 리서치, 유저리서치등 다양한 방법의 연구를 시작합니다. 연구를 기반으로 가상의 사용자 페르소나를 만듭니다. 이후, 제품의 콘텐츠 및 서비스를 논리적으로 구성하여 구조화하는 작업을 진행합니다. 이때 사용자 플로우, 와이어프레임을 작성하여 큰 레이아웃을 구조화합니다.
이를 바탕으로 프로토 타입을 진행합니다. 이때부터 이해관계자로부터 피드백을 적극 수용하여 반영하여 디자인을 목적에 맞게 시각화하는 작업을 합니다. 이때부터 매력적인 인터페이스를 구현 (브랜딩, 컬러, 타이포 및 그래픽요소)하는 것에 집중합니다. 이후 구체화된 스타일가이드, 에셋 라이브러리를 개발하는 UI 가이드라인을 완성합니다. 이후 사용성테스트 피드백에 맞춰 반복적 수정 및 조정으로 완성도 있는 프로덕트를 개발합니다. 이후 마지막으로 제품은 고객들에게 배포 및 공개가 됩니다. 이후 사용자 피드백 및 리서치를 병행하며 업데이트를 하는 것이 전반적인 UX UI 디자인의 업무입니다.
아래에서 자세하게 설명하도록 하겠습니다.
Step 1. 연구
이 단계는 사용자, 사용자의 요구 사항 및 제품을 사용하는 맥락을 이해하는 것을 포함합니다. 이는 사용자 인터뷰, 설문 조사, 시장분석 및 경쟁 조사를 포함할 수 있습니다.
Step 2. 사용자 페르소나
연구를 기반으로 디자이너는 대상 사용자의 페르소나를 만듭니다. 페르소나는 대상 사용자를 대표하는 가상의 표현이며, 디자이너가 사용자의 요구 사항과 목표를 고려하여 디자인 결정을 내릴 수 있도록 도와줍니다.
Step 3. 정보 구조 (IA)
IA는 제품의 콘텐츠 및 기능을 논리적이고 직관적으로 구성하고 구조화하는 것을 의미합니다. 이는 사이트맵, 사용자 플로우 및 와이어프레임을 작성하여 제품의 구조와 레이아웃을 개요 화하는 것을 포함할 수 있습니다.
Step 3. 와이어프레임 작성
와이어프레임은 제품의 레이아웃 및 기능의 저해상도, 골격화된 표현입니다. 와이어프레임을 사용하면 시각적 디자인 세부 사항에 갇히지 않고 콘텐츠의 구조 및 계층을 시각화할 수 있습니다.
Step 4. 프로토타이핑
프로토타이핑은 제품의 외관 및 기능을 시뮬레이션하기 위해 상호작용이 가능한 고해상도의 표현을 만드는 것을 의미합니다. 프로토타입을 사용하면 사용성을 테스트하고 이해관계자로부터 피드백을 수집하며 개발이 시작되기 전에 디자인을 반복할 수 있습니다.
Step 5. 시각 디자인
제품의 구조 및 기능이 확정된 후 디자이너는 시각적 미학에 집중합니다. 이는 색상, 타이포그래피, 이미지 및 기타 시각적 요소를 선택하여 일관된 및 시각적으로 매력적인 인터페이스를 만드는 것을 포함합니다.
Step 6. UI 개발
이 단계에서 UI 디자이너는 개발자와 밀접하게 협력하여 시각적 디자인을 구현하고 사용자 인터페이스가 코드로 충실히 번역되도록 합니다. 이는 스타일 가이드, 에셋 라이브러리를 만들고 프런트엔드 개발에 협력하는 것을 포함할 수 있습니다.
Step 7. 사용성 테스트
사용성 테스트는 실제 사용자로부터 피드백을 수집하기 위해 제품과 상호작용하는 방법을 관찰하는 것을 의미합니다. 이 피드백은 사용성 문제, 고통 포인트 및 개선할 부분을 식별하는 데 도움이 됩니다.
Step 8. 반복적 디자인
사용성 테스트로부터의 피드백을 바탕으로 디자이너는 디자인을 반복하여 사용자 경험을 개선하는 조정 및 세부 조정을 수행합니다. 이 반복적 프로세스는 제품이 원하는 사용성 및 디자인 목표를 달성할 때까지 계속됩니다.
Step 9. 배포 및 유지 보수
디자인이 확정되고 구현된 후 제품은 공개됩니다. 그러나 UX/UI 프로세스는 여기서 끝나지 않습니다. 디자이너는 계속해서 사용자 피드백을 모니터 하고 사용 데이터를 분석하며 제품이 시간이 지나도 효과적이고 사용자 친화적인지 확인하기 위해 디자인을 업데이트합니다.
그렇다면 좋은 UXUI 디자인의 예시는 무엇이 있을까?
1. Airbnb
에어비앤비는 사용자가 쉽게 여행 숙박 시설을 찾고 예약할 수 있도록 하는 UX/UI를 중점적으로 디자인한 좋은 예입니다. 사용자 경험이 중심에 있으며, 사진, 필터링 기능, 지도 인터페이스 등을 사용하여 사용자가 원하는 숙박 시설을 쉽게 찾을 수 있도록 돕습니다.
이미지출처: Medium2. Google
구글 검색 엔진은 단순하고 직관적인 UI를 가지고 있습니다. 검색 상자는 중앙에 배치되어 있고, 결과는 사용자의 검색 쿼리와 관련된 것이 상단에 표시되며, 사용자가 필요로 할 만한 다른 옵션들은 결과 아래에 제공됩니다. 사용자 경험이 우수하며, 결과를 신속하고 효과적으로 제공합니다.
이미지출처:구글 / 홈페이지 메인화면3. Netflix
넷플릭스는 사용자의 관심사와 선호도에 기반하여 맞춤형 콘텐츠를 제공하는데, 이는 훌륭한 UX/UI 디자인의 예시입니다. 홈 화면은 각 사용자에게 맞는 추천 콘텐츠로 가득 차 있으며, UI는 사용자가 원하는 콘텐츠를 발견하고 시청할 수 있는 데에 직관적이고 사용하기 쉽게 디자인되어 있습니다.
4. 카카오톡 (KakaoTalk)
카카오톡은 한국의 메시징 앱 중 하나로, 간편하고 직관적인 UI를 제공합니다. 사용자들이 쉽게 메시지를 주고받고, 이모티콘, 스티커, 그룹채팅 등 다양한 기능을 활용할 수 있도록 디자인되었습니다. 또한, 카카오의 다른 서비스들과의 통합을 통해 더욱 편리한 사용자 경험을 제공합니다.
이미지출처: 카카오5. 배달의민족 (Baemin)
배달의민족은 인기 배달 음식 주문 앱으로, 사용자 친화적인 UI를 통해 음식 주문 및 배달 서비스를 쉽게 이용할 수 있도록 합니다. 간단한 검색 기능, 다양한 음식점 옵션, 주문 추적 기능 등이 사용자들에게 편리함을 제공하며, 시간이 지남에 따라 사용자 선호도에 맞춰 맞춤형 추천도 제공합니다.
이미지출처: 배달의민족위에서 보여드린 5개의 예시는 UXUI적으로 기획 및 디자인이 잘 되어있는 예시들입니다.
충분한 연구와 페소나 그리고 기획 및 구조와 디자인까지 완벽하게 이루어진 예시이면서 지금까지도 꾸준한 업데이트를 하는 예시입니다. 각 예시들의 자세한 이야기가 알고 싶다면 아래의 좋은 글들을 확인해 보세요.
이후에 다른 글에서 예시에 대한 자세한 설명을 드리도록 하겠습니다.
오늘도 긴 글 읽어주셔서 감사합니다.
감사합니다.
[참고 자료]
브런치스토리, 뉴비 기획자, IA,와이어프레임을 통해 서비스 의도를 분석하는 방법 (에어비엔지-야놀자 비지니스모델 분석)
Blossomindy's Research Blog '넷플릭스 추천시스템 유저 취향저격 홈화면 만들기'
카카오디벨롭퍼스, 카카오 디자인 가이드
Open.ads/ 유저해빗 / [앱 UI 톺아보기] 카카오톡 UI A to Z
Open.ads/ 유저해빗 / 배달앱 UI, 뭣이 중한디?
Medium / Fangyuan Dong / How I redesign Airbnb’s in-app searching experience
[글쓴이설명]
현재 기획자이자 디자이너입니다. 문제를 읽고 방향을 잡고 문제해결을 목적으로 눈으로 보이는 것들을 구현하는 것에 재미를 느끼고 있습니다. 좋은 기회로 UXUI 인터렉션 디자인 포지션으로 독일에서 일한 경력과 대학에서 UX/ UI을 가르켰습니다. 제가 알고 있는 것들을 저의 관점으로 풀어 기록하고 공유하려고 합니다.
