개인 사이트, 어디까지 만들어봤니? - ⑤ 워드프레스

솔직히 그누보드까지 갔는데 워드프레스로 빠질 이유는 딱히 없었다.

그냥 인턴 때 조금 해봤으니까 생판 처음 보는 그누보드보단 친숙할 것 같았고, 이참에 그누보드에서 하면 대공사가 되는 영역들 (게시판 템플릿을 새로 구성한다던지, 복합적인 애니메이션 효과를 넣는다든지…)에 도전해보고 싶었다.

그리고 결론부터 말하자면, 여전히 새 플랫폼에 적응하는 건 쉽지 않았다.

+) 2~4편과 다르게, 이번 편은 바이브 코딩이 뜨기 시작한 후였기에(25년 10월) 당시 가장 흥했던 ChatGPT로 진행했다. 다만 Gemini나 Claude, Codex의 존재는 아직 몰랐다 😢

1. 워드프레스란?

이전에 다룬 그누보드와 유사하게 홈페이지를 만들기 위해 필요한 요소가 다 갖춰진 오픈 소스 블로그이다. 재료(조립식 집)가 다 준비되어 있으니 이용자는 서버(땅)만 준비해서 준비한 서버 위에 집만 얹으면 되는 것이다.

전 세계 웹사이트 셋 중 하나는 워드프레스로 제작했다는 통계가 있을 만큼 많이 쓰이는 블로그 툴이며, 그만큼 관련 자료가 방대하기도 하다. 국내에서도 많은 기업 홈페이지 혹은 블로그가 워드프레스로 제작되었다.

2. 드는 비용은?

오픈 소스 블로그를 설치할 수 있는 자원과 지식이 있으면 무료로 운용하는 것도 가능하지만, 아닐 때는 소액의 돈을 내고 워드프레스 사이트를 대신 만들어주는 서비스를 이용할 수 있다.

🔗 카페24 뉴매니지드 워드프레스 서비스

내 경우에는 카페24에서 제공하는 뉴매니지드 워드프레스를 사용했다.

이런 호스팅 서비스를 사용할 경우, 결제 후 로그인을 마치면 기본 상태로 세팅된 워드프레스를 만나볼 수 있다. 네이버나 티스토리 블로그를 처음 시작했을 때와 동일한 상태라고 보면 된다.

3. 워드프레스 세팅하기

워드프레스를 처음 시작했을 때 당황했던 부분이 하나 있었다.

커스텀 블로그라고 들었는데 CSS가 없다.

자바스크립트나 php를 넣는 칸도 없었다.

워드프레스 기본 테마는 필요한 모든 기능을 처음부터 제공하지 않으며, 플러그인으로 추가해야 한다.

이미지를 슬라이드로 넘기는 플러그인, 각 게시판의 하단에 다른 게시글 리스트를 띄우는 플러그인, 모바일 접속 시 기존 메뉴 창을 지우고 모바일에 최적화된 메뉴를 출력하는 플러그인, 비밀번호 플러그인… 다행히 필요한 플러그인 모두 찾아보면 어딘가에 존재는 했다.

문제는 네이버나 티스토리 등의 블로그에 익숙해져 있다 보니 그런 기능을 ‘블로그라면 당연히 제공해야 하는 서비스’라 생각하기 쉬웠고, 워드프레스 기본 테마에는 그 ‘당연히’가 없었다.

나는 내 주소로 완전히 조립된 집이 올 테니 가구만 넣어서 꾸미면 될거라 생각했는데, 실제로는 수도나 전기 연결이 안 된다던가, 이층집인데 2층으로 가는 계단은 내가 직접 만들어야 한다던가. 그런 셈이었다.

그렇다고 엄청 황량하지만은 않았다. 게시글을 한 번 쓰려고 하면 온갖 블록이 튀어나온다. 내가 원하는 건 평범한 글 단락인데, 글 단락의 종류만 서너 가지는 되었다. 대체 왜 이러냐고 따지고 싶은 마음이 굴뚝같았다.

