지난 글에서는 새로운 금융 서비스를 기획하고 디자인할 때 진행하는 UX 리서치 및 디자인 프로세스에 대해 다뤘다.
그 다음 이야기인 이번 글에서는 그러한 UX 리서치 내용을 시각적으로 풀어내는 UI 디자인에 대한 이야기다. 특히나 내가 진행하고 있는 프로젝트들은 웹을 기반으로 한 금융 서비스이기 때문에 '웹'이라는 디지털 환경의 특징과 '금융 서비스'라는 특수 컨텍스트를 이해하지 않으면 새로운 서비스를 기획하는 과정에 어려움이 많다. 또한 그렇게 기획된 바를 시각적인 와이어프레임으로 표현하지 않으면, 프로젝트의 이해관계자들에게 서비스의 구상을 설명하고 설득하기 어렵다. 그래서 1) 기획하는 바를 누구나 이해가능한 수준의 디자인으로 옮겨서 표현하고, 2) 이를 다른 이해관계자들에게 쉽게 설명하며 발전시키는 것이 내가 이 곳에서 느끼는 UX/UI 디자이너의 매우 중요한 역할이다.
1) 누구나 이해가능한 수준의 디자인으로 옮겨서 표현
이것이 개인적으로 내가 경험하는 'UI 와이어프레임 디자인'의 정의이다. 나의 직무가 UX researcher 나 UX designer 로 한정되지 않고, UX/UI designer 로 확장될 수 있는 이유이기도 하다. UI란 User Interface의 약자로 사용자가 디지털 환경을 접할 수 있도록 중간에서 디지털 요소들을 전달해주는 매개체이다. 요즘엔 아마존의 알렉사처럼 소리를 매개체로 정보를 전달하는 VUI(Voice User Interface)도 많은 주목을 받고 있고, 내가 주로 다루는 GUI(Graphic User Interface)은 시각적으로 디지털 세계와 사람을 이어주는 매개체이다. 이 글에서는 일반적인 UI로 통용되는 시각적인 UI의 표현에 대해 얘기해볼까 한다.
'누구나 이해가능한 수준?'
매우 주관적일 수도 있는 표현이다. 하지만 내가 말하고자 하는 건 디자이너나 개발자와 같이 전문가가 아니더라도 화면의 레이아웃이나 구성 요소들을 쉽게 알 수 있는 수준으로 표현 되어야 한다는 것이다. 아래 스케치는 예전 개인 프로젝트로 모바일 앱을 기획하고 디자인하면서 끄적거려본 와이어프레임이다. 이러한 와이어프레임 스케치는 협업을 할 때에 더욱 중요하다. 다른 디자이너들과 공유하며 아이디어를 나눌 수도 있고, 혹은 디자이너가 아닌 팀원들과도 쉽게 소통하며 의견을 나눌 수 있기 때문이다. 물론 손으로 그리는 스케치보다 컴퓨터로 러프하게 작업하는 와이어프레임을 선호하는 디자이너들도 있다. 각자의 취향에 맞게 가장 최선의 방법을 사용하여 소통하면 된다. 우리 팀에서는 나의 상사인 루이로랑과 나는 손으로 그리는 와이어프레임 스케치를 선호하고, 나머지는 컴퓨터로 바로 작업하는 경우가 많다.
또한 이러한 UI 디자인 과정은 서비스의 특징에 따라 달라지기도 한다. 보통 기존에 존재하는 서비스의 UX/UI를 개선하는 경우에는 굳이 이 과정을 거치지 않고 바로 Hi-fi prototype 단계로 이동하거나, html/css를 수정하며 개발자들과 바로 소통하기도 한다. 우리 팀 디자이너들은 새로운 서비스를 기획/디자인하는 프로젝트를 주 업무로 하고, 그 외에도 다양한 기존 서비스들의 UX/UI 리뷰를 하고 개선하는 업무를 동시에 진행한다. 그렇기 때문에 각 서비스의 특징과 업무의 목적에 맞게 자신과 잘 맞는 방법을 선택하는 것이 중요하다.
2) 다른 이해관계자들에게 쉽게 설명하며 발전
내가 이 곳에서 짧게나마 경험하며 느낀 점은 UI 디자인 과정의 주목적은 '소통'이라는 것이다. 디자이너 혼자서 수많은 사람들이 이용하는 서비스를 뚝딱 만들 수는 없다. 보통 프로덕트 오너, 개발자와 함께 일하는 경우가 많은데, 그들에게 나의 디자인을 보여주고 설명하는 과정은 매우 중요하다.
위에서 말한 것처럼 UI 와이어프레임 디자인을 손으로 거치지 않고, 바로 컴퓨터로 작업하는 사람들도 있다. 하지만 나는 핸드 스케치로 아이디어를 표현하는 것을 선호한다. 회사에서도 상사가 특별히 요구하지 않아도 내가 스스로 이 단계를 거친다.
최근에 회사에서 진행한 기존 서비스의 UX/UI 개선 프로젝트를 예로 들어 왜 내가 이 방법을 선호하는지 설명해보고자 한다. :)
,,
UX팀을 거치지 않고 개발부터 해버리면 어쩌자는거야?
얼마 전, 헤드 언니가 특별 임무를 줬다. 개발이 거의 다 된 링크를 보내주며, 이 서비스의 UX/UI 리뷰를 해달라는 것이었다. 나는 우선 차근히 그 링크에 들어가 어떤 목적으로 만들어진 것인지 파악했다.
서비스의 이름은 ‘Splash-screen administration’.
‘음... 이게 뭐지? 스플래쉬 스크린이면 모바일 앱에 처음 들어갈 때 보이는 로딩 화면이지 않나?’라는 생각이 가장 먼저 들었다. 그렇게 하나씩 페이지를 이루고 있는 UI 요소들(표, 버튼, 텍스트)과 기능들을 확인하고, 근본적인 정보들의 구조를 파악해 보았다.
혼자서 이런저런 고민을 해보고, 노트에 내가 파악한 점들을 끄적거리며 정리했다. 결과적으로는 ‘분석 - UI 개선점 - UX 개선점’ 으로 플로우를 짰고, 각 내용들을 하나씩 피피티에 옮겼다.
UI 개선점은 어찌보면 간단하다. SG의 디자인 가이드라인을 따르지 않은 요소들을 그에 맞게 바꿔주면 된다. 여기서 조심할 것은 아주 사소한 것들도 꼼꼼히 정리해서 알려줘야 한다. 심지어 날짜를 선택하는 Date picker의 포맷이 정확히 ‘dd Mmm yyyy’가 되도록 해야 한다는 것까지. 특히 우리 팀 헤드 언니는 이러한 사소한 포맷에도 매우 민감하고, 이를 지키지 않은 요소들을 귀신같이 금방 찾아낸다.. 그렇기 때문에 자기가 맡은 브랜드나 서비스의 디자인 가이드라인을 눈과 손에 익혀두는게 좋다.
간단한 UI 리뷰를 정리했다면, 그 다음은 UX enhancement, 즉 UX 측면을 고려하여 디자인 개선점을 제안하는 것이다. 이 단계에서 UI 와이어프레임 스케치를 통해 전체적인 서비스의 정보 구조가 가지고 있는 문제점을 지적하고, 이를 해결할 수 있는 방안을 제시했다. 해결 방안은 UI 와이어프레임 스케치로 제안했다. 확실히 포토샵으로 모든 요소들을 배치하고 디자인하는 것보다 시간이 단축되었다. 그래서 하루 만에 헤드 언니에게 승인을 받았고, 바로 프로덕트 오너와 개발자, 그리고 UX/UI 디자이너가 함께 회의를 진행할 수 있었다.
결국 우리 팀이 문제점만 지적하지 않고, UI 와이어프레임 스케치를 통해 해결 방안을 설명하였기 때문에 다른 팀원들이 쉽게 설득될 수 있었다. 그래서 바로 개발자가 UI 요소들을 개선했고, UX 방안도 동의하여 다음 단계를 빠르게 진행하고 있는 중이다.
회의를 하면서 내가 제안 사항을 설명한 뒤에 헤드 언니가 말했다. “I feel little bit uncomfortable why this widget has developed without UX team.” 그러면서 상대방이 기분 나쁘지 않도록 왜 UX 팀인 우리의 역할이 중요한지 하나씩 이유를 설명했다. 참 단호하고도 친절했다.
UI 와이어프레임 디자인을 한다는 것은 바로 이런 소통의 단계까지 포함하는 것이다.
오늘도 또 하나의 설득의 기술을 배운 것만 같아서 뿌듯하고 도전이 된다.
이번 글에서는 UI 디자인 프로세스를 실제 경험에 비추어 정리해 보았다. 지금까지 런던 금융업계에서 UX/UI 디자이너가 어떤 일을 하는지, 그러한 업무의 단계를 '기획-UX 리서치-UI 와이어프레임 디자인'의 순서로 정리하여 글을 쓰고 있다. 다음은 Hi-fi prototype로 주로 설명되는 GUI 디자인 단계에 대해 설명해볼까 한다.
앞 내용이 궁금하다면 - >
https://notefolio.net/article/view/416
https://notefolio.net/article/view/422
