Planning · PM
애니메이션과 트랜지션의 차이
http://www.kirupa.com/html5/css3_animations_vs_transitions.htm 트랜지션은 CSS 프로퍼티에 의해서만 발생한다.:hover 같은 슈도 클래스에 의해서이거나, 클래스를 넣고 빼는 등의 동작에 의해서이다.물론 엘리먼트의 인라인 스타일을 변경해서도 동작하게 할 수 있다. 애니메이션은 시작하기 위해 별도의 설정이 필요없다.한 번 정의하면 자동으로 시작한다. 애니메이션은 `animation-iteration-count` 속성으로 쉽게 반복할 수 있지만,트랜지션은 이런 속성이 없다.트랜지션은 한 번만 발생한다. (필요하다면 스크립트에서 `transitionEnd` 이벤트를 받는다) 애니메이션은 키프레임을 지정할 수 있다.트랜지션은 할 수 없다. 트랜지션을 활용한 인터..
웹사이트 화면설계서 템플릿 만들기
기획 일을 시작하고 가장 먼저 부딪힌 것이 화면설계서였습니다.선배들의 문서를 보면 형식이 다 달라서, 무엇을 써야 하는지 감이 잘 안 잡혔어요.그래서 제가 직접 쓸 수 있는 템플릿을 만들어 보기로 했습니다.아직 배우는 중이라 완벽하다고 할 수는 없고, 지금까지 정리한 구성을 적어 봅니다. 화면설계서는 디자이너와 개발자에게 이 화면이 무엇이며 어떻게 동작해야 하는지를 전달하는 문서입니다.그림만 있으면 동작이 비고, 글만 있으면 화면이 안 그려지기 때문에 둘이 한 장에 같이 있어야 해요.읽는 사람마다 필요한 것도 조금씩 다릅니다.디자이너는 어떤 요소가 어디에 필요한지, 개발자는 어떤 조건에서 무엇이 바뀌는지, 검수하는 사람은 어떤 상태가 정상인지를 찾아봅니다.이 세 시선을 한 문서에 담는 것이 템플릿의 목표..
상호작용 설계의 기본
기획을 배우면서 "상호작용 설계"라는 말을 자주 접하는데, 처음에는 무슨 뜻인지 막연했습니다.화면을 예쁘게 그리는 일과는 다른 것 같고, 그렇다고 개발 이야기도 아니었어요.책을 읽고 선배들의 설명을 들으며 제 나름대로 정리한 기본 개념을 적어 봅니다.아직 초보의 정리라는 점은 감안해 주세요. 제가 이해한 상호작용 설계는 사용자와 시스템이 주고받는 대화를 설계하는 일입니다.사용자가 무엇인가를 하면 시스템이 응답하고, 그 응답을 보고 사용자가 다시 무엇인가를 하는 순환이에요.대화라고 생각하면 좋은 점이 있습니다.말을 걸었는데 상대가 아무 반응이 없으면 불안하고, 엉뚱한 대답이 돌아오면 당황하게 되잖아요.화면도 마찬가지로 사용자의 행동에 알맞은 반응이 돌아와야 안심하고 다음 단계로 갑니다. 대화에는 목적이 있..
정보설계의 기본, 분류와 이름 짓기
서비스에 콘텐츠나 기능이 많아질수록 "이걸 어디에 두지?"라는 고민이 늘어납니다.메뉴를 만들 때마다 팀원마다 생각이 달라서 회의가 길어지기도 했어요.그래서 정보설계의 기본을 공부하며 분류와 이름 짓기를 중심으로 정리해 보았습니다.아직 배우는 단계라 용어는 제 방식으로 풀어서 썼습니다. 정보가 아무리 많아도 사용자가 찾지 못하면 없는 것과 같습니다.정보설계는 정보를 어떻게 묶고, 어떤 이름을 붙이고, 어떤 길로 이동하게 할지를 정하는 작업이라고 이해했어요.크게 세 가지를 같이 생각합니다.조직화: 정보를 어떤 기준으로 묶을 것인가라벨링: 묶음과 항목에 어떤 이름을 붙일 것인가탐색: 사용자가 그 사이를 어떻게 오갈 것인가세 가지는 따로따로가 아니라 서로 얽혀 있습니다.분류가 흐릿하면 이름을 아무리 다듬어도 헷..