1. 사이드바 자리부터 켜기

사이드바는 본문 옆에 세로로 길게 붙는 칸입니다. 머블로는 설치 직후 ‘전체’ 레이아웃이라 이 칸이 아예 없습니다. 먼저 자리를 만들어야 합니다.
③에서 봤던 ‘사이트 설정’ → ‘기본 설정’의 레이아웃 설정으로 갑니다.

① 레이아웃 형태에서 ‘우측 사이드바’를 고릅니다. 고르면 아래에 사이드바 칸이 나타납니다.
② 우측 사이드바 폭은 기본 250에서 300으로 넓혔습니다. 배너를 넣을 생각이라 조금 여유를 뒀습니다. 옆의 ‘모바일 출력’은 지금은 꺼 둔 채로 두겠습니다. 6단계에서 다룹니다.
③ ‘메인화면에 레이아웃 적용’은 꺼진 상태 그대로 둡니다. 홈은 대문과 배너가 꽉 차 있어서 사이드바가 들어오면 오히려 답답해집니다. 꺼 두면 홈만 전체 폭으로 남습니다.
오른쪽 위 ‘저장’을 누릅니다.

저장만 하고 공지사항 페이지를 열어 보겠습니다.

오른쪽에 빈자리가 생겼습니다. 본문이 좁아지고 그 옆이 비어 있습니다. 자리는 생겼지만 아직 아무것도 안 넣었기 때문입니다.
이 자리를 채우는 곳은 지금까지와 같은 블록 에디터입니다. 사이드바도 행과 칸으로 채웁니다.

2. 사이드바에 행 만들기 — 한 번 만들면 모든 페이지에

‘블록 관리’ → ‘블록 에디터’를 엽니다. 왼쪽 목록에서 이번에는 메인화면이 아니라 ‘페이지’ 아래의 ‘공지사항’을 고릅니다.
미리보기에 공지사항 페이지가 뜨고, 오른쪽은 ‘행 0개’입니다. ‘+ 행 추가’를 누릅니다.

메인화면에서 행을 만들 때와 창이 조금 다릅니다.
① ‘어디에 표시할까요’에 ‘오른쪽 사이드바’가 있습니다. 1단계에서 우측 사이드바를 켰기 때문에 생긴 항목입니다. 이걸 고릅니다.
② ‘표시 범위’는 ‘모든 페이지에’를 고릅니다. ‘이 페이지에만’으로 두면 공지사항에서만 보이는 행이 됩니다. 사이드바는 어느 페이지에서나 같은 모습이어야 하니 모든 페이지로 합니다.
칸 수는 1칸 그대로 ‘만들기’를 누릅니다.

만들고 나면 행 이름 옆에 ‘전역’ 표시가 붙습니다. 이 행은 공지사항뿐 아니라 사이드바가 있는 모든 페이지에 함께 나온다는 뜻입니다. 패널에도 “이 행은 모든 페이지 공통입니다”라고 알려 줍니다.
한 번 만들면 되고, 페이지마다 따로 만들 필요가 없습니다.

3. 로그인 상자와 공지 최신글 넣기

첫 행의 빈 칸을 누르고 ‘고르기’에서 ‘로그인 위젯’을 고른 뒤 ‘적용’을 누릅니다. ⑥에서 말씀드린 대로 이 블록은 내용 편집이 없습니다. 고르고 적용하면 끝입니다.

둘째 행은 2단계와 똑같이 하나 더 만듭니다. 오른쪽 사이드바, 모든 페이지에, 1칸.
빈 칸을 누르고 ‘게시판 최신글’을 고릅니다. ⑧에서 홈 공지 칸에 썼던 그 블록입니다.

① ‘고르기’를 눌러 공지사항에 체크하고 ‘선택 완료’를 누릅니다.
② ‘제목’ 접이식을 펼쳐 ‘칸 제목 표시’를 켜고 제목에 공지사항, 더보기 링크에 /board/notice, 더보기 문구에 더보기를 넣습니다.
제목을 안 켜면 글 목록만 덜렁 나와서 무슨 목록인지 알 수 없습니다. 사이드바처럼 좁은 칸에서는 제목이 더 중요합니다.
‘적용’을 누릅니다.

행 이름도 붙여 두면 좋습니다. 오른쪽 목록의 행 카드를 누르고 관리용 제목에 ‘사이드바 로그인’, ‘사이드바 공지’처럼 적은 뒤 ‘적용’합니다. 사이드바 행은 다른 페이지를 열어도 같은 이름으로 보이니, 나중에 찾기가 훨씬 쉽습니다.

4. 갤러리 배너까지 넣고 확인하기

