먼치스킬 웹사이트 제작하기
- 왜 디자이너가 직접 웹사이트를 만드나요? / 웹빌더 소개
- wordpress.com 과 Elementor 플러그인으로 디자인하기
- 웹사이트라면 필요한 SEO, 성능 최적화, 마케팅, 그리고 다언어 지원
먼치스킬 웹사이트 제작하기 (3/3)
지난번 포스팅에서는 WordPress와 Elementor로 웹사이트 디자인까지를 이야기했다면 이번 포스팅에서는 그 외 필요한 기능 설치, 디자인만 하고 개발팀에 넘겼을 때는 몰랐던 웹사이트 세팅에 대해서 이야기해보려고 합니다.
WordPress에서 사용했었던 플러그인들 중 웹사이트 구축에 중요했던 순서대로 정리해 보았습니다.
WPML
대한민국에서 한국어로 서비스 개발을 시작했다면 보통 국내 시장에 집중하겠지만 영어, 더 나아가서는 일본어 지원을 고려하는 스타트업들이 많을 거라고 생각합니다.
먼치스킬을 처음 시작했을 때도 영어권 진출을 위한 준비로 영어 웹사이트를 고려해야 했는데요. 처음 워드프레스를 검토했을 때도 다언어 지원이 잘 작동하는지에 대한 여부가 컸습니다.
다언어 지원 기능은 크게 2가지 방식이 있다고 보고 있습니다.
첫 번째는 웹사이트에 별도의 번역 플러그인을 붙이고 해당 웹페이지 위에서 텍스트들을 번역된 텍스트로 바꿔주는 방식입니다.
두 번째는 동일한 웹페이지를 복제하여 별도의 페이지에서 번역된 콘텐츠를 만드는 방식입니다.
첫 번째 방식은 번역을 하려면 번역 에디터를 통해서 텍스트를 번역하고 웹페이지에 반영됩니다. 웹사이트의 디자인이 수정되더라도 원문 페이지와 번역 페이지는 자동으로 같이 수정됩니다.
단점은 단순 번역이 아닌 로컬라이즈를 해야 할 때 문제가 있는데요. 원문에는 있는 콘텐츠를 번역 페이지에서는 숨기고 싶을 수 있습니다. 첫 번째 방식은 원문과 번역문이 1:1 매칭되어야 하므로 쉽게 처리가 어렵습니다. 이미지에 들어간 텍스트도 이미지 URL을 교체하는 방식으로 번역이 가능하지만 관리하기에 조금 까다롭습니다.
두 번째 방식은 원문 페이지와 번역 페이지가 별도이기 때문에 전혀 다른 페이지가 나오거나 번역 페이지가 아예 존재하지 않아도 문제가 없습니다.
단점은 웹사이트의 디자인이 변경되었을 때, 자잘한 수정사항이 있을 때 각각 따로 작업을 해주어야 합니다. 지원하는 언어 수가 적으면 문제 되지 않겠지만 지원 언어가 많다면 작업량이 늘어나게 됩니다.
WordPress+WPML 조합을 사용하면서 알게 된 장점은 첫 번째 방식과 두 번째 방식을 섞어서 쓸 수 있다는 점이었는데요. 각 페이지별로 WPML 에디터를 연결할지 페이지를 복제해서 관리할지 선택할 수 있습니다.
하지만 사용하기에 UX/UI가 잘 되어있다고는 생각이 들지 않았는데요. 설정을 잘못 조작하다 보면 원인을 모르는 에러가 발생했습니다. 해결이 안 된다면 플러그인을 재설치하고 처음부터 다시 세팅해 보면서 하나씩 알아나갔습니다. 적응이 되고 나서는 원하는 대로 사용하는데 문제없게 되었네요. 소소하게는 언어 셀렉터 디자인이 원하는 만큼은 커스터마이징이 어렵다는 점이 아쉬웠습니다.
그 외에는 Weglot이란 플러그인을 Ghost 기반 블로그에 설치하여 다언어로 운영해 본 경험이 있는데요. Weglot의 구독 모델은 블로그와 전혀 맞지 않았습니다.
번역된 글자 수로 가격을 매기기 때문에 포스팅을 올리다 보면 금방 제한 용량에 부딪힙니다. 글자 수 제한에 부딪혔는데도 불구하고 포스팅을 하다 보면 최초에 올렸던 글부터 임의로 번역이 풀리기 시작하는데요. 자동 번역이 아닌 수동 번역이었기에 용량을 확장해도 기존의 번역이 복구가 제대로 안되었습니다.
또한 포스팅을 하다 보면 영어만 있거나 한국어만 있는 포스팅이 있을 수 있는데요. 해당하는 언어가 없는 경우 포스팅을 숨길 수 없어서 원문이 그대로 노출되는 단점이 컸습니다.
Yoast SEO
웹사이트를 구축했다면 첫 번째로 고려해야 할 부분이 검색엔진 최적화(SEO)로 검색이 잘 되는가였습니다.
예전에 디자인만 작업했었을 때는 그냥 흘려들었던 개념이었고 내부 마케터나 영업 팀원의 요청이 들어오면 검색 시 보일 섬네일 디자인이나 네이버 파워 애드에 올라가는 이미지 작업등을 했었습니다.
WordPress로 웹사이트를 구축해 보면서 직접 SEO를 챙겨주어야 했는데요. Google과 Naver의 서치 콘솔 등록에 필요한 것들은 모두 설정했지만 웹사이트의 콘텐츠가 SEO에 적합한 지는 알 수 없었기에 SEO 플러그인을 설치해서 사용해 보았습니다.
페이지별 메타 태그, 섬네일, SNS 등에 공유 시 나오는 내용을 다듬어 볼 수 있었구요. 플러그인이 페이지 별로 SEO 점수를 매겨주는데 어떻게 콘텐츠를 짜야 검색이 잘 되는지 가이드를 해주었습니다.
각 웹페이지마다 포커스 키워드는 무엇인지 그 키워드가 웹페이지 곳곳에 잘 묻혀있는지, 이미지와 하이퍼링크는 충분히 있는 지 등 부족한 부분을 집어주는 역할을 합니다. 어떤 키워드로 검색이 되고 싶은지 고르는 것은 쉽지만 그 검색어에서 노출되기 위해 필요한 노력은 가볍지 않았습니다.
한국어에 최적화되어 있지 않은 점은 조금 불편했는데요. ‘먼치스킬’이라는 단어는 인식하지만 ‘먼치스킬을’과 같이 조사가 붙으면 플러그인에서 인식하지 않아서 SEO 점수가 오르지 않았습니다. 다만 구글 자체에서는 검색 때 인식하는 것으로 보여서 문제는 없는 것 같네요.
Site Kit by Google
Google Analytics, Tag Manager, Google Ads 등 직접 스니펫을 넣어주어도 되지만 플러그인으로 쉽게 연동하고 워드프레스 어드민 화면 내에서 상태를 확인할 수 있도록 대시보드를 지원하고 있습니다. 하나의 플러그인으로 연결된 구글 제품들을 관리할 수 있어 편리했습니다.
WP Rocket
웹사이트를 디자인하고 이미지와 위젯을 이것저것 넣다 보니 파일 용량에 대해서는 그렇게 신경 쓰지 않았습니다.
Elementor에서 지원하는 위젯도 많이 쓰게 되면 한 웹페이지에 들어가는 JavaScript 용량이 늘어나 웹사이트 속도가 느려지게 되는데요. PageSpeed Insights에서 확인해 보니 처참한 속도를 받았습니다.
일단 간단히 해결할 수 있는 방법은 캐시 플러그인을 사용하는 것이었고 기본 설정을 해 놓는 것만으로도 어느 정도 도움이 되었는데요.
CSS나 JavaScript에서 불필요한 스크립트를 없애주는 기능도 있었고 사용하면 효과는 좋았지만 브라우저 환경에 따라 화면이 제대로 출력되지 않아 모두 껐습니다.
캐시 플러그인을 알게 되면서 CDN(Contents Delivery Network)이라는 개념도 알게 되었습니다. 유저와 가장 가까운 거리의 서버에서 데이터를 가져올 수 있도록 하여 속도를 올린다는 개념으로 이해했습니다. WP Rocket에서도 CDN을 지원하고 있지만 월간 구독 플랜이라 브랜드 사이트의 속도를 위해 매월 비용을 태우는 것은 불필요한 것 같아 포기하게 되었네요.
Imagify
웹사이트에 올라간 이미지를 자동으로 최적화해 줍니다.
이미지 파일을 매번 tinypng로 용량을 줄이는 방법도 있지만 png 형식보다 압축률이 좋은 형식들이 있었고 이를 자동화 해주는 플러그인이 Imagify 였습니다. jpg, png 파일을 Webp로 변환해 주는데요. 이미지의 용량이 최적화되는 것은 확인했지만 원본 자체가 너무 용량이 크다면 최적화되어도 속도가 아쉬운 부분들이 있어서 너무 크지 않는 이미지로 만들어서 올리는 게 좋은 것으로 보입니다.
Channel.io (채널톡)
무슨 서비스를 하든 CRM용 SaaS가 필요한 시점이 온다고 생각합니다. 이전 회사에서는 Zendesk를 써보았고 먼치스킬을 만들 때는 Intercom을 사용해 보았는데요. 결국은 채널톡으로 이사하게 되었습니다.
가장 큰 이유는 비용이었는데요.
Intercom을 사용해 보면서 Zendesk보다 유려한 UX/UI 디자인이 되어있다고 느꼈습니다. Admin에서 한국어를 지원하지 않지만 충분히 단점을 커버하고도 남을 것이라고 생각했는데요. 헬프센터 기능을 사용해 보니 구입한 베이직 플랜으로는 헬프센터가 다언어를 지원하지 않았습니다.
그래서 플랜 업그레이드를 하려니 구매 페이지는 없고 상담사 연결만 있어서 조금 당황스러웠습니다. 상담사와 채팅 상담을 해보니 최소한의 플랜으로 짜도 연간 약 888달러가 요구되었습니다. 팀 멤버도 2명이면 충분했지만 최소가 5명이었구요.
채널톡을 오래전부터 알고 있었지만 사용하지 않았던 것은 국내 서비스라 다언어를 잘 지원하는 지에 대한 의문 때문이었습니다. 다시 살펴보니 영어, 일본어를 지원한다는 것을 확인하고 갈아타기로 결정합니다.
Zendesk나 Intercom처럼 상담사 Seat 숫자로 계산기를 두드리지 않아서 좋았고 생각보다 많은 기능이 잘 구축되어 있어서 편리했습니다.
헬프센터 웹사이트 기능이 없고 이메일은 별도 서비스를 알아봐야 한다는 점은 아쉬웠지만 역시 한국 서비스라 카카오톡도 쉽게 연결할 수 있는 점은 국내에서 사용하기에 큰 메리트였습니다.
Stibee (스티비)
워드프레스로 블로그를 운영하면서 고민되었던 부분은 이메일 뉴스레터였습니다. 보통 이메일 뉴스레터로 검색을 하다 보면 메일침프가 가장 유명한데요. 이전에도 메일침프를 써보고 이메일 템플릿 디자인을 해보았지만 원하는 데로 편집이 되지 않아 너무 불편했던 기억이 있습니다. 오히려 Sendgrid라는 서비스를 알게 되었고 디자인 에디터 구조는 비슷했지만 좀 더 유연하게 디자인이 가능했습니다.
Stibee 또한 채널톡처럼 한국 서비스이기에 Sendgrid 보다는 마음 편하게 사용할 수 있었고 이메일 템플릿 디자인 특성상 완전히 자유롭게 만들 수는 없지만 정해진 한도 내에서 타협이 가능한 디자인을 만들어 낼 수 있어 채택하기로 했습니다.
워드프레스 플러그인을 지원하지만 워드프레스 업데이트에 매번 빠르게 지원은 하지 못하고 있는 것으로 보여서 직접 추가 코드를 넣어 구독하기 버튼을 만들었습니다.
마치면서
WordPress로 브랜드 웹사이트를 그래도 본궤도에 올리고 나니 Wix로 만들었던 때보다 완성도가 높아 만족스러운 점은 있었지만 버그나 성능 문제, 디자인의 한계점 등으로 아쉬움도 남습니다. 자유롭고 크리에이티브한 디자인은 어렵지만 어느 정도의 완성도로 웹사이트 구축까지 혼자서 완성을 할 수 있다는 점이 강점인 것 같습니다. 기회가 된다면 Webflow나 더 좋은 솔루션을 배워서 바꿔보고 싶습니다.