프로토타입과 함께하는 서비스 개발

(주)투블루에서 발행한 프로토타입과 함께하는 서비스 개발

타일이라는 자동디자인 툴을 만드는데에 있어서 가장 중요한 점은 자동으로 뽑아 낼 수 있는 디자인의 퀄리티와 이러한 사용자 경험이 과연 (돈 낼 만큼)가치가 있느냐였다. 그래서 최초의 와이어프레임이 구상되자마자 실제로 손으로 만져보기 위해서 프로토타입부터 시작하였다.

타일 서비스를 위해서 총 5개의 프로토타입을 만들었으며 정확히 말하면 현재의 타일(16년 11월)은 6번째 프로토타입이라 할 수 있다. 우리들은 항상 (성질이 급해서)동작하는 코드를 먼저 만들어내고 나중에 문서화를 한다. 문서화하기 전에 다치면 큰일남..!

최초의 프로토타입, 좌측엔 결과물, 우측엔 데이터 조작을 위한 창이 있다.

먼저 타일의 큰 그림을 공유하기 위해서 방향을 설정할 수 있는 최초의 프로토타입이 필요하였다. 체계 없이 그냥 생각나는대로 만들었고, jQuery 떡칠을 통해서 일단 동작하는데에 주안점을 두었다. 각 디자인 요소들을 어떻게 결합할지에 대해서는 크게 생각하지 않았은 상태이다.

대충 디자인을 구성하는 요소를 단순하게 이미지, 박스, 텍스트로만 넣고 이것들을 무작정 조합을 해보았다. 여기에서 최초에 박스와 텍스트의 관계, 배경으로써의 이미지에 대해서 알아보았고, 점/선/면/여백을 통해서 구성할 수 있는 케이스에 대해서 연습을 해보았다. 가장 중요한 것은 좌측의 결과물이고 또한 데이터의 직접 조작을 통해 변화를 보아야하기 때문에 데이터 형태가 우측의 패널에 고스란히 노출되어 있다. 자기 할 일은 다 했으니 이 프로토타입은 버려졌다.

두번째 프로토타입, 완전한 랜덤을 통해서 어떤 모양들이 나오는지 테스트했다.

두번째 프로토타입은 일종의 디자인 조합 실험이었다. 이미지위에 박스가 나타날 때와 이미지와 박스가 나란히 나타날 때의 관계와 경우의 수를 테스트해보기 위함이었다. 박스에 두께, 스타일, 투명도, 크기 등 여러가지 속성을 정의하고 정말로 무작위로 섞은 다음에 나오는 모양에 대해서 테스트를 해보았다. 생각보다 괜찮은 조합들이 나왔고 또 생각보다 별 거 없다는 것도 알았다. 무작정하면 망하겠다 생각이 들었다. 그리고 이 프로토타입은 당연히 바로 버렸다.

세번째 프로토타입으로, 데스크탑에 최적화된 UI 에 대한 테스트도 포함하였다.

...

더 읽어보러 가기

직군 정보


기업 문화 정보


기술 스택 정보

더 많은 내용은 더팀스에서 확인하세요!