요즘엔 지하철을 타고 퇴근을 하면서 핀터레스트를 보다 시간이 다 갑니다. 퇴근 중의 머리속은 무엇을 고민할 여력은 없고, 프로페셔널해져야 한다는 강박관념은 잠시 내려 놓은 채 멍때리며 엄지손가락만 슥슥 움직입니다. 수많은 컨텐츠 중에서 요즘엔 GIF가 끌리더군요. 계속 파도를 타고타고 깊숙히 돌아다니면 끊임없이 컨텐츠를 볼 수 있기 때문에 저의 자투리시간을 핀터레스트가 잡아먹고 있는 것이죠. 이번 글에 딱히 메시지는 없습니다. 그저 아래 GIF들을 보시며 휴식을 취해보시면 좋겠습니다. * 주의 : 모바일에서 데이터 사용 압박 원본 링크 : http://abduzeedo.com/sublime-illustrated-cinemagraphs-rebecca-mock 원본 링크 : http://imgs.abduze..

이전에 블로그에서 Youri Kim님이 '재미있는 로딩 애니메이션' 포스트를 통해 로딩 애니메이션에 대한 설명과 사례를 소개해주셨죠. 이번 글에서는 웹디자인/개발을 할 때 바로 사용할 수 있는 로딩 애니메이션을 공유하려고 합니다. 아마 웹디자인을 주로 하시는 분들은 더 많이 아실 것 같은데요, 최근 CSSDeck이나 CodePen같은 곳들을 자주 들어가서 구경을 하고 있습니다. 거기에 올라오는 여러 인터랙션 예제들이 재미있거든요. 전문 분야가 아니라 확실히는 모르지만, HTML, CSS, JavaScript등을 사용하는 웹 환경이 성숙해지면서 예전에 Flash, Animation GIF로 처리했던 것들을 이제 CSS, JavaScript를 이용하여 구현하는 것 같습니다. 그러다보니 글자로 된 코드만 공유..

터치스크린을 사용하는 스마트폰에서는 터치 조작과 관련된 많은 화면 인터랙션들이 있죠. OS에서 제공하는 것들도 있지만, 여러 앱들이 각자의 컨셉에 맞는 화면 인터랙션을 제공하기도 합니다. 가끔 쓰다보면 새롭고 재밌어서 괜히 손가락으로 슥슥 문지르며 화면을 보기도 해요. 오늘은 그런 것들 중, 페이지의 끝을 나타내는 방식의 사례를 몇 가지 공유합니다. 더 정확히는, 다들 탄성을 적극적으로 활용한 앱들입니다. 그리고 페이지 끝 피드백의 방식과 연관될만한 앱에 대한 개인적인 의견도 약간 넣었습니다. 예전에 무이님이 '아이폰 스크롤 UI의 고유한 멘탈 모델'에서 관련 내용을 설명한 적이 있으니, 흥미가 있으신 분은 읽어보시면 좋겠습니다. 그리고 넓은 접근에서 UI 애니메이션에 대한 생각을 적었던 'User in..

지난 번 공유된 [모션 인포그래픽]에 이어 오늘은 인터랙티브 인포그래픽을 공유하려 합니다. 인포그래픽(Infographic)이란? Information + Graphic 인포그래픽(혹은 인포메이션 그래픽) 이란 Information과 Graphic의 합성어로 많고 복잡한 정보(Text, Data, Statistics)를 수집, 분석, 가공하여 스토리텔링과 디자인을 통해 정보를 전달하는 시각적 표현입니다. (인포그래픽코리아) -그래픽 인포그래픽 : 정지된 이미지로 정보를 제공하는 인포그래픽 -모션 인포그래픽 : 정보를 영상화 하여 제공하는 인포그래픽 -인터랙티브 인포그래픽 : 인터랙션을 이용하여 정보를 제공하는 인포그래픽 지난 번 공유 된 모션 인포그래픽의 장점은 정보의 스토리화, 다양한 강조점 사용, 사..

지난 번 공유 된 [로딩 애니메이션] 은 재밌게 보셨나요? 오늘은 인포그래픽 중에서도 모션 인포그래픽에 대해 공유할까 합니다. 참고로 인포그래픽에 관심이 많은 분들은 디자인 기획자를 위한 인포그래픽 시리즈를 함께 읽으셔도 좋을 것 같습니다. 인포그래픽(Infographic)이란? Information + Graphic 인포그래픽(혹은 인포메이션 그래픽) 이란 Information과 Graphic의 합성어로 많고 복잡한 정보(Text, Data, Statistics)를 수집, 분석, 가공하여 스토리텔링과 디자인을 통해 정보를 전달하는 시각적 표현입니다. (인포그래픽코리아) 통상적으로 인포그래픽은 정보를 담고 있는 매체에 따라 세 종류로 구분할 수 있습니다. -그래픽 인포그래픽 : 정지된 이미지로 정보를 제..

