FLTGRAPH

MARKUP
디자인 100% / 퍼블리싱 100%
2013.06 ~ 2017.12

  • 2018년 10월 31일 폐업
  • 2017년 12월 플라이트그래프 퇴사
  • 2017년부터 디자인업무는 진행하지 않음
  • 티켓몬스터가 대주주로 변경됨 : 네이버 관련 뉴스

FLTGRAPH 구축 및 운영작업 전반.

귀국 후 입사하게 된 (주)크루메이트의 본사 부설 연구소에서 항공권(BtoC) 판매를 위해 시작된 사내 프로젝트로서 본 프로젝트에서는 디자인 및 마크업을 담당하였음. 항공이라는 도메인에 대해 이해도를 높일 수 있는 기회였으며 항공권의 판매를 목적으로 하는 프로젝트인 만큼 필요로 하는 정보의 정리에 많은 시간이 소요되었음.

항공권은 장소, 날짜, 시간 등 복잡한 구조로 이루어져 있어 관리가 힘들었으나 그만큼 모듈화, 소스 관리에 대한 공부를 할 수 있어 도움이 많이 되었던 프로젝트임.

본인이 본 프로젝트에 참여하기 전부터 독자적으로 구축한 엔진 개발에 약 4년여라는 시간이 투자된 만큼 다구간 이동을 하면서도 싼 가격으로 항공권의 검색 및 구입이 가능하여 해외여행을 좋아하는 사용자들을 중심으로 인지도가 올라가고 있었으며 기술력을 인정받아 티켓몬스터의 자회사로 재시작하게 되었으나 데이터 구매에 들어가는 막대한 자금 문제와 항공권이 가지고 있는 수익 문제로 인해 아쉽게도 프로젝트가 종료되었음.

로고

로고의 'N'의 형태는 특허를 받은 것으로 시작, 도착, 이동, 체류시간 등을 하나의 그래프에 나타내는 형태임. FLTGRAPH는 Flight Graph를 약자로 표현한 것으로 두 개의 단어를 따로 읽히게끔 색상으로 구분하였으며 항공과 관련되었음을 연상시키기 위하여 비행기 아이콘을 적용시켰음.

로고 제작 과정일부 - link

logo_sketch_01

디자인

초반에 작업된 사이트의 디자인은 국내가 아닌 국외의 해외 여행을 주로 다니며 싼 항공권을 구매하기 위해 시간을 들일 수 있는 사람들로서 여행을 좋아하며 항공권에 대해 준 전문가의 지식을 가지고 있는 사용자를 주요 대상으로 하였음.

항공권에 대한 도메인 지식이 부족한 사용자의 경우 사용상 어려움이 따를 수 있다는 문제는 내부적으로도 인지하고 있었기에 사용자에 따른 UI의 차별적인 제공에 대한 의견도 많았지만 메인 사용자를 준 전문가 수준으로 지정하였기에 가독성을 우선시하였으며 폰트의 크기 역시 퍼스트뷰에서 보이는 항목을 최대한 보여주어야 한다는 운영진의 요구에 따라 최대한 작게 작업되었음.

초기에는 국외를 대상으로 한 글로벌 사이트를 목표로 하였기에 영문을 기준으로 진행되었기에 가독성에 영향이 적은 영문으로도 크게 문제가 없었지만, 국내 판매를 우선으로 한다는 방침에 따라 변경되어 텍스트가 읽힐 수 있는 최소 사이즈를 기준으로 재작업 되었음.

한 번의 조회에 불러들이는 데이터의 무게가 상당히 무겁기 때문에 화면을 구성하는 모든 부분에서 최대한 장식적인 요소를 제거하고자 하였으며 웹폰트의 사용 역시 자제하여 속도적인 면에서 고민을 하였음. 내부 구성원들과의 디자인 회의를 거쳐 업데이트시키면서 작업 진행.

티켓몬스터로 사무실을 이전하면서 디자이너를 채용하여 당시부터는 마크업에만 전념하였음.

말도 많고 탈도 많았던 초기 운영 버전

모바일 버전 제작 과정일부 - link

mockup_05

마크업

항공권은 장소, 날짜, 시간 등 복잡한 구조로 이루어져 있어 관리가 힘들었으나 그만큼 모듈화, 소스 관리에 대한 공부를 할 수 있어 도움이 많이 되었던 프로젝트로 하나의 페이지에 사용되는 블록 요소가 방대해서 재사용을 위한 구성에 주의가 필요했음.

IE11 이상의 브라우저를 대상으로 최대한 최신 브라우저를 기준으로 작업되었으며 마크업에는 주로 Gulp로 환경을 구성하여 SCSS를 사용하였으며 버전업에 따른 의존성 문제를 피하고자 프레임워크의 사용을 배제하였고 Git로 형상관리를 하였음.

휴대용 배터리 디자인

(주)크루메이트의 창립기념일에 사원및 관계사에 선물하기 위하여 만들어진 홍보용 휴대용 배터리의 디자인을 담당 

 

오래된 작업관련 메모(2016)

https://fltgraphdesign.tumblr.com/

 

Fltgraph - personal memo

디자이너 겸 퍼블리셔라면 아마도 나처럼 프로젝트에서 이런 일들을 하고 있을 것이다. 아마도...

fltgraphdesign.tumblr.com