엘리멘터 섹션 레이아웃 반응형 워드프레스 디자인 설정
워드프레스 엘리멘터 섹션 레이아웃 설정이 반응형 디자인을 위해 가장 중요한 단계지만 이 부분에 대해 명확한 정보가 없는 것으로 확인되고 있어 준비한 포스팅입니다. 웹디자인 과정에서 다양한 화면 폭을 고려해 기기와 관계 없이 콘텐츠가 동일하게 보이도록 하는데 도움이 되는 내용입니다.
엘리멘터 섹션 레이아웃 설정 이해하기
사이트 구조에 포함되는 요소는 폭(와이드 값). 열(컬럼), 그리고 정렬 세 가지를 의미합니다. 그중에서도 가장 기본이 되는 건 전체 사이트 너비를 지정하는 것입니다.
이 세 가지 레이아웃 구성 요소를 설정하는 방법은 기본적으로 섹션 레이아웃 설정에서 시작합니다.
이미지와 같이 엘리멘터 빌더를 사용해 새로운 페이지 하나를 디자인한다고 가정할 때 섹션을 만든 후 엘리멘터 편집기 상단 좌측 “레이아웃” 탭에서 반응형 디자인을 위한 기초 설정을 할 수 있습니다.
우선 콘텐츠 너비는 컬럼 사이즈를 지정하는 것으로 이해하시면 되는데, PC 기준의 모니터 사이즈가 기기마다 다르다는 걸 우선 이해한 뒤 해당 설정을 시작하는 게 좋습니다.
아이맥과 맥북 모니터 화면 사이즈는 다를 수 밖에 없습니다. 물론 다른 브랜드 역시 마찬가지죠. 따라서 콘텐츠 너비 지정을 전체 너비로 했을 경우 여러분의 생각과 다른 이미지 사이즈나 텍스트 줄 바꿈이 이뤄질 수 있죠.
이건 모바일 반응형 디자인 개념과는 조금 차이가 있습니다. 즉 PC 모니터 마다 와이드 값이 다르기 때문에 전체 화면으로 디자인 된 사이트는 모든 기기에서 콘텐츠를 동일하게 보이도록 하는 건 불가능 합니다.
그래서 오늘은 사이트 폭을 전체 너비가 아닌 지정 너비로 설정할 때를 기준으로 설명해 보겠습니다.
적절한 콘텐츠 너비가 중요한 또 다른 이유
혹시 검색엔진 최적화(SEO)를 위해서도 전체 너비 사이트 보다는 사용자 지정 너비를 사용해야 한다는 걸 알고 있습니까?
워드프레스 사이트는 기본적으로 반응형 디자인과 검색엔진 최적화를 기반으로 제작 되어야 합니다. 우리가 워드프레스를 사용하는 이유이며 가장 큰 매력이기 때문이죠.
그런데 콘텐츠 너비가 너무 크다면 본문 텍스트는 물론 이미지 디자인에서 모든 기기에 효과적으로 적용되지 않는 건 물론이며, 웹사이트 로딩 속도도 느릴 수 밖에 없습니다.
또한 이것은 사용자 가독성을 떨어뜨리는 결과를 가져옵니다. 특히 사이드바가 없는 페이지 디자인에서 전체 화면을 사용하는 엘리멘터 섹션 레이아웃 설정은 해당 모니터 크기에 맞춰 디자인할 수 밖에 없고 이를 모든 기기에 원하는 사이즈로 반응하도록 적용하는 건 불가능에 가깝습니다.
따라서 우린 워드프레스 사이트 구축에서 적절한 사용자 지정 사이즈 너비를 사용하는 걸 추천합니다.
이미지 사용이 많은 시각적인 디자인에서도?
그렇다고 모든 워드프레스 디자인에서 전체 너비를 사용해서 안된다는 이야기는 아닙니다. 홈페이지 제작에서 디자인 컨셉이 이미지나 영상 위주로 구축해야 하는 섹션이나 사이트 전체 디자인이라면 예외일 수 있습니다.
예를 들면 모니터 좌측 전체에 움직이는 이미지 효과를 주고 싶다면 기본적으로 엘리멘터 섹션 레이아웃 설정에서 콘텐츠 너비를 전체 넓이로 설정해 주는 건 당연합니다.
따라서 어떤 디자인을 고려하는지에 따라 사이트 전체 너비나 콘텐츠(본문) 너비를 결정하는 게 좋습니다.
전체 사이즈 1280PX, 좌우 여백 100PX 이하로 설정하기
본사가 추천하는 워드프레스 사용자 지정 너비는 PC 기준으로 1280PX 와이드 값에 좌우 여백을 100PX 이하로 설정하는 것입니다.
이유는 어떤 기기도 1280 와이드 값이 부족한 모니터는 없기 때문입니다. 반대로 모바일이나 태블릿 화면은 엘리멘터 섹션 레이아웃 환경에서 반응형 지정 탭을 이용해 좌우 여백만 설정해 주면 됩니다.
해당 이미지는 본사 홈페이지를 13inch 맥북 모니터와 24inch 아이맥 화면을 비교한 것입니다. 1280PX 너비 설정에서는 화면 사이즈에 따라 텍스트 줄바꿈을 해도 위치가 변경되지 않는다는 것을 확인할 수 있습니다.
이와 같이 모든 기기에 맞게 사이트 본문(콘텐츠) 영역을 지정하는 게 반응형 워드프레스 디자인의 기본이란 걸 절대 잊어서는 안 됩니다.
엘리멘터 섹션 레이아웃 모바일 반응형 “넘침자리 숨기기”
워드프레스 모바일 버전에서 오른쪽 여백이 생기는 현상이나 콘텐츠 전체가 스크롤 시 움직이는 현상이 나타나는 건 지정된 사이트 너비를 넘어 콘텐츠가 위치하기 때문입니다.
예를 들어 스크롤 시 왼쪽에서 오른쪽으로 이미지나 텍스트가 움직이도록 모션 기능을 설정했을 때 출발 지점은 이미 사이트 와이드 값 내부가 아닌 곳에서 출발합니다.
그래서 넘침자리가 있는 경우 콘텐츠를 숨긴다는 의미로 엘리멘터 섹션 레이아웃 설정에 넘침 처리를 지정할 수 있도록 하고 있습니다. 이 부분은 섹션 세팅 과정에서 항상 “숨겨진” 상태로 지정해 놓아야 합니다.
물론 모션 기능을 사용하지 않는다면 굳이 숨겨진 상태가 필요 없습니다.
그외 높이 설정과 배열, 열 간격 지정에 대한 생각
보통 사이트 디자인을 시작할 때 높이를 기본이나 화면에 맞추기를 이용하는 데, 화면에 맞추기 설정이 필요한 경우는 딱 두 가지입니다. 하나는 헤더 섹션을 디자인할 때 페이지가 열리면 헤더 부분만 보이도록 지정하는 것이죠.
다른 하나는 스크롤 시 섹션 높이를 기준으로 하나의 화면이 보이도록 해야 할 때인데요, 이 경우 모바일에서도 해당 기능이 적용되기 때문에 사용자가 원치 않는 지점까지 스크롤 되는 현상이 나타날 수 있습니다.
이를 해결하기 위해서는 기기별 제어 CSS 적용이 필요하기 때문에 해당 기능은 초보자가 사용하기에 어려움이 있습니다.
열 간격은 기본적으로 “없음” 상태로 설정하시고, 열 위치나 수직 정렬은 디자인 구조에 따라 선택하면서 지정하면 반응형 워드프레스 디자인을 위한 엘리멘터 섹션 레이아웃 탭 설정은 끝이 납니다.
여기까지 준비한 내용은 모두 설명드렸습니다. 오늘도 자세히 알려 드리려다 보니 길어졌지만, 관련 내용이 도움이 되었길 바라며 다음 포스팅에 더 나은 정보로 인사드리겠습니다.
준비된 이미지는 기본적인 섹션 세팅 기준이니 참고하시면 좋을 것 같아 준비했습니다.