셋째 행에는 ⑩에서 만들어 둔 ‘작업 갤러리 보러 가기’ 배너를 넣습니다. 홈에서는 두 장이 번갈아 넘어가는 슬라이드였지만, 여기서는 한 장만 가만히 걸어 둡니다.
행을 하나 더 만들고 빈 칸에서 ‘배너’를 고른 뒤 ‘적용’, 그다음 ‘내용 고르기 (전체 설정 화면)’을 엽니다. ⑩에서 익힌 순서 그대로입니다.

이번에는 출력 스타일을 PC·모바일 모두 ‘리스트형’, ‘1개’로 두고, 아이템 선택에서 ‘작업 갤러리 보러 가기’ 한 장만 오른쪽으로 넘깁니다. 창의 ‘적용’, 그리고 맨 아래 ‘저장’까지 누릅니다.

에디터 미리보기에 세 덩어리가 세로로 쌓였습니다. 사이드바는 폭이 좁아서 행 하나에 칸 하나, 위에서 아래로 쌓는 구조가 자연스럽습니다.

이제 홈페이지에서 봅니다. 먼저 로그아웃한 방문자 눈으로 공지사항입니다.

로그인 상자, 공지사항 세 건과 더보기, 갤러리 배너가 차례로 붙었습니다.
자유게시판, 작업 갤러리, 공지 글 안으로 들어가도 같은 사이드바가 따라옵니다. 2단계에서 ‘모든 페이지에’를 골랐기 때문입니다.

⑨에서 만든 손님 계정으로 로그인해 보면 로그인 상자가 “나무좋아님 환영합니다”와 ‘내정보’ ‘로그아웃’ 버튼으로 바뀝니다. 로그인 위젯은 이렇게 상태에 따라 알아서 모습을 바꿉니다.

5. 사이드바가 안 나오는 페이지 셋

다 된 것 같지만, 돌아다녀 보면 사이드바가 없는 페이지가 셋 있습니다. 세 가지 모두 이유가 다르니 하나씩 짚겠습니다.

첫째, 홈. 1단계에서 ‘메인화면에 레이아웃 적용’을 꺼 뒀기 때문입니다. 의도한 대로입니다. 홈에도 사이드바를 두고 싶으면 그 스위치를 켜면 됩니다.
둘째, 로그인·회원가입 화면. 이 화면들은 사이트 머리와 꼬리 없이 가운데 카드만 띄우는 구조라, 사이드바도 같이 빠집니다. 바꿀 수 없고 바꿀 필요도 없습니다.

셋째, 회사소개. 이 페이지는 ⑤에서 블록 페이지로 만들었죠?! 블록 페이지는 자기 레이아웃을 따로 갖고 있어서 사이트 설정을 따라오지 않습니다.
‘블록 관리’ → ‘블록 페이지 관리’에서 회사소개의 ‘수정’을 누르고 레이아웃 설정 카드로 내려갑니다.

레이아웃 형태에서 ‘우측 사이드바’를 고르고 ‘저장’합니다. 아래 사이드바 폭은 0으로 두면 사이트 기본값(300)을 씁니다.

회사소개에도 같은 사이드바가 붙었습니다. 행을 다시 만들 필요 없이 자리만 열어 주면 전역 행이 알아서 들어옵니다.

반대로 특정 메뉴에서만 사이드바를 빼고 싶을 때도 있습니다. 그때는 ④의 ‘메뉴 관리’에서 그 메뉴를 열면 ‘화면 레이아웃’ 칸이 있습니다. 기본은 ‘사이트 기본 따름 (상속)’이고, 여기서 ‘전체 (사이드바 없음)’을 고르면 그 메뉴만 전체 폭이 됩니다.

6. 휴대폰에서는 어디에 나오나요

사이드바는 PC 화면 기준입니다. 휴대폰처럼 좁은 화면에서는 기본적으로 숨겨집니다. 좁은 화면에 옆 칸을 둘 수 없기 때문입니다.
그래도 로그인 상자나 공지 목록은 휴대폰에서도 보여 주고 싶다면, 1단계에서 지나쳤던 스위치를 켭니다.

‘기본 설정’ → 레이아웃 설정의 우측 사이드바 옆 ‘모바일 출력’을 켜고 저장합니다.

휴대폰에서는 사이드바가 옆이 아니라 본문 아래로 내려옵니다. 공지 목록을 다 읽고 내려가면 로그인 상자, 최신글, 배너가 이어집니다.
블록 페이지에는 같은 이름의 스위치가 따로 있으니, 회사소개에서도 보이게 하려면 5단계의 레이아웃 설정 카드에서 한 번 더 켜 주세요.

끝으로 하나. ⑪의 상담 버튼은 사이드바 위에 겹쳐서 떠 있습니다. 사진에서도 배너 모서리에 버튼이 올라타 있죠?!
거슬리면 위젯 관리에서 버튼 크기를 줄이거나, 사이드바에 넣는 내용을 위쪽에 몰아 두면 됩니다. 버튼은 화면 세로 가운데에 붙으니 그 높이만 비워 두는 것도 방법입니다.