underfront.com

jQuery로 Key Visual 만들기

정말 오랫만에 글을 쓰는 것 같습니다^^ 최근 회사에서 운영하는 사이트의 메인 Flash를 jQuery로 변환하는 작업을 진행 했습니다. 해당 사이트에 메인 Key Visual이 유일한 Flash 였죠. 덕분에 iPad등에서는 메인이 뻥~ 뚫려 있어서 jQuery로 변환 해 보았습니다.

 

Creartist.com 메인 키비주얼

작업에 앞서 기존의 Flash에 포함된 기능과 HTML+jQuery로 변환 하였을때 필요한 기능등을 간단히 정리해 보았습니다.

  1. 각각 5개의 섹션이 있고 1개 섹션은 메인으로 구성
  2. 메인을 제외한 각각 섹션별로 사진이 순차적으로 전환, 섹션은 자동으로 전환 안 됨.
  3. 섹션의 사진은 하단에 Navigator가 존재하고 랜덤으로 썸네일을 보여줌
  4. 해당 사진으로 전환되었을 경우 썸네일은 숨겨줌
  5. 메인 섹션에서 썸네일을 클릭하였을 경우 해당 섹션으로 이동 후 사진 전환
  6. 특정 섹션 사진들은 아티스트 이름과 사진이름에 링크 생성
  7. 각각 사진들의 자연스러운 전환 효과를 위해 영역 어딘가에서 사진을 통채로 미리 다운로드

일단은 이정도 인 것 같네요. 하지만 말은 쉽죠.. 각각 기능들을 정리하고 실제로 구현하는데에는 엄청 애 먹었던 것 같습니다. 그리고, 제 아무리 Javascript라도 코드 양이 늘어나면서 웹브라우저에서 돌아가는게 컴퓨터 사양마다 조금씩 차이가 나더라구요.

특히 Internet Explorer에서는 썸네일 전환 시 PNG의 그림자 때문에 검은색으로 나타났다가 사라지는 등 아직 해결해야 할 문제가 남아 있습니다. 역시.. Javascript의 길은 멀고도 험난하군요..^^;

시간이 좀 된다면 요 녀석에 대해 자세히 다뤄보도록 하겠습니다. 키 비주얼은 http://www.creartist.com에서 보실 수 있습니다.

Leave a Reply

Your email address will not be published. Required fields are marked *

*