요즘 봄싹에서 개발을 하다보니(참... 봄싹은 개발 업체가 아니라 스터디입니다.) 재밌는 것이 있는데, 여러 툴 사용법을 익힐 수 있다는 겁니다. 파이어버그가 좋은 줄은 알고 있었지만, 사용법을 제대로 익혀본적이 없어서 어떻게 써먹는 줄 몰랐는데.. 이번 기회에 유용한 기술을 몇 개 습득했습니다.

1. 레이아웃 미리 조정해보기

레이아웃은 float등으로 띄우고 나서 margin, padding, border로 조정할 수 있는데 border야 뭐.. 그렇다 치고.. margin이랑 padding을 주로 사용해서 레이아웃을 조정합니다. 이 때, JSP나 CSS를 조금 바꾼 담에 브라우저에서 릴로딩해서 보고, 다시 또 수정해서 다시 브라우저가서 릴로딩 하고.. 이런 일을 반복하기 일수인데, 파이어버그를 써서 미리 화면이 어떻게 바뀌는지 조정해서 적당한 값을 알아낼 수 있습니다.


오른쪽 아래에 보이는 레이아웃 창에서 숫자를 클릭해서 조정하면 곧바로 화면에 띄워져 있는 박스들의 위치가 바뀝니다. 캬~~ 멋져요 멋져.

2. 자바스크립트 미리 실행해보기


두번째로 유용하게 쓰고 있는 기능은 '콘솔' 너무 막연해서 뭔지 몰랐는데 여개다가 자바스크립트를 입력해서 미리 실행해 볼 수 있었습니다. 위 화면에서는 복잡한 selection을 하는 제이쿼리를 미리 실험해본 화면입니다.

3. net

왔다 갔다 하는 요청/응답 헤더와 내용을 볼 수 있어서 유용합니다. 스샷은 생략~

IE 8부터는 파이어버그 같은 프로그램이 포함되어 있다던데.. 어떨런지 모르겠습니다. 수수료만 안 붙는다면 10달러 정도 기부하고 싶어지네요.