Ryul

Wordpress에서 Gatsby로 옮기면서

2019-03-31

From wordpress to gatsbyj

  1. Wordpress에서 옮긴 이유

    1. Wordpress의 장점
    2. Wordpress의 단점
  2. Gatsby로 옮기면서

    1. Gatsby 튜토리얼
    2. Gatsby의 장점
  3. 지인에게 추천한다면

Wordpress에서 옮긴 이유

설치형 Wordpress에서의 블로그 경험은 그리 좋지 못했다. 그래서 시작한지 얼마되지도 않아 초안만 잔뜩 작성해놓고 업로드도 못한 채 접게 되었다. 그렇게 몇 달이 흐르고 결국 블로그가 다시 그리워져서 재도전을 결심했다.

내가 원하는 블로그는 글을 쓸 때 쓰는 것에만 집중할 수 있는 블로그였다. 하지만 Wordpress에서 글을 쓰면 폰트, 색상, 그림배치, 리비전 개수, 줄내림 등등 신경써야 할 것들이 한두가지가 아니었다. 그러다보니 이어지는 글의 양식을 일관되게 유지하는 것이 매우 힘들었다. 객관적으로 보면 힘들지 않았을 텐데, 이미 마크다운(markdown)이나 레이텍(LaTeX)의 단맛을 보았기 때문에 무엇보다 자동화된 서식이 필요했다. 그렇게 결론짓고 나니 Wordpress는 더이상 매력적이지 않았다.

뿐만 아니라 블로그에 동적요소가 필요하다는 예전의 생각이 바뀌었다. Wordpress로 만들면 동적 사이트를 만들 수 있지만, 오히려 동적 사이트라는 특징 때문에 무겁고 반응이 느리다는 점에서 마이너스였다. 정적 사이트로도 충분히 필요한 기능을 제공할 수 있고 동적 사이트보다 훨씬 가볍다. 이런 점에서 Jekyll(지킬)이나 Gatsby(가츠비) 같은 걸로 블로그를 만드는게 훨씬 매력적이었다. 그리고 나는 Gatsby를 선택했다.

Wordpress의 장점

Wordpress가 무조건 나쁜 선택은 아니다. 설치형 Wordpress네이버 블로그티스토리보다 어려운 건 사실이지만 조금만 노력해서 배우면 충분히 그만한 보상이 있기 때문이다. 가입형 Wordpress도 있긴 하지만 거의 모든 면에서 설치형의 하위호환이므로 따로 언급하진 않겠다.

  1. 무수히 많은 테마들

    조금이라도 Wordpress를 살펴본 사람이라면 Themeforest(테마포레스트)에서 워드프레스에서 가장 유명한 Avada를 비롯한 수많은 테마들을 보았을 것이다. 이러한 테마들을 이용하면 단순히 블로그 뿐만아니라 기업 홈페이지, 쇼핑몰, 온라인 커뮤니티 같은 거의 모든 종류의 웹사이트를 적은 노력으로 만들 수 있다.(쉽다고는 안했다.) 이는 실로 놀라운 기능이지만 블로그할 때 필요없는 것들이다. 블로그용 테마를 찾는 나에게는 블로그만 잘 돌아가면 된다. 어쨌건 타의 추종을 불허하는 수많은 테마의 개수는 Wordpress의 특장점이다.

  2. 쉬운 관리 페이지

    Wordpress로 만든 블로그에 로그인하면 깔끔하게 정돈된 관리페이지를 볼 수 있다. 사용법도 네이버 블로그Blogger(블로거)와 비슷하기 때문에 Wordpress를 처음 접하더라도 쉽게 적응할 수 있게 해준다. 뿐만 아니라 Wordpress를 사용하면 플러그인 설치는 필연적인데 설치한 플러그인의 설정도 관리페이지에서 쉽게 할 수 있다. 그러므로 전문적인 지식이 없어도 이것저것 해볼 수 있다. 플러그인은 영어로 된 것이 대부분이지만, 기본 설정들은 전부 한글화되어 있다.

  3. 전문적이고 강력한 플러그인

    플러그인 기능은 정말 강력하다. 필요한 대부분의 기능이 플러그인으로 제공되기 때문에 굳이 코딩할 필요가 없다. 필요한 기능이 생기면 그냥 '플러그인 추가하기'에 들어가서 클릭하고 설치하면 그만이다. 심지어 기본 글쓰기 에디터도 마음에 안 들면 플러그인을 설치하여 갈아치울 수 있다. 다만 너무 많은 플러그인은 사이트를 느리게 만든다.

  4. 확실한 검색 최적화(Yoast SEO)

    개인적으로 Wordpress에서 가장 매력적인 부분은 최고의 SEO 도우미라고 할 수 있는 Yoast(요스트) SEO 플러그인이다. Wordpress를 Gatsby로 바꾸려고 했을 때 가장 발목잡던 것이 바로 이 녀석이다. 특히 프리미엄 버전은 유료이지만 그 가격이 전혀 아깝지 않았다. Yoast 플러그인에서 지적해주는 것을 충실히 따르면 쉽게 구글 검색 상위에 노출되었다. 물론, 인기있는 검색어는 경쟁이 치열하기 때문에 Yoast의 힘을 빌려도 어렵지만 그런 경우는 당연히 예외다. 아무튼 SEO에 정답이 없음에도 불구하고 Yoast는 가장 신뢰할 수 있는 해법을 제시한다.(SEO에 정답이 없다는 말은 검색 서비스 제공업자가 자신들의 검색 로직을 '직접적'으로 공개하지 않는다는 뜻이다. 그런 걸 공개하는 순간 악용하려는 사람이 생기고, 온갖 스팸 정보만 검색되어 곧 망해버릴 것이다.)

    이 글을 읽는 몇몇 분들은 SEO가 중요하지 않을 수도 있다. 블로그를 단순히 저장공간처럼 쓰는 사람도 있고, 소통의 장으로 쓰는 사람도 있듯이 사람마다 블로그의 성격이 다르다. 그렇기 때문에 어느 하나가 정답이라고 말할 수는 없다. 그치만 적어도 다른 사람과 지식을 교류하고, 생각을 공유하려는 블로거에게 SEO(검색 최적화)는 생명줄이다. 최소한 내 블로그가 검색은 되어야 다른 사람들이 찾아올 수 있으니 너무나 당연한 소리가 아닐 수 없다.

