블로그 시스템 이전
디자인엑스는 모든 내부 시스템과 일하는 방식을 AI 중심으로 바꾸고 있습니다. 현재 일반 사용자를 위한 AI 서비스 3가지(이모지 검색, 영어 사전 등)를 준비하고 있는데, 다른 작업 전에 가장 먼저 블로그 시스템을 전면 개편 했습니다.
오랜 동안 워드프레스(Wordpress)로 운영하던 블로그를 휴고(Hugo) 기반의 단순한 구조로 옮겼습니다. 인기 글 추천이나 댓글 같은 기능이 사라진 점은 아쉽지만, 유지보수와 글 관리가 훨씬 편해졌습니다.
새롭게 준비하는 오래가는 AI-UX 디자인 강의와 관련해서, 앞으로 이 블로그를 통해 더 꾸준히 새로운 글을 보여드릴 예정입니다. 아래에는 워드프레스에서 휴고로 바꾸면서 얻은 경험과 배운 점들을 정리했으니, 비슷한 변화를 생각하는 분들께 도움이 되면 좋겠습니다.
왜 Wordpress를 떠나 Hugo를 선택했나?
200개가 넘는 글을 워드프레스에서 휴고로 옮기는 일은 간단치 않았습니다. HTML로 된 글을 마크다운(.md)으로 바꾸는 것 이상으로, 생각지 못한 손이 많이 가는 작업이었습니다. 그 과정에서 얻은 경험을 나누고자 합니다.
워드프레스의 특징과 떠나기로 한 이유
워드프레스는 무척 뛰어난 도구입니다. 블로그를 넘어 쇼핑몰이나 복잡한 웹사이트도 만들 수 있습니다.
- 강력한 기능: 인기 글, 댓글, 통계, 보안 같은 기본 기능은 물론, 플러그인을 써서 상상하는 거의 모든 기능을 더할 수 있습니다.
- 쉬운 사용법: 코딩을 몰라도 관리자 화면에서 디자인을 바꾸고 기능을 추가할 수 있어, 많은 사람들에게 좋은 선택지였습니다.
하지만 이런 장점들이 시간이 지나면서 아쉬움으로 다가왔습니다.
- 어려워진 관리: 기능이 늘어날수록 설정은 복잡해지고 플러그인끼리 얽히면서 사이트를 관리하기가 점점 힘들어졌습니다.
- 느려진 속도: 다양한 기능은 어쩔 수 없이 사이트를 무겁게 만들었고, 속도도 느려졌습니다.
- 플랫폼 종속: 글 안에 HTML과 워드프레스 전용 코드가 뒤섞이면서, 다른 곳으로 옮기기가 거의 불가능한 상태가 되었습니다. 특히 표를 많이 쓰는 저희 블로그는 이 문제가 더 크게 다가왔습니다.
무엇보다 일하는 환경이 바뀌었습니다. 예전에는 워드프레스가 좋은 선택이었지만, 이제는 AI 덕분에 코딩이 훨씬 쉬워졌습니다. 복잡한 관리자 화면을 다루기보다 config.yaml 같은 설정 파일을 직접 고치는 게 더 빠른 시대가 된 것입니다.
Hugo 선택과 선정 기준
새로운 블로그 도구를 고르기 위해 몇 가지 기준을 정했습니다.
- .md 파일로 글을 관리할 수 있는가?
- AI의 도움을 받기 좋을 만큼 널리 쓰이는가?
- 지금도 활발하게 업데이트되고 있는가?
- 멋진 디자인의 템플릿을 구하기 쉬운가?
- 우리 팀이 쓰는 다른 기술과 잘 어울리는가?
최종적으로 헥소(Hexo)와 휴고(Hugo)를 비교했습니다.
| 구분 | Hexo | Hugo |
|---|---|---|
| 스타 수 | 40,600+ | 82,600+ |
| 기반 기술 | React (Node.js) | Go |
| 장점 | 사용자가 많음 | 개발이 활발하고 빠름, 세련된 템플릿 다수 |
| 단점 | 개발이 활발하지 않음, 멋진 템플릿 부족 |
Go 템플릿을 익혀야 함 |
두 도구 모두 인기가 많아 AI의 도움을 받기에는 충분했습니다. 하지만 Hexo는 개발이 활발하지 않은 느낌이었고, 마음에 드는 템플릿을 찾기 어려웠습니다. 반면 Hugo는 Go 언어 기반이라 속도가 매우 빠르고, 지금도 계속 발전하고 있으며, 완성도 높은 템플릿이 많다는 점이 매력적이었습니다.
그래서 저희는 Hugo를 선택했습니다.
Wordpress에서 Hugo로: 문제 해결 과정
본격적으로 이전을 시작하자, 예상치 못한 문제들을 만나야 했습니다.
wordpress-to-hugo-exporter 플러그인으로 글을 내보내는 작업이 계속 실패했습니다. 오류 메시지도 없어 원인을 찾는 데 한참 걸렸는데, 혹시나 해서 이미지를 빼고 내보내도록 코드를 고치니 문제가 해결되었습니다. 이미지는 결국 따로 직접 옮겨야 했습니다.
자동화의 어려움과 LLM의 도움
가장 큰 어려움은 워드프레스 플러그인들이 만든 표준에 맞지 않는 HTML 태그와 깨진 코드들이었습니다. 이 문제를 풀기 위해 파이썬으로 자동 변환 코드를 짜봤지만, 워낙 변수가 많고 코드가 지저분해 제대로 작동하게 만들기가 어려웠습니다.
여러 방법을 시도하다 새로운 아이디어를 떠올렸습니다.
"이 복잡한 HTML을 LLM(거대 언어 모델)에게 맡겨보면 어떨까?"
결과는 기대 이상이었습니다. Gemini에게 지저분한 HTML을 주자, 아주 깔끔한 마크다운(.md)으로 바꿔줬습니다. 특히 그동안 워드프레스에서도 고통 받던 복잡한 표가 깨끗하게 변환된 것을 보고 놀랐습니다.
물론 LLM이 모든 것을 해결해주진 않았습니다. AI가 만든 결과물에는 이미지가 빠지거나, 글의 일부를 건너뛰고 요약해버리는 환각(Hallucination) 현상이 나타나기도 했습니다. 그래서 대부분의 글들을 사람이 다시 읽고 이미지나 형식, 내용이 잘못되지 않았는지 확인해야 했습니다.
AI로 컨텐츠 작업할 때는 AI를 활용한 생성/수정/검토 등의 과정에 각각 환각이 영향을 미쳐서 조금씩 믿을 수 없게 되는 점이 참 곤란합니다. 검토를 시켜도 맞는 것을 틀렸다고 하거나 틀린 것을 맞다고 하는 상황이 생깁니다. 결국 사람이 최종 확인은 다시 해야 합니다.
꽤 많은 손길이 필요했지만, 오랫동안 꼭 하고 싶었던 이미지 파일 이름 정리까지 끝내고 나니, 불가능해 보였던 워드프레스에서 Hugo로의 이전을 마칠 수 있었습니다.
비슷한 이전을 생각하고 있는 분들께 이 경험이 조금이나마 도움이 되면 좋겠습니다.
곧 새로운 오래가는 AI-UX 디자인 강의와 신규 서비스들이 공개될 예정이니, 앞으로도 많은 관심 부탁드립니다.