UX 디자인 배우기 #142
Today UX 아티클
이글은 번역 아티클입니다.
저는 언제나 최신 디자인 및 프로토타이핑 툴을 알려고 노력하고, 출시 후에 테스트를 해봅니다. 그중 어느 것이라도 제 워크플로우를 더 개선해주거나 더 나은 결과를 얻을 수 있게 해주지 않을까 확인해보기 위해서죠.
몇 년 전 초반에는 새로운 툴이 유용하였는지 아닌지 판단하는 것이 지금보다 더 쉬웠습니다. 요즘엔 앱들이 거의 매일 출시되고 있고 있어서 전부 다 프로토타입 만들기를 시도해보는 것이 어렵습니다.
각 프로토타이핑 툴의 기능과 특성에 대해 더 잘 알고, 다음에 무엇을 써볼지 더 잘 결정하려는 필사적인 노력의 일환으로, 저는 짧은 프로토타이핑 툴 리스트를 만들기 시작했습니다. 더 많은 항목을 리스트에 더하면 더할수록, 점점 더 통제할 수 없게 되었습니다 – 너무 많은 솔루션이 존재한다는 믿을만한 싸인이죠.
아마도 상황이 이렇다 보니 콘퍼런스에서 발표를 하거나 수업을 끝낸 후에, 참여하셨던 분들이 가장 좋은 툴이 무엇인지 알고 싶어 하며 제게 조언을 구했던 것 같습니다. 솔직히 말하면, 명확한 답을 줄 수 있을 것 같진 않습니다. 러닝화를 고르는 것과 마찬가지로 “최고”의 툴이란 보통 특정 순간에 가진 니즈에 따라 달라지고 얻고자 하는 결과가 무엇이냐에 따라 달라지기 때문입니다.
얼마 정도 시간이 흐르고 나니 제가 디자인에 대한 육감 같은 걸 기르게 된 것 같습니다. 말하자면 살짝 보고도 시도해 볼 만한 가치가 있는 툴인지 아닌지 파악하는 능력(혹은 그런 툴이라고 믿는 능력 – 어쨌든 제가 슈퍼맨은 아니니까요) 같은 게 생긴 거죠.
여러분은 운이 좋게도 프로토타이핑 툴을 선택하기 위해 이런 육감이나 슈퍼 파워를 가질 필요는 없습니다. 선택의 객관적 수단이 있기 때문입니다. 여러분이 현재 가진 우선순위가 무엇이냐에 따라 전부 달라질 겁니다. 자, 이제 시작해봅시다.
학습곡선
가장 효과적인 학습 방법은 기존 지식을 활용하는 것으로, 처음부터 학습을 시작할 필요가 없습니다. 바로 이것을 “지식 이전”이라고 부르는데, 기존에 습득한 지식을 새로운 상황에 적용하는 것을 뜻합니다. 이는 새로운 프로토타이핑 툴 이용 방법을 배울 때도 마찬가지로 유용합니다. 익숙한 인터페이스와 익숙한 툴 세트를 가진 프로토타이핑 툴은 모든 면에서 새로운 툴보다 더 배우기 쉬울 것입니다.
특히 Adobe의 제품군 같은 경우에 이렇습니다. 모든 앱이 서로 닮아 있죠. 어디에 패널과 다이얼로그가 있을지 알고 있으며, Adobe 제품 사이의 유사성은 새로운 앱을 학습하기 쉽게 해주거나 앱 간에 전환을 쉽게 해줍니다. 예를 들면 일러스트레이터에서 포토샵으로 전환하기 쉬운 것처럼 말이죠.
하지만 새로운 툴을 학습하는 데 투자해야 한다고 예상하는 시간과 실제로 디자인 프로세스에서 그 툴을 이용하는 데 예상하는 시간도 비교해봐야 합니다. 이상적인 상황은 툴 학습에 적은 시간만 들이면 되어서, 자주 혹은 심지어 매일 사용할 수 있게 되는 것입니다.
팀워크 서포트
저는 클라이언트가 제 디자인에 대해 주는 피드백을 통합해 줄 프로토타이핑 툴이 필요합니다. 그 정보를 활용해 제 작업을 개선하고 더 나은 새로운 버전을 다시 공유하기 위해서죠.
그렇게 하기 위해 저는 보통 디자인 스크린을 InVision에 업로드합니다. 여기서는 클라이언트가 언급하고자 하는 정확한 지점에 코멘트를 더할 수 있습니다. 그러면 제가 코멘트에 댓글을 달 수도 있고 만일 해당 이슈가 해결되었다면 코멘트를 닫으면 됩니다.
하지만 만일 여러분이 회사에서 일을 하신다면, 클라이언트뿐만 아니라 여러분의 동료 디자이너들도 팀의 일원이라는 느낌을 받아야 합니다. 바로 이런 이유 때문에 함께 일하는 동료들이 자신이 만든 디자인 스크린 버전을 업로드하고 공유할 수 있게 해주는 툴을 쓰는 것이 중요합니다.
그래야 모든 사람이 프로젝트에 기여를 하면서 같이 협업할 수가 있습니다. InVision과 같은 툴은 프로젝트의 전반적인 활동을 타임라인 뷰로 보여주어 모든 최신 변경 사항을 파악하고, 따라갈 수 있습니다.
피델리티(fidelity) 수준
제품이 어떻게 될지에 대한 기본 아이디어만 가지고 있는 첫날부터, 우리의 프로토타입은 학습함에 따라 활기를 얻으며 발전하기 시작합니다. 때문에 우리가 반복적 디자인을 하는 것이며, 각 단계에서 우선순위에 따라 서로 다른 것들을 테스트하게 됩니다.
예를 들어, 아이디어가 타당한지 아닌지 모르는 매우 초반에는 컬러 팔레트나 그리드 시스템 같은 디자인 디테일에 집중하는 것은 별로 추천하지 않습니다. 대신, 프로토타이핑은 해야 합니다. 그리고 우리가 선택할 프로토타이핑 툴은 목표로 하는 피델리티에 따라 달라집니다 (예. 의도한 최종 제품에 얼마나 가깝게 프로토타입을 만들 것인가).
피델리티는 점진적으로 만들 수 있습니다. 낮은 피델리티는 단순히 아이디어를 테스트하고자 할 때(이때 툴은 한 화면에서 다른 화면으로 가는 내비게이션을 만들 수 있어야 함), 중간 피델리티는 레이아웃, 정보, 인터랙션 디자인에 집중할 때 (이때 툴은 좀 더 정밀한 디자인이 가능해야 함), 높은 피델리티는 비주얼 디자인, 애니메이션, 마이크로 인터랙션 등이 가장 중요할 때(이때 툴은 모션과 전환 효과를 더하는 것이 가능해야 함) 이용하면 됩니다.
각 툴은 우리가 필요로 하는 프로토타입을 만드는 데 도움이 되어야 하고 그 이상은 필요도 없을 겁니다. 그 툴이 더 이상 필요하지 않은 다음 단계로 빠르게 넘어갈 수 있게 해줘야 합니다.
낮은 피델리티
단순히 디지털 제품의 아이디어를 테스트하고자 할 때는, 많은 걸 할 수 있게 해주는 앱은 별로 편하지 않습니다. 이 단계에서 필요 없는 디테일이 오히려 방해를 할 수 있기 때문입니다. 더 중요한 것은 인터페이스의 요소들이 적절한 사이즈나 레이아웃인지 따지지 않고, 한 화면에서 다른 화면으로 넘어갈 수 있게 해주는 것입니다. (네, 맞아요. 요소들의 줄을 맞추려는 유혹을 떨쳐버리기는 쉬운 일이 아니죠. 하지만 저를 믿으세요. 지금 당장은 그게 중요한 게 아닙니다.)
저는 아이디어가 떠올라서 바로 컴퓨터 앞으로 가게 될 때면, 이 디자인 문서의 사이즈가 어때야 하는지 혹은 어떤 색을 선택해야 하는지 등을 묻고 있는 제 자신을 발견하곤 합니다. 콘셉트를 제대로 잡았는지 알지도 못한 상태인데도 말이죠. 때문에 저는 이런 상황에서는 가장 오래되었고 가장 기본적인 옵션을 선택합니다. 바로 종이와 펜을 이용하는 거죠.
이 아이디어는 새로운 것이 아닙니다.
“하지만 왜 스케칭부터 시작해야 하나요?”라고 물을 수도 있습니다. 그 이유는 이렇게 일찍부터 디지털로 바로 가게 되면 픽셀 수준의 정밀함에 휩쓸리게 되기 쉽고 장기적으로 봤을 때 시간이 낭비될 수 있기 때문입니다. […] 펜과 종이로 돌아가는 것은 아이디어를 끄집어내서 반복 디자인을 시작할 수 있게 해주는 빠르면서도 쉬운 방법입니다.”
펜과 종이를 이용하면, 앞에서 언급했던 구체적인 디테일에 대해 전혀 고민하지 않게 됩니다. 대신, 아이디어 자체에 집중할 수 있습니다.
생각 속에 있는 디자인을 빠르게 그려내고 나면, 그다음에 기본적인 플로우를 테스트하기 위해 제스처나 전환 효과가 들어가는 작동하는 프로토타입을 만들기 위해 Marvel이나 POP 같은 툴을 이용해서 사진을 찍습니다.
이런 방식의 프로토타이핑에서 좋은 점은 해당 콘셉트가 실패해도(그래도 백만 불짜리 아이디어에 대한 작업은 계속해야 합니다), 다른 접근법으로 다시 시작하는 것이 매우 쉽다는 겁니다.
팁: 알림, 툴팁, 짧은 피드백 메시지 등과 같은 일시적 뷰를 디자인하고 있다면, 메인 인터페이스와 분리해서 그릴 수 있습니다. 그다음에, 그 인터페이스를 가위로 오려서 메인 디자인 위에 올리면 됩니다. 이렇게 하면 메시지가 뜬 화면과 뜨지 않은 화면을 모두 찍을 수 있습니다. 손으로 두 화면을 모두 그리지 않아도 하나만 만드는 노력으로 두 화면을 찍을 수 있다는 거죠.
중간 피델리티
종이와 펜도 괜찮지만, 디자인 프로세스 중 그걸로는 충분하지 않은 단계에 도달할 때가 있습니다. 앱의 핵심 개념에 대한 확신이 있고 이미 일부 기본 프로토타입을 종이에 만들었을 때, 앞으로 나아가기 위해 다른 툴이 필요합니다. 보통, 중간 피델리티 프로토타입이라고 할 때는, 주요 목적이 인터랙션과 정보를 전달하는 것인 와이어프레임을 뜻합니다.
저는 와이어프레임을 디자인할 때, 최대한 실제 정보를 이용하려고 노력합니다. 하지만, 이 단계에서 마음대로 쓸 수 있는 모든 데이터를 항상 가지고 있지는 않습니다. 그래서 보통은 최종 텍스트, 그래픽, 컬러 등을 대략적으로 추측해야 합니다. 왜냐하면 이런 것들은 브랜딩과 연결이 되어 있기 때문입니다. (저를 탓하시면 안 됩니다. 이 일을 하는 분들은 항상 늦게 알려준니까요!) 최소한 실감 나는 레이아웃과 인터랙션을 만드는 데 집중할 수는 있습니다.
이 단계 동안에 저는 보통 Sketch를 이용합니다. 이 툴은 상대적으로 사용하기 쉬우며 종이 디자인 콘셉트를 그다음 단계로 끌어올릴 수 있도록 도와줍니다. Sketch를 이용하면 쉽게 UI 요소를 재사용할 수 있어서 처음부터 시작할 필요가 없으며, 여러 표준 UI 구성요소를 활용할 수도 있습니다. 레이아웃을 만드는 데 사용할 수 있는 보조적인 인터페이스 구성 요소도 많이 있습니다. Sketch App Sources에 들어보시면 찾을 수 있을 겁니다. 프로세스는 계속 진행됨에 따라, 이런 요소들의 커스터마이제이션 정도도 통제할 수 있으며 유저 테스팅을 위해 멈출 부분을 결정할 수도 있습니다.
기대에 부합하되 지나치지 않은 디자인을 하고 싶지 않다면, 이러한 디자인 구성요소를 이용하는 것도 좋은 아이디어입니다. 보통 모든 것을 처음부터 디자인하게 되면 시간이 많이 걸립니다 (그럼 그 디자인을 개발자들이 적용할 때는 더 많은 시간이 걸리게 될 것입니다). 바로 이런 이유 때문에 리스트, 다이얼로그, 폼, 탭 등 흔한 UI 요소는 다시 이용하는 것이 더 좋습니다.
하지만 (네, 언제나 “하지만”이 붙죠.) Sketch는 Mac에서만 쓸 수 있는 툴입니다. 따라서 Window를 쓰신다면 다른 툴을 쓰셔야 할 겁니다. Balsamiq과 Omnigraffle 역시 유명하며 나온지도 꽤 되었습니다.
Gravit와 Figma 같은 몇 가지 새로운 UI 디자인 툴은 웹 기반이기도 합니다 (그래서 설치를 할 필요가 없습니다).
높은 피델리티
프로토타입이 점차 성장하여 실제 사용할 수 있는 제품에 가까워지고 있다면, 이전에는 별로 상관이 없었던 구성요소들을 디자인해야 합니다. 예를 들면 자주 뜨지 않는 다이얼로그, 일부 피드백 메시지 (오류 메시지와 액션의 결과를 보여주는 메시지), 빈 상태, 비활성화 버튼 등이 여기 해당됩니다.
기본적으로 초반의 낮은 피델리티와 중간 피델리티 프로토타이핑 단계에서는 소수의 핵심 사용 상황에서 쓰이는 구조, 정보, 플로우 등에 집중했었습니다. 디자인의 성숙해짐에 따라 다음과 같은 것들을 더 고려해야 합니다.
부가적인 사용 상황 (보통 자주 등장하지 않는 상황을 뜻함)
엣지 케이스(edge case) 및 비상 상황(예. 신용카드가 거부되면 결제 플로우에서 무슨 일이 벌어지는가?)
오류 방지 및 핸들링
이러한 모든 사용 상황은 좋은 UX를 위해 고려해야 하는 중요한 것들이지만, 처음부터 디자인해야 하는 것들은 아닙니다. 핵심 사용 상황에서부터 시작해서 가장 연관성 있고 중요한 디자인 측면부터 집중해야 합니다. 그다음에 디자인을 완성하고 타당성을 검증하기 위해 주변 조건(edge condition)을 포함시키면 됩니다.
그럼 이 단계에서는 UI의 각 구성 요소의 측면과 행동을 결정할 수 있도록, 디자인 구성요소의 세세한 부분까지 컨트롤할 수 있게 해주는 툴을 선택하는 것이 매우 중요합니다.
저는 예전에는 이런 과업을 수행하는 데 Axure를 썼었습니다. 사실, 바르셀로나에서 봤던 첫 번째 취업 면접에서는 제게 Axure을 이용할 줄 아는지 물어보기도 했었습니다. 그 회사에서 당시 널리 이용하던 툴이었기 때문이죠. 물론, 취업을 하기 위해 할 수 있다고 말해놓고 일을 시작하기 며칠 전부터 배우기 시작했습니다. 그렇게 하면서 Axure의 잠재력을 발견하게 되었습니다. 다이얼로그, 배너 및 다른 일시적 정보 블록을 유저의 인터랙션에 따라 해보고 감출 수 있는 컨디셔널 같은 기능을 이용하면서 말이죠. 완전히 처음부터 디자인해야 하는 스크린의 수를 최소화시켜주기 때문에 매우 편했습니다.
여기까지 세심하게 읽어오셨다면, 아마 제가 지금까지 주로 고정된 디자인에 집중했다는 점을 깨달으셨을 겁니다. 애니메이션은 어떤가요? 이 부분은 점점 더 중요해지고 있습니다. 이젠 모던 인터페이스 어디서나 애니메이션을 찾을 수 있기 때문 만이 아니라, 어떻게 움직였으면 하는지 샘플을 보여주지 않고는 다른 팀원들에게 전달하기가 매우 어렵기 때문이기도 합니다.
애니메이션, 마이크로 인터랙션, 전환 효과 프로토타이핑에 관련해서는, 저는 프로토타이핑 툴을 두 그룹으로 나눕니다.
익숙한 UI를 가지고 있으며 코드를 전혀 배우지 않아도 되는 툴
최소 몇 줄의 코드를 치며 몸으로 부딪쳐야 하는 툴
첫 번째 그룹에는 Pixate, Principle and Flinto과 같은 몇 가지 새로운 툴 들이 등장하고 있습니다. 앱 전체가 아니라 일부 스크린만을 프로토타입 하거나, 서로 다른 요소들이 어떻게 보일지 확인하거나, 다른 상태로 전환될 때 어떻게 보일지 확인하는 등 많은 상황에서 이런 툴들을 사용하면 됩니다.
한 단계 더 나아가고 싶다면, 두 번째 그룹을 선택할 수도 있습니다. 여기에 해당되는 앱들은 디자이너에게 덜 익숙할 수도 있지만, 애니메이션에 대한 보다 세밀한 통제권을 가질 수 있습니다. 또한, 많은 경우에 보다 현실적인 결과물을 내기 위해 기존에 있는 구성 요소를 이용할 수도 있습니다. 그러면 프로토타입에서 최종 코드로 더 쉽게 이동할 수 있게 됩니다. 만일 여기서 더 나아가고 싶다면, 개발자들에게 보낼 수 있는 코드를 추출하게 해주는 Framer(자바스크립트 기반), Origami Studio 등을 써보는 것도 추천합니다.
iOS에서는 시각적 환경에서 네이티브 iOS 컴포넌트를 이용해 인터페이스를 디자인할 수 있는 Interface Builder도 이용할 수 있습니다. (이 솔루션은 완전히 코드 없이 이용 가능합니다. 안드로이드에는 Android Studio가 있습니다.
워크플로우와의 통합
프로토타이핑 툴을 선택할 때 고려할 또 다른 부분은 그 툴이 여러분의 디자인 프로세스 및 자주 이용하는 툴과 얼마나 잘 맞냐는 겁니다. 유저를 리서치하고, 테스트하고, 수치를 수집하고, 이해관계자들과 소통하고, 디자인 최종 적용을 위해 개발자들과 공유하는 것 등이 포함된 훨씬 큰 프로세스의 부분입니다.
모든 것을 해결해 주는 하나의 툴을 찾을 수는 없겠지만, 프로토타이핑 툴은 적어도 그 프로세스를 매끄럽게 지나가는 데 도움이 되어야 합니다. 특히 타이트한 데드라인을 앞두고 반복 작업을 해야 할 때는 더 그렇습니다.
예를 들어, Photoshop, Illustrator, Sketch 등으로 디자인을 하고 있다면, 거기서 생성되는 파일을 다른
확장자로 추출하지 않아도 되고 인터랙션을 만들기 위해 처음부터 시작하지 않아도 되는 프로토타이핑 툴이 가장 좋은 선택입니다.
개인적으로는 (다시 말하지만) Sketch에 상당히 만족하고 있습니다. 이미지를 추출할 수도 있고 심지어 편집 가능한 오리지널 Sketch 파일을 이용해서, 다른 툴에 업로드해서 프로토타입을 완성할 수도 있습니다.
인터랙션을 추가하고 싶다면 파일을 Marvel에 올리고, 애니메이션이 필요하면 Framer 혹은 Flinto에 올리는 겁니다.
프로토타입을 만들 때 마지막(이자 가장 중요한) 단계 중 하나는 실제 유저에게 테스트하고 정보(제스처, 탭, 반응 등)를 수집해서 제품을 개선할 수 있게 하는 겁니다. InVision이나 Marvel 같은 툴은 Lookback과 연결되어 나머지 팀원들과 그 데이터를 분석할 수 있도록 앱을 테스트하면서 동시에 비디오를 녹화할 수 있게 해줍니다.
사용 용이성
끝으로, 그 프로토타이핑 툴에 대해서 여러분이 어떤 느낌을 갖느냐도 중요합니다.
매일 혹은 저 같은 프리랜서라면 심지어 토요일이나 일요일에도 이용할 툴이라면, 느낌이 좋아야 하잖아요?
이건 개인적인 것으로 조언을 드릴 게 별로 없습니다. 일을 어렵게 만들고 장애물을 만들어내고 속도를 늦추고 부가적인 단계를 만드는 툴이 아닌 여러분을 만족시키는 툴을 찾아보세요.
결론
오늘날 사용되는 디자인 및 프로토타이핑 툴은 너무 많아서 (심지어 제가 다 언급하지도 않았습니다), 겁을 먹게 될 수도 있습니다. 아마도 그래서 “모든 것을 다루는 하나의 툴”, 즉 모든 종류의 디자인을 가능하게 해 주고 프로토타입도 만들게 해주는 앱을 찾게 되는 것 같습니다.
어떤 면에 있어서, 이런 부분을 Adobe Experience Design CC (디자인 사이에 링크를 걸게 해주는 새로운 디자인 툴)과 Sketch(인터랙션에는 Craft Prototype와, 애니메이션에는 AnimateMate와 같은 플러그인을 같이 이용되는)의 등장을 통해보게 되기도 합니다.
디자인과 프로토타이핑 툴의 미래는 어떨까요? 저도 확신하진 못하지만, 이런 방향으로 간다면, 수많은 작은 툴로 구성되어 있지만 진짜 유용한 것은 없는 스위스 군대 칼 같은 지나치게 복잡한 툴이 될 것입니다.
또한 외과의사나 기계 기술자들을 포함한 다른 전문가들도 상황에 따라 다른 툴을 이용합니다. 우리 디자이너라고 해서 다를 이유가 뭐가 있겠습니까? 가장 중요한 것 중 하나는 주어진 일에 가장 적합한 툴이 어떤 것인지 파악하는 것입니다.
어떤 경우에 건, 툴 자체에 지나치게 압도되면 안 됩니다. 툴이란 우리의 아이디어를 다듬는 데 도움을 주기 위한 것입니다. 제품이 어떻게 보이는지 어떻게 움직이는지 툴이 결정하면 안 됩니다.
회사에서 특정 툴을 이용하라고 강요하는 상황이라면(저도 그런 경험이 있습니다), 위에서 얘기한 가이드라인이 상당히 쓸모없다는 것도 이해합니다. 그런 경우라면, 최소한 다른 걸 시도해보자고 팀을 설득해볼 수는 있을 겁니다. 여러분이 제시하는 이유가 명확하고 논리적이라면 말이죠. 아마 위에서 언급한 부분 중 일부가 여러분이 주장하는 데 도움이 될 것입니다.
끝으로, 누군가 어떤 툴이 “최고”라거나 “가장 배우기 쉽다”라고 말하거든 예의 주시하세요. 이는 매우 주관적인 부분으로, 여러분 스스로 그 여부를 판단해야 합니다. 결국, 저나 다른 사람들과 마찬가지로 여러분의 결정도 다 다를 겁니다.
전민수 UX 컨설턴트 소개
(UX 실무 경력: 27년차 UX 전문가: LG전자, 서울시청 등 약 300회 이상 UX 컨설팅 수행)
(UX 강사 경력: 23년차: 삼성, SK, KT 등 약 1,000회 이상 UX 강의 진행)
https://brunch.co.kr/@ebprux/1332
[실시간 Live 강좌] (PM/PO/UI/UX/리서치) 수강생 모집 중
(이비피알유엑스 라이브클래스에서 매월 최소 1개에서 최대 4개 강좌 (온라인) 줌 Live 강좌 진행) (PM/PO/UI/UX/리서치/UX 방법론&프로세스 프레임웍)
[VOD 강좌] (PM/PO/UI/UX/리서치) 수강생 모집 중
(인프런에서 총 20개 VOD UX 강좌를 오픈했습니다)
(PM/PO/UI/UX/리서치/UX 방법론&프로세스 프레임웍)
https://www.inflearn.com/users/196290