1. 먼저 알고 갈 것 — 행과 칸

블록 에디터를 열기 전에 딱 하나만 알고 가시면 그 뒤가 전부 쉬워집니다.
머블로는 페이지를 행(가로줄)으로 쌓고, 행 하나를 다시 칸(세로 나눔)으로 나눕니다.

공책을 떠올리시면 됩니다.
위에서 아래로 한 줄씩 쓰는 게 행이고, 한 줄을 세로선으로 갈라 왼쪽·오른쪽에 따로 쓰는 게 칸입니다.

인사말처럼 한 덩어리로 넣을 것은 1칸짜리 행이면 되고,
“왼쪽엔 찾아오시는 길, 오른쪽엔 문의처”처럼 나란히 놓고 싶으면 2칸짜리 행을 만듭니다.

그리고 각 칸에는 블록을 하나 넣습니다.
글이면 ‘HTML 직접입력’, 사진이면 ‘이미지’, 영상이면 ‘동영상’ 하는 식입니다.
오늘은 이 중 글과 사진 두 가지로 페이지를 완성해 보겠습니다.

정리하면 행을 만들고 → 칸을 정하고 → 칸에 블록을 넣는다, 이 세 박자입니다.
이 순서가 머리에 있으면 화면이 낯설어도 헤매지 않습니다.

2. 채울 페이지 열기

관리자 페이지 왼쪽에서 ‘블록 관리’를 누르고 ‘블록 에디터’를 선택합니다.
지난 글에서 페이지를 만들 때 들어갔던 바로 그 묶음입니다.

화면이 셋으로 나뉘어 열립니다.
왼쪽은 무엇을 편집할지 고르는 목록, 가운데는 미리보기, 오른쪽은 지금 고른 것의 설정입니다.
앞으로 왼쪽에서 고르고 → 오른쪽에서 만지고 → 가운데로 확인하는 흐름으로 갑니다.

왼쪽 목록을 보시면 ‘회사소개’가 두 군데 있습니다.
지난 글에서 페이지를 만들면 메뉴가 함께 생긴다고 말씀드렸죠?! 그래서 ‘페이지’ 묶음에 하나, ‘블록 페이지’ 묶음에 하나가 있는 겁니다.

둘은 하는 일이 다릅니다.
‘블록 페이지’ 쪽이 페이지 본문입니다. 우리가 채울 곳은 여기입니다.
‘페이지’ 쪽은 그 페이지의 위아래 띠를 다루는 자리입니다. 제목 띠나 안내 문구를 본문 위에 얹을 때 씁니다.

오늘은 본문을 채울 것이니 ‘블록 페이지’ 아래의 회사소개 /about 을 눌러 주세요.
오른쪽에 ‘아직 행이 없습니다’ 라고 나오면 제대로 고르신 겁니다.

한 가지 미리 말씀드립니다.
‘페이지’ 쪽에 행을 넣을 때는 ‘표시 범위’라는 항목이 하나 더 나오는데, 여기서 ‘모든 페이지에’를 고르면 홈을 포함한 다른 페이지에도 똑같이 나타납니다.
회사소개에만 넣으려던 문구가 사이트 전체에 깔리는 일이 생기니, 그때는 ‘이 페이지에만’을 그대로 두세요.

3. 첫 번째 행 — 인사말 넣기

1번에서 정리한 세 박자를 그대로 밟겠습니다.
행을 만들고 → 칸을 정하고 → 칸에 블록을 넣습니다.

오른쪽 위의 ‘행 추가’를 누르면 작은 창이 뜹니다.
묻는 것은 칸 수와 넓이 둘입니다.

인사말은 한 덩어리니 1칸으로 두고, 넓이는 ‘최대넓이’ 그대로 ‘만들기’를 누릅니다.
넓이의 ‘와이드’는 배경을 화면 끝까지 꽉 채우는 것이라, 배경색을 깔 때가 아니면 쓸 일이 별로 없습니다.