Wordpress의 단점

이제 칭찬은 그만하고 까보겠다. 사람마다 요구사항도 제각가이고 느끼는 편차도 크기 때문에 참고용으로만 읽기 바란다.

  1. 지저분한 글쓰기 에디터 (feat. 플러그인)

    Wordpress의 기본 편집기 자체는 지저분하지 않다. 2018년 12월초 Wordpress 5.0이 출시되면서 기존의 클래식 에디터는 새로운 Gutenberg(구텐베르크)로 변경되었다. 새로운 구텐베르크 에디터에 대해 사람마다 호불호가 갈리긴 하지만 둘 다 기본적으로 깔끔한 글쓰기 환경을 제공한다. 다시 말하자면 순수하게 기본 기능만 쓰는 경우에 깔끔하다는 것이다. 조금씩 추가적인 기능이 필요해서 플러그인을 깔게 되면 지저분해진다. 문제는 많은 사람들이 추가 기능을 필요로 한다는 것이다.

    예를 들어, 강력한 페이지 디자인이 필요한 사람은 Elementor(엘레멘터)와 같은 새로운 에디터를 사용해야 할 것이고, 프로그램 코드에 syntax highlight를 적용하고 싶은 사람은 Crayon(크레용) 같은 플러그인을 설치해야 할 것이다. 그리고 당연히 플러그인의 도움으로 작성된 글들은 모두 해당 플러그인에 종속성이 생긴다. 나중에 더 좋은 다른 플러그인으로 바꾸고 싶어도 함부로 바꿀 수 없다. 기존 플러그인을 지운다면 작성된 글들은 죄다 깨져있을 것이다. 안전하게 옮기려면 하나하나 수동으로 옮겨주면 되지만 상상만 해도 매우 귀찮다.

    그리고 플러그인을 깔아서 원하는 기능이 100% 구현되면 모를까 그럴지도 않다. 바꾸고 싶은 색상이 변경 불가라거나, 기능에 버그가 있거나, 여백조절이 안 되거나 등등 일정 부분은 포기해야한다. 직접 CSS를 수정하면 되겠지만 매번 번거롭기도 하고 여전히 마음에 들지 않는다.

    뿐만 아니라 많은 사람들이 Wordpress의 장점으로 shortcode(숏코드)를 얘기하는데 반은 맞고 반은 틀리다. 미리 정의해둔 기능들을 간단한 코드만 글에 삽입하여 쉽게 사용할 수 있기 때문에 이는 분명 훌륭한 도구이다. 하지만 글을 쓰다가 숏코드가 적용된 모습을 보려면 미리보기해야 하고, 몇몇 자동 생성된 숏코드들은 말이 "짧은(short)"이지 정말 길다. 직관적이지도 않은데 길이조차 너무 길어서 수정하는 것보다 새로 만드는 것이 빨랐다. 복잡한 함수가 글쓰는 중간에 크게 들어가 있으니 여러모로 지저분하다.

  2. 신경쓰이는 보안

    아무리 개인 블로그라지만 보안에 신경쓰지 않을 수 없다. 물론 대부분의 사람들은 보안을 신경쓰지 않는다. 나도 그러고 싶지만 집에 있는 NAS서버의 보안기록을 보면 수많은 공격시도들이 적혀있기 때문에 그럴 수 없다. 덕분에 나는 개인도 보안에 민감해야 한다고 생각하며 물론 내 NAS도 보안에 엄청 공들여 놓은 상태이다. 보안이 뚫릴 경우, 단순히 자료만 손상되는 것이 문제가 아니라 내 컴퓨터가 불순한 용도로 사용될 수 있다.

    그렇다면 설치형 Wordpress의 보안 설정은 쉬운 작업일까? 개개인이 보안전문가도 아니고 당연히 어렵다. 그리고 해놓고도 제대로 한 것인지 확신이 없다. 인터넷에 찾아보면 다양한 글들을 볼 수 있지만 누구 말이 맞는 말인지도 모르겠다. 뿐만아니라 사용 중인 플러그인이 보안문제를 일으킬 수도 있다. 실제로 사용 중이었던 슬라이더 플러그인에 보안 문제가 있다고 소문이 돌아 해당 플러그인을 삭제했던 적이 있다. 유료 플러그인이야 곧 업데이트해서 문제를 해결할 테지만, 무료 플러그인은 많은 기대를 하지 않는 것이 좋다.

  3. 어설픈 마크다운(markdown)

    Wordpress에 기본 내장된 글쓰기 도구는 마크다운(markdown)을 온전히 지원하지 않는다. 클래식 에디터Gutenberg든 마찬가지다. 2018년 기준으로 클래식 에디터는 아예 지원하지 않을 뿐 더러 Gutenberg도 마크다운 복사/붙여넣기가 될 뿐 직접 작성하는 것은 안 되는 것으로 알고 있다. 마크다운을 사용하려면 추가적으로 플러그인을 설치해야한다. 마크다운 플러그인은 여러 종류가 있어서 그 중에 마음에 드는 플러그인을 골라야 한다.

    마크다운에 매력을 느끼고 편하다고 생각하는 것은 오로지 키보드만으로 빠르고 쉽게 문서를 작성할 수 있기 때문이다. 중간에 마우스가 필요하다면 글쓰는 흐름을 잃어버린다. 나를 비롯하여 많은 사람들이 키보드 만으로 써내려 가는 것을 중요하게 생각한다. 마우스를 쓰지 않는다니 갸우뚱할 수 있겠지만 오히려 더 빠르게 글을 작성할 수 있다. 거기에 시원시원한 느낌은 덤이다. 그런데 Wordpress에서 마크다운을 쓰려면 마우스가 꼭 필요하다. 오히려 마우스가 없으면 매우 불편하다. 그렇기 때문에 마크다운을 쓰면서도 쓰는 것 같지 않고 불편하다. 온전하다는 느낌이 들지 않는다. 온전한 마크다운 경험을 하려면 에디터를 처음 켜서 글을 다 써서 발행할 때까지 오로지 키보드만으로 충분히 가능해야 한다. 그러한 경험을 한번이라도 하고 나면 절대 빠져나올 수 없다. 이 말은 진짜다. 간단한 회의록도 마크다운으로 작성하고 있는 자신을 발견할 것이다.

  4. 은근히 많은 지출

    설치형 Wordpress 블로그를 운영하면서 지출이 발생하는 경우에 대해 살펴보자. 유료 플러그인 구매, 호스팅 이용료, 도메인 이용료 이렇게 3가지로 나눌 수 있다. 3가지 모두 옵션 사항이지만 개인 서버가 없다면 호스팅 이용료가 필수적이다. 호스팅만 따지고 보면 커피값 수준에서 현명한 선택을 할 수 있다. 보통 도메인 비용은 한달에 1,000원 정도로 호스팅 비용보다 더 저렴하기 때문에 크게 걱정하지 않아도 되지만 플러그인 구독까지 하게 되면 매달 나가는 지출이 크다. 플러그인 구독 비용은 일반적으로 5,000원에서 9,000원 정도를 매달 내야 한다. 그런 플러그인이 여럿이라면 필요 이상의 지출이 아닌지 고민해보길 바란다. 가랑비에 옷 젖듯이 많은 돈이 나가고 있을 것이다.

