Planning · PM
Daumkakao Oven (beta)
이번에 간단하게 소개 드릴 기획 서비스는 Oven 이라는 서비스인데요... 이번에 다음카카오의 플랫폼기술팀에서 제공하는 연구실 프로젝트로, 모바일 크리에이터를 위해서 새롭게 오픈하여 베타테스트를 하고 있습니다. Oven일단 Oven의 모든 서비스는 프로토타이핑이라는 목적에만 맞다면 용도에 관계없이 자유롭게 사용할 수 있다고 하네요. 이러한 Oven 서비스는 다양한 기능들을 가지고 있는데요. 간단하게 정리되어 있는 핵심 포인트가 사이트에 올라와 있어서 함께 첨부합니다. 우선 간단한 가입 과정을 거치고 로그인을 하게 되면 프로젝트들을 관리할 수 있는 대시 보드가 먼저 나옵니다. 이 곳에서 간단한 개인 정보 설정 및 다양한 프로젝트들을 관리하고 공유할 수 있습니다. 우선 테스트를 위해서 신규 프로젝트를 하나 ..
페럴랙스 스크롤
요즘 반응형 웹기획과 함께 페럴랙스 스크롤 형태의 사이트들이 많이 늘어 나고 있습니다. 우선 페럴랙스 스크롤 이라는 것에 대해서 알아보겠습니다. 페럴랙스 스크롤(Parallax scrolling) 은 원래 게임이나 애니메이션과 같은 곳에서 사용하는 기법으로 오브젝트 간 시간 차이를 통해서 조금 더 역동적으로 화면을 표현하던 기법입니다. 이러한 기법이 CSS3와 HTML5 가 등장하면서 2011년부터 웹에 적용되어 점차 확대 되어 가고 있는 추세입니다. 2013년 Purdue University 의 연구에 따르면 페럴랙스 스크롤 기법은 UX 측면에서 새로운 경험을 제공하여 특정 측면의 향상을 가져오지만 반드시 UX 적인 향상을 가져오지는 않는다고 하였습니다. 이러한 페럴랙스 스크롤 웹사이트의 가장 큰 장점..
애니메이션과 트랜지션의 차이
http://www.kirupa.com/html5/css3_animations_vs_transitions.htm 트랜지션은 CSS 프로퍼티에 의해서만 발생한다.:hover 같은 슈도 클래스에 의해서이거나, 클래스를 넣고 빼는 등의 동작에 의해서이다.물론 엘리먼트의 인라인 스타일을 변경해서도 동작하게 할 수 있다. 애니메이션은 시작하기 위해 별도의 설정이 필요없다.한 번 정의하면 자동으로 시작한다. 애니메이션은 `animation-iteration-count` 속성으로 쉽게 반복할 수 있지만,트랜지션은 이런 속성이 없다.트랜지션은 한 번만 발생한다. (필요하다면 스크립트에서 `transitionEnd` 이벤트를 받는다) 애니메이션은 키프레임을 지정할 수 있다.트랜지션은 할 수 없다. 트랜지션을 활용한 인터..
인터렉션/트랜지션 디자인 참고 사이트 모음
UI 애니메이션 capptivate.cohttp://capptivate.co/ useyourinterfacehttp://useyourinterface.com/ sixuxhttp://sixux.com dribbblehttps://dribbble.com/shots?list=animated giphyhttp://giphy.com/ 트랜지션(Transition) 패턴 예제 tympanushttp://tympanus.net/Development/PageTransitions/http://tympanus.net/Tutorials/CaptionHoverEffects/index.html Effeckthttp://h5bp.github.io/Effeckt.css/ animatehttp://daneden.github.io/a..