범용 모듈을 구현할 때 주의해야할 점

발생일: 2011.04.25

문제:
얼마 전에 친구가 운영하는 쇼핑몰에 작은 돋보기 모듈을 만들어줬다.

구글 애드센스나 페이스북의 '좋아요' 버튼 같이 스크립트로 엘리먼트를 만들고 작동시키는 방식이었는데,
작업해주고 난 후 몇 가지 배운 점이 있어 메모해둔다.

해결책:
1. 배포되는 사이트마다 인코딩이 다를 수 있기 때문에 문자열은 유니코드로 작성한다.
스크립트 내에 한글 메세지를 출력하는 부분이 있었는데 쇼핑몰에서 돌려보니 제대로 출력되지 않았다.
작업 환경의 캐릭터셋은 utf-8 이었지만, 친구네 쇼핑몰은 euc-kr 이었기 때문.
<script> 태그의 charset 을 utf-8 로 설정해주는 방법도 있었지만,
여기서는 문자열을 유니코드로 작성하는 방법을 택했다. (친구가 붙여넣기 더 간단했기 때문이다.)

2. document.write로 그리는 것보다는 설정 기반으로 로드하는 게 더 유연할 수 있다.
처음엔 구글 애드센스가 그리는 방법을 롤모델로 해서,
스크립트를 본문에 삽입하고 해당 스크립트가 실행될 때 엘리먼트를 바로 문서에 그리게(document.write) 했다.
그리고 나서 바로 다음 스크립트 태그에서 모듈을 초기화한다. 물론 설정 정보는 파라미터로 전달된다.
페이지가 그려지면서 스크립트가 실행되기 때문에 로딩이 약간 늦은 감도 있었지만, 문제 없이 실행됐고 작동도 잘 됐다.
헌데, 안타깝게도 친구네 쇼핑몰은 본문에 스크립트 태그를 넣을 수 없단다. -_-a;
대안으로, 모듈을 추가할 부분에 태그로 설정 정보를 넣고, 페이지가 로드되면 설정 엘리먼트를 찾아서 그 영역에 모듈을 그리게 수정했다. 페북의 좋아요 버튼이 이런 식으로 구현되어 있는 걸로 알고 있다. 페북에서는 커스텀 태그로 설정 정보를 작성하는 걸 보고 욕심이 났지만, 일단 여기서는 그냥 <div>에 박아 넣었다. (일찍 자기 위한 최선의 방법..)
어쩔 수 없이 구현한 부분이었는데, 작업하고 나니 이 방법이 처음 방법보다 훨씬 나았다.
페이지 로드도 빠르고, 일단 설정 정보를 가지고 엘리먼트를 조작하기가 훨씬 유연해졌다. 확장하기도 쉬워졌고, 좋은 걸~

3. 일반인은 자바스크립트나 HTML 태그를 잘 이해하지 못한다.
스크립트로 모듈 설정 정보를 작성하는 것보다 태그로 작성하는 게 일반인이 이해하기는 훠-어얼씬 쉽다.
아마 페북이 설정 정보를 커스텀 태그로 작성하게 한 것 중에도 이런 이유가 있지 않았을까.. 라고 추측을 해본다.
일단 친구는, javascript 코드를 잘 이해하지 못했다. JSON 이나 배열 형태도 어려워했다.
사용하기 최대한 쉽게 가자.

4. DTD가 제대로 설정되어 있는 사이트가 많지 않다.
친구네 사이트에는 DTD가 제대로 설정되어 있지 않다.
  "페이지 맨 위에, 그러니까 head 태그 맨 위에 아까 복사한 거(DTD 문구)를 붙여 넣어봐~~"
DTD 문구를 추가하는데 꽤 오랜 시간이 걸렸다. 이제 예쁘게 보이겠지.
그런데 아뿔싸, 쇼핑몰 프로그램에서 로봇 관련 메타 태그를 사용자가 설정할 수 있는 헤더 부분 레이아웃보다 더 위에 박아버린다. DTD 적용 안된다... (지금도 안됐다.)
쿼크 모드로 다시 손봐야했다.


요 정도, 다음에 비슷한 작업을 하게 되면 염두해두자.