admin워드프레스를 처음 설치하면 메인 화면에 단순히 최신 블로그 글 목록만 늘어서 있는 경우가 많습니다.
하지만 기업 브랜드 사이트나 멋진 포트폴리오 사이트처럼 내 입맛에 맞는 대문(Hero Section)과 주요 서비스/카테고리 소개 영역을 메인페이지에 구성하고 싶다면 어떻게 해야 할까요?
VUTREND와 같은 클래식 테마(PHP 기반) 환경에서도 코드 작성 부담 없이 전용 메인페이지 템플릿을 세팅하고 꾸미는 실전 단계를 차근차근 알아보겠습니다.
1. 클래식 테마의 메인페이지 작동 방식 이해하기
클래식 테마는 기본 설정 상태에서 데이터베이스의 최신 포스트를 순서대로 보여주는 index.php 파일이 메인 화면을 담당합니다.
하지만 대문 이미지나 안내 문구가 들어간 전용 메인 화면을 만들려면 정적 페이지(Static Page)를 생성하여 메인 화면으로 지정해 주어야 합니다.
- 최신 글 목록 형태: 블로그형 사이트에 적합 (기본값)
- 정적 페이지 형태: 회사 소개, 포트폴리오, 브랜드 대문 사이트에 적합 (추천 방식)
2. [STEP 1] 대문으로 사용할 ‘메인페이지’ 새로 만들기
가장 먼저 메인 화면으로 사용할 빈 페이지를 하나 만들어 줍니다.
- 워드프레스 관리자 메뉴에서 [페이지] > [새 페이지 추가]를 클릭합니다.
- 페이지 제목을
메인또는Home으로 입력합니다. - 오른쪽 속성 창에서 테마가 제공하는 페이지 템플릿(Page Template) 옵션이 있다면 ‘Frontpage’ 또는 ‘Full Width(전체 너비)’를 선택합니다.
- 본문 영역에 메인 인사말이나 대문 이미지를 간단히 넣은 뒤 [공개] 버튼을 누릅니다.
3. [STEP 2] 내가 만든 페이지를 ‘진짜 메인 화면’으로 연결하기
페이지를 만든 후, 방문자가 내 도메인 주소로 들어왔을 때 이 페이지가 가장 먼저 뜨도록 설정해야 합니다.
- 좌측 관리자 메뉴에서 [설정] > [읽기]로 이동합니다.
- ‘홈페이지 표시’ 항목에서 ‘정적인 페이지 (아래에서 선택)’를 체크합니다.
- 홈페이지 드롭다운 메뉴에서 방금 만든
메인(Home)페이지를 선택합니다. - 글 페이지 항목에는 블로그 글들이 모여 보일
블로그전용 페이지를 하나 새로 만들어 지정해 줍니다. - 맨 아래 [변경 사항 저장] 버튼을 클릭합니다.
4. [STEP 3] 사용자 정의 메뉴로 메인 대문 세부 디자인 구성
이제 메인페이지의 외관을 예쁘게 꾸밀 차례입니다. 안전한 디자인 수정을 위해 모양 > 사용자 정의 메뉴를 활용합니다.
- [모양] > [사용자 정의] 접속
- 헤더 및 대문 섹션: 메인 대문 슬라이드나 대형 이미지(Hero Image) 등록
- 색상 및 버튼 스타일: 주요 클릭 버튼(CTA Button)의 포인트 컬러 지정
- 추가 CSS 메뉴: 대문 텍스트에 그림자 효과를 주거나 이미지 호버 모션을 더하는 스타일 코드 입력
CSS
/* 메인 대문 버튼에 입히는 초보자용 고급 트랜지션 코드 */
.home-hero-button {
background-color: #ff4757;
color: #ffffff;
padding: 12px 30px;
border-radius: 25px;
transition: all 0.3s ease;
}
.home-hero-button:hover {
background-color: #2ed573;
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}
5. [STEP 4] 위젯(Widgets) 영역을 활용한 카테고리/소개 섹션 배치
클래식 테마의 메인페이지 하단이나 사이드바는 [모양 > 위젯] 메뉴를 통해 각종 콘텐츠를 블록처럼 배치할 수 있습니다.
| 메인페이지 위젯 영역 | 추천 배치 요소 | 기대 효과 |
| Main Top Section | 대표 서비스 소개, 브랜드 슬로건 | 방문자에게 명확한 브랜드 첫인상 전달 |
| Main Content / Sidebar | 최근 게시물 목록, 인기 카테고리 | 사이트 내부 체류 시간 및 페이지뷰 증가 |
| Footer Section | 사업자 정보, SNS 링크, 카피라이트 | 브랜드 신뢰도 확보 및 하단 디자인 마감 |
6. [STEP 5] 모바일 최적화 점검 및 오픈 전 최종 백업
메인페이지 구성을 마쳤다면 방문자들이 어떤 기기로 들어오더라도 완벽하게 보이도록 최종 점검을 진행합니다.
사용자 정의하단 스마트폰 아이콘 클릭: 모바일 화면에서 메인 대문 글씨가 깨지거나 이미지가 잘리지 않는지 점검합니다.- UpdraftPlus 백업 진행: 정성껏 세팅한 메인페이지와 테마 설정값이 날아가지 않도록 [UpdraftPlus 백업] 메뉴에서 백업을 실행합니다.
단순한 블로그에서 나만의 완성형 웹사이트로!
어렵게만 느껴졌던 메인페이지 개편도 1) 전용 페이지 생성 -> 2) 읽기 설정 연결 -> 3) 사용자 정의 커스텀의 3단계 과정만 거치면 손쉽게 완성할 수 있습니다.
지금 바로 내 워드프레스에 접속해 나만의 개성이 담긴 멋진 메인 화면을 만들어보세요