이런 과정을 거쳐 전기 연결하고, 수도 연결하고, 2층 계단 깔고, 기본 구색을 갖추고 나서야 CSS 수정에 나섰다. 그나마 UI 내에서 배경 색이나 포인트 컬러 등을 통일할 수 있고, 각 게시글의 템플릿을 미리 지정할 수 있는 점은 편했다.

4. 최종 평

난이도는 낮지 않다.

체감상 워드프레스 세팅 난이도는 별 5개 중 3.5개 정도는 되었다.(기본 테마 트웬티트웬티 기준)

티스토리 등 홈페이지 CSS를 만져본 적이 있다면 입문할 만하겠지만, 기본 제공 템플릿이 다소 단조롭고, 유저가 직접 커스텀해서 써야 하다 보니 내가 어떤 사이트를 만들고 싶은지 미리 레퍼런스나 구조를 파악한 후에 입문하는 게 좋을 것 같았다.

일러스트레이터로 대충 레이아웃만 잡은 시안 (당시 피그마의 존재를 몰랐다)

실제 사이트

내 경우에는 만들고자 하는 바는 뚜렷했으나 디자인 지식이 부족해 한계에 부딪혔다. AI한테 CSS를 맡겼으면 이것보단 나았을 것 같지만, 안타깝게도 아직 AI가 CSS 분야에서 미적 감각을 갖추기 전이었다.

그래도 시도해 볼 수 있는 게 많다.

내 경우에는 지정된 템플릿에 맞춰 데이터를 입력하고 보여주는 게 목적이었다.

따라서 한 번 템플릿을 완성한 후, Advanced Custom Fields 플러그인으로 값을 입력받는 칸을 만들었다.

입력받은 값을 화면에 구현하는 코드를 Code Snippets 플러그인에 저장하고,

실제 에디터 화면에서 값에 맞춰 내용을 넣으면 된다.

이렇게 하면 마우스 오버 시 특정 텍스트가 나타나는 세팅이라든지,

들어온 값만큼 이미지 레이아웃을 만드는 것도 가능하다. 마우스 오버 시 해당 이미지가 제일 위로 올라오는 애니메이션도 추가했다.

5. 마무리

워드프레스를 시작했을 당시, 무료 테마와 유료 테마 사이에서 고민하던 중 어떤 레딧 글을 보았었다. CSS 공부를 하고 싶어서 워드프레스에 입문하는 거라면 기본 테마로 시작하길 추천한다는 내용이었다.

어쨌든 돌이켜보면 지금까지 거쳐온 플랫폼 중 워드프레스가 가장 큰 공부가 되었던 건 사실이었다. 아침에 눈 뜨자마자 컴퓨터 앞에 앉고 새벽이 될 때까지 붙잡는 생활을 몇 주 가량 한 덕이겠지만, 그만큼 배우는 게 많았다.

따라서 css 공부가 메인이고, 예쁜 홈페이지를 만드는 게 2순위라면 워드프레스 기본 테마로 입문하기를 추천하고 싶다.

근데 그게 아니라면 그냥 유료 테마 사자. 역시 돈이 최고다.

---

지금까지 네이버 블로그, 티스토리, 그누보드, 워드프레스를 사용해 개인 페이지를 만드는 법을 다뤄보았다. 비전문가가 무작정 부딪히면서 느낀 소감을 적은 내용이다 보니, 도움이 될 지는 모르겠다.

사실 블로그나 티스토리는 기업이 운영하는 블로그 서비스 내부에서 꾸미기만 하는 거고, 그누보드나 워드프레스도 서버 구매나 기본 구축 등은 호스팅 업체를 사용했기에 난이도가 그리 높지는 않았다고 생각한다.

만약 호스팅 업체를 끼지 않고 서버 단계서부터 직접 만든다면 난이도가 얼마나 올라갈까.

이 다음은 겁없이 서버 구축부터 시작한 번외편으로 넘어간다 🫠