Syntasia

Portfolio

Syntasia
소셜게임인 Baseball Heroes를 최근 오픈한 신생 게임회사인 Syntasia는 새로운 느낌으로 회사를 소개할 수 있는 사이트가 필요했습니다.

사이트 · 기획 방향

최신의 기법을 활용한 페이지 슬라이딩과 연출
자료를 받아보니 사이트의 내용이 많지 않고 아직은 Syntasia가 어떤 회사인지 모르니 콘셉트 위주로 어필 할 수 있는 방향이 좋으리라 여겨 최신기법의 비주얼 위주의 심플한 사이트들을 몇 가지 방향으로 구분하여 제시하였습니다.

메타프레소 입장에서도 워드프레스로 최신의 기술을 활용한 재미있는 테마를 만들어 볼 기회이고, Syntasia에서도 새롭게 해보자는 저희의 제안을 흔쾌히 받아들여서 하나의 페이지 내에서 슬라이딩 네비게이션 되는 HTML5기법을 활용하여 애니메이션 효과를 시도해 보기로 하였습니다.

게임과 회사소개, 포스트 개시가 필요한 뉴스나 구인공지는 별도의 메뉴로 두어 총 4개의 메뉴로 구성되었습니다. 막상 시작해보니 각각 다른 콘셉트를 보여주기 위해 디자인 시안이 3개가 되어 디자인 공수도, 연출을 위한 노력도 예상보다 많이 소요되는 사이트였습니다.

사이트에 직접 방문하셔서 슬라이딩 효과를 살펴보세요.
http://www.syntasia.com

디자인 방향

보라색 판타지 공간 Syntasia
Syntasia의 뜻은 무엇일까? 어떤 콘셉트를 담고 있을까? 판타지아의 합성어이며 여러가지 판타지 중에 이상한 나라의 앨리스 같은 판타지이며 화려하게 보여줬으면 좋겠다. 라는 어려운 과제를 받아들고 머릿속에 상상의 그림을 그려 보았습니다. 신비한 보라색(씬타지아의 로고칼라) 공간에 각각의 메뉴로 슬라이드 이동하면서 해당 메뉴에 매치되는 객체들이 마치 마법사가 마술봉을 휘두르듯 반짝거리면서 나오게 하면 어떨까 하는 생각에 관련자료를 찾기 시작했습니다. 그러기 위해서는 플래시를 쓰지 않으면서도 유연한 에니메이션이 필수적이었고 자연스러운 연출효과를 위해서 수정에 수정을 거듭해 다듬어나갔습니다. 그렇게 탄생한 보라색 판타지 공간, 반짝반짝 Syntasia의 사이트입니다.

야구 게임인 Baseball Heroes의 경우 첫 메뉴인 트레일러에만 힘을주고 게임의 비주얼을 활용하여 깨끗한 공간감을 표현하고 주인공과 캐릭터들이 각 메뉴별로 출현하여 하나의 이야기로 이어지도록 연출하였습니다.

개발 방향

WordPress 최신버전(3.3.1)이 적용된 사이트이며 jQuery를 이용한 Parallax효과와 애니메이션 요소를 매끄럽게 접목하기 위한 퍼블리싱팀과 개발팀의 많은 노력이 들어간 산물입니다.
각각의 섹션간 구분없이 이어지는 디자인 콘셉트 안에서 Parallax효과를 자연스럽게 구현하기 위한 많은 수학적 계산과 퍼블리싱 레이아웃이 반영되었으며, UI상의 빠른 응답을 위한 마크업의 미니멀리즘을 위해 노력하였습니다.

주요 기능

1) 소셜 미디어 연계 : 페이스북, 트위터, 구글플러스원의 Share Count를 커스텀 디자인에 맞게 가져오도록 구현하였으며 페이스북 페이지상의 최신데이터를 가져오도록 API를 통해 연동하였습니다.
2) Vimeo 연동 : Vimeo에서 서비스 되고 있는 트레일러 동영상을 실행하도록 구현하였습니다.
3) Google Maps : 회사 위치를 정확하게 표시할 수 있도록 구글맵 API를 이용하였으며 손쉽게 주소를 변경할 수 있도록 지오코딩 기능을 포함하였습니다.