Quartz를 통한 옵시디언 노트 퍼블리싱 하기를 통해 위키 페이지들을 따로 호스팅하고 있었다. Quartz에서 기본 제공하는 레이아웃도 매우 훌륭하다. 기본적으로 옵시디언에서 렌더링되는 모습을 최대한 유지해준다.
뭐든지 기본기에 충실한 것이 가장 최고인듯
너비나 폰트 같은 커스텀 스타일 옵션을 내 취향에 맞게 조정해서 사용하고 있긴 했다. 하지만 어디까지나 수치 변경 수준이라서, 레이아웃 구조 자체를 바꾸거나 디자인을 뜯어고치는 건 웹 프론트엔드에 익숙하지 않은 나에게는 꽤나 부담스러운 작업이었다.
코덱스를 이용해서 레이아웃을 바꿔보자
그래서 떠올린 방법이 바로 코덱스였다. AI에게 원하는 레이아웃 변경 사항을 하나씩 요청하면 코드 수정을 알아서 해주니, 프론트엔드 지식이 부족해도 충분히 시도해볼 만하지 않은가.
작업 방식은 단순했다. 한꺼번에 모든 걸 요구하면 코덱스가 꼬일 수 있으니, 변경하고 싶은 항목을 하나씩 차근차근 요청했다. 요청 → 미리보기 확인 → 다음 요청, 이 사이클을 반복하면서 진행했더니 단 몇 시간 만에 원하는 레이아웃이 완성되었다.
레이아웃뿐 아니라 색상이나 카드 스타일 같은 세부 디자인까지 조정할 수 있었다. 물론 코덱스가 알아서 변경해준 디자인이다 보니 어디서 많이 본 듯한 느낌이 있긴 하지만… 뭐 그게 중요한가. 내 눈에 보기 이쁘면 됐지.
좀 더 블로그에 가까운 레이아웃과 디자인으로 변경
변경된 것을 보니 예쁘긴 한데… 위키보다는 블로그쪽에 가까운 디자인이다. 근데 뭐 공용 서비스도 아니고 내가 볼 내 개인 위키인데 이런들 저런들 어떠하랴, 내 눈에 이쁘고 보기 좋으면 그만이지.
마치며
웹 프론트엔드를 잘 몰라도 AI 도구를 활용하면 원하는 결과물을 충분히 만들어낼 수 있다는 걸 다시 한번 체감했다. 특히 Quartz처럼 오픈소스 정적 사이트 생성기는 코드가 공개되어 있어서 AI와의 협업이 더더욱 수월하다.
핵심은 한 번에 하나씩, 확인하면서 진행하는 것이다. 이 방식 덕분에 의도하지 않은 사이드 이펙트 없이 깔끔하게 마무리할 수 있었다. 딸깍 한 번으로 뭐든 되는 세상, 참 좋다.