애플 발표회가 막 끝났을 때, 우리 프론트엔드 그룹에서는 원래 iPhone 17의 색상과 카메라에 대해 이야기하고 있었는데, 누군가 갑자기 스크린샷을 하나 던졌어. 거기에는 깔끔하게 포맷팅된 HTML 코드가 있었고, 그 순간 그룹 전체가 주제를 바꿔서 이 HTML 포맷팅 도구에 대해 이야기하기 시작했어. 솔직히 말하면, 이 물건은 평소에도 다들 쓰고 있었지만, 그날은 유난히 열심히 이야기했어. 아마 발표회를 보느라 지쳐서 핑계를 찾아 딴짓을 한 거겠지.
사건은 이랬어. 그룹에 한 친구가 외주를 받았는데, 상대방이 예전 시스템에서 내보낸 HTML 파일을 잔뜩 줬어. 그 코드는 정말 엉망이었어. 태그 중첩은 엉망진창이고, 속성 따옴표는 있을 때도 있고 없을 때도 있고, 들여쓰기는 운에 맡긴 듯해서 어떤 곳은 일곱여덟 칸이 비어 있고, 어떤 곳은 전부 붙어 있었어. 그는 파일을 열었을 때 마치 고양이가 가지고 놀다 만 실뭉치를 보는 기분이었다고 했어. 원래는 수동으로 정리하려고 했는데, 30분을 고쳐도 페이지 하나 겨우 끝냈고, 눈이 다 빠질 지경이었어. 나중에 누군가 HTML 포맷팅 도구를 하나 보내줬고, 그는 코드를 붙여넣고 버튼 한 번 눌렀더니, 코드 전체가 즉시 깔끔해졌어. 줄 바꿈할 곳은 줄 바꿈되고, 들여쓰기할 곳은 들여쓰기되고, 태그 계층이 한눈에 들어왔어. 그는 그 순간의 기분이 발표회를 본 것보다 더 시원했다고 했어.
사실 HTML 포맷팅이라는 건, 크게 대단한 것도 아니고 그렇다고 사소한 것도 아니야. 평소 코드를 작성할 때는 편집기에 보통 자체 포맷팅 기능이 있어서 별로 신경 쓰지 않을 수 있어. 하지만 정말로 남의 코드를 수정해야 하거나, 어딘가에서 압축된 HTML을 복사해왔을 때는 포맷팅 도구가 없으면 정말崩溃할 거야. 특히 한 줄로 압축된 HTML 같은 경우, 수천 개의 문자가 붙어 있어서 div의 닫는 태그를 찾으려고 해도 찾을 수 없고, 눈으로 한 줄 한 줄 훑어야 해서 효율이 끔찍하게 낮아.
그룹에서 누군가는 어떤 포맷팅 도구는 꽤 세심하게 만들어졌다고 언급했어. 예를 들어 들여쓰기를 공백으로 할지 Tab으로 할지 선택할 수 있고, 공백이면 2개인지 4개인지, 속성을 줄 바꿈할지, 빈 태그를 자체 닫기할지, 심지어 대소문자까지 통일할 수 있어. 이런 옵션들은 별것 아닌 것처럼 보이지만, 실제로 사용할 때는 꽤 많은 수고를 덜어줘. 예를 들어 팀에 누군가는 Tab을 습관적으로 쓰고, 누군가는 공백을 습관적으로 쓰면, 코드를 제출한 후 형식이 충돌하는데, 이때 모두 한 번씩 포맷팅 도구를 돌리면 다들 편해져.
또 다른 많이 이야기된 점은 일부 온라인 HTML 포맷팅 도구는 URL을 직접 붙여넣거나 파일을 업로드할 수 있고, 심지어 전체 프로젝트의 여러 파일을 처리할 수 있다는 거야. 예전 코드를 대량으로 정리해야 하는 상황에서는 이 기능이 매우 실용적이야. 파일마다 수동으로 복사 붙여넣기 할 필요 없이, 절약한 시간으로 발표회 뉴스를 몇 개 더 볼 수 있어.
하지만 어떤 그룹 멤버는 온라인 도구를 사용할 때 주의해야 한다고 알려줬어. 어떤 도구는 코드를 서버에 업로드하는데, 회사 내부 프로젝트나 민감한 정보가 포함된 코드라면 로컬 포맷팅 도구나 편집기에 내장된 플러그인을 사용하는 게 좋아. 결국 코드 보안이라는 건, 항상 조심하는 게 나쁘지 않으니까.
이야기 끝에 모두는 거의 하나의 공감대에 도달했어: HTML 포맷팅 도구라는 건, 평소에는 생각나지 않을 수 있지만, 결정적인 순간에 정말로 생명을 구할 수 있어. 특히 발표회가 막 끝나서 다들 일찍 퇴근하고 싶어 하는 이런 때에는, 버튼 하나로 해결할 수 있는 일을 절대 수동으로 고생하지 마. 그룹에서 외주를 받은 그 친구는 나중에 그 도구를 즐겨찾기에 추가해서, 앞으로 일을 받으면 먼저 포맷팅하고 수정하면 훨씬 편할 거라고 했어.
그러니까 보다시피, 애플 발표회를 이야기하다가 결국 프론트엔드 도구 추천 현장이 되어버렸어. 그래도 괜찮아, 적어도 휴대폰 사양만 이야기하는 것보다는 훨씬 재미있으니까.