작년에 이어 올해도 KTH에서 H3 컨퍼런스를 한다. 어제 H3 2012 사이트를 오픈했다. 사이트 제작에 참여를 했는데 사이트 규모는 작지만 여러가지 새로운 기술을 시도할 수 있어서 재미있었다.

뭔가 새로운 시도와 재미있는 기능을 선보이고 싶다는 부담감이 있었다. 결과가 아주 흡족하지는 않지만 너무 나대지 않고 절제된 인터랙션을 구현한데에는 어느정도 만족하고 있다.

컨퍼런스 컨셉이 밴드여서 음악을 넣고 싶었는데 음원이 문제였다. 원래는 존경하는 밴드들의 음악을 샘플링하려고 했으나 저작권때문에 포기하고 개러지밴드의 루프가 상업적인 용도로도 사용이 가능하다는 것을 발견하고 이를 사용했다. 개별 악기 루프를 직접 시퀀싱하는 것 보다 제공되는 샘플 트랙을 사용하는게 훨씬 퀄리티가 높았다. 인터랙션과 음악의 싱크는 토비님이 말했다시피 수동이다. 노가다성 작업이기는 한데 예전 경험을 살려서 별로 어렵지 않게 했다. 생각보다 시간이 많이 걸리지 않는다.

반응형 웹디자인도 시도를 했는데 이번에는 조금 다른 방법으로 시험을 해봤다. IE8을 지원하고 싶었다. 모바일 우선전략으로 접근을 하면 IE8은 미디어쿼리를 지원하지 않기 때문에 모바일 페이지가 나오게 된다. 그래서 JS를 쓰기도하고 나같은 경우는 IECC를 사용하기도 한다. 이번에는 반대로 미디어쿼리로 디자인을 걷어내는 방식으로 작업을 해봤다. 좁은 화면 디자인을 별도로 진행하지 않았던 것도 큰 이유였다. 결과는 그다지 좋지 않았다. 많은 코드양을 미디어쿼리로 덮어쓰다보니 덮어쓰는 코드의 양도 같이 많아지고 더 복잡해졌다. 캐스캐이딩 우선순위 관리에도 문제가 발생했다. 결국 점진적 향상(progressive enhancement)이 답이라는 사실만 다시 한 번 확인할 수 있었다.

CSS animation도 십분 활용해봤다. CSS animation은 정말...제조사 접두사의 향연이다. 아마 제조사 접두사를 처음 제안한 사람은 이런 결과를 불러올 줄 몰랐을 것이다. 결국 코드관리가 안되어서 제조사 접두사를 생성하는 스크립트를 만들어서 사용했다. 서브라임 텍스트 2의 여러줄 편집기능이 정말 한몫했다.

각각의 실험에대해서도 하고 싶은말과 느낀점이 많다. 기회되면 차차 정리해 보겠다.