Gatsby로 옮기면서

정적사이트 생성기(Static Site Generator)에는 Gatsby 외에도 Hexo, Hugo, Jekyll이 유명하다. Github Pages에서 공식적으로 Jekyll을 추천하고 있었지만, 여타 블로그들을 조사해본 바에 따르면 지킬은 작성한 글이 많을 경우 빌드시간이 한세월이라는 말이 있었다. 그래서 Jekyll을 제외한 다른 것들 중에서 Gatsby를 선택했다.

솔직한 말로 나는 웹프로그래밍에 대해선 잘 모르기 때문에 Gatsby를 선택할 때 React를 배워보고 싶은 마음에 선택한 것이 크다. Go언어로 만들어진 Hugo도 흥미로웠지만 Go보다는 JavascriptReact를 배우고 싶은 마음이 더 간절했기 때문에 Gatsby를 선택했다. Hexo구글 트렌드 결과에서 Gatsby보다 훨씬 더 많이 검색되고 있었지만 나에겐 그 점이 오히려 더욱 Gatsby를 선택하게 만들었다. 남들이 많이 배운 걸 특별한 이유나 동기부여도 없이 그냥 따라가는 게 묘하게 기분 나쁘기 때문이다.

Gatsby 튜토리얼

내 생각엔 이 Gatsby 튜토리얼(유튜브 링크)이 가장 친절한 튜토리얼이라 생각한다. 처음에 개발환경조차 없는 환경에서 Node.js(노드js) 설치부터 Netlify(넷리파이)에서 배포(deploy)하는 것까지 그야말로 따라 하는 것만으로도 많은 것을 배울 수 있다. 이 블로그도 이 튜토리얼에서 출발했다. 튜토리얼이 자세한 만큼 길지만 몇 번에 나누어 들으면 괜찮을 것이다. 약 4시간 40분 정도 길이이고, 나는 일주일 동안 나누어 들었다.

