랜딩페이지 제작 디자인 구조 및 웹사이트 상위노출 가이드

오늘은 실무 디자인 사례를 통해 워드프레스 웹사이트 랜딩페이지 제작  및 상위노출 최적화 과정을 소개합니다. 업종과 관계 없이 유용한 구조이며, SEO 최적화 디자인이란 무엇인지 기본 개념을 이해하는 데 도움이 될 것이라 생각합니다.

그럼 먼저 사이트 이미지를 확인해 보시고, 실제 작동 상태를 보시려면 하단 링크를 이용해 주세요.



랜딩페이지 제작 형식 및 구조

※ 워드프레스 블록 디자인
※ 테마 : 케이던스
※ 이미지 편집 : 포토샵 WEBP 변환 사용
※ 호스팅 : 벌처 VPS and Plesk

 

탐정사무소 웹사이트 랜딩페이지 제작 및 상위노출 최적화 개요.

최근 광주 지역 탐정사무소 랜딩페이지 제작 의뢰가 있어, 워드프레스 블록(구텐베르크)을 사용해 웹사이트 상위노출을 진행하였습니다. 실제 제작 후 검색엔진 최적화(PageSpeed Insights)에서 100% 지수가 확인되었는데, 실제 검색엔진 노출은 몇 일 지켜봐야 할 것 같습니다.



웹사이트 상위노출 관련 포스팅은 이전에도 발행한 내용과 중첩이 될 수 있어 디자인 구조 몇 곳을 소개하며, 적용 방식을 전달해 드릴텐데요.

아시다시피 랜딩페이지 구조와 홈페이지는 약간의 차이가 있습니다. 먼저 제작 목적에서 서비스나 상품의 장점을 소개하기 위해 준비된 웹문서인 만큼 이미지 전달력과 카피가 가장 중요한 것이 랜딩페이지 입니다.

이번 프로젝트에서는 탐정사무소라는 특성을 반영해 인트로(진입하는 부분)와 푸터쪽 섹션을 어두운 배경으로 디자인 했고 1차 디자인 후 웹사이트 상위노출을 위한 최적화 구축 작업을 실시 하였습니다.

기본적인 태그 및 본문 텍스트 작업 과정에서 최적화 요소를 고려 한다는 건, 실제 디자인 보다 더 많은 시간이 소요되기 때문에 랜딩페이지 제작 프로세스가 단순히 구조를 계획하고, 디자인 요소를 적용하는 것으로 생각하는 것은 단편적인 부분만 이해하고 있는 것입니다.

이번 랜딩페이지 제작 사례를 여러분에게 공유하는 이유는 구조가 쉽지 않은 사례이기 때문인데요. 그럼 구조와 디자인에 관해 세부적인 방법을 설명해 드릴게요.

 

워드프레스 웹사이트 제작, 블록 에디터로 랜딩페이지 만들기

워드프레스 웹사이트 구조는 실제 창의력을 통해 다양하게 변형할 수 있는데요. 이번 디자인은 인트로는 슬라이드 투 컷에 모바일과 PC를 별도로 제작하였습니다. 전체 배경 이미지가 아닌 탓에 디바이스 최적화가 어려운 부분이 있었습니다.



하단 섹션까지 일체감을 주어 랜딩페이지 초기 몰입감을 높혔고, 실제 최적화 과정의 50%는 인트로와 세컨 섹션을 통해 완성 하였습니다. 이러한 웹사이트 제작 구조를 개인적으론 좋아하는 데, 이 경우 초기에 많은 본문 텍스트를 넣어야 하기 때문에 이번 사례에서는 "더 보기(show more)"기능을 이용해 대략 1000자 정도의 텍스트를 숨겨 놓았습니다.

물론 방문자는 필요에 따라 정보를 확인할 수 있도록 더 보기 기능을 추가한 것이죠.



또한 Q&A 항목 역시 기존에 많이 사용하는 아코디언 구조가 아닌 모달박스를 사용해 조금 더 편집 디자인 형식으로 표현해 봤습니다.

어떤게 더 편하고 보기 좋은가에 대한 평가는 사용자의 몫이지만 디자이너는 지속적으로 새로운 방식에 도전해야 한다는 생각을 갖고 있는 입장이라 시간이 조금 더 드는 방식을 선택한 것이죠.

이렇듯 오늘 간단히 설명 드렸지만 워드프레스 웹사이트 제작은 다양한 구조나 디자인을 적용해 볼 수 있어 여러분이 엘리멘터 뿐만 아니라 블록 편집기를 잘 사용하면 다음과 같은 랜딩페이지 제작도 가능하다는 걸 알게 되었으면 좋겠습니다.

관련 디자인이나 제작 방식에 관해 더 궁금한 내용이 있는 분들은 언제든 카카오채널이나 전화를 통해 문의해 주셔도 좋습니다.(수강생 전용 옵션 입니다.)

이번 포스팅 역시 끝까지 읽어주신 모든 분들께 진심으로 감사합니다.

🟢 사이트 바로가기