태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.


'inspiration movie'에 해당되는 글 16건

  1. 2015.07.30 [애니메이션] 휴식용 GIF Animation (1) by Sungi Kim
  2. 2014.06.12 [인터랙션] CSS를 이용한 로딩 애니메이션 (7) by Sungi Kim
  3. 2014.04.10 [인터랙션] 페이지의 끝 피드백 by Sungi Kim
  4. 2014.02.04 [인터랙션]인터랙티브 인포그래픽 by Youri Kim
  5. 2013.07.16 [애니메이션]_모션 인포그래픽 (4) by Youri Kim
  6. 2013.06.17 [인터랙션]_재미있는 로딩 애니메이션 (1) by Youri Kim
  7. 2013.05.24 [인터랙션]_Z축 트랜지션 (1) by Youri Kim
  8. 2013.05.09 [애니메이션]_한 텀 쉬고가는 애니메이션_2_SNC by Youri Kim
  9. 2013.04.19 [인터랙션]_인터랙션과 애니메이션 by Youri Kim
  10. 2013.04.05 [애니메이션]_한 텀 쉬고가는 애니메이션 by Youri Kim
2015.07.30 07:04

[애니메이션] 휴식용 GIF Animation

요즘엔 지하철을 타고 퇴근을 하면서 핀터레스트를 보다 시간이 다 갑니다. 퇴근 중의 머리속은 무엇을 고민할 여력은 없고, 프로페셔널해져야 한다는 강박관념은 잠시 내려 놓은 채 멍때리며 엄지손가락만 슥슥 움직입니다. 수많은 컨텐츠 중에서 요즘엔 GIF가 끌리더군요. 계속 파도를 타고타고 깊숙히 돌아다니면 끊임없이 컨텐츠를 볼 수 있기 때문에 저의 자투리시간을 핀터레스트가 잡아먹고 있는 것이죠. 

이번 글에 딱히 메시지는 없습니다. 그저 아래 GIF들을 보시며 휴식을 취해보시면 좋겠습니다.

* 주의 : 모바일에서 데이터 사용 압박


원본 링크 : http://abduzeedo.com/sublime-illustrated-cinemagraphs-rebecca-mock


원본 링크 : http://imgs.abduzeedo.com/files/articles/sublime-illustrated-cinemagraphs-rebecca-mock


원본 링크 : https://www.behance.net/gallery/18159461/Summer-weekend


원본 링크 : https://www.behance.net/gallery/26751035/Sailor-walk-animation


원본 링크 : http://robindavey.co.uk


원본 링크 : http://robindavey.co.uk


원본 링크 : http://www.graphiconart.com/графика/very-cool-animated-gifs/


원본 링크 : http://patrickdoyon.tumblr.com/post/97155051042


원본 링크 : https://dribbble.com/shots/1304081-Drummerboy-gif?list=searches&tag=gif


원본 링크 : https://dribbble.com/shots/1257218-All-Net-Animated-GIF?list=searches&tag=gif

