반응형 웹사이트 구현은 생각보다 귀찮은 작업입니다. 그저 단순히 PC와 Mobile 화면에서 다르게 보이는 것으로는 부족하기 때문이죠. 그래서 오늘은 엘리멘터 플로그인을 활용한 워드프레스 반응형 홈페이지 만들기 핵심 요소를 정리해 보았습니다. 관련 이슈에 고민하고 있는 분들에게 도움이 되길 바랍니다.
UI/UX 디자인, 워드프레스 반응형 홈페이지 만들기
사용자 인터페이스를 최적화하고 방문자에게 좋은 경험을 만드는 게 최근 워드프레스 반응형 홈페이지 만들기에서 가장 중요한 이슈가 되었습니다. 이전에만 해도 워드프레스 자체가 반응형이란 사실 때문에 관련 툴을 이용하는 과정에서 별도로 신경 쓰지 않았는데 이제 사정이 달라졌어요.
우선 다양한 디바이스 환경이 반응형 디자인을 더 어렵게 만들었죠, 모니터 화면 크기가 더 다양해졌고, 모바일 환경에서도 와이드 값이 천차만별 입니다.
따라서 대안을 이제 하나밖에 없습니다.
워드프레스 홈페이지 만들기 전 과정에서 테블릿, 모바일, PC 모두 커스텀으로 디자인 되어야 하는 것이죠. 이 과정에서 필자가 추천하는 플러그인은 엘리멘터(elementor) 빌더 입니다.
UI가 최적화 되면 당연히 UX가 좋아질 것이기에 워드프레스로 홈페이지를 제작해야 하는 우리의 고민은 하나로 귀결됩니다. 바로 다양한 환경(디바이스)에서 섹션과 컬럼 레이아웃을 반응형으로 디자인하는 것입니다.
엘리멘터 빌더를 활용한 워드프레스 반응형 홈페이지
필자가 엘리멘터를 추천하는 이유는 오늘 우리가 고민해야 할 웹사이트 기본 구조(레이아웃)를 커스텀으로 디자인하기 유리한 플러그인이기 때문입니다.
물론 비쥬얼 컴포저나 비버빌더와 같은 플러그인 역시 동일한 기능을 제공하지만 반응형 마진이나 컬럼 위치 변경 등 더 많은 옵션을 제공하기에 워드프레스 반응형 홈페이지 제작에서 더 없이 좋은 편집기 역할을 하죠.
엘리멘터 빌더 사용 경험이 없는 분이라면 해당 플러그인과 우선 친해져야 하겠지만 드래그인 드롭 방식이라 어렵지 않습니다. 최근 엘리멘터 관련 영상도 많고 웹문서를 검색해서 충분히 배울 수 있으니 참고해 보세요.
무엇보다 초기 디자인 과정에서는 무료로 사용 가능하기 때문에 초보 워드프레스 사용자에겐 최고의 편집기 입니다.
워드프레스 반응형 디자인 사례
앞서 이야기한 부분을 실제로 적용했던 사례 하나를 가져와 봤습니다. 단순히 적용된 워드프레스 반응형 구조가 아니란 걸 여러분도 확인할 수 있는데요, 가장 기본적인 변화가 바로 이미지와 폰트 순서가 바뀐 것입니다.
엘리멘터 빌더 편집 화면에는 기본적으로 콘텐츠, 스타일, 고급 탭을 확인할 수 있는데, 이중 워드프레스 반응형 홈페이지 제작에 필요한 대부분 기능은 고급탭에 있습니다.
레이아웃 마진을 내부와 외부에서 변경하는 과정은 PC, Mobile, Tablet 화면에서 각각 설정하는 게 좋습니다.
초기 작업 과정에서는 최소한 모바일과 데스크탑을 번갈아 확인하며 지리한 반복 작업을 해야 하지만 익숙해 지면, 어떤 부분에서 반응형이 적용 되어야 하고 UI를 고려한 구조는 어떻게 결정하는게 좋을지 자연스럽게 알 수 있습니다.
핵심은 이렇게 구조를 결정하고 좌우 상하 여백과 패딩 개념을 이해하는 것입니다. 마진은 외부 마진을 의미하고 패딩은 섹션과 컬럼의 내부 마진을 뜻합니다. 이것으로 워드프레스 반응형 홈페이지 만들기에서 모든 디바이스 환경에서 화면의 상하 간격, 좌우 간격을 조절하는 것이죠.
그리고 앞서 이야기한 것 처럼 엘리멘터 빌더가 제공하는 반응형 옵션에서 “컬럼 반전” 기능을 활용하면 웬만한 레이 아웃은 반응형으로 디자인 할 수 있습니다.
워드프레스 홈페이지 만들기에 도전하세요.
필자가 늘 강조하는 부분이지만 꼭 개발이나 디자인에 소질이 없더라도 워드프레스 홈페이지 만들기에 한 번 도전해 보세요. 여러분이 사업을 하거나 현재 하고 있는 비즈니스를 확장하기 위해서 온라인 시장에 자사 홍보 채널을 구축하는 건 매우 중요합니다.
워드프레스 홈페이지는 단순히 회사 소개를 위한 기능 이외에 지속적인 콘텐츠 제작으로 브랜드 관련 키워드 검색 결과에 자사 브랜드를 알릴 수 있는 최선의 방법입니다.
관련 툴에 대한 장점은 너무나 많지만 검색엔진 최적화 기능은 단연 최고라 할 수 있습니다. 이를 활용하고 오늘 소개한 반응형 디자인 기초만 터득한다고 해도 혼자서 워드프레스 홈페이지 만들기는 가능할 것입니다.
이때 엘리멘터 플러그인이 당신을 도울 수 있습니다.
필자 역시 독학으로 워드프레스를 시작했으며, 현재 국내는 물론 해외에서까지 웹사이트 제작 의뢰를 맡아 또 다른 도전을 준비하고 있으니 여러분도 분명 할 수 있을 것입니다.
광주, 인천 지역이라면 워드프레스 오프라인 강의 신청을 통해 시간을 절약할 수 있습니다. 관련해 자세한 내용은 하단 링크를 참고할 수 있습니다.
에디터 : 오엠지 디자인
cmgcmocm@gmail.com