행이 생기면 가운데 미리보기에 ‘콘텐츠 타입을 선택하세요’ 라고 적힌 빈 칸이 나타납니다.
이 빈 칸이 우리가 만든 1칸입니다. 여기에 블록을 넣을 차례입니다.

빈 칸을 누르면 오른쪽이 ‘칸 편집’으로 바뀝니다.
‘무엇을 보여줄까요’ 옆의 ‘고르기’를 누르면 넣을 수 있는 블록이 여섯 가지 나옵니다.

글을 쓸 것이니 ‘HTML 직접입력’을 고릅니다.
이름에 HTML이 들어가서 코드를 써야 하나 싶으시겠지만 그렇지 않습니다. 게시글 쓸 때와 똑같은 편집기가 열립니다.

고르고 나면 오른쪽에 ‘내용 편집’이 생깁니다. 눌러서 편집기를 열고 인사말을 씁니다.
사진에서는 이렇게 썼습니다.

다 쓰셨으면 편집기 아래의 ‘저장’을 누릅니다.
여기서 가장 많이 헷갈리는 지점이 나옵니다.

편집기의 ‘저장’은 편집기 창을 닫는 저장입니다. 아직 홈페이지에는 반영되지 않았습니다.
오른쪽 패널 맨 아래의 ‘적용’을 눌러야 비로소 저장됩니다.
저장은 창 닫기, 적용이 진짜 저장 — 이렇게 기억해 두세요. 적용을 안 누르고 다른 데로 가면 쓴 글이 사라집니다.

적용을 누르면 가운데 미리보기에 인사말이 바로 나타납니다.
홈페이지에서 회사소개 메뉴를 눌러 보시면 ‘페이지 콘텐츠가 없습니다’ 대신 인사말이 나옵니다.

여기까지가 행 하나입니다.
이 과정 — 행 추가 → 빈 칸 클릭 → 고르기 → 내용 편집 → 저장 → 적용 — 을 앞으로 두 번 더 반복할 겁니다.
블록만 바뀌지 순서는 똑같습니다.

4. 두 번째 행 — 사진 세 장 나란히

인사말 아래에 만든 물건 사진을 세 장 나란히 놓겠습니다.
“세 장이니 3칸 행을 만들어야겠다” 싶으실 텐데, 그럴 필요가 없습니다.
이미지 블록 하나에 사진을 여러 장 넣으면 알아서 나란히 늘어놓아 줍니다.

미리보기에서 첫 행 아래의 ‘아래에 행 추가’를 누르거나, 오른쪽 위 ‘행 추가’를 누릅니다.
이번에도 1칸으로 만들고, 빈 칸을 눌러 ‘고르기’에서 ‘이미지’를 고릅니다.

‘내용 편집’을 누르면 글 편집기 대신 사진 등록 창이 열립니다.
위쪽이 출력 스타일, 아래쪽이 사진 목록입니다.

아래쪽부터 채우겠습니다.
‘PC 이미지’ 옆의 ‘파일 선택’으로 사진을 하나 올리고, ‘제목’에 그 사진 이름을 적습니다.
다 됐으면 ‘이미지 추가’를 눌러 칸을 하나 더 만들고 같은 식으로 두 장을 더 올립니다. 사진에서는 원목 테이블, 수납장, 의자 세 장을 넣었습니다.

이제 위쪽 출력 스타일입니다. 여기서 PC와 모바일을 따로 정할 수 있는 것이 이 블록의 좋은 점입니다.
PC는 ‘리스트형’에 1줄 출력갯수 ‘3개’로 두면 세 장이 한 줄에 나란히 섭니다.
모바일은 화면이 좁아 세 장을 한 줄에 놓으면 손톱만해지니, ‘슬라이드형’으로 바꿔 한 장씩 넘기게 하는 편이 낫습니다.

