[실전] 배운 것을 토대로 나만의 랜딩 페이지 만들고 발행하기

드디어 올 것이 왔습니다! 길고도 짧았던 엘리멘터 기초 마스터 강좌의 대미를 장식할 **대망의 마지막 [레슨 10]**입니다.

지금까지 파편적으로 배웠던 컨테이너 뼈대 잡기, 위젯 배치하기, 색상 입히기, 그리고 반응형과 템플릿까지. 이제 이 모든 지식을 하나로 꿰어 나만의 랜딩 페이지를 처음부터 끝까지 직접 만들고, 세상에 공개(Publish)해 보겠습니다.

30년 차 실무자들의 실제 작업 프로세스 그대로 진행할 테니, 마지막까지 바짝 집중해 주세요!

실무에서 랜딩 페이지(방문자가 처음 도착해서 행동을 결정하는 핵심 페이지)를 만들 때는 무작정 캔버스에 위젯부터 던져 넣지 않습니다. 머릿속으로, 혹은 종이에 대략적인 **’구조도(Wireframe)’**를 먼저 그립니다.

오늘 우리가 만들 강좌 모집 랜딩 페이지의 구조는 이렇습니다.

1. 히어로(Hero) 섹션: 시선을 확 끄는 대문 (배경 이미지 + 메인 타이틀 + 수강 신청 버튼)

2. 강좌 소개 섹션: 이 강좌를 왜 들어야 하는지 (2단 컨테이너 + 이미지 + 텍스트 + 아이콘)

3. 마무리(CTA) 섹션: 망설이는 수강생의 결제 유도 (단색 배경 + 최종 버튼)

자, 빈 페이지를 열고 시작하겠습니다!

1단계: 히어로(Hero) 섹션 만들기 – 시선 압도하기

방문자가 페이지에 들어오자마자 보게 되는 가장 중요한 첫 화면입니다.

• 뼈대 만들기: [ + ] 버튼을 눌러 ‘아래 화살표(↓ 세로 방향)’ 컨테이너를 하나 추가합니다.

• 크기와 배경 설정: * 부모 컨테이너 왼쪽 상단 모서리를 클릭하고, [레이아웃] 탭에서 ‘최소 높이(Min Height)’를 vh 단위로 바꾸고 80을 입력합니다. (화면 높이의 80%를 꽉 채우겠다는 뜻입니다. 화면 높이는 사용자마다 사용하는 해상도가 달라서 픽셀로 크기를 지정하기 어렵기 때문에 높이의 몇 %로 정하겠습니다.)

  • [스타일] 탭에서 멋진 ‘배경 이미지’를 넣고, 글씨가 잘 보이도록 ‘배경 오버레이’를 검은색(투명도 0.6)으로 깔아줍니다.

• 콘텐츠 채우기: * ‘제목(Heading)’ 위젯을 넣고 HTML 태그를 **H1**으로 맞춘 뒤, 흰색 폰트로 강좌명을 크게 적습니다. (예: “워드프레스 엘리멘터 완벽 마스터”)

  • 그 아래에 ‘텍스트 에디터’로 짧은 요약을 적고, 마지막으로 ‘버튼’ 위젯을 넣어 “엘리멘터 연습하기”라고 적습니다. 제목과 텍스트는 모두 흰색으로 설정합니다.

  • 컨테이너 [레이아웃]에서 ‘항목 정렬’과 ‘콘텐츠 정렬’을 모두 **’가운데(Center)’**로 맞추면 완벽한 대문이 완성됩니다!

2단계: 강좌 소개 섹션 만들기 – 신뢰감 주기

강좌의 특징을 설명하는 공간입니다.

• 뼈대 만들기: 그 아래에 새 컨테이너를 추가하되, 이번에는 ‘가로 방향(→ 좌우 2단)’ 구조를 선택합니다.

