애플 발표회가 또 왔습니다. 프론트엔드 개발자들은 밤샘 코드 수정할 때 포맷팅을 잊지 마세요.
애플 발표회가 열리면 테크 업계는 명절 분위기입니다. 위챗 모멘트가 도배되고, 실시간 검색어를 휩쓸죠. 평소에 야채 가격만 신경 쓰던 이모까지 "그 새 폰 얼마예요?"라고 물을 정도니까요. 하지만 우리 프론트엔드 개발자에게 발표회는 또 다른 의미가 있습니다. 공식 웹사이트를 업데이트해야 하고, 특집 페이지를 런칭해야 하며, 사장님이 "애플 스타일로 한 버전 만들어줘"라고 한마디 하면, 얌전히 컴퓨터 앞에 앉아 새벽까지 코드와 씨름해야 합니다.
밤샘 코드 수정은 프론트엔드 개발자에게 너무 익숙한 일입니다. 옆에서 PM이 재촉하고, UI 디자이너가 18번째 버전의 시안을 보내고, 백엔드 API는 아직 연동도 안 됐는데, 욕을 하면서도 키보드를 두드립니다. 겨우 페이지를 거의 다 맞춰서 브라우저에서 보면 꽤 괜찮아 보입니다. 그런데 코드를 커밋하고 동료가 받아서 보면 레이아웃이 완전히 깨져 있습니다. 왜일까요? HTML을 작성할 때 게을렀기 때문입니다. 태그 중첩은 엉망이고, 들여쓰기는 아무렇게나, 속성 순서는 감으로 하는 거죠. 자신이 보기엔 문제없지만, 다른 컴퓨터나 다른 에디터에서 열면 바로 본모습이 드러납니다.
이때 HTML 포맷팅 도구에 대해 이야기해야 합니다. 많은 사람들이 포맷팅은 단축키 하나 누르는 것, 에디터에 기본 내장된 기능이라고 생각합니다. 뭐 대단한 게 있겠어요? 하지만 잘 생각해 보세요. HTML 코드를 제대로 정리한 지 얼마나 됐나요? 빨리 쓰려고 한 줄에 태그를 십여 개씩 넣고, div 안에 div 안에 div를 넣다 보면 나중에는 닫는 태그가 어디 있는지 자신도 찾을 수 없습니다. 요구사항을 수정해야 할 때가 되면 한참을 뒤져도 해당 위치를 찾지 못하고, 처음부터 다시 훑어야 하니 시간을 전부 코드 찾는 데 낭비하게 됩니다.
HTML 포맷팅이 하는 일은 아주 간단합니다. 코드를 다시 정렬하는 것이죠. 들여쓰기할 것은 들여쓰기하고, 줄 바꿀 것은 줄 바꾸고, 속성은 정렬할 것 정렬하고, 태그는 닫을 것 닫습니다. 사소해 보이지만 실질적인 이점이 큽니다. 코드 구조가 명확해지면 찾는 속도가 빨라지고, 버그 수정도 수월해집니다. 더 중요한 것은 팀 협업 시 모두의 코드 스타일이 통일되어 코드 리뷰에서 공백과 줄 바꿈 때문에 싸울 필요가 없어진다는 점입니다. 절약된 시간이면 30분은 더 잘 수 있습니다.
특히 애플 발표회 같은 시기에는 프론트엔드의 압박이 원래 큽니다. 공식 웹사이트 특집 페이지는 요구 수준이 높고, 애니메이션은 부드러워야 하고, 반응형은 완벽해야 하며, 별의별 브라우저와도 호환되어야 합니다. 새벽 2시까지 깨어 있으면 머리가 이미 잘 돌아가지 않는데, 이때 코드까지 엉망이면 정말 설상가상입니다. 차라리 습관을 들여서 한 단락写完으면 바로 포맷팅하세요. 도구가 코드를 깔끔하게 정리해 줄 겁니다. 이 동작을 얕보지 마세요. 재작업 시간을 꽤 많이 절약해 줍니다.
누군가는 포맷팅이 코드를 망가뜨리지 않을까 걱정할 수 있습니다. 안심하세요. 제대로 된 HTML 포맷팅 도구는 레이아웃만 조정하고 로직은 건드리지 않습니다. 태그는 여전히 그 태그이고, 속성도 여전히 그 속성입니다. 다만 보기 더 좋아질 뿐이죠. 물론 신뢰할 수 있는 도구를 골라야 합니다. `` 태그 안의 내용까지 엉망으로 만드는 그런 도구는 쓰지 마세요. 시중에 흔히 쓰이는 포맷팅 도구들은 꽤 성숙했고, 온라인 버전, 에디터 플러그인, 커맨드라인 도구 모두 있으니 편한 걸 고르면 됩니다.
결국 프론트엔드 이 업종에서 코드는 우리의 솜씨입니다. 솜씨가 좋은지는 기능 구현 여부뿐만 아니라 코드가 얼마나 예쁘게 작성됐는지도 봐야 합니다. 애플 발표회는 해마다 있고, 밤샘 코드 수정하는 날도 줄어들지 않습니다. 피할 수 없다면 자신을 편하게 해 주세요. 코드를 다 고친 후 포맷팅 한 번 하면, 다음 날 일어나서 파일을 열었을 때 깔끔해서 기분이 절반은 좋아집니다.
그러니 오늘 밤 또 야근을 해야 한다면, 커피 한 잔 타고 헤드폰 끼고, 코드를 다 쓴 후 서둘러 커밋하지 마세요. 먼저 포맷팅하고, 검사한 다음, 편안히 주무세요. 애플은 신제품을 발표하고, 우리는 우리 코드를 지킵니다. 이것이 프론트엔드 개발자의 품위입니다.