[참고##영감 동영상##]



팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 1
Ad Test...
2014.06.12 02:16

[인터랙션] CSS를 이용한 로딩 애니메이션

이전에 블로그에서 Youri Kim님이 '재미있는 로딩 애니메이션' 포스트를 통해 로딩 애니메이션에 대한 설명과 사례를 소개해주셨죠. 이번 글에서는 웹디자인/개발을 할 때 바로 사용할 수 있는 로딩 애니메이션을 공유하려고 합니다.

아마 웹디자인을 주로 하시는 분들은 더 많이 아실 것 같은데요, 최근 CSSDeck이나 CodePen같은 곳들을 자주 들어가서 구경을 하고 있습니다. 거기에 올라오는 여러 인터랙션 예제들이 재미있거든요. 전문 분야가 아니라 확실히는 모르지만, HTML, CSS, JavaScript등을 사용하는 웹 환경이 성숙해지면서 예전에 Flash, Animation GIF로 처리했던 것들을 이제 CSS, JavaScript를 이용하여 구현하는 것 같습니다. 그러다보니 글자로 된 코드만 공유하면 누구든 간단히 코드를 수정하여 애니메이션을 변형시킬 수 있는 환경이 되었고요. CodePen사이트의 타이틀만 봐도 'Front End Developer Playground & Code Editor in the Browser' 입니다. 그 Playground에서 찾아본 로딩 애니메이션을 공유합니다. 다소 식상할 수도 있지만, 코딩을 통해 구현했고 소스를 응용해 직접 사용할 수 있다는 것이 끌리게 만들었습니다.


*각 사례 상단의 'HTML'과 'CSS/SCSS/Stylus'탭을 클릭하면 소스를 보실 수 있습니다.

See the Pen Loader #1 by Sam Lillicrap (@samueljweb) on CodePen.

출처 : http://codepen.io/samueljweb/pen/LbGxi

See the Pen Simple CSS Loading animation by Dom Sammut (@domsammut) on CodePen.

출처 : http://codepen.io/domsammut/pen/eJbly

See the Pen Simple CSS3 Animation Example by Rex Kirby (@rexkirby) on CodePen.

출처 : http://codepen.io/rexkirby/pen/ftJro

See the Pen Spinny Loader by Tim Holman (@tholman) on CodePen.

출처 : http://codepen.io/tholman/pen/mgsBy

See the Pen CSS Spinning/AJAX Wheel by Jabran Rafique (@jabranr) on CodePen.

출처 : http://codepen.io/jabranr/pen/GLFjv

See the Pen Loaders (WIP) by Tania LD (@TaniaLD) on CodePen.

출처 : http://codepen.io/Zeneraith/pen/bdEmA

See the Pen Such Spinners, Much Loading by Hsu-Cherng (@Zeneraith) on CodePen.

출처 : http://codepen.io/Zeneraith/pen/bdEmA

See the Pen Tiny Single Element Loading Animations by J Howell (@lixquid) on CodePen.

출처 : http://codepen.io/lixquid/pen/ybjmr

See the Pen Twinner Spinner by Katy DeCorah (@katydecorah) on CodePen.

출처 : http://codepen.io/katydecorah/pen/tbjqx

See the Pen Super Simple CSS Spinner by Thomas Mandelid (@mandelid) on CodePen.

출처 : http://codepen.io/mandelid/pen/vwKoe

See the Pen Loading icon 4 by oboro (@obomemo) on CodePen.

출처 : http://codepen.io/obomemo/pen/vtpAl

출처 : http://tobiasahlin.com/spinkit/




마지막으로, 이 사례는 어떠신가요? 애니메이션이 잘 보이지 않을 수 있으니, 출처에 링크된 페이지를 열어서 보시는 것이 좋습니다.

See the Pen SVG animation by Olaf (@olliex) on CodePen.

출처 : http://codepen.io/olliex/pen/moyjI


[참고##영감 동영상##]

팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 7
Ad Test...
2014.04.10 01:01

[인터랙션] 페이지의 끝 피드백

터치스크린을 사용하는 스마트폰에서는 터치 조작과 관련된 많은 화면 인터랙션들이 있죠. OS에서 제공하는 것들도 있지만, 여러 앱들이 각자의 컨셉에 맞는 화면 인터랙션을 제공하기도 합니다. 가끔 쓰다보면 새롭고 재밌어서 괜히 손가락으로 슥슥 문지르며 화면을 보기도 해요.
오늘은 그런 것들 중, 페이지의 끝을 나타내는 방식의 사례를 몇 가지 공유합니다. 더 정확히는, 다들 탄성을 적극적으로 활용한 앱들입니다. 그리고 페이지 끝 피드백의 방식과 연관될만한 앱에 대한 개인적인 의견도 약간 넣었습니다.

예전에 무이님이 '아이폰 스크롤 UI의 고유한 멘탈 모델'에서 관련 내용을 설명한 적이 있으니, 흥미가 있으신 분은 읽어보시면 좋겠습니다. 그리고 넓은 접근에서 UI 애니메이션에 대한 생각을 적었던 'User interface의 애니메이션 & 트랜지션'도 읽어보시면 관심이 더 가실 것 같네요 :)
자, 그럼 시작합니다.


1. Yahoo News Digest

정보제공을 위한 앱에서는 잘 쓰지 않는, 과감한 사선이 돋보이는 레이아웃인데요. 이 앱의 목적은 한정된 양의 기사를 주기적으로 제공하고 그 안에 잘 정제된 풍부한 자료를 펼쳐주는 것입니다. 따라서 글의 대표 이미지가 중요한 역할을 합니다. 그야말로 글의 얼굴인데, 페이지 상단의 많은 부분을 차지하고 사선처리까지 되어 글의 영역까지 침범한 듯 보입니다. '사진도 글과 같은 비중으로 세심히 골랐으니 잘 봐줘' 라고 느껴지는데, 페이지 상단 끝에서 더 잡아당기면 사진이 확대되어 존재감을 더 높여주는 듯 보입니다.


2. Medium
진지한 글쓰기를 표방하는 서비스이죠. 앱이 나오기 전 이미 웹에서도 시원시원하게 이미지를 표시하는 레이아웃을 제공하고, 대표이미지를 부각시키는 디자인이었습니다. 모바일 버전은 Yahoo News Digest와 약간 닮기도 했는데 조금 정적인 느낌이 듭니다. 아마도 '아래 진지한 글 읽기 준비됐어?' 하는 정도의 들어가기 느낌으로 이미지를 하나의 장치로 넣은 느낌입니다. 이미지는 그대로 있고, 그 위에 중첩된 글 제목,부제,글쓴이,읽기 시간 등의 정보만 탄성을 가지고 움직이기 때문에 조금 더 무게감이 느껴집니다.


3. Path
소규모의 닫힌 SNS인 Path입니다. 아기자기한 인터랙션들이 많이 들어있는데요, 타임라인의 상단에는 자신의 타임라인 대표 이미지가 슬쩍 표시됩니다. 그리고 최상단에서 더 아래로 끌어내리면 대표이미지의 가려진 부분들이 더 보이죠. Yahoo News Digest와는 또 다른 느낌입니다. 앞의 것이 이미지 확대에 대한 탄성 효과를 주로 보여주려고 했다면, 이것은 가려진 부분을 슬쩍 보여주는 것과 이미지를 이동시키는 것에 대한 탄성을 주었죠. 매번 보게되는 이미지를 너무 거슬리지 않게, 또 심심하지 않게 보여주는 적절한 인터랙션입니다. 가끔 손가락으로 끄집어 내려서, '원래 사진이 어떤 모습이었지?' 하고 보기도 합니다.


4. Evernote
에버노트의 첫화면은 언제나 익숙해지기 힘든 느낌입니다 ^^ 여러 방식의 노트 작성 메뉴, 바로가기, 최근노트, 노트북, 태그 등 많은 것들을 빠르게 접근해주게 해야한다는 압박감이 느껴지기도 하는데요. 이 화면에서 페이지의 끝을 더 내리면, 각 요소들이 서로 멀어지며 공간이 늘어나는 탄성효과를 볼 수 있습니다. 마치 고무줄로된 팔찌를 늘리면 고무줄에 달려있는 장식들이 멀어지는 것처럼요. 이런 효과가 화면의 많은 요소들을 분리해서 인식할 수 있도록 어느정도 도와줍니다. 다닥다닥 붙어있던 요소들이 멀어지며 '이만큼은 노트, 저만큼은 노트북이야' 라고 말하는 것처럼요.


5. Passbook
이 앱은 딱히 설명하지 않더라도, 실제의 카드와 카드를 다루는 방식과 거의 유사하다는 것을 느낄 수 있습니다. (아, 이건 건전한 놀이를 할 때 느껴지는 것인가요 ^^;) 어쨌든 여러 카드가 겹쳐져 있을 때 카드를 인식하기 쉽게 도와준다는 측면이 있겠지만, 그것보다는 현실에 가까운 느낌을 주기 위해 사용한 인터랙션이 아닐까 싶습니다.


6. Safari
확실히 내가 보던 웹사이트들, 여러 탭들 사이를 탐색할 때라면 사이트 제목보다 그 화면을 보여주는 것이 효과적입니다. 마지막 기억과 함께 인식을 도와주는 용도로 가장 효과적이겠죠. 하지만 그렇게 하려면 표시 공간에 대한 트레이드오프가 생길 수 밖에 없는데요, Safari는 현실세계의 서류함을 메타포로 하여 적절하게 풀어냈습니다. 서류함에서 서류를 찾을 때도 하나하나 꼼꼼히 보지 않고 서류함 안의 서류들을 앞으로 슥슥 넘겨가며 찾듯, 대략적인 전체이미지로 파악할 수 있도록 했습니다. 그리고 페이지의 끝에 다다르면 입체감을 통해 그 메타포를 적극적으로 표현해서 리스트 방식을 이해할 수 있도록 도와줍니다.


앱의 주제,형식과 해당 앱의 인터랙션의 연관성은 저의 생각이니 다른 의견이 있다면 알려주세요 :)
[참고##영감 동영상##]

팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 0
Ad Test...
2014.02.04 00:25

[인터랙션]인터랙티브 인포그래픽

지난 번 공유된 [모션 인포그래픽]에 이어 오늘은 인터랙티브 인포그래픽을 공유하려 합니다.


인포그래픽(Infographic)이란?


Information + Graphic

인포그래픽(혹은 인포메이션 그래픽) 이란 Information과 Graphic의 합성어로 많고 복잡한 정보(Text, Data, Statistics)를 수집, 분석, 가공하여 스토리텔링과 디자인을 통해 정보를 전달하는 시각적 표현입니다.
(인포그래픽코리아)

-그래픽 인포그래픽 : 정지된 이미지로 정보를 제공하는 인포그래픽
-모션 인포그래픽 : 정보를 영상화 하여 제공하는 인포그래픽
-인터랙티브 인포그래픽 : 인터랙션을 이용하여 정보를 제공하는 인포그래픽

지난 번 공유 된 모션 인포그래픽의 장점은 정보의 스토리화, 다양한 강조점 사용, 사운드 효과 등이 있었는데요. 인터랙티브 인포그래픽은 모션 인포그래픽의 장점을 포함하면서 동시에 수용자의 정보 수용을 능동적으로 이끌어 낼 수 있다는 점이 큰 특징입니다. 모션효과를 통해 흥미를 유발하여 수용자의 참여를 이끌어내고 이로써 정보를 쉽게 전달한다는 장점이 있지요. 뿐만 아니라 수용자가 직접 정보의 중요성을 판단하여 정보에 참여하고 습득한다는 면에서 모션 인포그래픽보다 적극적인 정보 전달이 가능합니다. 


1. Google - How search works
from : google

아래의 영상은 구글에서 검색이 이루어지는 과정을 설명하는 모션그래픽입니다.

Google "How Search Works" from Kinda Akash on Vimeo.


아래는 같은 주제를 인터랙티브 인포그래픽으로 풀어놓은 웹 사이트 입니다.


(웹 인포그래픽 시연 영상)
http://www.google.com/insidesearch/howsearchworks/thestory/

두 인포그래픽 모두 스토리텔링을 이용하여 딱딱한 정보를 재미있게 풀어나가고 있습니다.

모션그래픽의 스토리텔링은 일방향적이라면, 인터랙티브 인포그래픽의 스토리텔링은 쌍방향적이기 때문에 정보의 수용자가 읽고 있는 시점을 반영한 스토리텔링이 가능합니다. 뿐만 아니라 모션그래픽의 정보 우선순위는 생산자에 의해 결정되지만 인터랙티브 인포그래픽의 정보 우선순위는 수용자가 결정하기 때문에 스스로에게 의미있는 정보와 그렇지 않은 정보를 판단하여 더 머무르거나 건너뛸 수 있습니다. 구글의 웹 인터랙티브 인포그래픽은 마우스 롤 오버와 클릭을 잘 활용하여 각 요소들 안에 정보를 재미있게 녹여 놓았습니다. 



2. Our choice
from : push pop press

아래의 영상은 지구 온난화에 대한 e book인 our choice 어플리케이션 홍보 영상입니다. 


http://pushpoppress.com/ourchoice/

Our choice는 정보를 조작하는 방식이 직관적이고 효과적입니다.
예를 들어
(이미지 1) 태양의 위치를 옮김으로써 조도 정보를 즉각적으로 전달하는 인포그래픽
(이미지 2) 수평을 시간 축으로 두어 좌우 스크롤 시 입력된 정보가 적용 된 결과를 바로바로 확인할 수 있는 인포그래픽
(이미지 3) 풍력에 대한 정보를 전달하기 위해 직접 마이크에 바람을 불어넣는 방식 등이 재미있습니다. 특별히 풍력 에너지에 대한 인포그래픽은 전달하고자 하는 정보(풍력 에너지)와 입력 메타포(바람)를 잘 매치시킨 것 같습니다. 



3. GI:K - Global Interactive Knowledge
product design : Olga Rau
interaction design : Adria Adele


'Out of Balance'를 주제로 한 아래의 작업은 '우리가 살고 있는 이 세계가 얼마나 불균형한가'란 메시지를 전달하는 인터랙티브 인포그래픽 입니다. 전 세계에 있는 각종 복잡한 정보들을 지구 형태의 디스플레이 조작을 통해 전달하는 점이 돋보입니다. 전달하는 주된 정보(전 세계에서 일어나는 사건)와 입력 메타포(지구)를 잘 매치시킨 또 다른 사례 입니다. 그러나 정보가 출력되는 방식과 입력 방식이 연결되지 않는 점은 아쉽습니다.

GI:K - Global Interactive Knowledge (The Making Of) from Ola Rau on Vimeo.



4. Water Pollution - Experiencing Abstract Information 
from : tentactile - interactive space

아래의 영상은 각 국가별 수질 오염도를 보여주는 인터랙티브 인포그래픽 입니다.
국가를 상징하는 막대형 메타포를 물에 담그면 해당 국가로 인한 물 오염도 그래픽이 실제 물에 퍼지듯 나타납니다. 막대형 메타포를 조금씩 돌리면 화학산업 오염도, 식품산업 오염도 등 세부 항목의 정보도 함께 볼 수 있습니다. 수질 오염이라는 추상적인 정보를 의미있는 인터랙션 경험으로 가공하기 위해 촉각 메타포로 '물'을 사용했다는 점이 돋보입니다. 

Experiencing Abstract Information from tentactile - interactive spaces on Vimeo.



5. IBM Think Exhibition
from : Sosolimited

아래 영상은 IBM이 창립 100주년을 맞아 링컨 센터에 설치한 독특한 전시물입니다. 이 설치작품은 과학과 기술을 통해 세상을 이해하고 개선하는 인간의 접근방식을 시각적으로 되짚어보는 것입니다. 전시장에 들어가면 다섯개의 섹션별 스크린-'Seeing', 'Mapping', 'Understanding', 'Believing', 'Acting'을 통해 인류가 진보해온 역사를 탐색할 수 있습니다.

이 과정에서 화면에 나타난 인포그래픽과 상호작용하면서 사용자 자신이 원하는 정보를 선택하고, 열람할 수 있는데요, 방대한 데이타와 콘텐츠를 한정된 공간과 이미지 안에 효율적으로 보여주는 것 같습니다. 또한 자신이 필요한 정보만을 선택적으로 보기 때문에 콘텐츠에 대한 집중도와 시간의 경제적인 측면에서도 효율적으로 보입니다.


IBM Think Exhibit from Sosolimited on Vimeo.



인터랙티브 인포그래픽의 장점

-모션 인포그래픽의 장점을 포함을 포함한다. 
-수용자의 참여를 이끌어 내어 수동적인 정보 수용이 아닌 능동적인 정보 경험을 가능하게 한다.
-정보의 수용 시점을 사용자가 유연하게 설정할 수 있다. 



글을 마치며

인터랙티브 인포그래픽은 정보를 보다 더 적극적으로 전달할 수 있기 때문에 이미 다양하게 사용이 되고있습니다. 다만 아쉬운 점이 있다면 의미있는 인터랙션이 사용된 사례가 적다는 점입니다. 사례를 조사하면서 모션, 메타포, in put 혹은 out put 인터랙션에 대한 선택이 단순히 '트랜드이기 때문에'라는 느낌을 많이 받았습니다. 인터랙션을 위한 인터랙션이 아닌, 타당한 이유를 갖는 인터랙션을 위해 고민이 필요한 것 같습니다.


[참고##영감 동영상##]  




팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 0
Ad Test...
2013.07.16 01:40

[애니메이션]_모션 인포그래픽

지난 번 공유 된 [로딩 애니메이션] 은 재밌게 보셨나요? 오늘은 인포그래픽 중에서도 모션 인포그래픽에 대해 공유할까 합니다.
참고로 인포그래픽에 관심이 많은 분들은 디자인 기획자를 위한 인포그래픽 시리즈를 함께 읽으셔도 좋을 것 같습니다.

인포그래픽(Infographic)이란?

Information + Graphic
인포그래픽(혹은 인포메이션 그래픽) 이란 Information과 Graphic의 합성어로 많고 복잡한 정보(Text, Data, Statistics)를 수집, 분석, 가공하여 스토리텔링과 디자인을 통해 정보를 전달하는 시각적 표현입니다.
(인포그래픽코리아)
통상적으로 인포그래픽은 정보를 담고 있는 매체에 따라 세 종류로 구분할 수 있습니다.
    -그래픽 인포그래픽 : 정지된 이미지로 정보를 제공하는 인포그래픽
    -인터랙티브 인포그래픽 : 인터랙션을 이용하여 정보를 제공하는 인포그래픽
    -모션 인포그래픽 : 정보를 영상화 하여 제공하는 인포그래픽

인포그래픽은 시각적으로 정보를 전달하기 때문에 텍스트 위주의 정보 보다 각인 효과가 크고, 습득시간이 빠릅니다. 더 나아가 그래픽에 모션과 사운드가 더해지면 정보가 스토리화 되어 청자의 흥미를 더 이끌수 있습니다. 아래 사례를 통해 직접 보실까요. 


Proof that we are woulmates
write : Drake Martinet
아래 이미지는 저자가 연인에게 프로포즈를 하기 위해 만든 인포그래픽이라고 합니다. 
두 사람이 통계적으로 얼마나 희박한 가능성 뚫고 사랑에 빠진 것인가를 설명하는 그래픽 인포그래픽입니다. 
출처 : http://visual.ly/proposal-infographic

아래는 위의 인포그래픽에 영감을 받은 모션 디자이너가 모션 인포그래픽으로 표현한 작업입니다.

The proof that we are soulmates
from : Emanuel Colombo
write : Drake Martinet
music : Monday_Jon Brion
제작년도 : 2012

출처 : http://www.emanuelecolombo.it/portfolio/back-to-portfolio/the-proof-that-we-are-soulmates-personal-project/

그래픽에 모션과 사운드가 더해져 정보의 전달력이 변하는 것을 느끼셨나요? 
본격적으로 모션 인포그래픽을 보시겠습니다.


1. Colorblind
from : Daniel Gleiberman, Elena Syrovatkina
제작년도 : 2013
아래 영상은 색맹에 대한 인포그래픽입니다. 색맹에 대한 일반적인 정보와 색맹유전인자가 어떻게 후대에 유전되는가를 깔끔한 모션으로 전달하는 작품입니다.

출처 : https://vimeo.com/63917075


2. TakePart : Participant Media - Waiting for 'Superman'
from : Jr.canest
art director : Joe Mullen
animation : Jorge R. Canedo Estrada
music : John Black
제작년도 : 2011
아래의 인포그래픽은 "Waiting For 'Superman'"이라는 다큐멘터리를 위해 제작된 영상입니다. 교육에 대한 미국의 시사 이슈를 위해 제작되었다고 합니다. 사운드의 효과 때문인지, 감동적이기까지 합니다.
출처 : http://www.buck.tv/work/pledge-to-see-this-film/


3. Japan - The strange country
from : Kenichi
제작년도 : 2010
아래 영상은 국가 '일본'에 대한 인포그래픽입니다. 일본인인 작가는 '일본에서 벌어지는 일상적인 일들이 그리 평범하지만은 않다'라는 메세지를 전하기 위해 이 영상을 만들었다고 합니다. 때문에 자국인의 관점이 아닌 타국인의 관점으로 일본에 대해 서술합니다. 깔끔한 그래픽과 특유의 위트가 돋보이는 작품입니다.

출처 : http://www.kenichi-design.com/JAPAN-The-Strange-Country 
(현재 영어버전은 제공되지 않습니다.)


4. 아라온
from : longstar
제작년도 : 2011
아래 영상은 대한민국 최초 쇄빙연구선 아라온에 대한 모션 인포그래픽입니다. 아라온호의 특징과 탐사에 대한 정보를 쉽게 전달해 주는 작품입니다.

출처 : http://www.longstar.kr/entry/ARAON


5. Communication over the internet
from : LUMYI
제작년도 :  2013
아래의 영상은 '인터넷을 통한 커뮤니케이션으로 영상이 갖게 되는 힘'에 대해 설명하는 인포그래픽입니다. 이번 블로깅과도 일맥상통하는데요. 방대한 데이터 속에서 영상화 된 데이터가 얼마나 강력한가를 말하고 있습니다.

출처 : http://www.lumyi.com/


모션 인포그래픽 더보기 펼침


인포그래픽이 모션화 되었을 때의 장점 

-정보를 스토리화 할 수 있다.
모션 인포그래픽은 단컷 그래픽과 달리 시간이라는 또다른 요소가 생기기 때문에 정보를 씬에 나누어 담을 수 있습니다. 한 편의 글을 쓰듯 기·승·전·결을 구성하여 전개할 수 있고, 때문에 정보를 좀 더 자연스럽게 전달할 수 있습니다.

-시각적 강조점과 동적 강조점을 분리하여 사용할 수 있다.
모션 인포그래픽은 시각적으로 정보를 담을 뿐 만 아니라 움직임에도 정보를 담아 전달합니다. 시각적으로 정보를 강조할 수 있을 뿐아니라 움직임으로도 정보를 강조할 수 있다는 의미입니다. 이 두 가지를 분리하여 사용할 수도 있고, 결합하여 전달하고자 하는 정보를 더 강조할수 있습니다.

-사운드를 통해 작가의 구체적인 의도를 전달할 수 있다.
모션 인포그래픽은 사운드(나레이션, 배경음 등 포함)를 통해 만든 이의 의도를 좀 더 구체적으로 전달할 수 있습니다. 사운드 효과를 이용해 무겁고 진지한 정보이더라도 가볍게 전할 수 있고, 가볍고 쉬운 정보이더라도 무겁게 전할 수 있는 것이죠.


다음 회에서는 인터랙티브 인포그래픽을 소개하겠습니다.^^

[참고##영감 동영상##] 

 

팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 8 Comment 4
Ad Test...
2013.06.17 00:24

[인터랙션]_재미있는 로딩 애니메이션

지난 번에는 3D 효과 트랜지션을 공유드렸습니다. 재밌게 보셨나요? 오늘은 로딩 애니메이션에 대해 공유할까 합니다.

종종 동영상 리써치를 하다보면 버퍼링이 느려 막연히 모니터에 멍때리며 기다리고 있는 상황이 생기곤합니다. 참 아까운 시간이지요.
이렇듯 사용자 액션과 액션 사이에는 정보를 업데이트하기 위한 공백 시간이 생기곤 합니다. 이 때 생기는 (절대)시간에 비해 사용자가 느끼는 체감 시간을 줄여줄 수 있는 방법은 없는 것일까요.

연구에 의하면 프로그래스 바의 골(ribbings)이 뒤로 움직이는 것이, 앞으로 움직일 때보다 체감시간을 줄여준다고 합니다.



 

-프로그래스 바의 골이 뒤로 이동               -프로그래스 바의 골이 앞으로 이동

요즘 흔히 볼 수 있는 로딩 스피너는 빨리 돌아갈수록 체감시간이 줄어든다고 하고요.

                            

-빠름                                        -느림

위 사례를 볼 때, 모션효과를 어떻게 주느냐에 따라 사용자의 체감시간이 달라진다는 것을 알수 있습니다. 그래서 오늘은 디자이너의 작은 배려로 사용자의 체감시간을 줄여줄 수 있는 다양한 로딩을 공유하려합니다.


시각적 유희로 풀어낸 로딩애니메이션
아래의 사례들은 그래픽 요소의 움직임이 시각적으로 재미있는 로딩 애니메이션입니다.

1. Loader wip_gif animation
그래픽 디자이너 Marcel이 작업한 로딩 애니메이션입니다.
아래 예시처럼 유기적인 움직임에 앞뒤로 가속도를 주면 체감시간이 더 줄어듭니다. 움직임 자체가 재미있어서 전 몇 번을 더 보게 되네요.

from : Marcel

출처 : http://blaufasan.tumblr.com/post/40087967598/loader-03-wip-http-drbl-in-govq


2. App loader_gif animation
GUI 디자인 스타일을 로딩 화면에도 동일하게 적용한 사례입니다. 그래픽 아이덴티티는 확실히 어필하겠네요.

from : Peter Had

출처 : http://dribbble.com/shots/946595-Loader/attachments/106847


3. Animation loading_gif animation

from : Jordi Verdu

출처 : http://dribbble.com/shots/963799-Animation-Loading-gif?list=users


로딩 시 아이덴티티 어필

4. Animated uploading
아래 사례는 와인 정보를 공유하는 어플리케이션인 Sipp의 로딩애니메이션입니다.
사용자가 선호하는 와인 정보와 함께 별점을 공유할 때 나타나는데요. 모션 자체에 큰 효과가 들어간 것은 아니지만 어플리케이션의 아이덴티티는 확실히 어필하네요.

from : Eric Hoffman

출처 : http://dribbble.com/shots/395607-Animated-Uploading-gif-For-Sipp-iPhone-App?list=users


5. Super Sync Sports
아래 영상은 Super Sync Sports 라는 웹 연동 게임 어플리케이션을 소개하는 영상입니다.

client / agency : Google Creative Lab
illustration : Rami Niemi, Agent Pekka
digital production : Weir+Wong
film production : No Mint
creative collaborator : Rafael Rozendaal

출처 : http://www.agentpekka.com/moving-image/rami-niemi-and-chrome-super-sync-sports/

아래의 영상은 PC 상에서 보여지는 Super Sync Sports 웹페이지의 로딩화면 입니다. 인트로 로딩화면은 다분히 플래쉬 기반 웹스럽네요. 여기서 재미있는 로딩 애니메이션은 각 게임 항목으로 진입하는 로딩 애니메이션입니다.

출처 : http://chrome.com/supersyncsports/
위 사이트로 가시면 직접 체험하실 수 있습니다. 크롬과 익스플로어 다 지원이 되지만 크롬을 추천합니다.


6. Every Last Drop

출처 : http://everylastdrop.co.uk/
위 사이트로 가시면 로고로 만든 로딩 애니메이션과 함께 parallax scroll을 체험하실 수 있습니다.


로딩 시 최소 정보 제공

7. Pinterest
아래 영상은 pinterest 웹 사이트의 로딩화면 입니다. pinterest는 최근 업데이트 된 이후 이미지를 불러올 때 이미지 컬러와 함께 링크된 정보를 제공하고 있습니다. 링크 주소가 중요한 정보는 아니지만, 이전의 공백으로 비워두는 방식보다 좋은것 같네요. 주정보(이미지)가 보여지기 전에도 계속 정보를 제공받는 다는 느낌이 듭니다.

http://pinterest.com/


8. Ampergram
Ampergram은 다양한 텍스트 디자인을 경험할 수 있는 사이트입니다. 빈 공백에 알파벳을 입력하면 사진으로 촬영된 해당 알파벳을 랜덤하게 띄워주는 사이트인데요. 로딩 시 선택한 알파벳이 무엇인지에 대한 기본적인 정보를 제공해 줍니다.

http://ampergram.com/
위 사이트로 가시면 직접 체험하실 수 있습니다.

데이터가 로딩되는 시간은 UI 설계시 간과되는 경우가 많습니다. 그러나 실제로 서비스를 경험할 때 사용자에게 큰 영향을 미치는 부분이지요. 사용자가 input을 입력했을 때 적절한 반응이 없다면, 본인의 input이 정상적으로 입력되었는지 혼란을 느낄 뿐 아니라, 서비스 자체에 불신이 생기기 쉽상이니 말입니다. 이러한 방면에서 loading spinner, progressbar 등이 해결해 주고 있으나 디자이너의 작은 배려로 좀 더 나은 사용자 경험을 제공할 수 있으리라 생각합니다.

[참고##영감 동영상##]


팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 1
Ad Test...
2013.05.24 00:01

[인터랙션]_Z축 트랜지션

지난 번 공유드린 런던에 있는 'Sebas & Clim' 스튜디오의 애니메이션 작업은 재밌게 보셨나요? 오늘은 트랜지션에 대해 공유할까 합니다. 오늘 공유할 트랜지션은 z축을 표현하는, 즉 3d 효과 트랜지션입니다.


Cube transition 큐브 트랜지션
1. Covert
Covert는 CreativeDash사에서 Covert사를 고객사로 제작한 일종의 메일 어플리케이션입니다. 아래의 영상은 새로운 메세지가 있을 시 업데이트 되는 트랜지션입니다.

from : CREATIVEDASH


2. What's on sale
'What's on sale'은 위치 기반 쿠폰 어플리케이션입니다. 위에서 공유한 Covert와 동일한 회사에서 만든 어플리케이션인데요. GPS를 통해 사용자와 가장 가까운 곳에 위치한 각종 편의시설 쿠폰 정보를 제공해주는 어플리케이션입니다. 데이터가 업데이트 되는 트랜지션입니다.

from : CREATIVEDASH
출처 : http://creativeda.sh/#home



기타 다른 3d 효과 트랜지션
3. Fold Effect_animation
3D 레이어 효과

from : Jelio Dimitro - Arsek.eu

출처 : http://dribbble.com/shots/1041852-Fold-Effect-animation?list=users


4. TurboDoktor_transition
3D 레이어 효과

from : Karol Ortyl

출처 : http://www.behance.net/gallery/TurboDoktor-iPhone-App/8586887


5. City Guides by National Geographic
3D 레이어 효과

from : Rally Interactive (via Ben Cline)

출처 : http://dribbble.com/shots/1040703-Stats-Animated-GIF


6. iPhone Menu Concept_animationg
3D 레이어 효과

from : Stephane Bouget

출처 : http://dribbble.com/shots/394407-Iphone-Menu-Concept-animated-gif?list=searches&tag=gif


7. Paper
3D 레이어 효과 및 스케일 조절

from : FityThree Inc.

출처 : http://www.fiftythree.com/paper


8. iPhone Navbar_animation
스케일 조절 및 줌 인/아웃

from : Jeff Broderick

출처 : http://dribbble.com/shots/1028754-iPhone-Retina-Navbar-Animation?list=users


9. flipboard
3D 레이어 효과 및 스케일 조절

from : Min Joon Kim

출처 : http://vimeo.com/33536652



Parallax scrolling 패럴랙스 스크롤링
레이어에 시차를 두어 3d 효과를 내는 트랜지션

[Web Design Trend] Parallax Scrolling

(클릭하면 해당 페이지로 이동합니다.)


10. Tandem Scroll

from : Terry Martin

출처 : http://vimeo.com/45382919


11. Effect on zodiacr app' by beasty design and syst-ms

from : beasty design

출처 : http://vimeo.com/49374447

다음에는 재미있는 로딩 동영상을 공유하도록 하겠습니다.
[참고##영감 동영상##]

팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 1
Ad Test...
2013.05.09 00:05

[애니메이션]_한 텀 쉬고가는 애니메이션_2_SNC

지난 번 인터랙션과 애니메이션은 재미있게 보셨나요? 이번에는 일전에 소개드린 'Animade' 스튜디오에 이어 오늘은 'Sebas & Clim'이라는 스튜디오를 소개할까 합니다.

SNC는 런던에 있는 애니메이션 스튜디오입니다. 회사 명은 회사 공동대표인 Sebastian Baptista와 Climent Canal의 이름에서 따왔다고 하네요. 현재는 영상(애니메이션)작업을 주작업으로 하는 회사입니다. 그래픽 작업도 왕왕 하고 있네요.^^

SNC 홈페이지 : http://www.sebasandclim.com/

학생시절 영상작업을 하면서 의미있는 모션을 만들기 위해 모션 하나하나에 아이디어를 짜고 수십번씩 다듬어 만들었던 기억이 있는데요. SNC 스튜디오의 영상에는 이러한 '의미를 갖고있는 모션, 전달력 있는 모션'이 돋보이는것 같습니다.


1. Target_surprise and delight in Red and White
발상의 전환이 돋보이는 영상입니다.^^



출처 :http://www.sebasandclim.com/Target-Surprise-and-delight


2. SPARKLE
아래의 영상은 고객사의 4가지 커뮤니케이션 강점을 어필하기 위해 만든 영상입니다. 개인적으로 의미를 전달하는 방식이 재미있네요.^^

- Reliable


- Dialogue


- Flexible


- Connections


출처 : http://www.sebasandclim.com/Sparkle-campaign


3. Make It Better
아래 영상은 Sebastian과 Climent가 창업 이후 처음 작업한 SNC 자사 소개영상입니다. 마치 CI가 만들어지는 과정을 한편의 영상에 담은 듯 합니다.



출처 : http://www.sebasandclim.com/Make-it-better

다음에는 z축 즉, 3D를 이용한 화면 트랜지션을 소개해 드리겠습니다.
[참고##영감 동영상##]

팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 0
Ad Test...
2013.04.19 00:02

[인터랙션]_인터랙션과 애니메이션

지난 번에는 한 번 쉬고가는 의미로 제가 좋아하는 애니메이션 스튜디오 Animade의 애니메이션 작업들을 공유했었는데요, 이번에는 인터랙션과 애니메이션이라는 주제로 공유하려고 합니다.

1. Haze _ promo movie
먼저 소개드릴 영상은 Haze입니다.
Haze는 이미 많이 알려진 날씨 어플리케이션이지요. 간략하게 소개를 드린다면 현재와 5일간의 날씨를 알려주는 어플리케이션입니다.
Haze는 심플한 디자인에 직관적인 정보 전달이 특징인데요. 인상적인 부분은 애니메이션을 이용해 정보를 전달한다는 점입니다. 유동적 흐름을 가지고 있는 배경 애니메이션을 통해 온도가 올라갈 것인지, 내려갈 것인지에 대한 정보를 전달합니다. 텍스트를 읽지 않고도 정보를 전달할 수 있다는 점이 인상적이네요.


from : robotcat /http://robocatapps.com/

출처 : http://gethaze.com/


2. app switcher _ concept demo movie : multitasking redesign for ios
위 영상은 'iOS 앱 스위치/멀티태스킹'에 관한 concept 영상입니다. (concept에 대한 포스트 : jessehead.co/blog/2013/03/20/ios-app-switcher-concept-multitasking-redesign/)
제작자는 '애플이 현재 제공하는 멀티태스킹이 사실상 앱 스위칭에 그치는 것 아닌가'라는 것으로부터 이 컨셉을 시작하게 되었다고 하는데요. 위 영상 역시 진정한 의미에서의 멀티태스킹이라기 보다는 앱 스위칭에 가깝지만 'semi-active:현재 사용되진 않지만 앱의 기능을 유지시킴' 개념을 통해 차별화하는 것 같습니다. 여러분은 어떻게 생각하시나요?


from : Jesse Head

출처 : http://jessehead.co/blog/2013/03/20/ios-app-switcher-concept-multitasking-redesign/


3. Petting Zoo
이 영상은 일러스트 작가 Christoph Niemann의 아트웍을 이용한 어플리케이션 시연 영상입니다. 뉴욕타임즈, 뉴욕커 표지 디자인 일러스트 작가로 유명한 Christoph Niemann는 직접 5년간 손으로 그린 동물 일러스트로 어린이 대상 어플리케이션을 만들었다고 하네요.
아날로그 애니메이션을 이용한 화면전환, Christoph다운 재치있는 일러스트가 인상적입니다.^^

from : Design Indaba
concept and animations : Christoph Niemann
developer : Jon Huang
sound design : Markus Wormstorm 

출처 : http://vimeo.com/60446332

다음 번에는 Animade에 이어 SNC 스튜디오를 소개할까 합니다.
[참고##영감 동영상##]

팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 0
Ad Test...
2013.04.05 00:14

[애니메이션]_한 텀 쉬고가는 애니메이션

지난 번에는 인터랙션이 돋보이는 앱 시연 영상을 공유드렸는데요, 오늘은 제가 개인적으로 좋아하는 애니메이션 스튜디오 Animade의 애니메이션 작업들을 공유하려 합니다.

Animade는 런던에 있는 애니메이션 스튜디오입니다. 현재는 주로 광고나 비디오게임, 디지털 컨텐츠들을 만든다고 하네요.

1. Cowboy's Cat
이 영상은 'Ready Steady Bang'이라는 앱 홍보용으로 만들어진 Webisod입니다. 이 앱은 animade와 자매회사인 Chambers Judd와 함께 만든 게임 앱인데요. 미니멀한 캐릭터와 세심한 모션이 돋보입니다.
여러가지 시리즈들 중에서 한 작품 올려봅니다.

from : Animade
direction : Ed Barrett and Tom Judd
animation : Ed Barrett
development : Chamers Judd

출처 :http://animade.tv/work/ready_steady_bang


2. Let's make some great fingerprint art
Fingerprint Art라는 제목의 영상은 Marion Deuchars라는 아티스트의 동화책 홍보 영상으로 만들어진 애니메이션입니다. 이 영상은 아트웍 자체가 굉장히 돋보이네요.

from : Animade
animation and pruduction : Animade
sound design : Aaron Lampert
artwork : Marion Deuchars

출처 :http://animade.tv/work/fingerprint_art
(작가 :http://mariondeuchars.com/)


3. Jangle Bells_a christmas gift from animade
Animade에서 2011년에 작업한 pad용 앱입니다. 기능이 단순해서 그런지 각 오브젝트들마다 가지고 있는 모션이 눈에 띄고 재미있네요.^^

from : Animade
directed : Tom and Ed
development : Chambers Judd

출처 :http://animade.tv/work/jangle_bells

아래 영상은 Animade를 SNS에 추천할 수 있는 페이지를 Animade스럽게 표현한 작업입니다. 애니메이션 하나로 '좋아요'를 누르고 싶게끔 만들었네요.^^ '좋아요'버튼을 누르도록 하는 신선한 어포던스인것 같습니다.
like.animade.tv로 가시면 직접 경험하실 수 있습니다.

다음에는 인터랙션과 애니메이션이라는 주제로 살펴보겠습니다.
[참고##영감 동영상##]

팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 0
Ad Test...