구글 블로그(Blogger) 글 작성 후 난 마이크로소프트 비쥬얼 스튜디오 코드로 태그 정리 한다

즐거운 코드 정리

제목 그대로입니다. 지금 이 글도 열심히 작성 후 글 발행 전 코드 정리를 대대적으로 싹 다 할 겁니다. 근데 이제막 구글 블로그(Blogger)를 시작하시는 분들 중에서 이 글을 보신다면 약간 오해하실수도 있으니까 미리 말씀을 드리겠습니다.

코드 정리, 꼭 해야 할까?

아닙니다. 이건 지극히 자기 만족입니다. 제가 코드 정리를 하는건 일단 개인 성격입니다. 저는 정리하는걸 좋아합니다. 제 방 정리도 나름 잘 해 놓은 편이라고 생각하고요. 무엇보다도 컴퓨터 파일 정리는 기똥찹니다. 어디에 어떤 성격의 파일들을 모아놨는지 정확하게 기억합니다. 그렇기에 이렇게 10년 넘게 블로그 글쓰기가 가능한 것입니다.

코드 정리를 해두면 일단 차후에 코드 편집이 편해집니다. 물론 글을 한 번 작성하면 이후에는 왠만한 특수 상황이 아닌 이상 편집은 잘 하지 않지만 부득이하게, 혹은 반드시 꼭 추가해야 하는 업데이트 내용이 있는 상황에서는 글 수정을 하게 됩니다. 이때 코드 정리를 해뒀다면 HTML 모드에서 편집 시 위치 찾기가 매우 쉬워집니다.

구글 블로그에서 글은 HTML 태그 정리 중 인라인(In-Line) 방식으로 채워집니다. 저는 최초 HTML 웹 학원에서 배울 때 인라인 방식보다는 코드가 정리된 상태로 배웠기에 초두 효과 때문인지는 모르겠으나 우리가 일반적으로 글을 작성할 때 줄 내려쓰기하는 것처럼 태그 또한 그렇게 정리가 되는게 확실히 가독성은 더 좋더라고요. 그렇기에 코드 정리는 저에게 있어서 필수 조건이 되었고 이후에도 계속해서 코드 정리를 하는게 습관처럼 굳어졌습니다. 티스토리 스킨 개발때도 당연히 코드 정리는 필수로 적용되었기에 차후 업데이트나 수정시에도 매우 유리했고요.

확실한건 SEO에 큰 차이점이 없다는 것입니다. 유독 블로그 관련 글쓰기 콘텐츠를 살펴보면 SEO라는 단어가 많이 나오고, 구글 검색이 좋아하는 SEO가 어쩌니~ 글쓰기는 SEO가 저쩌니~ 하는 내용이 많은데 이런 태그 정리들은 SEO에 큰 영향을 주지 않아요. 인라인 방식이든, 내려쓰기를 통한 방식이든 말입니다. 최종 웹 화면에서 보여지는 결과가 같다면 말입니다. 이건 챗GPT에게 물어봐도 동일한 답변이었습니다. 그러니 반드시 필수 조건이 아니라는 점! 다시 한 번 짚고 넘어가겠습니다.

VSC 코드 정리

그럼에도 불구하고! 본인도 뭔가 정리하는걸 좋아하시는 분들은 꼭 저처럼 태그 정리도 해보고 싶어지겠죠? 그렇다면 코드 정리는 대체 어떻게 할까요? 생각보다 간단합니다. 절대 수동으로 하지 않아요. 반자동으로 합니다. 현재 저는 마이크로소프트 비쥬얼 스튜디오 코드(Microsoft Visual Studio Code)라는 프로그램을 사용하고 있습니다. 무료 프로그램입니다. 코딩하시는 프로그래머, 개발자 분들은 아마 대부분 이 소프트웨어를 사용할 겁니다. 이 프로그램의 영어 앞글자를 따서 VSC라고 부르기도 합니다. 그럼 어떤 식으로 정리를 하는지 한번 살펴보죠.

현재 구글 블로그에서 글 발행 전인, 글작성을 다 완료한 상태라고 가정하겠습니다. 왼쪽 상단의 펜 모양을 눌러서 HTML 보기 모드로 변경합니다.