지난 번에는 3D 효과 트랜지션을 공유드렸습니다. 재밌게 보셨나요? 오늘은 로딩 애니메이션에 대해 공유할까 합니다. 종종 동영상 리써치를 하다보면 버퍼링이 느려 막연히 모니터에 멍때리며 기다리고 있는 상황이 생기곤합니다. 참 아까운 시간이지요. 이렇듯 사용자 액션과 액션 사이에는 정보를 업데이트하기 위한 공백 시간이 생기곤 합니다. 이 때 생기는 (절대)시간에 비해 사용자가 느끼는 체감 시간을 줄여줄 수 있는 방법은 없는 것일까요. 연구에 의하면 프로그래스 바의 골(ribbings)이 뒤로 움직이는 것이, 앞으로 움직일 때보다 체감시간을 줄여준다고 합니다. -프로그래스 바의 골이 뒤로 이동 -프로그래스 바의 골이 앞으로 이동 요즘 흔히 볼 수 있는 로딩 스피너는 빨리 돌아갈수록 체감시간이 줄어든다고 하고..

지난 번 공유드린 런던에 있는 'Sebas & Clim' 스튜디오의 애니메이션 작업은 재밌게 보셨나요? 오늘은 트랜지션에 대해 공유할까 합니다. 오늘 공유할 트랜지션은 z축을 표현하는, 즉 3d 효과 트랜지션입니다. Cube transition 큐브 트랜지션 1. Covert Covert는 CreativeDash사에서 Covert사를 고객사로 제작한 일종의 메일 어플리케이션입니다. 아래의 영상은 새로운 메세지가 있을 시 업데이트 되는 트랜지션입니다. from : CREATIVEDASH 2. What's on sale 'What's on sale'은 위치 기반 쿠폰 어플리케이션입니다. 위에서 공유한 Covert와 동일한 회사에서 만든 어플리케이션인데요. GPS를 통해 사용자와 가장 가까운 곳에 위치한 각종..

지난 번 인터랙션과 애니메이션은 재미있게 보셨나요? 이번에는 일전에 소개드린 'Animade' 스튜디오에 이어 오늘은 'Sebas & Clim'이라는 스튜디오를 소개할까 합니다. SNC는 런던에 있는 애니메이션 스튜디오입니다. 회사 명은 회사 공동대표인 Sebastian Baptista와 Climent Canal의 이름에서 따왔다고 하네요. 현재는 영상(애니메이션)작업을 주작업으로 하는 회사입니다. 그래픽 작업도 왕왕 하고 있네요.^^ SNC 홈페이지 : http://www.sebasandclim.com/ 학생시절 영상작업을 하면서 의미있는 모션을 만들기 위해 모션 하나하나에 아이디어를 짜고 수십번씩 다듬어 만들었던 기억이 있는데요. SNC 스튜디오의 영상에는 이러한 '의미를 갖고있는 모션, 전달력 있는..

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

지난 번에는 인터랙션이 돋보이는 앱 시연 영상을 공유드렸는데요, 오늘은 제가 개인적으로 좋아하는 애니메이션 스튜디오 Animade의 애니메이션 작업들을 공유하려 합니다. Animade는 런던에 있는 애니메이션 스튜디오입니다. 현재는 주로 광고나 비디오게임, 디지털 컨텐츠들을 만든다고 하네요. 1. Cowboy's Cat 이 영상은 'Ready Steady Bang'이라는 앱 홍보용으로 만들어진 Webisod입니다. 이 앱은 animade와 자매회사인 Chambers Judd와 함께 만든 게임 앱인데요. 미니멀한 캐릭터와 세심한 모션이 돋보입니다. 여러가지 시리즈들 중에서 한 작품 올려봅니다. from : Animade direction : Ed Barrett and Tom Judd animation : ..

지난 번 스톱모션 애니메이션이 인기가 많았는데, 오늘은 인터랙션 데모 및 시연 영상을 보려합니다.^^ 1. Sharp AQUOS Android Smartphone-Feel UX Feel UX는 Sharp와 Frog라는 유명 디자인 회사가 공동 작업한 안드로이드 UI 플랫폼입니다. 깔끔한 비주얼에 효율적인 사용성을 포인트로 잡았다고 하네요. 여러 가지 기능이 있다는 것을 어필하기 위해 이곳 저곳에 버튼들을 늘어 놓지 않고, 깔끔한 비주얼을 유지한 채 작은 요소들과 인터랙션에 기능들을 숨겨 놓은 점이 인상적이네요. from : frog / http://www.frogdesign.com/ 출처 frogdesign.com/feelux 2. Wide Sky-iOS Game and Experiment Wide Sk..

다들 프로젝트 때문에 많이 바쁘시죠? 지난 번 독특한 UI 인터랙션 시연 동영상에 이어, 오늘은 쉬면서 보실 수 있는 스톱모션 애니메이션을 보려합니다.^^ 1. The Extra Small 2010년 몰스킨에서 작은 사이즈의 플래너가 제작되었을 때 나왔던 광고 영상입니다. 네덜란드의 일러스트 작가 Rogier Wieland가 작업한 스톱모션이라고 하네요. from : Moleskine backstage video 이 애니메이션을 위해 총 533장의 종이가 들었다고 하네요.^^ 출처 http://www.moleskine.com/en/news/the_extra_small 2. Revolution (Life Cycle of a Drop of Water) 물의 순환을 popup book과 스톱모션으로 표현한 작..