커뮤니티 게시글

팁·노하우

[ 머블로 시작하기 ⑧ ] 시작 킷으로 메인화면 한 번에 만들기

우아한삽질 2026-09-29 14:09 조회 3 수정됨

안녕하세요, 여러분! 우아한삽질입니다!

지난 글에서는 게시판을 켜고 메뉴에 거는 방법을 함께 알아봤는데요.
회사소개도 있고 공지사항도 있는데, 정작 홈 화면은 설치한 날 그대로죠?!

⑤에서 배운 대로 행을 하나씩 쌓아도 되지만, 머블로에는 더 빠른 길이 있습니다.
이번 글에서는 시작 킷으로 메인화면 골격을 한 번에 깔고, 그 안을 우리 회사 내용으로 바꿔 보겠습니다.
끝나면 첫 화면이 진짜 회사 홈페이지처럼 보일 겁니다.

공지사항 게시판이 아직 없으시다면 아래 글부터 확인해 주세요!
[ 머블로 시작하기 ⑦ ] 게시판 만들어서 메뉴에 걸기 →

그럼 바로 시작해 보겠습니다!

1. 시작 킷이 무엇인가요

지금 우리 홈 화면부터 보겠습니다.

설치 직후 홈 화면

“사이트에 오신 것을 환영합니다”와 머블로 소개 카드 세 장. 설치하면 누구에게나 똑같이 나오는 화면입니다.
이걸 지우고 빈 화면에서 시작하려면 막막하죠?! 무엇을 어떤 순서로 놓아야 할지부터 고민이 됩니다.

시작 킷은 그 고민을 대신해 주는 묶음입니다.
⑤에서 배운 행과 칸, 그리고 그 안의 블록을 미리 짜 놓은 것이라, 적용하면 골격이 한 번에 깔리고 우리는 글자만 바꾸면 됩니다.

블록 킷 관리

관리자 페이지 왼쪽 ‘블록 관리’에서 ‘블록 킷 관리’를 열면 세 가지가 들어 있습니다.

킷 이런 사이트에 들어 있는 것
회사 홈페이지 회사, 가게, 공방 소개 큰 첫 화면, 서비스 소개 3칸, 공지, FAQ·문의
커뮤니티 동호회, 카페형 사이트 게시판 목록 두 줄, 로그인·투표·최신 댓글 사이드바
쇼핑몰 물건을 파는 사이트 신상품 자동 진열, 구매후기, 공지, 이용 안내

우리는 가구 공방이니 ‘회사 홈페이지 시작 킷’입니다. 목록에서 오른쪽의 ‘상세’를 눌러 들어갑니다.

2. 적용하기 전에 미리보기부터

상세 화면에는 ‘미리보기’와 ‘적용’ 두 버튼이 있습니다.
성급하게 적용부터 누르지 마시고, 먼저 ‘미리보기’를 눌러 주세요. 미리보기는 아무것도 바꾸지 않고 검사만 합니다.

미리보기 경고

결과에 “설치되지 않은 블록 타입입니다: faq”라는 경고가 나옵니다.
이 킷에는 자주 묻는 질문을 보여주는 칸이 들어 있는데, 우리 사이트에는 아직 FAQ 기능이 꺼져 있다는 뜻입니다. 이대로 적용하면 그 칸만 비어서 나옵니다.

해결은 지난 글에서 해 본 그대로입니다. 게시판을 켰던 ‘확장 기능’으로 가서 이번에는 왼쪽 플러그인 중 ‘FAQ’에 체크하고 ‘저장’을 누릅니다.

FAQ 플러그인 켜기

다시 킷 상세로 돌아와 ‘미리보기’를 한 번 더 누르면 경고가 사라지고 “5행 8칸이 적용됩니다” 한 줄만 남습니다.
이렇게 미리보기가 깨끗해진 다음에 적용하는 것이 순서입니다. 킷이 무엇을 요구하는지 미리 알려 주니, 적용하고 나서 “왜 비었지?” 하고 헤맬 일이 없습니다.

3. 적용하기 — 추가와 교체

적용 버튼 옆에는 고를 것이 둘 있습니다.

적용 옵션

