실시간 대응을 위한 환골탈태 프로젝트, 노랑풍선

상세페이지

  • HOME > 프로젝트 & 프로모션

실시간 대응을 위한 환골탈태 프로젝트, 노랑풍선

yellow  balloon


불과 10년 전만 해도 해외여행은 부유층을 위한 혜택이었지만 시대가 변했다.
국제 유가는 계속 떨어졌으며, 저가 항공사들의 등장은 항공업계의 가격 경쟁에 불을 지폈다. 그만큼 해외여행이 잦아진 것.
수요가 늘어나며 고객의 욕구는 점차 다양해지기 시작했다.
여행사가 즉각적으로 대응하지 않으면 자신에게 더 잘 맞는 여행사로 고객이 떠나는 데는 몇 분 걸리지 않는다.
이런 시장 변화에 노랑풍선은 헌 옷을 깔끔하게 던져버렸다.  글. 유종범 기자 jayu@websmedia.co.kr


프로젝트명  노랑풍선 
               통합정보시스템 구축

부문          웹사이트·모바일

클라이언트  노랑풍선

URL           www.ybtour.co.kr

제작사       애비로드
               앤썸앤컴퍼니 
               소프트노믹스

오픈일       2016년 2월 22일





혁신은 안에서부터 플로피 디스크와 CD-ROM의 시대였던 2000년대부터 알파고가 세계 최고의 바둑 기사 이세돌을 3선승으로 이긴 최근까지.
15년의 세월 동안 노랑풍선은 여행 업계에서 꾸준한 성장을 보였지만, 낙후된 내부 시스템과 웹사이트는 여전히 과거에 머물러 있었다. 시스템의 노후화는 빠르게 바뀌는 여행 산업의 트렌드에 독이 될 수밖에 없었다. 1년에 한 번 해외여행을 가는 것이 더 이상 불가능한 일이 아니고, 어느새 해외여행은 선택이 아닌 당연한 것처럼 인식이 변했다. 고객들은 자신의 취향과 상황에 최대한 맞는 여행상품을 요구하기 시작했다. 과거의 시스템은 그런 고객들의 니즈를 즉각적으로 반영할 수 없는 시스템. 업계 선두 경쟁에 뛰어들기 위해선 이런 내부 시스템을 현재에 맞는 시스템으로 교체가 필요했다. 노랑풍선은 희망 지역, 일정, 시기, 성별 등 여행 세부 정보와 ‘꽃보다 청춘’같은 고객들의 여행심을 자극하는 관련 미디어 프로그램의 추세, 그리고 노랑풍선의 리소스, 이 세 가지의 데이터를 빠르게 분석해 고객 취향에 맞는 상품을 제작·판매할 수 있는 자체 통합정보시스템 ‘코러스’를 구축했다.    실시간 대응이 경쟁력 기존 여행사들은 자체 통합정보시스템을 갖추기보다는 솔루션을 구매해 사용하는 것이 대부분이다. 그러므로 업무 체계, 처리, 통계 등 모든 업무적 특성을 솔루션에 맞출 수밖에 없다. 솔루션 자체의 기능이 좋더라도 업무 처리 방식이 조직마다 다르고, 상품 정보 생산과 관리도 조직에 최적화하기 힘들다. 노랑풍선도 마찬가지였다. 여행상품 정보를 생산 및 관리하는 솔루션과 상품을 판매하는 채널인 웹사이트가 유기적이지 않다. 실시간으로 새로운 여행 상품 정보를 올리고 판매 정보를 받아와야 하는데, 그 과정 사이에 격차가 생기는 것이다. 이 문제를 해결하기 위해 기획자, 디자이너, 퍼블리셔, 개발자가 그 상황에 매번 개입하고 추가 인력을 운용해 시스템 사이의 격차를 메꾸는 과정이 계속 반복되는 것이 여행업계 시스템의 현재다. 노랑풍선은 굳어진 시스템 문제를 새로운 통합정보시스템과 웹사이트를 구축해 해결하고자 했다. 가장 중점을 둔 부분은 실시간 연동. 사용자들이 정확하고 빠르게 상품 정보를 받고 예약하기까지의 정보 처리를 실시간으로 구축했다. 기존의 여행사 운영 현황을 고려할 때, 이런 개선은 사실상 파격에 가까웠다. 노랑풍선의 부서 간 커뮤니케이션, 스케줄링, 업무 처리, 컨펌 반려 횟수, 홈페이지와 모바일에 최종적으로 노출되기까지의 소요 시간 등 업무가 최종적으로 마무리되는 시점까지의 체계를 기술적으로 단축했다는 것을 의미한다.    운영자 중심 설계 노랑풍선의 UI·UX는 운영자 중심 설계가 진짜 사용자 중심이 될 수 있다는 사상에서 접근했다. 여행업의 특성상 사용자와 운영자 간 정보 중요도의 차이가 다른 서비스에 비해 더 크다. 각 여행 상품에 주어지는 고유 상품번호가 대표적이다. 영어와 숫자의 조합으로 된 상품번호는 사실 사용자에겐 중요하지 않은 정보일 수 있다. 언제, 어디로, 얼마의 비용으로 여행을 가는지만 중요할 뿐이다. 만약 사용자 관점에서 UI·UX 설계를 한다면 실질적인 여행 정보가 아닌 상품번호는 화면에서 숨기거나 안 보이는 곳에 집어넣는 것이 맞다. 그러나 운영자 입장에선 그 어떤 정보보다 상품번호가 중요하다. 고객의 전화상담을 받았을 때, 비슷한 여행 상품들을 일일이 날짜와 목적지, 시간을 맞춰가며 상담하기엔 시간이 너무 오래 걸린다. 이때, 웹사이트 메인 화면에 바로 보이는 상품번호를 불러달라고 하면, 금방 고객이 원하는 상품을 찾아 상담해줄 수 있다. 또한, 여행사가 웹사이트를 통해 고객에게 보여줘야 할 정보는 다른 서비스에 비해 몇 배는 많다. 패럴랙스 스크롤링을 디자인 베이스로 설정한 것도 그 이유. 너무 많은 정보에 사용자들이 혼란을 겪지 않도록 고객이 꼭 알아야 할 필수 정보만 보여주는 ‘여행상품핵심정보’ 버튼을 상품 정보 최상단에 배치했다. 운영자 중심 UI·UX 설계로 고객의 서비스 만족도와 업무 효율을 다 같이 높이는 것을 핵심에 둔 것이다.



