랜딩페이지 만들기 인트로 상세 가이드 워드프레스 블록 에디터 활용

워드프레스로 생성된 대부분 디자인이 비슷비슷 하게 보이지만 실제 구조나 디자인 방식은 모두 다른데요. 오늘은 기존 웹사이트에서 별도 상품이나 서비스를 소개할 때 주로 활용하는 원페이지 디자인 중에서도 랜딩페이지 만들기 인트로 부분을 정리해 드릴게요.

블록 에디터 툴로 작업한 내용이며, 실제 외주 프로젝트를 위해 구성한 인트로 부분이니 참고해 보세요.

 

랜딩페이지 만들기 인트로 영역 디자인 구조

아시다시피 인트로 디자인이란 웹디자인 영역에서 처음 시작 부분 입니다. 그래서 몰입감 있는 이미지나 사이즈가 큰 폰트를 사용하게 되는데요. 이번에 준비한 랜딩페이지 만들기 인트로 영역은 다음과 같은 구조로 디자인 되었습니다.

Row Layout 

1. max-width: 1320px;
2. margin-left: auto;
3. margin-right: auto;
4. padding-top: 150px;
5. padding-right: 0px;
6. padding-bottom: 0px;
7. padding-left: 0px;

가장 먼저 생성하게 되는 행 레이아웃 구조에서 상단 패딩만 150px로 준비한 이유는 이번 인트로 구조가 이미지 목업 작업을 통해 하단에 고정 하는 방식으로 계획 되었기 때문입니다. 일반적으로는 탑과 바텀을 동일한 사이즈로 여벽을 준다는 거 기억하세요.

물론 수치는 정해진 것이 아니지만 필자는 평균 150~200px 사이의 패딩을 통해 랜딩페이지 인트로를 구성 하고 있습니다.

이후 섹션은 패딩과 마진 모두 0으로 설정 하였고, 세부 위젯은 폰트 2종류, 버튼 2개, 목업 이미지 하나로 단순화 하였습니다.

 

랜딩페이지 인트로 제작 폰트, 버튼, 이미지 디자인

폰트 사이즈 비율 역시 중요한데요. 현재 사용된 폰트는 프리텐다드로 70px에 두께는 800을 주었습니다. 하단 폰트는 18px 두께 400으로 디자인 되었는데, 폰트 사이 간격은 될 수 있으면 섹션 구조에서 갭(Gap)을 주는 데, 이번 디자인은 15px로 통일 하였습니다.



제가 매번 강조 하는 것이지만 웹디자인에서 가장 중요한 건, 폰트 사용 및 계층 구조 통일감으로 해당 사이트를 제작할 때 역시 인트로를 제외한 모든 폰트는 3가지 사이즈와 두가지 두께로 통일 하였습니다.

버튼 디자인의 경우 폰트 사이즈와 버튼 패딩 값이 중요한데, 이번 디자인에선 좌우 패딩 30, 상하 패딩 10px 버튼 간격 12px 입니다.

마지막으로 이미지는 우선 포토샵을 통해 목업 이미지를 작업 했는데, 워드프레스 업로드 할 때 PNG가 아닌 WEBP 파일을 사용했다는 점 알려 드립니다. 이는 이미지 용량 문제를 해결 하면서도 선명도를 높이기 위한 결정입니다.

 

제품 상세페이지 및 랜딩페이지 만들기 핵심

오늘 소개한 랜딩페이지 인트로 만들기를 잘 활용하면 워드프레스 쇼핑몰 제품 상세페이지 디자인에도 적용할 수 있는데요. 여러분이 웹디자인을 시작할 때 원페이지 랜딩 제작 경험은 하나의 웹사이트 구축을 위한 기본 과정이라 할 수 있어요.



보시는 것 처럼 이번에 준비한 강의는 총 6개 행으로 구성 되었지만 세부적으로 다양한 섹션과 내부 행을 포함한 디자인이기 때문에 모든 과정을 소개 하려면 최소 10개 이상 블록 에디터 무료 워드프레스 강의를 진행하게 될거에요.

다음 섹션은 캐러셀을 활용한 디자인이 준비 되어 있으니 하나하나 섹션을 필자와 함께 만들어가며 끝까지 완성해 보시길 바랍니다.

이 과정에서 검색엔진 최적화를 위해 우리가 폰트를 다룰 때, 어떤 기법을 사용 하는지도 함께 알려 드릴테니 많은 관심 바랍니다.