` 안에 `
`가 세 개 들어가야 하는데, 원래는 한 단계씩 계단식으로 들여써야 하는데 전부 첫 번째 열에 붙어 있어서 누가 누구의 부모인지 구분이 안 돼요. 이때 포맷터 도구를 사용하면 한 번에 들여쓰기를 자동으로 추가해서 중첩 관계가 한눈에 보여요. 어떤 태그가 어떤 태그의 부모인지, 어떤 태그가 닫혀야 하는데 안 닫혔는지 바로 알 수 있어서 버그 수정 효율이 두 배로 올라가요.
그리고 이 도구는 단순히 코드를 '예쁘게'만 해주는 게 아니에요. 태그가 제대로 닫혔는지도 검사해줘요. 때로는 내용을 많이 작성하다가 `
`를 하나 빠뜨리면, 브라우저가 어찌저찌 렌더링할 수는 있어도 레이아웃이 완전히 어긋나버려요. 포맷터를 돌리면 자동으로 닫는 태그를 보완해주거나 어디가 끊겼는지 빨간색으로 표시해줘요. 이렇게 절약되는 건 시간뿐만 아니라, 화면을 보며 머리를 긁적이는 답답함도 줄여줘요.
사용법도 정말 간단해서, 거창한 소프트웨어를 설치할 필요도 없어요. 그냥 브라우저를 열고 'HTML 포맷터 온라인'을 검색하면 수두룩하게 나와요. 아무거나 클릭해서 들어가면 왼쪽에 큰 텍스트 상자가 있고, 죽처럼 된 코드를 통째로 붙여넣은 다음 '포맷' 버튼을 누르면 돼요. 눈 깜짝할 사이에 오른쪽이나 아래에 가지런히 정렬된 새 코드가 나와요. 그걸 복사해서 다시 붙여넣으면 끝이에요. 전체 과정이 손이 빠르면 3분도 안 걸리고, 30초면 충분할 정도예요.
물론, 어떤 분들은 '내가 쓰는 편집기(예: VS Code)에 포맷 기능이 내장되어 있어서 단축키만 누르면 되잖아'라고 말할 수도 있어요. 그게 당연히 더 좋죠. 하지만 많은 경우, 예를 들어 핸드폰으로 튜토리얼을 보거나, 임시로 웹페이지를 수정하거나, 동료가 문서에 있는 코드 조각을 보내줬을 때 편집기를 켜지 않은 상황이라면 온라인 도구가 가장 편리한 선택이에요. 게다가 이런 도구들은 대부분 무료이고, 회원가입도 필요 없이 바로 열어서 쓰고, 다 쓰면 닫으면 되니 깔끔하고 간편해요.
그리고 작은 팁 하나. 일부 포맷터는 코드에서 불필요한 빈 줄이나 줄 끝 공백을 정리해줘서 파일 크기를 줄여주기도 해요. 요즘은 네트워크가 빨라서 몇 KB는 신경 쓰지 않아도 되지만, 코드가 깨끗하면 보기에도 마음이 편하잖아요, 그렇죠? 특히 프런트엔드 개발자라면 매일 HTML, CSS를 다루는데, 깔끔한 코드 구조는 오후의 기분에 직접적인 영향을 줘요.
마지막으로 한 가지 당부할게요. 포맷터 도구는 만능이 아니에요. 이건 단순히 배열과 기본 검사만 해주지, 논리적 오류를 고쳐주지는 않아요. 예를 들어 `` 태그의 `href`를 잘못 적었다면, 그건 신경 쓰지 않아요. 하지만 '정리 정돈'이라는 목표에 있어서는 분명 아주 쓸모 있는 좋은 도구예요. 다음에 또 그런 죽 같은 코드를 만나면, 억지로 마시지 말고 바로 도구를 사용하세요. 3분이면 깔끔하게 정리되니 얼마나 좋아요.
기억하세요. 좋은 코드는 단지 실행되는 것뿐만 아니라, 사람이 읽을 수 있어야 해요. 맞는 말이죠?
15 조회 ·
3분