그러면 지금까지 작성한 현재 글에 대한 HTML 태그들이 쭈욱 일렬로 나열되어 있습니다. 근데 지금 보시면 한 줄이 아니죠? 왜냐하면 가로 크기는 정해져 있으니까 가로에서 막히면 자동으로 한 줄 아래로 내려쓰기가 된 상황이기 때문입니다. 일단 전체 선택 후 복사합니다. 단축키를 사용하면 편리해요. 윈도우 기준으로 Ctrl+C 입니다.

이제 VSC를 실행하고 Ctrl+C를 눌러 새 문서를 만들어 줍니다. 새 문서가 열리면 아마 탭 제목이 Untitled-1 로 되어있을 겁니다.

그대로 Ctrl+V를 눌러 붙여넣기를 하면 아까 말씀드린대로 인라인 방식으로 가로 1열로 쭈루루룩~ 배치된 상태로 보여지게 됩니다.

이제 보기 > 자동 줄 바꿈을 실행해 줍니다.

그러면 가로 스크롤이 없어진 상태로 코드가 보여지게 되죠. 아직은 완성된 정리가 아닙니다. 단지 자동 줄바꿈 때문에 이렇게 보여지는 것일 뿐!

코드 정리를 하는건 기본적으로 VSC에서 지원을 합니다. 코드를 모두 선택한 상태에서 Ctrl+K, Ctrl+D를 누르면 정리가 되긴 해요. 근데 이 정리가 너무 좀... 엉성한 느낌입니다. 그래서 저는 Beauty를 사용합니다. Beautify도 있는데 이건 업데이트가 중단된지 오래라 VSC에서도 설치를 비추천하고 있어요.

Beauty를 사용해서 코드 정리를 하면 이렇게 깔끔하게 태그별로 내려쓰기가 되어서 참 아름답게 코드 정리가 됩니다. 이걸 그대로 가져다 써도 되는데 저는 여기에서 좀 더 욕심을 내서 부제목에 들어있는 style="text-align: left;" 인라인 속성도 모두 지워줍니다. Ctrl+H를 눌러서 찾을 대상은 이 코드를 입력하고 바꾸기는 비워두면 됩니다. Beauty는 단축키로 등록해서 사용중이죠. 단축키 등록에 대해서는 아래의 글을 참고해 주시기 바랍니다.

마이크로소프트 비쥬얼 스튜디오 코드 VSC 단축키 수동 설정 방법

ChatGPT 코드 정리

방금 설명드린 VSC는 처음 사용자분들에게는 익숙하지 않을 것 같습니다. 그래서 인공지능인 AI를 활용해 코드를 정리할수도 있습니다. 다만 처음 상태에서는 AI에게 학습을 시켜야만 합니다. 그래서 제가 적절한 프롬프트를 세팅했으니 우선 이렇게 말해 보세요.

"내가 지금 입력하는 태그 코드를 <p><br /></p> 태그는 살려두고, 들여쓰기와 줄바꿈으로 보기 좋게 정리하고, <h>태그와 <p>태그의 style 속성은 제거하고, <img> 태그 안에 alt="" 속성을 추가해줘. 문자열은 비워둔 상태여도 됨."

그러면 챗GPT는 알겠다고 할겁니다. 이후에 구글블로그 글 태그를 모두 복사하고 붙여넣기해서 코드 정리를 하시면 됩니다.

그러면 이렇게 실시간으로 코드가 정리가 되어가는걸 보실 수 있습니다. 이걸 그대로 복사 후 기존 글 태그와 바꿔치기 하시면 됩니다. 단 저는 챗GPT를 잘 이용하지는 않아요. 왜냐하면 여러분들도 지금 사용해 보시면 아시겠지만 이게 은근히 시간이 걸립니다. 글이 길면 길수록 사용되는 태그들도 늘어나니까 시간도 더 증가하죠.

중간 중간 이렇게 계속 생성하기 버튼도 눌러줘야 하고요. 그래서 저는 VSC를 사용하고 있는 것입니다. 한 방에 정리되고 빠르니까요.

다만 VSC의 코드 정리는 왜인지는 모르겠는데 이렇게 텍스트가 VSC UI에 맞춰져 내려쓰기가 되더라고요. 물론 이건 SEO에 아무런 영향을 주지 않아요. img의 href 주소는 내려쓰기가 안 되는데 참... 아이러니 합니다. 아무튼 이렇게 각자 편한 방법을 통해 코드를 정리하시면 됩니다. 굳이 안 해도 되지만 꼭! 정리를 하고 싶으시다면 말입니다. 끝.