먼치스킬 웹사이트 제작하기 시리즈
- 왜 디자이너가 직접 웹사이트를 만드나요? / 웹빌더 소개
- wordpress.com과 Elementor 플러그인으로 디자인하기
- 웹사이트라면 필요한 SEO, 성능 최적화, 마케팅, 그리고 다언어 지원
먼치스킬 웹사이트 제작하기 (2/3)
이번 포스팅에서는 Elementor 플러그인을 사용해보고 느낀 점을 소개하려고 합니다. 하나의 글에서 Elementor의 모든 기능을 설명하기에는 이미 Elementor Academy나 유튜브 영상들이 잘 되어 있기 때문에 필요 없을 거라 생각합니다. 다른 웹빌더를 경험해 보고 웹디자인 작업을 해본 디자이너로서 느낀 바를 적었습니다.
플랜 구독 및 세팅
wordpress.com을 제대로 사용하기 위해 Pro 플랜을 결제했습니다. (지금은 가격 정책이 바뀌어서 Business 플랜 및 몇 가지 플랜이 있습니다.) Elementor는 무료 플랜으로도 충분하다고 들었으나 작업 중에 막힘없이 진행하려고 Pro 플랜을 구입 후 도메인을 연결하여 시작했습니다.
- WordPress Pro Plan
- USD 180 / Year
- Elementor Pro Essential Plan
- USD 49 / Year
디자인 시작하기
Elementor를 에디터를 진입하려면 WordPress 어드민에서 페이지를 생성 후 WordPress 에디터에서 다시 Elementor 에디터로 들어가야 합니다. WordPress의 순정 상태가 아닌 플러그인이기 때문에 처음에는 어색하거나 이질감이 있었습니다. 항상 워드프레스의 에디터를 지나서 Elementor 에디터로 진입을 해야 했기에 불안함도 있었구요. 그래서 바로 진입할 수 있는 퀵 메뉴는 지원하고 있습니다.
섹션 단위 디자인 적응하기
Elementor 에디터에 들어오게 되면 좌측 사이드바에서 대부분의 작업이 진행됩니다. 섹션을 생성하고 위젯을 넣을 수도 있고 칼럼을 쪼개서 배치할 수도 있지만 마우스 드래그 & 드롭으로 원하는 위치에 배치하는 방법은 없습니다. Position 값을 Absolute로 지정해서 원하는 위치에 배치할 수도 있지만 이 또한 수치로 입력해야 하고 모든 반응형 환경에 대해 대응하는 작업이 필요하기 때문에 추천하지 않습니다.
원하는 위치에 배치하려면 원하는 섹션에 칼럼을 쪼개고 비율을 맞춘 뒤 위젯을 배치합니다. 이후에 마진과 패딩 및 사이즈를 수치로 조정하여 배치하는데요. 처음 시작할 때는 이 부분이 어색하고 번거로웠습니다. 이 방법을 응용하는 방법으로 마이너스 마진을 활용해서 각 오브젝트를 겹쳐서 배치하거나 화면 그리드 바깥으로 튀어나오게 배치할 수 있어서 신선한 느낌이었는데요. 이러한 방식이 드래그 & 드롭으로 배치할 때 생기는 오차를 없앨 수 있고 정확하게 떨어지는 화면 디자인을 만들 수 있어서 장점이 컸습니다.
실제 웹 구조는 이런 식으로 짜여 있구나 이해할 수 있었고 이론적으로 알고 매번 헷갈리던 마진과 패딩의 개념을 Elementor 에디터로 작업해 보면서 제대로 느껴볼 수 있었던 것 같습니다.
이전에 웹페이지를 개발자와 함께 만들어 나갈 때는 이미지를 반쯤 겹쳐 놓거나 그리드 바깥으로 튀어나오는 이미지의 경우 전체 이미지로 묶어서 전달하곤 했었습니다. 하나하나 가이드를 짜거나 설명을 해야 하는 커뮤니케이션 비용이 들다 보니 쉽게 갔던 적이 많았는데요. 그림자 표현 또한 이미지에 붙여서 보냈습니다.
Elementor와 같은 웹빌더를 사용하면서부터는 가장 기본적인 사각 이미지만을 사용하여 이미지의 용량을 줄일 수 있었고 그림자나 간격 조정은 퍼블리싱 된 화면을 보면서 직접 세세하게 조정할 수 있어서 편리할 뿐만 아니라 커뮤니케이션 비용도 줄어들었습니다. 별도의 개발 지식 없이 실제 웹브라우저에서 어떻게 표현되는지 실시간으로 확인하면서 조절이 가능했기에 재밌었네요.
Elementor에서 지원하는 디자인 시스템과 사이트 세팅
Elementor 내에서도 자주 사용하는 컬러, 폰트, 커스터마이징한 위젯은 글로벌 컴포넌트로 지정하여 활용할 수 있습니다. Call to Action 버튼 배너의 경우에도 여러 페이지에서 사용하게 되는데 글로벌로 지정해 놓으면 일괄 수정이 가능합니다.
Custom Fonts는 Wix에서도 지원했지만 불안정했었는데요. Elementor에서는 font-weight 별로 확장자(TTF, WOFF, WOFF2) 별로 구분해서 각각 업로드할 수 있었습니다. 커스텀 폰트로 글로벌 폰트를 지정해 놓으면 매번 폰트 적용 때문에 스트레스 받는 일은 없어졌습니다.
Custom CSS
다른 웹빌더나 워드프레스 자체에서도 지원하듯이 Elementor가 지원하지 않는 부분은 Custom CSS로 추가가 가능합니다.
한국어로 웹디자인을 하다 보면 음절 단위로 줄바꿈이 되어버려 어색한 경우가 있는데요. 한국어에서만 word-break로 어절 단위로 줄바꿈이 되도록 설정하고 단어가 너무 길어 컨테이너를 넘어가 버릴 때는 음절 단위로 줄바꿈이 되도록 word-wrap을 추가해 주었습니다.
/*Code for ko-KR language*/
html {
word-wrap: break-word;
}
html[lang="ko-KR"] {
word-break: keep-all ;
}예쁜 웹사이트들을 보다 보면 마우스로 드래그했을 때 브랜드 컬러가 보이도록 컬러가 바뀌었는데요. 이 부분도 어떻게 설정하는지 한참 구글링하다가 발견하여 추가해 주었습니다.
/*텍스트 긁었을 때 컬러 변경*/
::selection {
background-color: #3294EE;
color: white;
}Elementor를 사용하여 문제점
버그
에디터에서 작업 후 화면도 확인했으나 맥에서만 정상이고 윈도에서는 마진이 잘못 들어가거나 모서리 라운드 처리가 빠지는 등 문제가 생기는 경우가 종종 있었습니다. 위젯 자체 문제라면 직접 해결할 방법은 없었기에 대체 위젯을 찾거나 버그를 피해 갈 수 있는 방법으로 디자인을 변경하기도 했습니다.
플러그인을 위한 플러그인
Elementor에서 웹디자인 작업을 하다 보면 드롭다운, 필터, Form 등의 기능이 들어간 경우 위젯을 사용해야 하고 위젯의 커스터마이징에는 한계가 있습니다. Elementor Pro 플랜을 사용하고 있음에도 불구하고 디자인 작업에는 부족한 점이 많았는데 이것을 추가 위젯을 제공하는 다른 플러그인으로 대체할 수 있습니다.
플러그인을 위한 플러그인인데요. 활용하면 대부분의 디자인 이슈는 해결할 수 있지만 워드프레스는 플러그인을 깔면 깔수록 무겁고 불안정해집니다. 추가 플러그인을 사용해서 잘 해결되면 그나마 다행인데 상호 충돌이 있거나 설정을 해도 제대로 적용되지 않는 버그들이 있었습니다. 원인을 모두 찾을 수도 없기에 사용하기 어렵다 싶은 위젯은 과감하게 포기하고 플러그인을 삭제해가며 사용해야 했습니다.
플러그인 간의 충돌
사용하는 플러그인으로 Elementor 외에 다언어 지원을 위해 WPML, Google Analytics와 Tag Manager 등을 설치하기 위한 Site Kit 플러그인, SEO를 위한 플러그인 등을 설치하면서 웹사이트의 속도 문제와 가끔 일어나는 충돌을 해결해야 했습니다. 대부분은 캐시를 삭제하고 플러그인을 하나씩 Deactive 하다 보면 해결됩니다.
그럼에도 WordPress 와 Elementor를 사용하는 이유
WordPress/Elementor를 쓰면서 막히는 부분도 많았지만 그래도 가능성을 보았던 것은 구글링을 했을 때 나오는 커뮤니티나 포럼의 글이 많았고 이미 예전부터 같은 고민을 했던 사람들의 흔적을 볼 수 있었습니다. 대부분은 해결되었고 혹시 해결점을 찾지 못한 문제도 CS를 통해서 대부분 해결할 수 있었습니다. 시차가 있을 거라 생각되는데도 항상 빠르게 지원을 받을 수 있었네요.
WordPress 어드민은 어째서 이런 구조인지 이해가 되질 않았고 한동안 헤맨 적도 있었는데요. 하지만 계속해서 사용해 보면서 WordPress에는 오랜 히스토리가 있었기에 이런 구조까지 오게 되었구나 깨닫게 되는 부분도 있었습니다.
Wix에서 하지 못했던 디테일을 잡을 수 있었던 점은 여전히 매력적이었고 Webflow를 다시 배운다 하더라고 시간이 부족할 거라 예상이 되었는데요. Webflow로 소개 페이지까지 만든다 하더라도 다언어 기능 및 블로그 세팅까지 빠르게 잡으려면 원하는 기간 내에는 어려울 것이라 생각했습니다.
작업 중간에 어려움이 있어도 해결 가능할 것이란 믿음이 있기에 계속해서 WordPress를 공부해 보고 있습니다.
다음 포스팅은 WordPress와 Elementor로 웹사이트를 구축하면서 사용했던 다른 여러 플러그인에 대한 내용으로 이어집니다.