랜딩페이지 제작 3칼럼 디자인 워드프레스 강의 블록 에디터 기반

지난 시간에 이어 랜딩페이지 디자인 워드프레스 강의를 준비 했어요. 슬라이드 구조에 앞서 기본 구조인 3칼럼 섹션을 먼저 설명 하는 게 더 나은 선택인 것 같아 우선적으로 준비했으며, 박스형 구조에 대해서도 함께 이야기할 예정이니 참고해 보세요.

 

랜딩페이지 제작 핵심 요소 3칼럼 디자인

박스형 3칼럼 섹션은 모든 랜딩페이지 제작 과정에서 자주 사용 하는 기본 구조 입니다. 워드프레스 디자인에서도 이는 동일하며, 몇 가지 주의사항 및 최적화 디자인 구조에 관해 이야기 해볼게요.

우선 이번 3칼럼 섹션에 포함할 내용은 브랜드 가치에 대한 이야기를 전달 하는 것인데요.  목적 달성을 위해 세 가지 주제를 분류해 설명합니다.



이러한 3칼럼 디자인 구조는 설명 하는 글이 많아지면 자칫 게시물 느낌을 줄 수 있어, 전달하려는 메시지를 타이틀에서 전달하고 하단 설명은 짧을수록 디자인상 더 나은 결과를 만들 수 있습니다.

버튼 구조는 CTA(콜 투 액션)와 해당 내용에 대한 링크가 기본적인 구조이며, 이번 디자인에서는 박스형 구조에 그림자 효과를 넣어 조금 더 강조하는 느낌을 주었습니다.

동일한 3컬럼 디자인에서 조금만 변형 하거나 내부 콘텐츠를 더 간략히 한다면 이런 느낌도 줄 수 있을 것입니다.



블록 에디터의 경우 박스 디자인을 표현할 수 있는 기법이 많지만 오늘 준비한 워드프레스 강의 처럼 3카럼 구조와 2컬럼이 일반적이며 서비스나 제품을 소개할 때 가장 많이 사용하기 때문에 이러한 디자인 연습은 꼭 필요하죠.

그럼 이번 디자인 구조와 폰트 및 이미지 간격 버튼 사이즈와 관련해 정리해 드릴테니 참고해서 여러분 사이트에 적용해 보시기 바랍니다.

 

워드프레스 강의 블록 디자인 랜딩페이지 3칼럼 

우선 섹션 패딩이나 마진은 상단 구조에 따라 다를 수 있지만 하나의 랜딩페이지 상하 패딩은 동일하게 적용 되어야 합니다. 예를 들어 이번 디자인에서 상하 간격은 150PX 정도 주었는데, 이 경우 다른 섹션과의 간격 역시 동일해야 한다는 것이죠.

1. column-gap: var(4rem)
2. max-width: 1320px
3. margin-left: auto
4. margin-right: auto
5. padding-top: 0px
6. padding-right: 0px
7. padding-bottom: 150px
8. padding-left: 0px

박스별 내부 요소 간격은 10px 이지만 이미지와 타이틀 폰트 간격은 박스 패딩 좌우 간격 균형을 고려해 20px을 주었습니다. 따라서 폰트 사이 간격은 10px 버튼과 폰트 사이 간격은 30px 하단 버튼 간격 역시 30px로 볼 수 있습니다.

이러한 디자인 팁은 사실 구조나 폰트 사이즈, 강조 하고 싶은 요소에 따라 다르게 적용하는 게 좋기 때문에 이는 다양한 제작 경험을 통해 감각적으로 알아가야 하는 부분입니다.

오늘 준비한 랜딩페이지 제작 강의에서 여러분이 알아야 할 부분은 사실 딱 하나 입니다. 웹디자인은 정해진 규칙이 없는 듯 하지만 실제로 폰트 및 이미지 간격과 같은 요소들은 사실 정해져 있다는 것이죠.

여기까지 블록 에디터를 사용해 워드프레스 랜딩페이지 디자인 과정 두 번째 시간, 3칼럼 디자인에 대해 전달해 드렸습니다.

다음 시간은 슬라이드 디자인에 관해 이야기해 보겠습니다.