• 콘텐츠 채우기: * 왼쪽 컨테이너에는 ‘이미지’ 위젯을 넣어 아무 그림이나 하나 넣습니다.

  • 오른쪽 컨테이너에는 ‘제목(H2 태그)’으로 원하는 텍스트를 적습니다.

  • 그 아래에 ‘아이콘’ 위젯(체크 모양 ✔️)과 ‘텍스트 에디터’를 활용해 텍스트 항목 3가지 정도 나열합니다.

  • (복습 타임!) 오른쪽 텍스트들이 너무 테두리에 붙어있다면? 오른쪽 자식 컨테이너를 클릭하고 [고급] 탭에서 **’패딩(Padding)’**을 넉넉하게(예: 40px) 줘서 숨통을 틔워줍니다.

3단계: 마무리(CTA) 섹션 – 행동 유도하기

페이지 맨 밑에서 최종적으로 행동(수강 신청)을 유도합니다.

• 뼈대 만들기: 다시 ‘세로 방향(↓)’ 컨테이너를 하나 추가합니다.

• 스타일링: [스타일] 탭에서 배경색을 메인 컬러(예: 쨍한 노란색이나 파란색)로 눈에 띄게 칠합니다. [고급] 탭에서 위아래 패딩을 80px 정도 주어 큼직하게 만듭니다.

• 콘텐츠 채우기: 가운데 정렬로 “지금 바로 시작하세요!”라는 제목과 함께, 가장 크고 잘 보이는 ‘버튼’을 하나 더 배치합니다.

4단계: 모바일 반응형 체크 (필수 ⭐️)

PC 화면을 다 만들었으니, 툴바 하단의 📱 반응형 모드를 켜서 모바일 화면을 확인합니다.

• 2단으로 나눴던 강좌 소개 섹션이 모바일에서 너무 좁아 보인다면, 컨테이너 방향을 **세로(↓)**로 바꿔 이미지와 텍스트가 위아래로 예쁘게 떨어지도록 수정합니다.

• 모바일에서 글씨가 너무 크다면 폰트 크기를 줄여줍니다.

5단계: 드디어 세상 밖으로! 발행(Publish)하기

모든 작업이 끝났습니다. 이제 내가 만든 이 멋진 랜딩 페이지를 인터넷에 띄울 차례입니다.

1. 좌측 하단 툴바 맨 오른쪽에 있는 [공개 또는 발행(Publish)] 버튼을 클릭합니다. (예전 버전의 경우 이미 발행된 페이지를 수정 중이었다면 **[업데이트(Update)]**라고 뜹니다.)

2. 동그란 로딩 바가 돌아가고, “완료되었습니다”라는 메시지가 뜨면 성공입니다!

3. 툴바의 **👁️ 눈알 모양 아이콘(변경사항 미리보기)**을 눌러 실제 방문자가 보는 화면을 감상해 보세요.

💡 시니어의 마지막 실무 팁 (메뉴에 추가하기): 페이지를 발행했다고 해서 방문자가 알아서 찾아올 수는 없습니다. 워드프레스 관리자 화면으로 빠져나가서 **[외모] -> [메뉴]**로 이동한 뒤, 방금 만든 페이지를 상단 네비게이션 메뉴에 추가해 주어야 진짜로 사람들이 클릭해서 들어올 수 있습니다. 이 부분 역시 중급편에서 자세히 알아보겠습니다.

🎉 축하합니다! 완강을 선언합니다!

코딩의 ‘ㅋ’자도 모르던 분들이 뼈대를 세우고, 디자인을 입히고, 모바일에 맞추고, 마침내 하나의 완성된 랜딩 페이지를 만들어내기까지. 정말 엄청난 발전을 이루셨습니다.

30년간 웹을 만들면서 제가 느낀 가장 큰 기쁨은 “내 머릿속의 상상이 화면에 실체화되는 순간”입니다. 엘리멘터는 그 순간을 가장 빠르고 직관적으로 만들어주는 최고의 도구입니다.

이 강좌는 여기서 마무리되지만, 여러분의 웹 디자인 여정은 이제 진짜 시작입니다!

그동안 기초를 다지느라 정말 고생 많으셨습니다.