그림 자르기.
90년대 말, 큰 이미지를 그대로 웹사이트에 올리는 행동은 '초보 웹디자이너'로 치부되기 십상이었습니다.
좀 더 빠른 체감속도를 위해 그림파일의 확장자로 JPG보다는 컴퓨서브의 GIF를 사용해야 했고, 큰 이미지는 수고스럽게 포토샵을 켜고 잘게잘게 채를 써는 것을 덕목으로 여겼습니다. 이는 디자인을 마크업으로 재생산하는 과정 중 필수 과정의 하나였죠.
지금은 수고스럽게 채를 썰 이유가 없고, 외려 이런 행동은 비용을 들게 하는 비생산적 행위라고 널리 알려져있지만, 자바스크립트·CSS파일 사용도 이 패턴에 동일하게 적용된다는 사실을 개발자들은 가슴 깊이 느끼고 있을까요?
적어도 저는 인식 하고만 있었지 느끼고 있진 않았습니다. 그런데 오늘 늦은 저녁 회의 중에, 서버 개발자분께
"자바스크립트 파일 너무 많이 만들지 마세요. 안좋아요." 라는 밑도끝도 없는 이야기를 듣고 순식간에 아래 이야기들이 생각 났고, 이내 마음 속으로 정리를 하게 되었습니다.
왜 잘게 자르면 안돼?
오늘, 91.9Mhz 타블로의 '꿈꾸는 라디오'에서 이런 멘트가 있었는데요.
왜 답은 항상 바뀌는거야? 똑같은 문제인데 어렸을때랑 지금이랑 답이 왜 달라서 날 이렇게 힘들게 해?세상이 이런가 봅니다. 그래서 이전의 패턴은 지금 안티패턴이 되었습니다.
90년대 말에는 인터넷 속도가 시원찮았습니다. 56k, 28.8k모뎀 사용자 또한 고려 해야 했었고요. 그래서 브라우저의 http 연결갯수를 full로 활용하기 위해 이미지를 최대한 잘게 쪼개어, 동시에 여러개의 그림이 계단식 논과 밭 형태로 뿌려지게 함으로, 사용자들이 '오, 그림이 조금씩 보여지고 있어!' 라는 안도감을 느끼게 했습니다.
하지만 현재는 그럴 일이 없습니다. 한국의 인터넷은 이미 트루컬러의 bmp파일이라도 우적우적 씹을만한 충분한 속도를 지니고 있어 지난 세월의 패턴은 이슈 삼을만한 것들이 아니게 되었습니다. 게다가 그런 행동들은 다음과 같은 추가 비용을 가져다 줍니다 :
- 용량이 더 커진다.
파일 헤더, 문서 정보 따위의 주석 등으로 인해 '하나의 파일'일 때 보다 더 많은 용량을 가지게 합니다.
- http 요청수를 늘인다.
예를 들어 설명하자면, 집에서 마을버스를 타고 이마트에가서 이번 주말에 먹을 음식들을 한번에 사오면 되는데, 사과 하나, 우유 한팩, 라면 한 봉지, 과자 한상자를 하나 씩 살 때마다 이마트를 한번씩 따로 가며 비 생산적인 '마을버스 왕복비용'을 발생 시키게 되는 격입니다. 여기서 중요시하는 것은 왕복 거리가 아니고 요금을 내는 횟수입니다. 쓸데없는 http요청 갯수를 늘일 필요가 없습니다.
- 자연스레 DNS서버 조회를 늘인다.
이것은 위와 비슷하지만 또 다른 문제입니다.
대부분의 웹사이트들은 IP주소를 가진 서버가 URL을 사용하여 쉬운 연결명(도메인)으로 접속할 수 있도록 DNS를 사용합니다.
서버 <--------------> DNS서버<--------------> 사용자
여기서 마을버스 왕복비용과 비슷한 비용이 발생합니다. 바로 DNS사용 비용인데요, 브라우저에서 요청하는 주소를 DNS서버가 조회하는 데에 이 비용이 발생합니다. 브라우저는 호스트 이름을 조회하고 완료될 때까지 어느것도 다운받지 못한 채 꾹 참고 있습니다. 수많은 이미지들, 스크립트 파일들은 일렬로 줄을 선 채 자신의 차레를 기다리고 있는 것입니다.
그렇다면, 파일 하나로 뭉쳐서 쓰면 되나?
그럼 파일 하나만 만들어? javascript.js 라고 만들면 되나??-_-
그건 또 아닙니다. 하나의 페이지에서 전체 자바스크립트를 다운 받으면 불필요한 소스코드까지 다운받게 됩니다. 게다가 소스 관리도 버거워지죠. 이건 뭥미...
그럼 어쩌라고-_-
일단 가장 기본적인건 적당히 효율적으로 나누어 쓰는 것입니다. 반복되는 서버페이지를 돕는 스크립트를 뭉쳐 파일을 만들어, 브라우저 캐시의 효율성을 극대화 시키는거죠.
거기에 더하여, 웹사이트 최적화 기법에서 밝히는, DOM스크립트를 이용하여 동적으로 css나 자바스크립트를 브라우져에 뿌리거나 하는 작업으로 90년대 말, 사용자들이 그림자르기에서 느끼던 '체감속도 효과'를 발휘할 수 있습니다.
쓰고보니 집에 오면서 읽었던 책의 내용이 많이 녹아 있네요.
쉽고 모두 알고 있는 작은 부분에서도, 아는 것과 느끼는 것의 차이로 다른 결과물을 만들게 됩니다.
또한 중요한 것은, 좋은 패턴을 늘여나가는 것도 좋지만 안티패턴을 줄여나가는 것 같습니다.
그런데 이렇게 이클립스에서 Aptana 플러그인 설치 후 사용 중 "java.lang.OutOfMemoryError: permGen space " 경고 에러와 함께 모든 게 안드로메다로 날아가는 현상을 몇 번 겪게 되었습니다-_-;;
무슨 일인가 찾아보니 aptana가 뭔가 PermGen 영역 메모리를 많이 사용해서 이클립스가 뻗어버리는 현상으로 보였습니다.
해결방법은 단순 합니다. PermGen 메모리 영역을 넓혀주면 되는 것인데요,
제 경우엔 eclipse.ini 파일에 다음과 같이 추가함으로 해결 되었습니다.
-XX:PermSize=128M
-XX:MaxPermSize=512M
이제 에러는 없어지고 코딩은 끊기지 않습니다.
그리고 저는 이 3가지 주소 중에 3번만 쓰고 있는데요, 1,2번을(특히 2번)으로 접속하는 분을 그대로 두면 나중에 검색결과나 사이트 유지 관리가 어려워지는 생기고, 특히 URL단위로 일이나 결과물을 내는것들에게 같은내용이지만 다른 URL로 골치를 줄 수 있어, 원치않는 도메인으로 접속하는 경우 원하는 도메인으로 접속하고, 도메인 이후의 스트링을 이어서 원하는 곳으로 이동시켜주는 스크립트를 만들어 봤습니다.
http://nauru.tistory.com ┐
http://www.songsl.net ┼────redirect─────→http://songsl.net
http://songsl.net ┘
정규식을 아직 잘 몰라서 좀 우겨넣다보니;;;;;;;;
몇줄 안되는 코드지만 지저분합니다 --;;;; 9번라인만 본인의 것으로 수정하여 스킨 상단에 첨부하면 됩니다.
사이트에 적용 되었으니 아래의 주소 모두 하나의 도메인으로 연결 됩니다.
http://www.songsl.net/category/자바스크립트
http://nauru.tistory.com/tag/javascript
뉴욕에 이제 2년째 머물러있는 한 형이 말했습니다.
"승렬아 여기 오니까 sibling이라는 단어 디게 많이 쓴다. 너 sibling이 몇이야, 뭐 이렇게 쓰는데..."
아시겠지만 저 뜻은 너는 형제가 몇이냐 뭐 자매가 몇이나 되냐 뭐 이런 얘기를 하는거죠.
음, 각설하고. 제가 며칠전에 여기 nextSibling 때문에 애를 먹은적이 있었는데요, 내가 이정도도 모르나 고작이게 이러나 하면서 많이 쪽팔렸지만 암튼 꺼내어 볼게요.
시작은 참 단순한 태그조합에서였어요.
<dd>isn't she lovely</dd>
<dd>don't ask me that</dd>
여기 <dd>태그에 접근하고 다음 <dd>태그로 이동하려는데 .nextSibling을 하면되는데 IE에선 넘어가는데 FF에선 안넘어갔던거죠.
아니 이게 뭔가, dd의 다음형제는 dd인건데 왜 FF는 형제지간을 인정하지 않는거지?, 로 시작된 삽질은 긴긴시간동안 aptana보다 firebug를 더 쳐다보게 만들었고, 이윽고 몇가지 단서를 얻게 되었습니다.
잉? 왠 텍스트가?
첫번째 <dd>태그에서 nextSibling을 해서 위치잡은 곳이 element가 아니고 textnode라는 걸 확인한 후, 문제는 좀 더 깊은 수렁으로 빠지게 되었어요. nodeType도 보니까 분명히 text인거에요(1이던가?). 아니 <dd>와 <dd>사이엔 아무것도 없는데 크흑 하는 생각하면서, nextSibling안써도 되게 프로그램 구조를 바꿔버릴까-_-; 하는 생각까지 하게 만들었어요.
근데 firebug에 캣치된 뭔가를 발견했어요. 아니 지금 위치한 곳(textnode)의 nextSibling이 element 인거잖아?
(그럼혹시?)
라고 생각하며 처음<dd>태그에서 nextSibling.nextSibling을 했어요.
맙소사. 다음 <dd>로 접근 하더군요
그래서 쪽팔리긴 하지만 일단
a = IE라면 ? 엘리먼트.nextSibling : 엘리먼트.nextSibling.nextSibling;
이라고 해놓고 넘어가버렸어요.
아니 IE는 못보는 숨겨진 형제가 하나 더 있다는 사실에 마음이 싱숭했지만 가족문제를 어디가서 꺼낼수도없고 전전긍긍하며 며칠을 그냥 보내며, '임금님귀는 당나귀귀'의 대나무숲 역할을 하는 제 일상블로그에 관련된 글을 썼는데, 회사분이 리플로 저에게 이 글을 보여주셨어요.
http://developer.mozilla.org/en/docs/DOM:element.nextSibling
맙소사 Notes를 보니.
게다가 http://developer.mozilla.org/en/docs/Whitespace_in_the_DOM
마지막으로 http://forums.mozilla.or.kr/viewtopic.php?f=9&t=5638&start=0&st=0&sk=t&sd=a !!
FF는 동수를 볼 수 있었던 거죠!!!!!
(베컴은 동수 알아보넹...IE보다 낫다)
이상 조용한 주말, 갑자기 생각 난 nextSibling의 추억이었습니다.
끝.