‘추가’는 지금 있는 행을 그대로 두고 그 뒤에 킷을 붙입니다.
‘교체’는 지금 있는 행을 지우고 킷으로 바꿉니다.

우리 홈에는 환영 문구뿐이라 남길 것이 없으니 ‘교체’를 고릅니다.
반대로 이미 공들여 만든 행이 있다면 ‘추가’로 붙인 다음 필요 없는 것만 지우는 편이 안전합니다. 그 아래 ‘메인화면 레이아웃 설정도 함께 적용됩니다’는 체크된 그대로 두세요.

‘적용’을 누르면 “기존 행을 삭제합니다, 계속할까요?” 하고 한 번 더 묻습니다. 확인을 누르면 끝입니다.

적용 이력

화면 아래 ‘적용 이력’에 방금 한 일이 기록됩니다.
혹시 잘못 눌렀더라도 걱정하지 마세요. 교체로 지워진 행은 ‘블록 행 관리’의 삭제 이력에 보관되어 있어 되살릴 수 있고, 바뀐 레이아웃 설정은 여기서 ‘레이아웃 설정 되돌리기’로 한 번 되돌릴 수 있습니다.

킷이 적용된 홈

홈페이지를 새로고침하면 화면이 완전히 달라져 있습니다.
맨 위 파란 상자는 안내문입니다. 문구 바꾸기, 공지 게시판 연결, FAQ 등록 — 앞으로 할 일 세 가지를 순서대로 알려 줍니다. 그 아래가 큰 첫 화면(히어로), 서비스 세 칸, 공지사항, 자주 묻는 질문과 문의 안내입니다. 지금은 전부 견본 문구입니다.

4. 문구를 우리 회사 것으로 바꾸기

이제부터는 ⑤에서 해 본 일입니다. ‘블록 에디터’를 열고 왼쪽 목록에서 ‘메인화면’을 누릅니다.

메인화면 행 목록

오른쪽에 행이 다섯 개 보입니다. ⑤에서는 전부 ‘새 행’이라 헷갈렸는데, 킷은 ‘R1 히어로’, ‘R2 핵심 서비스 3열’, ‘R3 공지’처럼 이름을 붙여 놓아서 어느 행이 무엇인지 바로 알 수 있습니다.
행 이름 아래 작은 글씨는 그 안에 든 블록입니다. 대부분 HTML 직접입력이고, 공지는 게시판 최신글, 마지막 행에는 FAQ가 들어 있습니다.

가운데 미리보기에서 큰 첫 화면(히어로)을 눌러 보세요. 내용 편집 창이 바로 열립니다.

히어로 편집

보이는 화면에서 글자를 눌러 그대로 고치면 됩니다.
사진에서는 작은 머리말을 ‘WOOD WORKSHOP’, 큰 제목을 ‘손으로 만드는 가구, 한결’로 바꾸고 그 아래 소개 두 줄을 썼습니다. 흰 버튼 ‘공지사항’은 이미 /board/notice 로 걸려 있고, 옆의 ‘회사 소개’ 버튼은 링크가 비어 있으니 글자를 선택하고 링크 단추로 /p/about 을 넣어 줍니다.

다 고쳤으면 창 아래 ‘저장’을 누릅니다.
여기서 바로잡을 것이 하나 있습니다. ⑤에서 제가 “저장은 창 닫기, 적용이 진짜 저장”이라고 말씀드렸는데, 다시 확인해 보니 내용 편집 창의 ‘저장’은 누르는 순간 바로 저장됩니다. 홈페이지에도 곧바로 반영됩니다.
패널 아래의 ‘적용’은 제목·스타일·출력 설정처럼 오른쪽 패널에서 바꾼 것을 저장하는 버튼입니다. 제가 잘못 알려 드렸습니다. 죄송합니다!

같은 방법으로 서비스 세 칸을 하나씩 눌러 바꿉니다. 사진에서는 맞춤 가구 제작, 원목 수리·리폼, 공방 방문 상담으로 채웠습니다. 서비스가 둘뿐이라면 행 편집에서 칸 수를 2칸으로 줄이시면 됩니다.
맨 아래 문의 안내의 전화번호, 이메일, 주소도 잊지 말고 실제 것으로 바꿔 주세요. 견본 그대로 000-0000-0000 이 남아 있는 홈페이지, 의외로 많습니다.

