어떤 웹디자인이든 제이쿼리를 사용하기 마련입니다. 개발자가 만들어놓은 제이쿼리 플러그인을 웹사이트에 적용하기 위해서 코드를 입력하는데 제대로 입력했다고 생각하지만 오류가 나서 어떤 부분에서 잘못됐는지 찾기가 어렵습니다. 이럴때는 웹브라우저에 포함된 개발자 도구를 이용해서 요소 검사를 하고 분석하면 바로 찾을 수 있습니다.
워드프레스 쇼핑몰 만들기 책으로 작업 중 독자 분이 이런 오류를 찾을 수 없어서 요청을 했는데 찾는 방법을 알아보겠습니다.
우선 HTML과 CSS 가 제대로 입력이 됐는지 확인합니다. 요소에 오른쪽 마우스 클릭하고 나오는 메뉴에서 요소검사를 클릭하면 하단의 좌측에 HTML 부분이 나타나고 우측에 CSS가 보입니다. img 태그의 src url에 마우스를 올리면 이미지도 나타납니다. 제대로 된 것을 확인하고 Resources 탭을 선택합니다.
Resources 화면에 처음 들어오면 좌측 패널에 Frames 폴더가 닫혀있는데 삼각형 아이콘을 클릭하면 트리구조가 펼쳐집니다. 현재 요소검사를 하고 있는 웹 페이지에서 사용되고 있는 자원(Resources)이 나열됩니다. 우선 처음에 웹폰트가 있고 그 다음으로 이미지가 있습니다. 이미지에 빨간색의 숫자가 있는 것은 HTML이나 CSS에서 이미지 링크는 있지만 실제의 이미지 파일이 삽입되지 않은 경우를 말합니다. 아래로 내려서 자바스크립트를 보면 빨간색의 숫자가 보입니다. 에러의 숫자입니다.
해당 파일을 클릭해서 우측의 화면을 보면 어떤 부분에서 에러가 있는지 알 수 있습니다. Syntax 에러인데 코드를 잘못 입력해서 그렇습니다. 그러면 이 파일을 텍스트 편집기에 열고 확인해봅니다.
웹브라우저에서는 구분이 잘 안되지만 좋은 기능을 가진 텍스트 에디터에서는 바로 눈에 띕니다. hasClass와 같은 제이쿼리 메소드는 흰색으로 돼있는데 datepicker라는 메소드는 그대로 노란색입니다. 이부분에서 뭐가 잘못됐는지 보면, 앞에 선택자를 감싸는 따옴표(.datepicker')가 다릅니다. 꼬리가 달린 따옴표인데 다른 따옴표와 생김새가 다르죠. 보통 키보드로 입력하면 이런 현상이 발생하지 않는데 다른 소스에서 복사하면 이런 현상이 발생합니다. 제공된 소스코드에는 이런 것이 없는데 어찌된 일인지 모르겠습니다. 어쨋든 다음과 같이 따옴표를 수정하면 완료입니다.
수정하고나니 다른 글자들의 색상이 변경됩니다. 제대로된 코딩이라는 의미죠. 텍스트 편집기마다 여러가지 스킨이 있어서 가장 좋은 스킨을 사용하는 것이 좋습니다.
서브라임 텍스트 편집기는 여러 가지 스킨을 제공하고 있는데 문법 강조(Syntax Highlight)가 분명한 스킨을 사용하는 것이 좋습니다.
이처럼 웹디자인은 코드에서 점 하나만 다르게 입력해도 제대로 작동하지 않습니다. 항상 주의해서 코드를 입력하는 습관을 길러야 합니다. 웹개발은 속도가 아니라 안전이 최우선입니다. 한곳에서 잘못되면 어디서 어떻게 찾아야 할지 처음부터 다시 해야 할 만큼 큰 문제가 발생합니다. 그 문제 찾는데 몇 시간이 걸리기도 합니다. 항상 주의 깊게 관찰하고 지금 뭘 하고 있는지 파악하면서 해야겠죠. 코드 빠르게 입력한다고 자랑할 것 못됩니다. 정확하게 입력하는 것이 가장 빠른 웹개발입니다.