여백이나 테두리를 주고 싶어서 이 창 안을 뒤지실 수 있는데, 여기에는 없습니다.
여백·테두리·배경은 어느 블록이든 칸 편집의 ‘스타일’에서 바꿉니다. 창 위쪽 안내문에도 그렇게 적혀 있습니다.

‘저장’으로 창을 닫고 ‘적용’을 누르면 사진 세 장이 인사말 아래에 나란히 놓입니다.

5. 세 번째 행 — 칸을 둘로 나누기

마지막으로 찾아오시는 길과 문의하기를 왼쪽·오른쪽에 나란히 놓겠습니다.
이번에는 내용이 둘이고 서로 다른 글이니, 4번처럼 블록 하나로는 안 되고 칸을 둘로 나눠야 합니다.

‘행 추가’에서 이번에는 2칸을 고르고 만듭니다.
미리보기에 빈 칸이 왼쪽·오른쪽 두 개 생깁니다.

왼쪽 빈 칸을 눌러 ‘HTML 직접입력’을 고르고 찾아오시는 길을 씁니다. 주소와 영업시간 정도면 됩니다.
저장 → 적용까지 하고, 이번에는 오른쪽 빈 칸을 눌러 같은 방법으로 문의처를 씁니다. 전화번호와 이메일이면 충분합니다.

칸 두 개의 너비는 반반이 기본입니다.
한쪽을 더 넓게 하거나 사이를 띄우고 싶으면 행 편집의 레이아웃에서 칸 간격을 조절하시면 됩니다. 처음에는 그대로 두셔도 괜찮습니다.

여기서 4번과 5번의 차이를 한 번 더 짚겠습니다.
같은 종류를 여러 개 나란히 놓을 때는 블록 하나에 여러 개(4번의 사진 세 장),
서로 다른 것을 나란히 놓을 때는 칸을 나눕니다(5번의 길·문의).
이 구분만 서면 어떤 배치든 만들 수 있습니다.

6. 완성 확인과 뒷정리

홈페이지에서 회사소개를 열어 보겠습니다.

인사말, 사진 세 장, 그 아래 찾아오시는 길과 문의하기.
빈 페이지 하나가 회사소개다운 회사소개가 됐습니다. 행 세 개로 만든 겁니다.

휴대폰에서 어떻게 보이는지도 꼭 확인해 주세요.
블록 에디터 오른쪽 위의 1440 · 1280 · 768 · 360 숫자가 미리보기 폭을 바꾸는 버튼입니다. 360이 휴대폰 폭입니다.

4번에서 모바일을 슬라이드형으로 둔 덕에 사진이 한 장씩 넘어가고,
5번의 두 칸은 좁은 화면에서 자동으로 위아래로 쌓입니다. 따로 손댈 것이 없습니다.

마지막으로 뒷정리 세 가지입니다.

첫째, 오른쪽 행 목록이 전부 ‘새 행’이라고만 되어 있을 겁니다.
행을 눌러 ‘관리용 제목’에 ‘인사말’, ‘사진’, ‘길·문의’처럼 이름을 적어 두세요. 홈페이지에는 안 보이고 관리자에게만 보이는 이름이라, 나중에 고칠 때 바로 찾을 수 있습니다.

둘째, 순서를 바꾸고 싶으면 같은 자리의 ‘위로’·‘아래로’를 쓰고, 잠시 감추고 싶으면 ‘화면에 표시’ 체크를 끄세요.
지우지 않고 감추는 것이라 나중에 다시 켜면 그대로 돌아옵니다. 행사 안내처럼 넣었다 뺐다 하는 것에 요긴합니다.

셋째, 정말 지울 때는 ‘삭제’를 누르는데, 그러면 한 번 더 묻는 창이 뜹니다.
그 창의 버튼은 ‘확인’이 아니라 ‘삭제’입니다. 거기까지 눌러야 지워집니다. 잘못 지우셨어도 ‘블록 행 관리’의 삭제 이력에서 되살릴 수 있으니 걱정 마세요.