화면을 잘 만들면 홈페이지도 완성될 줄 알았다

화면 앞에서 한숨이 나온 건 이때가 처음이 아니었다. 브리핑 허브를 만들 때부터 가장 자주 막혔던 부분은 디자인이었다. 데이터를 모으고 화면에 연결하는 일과 달리, 무엇을 어디에 놓아야 하는지는 정답이 잘 보이지 않았다. 화면을 만들 때마다 헤더와 요약 영역을 다시 고민했고, 결과가 마음에 들지 않으면 다른 사이트를 벤치마킹하며 처음부터 바꿨다.

AI에게 도움을 요청하면서 작업하는 것에도 한계가 있었다. 프롬프트로 작업을 지시해도 AI는 내가 원하는 대로 결과를 내놓지 못했다. 그래서 계속 고민했고, 완성한 걸 뒤집고 또 뒤집는 일이 이어졌다. 희한하게도 벤치마킹한 사이트와 똑같이 만들었는데 무언가가 달랐다. 그런데 무엇이 다른지는 아무리 봐도 알 수 없었다. 눈뜬장님 같았다. 이 일로 지금 내 수준이 어디쯤인지 알게 됐다.

디자인에 대해서 아는 게 없구나. (심지어 용어조차도 모르는 상태였다.)

이걸 어떻게 하면 효과적으로 만들 수 있을지 고민했다.

그래서 다음에는 화면을 직접 디자인하는 대신 선택해서 조립할 수 있는 도구를 만들기로 했다. 레고 조각처럼 영역별 패턴을 만들어두면 새 홈페이지를 만들 때마다 같은 고민을 반복하지 않아도 된다고 판단했다. 좋은 부품을 충분히 준비하고 조합하는 방식이라면 디자인 감각에 대한 부담도 줄어들 것 같았다.

그렇게 만든 도구가 뉴스 페이지 빌더다. 브리핑 허브 화면을 고치던 일을 잠시 멈추고 화면을 모듈화하는 데 집중했다.

화면을 네 구역으로 나눴다

먼저 뉴스 페이지를 네 개의 구역으로 나눴다. 제목과 날짜가 들어가는 헤더, 오늘의 핵심 내용을 보여주는 요약 영역, 기사가 반복되는 본문 영역, 지난 기록이나 발행 정보를 두는 푸터였다. 각 구역마다 여러 디자인을 만들어두고, 원하는 모양을 고르면 하나의 페이지로 합쳐지는 구조였다.

뉴스 페이지 빌더 Configurator 화면이다.

헤더 4개, 요약 영역 4개, 기사 영역 4개, 푸터 3개까지 총 15개의 패턴을 만들었다. 패턴 정보는 데이터 파일로 분리했고, 별도의 설정 화면에서 구역별 모양과 색상을 선택할 수 있게 했다. 선택한 결과는 미리보기로 확인하고, 마지막에는 서버 없이도 열 수 있는 HTML 파일로 내려받도록 구성했다.

각 영역에서 고른 패턴이 바로 보이도록 한 화면이다.

기술적으로는 처음 생각하고 정리했던 범위를 상당 부분 구현했다. 복잡한 프레임워크를 쓰지 않았고, 만들어진 파일을 클라우드 저장소에 올린 뒤 도메인을 연결하면 뉴스 페이지로 사용할 수 있도록 배포 방식도 정리했다. 집과 회사에서 이어서 작업할 수 있도록 코드 동기화 방식까지 마련했다.

아키텍처 다이어그램이다.

거의 완성된 프로젝트처럼 보였다. 화면을 구역으로 나누고, 패턴을 고르고, 색상을 바꾸고, 결과물을 파일로 내보내는 흐름이 연결되어 있었다. 매번 빈 화면에서 시작하지 않아도 되는 도구를 실제로 만든 셈이었다.

완성된 도구에 넣을 콘텐츠가 없었다

문제는 디자인을 선택해 페이지의 껍데기를 만드는 데는 성공했지만, 이 도구를 실제로 어디에 반복해서 사용할지 분명하지 않았다. 사용할 곳이 먼저 생긴 뒤 공통 기능을 뽑아낸 것이 아니라, 언젠가 필요할 것이라고 생각한 공통 도구부터 만든 순서였다. 그리고 결정적으로 만들어둔 모듈들을 어떻게 조합해야 하는지 감이 없었다. 모듈마다 어떤 조합이 어울리는지 내가 미리 알고 있어야 했는데, 그 부분까지는 생각하지 못했다.

모듈을 붙일 게 아니라 다양한 테마를 만들어 두는 게 맞다는 결론에 도달했다. 테마를 만들려면 A 조합에 들어가는 디자인 패턴, B 조합에 들어가는 디자인 패턴처럼 여러 경우를 만들고 테스트해 봐야 했다. 하지만 지금 그 일을 해야 할 이유가 나에게는 없었다.

결국 뉴스 페이지 빌더는 폐기까지는 아니고 보관함으로 옮겼다. 구현 자체가 작동하지 않아서 폐기한 것은 아니었다. 화면 부품과 조립 기능은 만들었지만, 콘텐츠가 들어오고 갱신되는 흐름이 없어서 실제 운영 도구가 되지 못했다.

무엇을 보여줄지보다 어떻게 보여줄지를 먼저 해결하려 했던 결과였다. 지금까지 진행하면서 폐기했던 것들이 대부분 기획이 정교하지 못해서 생긴 문제였다. 그걸 알고 있었지만, 여전히 나는 기획을 정교하게 다듬기 전에 만들기부터 시작하고 있었다.

같은 실수를 웹페이지에서도 반복하고 있었다

이 문제는 한 달 뒤 개인 기록소를 만들면서 다시 나타났다. 첫 시도에서는 홈과 프로젝트 목록, 상세 화면을 합친 사이드바 구조부터 만들고, 더미 데이터를 넣어 그럴듯한 홈페이지 모양을 갖췄다. 하지만 관리자가 글을 작성하고 저장하거나, 발행한 내용을 홈페이지에 반영하는 기능은 계획에 포함되어 있지 않았다.

당시 초기 홈페이지 화면이다. 그 시점에 채워뒀던 더미 데이터는 남아 있지 않아 빈 상태로 나타난다.

화면은 있었지만 홈페이지를 운영할 방법이 없었다. 여러 번 겪었음에도 화면을 먼저 붙잡는 습관은 쉽게 사라지지 않았다. 왜 이런 상황이 반복될까를 고민하면서 내린 결론은 이것이었다.

AI가 주는 편안함으로 인해 스스로 생각하고 고민하지는 않고 있구나.

디자인 문제가 전부는 아니었다

처음에는 디자인 감각이 부족해서 홈페이지가 완성되지 않는다고 생각했다. 그래서 좋은 사이트를 더 많이 참고하고, 화면을 재사용할 수 있는 부품으로 만들면 해결될 것이라고 봤다. 벤치마킹과 공통 부품 자체가 잘못된 것은 아니었다.

문제는 디자인 감각보다 순서에 있었다. AI가 화면을 빠르게 만들어 주는 동안, 나는 왜 이걸 만드는지를 먼저 묻지 않았다. 그래서 다음 시도에서는 무엇을 보여줄지부터 다시 확인하고, 화면보다 글쓰기와 발행 흐름을 먼저 시험하기로 했다.

돌고 돌아 결국 작은 단위의 MVP(Minimum Viable Product, 최소 기능 제품)로 돌아갔다. 다시 원점이라니, 참 얄궂다는 생각이 들었다.