프로토타입과 함께하는 서비스 개발
타일이라는 자동디자인 툴을 만드는데에 있어서 가장 중요한 점은 자동으로 뽑아 낼 수 있는 디자인의 퀄리티와 이러한 사용자 경험이 과연 (돈 낼 만큼)가치가 있느냐였다. 그래서 최초의 와이어프레임이 구상되자마자 실제로 손으로 만져보기 위해서 프로토타입부터 시작하였다.
타일 서비스를 위해서 총 5개의 프로토타입을 만들었으며 정확히 말하면 현재의 타일(16년 11월)은 6번째 프로토타입이라 할 수 있다. 우리들은 항상 (성질이 급해서)동작하는 코드를 먼저 만들어내고 나중에 문서화를 한다. 문서화하기 전에 다치면 큰일남..!
프로토타입 1
먼저 타일의 큰 그림을 공유하기 위해서 방향을 설정할 수 있는 최초의 프로토타입이 필요하였다. 체계 없이 그냥 생각나는대로 만들었고, jQuery 떡칠을 통해서 일단 동작하는데에 주안점을 두었다. 각 디자인 요소들을 어떻게 결합할지에 대해서는 크게 생각하지 않았은 상태이다.
대충 디자인을 구성하는 요소를 단순하게 이미지, 박스, 텍스트로만 넣고 이것들을 무작정 조합을 해보았다. 여기에서 최초에 박스와 텍스트의 관계, 배경으로써의 이미지에 대해서 알아보았고, 점/선/면/여백을 통해서 구성할 수 있는 케이스에 대해서 연습을 해보았다. 가장 중요한 것은 좌측의 결과물이고 또한 데이터의 직접 조작을 통해 변화를 보아야하기 때문에 데이터 형태가 우측의 패널에 고스란히 노출되어 있다. 자기 할 일은 다 했으니 이 프로토타입은 버려졌다.
프로토타입 2
두번째 프로토타입은 일종의 디자인 조합 실험이었다. 이미지위에 박스가 나타날 때와 이미지와 박스가 나란히 나타날 때의 관계와 경우의 수를 테스트해보기 위함이었다. 박스에 두께, 스타일, 투명도, 크기 등 여러가지 속성을 정의하고 정말로 무작위로 섞은 다음에 나오는 모양에 대해서 테스트를 해보았다. 생각보다 괜찮은 조합들이 나왔고 또 생각보다 별 거 없다는 것도 알았다. 무작정하면 망하겠다 생각이 들었다. 그리고 이 프로토타입은 당연히 바로 버렸다.
프로토타입 3
기존까지 조합의 가능성만을 타진해왔으니 이제는 진정한 사용자 가치를 줄 수 있는지도 테스트하기 위하여 프로토타입을 새로 만들었다. 폰트빨을 세우기 시작하면서 뭔가 각이 잡히기 시작한 프로토타입이다.
탐색(스토리)모드와 편집 모드를 결합하고, 별도의 모드 전환 없이 확대/축소에 따라 자동으로 모드가 전환되는 형태를 시도해보았다. 멀리서 보는 것은 숲을 보는 것이고 가까이서 보는 것은 나무를 보는 느낌이다. 또한 데스크탑 뷰의 특성에 따라 상하가 아닌 좌우의 배치를 시도했다. 일반적인 휠의 용도(스크롤)을 확대/축소로 전환하는 리스크를 넘어서서 효용을 가져야하는데, 사실 카드뉴스는 PPT처럼 수십장을 작업하는게 아니기 때문에 이 인터페이스는 아무래도 애매하다고 판단했다.
또 다른 시도로 결과물에서 바로 각 디자인의 세부 위치를 결정할 수 있는 기능도 넣어 봤는데, 이렇게 되는 경우 사용자가 왼쪽으로 요소를 밀었어도 디자인 최적화 알고리즘상 위치하기 힘든 경우에 굉장히 어정쩡한 반응이 나오는 경우가 생겼다. 사용자의 통제권을 완전히 Bottom-up 방식으로 적용하기는 힘들다고 판단되어 이것도 과감히 없앴다. 결과적으로 현재까지의 타일은 컨텐츠와 약간의 의도를 기반으로 자동생성하는 Top-Down 방식의 사용자 흐름을 고수하고 있다. 그리고 꽤 아쉽지만 그냥 통째로 버렸다.
프로토타입 4
탐색과 편집모드를 별도로 구분하지 않고, 대신 실제 결과물에 가까운 사이즈로 맞추면서(사용자가 편집이 쉽도록 크게 키우면 모바일 가독성을 무의식중에 놓칠까봐), 변환할 수 있는 요소들을 패널로 묶어서 분류를 해보았다. 카드뉴스 위에 Theme / Layout / Shuffle 등 이때까지 기능들이 제대로 분류되지 않은 상태로 ‘작동'을 위주로 계속 테스트를 진행하였다. 그리고 버렸다.
프로토타입 5
상용버전을 생각하고 사용성을 증진시키기 위하여 사용자 흐름을 명확하기하고 GUI를 가다듬고 있는 과정이다. 실제로 제작 자체에는 큰 문제가 없었으나 다수의 슬라이드를 하나의 톤앤매너로 묶을 수 있는 일종의 ‘테마'를 각 슬라이드에 종속시킨 구조 때문에 계속 찜찜한 상태로 남아있었다. 또한 자동디자인이라는 것이 무색하게 우측 패널의 존재감이 상당했으며 정확히 화면을 양분하고 있는 상황이라 패널이 우선인지 슬라이드가 우선인지 구분이 불명확했으며 상호 연결성도 애매한 상태였다.
사실 이맘때에는 일단 제작자체가 가능한 상황이어서 사용성 문제는 조금 더 뒤로 미루고, 생성되는 디자인 알고리즘을 고도화하는 단계였다. 외부에서 도와주는 디자이너들의 피드백을 적극적으로 수용하여 ‘디자인 버그'가 발생하지 않도록 발전시켰다.
프로토타입 6
정보구조를 명확히하고 사용자의 혼란을 막기 위하여, 불필요한 시각적 잡음은 모두 없애거나 하위로 숨겼다. 자동디자인이 100% 만족을 줄 수는 없지만 장기적으로 계속 보강할 예정이기 때문에 먼저 사용자 경험을 우리의 의도대로 고정시킬 필요가 있었다. 테마(전체적인 공통 스타일) > 각 슬라이드 편집 > 각 슬라이드의 수동 편집의 정보구조를 확정하였다.
이제 남은 작업으로는 지속적으로 디자인 패턴의 다양화/고도화와 사용자의 사용 내역을 바탕으로한 의도접목, 우측 속성창에서의 사용자화를 더욱 디테일하게 넣는 작업들을 남겨놓은 상태이다.
