[FLAT VS. REALISM] 즐겁게 뒤돌아보는 디자인 이슈

상세페이지

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

[FLAT VS. REALISM] 즐겁게 뒤돌아보는 디자인 이슈















FLAT VS. REALISM
글. 김형수 프리랜서 디자이너

INTERACTIVE DESIGN www.flatvsrealism.com

2013년, 사실적이고 디테일을 강조하는 ‘스큐어모피즘(Skeuomorphism)’을 지향하던 애플이 가볍고 효율적인 미니멀리즘으로 변화를 추구하면서 아직도 진보와 보수가 나뉘어 열띤 논쟁을 벌이고 있다. 이번에 소개할 사이트는 이를 주제로 지난해 디지털 업계 사람들에게 최대 화두였던 디자인 트렌드를 다룬 ‘FLAT DESIGN VS. REALISM’이다.

사이트의 첫 등장은 장엄한 음악과 함께 화면이 1:1로 나뉘는 것으로 시작한다. 양쪽의 캐릭터를 비교하듯 구성해 한쪽은 평평한 이미지의 단조로운 일러스트 캐릭터를 배치했고, 반대쪽에는 디테일을 강조한 캐릭터가 버티고 있다. 각 캐릭터는 플랫 디자인과 리얼리즘을 상징하는 대표라고 생각하면 된다. 마우스 휠을 움직여 화면을 아래로 내리면 마치 동화책이 펼쳐지듯 패럴랙스 스크롤링(Parallax Scrolling)으로 이야기를 전개한다. 2013년 평평한 ‘플랫(FLAT)’이 등장하면서 세상이 바뀌었고, 디지털 세상을 지배하며 풍요를 누리던 ‘리얼리즘(REALISM)’은 갈 곳을 잃었다. 그러자 리얼리즘이 자신을 따르는 추종자들을 모아 왕좌를 되찾기 위해 싸움을 시작한다는 스토리다.

스크롤 중후반에 들어서면 이 사이트에서 가장 흥미로운 요소인 결투 게임으로 진입한다. ‘SELECT A PLAYER TO FIGHT’ 문구가 깜빡이는 화면에서 플랫과 리얼리즘 캐릭터 중 한쪽을 선택하면 게임을 시작하며, 키보드 조작을 통해 상대방을 제압하는 형식이다. 사이트는 이슈와 재미 요소 외에 기술적인 면에서도 주목할 필요가 있다. 사이트 제작에 사용한 기술로 HTML5, CSS, JavaScript, Node.JS 등이 있으며, 결투 게임 중 일러스트 캐릭터의 모션은 포토샵의 퍼펫 뒤틀기(Puppet Warp)와 애프터이펙트(After Effect)의 3D 카메라 기능들을 이용했다고 한다. HTML 게임 제작을 위해 게임 저작도구 ‘Construct2’를 사용했고, 연속적인 패럴랙스 스크롤링 중간에 결투 게임을 넣기 위해 에이잭스(Ajax) 기술도 활용했다.

또한, 배경 이미지를 품질에 따라 두 개로 나눠 사용자가 스크롤하는 속도에 따라 선택적으로 보이도록 설계했다. 사이트 자체가 2013년 디지털 이슈를 망라하고 있다고 해도 과언이 아니다. 끝으로 플랫과 리얼리즘은 ‘IN 2014, LET’s TELL SOME GREAT STORIES…’라는 말과 함께 새로운 국면에 접어든다.

tags 미니멀리즘 , 패럴랙스 스크롤링 , 플랫 디자인 , 리얼리즘

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

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

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

관련기사

최신뉴스
프로젝트 & 프로모션
[FLAT VS. REALISM] 즐겁게 뒤돌아보는 디자인 이슈
월드리포트
간결하고, 명료한 디자인 플랫 디자인&매터리얼 디자인
월별 특집 & 기획
웹디자인 키워드로 분석한 어워드

정기구독신청