CAT: 3D Cloth Authoring Tool

WHERE I WORK

FXGear

DATE

2015-2017

PARTICIPATION RATE

60%

MY ROLE

GUI

Iconography

Design system

OVERVIEW

CAT은 가상 피팅 솔루션에 쓰이는 3D 의상을 제작하는 컴퓨터 프로그램으로, 스타일 가이드를 포함한 디자인 시스템이 필요한 상황이었습니다.

CAT은 Cloth Authoring Tool의상저작도구의 약자로, 옷의 앞뒤 사진만을 바탕으로 5~10분 내에 3D 의상을 만들 수 있는 컴퓨터 프로그램입니다.  이 프로그램은 사진만을 바탕으로 그 의상이 가지는 룩앤필을 실제같이 재현합니다.

 

CAT을 통해 만들어진 3D 가상 의류들은 FIT N’SHOP (3D 아바타를 활용한 가상 피팅 및 e-commerce 플랫폼) 과 FXMirror (증강현실 가상 피팅 솔루션)에 사용됩니다.

 

제가 처음 디자인 팀에 합류했을 때, 이 프로그램에는 디자인 시스템이 없던 상태였습니다. 게다가 지속적으로 새로운 기능을 더해야 하는 상황이라, 신속히 디자인 시스템을 구축하고 확실한 스타일 가이드를 제공하여 새롭게 더해지는 기능과 화면들이 일관된 그래픽 스타일을 가질 수 있게 해야 하는 상황이었습니다.

WHAT I DID 

저는 디자인 시스템을 구축하고, 시스템을 기반으로 인터페이스를 디자인했습니다. 또한, CAT 만의 고유 기능을 위한 커스텀 아이콘과 커서 라이브러리를 만들었습니다.

저는 확실한 디자인 컨셉이 있는 디자인 시스템을 구축할 것을 제안했고, 일관적인 디자인을 갖추기 위하여 전체 프로덕트 화면의 60%를 직접 디자인했습니다. 또한, 3D 의상 제작에 쓰이는 다양한 커스텀 아이콘과 커서들을 직접 제작했습니다.

DESIGN SYSTEM 

의상 제작 작업에만 집중할 수 있도록 전체 테마를 어둡게 하고, 심플한레이아웃과 톤다운된 액센트 컬러를 사용했습니다.

 이 프로그램의 사용자는 각각 브랜드에서 자신들의 의상들을 3D 버전으로 바꾸어낼 실무진입니다. 저는 이들에게 단순하면서도 효율적인 워크스페이스를 제공해주는 것에 초점을 맞추었습니다. 눈에 띄지만 너무 자극적이지 않은, 살짝 톤다운된 터키색을 액센트 컬러로 사용하여 주요 버튼들을 쉽게 식별할 수 있게 만들었습니다. 

ICONOGRAPHY 

다양한 의류의 디테일을 조절하기 위한 커스텀 아이콘 라이브러리를 제작했습니다.

3D 의상을 실제 의상과 똑같이 제작하려면 의상의 모든 세부 디테일을 조절할 수 있게 해주어야 합니다. 저는 54가지의 의류 세부 카테고리 - 티셔츠부터 후드 달린 오리털 자켓까지 - 를 위한 아이콘을 만들었고, 각각의 디테일을 조절할 수 있도록 2,500여개의 아이콘을 제작했습니다.

SCREENS 

제작할 의류 선택

CAT의 첫 단계는 제작할 의류를 선택하는 것입니다.

CAT은 서버와의 접속 기능을 통하여 3D 가상의류 제작 준비가 완료된 제품 목록을 불러올 수 있습니다.

사진 선택

사진 라이브러리에서 선택한 의류의 사진을 찾아 앞뒷면을 지정합니다.

의류 카테고리 지정

선택한 제품에 적합한 카테고리를 지정합니다.

수정 기준점Feature Point 지정

매인 화면에 깔린 사진과 좌측의 그래픽 가이드를 바탕으로 수정 기준점을 이동/수정합니다.

좌측의 그래픽 가이드는 선정한 카테고리에 따라 자동으로 앞 뒤를 보여줍니다.

결과  확인 및 미세 조정

최종 단계로, 3D 변환 결과를 미리보기와 360도 회전 화면을 통해 확인합니다.
이 단계에서 우측의 막대를 조절하여 각각의 디테일한 부분들을 세부적으로 조정할 수 있습니다.

Thank you for watching :)

© 2020 Yeonkyung Kim