interview



강종원 애비로드 대표이사 2015년은 노랑풍선 없이 설명할 수 없는 한 해였습니다. 1년 동안 진행한 만큼 애착도 정말 컸던 프로젝트였습니다.
묵묵히 프로젝트를 지원해준 노랑풍선과 웹사이트에 필요한 여행 이미지를 위해 직접 촬영하러 타지로 떠나고, 밤새워 디자인을 고민해준 애비로드 식구들에게 가장 먼저 고맙다는 인사를 전합니다. 이번 프로젝트는 디자인을 담당한 애비로드, 개발을 맡아 함께 프로젝트를 진행한 앤썸앤컴퍼니 그리고 퍼블리싱을 담당한 소프트노믹스까지 세 개의 회사가 참여했는데요, 마치 한 공간에서 작업하는 것처럼 커뮤니케이션이 빠르게 진행된 것이 프로젝트를 성공적으로 완수한 가장 큰 이유라 생각합니다.
프로젝트를 참여한 모든 분에게 이 지면을 빌어 감사 인사를 드립니다.   ui&ux



여행사에 걸맞은 사용성 노랑풍선의 UI·UX 디자인 개편을 한마디로 축약하면 ‘사용성’이다. 사용자의 편리성을 위해 메인 화면은 패럴랙스 스크롤링 형식으로 디자인했으며, 전체적은 시각 콘텐츠도 눈에 확 뜨이는 와이드 사이즈로 가져갔다. 개편 이전엔 작은 이미지에 텍스트가 많은 형식으로 콘텐츠를 배열했다면, 지금은 사용자들이 ‘여행을 가고 싶도록’ 여행지의 전경을 담은 이미지 비중을 크게 키웠다. 메뉴의 구성도 사용자들이 가장 많이 찾는 ‘긴급모객’을 메인 배너 아래에 배치했으며, 스크롤이 긴 화면 특성을 고려해 글로벌 내비게이션 바(GNB)는 스크롤이 내려가도 화면 상단에 고정되게끔 구축했다.   layout