Gatsby의 장점

나는 아직 Gatsby를 써본지 2주일 정도 밖에 되지 않아서 뭐가 좋다 나쁘다 평가하는 건 깊이가 없지만, 확실히 만족스러운 점 정도만 간략하게 정리하려고 한다.

  • 마크다운 완벽 지원

  • 다양한 플러그인 제공

  • 실시간 미리보기

    코드나 포스트를 수정하면 실시간으로 localhost(로컬호스트)에서 확인할 수 있다. 실제 블로그에 올라갈 모습을 그래도 볼 수 있기 때문에 무척 편리한 기능이다.

  • 하이퍼링크 최적화

    링크를 걸 때, 단순히 html 태그로 거는 것보다 Gatsby 태그를 거는 것이 훨씬 빠른 반응속도를 제공했다. 반응속도가 상당히 시원시원해서 인상적이었다.

단점은 아직 잘 모르겠고, 굳이 꼽자면 새로운 테마를 꾸미고 싶으면 일일이 코딩해야 한다는 것인데.. 애초에 그런 걸 배우려고 Gatsby를 선택했으니 모든 사람에게 공통되는 단점이라고 말하긴 어렵다.

지인에게 추천한다면

당연히 프로그래밍 경험이 조금이라도 있거나 컴퓨터 친화적이라면 Gatsby(가츠비)를 추천해 줄 것이다.

반대로 프로그램 코드와 친해지기 싫은 지인이라면 상황에 따라 Wordpress, 티스토리, 블로거 정도를 추천할 것이다. 국내 유입이 주된 목표이고 유행에 민감한 주제만 포스팅해서 작성되는 글들의 수명이 짧은 블로그라면 네이버 블로그도 고려해볼 수 있겠다. 반대로 말하자면 수명이 긴 전문적인 내용을 다룰 수록 네이버 블로그는 피하는 것이 좋다는 말이다.