Hub는 여러 업종의 프리빌트 사이트와 시각 효과를 바탕으로 제작하는 다목적 워드프레스 테마입니다.
01어떤 테마인가
Hub는 자체 빌더(Liquid Builder)를 가진 다목적 테마입니다. Elementor 같은 별도 빌더를 배우지 않아도 되고, 화면을 보면서 요소를 끌어다 놓는 방식으로 페이지를 만듭니다.
다만 Hub의 진짜 값어치는 빌더가 아니라 미리 만들어진 디자인에 있습니다. 프리빌트 사이트가 여러 종류이 넘고, 하나하나가 실제 판매 중인 브랜드 사이트 수준으로 짜여 있습니다. 여백, 글자 크기, 색 조합, 스크롤할 때의 움직임까지 이미 정리되어 있어서 디자인을 모르셔도 결과물이 무너지지 않습니다.
테마를 많이 다뤄 보면 “데모는 예쁜데 내 내용을 넣으면 이상해지는” 경우가 흔합니다. 사진 크기가 안 맞거나, 한글이 들어가면 줄이 깨지거나, 글이 짧으면 여백이 뜨는 식입니다. Hub는 그 부분이 비교적 단단하게 잡혀 있습니다. 내용을 바꿔도 형태가 잘 안 무너집니다.
02Hub 테마 디자인은 어떤가요
아래 세 가지는 성격이 완전히 다른 구성입니다. Hub 하나로 이만큼 다른 사이트가 나옵니다. 눌러 보시면 실제로 움직이는 화면을 보실 수 있습니다.
기업·투자큰 배경 사진 위에 번호를 매긴 메뉴. 신뢰감을 주려는 기업 사이트에 맞습니다.템플릿 열기→
디자인 에이전시밝고 여백이 넉넉한 구성. 곡선 마스크와 점 장식으로 부드러운 인상을 줍니다.템플릿 열기→
앱·서비스 소개한 페이지로 끝나는 랜딩. 앱 화면과 다운로드 버튼이 중심입니다.템플릿 열기→공식 데모 전체는 Hub 공식 사이트에서 보실 수 있습니다. 여러 종류이 넘습니다.
03Hub 테마, 무엇을 할 수 있나요
| 기능 | 하는 일 |
|---|---|
| 프리빌트 사이트 여러 종류+ | 업종별로 완성된 사이트를 통째로 가져옵니다. 가져온 뒤 글자와 사진만 바꾸면 됩니다. |
| Liquid Builder | 화면을 보면서 끌어다 놓는 자체 빌더. Elementor를 따로 배우지 않아도 됩니다. |
| 디자인 요소 모음 | 버튼, 카드, 슬라이더, 카운터 등 완성된 요소를 골라 넣습니다. 모양이 이미 잡혀 있습니다. |
| 스크롤 연출 | 스크롤에 따라 요소가 나타나는 움직임이 기본으로 들어 있습니다. 따로 플러그인을 붙이지 않아도 됩니다. |
| WooCommerce 지원 | 쇼핑 기능이 필요하면 상품 페이지 디자인까지 함께 제공됩니다. |
| 포트폴리오 | 작업물을 격자나 슬라이드로 보여주는 형식이 여러 가지 준비되어 있습니다. |
| 헤더·푸터 편집 | 상단과 하단도 빌더로 직접 만듭니다. 고정 헤더, 투명 헤더 등을 설정으로 바꿉니다. |
| 반응형 조정 | PC·태블릿·모바일에서 글자 크기와 여백을 각각 따로 지정할 수 있습니다. |
04설치 후 설정 순서
① 데모 가져오기 — 가장 먼저
Hub는 프리빌트 사이트를 통째로 가져오는 방식입니다.
- Hub → Pre-Built Sites로 들어갑니다.
- 목록에서 원하는 디자인의 Import를 누릅니다. 위 갤러리에서 봐 두신 것을 고르시면 됩니다.
- 가져올 항목(페이지·이미지·설정)을 고릅니다. 처음이라면 전부 체크하세요.
- 3~10분 걸립니다. 창을 닫지 마세요.
데모 가져오기는 기존 내용을 덮어쓸 수 있습니다. 이미 글이 쌓인 사이트라면 먼저 백업을 받으시고, 가능하면 새 사이트에서 하시는 편이 안전합니다.
② 로고·색상·글꼴 바꾸기
- Hub → Theme Options → Logo에서 로고 이미지를 올립니다. 가로형으로 배경이 투명한 PNG가 좋습니다.
- Theme Options → Colors에서 주 색상(Primary)을 바꿉니다. 이 한 곳만 바꿔도 버튼·링크·강조 색이 한꺼번에 따라옵니다.
- Theme Options → Typography에서 글꼴을 정합니다.
데모 기본 글꼴은 영문용이라 한글이 어색하게 나옵니다. Pretendard나 노토 산스 KR로 바꾸시면 훨씬 깔끔합니다. 본문 16~17px, 줄간격 1.7~1.8 정도가 한글에 읽기 편합니다.
③ 메뉴 만들기
메뉴는 테마와 상관없이 워드프레스 공통입니다. 외모 → 메뉴에서 만듭니다.
- 새 메뉴 만들기를 누르고 이름을 정합니다(예: 주메뉴).
- 왼쪽에서 페이지나 카테고리를 골라 메뉴에 추가합니다.
- 항목을 드래그해 순서를 바꿉니다. 오른쪽으로 살짝 밀면 하위 메뉴가 됩니다.
- 아래 메뉴 설정에서 표시 위치를 체크합니다.
- 메뉴 저장을 누릅니다.
항목이 많으면 방문자가 고르지 못합니다. 자주 안 보는 페이지는 푸터로 내리세요. 순서는 왼쪽일수록 중요한 것으로 놓습니다.
④ 페이지 고치기
가져온 페이지의 글자와 사진을 내 것으로 바꿉니다.
- 고칠 페이지에서 Edit with Liquid Builder를 누릅니다.
- 바꾸고 싶은 글자를 클릭하면 바로 편집됩니다.
- 사진은 클릭 후 왼쪽 패널에서 이미지 교체를 누릅니다.
- 필요 없는 구역은 그 구역을 선택하고 삭제합니다.
- Update를 눌러 저장합니다.
데모에는 안 쓰실 구역이 꽤 들어 있습니다. 필요 없는 구역을 먼저 지우고 남은 것만 고치시면 훨씬 빠릅니다. 처음부터 하나하나 고치려 하면 지칩니다.
- 블로그·매거진이 주 목적이라면 Soledad가 글 목록 레이아웃이 훨씬 다양합니다.
- 쇼핑몰이 주 목적이라면 Shoptimizer가 구매 전환에 맞춰 설계되어 있습니다.
- 이미 Elementor에 익숙하시다면 자체 빌더를 새로 배우셔야 합니다. The7처럼 Elementor를 쓰는 테마가 편하실 수 있습니다.
05설치 전 체크리스트
- 새 사이트나 스테이징 복제본에서 데모를 먼저 가져옵니다.
- 포함 빌더와 필수 플러그인의 업데이트·라이선스 방식을 확인합니다.
- 모바일 화면, 글·상품 템플릿과 테마 변경 시 이전 범위를 점검합니다.
06공식 정보와 최신 확인
기능, 지원 환경과 요금은 바뀔 수 있습니다. 설치 전 공식 홈페이지에서 현재 문서와 변경 내역을 확인하세요. 이 글은 2026년 9월 18일에 다시 검수했습니다.
자주 나오는 질문
Elementor를 몰라도 되나요＋
네. Hub는 자체 빌더를 씁니다. 오히려 Elementor를 아신다면 조작 방식이 달라서 며칠 적응이 필요합니다. 대신 빌더 사용법 안내가 설치에 포함됩니다.
데모를 여러 개 가져와도 되나요＋
됩니다. 다만 덮어쓰기가 일어날 수 있어 권하지 않습니다. 하나를 고르고 필요한 페이지만 추가로 가져오시는 편이 안전합니다.
한글이 깨지지 않나요＋
글자가 깨지지는 않습니다. 다만 영문 기준으로 여백과 줄간격이 잡혀 있어 그대로 두면 답답해 보입니다. 위 ② 순서대로 글꼴과 줄간격만 바꾸시면 됩니다. 설치 시 한글에서 깨지는 곳은 저희가 점검해 드립니다.
무겁지 않나요＋
프리빌트에는 애니메이션과 큰 사진이 많이 들어 있습니다. 그대로 두면 느려질 수 있으니 캐시 플러그인과 이미지 최적화를 함께 쓰시길 권합니다.
