와이어프레임 없이 작업한 4년간의 결론
- 아무도 오해를 한 적이 없다. - 아무도 우리의 작업 속도를 비판한 적이 없다. - 아무도 우리의 미학적인 선택을 두고 문제를 삼지 않았다. - 아무도 우리에게 “와이어프레임은 어디 있나요?”라고 묻지 않았다.
그래서 와이어프레임을 사용해야 한다는 가장 일반적인 주장들을 자세히 살펴보고, 대체 왜 와이어프레임 없이 작업을 더 잘할 수 있다고 믿는지를 설명해보도록 하겠습니다.
본격적인 논의에 들어가기 전에, 와이어프레임이라는 용어를 정의해 보도록 하겠습니다. 웹 디자인에서 와이어프레임은 웹사이트의 구조와 기능을 시각적으로 보여주는 용도로 사용됩니다. 일반적으로는 흑백으로 표시되며, 텍스트 입력 양식도 포함됩니다. 와이어프레임의 종류와 유형은 매우 다양하지만, 일반적으로 말하자면 와이어프레임은 크게 두 개의 등급으로 나뉘어집니다. 첫 번째는 완성도가 낮은 와이어프레임으로, 펜과 종이, 또는 화이트보드와 마커 펜으로 그리는 경우가 많습니다. 두 번째는 완성도가 높은 디지털 와이어프레임으로, 앱을 이용해서 만드는 경우가 많습니다. 스케치와 다르게, 완성도가 높은 와이어프레임은 훨씬 더 자세한 수준까지 표현되어 있어서, 실제 제품의 모습과 상당히 비슷합니다. 일반적인 상호작용 패턴을 통해서 기능을 설명해주며, 제품의 추가적인 개발을 위한 가이드를 제공합니다.
우리가 말하는 와이어프레임은 스케치를 말하는 게 아닙니다.
우리가 와이어프레임을 사용하지 않는다고 말하는 건, 완성도가 높은 와이어프레임에 대해서 이야기를 하는 것입니다. 즉, 소프트웨어를 활용해서 만들며, 사용자 인터페이스(UI)를 위한 청사진이나 가이드 역할을 하는 와이어프레임을 말하는 것입니다. 반면에 완성도가 낮은 와이어프레임은 모두가 자신의 생각을 표현하고 팀원들과 함께 아이디어를 발전시키기 위해서 사용하고 있습니다. 저희는 이런 낮은 수준의 와이어프레임을 스케치 또는 낙서라고 부릅니다. 그래서 분명히 말하자면, 고객들에게 보여줄 수도 있는 그런 수준의 와이어프레임에 대해서 이야기하고 있는 것이죠. 그리고 그런 와이어프레임 없이도 충분히 작업을 할 수 있습니다.
주장 1: 와이어프레임은 콘텐츠와 관련된 중요한 문제들에 대해 판단을 내릴 수 있게 도와준다
와이어프레임은 웹페이지의 구조에 대한 개념적인 결정을 내리는 데 주로 사용됩니다. 그러나 각각의 디자인 시안을 만들기 전에도, ‘우리가 디자인 하는 페이지를 통해서 우리가 얻고자 하는 목표는 무엇인가, 그리고 그러한 목표를 어떻게 달성할 수 있는가?’와 같은 몇 가지의 기본적인 질문에 대해서 우리는 명확히 답을 내려야 합니다. 이러한 질문들에 대한 대답을 통해서 우리는 전략적인 방향을 결정하고 디자인 작업을 위한 기반을 마련합니다. 우리는 전략을 세우면서 동시에 시각적인 디자인 작업을 하는 것이 아닙니다. 와이어프레임을 만드는 것은 우리가 세우는 이러한 전략들을 시각적으로 표현하는 것에 대해서만 도움이 될 뿐입니다.
웹 페이지가 어떻게 보일지를 결정하기 전에, 우리는 원하는 목표에 대해서 모든 이해관계자들이 모두 똑같이 이해를 하게 만들어야 합니다. 우리는 “핵심 확장 도약(Core Extend Jump)”이라는 모델을 통해서 이러한 공통의 이해를 이끌어 냅니다. 이 모델을 사용하면 디자인에 대한 지식이 없어도 전략적인 목표를 세울 수 있으며, 그러한 목표를 달성할 수 있는 방법까지도 결정할 수 있습니다. 이러한 참고 차원의 프레임은 덩치가 큰 질문들을 좀 더 작은 단위로 나누어서 살펴볼 수 있게 도와줍니다. 그리고 구체적인 디자인, 콘텐츠, 기능에 대한 질문에 답을 내릴 수 있게 도와주면서 전략적인 차원에서 판단을 할 수 있게 해줍니다. 이렇게 우리는 앞으로의 디자인 작업이 이러한 결정에 따라서 이루어지게 하며, 그러한 판단을 적절하게 표현할 수 있게 만듭니다. 이러한 전략은 디자인을 위한 정보를 제공해줄 수는 있지만, 전략 수립과 디자인 작업이 동시에 이루어질 수는 없습니다. 와이어프레임은 너무 많은 것들을 너무 성급하게 시도하는 것입니다. 즉, 모든 것을 한꺼번에 완성하려고 하는 것이라고 할 수 있습니다.주장 2: 와이어프레임은 제품에 대한 아이디어를 일찍 테스트 해볼 수 있게 해준다
와이어프레임은 개발을 시작하는 단계에서 사용자 테스트(user test)나 사용성 테스트(usability test) 등의 형태로 초기의 아이디어들을 테스트 하는 데 사용되는 경우가 많습니다. 이러한 테스트의 목표는 초기의 아이디어와 관련한 근거들을 최대한 빨리 찾는 것이며, 이 과정에서는 와이어프레임이 제품을 사용할 때의 경험에 대한 통찰력을 제공해주고 어떤 솔루션의 장점과 단점을 판단할 수 있게 도와준다는 믿음을 갖고 있습니다.
이러한 생각이 나쁜 건 아니지만, 안타깝게도 사용자들이 직접 와이어프레임에서 자신들이 실생활에서 원하는 정보를 얻는 것도 아니기 때문에, 사용자들의 실제 반응이 최종적인 디자인에 적용되는 것도 아닙니다. 와이어프레임은 2020년 현재의 사용자들이 디지털 어플리케이션에서 원하는 것들과는 너무나도 멀리 떨어져 있는 것입니다. 와이어프레임을 이용한 테스트에서 사용자들은 가독성(readability)이나 색상, 인체공학적인 디자인과 같은 것을 경험하지 못하기 때문에, 그 제품의 최종적인 결과물과는 한참이나 멀리 떨어진 모습만 살펴보고 가는 것입니다.
저희가 테스트를 하면서 가장 중요하게 생각하는 것은 몰입(immersion)입니다. 실제로도 사용하는 환경에 최대한 가까이 다가가려고 노력합니다. 모든 것이 잘 갖춰진 상황이라면, 사용자들의 반응, 몸짓, 상호작용, 생각 등을 조용히 관찰할 수 있습니다. 완성도가 높은 와이어프레임으로는 이런 걸 할 수 없습니다. 경험에 비추어 볼 때, 이미 브랜드를 구체적으로 표현하고 있고 모든 기능들이 포함되어 있는 완전한 형태의 프로토타입은 필요하지 않았습니다. 간단히 클릭을 할 수 있을 정도만 되어도 충분합니다. 중요한 것은 적절한 기기에서 제품 테스트가 이루어져야 하고, 실제 콘텐츠를 사용해야 하며, 대상 고객층이 일상에서 사용하는 대부분의 제품들과 시각적으로 비슷해야 한다는 것입니다. 실제 제품과 비슷한 상호작용의 경험을 좀 더 빨리 만들어낼수록, 더욱 빠르게 신뢰할 수 있는 결과를 얻을 수 있습니다. 와이어프레임은 우리에게 필요한 그런 답변을 얻기에는 충분하지 않습니다.
주장 3: 와이어프레임은 개발 프로세스를 빠르게 만든다
와이어프레임은 제품에 대한 아이디어를 종이에 빠르게 그려내는 용도로 자주 사용됩니다. 따라서 이러한 주장은 시각적인 요소나 기능적인 특성들을 구현하지 않고도 디자인 요소들을 배치해서 살펴볼 수 있기 때문에 시간을 크게 절약할 수 있다는 것입니다!
와이어프레임이 시간을 절약해준다는 주장은 충분히 근거가 있는 것입니다. 적어도 20년 전이었다면 말입니다. 2000년대로 접어들 때만 하더라도, 전 세계의 디자이너들은 어도비(Adobe)의 포토샵(Photoshop)을 사용해서 디지털 레이아웃을 만들었습니다. 디자인 하나를 만들기 위해서는 많은 시간이 걸렸습니다. 그러다 2010년이 되면서 스케치(Sketch)가 크게 인기를 얻었고, 이후에는 디지털 제품 개발 과정에서 중요한 레이아웃 도구로 자리를 잡게 되었습니다. 현재 저희는 스케치를 포함해서 피그마(Figma), 어도비 엑스디(Adobe XD), 인비전 스튜디오(Invision Studio) 등 다양한 도구를 사용하고 있습니다. 한편, 구글의 매터리얼 디자인(Material Design) 같은 컴포넌트 라이브러리들이 이런 앱들과 직접 연동되기 시작했습니다. 언스플래시(Unsplash)나 아이콘 라이브러리, 그리고 다양한 일러스트레이션 도구를 이용하면, 필요한 콘텐츠를 빠르게 만들어낼 수 있습니다.
만약 주머니에서 스톱워치를 꺼내서 시간을 측정한다면, 여전히 와이어프레임이 속도 경쟁에서는 승리를 거둘 수도 있습니다. 하지만 우리는 이런 결과물이 과연 얼마나 적절하며 지속 가능한 것인지를 스스로에게 물어볼 필요가 있습니다. 우리 디자이너가 해야 할 일은 사용자에게 가치 있는 경험을 디자인 하는 것입니다. 물론 이런 작업을 더 빨리 할 수 있다면 좋은 일입니다. 그래서 우리가 디자인 프로토타입을 만드는 데 언제나 많은 시간을 투자하는 것입니다. 하지만 그렇다고 해서 저희는 굳이 “와이어프레임”이라는 걸 만드는 데 시간을 허비하지는 않습니다. 디지털 제품을 만드는 과정은 단거리 경주가 아니라 마라톤입니다.
주장 4: 와이어프레임은 선호도에 대한 논의를 피할 수 있게 해준다
사용자나 고객들에게 프로토타입을 보여주면, 그 디자인 때문에 주의가 산만해질 수 있다는 우려가 있습니다. 만약에 우리가 프로토타입을 전부 노란색으로만 만들었다면, 고객들이 노란색을 싫어할 겁니다. 하지만 와이어프레임은 구체적인 디자인이 아니라 추상적이기 때문에, 최종적인 제품으로부터 충분히 거리를 유지할 수 있고, 따라서 기본적인 아이디어들을 가능한 솔직하게 논의할 수 있게 해줍니다. 그러면서도 와이어프레임은 충분히 구체적이기 때문에, 정보구조, 사용자 경험(UX), 기술적인 요구사항 등에 대해서도 구성원들이 함께 의사결정을 내릴 수 있게 해준다는 겁니다. 그렇죠?
안타깝게도, 이러한 거리감은 오히려 문제를 일으킵니다. 와이어프레임에서 우리는 네비게이션 바, 갤러리, 양식 등을 여러 가지의 패턴으로 세분화해서 분류합니다. 이런 패턴들은 단지 특정한 유형의 상호작용을 의미하는 기호에 지나지 않습니다. 하지만 기호는 해석되고 이해가 되어야 합니다. 그러한 해석은 사람들마다 모두 다릅니다. 이런 식으로 디자인에 대한 무의식적이며 의도되지 않은 기대감이 형성됩니다. 그래서 디자인 결과물이 사람들이 기대했던 이미지에서 벗어날수록, 실망감도 더욱 커집니다. 그래서 결국 최종적인 디자인은 대부분 원래의 와이어프레임에서 거의 벗어나지 않는 선에서 만들어지게 됩니다. 사람들이 콘텐츠의 형식과 커뮤니케이션에 대해서 자세히 논의할 수 있게 도와줘야 하는 와이어프레임이, 오히려 하나의 원칙처럼 작용하는 것입니다. 이렇게 와이어프레임은 빠져나갈 곳이 없는 구석으로 우리를 밀어 붙이게 됩니다. 와이어프레임으로 추상화를 한다고 해도 선호도에 대한 논의를 막을 수는 없습니다. 오히려 와이어프레임을 통해서 우리는 디자인의 중요성을 미학적인 측면으로만 축소시키는데, 미학적인 결정은 “나중에 별도로” 내려도 되는 것입니다. 요즘과 같은 환경에서는 기술적인 요구사항이나 정보구조, 사용자 경험에 대한 통찰력을 얻는 것이 중요하며, 그러기 위해서는 미학적인 선호도보다는 기본적인 상호작용 디자인과 시각적인 특성에 대한 논의가 필요합니다. 이제는 전반적인 디지털 경험이 그 어느 때보다 콘센트 자체를 뛰어 넘어서 훨씬 더 많은 것들을 기반으로 한다는 사실을 기억해야 합니다. 콘텐츠가 페이지에 배치되는 모습, 그리고 그러한 콘텐츠가 사용자에게 보여지는 시점과 그 방식이 제품에 있어서 중요한 요소가 되었습니다. 사용자 경험을 훌륭하게 만들기 위해서 우리는 가능한 빠른 시점부터 디자인 프로토타입에 의존하고 있습니다.와이어프레임과 작별을 하고 싶으신가요?
그러기 위해서는 다음과 같은 사항을 알아야 합니다. 저희는 인간과 기계의 상호작용을 맨 처음부터 창의적인 토론을 통해서 디자인하는 것이 훨씬 더 낫다는 것을 발견했습니다. 경험에 비추어 볼 때, 이렇게 하면 훌륭한 제품을 만들 수 있습니다. 하지만 이러한 사고방식을 채택할 때 명심해야 하는 두 가지의 사항이 있습니다.1. 프로세스
첫 번째 고려사항은 프로세스입니다. 여러분도 아시다시피, 디지털 제품에는 정해진 완료 날짜가 없습니다. 디자인에서도 마찬가지입니다. 계속해서 제품을 출시하면서, 제품 개발 팀에서는 사용자의 경험을 최적화하고 시장의 반응에 최대한 화답하기 위해서 노력하고 있습니다. 디자인은 그런 과정의 일부이고, 디자인은 그러한 프로세스로부터 떼어놓을 수도 없습니다. 디자인의 첫 번째 시안은 최종 디자인이 아닙니다. 그리고 디자인이 비로소 빛을 보기 전까지는, 얼마든지 몇 번이고 바뀔 수 있습니다. 물론 우리는 완벽한 디자인을 위해서 노력하지만, 완벽한 디자인은 불가능한 것입니다. 그래서 개발 단계의 시작점이 디자인인 것이며, 그 이후에도 결코 멈추지 않는 것입니다.
2. 역량
두 번째 고려사항은 제품 디자이너의 역량입니다. 와이어프레임을 벗어 던지려면 광범위한 전문지식이 필요합니다. 사용자 경험 디자이너, 인터페이스 디자이너, 서비스 디자이너와 같은 직함들은 모두 서로 다른 맥락에 초점을 맞추고 있습니다. 이런 역할들 중에서는 지나치게 전문화되어 있어서 전통적인 디자인 교육만으로는 부족한 경우가 있습니다. 하지만 그러면서도 구조, 상호작용, 시각적인 모습 등을 모두 한꺼번에 고려하기 위해서는 디자인은 물론이고 관련 도구들에 대해서도 광범위한 지식이 필요합니다. 이렇게 해야만 새로운 솔루션을 위한 시야를 확장할 수 있습니다. 저희는 전문화된 제너럴리스트(generalist)를 선호합니다. 이런 사람들은 처음부터 좀 더 큰 그림을 볼 수 있고, 고성능 제품을 디자인 하는 데 필요한 다양한 도구들도 활용할 수 있습니다.
와이어프레임의 세계에서 벗어나기 위해서는 사고방식의 전환이 필요합니다. 저희는 4년 동안 와이어프레임을 사용하지 않았지만, 그러한 결정이 디자인 한 제품에 오직 긍정적인 영향만 주었다고 말하고 싶습니다. 와이어프레임 없이 작업한다는 것은, 우리 팀이 전략을 적절하게 찾아내고, 사용자의 귀중한 피드백을 빨리 얻어내며, 궁극적으로는 디지털 경험의 전반을 위한 디자인을 할 수 있다는 것을 의미합니다.
