홈페이지를 유심히 보시는 분들은 눈치 채셨을 것입니다. 다함께가 주최하는 포럼이라는 항목이 생겼습니다.

오른쪽 하단을 살펴보시면 발견할 수 있을 겁니다.

이번에 이 기능을 달면서는 자바스크립트 애니메이션을 좀 활용했습니다.

오른쪽 아래에 있는 화살표를 누르면 포럼이 슬라이드로 넘어가는 것을 볼 수 있습니다. 간편하게 아래 동영상을 보셔도 됩니다.

자바스크립트 애니메이션

이번에 포럼을 붙일 때는 자바스크립트 애니메이션을 사용했습니다. 위 동영상을 보시면 알겠지만 포럼을 넘기면 슬라이드처럼 샥샥 넘어가는 효과가 눈으로 보입니다.

자바스크립트 애니메이션은 아주 한정적인 영역에서만 사용해야 합니다. 웹은 기본적으로 움직임이 많지 않은 매체입니다. 애초에 그렇게 설계됐기 때문이죠. 물론 요즘은 RIA(Rich Internet application)라고 해서 웹 화면에서도 화려한 효과들을 많이 주는 쪽으로 방향이 가고 있습니다만, 아직까지 웹에서 그런 화려한 효과를 누리는 건 제한적입니다. 영화 사이트 들어가 보신 분들은 좀 느낄 수 있을 겁니다. 성능 좋은 컴퓨터에서야 모르겠지만, 성능이 평범한 컴에서 영화 사이트에 들어가면 화면이 뚝뚝 끊기고 로딩 속도도 느리고 짜증날 때가 많죠.

게다가 <레프트21>은 신문 사이트로, 화려한 효과를 보는 게 목적인 사이트가 아니라 텍스트 읽기가 주된 활동이 되는 사이트입니다. 움직임이 많으면 오히려 읽는 사람 눈을 피곤하게 하는 효과를 낼 수 있죠. 그래서 최대한 정적으로 화면을 구성하려고 노력하고 있습니다.(최근에 마르크스21 광고는 플래시로 구성해서 움직이게 해 놨는데, 그렇게 맘에 들진 않습니다. 목록이 너무 많아서 그렇게 붙일 수밖에 없었죠.)

그런데 이번 포럼 목록에 자바스크립트 애니메이션을 사용한 것은 다음 이유에서입니다.

  1. 사용자가 클릭하기 전에는 움직이지 않게 구성해 눈을 어지럽게 하지는 않았습니다. 사용자의 의도와 무관하게 모든 목록을 보여 줘야 하는(예컨대 <마르크스21> 4호 광고) 그런 기획이 필요한 것이었다면 자바스크립트 애니메이션을 포기하고 다른 방도를 찾으려고 노력했을 것입니다.(예컨대 제목만 보여 주고 모든 목록을 노출하는 방법이 있겠죠.)
  2. 텍스트에 애니메이션을 주는 것은 이미지에 애니메이션을 주는 것보다 성능저하가 덜합니다.
  3. 바뀌는 모습을 표현해 주는 게 사용자들 편의에 더 부합한다고 판단했습니다. 클릭했을 때 움직임이 없이 그냥 변하면 이게 변한 것인지 아닌 것인지 눈치를 못 채는 경우도 있습니다. 애니메이션 효과가 있으면 변했다는 것을 사용자가 확실하게 감지할 수 있는 것이죠.

원 소스 멀티 유스(One Source Multi Use)

또 하나 자랑(?)할 만한 일이 있습니다. 포럼 슬라이드에 나오는 정보는 레프트21 홈페이지에 저장된 것이 아닙니다. 포럼 홈페이지에서 제공하는 정보를 받아서 그 때 그 때 뿌려 주는 것이죠. 포럼 RSS를 활용한 것입니다. RSS는 실시간으로 최신 정보를 업데이트해 주기 때문에, <레프트21>쪽에서는 따로 입력해줄 것 없이 그냥 만들어 두면 역시 실시간으로 계속 정보가 업데이트되는 것입니다.

이런 것을 ‘원 소스 멀티 유스’라고 말합니다. 데이터는 한 군데만 저장되 있는데 여러 곳에서 그걸 활용할 수 있는 것이죠. 보통 언론사에서 ‘원 소스 멀티 유스’라고 하면 기사를 다 모아놓은 데이터베이스가 있고, 그걸 휴대폰에도 뿌려 주고, 웹에도 뿌려 주고, 오프라인 인쇄를 할 때도 사용하고 그렇게 하는 겁니다.

그럼 자료관리를 하기가 아주 편한 거죠. 만약 기사 오타가 하나 났다고 칩시다. 만약 ‘원 소스 멀티 유스’ 방식에 따라 데이터를 한 곳에만 저장한 게 아니라, 신문 따로 웹 따로 핸드폰 따로 이렇게 데이터를 저장했다면, 오타가 발견됐을 때 세 곳에 있는 담당자에게 모두 전화를 해서 오타를 고치라고 해야 할 것입니다. 하지만 ‘원 소스 멀티 유스’ 방식으로 데이터가 저장돼 있다면 데이터가 저장돼 있는 한 곳에서만 오타를 수정하면 되는 것이죠. 그러면 그 데이터를 활용해 서비스하는 곳의 내용은 모두 자동으로 수정되는 것입니다.

마찬가지죠. 다함께가 주최하는 포럼의 데이터에 대해 <레프트21> 관리자는 신경쓸 필요가 없습니다. 그 쪽에서 포럼 내용을 갱신하면 <레프트21> 쪽에서도 갱신되니까요. 그 쪽에서 공개 제공하는 데이터(RSS)를 사용하기 때문에 가능한 일입니다.

이런 방식으로 자료를 관리하고 일을 처리하면 일을 아주 효율적으로 처리할 수 잇는 것이죠.

마치며

이렇게, 포럼 슬라이드 하나를 만들 때도 신경쓸 일이 많이 있습니다.

이렇게 신경을 쓰는 이유는 간단합니다. 이런 것들 하나하나가 쌓여서 웹사이트 전반을 구성하기 때문이죠. 그리고 현재의 판단이 효율적이냐 아니냐에 따라서, 이런 일이 하나하나 쌓였을 때 일이 효율적으로 처리될 수 있느냐 아니냐를 결정할 것이기 때문입니다.

예컨대, 포럼 정보를 눈으로 보고 수동으로 입력하는 식으로 제가 포럼 슬라이드를 만들었다면 앞으로 포럼 정보를 일일이 손으로 긁어 입력하느라 누군가는 고생해야 했을 것입니다.

슬라이드처리되게 하면서 원칙없이 ‘예뻐 보이니까’라는 기준으로 일을 처리했다면 아마도 웹사이트는 일관성 없이 따로노는 공간으로만 구성된 그런 곳이 될지도 모르는 일입니다.

그럼, 앞으로도 노력하는 웹마스터 되겠습니다. ^^