Scott Boyce씨가 deckmyplace.com에 대한 흥미로운 이야기를 쓰셨습니다.
사용자 삽입 이미지
그 사이트는 원래는 Flash 사이트로서 설계되었지만, 실제 작업이 진행될 때에는 Flash 대신 HTML을 사용하라고 했다고 합니다. 그는 그가 구현할 수 있는 컴포넌트가 얼마나 되는지 살펴봤어야 했습니다. 해보니까 상당히 많은 양 전부였다고 합니다.

우리는 Scott씨에게 사이트를 제작한 그의 경험에 대해 자세히 들려달라고 했습니다:
Flash를 사용하지 말라는 지시가 저에게 왔을 때는 재설계할 시간이 없었습니다. 제 목표는 Flash의 시각적 부분과 구분할 수 없게 하는 것이었지, 유효한 마크업, 점진적 개선법, 508 섹션 접근성 등은 아니었습니다.
MooTools
예전에 MooTools(와 초기의 moo.fx)를 인터페이스 엘리먼트에 애니메이션 효과를 주려고 사용해 본 적이 있었습니다. 하지만 그것(혹은 다른 JS 라이브러리)을 이용해 전체 사이트를 만들어 본 적은 없었습니다. 게다가 포지셔닝이 무척 중요한 사이트를 작성해본 적도 없어서 CSS도 도전이었습니다.

저는 수많은 Mootools의 내장 Assets를 사용했습니다: AJAX, 툴팁, 슬라이더
이쁜 페이지 전환효과
페이지 전환은 효과들을 초합해 만들었습니다. 기본적으로 세 개의 레이어가 있습니다: 프레임, 컨텐트, (보통은 감춰진) 배경. 사용자가 새 페이지로 이동하면 다음과 같은 일이 일어납니다:

1. 배경이 현재 페이지의 흐린 스크린샷으로 바뀐다(즉시 바뀜. 이미지는 미리 로딩되어있다).
2. 컨텐트 영역의 투명도가 증가하면서, 흐린 배경 이미지가 드러난다(300 ms).
3. 새 컨텐트가 AJAX를 통해 로딩된다(각 컨텐트 페이지는 1KB 정도이다; 라운지는 4KB).
4. 컨텐트 영역의 투명도가 다시 감소하여 불투명 상태로 된다(300ms).
개발 프로세스
컨텐트는 중복 컨텐트의 필요를 제거하기 위해 PHP include를 사용해서 HTML로 가장 먼저 놓아졌습니다.(부수적으로, 진입폼과 유효성검사도 PHP로 작성되었습니다.) 몇 개의 브라우저(Firefox, IE6, Safari, Opera, Lynx, IE6+, JAWS)에서 표현이나 기능면에서 문제가 없음에 만족하고 나서, 저는 이벤트 리스너를 작성하기 시작했습니다.

JavaScript가 작성되고 나면, 우리는 테스트를 다시 했습니다. 결국, 우리가 해야할 일은 배경 음악과 몇 개의 두번째 애니메이션(회전) 뿐이었습니다. 여전히, 많은 사람들은 그것이 Flash이겠거니 하고 있습니다.

Firefox용의 Firebug, YSlow 그리고 Web Developer toolbar는 개발기간동안 값을 헤아릴 수 없을만큼 귀한 도구였습니다.
상태
  • 전체 JavaScript는 59KB (51KB는 Mootools + 라이브러리 8KB)
  • CSS 30.9KB (조건절을 통한 MSIE용 CSS 4.7KB 포함)
  • 전체 사이트 2.59MB (이미지 2.11MB)

from Frank Sinatra, Flash, and Ajax: Deckmyplace.com
Posted by 행복한고니 트랙백 1 : 댓글 0

댓글을 달아 주세요