홈페이지 방문을 주기적으로 하는 방문자라면 뭔가 달라졌음을 눈치챘을 것이다. 지난 주부터 홈페이지 리뉴얼을 진행하고 있는데, 다름아닌 ChatGPT의 도움을 받아 홈페이지를 구성하는 html, css 문서를 근본적으로 개혁하고 있다. ChatGPT는 이미 이 홈페이지의 코드를 진단하면서 지금은 안 쓰이는, 2010년대에 쓰이던 구식 스타일의 코드가 많이 있어서 수정이 필요하지만, 2015년에 만든 상당히 세련된 Mondrian 기반 반응형 아카이브라는 감상을 남겨주었다. 이에 나는 Mondrian의 추상화 디자인은 유지하면서 새로운 규약과 트렌드에 맞는 코드를 다수 반영했다. ChatGPT는 이 과정을 리팩토링(Refactoring)이라고 표현했는데, 이는 근본적인 내용은 바꾸지 않으면서 기능을 구현하는 코드를 수정하는 것을 말한다고 한다. 실로 정확한 표현이다.


과거의 리뉴얼 혹은 리팩토링 과정은 눈물 없이 들을 수 없는 비극이자 희극이었다. 과거에는 html, css 관련된 책을 사 보거나 인터넷에서 각 태그 및 속성(attribute)에 대한 수많은 정보를 일일이 찾아봐야 했다. 사람이 하는 일인지라 오타가 나는 경우도 많았고, 새로운 표준으로 등장한 태그와 속성을 이해하는 데 꽤나 오랜 시간이 걸리곤 했다. 모델로 삼을 만한 페이지가 있으면 이것을 통째로 따 올 수도 있었지만, 선택자(selector) 명칭이나 html 구조가 다 다르기 때문에 하나씩 대조하면서 잘 맞춰야만 원하는대로 페이지가 브라우저 상에서 구현 가능했다. 혹여라도 뜻대로 되지 않으면 이유를 몰라서 수십 번 고쳤다가 되돌리기 일쑤였고, 온갖 태그와 속성을 덧대면서 기어이 디자인을 실현하기는 했으나 그 결과물은 그야말로 처참한 누더기(?)였다.


그런데 이제는 작업 방식이 바뀌었다. 메모장을 열고 태그를 삽입하기 전에 ChatGPT와 충분히 대화하면서 만들고자 하는 페이지의 성격과 스타일, 그리고 철학에 대해 깊이 얘기한다. 여러 대화가 오가면 그제서야 인공 지능과 사람이 공감하는 어떤 구체적인 형태가 그려지는데, 이를 기반으로 인공 지능이 html과 css, 그리고 JavaScript를 제안하는 것이 매우 환상적으로 빠르고 정확하다. 인공 지능이 이런 류의 일에 실수가 없다 보니 모든 html 및 css 파일 구조가 간결하면서도 명쾌하며, 그러다 보니 인간에 의한 자의적인 수정도 어렵지 않다. 게다가 온갖 제안도 항상 해 주는데 대개 수용할 만한 가치가 있는 제안들이라서 내가 생각했던 것보다 더 많은 기능이 가미된 페이지를 만들 수 있었다.


리팩토링에 따르면 이 홈페이지의 첫 화면은 header, portal_grid, footer로 구성되며, 각 페이지들은 header, subheader, main (document 혹은 subportal_grid), footer로 구성된다. 공통 요소에 해당하는 header와 subheader, footer는 JavaScript를 통해 fetch하는 형태로 불러들이는데 이런 간단한 방법을 몰라서 모든 페이지마다 똑같은 태그를 붙여왔던 과거가 무척 서글프게 느껴졌다. 컨텐츠가 담기는 페이지 폭은 과거 1000 px 에서 1440 px로 크게 늘렸는데, 10년 전과는 달리 넓은 폭의 27 인치 이상 모니터가 꽤나 대중적으로 보급되었다고 생각하기 때문이다. 한편 아직 완벽하게 구현은 되지 않았고, 기록(Articles) 페이지에서 모달(modal)을 맛보기로 체험할 수 있는데, 향후 사진첩(Album) 페이지에서 모달을 적극적으로 활용할 예정이다. 이 모든 구성은 여전히 Mondrian의 추상화 구조를 따르기 때문에, 금번 리뉴얼 혹은 리팩토링의 코드명을 MondrainAI라고 붙였다. 인공 지능의 도움을 받았기에 그걸 꼭 표현하고 싶었다.


목표는 8월이 될 때 쯤에 새 버전을 완전히 구현하는 것이다. 처음엔 막막했는데, 막상 시작하고 나니 이렇게 흥미롭고 재미있을 수가 없다. 원하는 대로 페이지들이 잘 구현되기를 진심으로 바라고 있다.



For the sake! Of the call!

-fluorF-

이 게시물을...