반응형 헤더 디자인 엘리멘터로 워드프레스 홈페이지 만들기
지난 시간 만들었던 워드프레스 헤더 섹션을 반응형으로 디자인하는 방법을 소개할 텐데요, 이 장에서 여러분이 배워야 할 워드프레스 홈페이지 만들기 과정은 엘리멘터 반응형 웹디자인에서 기본이 되는 섹션과 컬럼 구조를 이해할 수 있는 게 중요합니다.
그럼 영상을 보기 전에 사전에 변경 내용을 정리해 드리겠습니다.
워드프레스 홈페이지 만들기, 반응형 헤더 디자인이란?
반응형 디자인 개념 이해하기
반응형은 일반적으로 모바일 최적화 작업을 뜻하지만 요즘은 태블릿을 포함하는 브라우저 전체를 의미합니다. 따라서 사전에 제작한 PC 디자인을 변형할 때 모바일과 태블릿 레이 아웃을 모두 변경해 줄 필요가 있습니다.
웹디자인을 잘하기 위해서는 무엇보다 구조나 섹션과 컬럼 높이, 좌우 패딩 설정에 따라 이미지나 텍스트가 들어갈 공간이 달라지고 결국 디자인이 변경된다는 걸 이해하는 게 우선 되어야 합니다.
또한 헤더의 경우 모바일에서 원하는 공간을 확보하기 위해서 섹션 높이를 변경할 때 적절한 이미지 비율을 사용하는 게 좋기 때문에 PC와 모바일 이미지를 다르게 사용하기도 합니다.
하지만 이번 반응형 헤더 디자인에서는 동일한 이미지를 다른 비율로 만들었고 이는 섹션 사이즈 변경으로 조절 하였습니다.
pc와 모바일 폰트 사이즈와 위치 변화
반응형 헤더 디자인에서 마지막으로 확인해야 할 부분은 폰트 설정입니다. 폰트 위치와 사이즈가 배경 이미지와 섹션 높이에 따라 달라지기도 하는 것인데요, 이번 디자인에선 중앙 배열과 하단을 선택할 수 있지만 섹션을 최소 높이로 설정했기 때문에 중앙 배열을 선택했습니다.
기억해야 할 부분은 섹션 디자인 방식은 정해진 것이 아니라 배경이 되는 이미지와 폰트 크기를 고려해서 결정합니다.
일반적으로 모바일 폰트 사이즈는 PC보다 적게 설정하는 게 좋은데요, 이번 디자인에선 타이틀 폰트, 26 PX 텍스트 폰트는 16 PX로 디자인 했습니다.
이와 같은 방식은 결정된 공식은 아니며, 웹 제작자가 판단하는 것이지만 우선 여러분은 무작정 따라 하기라는 주제처럼 이번 프로젝트 디자인이 완성될 때까지 동일하게 적용하는 걸 추천합니다.
그래야 웹디자인 기준에 맞는 하나의 페이지를 완성한 경험이 생길 것이며, 워드프레스 홈페이지 만들기에서 가장 시간이 오래 걸리고, 어려운 랜딩 페이지를 만든 경험을 살려 비슷한 레이 아웃에서 왜 각 요소들을 이렇게 설정해야 좋은지 디자인을 비교해 보면 알 수 있습니다.
엘리멘터 빌더 반응형 헤더 모션 기능 추가
이렇게 PC 버전과 모바일에서 하나의 섹션이 완성되었고, 모션 기능을 추가할 차례인데요, 이것을 시작 애니메이션 기능이라고 합니다, 즉 스크롤 상황에서 각 위젯이나 섹션에 모션 설정을 해서 방문자에게 보여주고 싶은 메시지나 이미지를 부각하는 데 사용됩니다.
주의해야 할 부분은 이 기능은 적절하게 사용해야 하며, 모션 기능이 많으면 많을수록 해당 페이지는 반응 속도가 느려질 수 있고, 웹 디자인이 복잡하게 보일 수 있습니다.
이번 반응형 헤더 디자인에선 PC에선 타이틀 영역은 슬라이드 업, 텍스트 영역은 모션을 설정하지 않았습니다. 반대로 반응형 디자인에선 타이틀에는 모션 기능을 삭제하였고, 텍스트 영역에서 슬라이드 업 기능으로 변경했습니다.
여러분에게 개별 모션 기능을 반응형과 데스크톱에서 다르게 설정할 수 있다는 걸 전달하기 위해서입니다.
맺으며……
이렇게 헤더 디자인이 완성되었습니다. 다음 시간은 헤더 아래 섹션을 준비해 볼 텐데요 헤더에서 하단 스크롤 지시 영역을 만들어서 클릭하는 순간 다음 섹션으로 이동하게 한 뒤 나타나는 섹션을 디자인해 보겠습니다.
3개의 컬럼으로 준비할 것이며, 회사소개, 서비스, 고객 센터 영역이 될 것입니다.
그럼, 워드프레스 홈페이지 만들기, 반응형 헤더 디자인 섹션에 대한 설명은 이것으로 마칩니다. 이제 영상을 확인하면서 반응형 헤더 디자인을 완성해 보세요
2024.02.03
에디터 – 민서인