커스터마이징이 가능한 레이아웃 사용자에게 상품·지역별 정보를 가장 효과적으로 전달하기 위해 노랑풍선의 인터페이스나 레이아웃을 시스템에서 클릭 한 번으로 변경할 수 있도록 구현했다. 메뉴·상품진열·상품상세정보의 기본 템플릿을 2종, 2종, 6종을 만들어 다양한 레이아웃을 구축할 수 있는 점이 포인트. 이 템플릿들은 데이터 입력 방식과 간단한 옵션 설정으로 커스터마이징 할 수 있지만, 일관성 유지를 위해 변형된 모양에도 베이스 템플릿을 벗어나지 않도록 규칙을 적용했다. 노랑풍선은 레이아웃의 자유도를 통해 사용자의 정보 접근성 최적화를 빠르게 할 수 있도록 구현했다.   contents



당신을 위한 여행 가이드, Yellow trip 상품 구매 목적뿐만 아니라 여행 정보를 얻기 위해서 노랑풍선을 방문하도록, 기존에 오프라인에서만 발행하던 여행 매거진 ‘옐로 트립’을 온라인 콘텐츠로 구축했다. 옐로 트립은 최신 여행 정보를 즉시 제공함으로써, 기존의 여행 가이드 책을 대신하고 노랑풍선의 고객 유입률을 끌어올리는 킬러 콘텐츠. 주요 여행지의 정보와 고객들의 여행 후기뿐만 아니라, 주간 날씨 정보, 환율 정보 등 여행에 필요한 정보 대부분을 제공한다. 도시별 여행 정보 옆에는 해당 여행지 관련 상품을 배치해 즉각적인 구매전환이 일어날 수 있게 구성했다.   color



그릇은 담백하게, 콘텐츠는 화려하게  보통의 여행사 웹사이트는 다양한 색상을 조합해 최대한 화려한 모습으로 고객들에게 보여지길 원한다. 노랑풍선은 그걸 싹 걷어냈다. CI(Color Identity)인 노랑색과 하늘색 중에서도 노랑색만 사용해 웹사이트를 담백하게 표현했다. 그 외에 포인트가 필요한 텍스트는 빨강색을 사용한 것이 전부. 콘텐츠를 담는 ‘그릇’인 웹사이트가 화려하면, 정작 콘텐츠에 집중할 수 없다는 것이 그 이유였다. 대신 콘텐츠 이미지는 직접 현지에 가서 사진을 찍어 최고의 퀄리티로 만들었다.

tags 디아이투데이 , ditoday , 월간 DI , 디아이 , DI 매거진 , 디아이 매거진 , 유종범 기자 , 노랑풍선 , 애비로드 , 앤썸앤컴퍼니 , 소프트노믹스 , 통합정보시스템 , 웹사이트 구축 , 개편 , 프럴랙스 스크롤링 , 레이아웃

저작권자 © 웹스미디어 무단 전재-재배포 금지

뉴스콘텐츠는 저작권법 제7조 규정된 단서조항을 제외한 저작물로서 저작권법의 보호대상입니다.
본 기사를 개인블로그 및 홈페이지, 카페 등에 게재(링크)를 원하시는 분은
반드시 기사의 출처(로고)를 붙여주시기 바랍니다.
영리를 목적으로 하지 않더라도 출처 없이 본 기사를 재편집해 올린 해당 미디어에 대해서는 합법적인 절차(지적재산권법)에 따라
그 책임을 묻게 되며, 이에 따른 불이익은 책임지지 않습니다.

URL 복사 출력하기 목록보기 스크랩하기

관련기사

최신뉴스
월별 특집 & 기획
엄숙 금지 - 인상 쓰는 사람이 좋은 아이디어 낼 수 있을까?
프로젝트 & 프로모션
고객의 리얼라이프를 위하는 AIA생명
프로젝트 & 프로모션
실시간 대응을 위한 환골탈태 프로젝트, 노랑풍선
프로젝트 & 프로모션
패션지가 미디어 환경 변화에 대처하는 방식, 마리끌레르 코리아
프로젝트 & 프로모션
진입장벽을 허물어버린 앱 서비스, 컬쳐랜드 스토어

정기구독신청