지난 2004년 디자인 정글 명예의 전당 추천플래시 부문에 올라가면서 인터뷰 했던 글.
현재 정글에서는 리뉴얼 이후 지난 명예의 전당 글은 찾을수가 없음.

☞ 어떤 일을 업으로 하고 계십니까?
디자인을 업으로 삼고 있으며 현재 ㈜오렘(allm)에서 디자인팀장을 맡고 있습니다. 개인적으로 웹디자인이라고 명명하기를 싫어하는데, 웹이라는 영역 너머, '인간이 접할 수 있는 모든 것'을 가장 아름답게 만들어 내는 사람으로 기억되고 싶기 때문입니다. 말이 좀 거창하죠? (웃음) 플래시라는 툴의 자유도가 높아 주작업툴로 사용하고 있고, 여러 분야를 통해 "어떻게 하면 사실적이고 아름다운 움직임을 표현해낼 수 있을까"에 대해 고민을 많이 합니다.

☞ '9시 출근 6시 퇴근'이란 직장인 싸이클에 맞추어 출근 후 퇴근까지의 남은 시간을 보여주는 메뉴를 만드셨습니다. '칼퇴근'에 대해 어떻게 생각하시는지요?
칼퇴근, 중요하죠(웃음). 저희 회사의 경우, 퇴근시간만큼은 가능한 한 지킬 수 있도록 서로가 배려하는 편입니다. 일의 중요도가 높고 당장 마쳐야 할 일이 코앞에 있어서 막중한 책임이 지워졌을 경우엔 스스로가 알아서 야근을 하긴 하지만 말이죠(웃음). 더 중요한 것은, 칼퇴근 이후 있을 개인의 여가생활이 디자이너로서의 창의력에 도움을 줄 경우가 꽤 많은 것 같습니다. 또 칼퇴근 하려고 마음먹은(!) 날에는 다른 동료들에게 폐 끼치지 않고 제 시간에 퇴근하기위해 미친 듯이 일하게 되기도 하죠(웃음).

☞ 약간의 수학이 필요했을 것 같습니다.
이 디지털시계 XOU에는 한장 한장 넘기는 애니메이션과 그에 맞는 숫자를 정확히 써 주는 타이밍이 중요했습니다. 간단히 설명이 될지는 모르겠지만, 설명을 해보면 아래와 같습니다.
우선 기본적으로 사용자의 컴퓨터에서 시간을 가져올 수 있도록 Date관련함수들이 사용되었습니다. 여기에는 여러 가지 함수들이 있는데 현재시간 표시에서는 간단히 시간, 분, 초단위로 가져오는 함수가, 퇴근시간까지의 남은 시간 표시에서는 현재시간과의 millisecond (1/1000초)차를 구하여 시간, 분, 초로 환산하는 함수가 사용되었습니다.
이렇게 계산된 시간은 한 장, 한 장 넘기는 타이밍에 맞춰 숫자를 뿌려주게 됩니다. 숫자가 표시될 검은 판은 가운데를 기준으로 아래위로 나뉘어져 있고 위 판 두 개, 아래 판 두 개로, 총 4장의 판으로 구성되어있습니다. 예상하신 대로 숫자는 미리 씌여져있는 것이 아니라 Dynamic TextField로 되어 있어 함수에 의해 return되는 숫자를 뿌려주게 됩니다.

1번판과 4번판은 고정되어 있으며 2번판과 3번판이 움직이게 됩니다.
3초에서 4초로 넘어가는 것을 예로들면,

STEP 1.
현재 1번판에 3의 윗쪽 반이 마스크가 씌워져서 보여지는 상태, 4번판에 3의 아래반쪽이 마스크가 씌워져서 보여지는 상태, 그리고 2번판과 3번판은 보이지 않는 상태입니다. 3초에서 4초로 넘어가기 직전, 현재의 sec 변수에 들어있던 3이라는 숫자를 임시변수 tempSecond에 넣어둔 다음, 3이 들어있는 변수 sec에는 새로운 숫자 4를 넣습니다.
STEP 2.
그리고 1번 판 무비클립에 들어있던 Dynamic TextField에 3대신 현재 sec에 들어있던 4를 집어 넣고, 이와 동시에 2번 판 무비클립에 tempSecond에 들어있던 이전 시간인 3을 집어넣으며 아래 쪽으로 판이 떨어지는 애니메이션을 진행시킵니다. (이 때 4번 판은 여전히 3의 아래반쪽이 보여지고 있을 것이고 2번 판에도 tempSecond에 들어있던 값 3이 들어가서 위의 반쪽이 보여질 테니 자연스럽게 3이라는 숫자가 반이 접혀서 떨어지는 모양새로 보이겠죠)
STEP 3.
2번 판이 중간을 지나칠 때, 2번 판을 숨기고, 3번 판에 sec에 들어있는 새로운 숫자 4를 넣으면서 보여지게 하고 아래로 완전히 떨어지는 애니메이션을 진행시킵니다.
STEP 4.
그리고 마지막으로 3번 판의 애니메이션이 진행되어서 4번 판과 거의 근접하게 붙으면 4번 판에 현재 써 있는 3대신 sec안의 숫자 4를 넣고 3번 판을 숨깁니다.

살펴보니 눈속임 같죠? 맞습니다. 플래시의 재미는 실제와 같이 보이기 위한 눈속임의 아이디어에서 재미가 시작됩니다. 꽤 긴 설명이 되어버렸네요. (웃음)

☞ 다른 플래시 작품도 보여주세요.
어떤 작품을 보여드려야 할 지는 모르겠지만 플래시의 특성을 보여줄 수 있는 몇 가지를 보여드립니다. 길게는 4~5년, 짧게는 몇 개월전의 작업물들입니다. 4~5년 전의 작업물들은 아무래도 디자인이 좀 어수선하겠죠?(웃음) 업무 중에도 틈 날 때마다 이것저것 실험적으로 만들어보곤 하는데, 실제 사이트에 적용에 도움이 되는 경우가 많습니다.

소셜웹 반응글