5. 공지사항과 FAQ 연결하기

홈의 공지사항 칸에는 ‘등록된 글이 없습니다’라고 나옵니다. 지난 글에서 공지를 썼는데도요.
킷은 우리 사이트에 어떤 게시판이 있는지 모르기 때문에 어느 게시판의 글을 보여줄지를 비워 둔 채로 옵니다. 그걸 알려 주면 됩니다.

미리보기에서 공지사항 칸을 누르면 오른쪽에 ‘표시할 내용 0개 선택됨’이 보입니다. 옆의 ‘고르기’를 누릅니다.

게시판 고르기

⑦에서 만든 게시판 세 개가 그대로 나옵니다. ‘공지사항’에 체크하고 ‘선택 완료’를 누릅니다.
⑥에서 메뉴 블록의 메뉴를 고르던 것과 같은 창입니다. 여러 개를 체크하면 여러 게시판의 글이 함께 나옵니다.

공지 블록 설정

내친김에 ‘제목’을 펼쳐 더보기 링크에 /board/notice, 더보기 문구에 ‘더보기’를 넣습니다. ⑥에서 설명만 드렸던 그 칸을 이제 실제로 쓰는 겁니다.
이번에는 패널에서 바꾼 것이니 맨 아래 ‘적용’을 눌러야 저장됩니다. 누르고 나면 홈의 공지사항 칸에 글 두 건과 ‘더보기’가 나타납니다.

다음은 FAQ입니다. 이쪽은 고를 것이 없고 질문을 등록하기만 하면 홈에 저절로 나옵니다.
2번에서 FAQ를 켰으니 관리자 메뉴에 ‘FAQ 관리’가 생겨 있습니다.

FAQ 관리

순서가 있습니다. 카테고리를 먼저 만들어야 질문을 넣을 수 있습니다.
왼쪽 카테고리의 ‘추가’로 ‘주문·제작’ 같은 묶음을 하나 만들고, 오른쪽 ‘FAQ 추가’로 질문과 답을 적습니다. 손님들이 전화로 자주 묻는 것 세 가지만 넣어도 충분합니다. 사진에서는 제작 기간, 배송과 설치, 수리 가능 여부를 넣었습니다.

6. 안내문 지우고 완성 확인

할 일 세 가지를 다 했으니 맨 위 안내문은 이제 필요 없습니다. 방문자에게 보이면 안 되는 글이기도 하고요.
블록 에디터의 행 목록에서 ‘온보딩 안내 (설정 후 삭제)’를 누르고 ‘삭제’를 누릅니다.

안내 행 삭제

⑤에서 보신 그 확인창입니다. 삭제한 행은 삭제 이력에서 복구할 수 있다고 적혀 있으니 마음 편히 ‘삭제’를 누르세요.

완성된 홈

완성입니다. 큰 첫 화면, 서비스 세 가지, 최근 공지 두 건, 자주 묻는 질문, 문의 안내까지.
설치한 날의 환영 문구가 한결 공방의 첫 화면이 됐습니다. 행을 하나도 새로 만들지 않고 글자만 바꿔서요.

휴대폰 화면

휴대폰에서도 꼭 보셔야 합니다. 세 칸이던 서비스는 위아래로 쌓이고 나머지는 알아서 맞춰집니다.
다만 큰 제목은 조심하세요. 처음에 ‘손으로 만드는 가구, 한결’을 한 줄로 썼더니 휴대폰에서 “가 / 구”로 글자 중간이 끊겼습니다. ‘손으로 만드는’ 뒤에서 줄을 바꿔 두 줄로 만들어 해결했습니다. 제목이 길면 끊고 싶은 자리에서 직접 줄을 바꿔 주세요.

오늘 준비한 시작 킷으로 메인화면 한 번에 만들기는 여기까지입니다!

정리하면 이렇습니다.
미리보기 → 필요한 기능 켜기 → 교체로 적용 → 문구 바꾸기 → 게시판·FAQ 연결 → 안내문 삭제
내용 편집 창의 ‘저장’은 바로 저장, 패널의 ‘적용’은 패널 설정을 저장합니다.

감사합니다!

글쓰기

댓글 0

등록된 댓글이 없습니다.