프로젝트 회고 :: lodoss war online Teaser

최근에 또 하나의 작업을 끝마쳤다. 프로젝트라 하긴 좀 뭐하고.. 근래에 했던 것과는 좀 성격이 많이 다른 녀석을 작업하였다.

이 녀석은 다음과 같은 특징을 가지고 있다.

1. 자바스크립트(라고 쓰고 jQuery) 애니메이션.
2. 개발이 붙지 않은 순수 html : 즉, 운영도 순수 하드코딩이다. 물론 이메일 문의받는 부분에 대한 개발은 붙어 있다.
3. 마우스 휠 액션을 따르는 페이지
4. 정말 하기 싫었던 작업.

이 전에 작업했던 프로젝트의 경우 마음이 잘 맞는 개발자와 뚝딱뚝딱 잘 진행하게 되었다. 역시나 당시에도 처음해보는 꽤 많은 양의 자바스크립트를 작성(물론 내 경력에 비하면 늦은..)해 보게 되었고 결과적으로 좋은 결과로 이어졌으며 이건 계속 붙잡고 기능개선등을 할 의욕이 있었다. 그 결과는 작업 속도로 나타났으며 나 스스로도 놀랍게 계획했었던 기간보다 짧은 시간으로 작업을 끝낼 수 있었다.

이번 프로젝트의 경우는 전 작업에 비해 스크립트의 양은 거의 3배 이상 늘어났지만 (확인해보니 거의 뭐 900줄 가까운..) 사용된 기술은 대부분 콜백과 jQuery의 힘을 빌린 스타일링 기법이다. 역시나 모듈 패턴을 사용해보았으며 이런 저런 것들을 알게 되었으나 결정적으로 4번의 문제로 인해 예정 일정을 지키지 못하고 초과하는 문제가 생겼었다.

이번 프로젝트의 특징은.. 마우스 휠 액션과 callback을 통하는 순차적 애니메이션 적용등.. 사실 말이 좋아서 순차적이지 디자이너가 원하는 타이밍이 callback으로 맞추기 힘든 부분이 많아서  callback 호출 타이밍을 잡는데 아주 많은 애를 먹었다. 그러면서 return 에 대한 확실한 개념이 없이 모듈패턴을 들이대다 보니 데이터가 꼬이는 문제도 조금 있었다.

더불어 이 작업은 전역변수의 혜택을 톡톡히 본 케이스이다. 보통 모듈패턴을 쓰는 경우는 전역공간의 오염을 방지하고자 함이 주 이유인데 이번엔 그와 반대되게 전역으로 꼭 잡고가야 하는 내용들이 있어서 아주 유용하게 사용할 수 있었다.
페이지와 캐릭터를 카운트하는데 이들을 넘기는데 마우스 휠 액션과 클릭 액션을 동시에 수용할 수 있고 무엇보다 순차적 증감이 아닌 클릭 이벤트의 특성상 점프(?)를 뛸 수 있는 상황에서도 하나의 큰 전역변수를 잡고가니 페이지나 캐릭터의 순서가 순차적으로 증가하던 점프를 뛰며 증가하던 아주 유연하게 대체할 수 있었던 것이다. 다음엔 또 어떤 프로젝트를 할지는 모르겠으나 모듈패턴을 사용할 때 특정 변수들을 계속 타고 넘기는 return에 대한 개념을 확실히 챙겨야 할 것 같다.

위에는 쓰지 못했는데 이 작업엔 드래그 액션도 구현하는 내용이 있었다. 휠 액션과 더불어 드래그 액션까지.. 결국 plug-in의 축제의 장이 되었던 것이다. 드래그 액션의 경우 jQuery UI를 썼는데 드래그 액션 하나 구현하고자 저렇게 큰 라이브러리를 불러들이는게 좀 그랬다. 처음 사용해보는 jQuery UI였는데 그중에서도 드래그 관련 API를 쓰게 되었다. 이 부분은 나중에 따로 설명하고자 하는데 느낌은 굉장히 좋았고 유일하게 생각하는데로 구현이 된 부분이다. (jQuery는 진짜 문서화가 좀 짱인 듯)

아직도 손봐야하고 추가해야하는 부분이 남아있는데 부지런히 잘 보살펴보도록 해야겠다. 이 프로젝트를 하며 접하게 된 callback 기반의 함수와 함수 중복실행 방지 등에 대한 내용은 별도 포스팅으로 다뤄보고자 한다. 연차에 비해 자바스크립트에 늦게 뛰어든 게으른 개발자가 쓰는 글이니 고수님들은 패스부탁드린다.