1. 팝업과 배너, 무엇이 다를까요

둘 다 소식을 알리는 도구지만 쓰임이 다릅니다. 만들기 전에 차이부터 보고 가겠습니다.

팝업은 홈에 들어오는 순간 화면 위에 뜨는 작은 창입니다. 눈에 가장 잘 띄는 대신, 보는 사람이 닫아야 뒤 화면을 쓸 수 있습니다. 그래서 휴무나 행사처럼 기간이 정해진 소식에 씁니다.
배너는 페이지 안에 자리 잡은 가로 그림입니다. 닫는 버튼이 없고, 누르면 정해 둔 페이지로 갑니다. 꾸준히 보여 줄 안내나 다른 페이지로 가는 문으로 씁니다.

예를 들면 이렇습니다. 한결 공방은 10월 17일과 18일에 작업실을 여는 ‘가을 오픈 공방’을 합니다.
이 소식은 팝업으로 띄웁니다. 그리고 홈 대문 아래에는 배너를 두 장 겁니다. 한 장은 오픈 공방 안내, 한 장은 작업 갤러리로 가는 문입니다.

두 기능은 처음에는 꺼져 있습니다. ⑦에서 게시판을 켰던 그곳, ‘사이트 설정’ → ‘확장 기능’으로 가 주세요.

플러그인 목록에서 ‘배너’와 ‘팝업’에 체크하고 오른쪽 위 ‘저장’을 누릅니다.
저장하면 왼쪽 메뉴 맨 아래 ‘플러그인’ 묶음에 ‘배너 관리’와 ‘팝업 관리’가 생깁니다.

‘팝업 관리’를 눌러 보면 목록 대신 이런 화면이 먼저 나옵니다.

팝업 내용을 담아 둘 자리를 데이터베이스에 만드는 과정입니다. ‘지금 설치하기’를 누르고, 확인 창에서 ‘확인’을 눌러 주세요. 처음 한 번만 하면 됩니다.
‘배너 관리’도 똑같은 화면이 나오니 같은 방법으로 설치해 둡니다.

2. 팝업 만들기 — 가을 오픈 공방 안내

팝업은 작은 창이라 글을 길게 쓸 수 없습니다. 그래서 자세한 내용은 공지사항에 쓰고, 팝업은 그 글로 보내는 역할만 맡깁니다.
먼저 ⑦에서 한 대로 공지사항에 ‘가을 오픈 공방 안내’ 글을 하나 올려 주세요.

올린 글을 열었을 때 주소창에 보이는 /board/notice/view/7 까지가 이 글의 주소입니다. 끝의 숫자는 글마다 다릅니다. 이 주소를 잠시 뒤에 씁니다.

이제 ‘팝업 관리’에서 오른쪽 위 ‘팝업 추가’를 누릅니다.

① 팝업 제목은 관리자 목록에서 구분하려고 붙이는 이름입니다. 방문자에게는 보이지 않으니 알아보기 쉽게만 적으면 됩니다.
② 팝업 콘텐츠가 실제로 뜨는 내용입니다. 게시판 글쓰기와 같은 편집기라서, 글을 쓰고 가운데로 맞추고 날짜를 굵게 만드는 방법이 모두 같습니다.

마지막 줄 ‘자세한 안내 보기’에는 공지 글로 가는 링크를 겁니다.
글자를 드래그해서 고른 뒤 도구 모음의 사슬 모양 ‘링크’ 버튼을 누르면 ‘링크 삽입’ 창이 뜹니다. URL 칸에 아까 그 주소 /board/notice/view/7 을 넣고 ‘삽입’을 누릅니다.

이때 위쪽의 ‘링크 URL’ 칸과는 구분해 주세요!
팝업 전체를 누르면 이동한다고 적혀 있지만, 지금 버전(팝업 1.0.0)에서는 채워 넣어도 눌러서 이동하지 않았습니다. 링크는 내용 안에 직접 거는 쪽이 확실합니다.

하나 더 있습니다. 편집 화면에서는 문단 사이가 넉넉해 보이지만, 실제 팝업에서는 줄이 붙어서 나옵니다.
사진처럼 덩어리 사이에 빈 줄을 한 줄씩 넣어 주세요. Enter를 한 번 더 치면 됩니다.

오른쪽은 어떻게 띄울지 정하는 곳입니다.
③ 너비는 기본 500에서 420으로 줄였습니다. 글 몇 줄짜리 안내에는 이 정도가 알맞습니다. 높이는 0으로 두면 내용에 맞춰집니다.
④ 표시 기간은 시작 10월 1일, 종료 10월 18일로 넣었습니다. 행사 마지막 날까지만 뜨고 그 뒤로는 저절로 안 뜹니다. 비워 두면 계속 뜹니다.
⑤ 안 보기 유지 시간은 방문자가 “그만 보기”를 눌렀을 때 몇 시간 동안 안 띄울지입니다. 기본값 24를 그대로 둡니다.

그 위의 위치는 중앙·좌상단·우상단·좌하단·우하단 가운데 고르고, 표시 기기로 PC나 모바일에만 띄울 수도 있습니다. 여기서는 중앙, 전체 그대로 둡니다.
다 됐으면 오른쪽 위 ‘저장’을 눌러 주세요!

3. 홈에서 팝업 확인하기

팝업은 저장하는 순간부터 뜹니다. 따로 어디에 걸 필요가 없습니다.
홈페이지 첫 화면을 열어 보겠습니다.

화면 가운데에 팝업이 떴습니다. 아래쪽에 버튼이 둘 있습니다.
① ‘1일 동안 보지 않기’를 누르면 그 브라우저에서는 24시간 동안 다시 뜨지 않습니다. 방금 넣은 ‘안 보기 유지 시간’ 24가 여기에 쓰입니다.
② ‘닫기’는 지금만 닫습니다. 새로 고치면 다시 뜹니다.

확인하다가 ‘1일 동안 보지 않기’를 누르면 내 화면에서도 하루 동안 안 뜹니다.
“팝업이 사라졌다”고 놀라지 마시고, 다시 보고 싶을 때는 다른 브라우저나 시크릿 창으로 열어 주세요.

직접 눌러 보며 확인한 것 세 가지를 적어 둡니다.
첫째, 팝업은 홈 첫 화면에서만 뜹니다. 공지사항 같은 다른 페이지에서는 뜨지 않습니다.
둘째, 팝업이 떠 있는 동안에는 뒤 화면의 메뉴가 눌리지 않습니다. 닫아야 다른 곳으로 갈 수 있습니다.
셋째, 팝업을 두 개 띄우면 서로 가립니다. 위치가 같으면 겹쳐서 하나가 안 보이고, 위치를 달리해도 위에 뜬 것을 닫기 전에는 아래 것이 눌리지 않습니다.

그래서 팝업은 한 번에 하나만, 짧게 쓰는 것이 좋습니다. 알릴 것이 여럿이면 팝업 하나에 모으거나, 다음 단계의 배너로 나눠 주세요.

휴대폰에서도 열어 봅니다. 너비를 420으로 넣었지만 화면이 그보다 좁으면 화면 폭에 맞춰 줄어듭니다. 글이 어색하게 끊기지 않는지만 확인하면 됩니다.

4. 배너 등록하기

배너는 글이 아니라 그림입니다. 머블로 안에서 만드는 게 아니라, 만들어 둔 그림 파일을 올리는 방식입니다.
그림은 두 가지 크기로 준비해 주세요. PC용은 가로로 긴 그림, 모바일용은 정사각형에 가까운 그림입니다. 예시는 PC용 1600×480, 모바일용 800×800으로 만들었습니다.

왜 두 장이냐면, 가로로 긴 배너를 휴대폰에 그대로 내보내면 글씨가 읽기 어려울 만큼 작아지기 때문입니다. ⑥에서 이미지 블록을 다룰 때 드린 말씀과 같은 이유입니다.

‘배너 관리’에서 오른쪽 위 ‘배너 추가’를 누릅니다.

배너 제목에는 그림이 무엇인지 적습니다. 그림이 안 보일 때 대신 읽히는 설명으로도 쓰입니다.
① 링크 URL에 배너를 눌렀을 때 갈 주소를 넣습니다. 공지 글 주소 /board/notice/view/7 을 넣었습니다. 팝업과 달리 배너의 링크 URL은 넣은 대로 동작합니다.

② PC 이미지의 ‘업로드’를 눌러 가로로 긴 그림을 고르고, ③ 모바일 이미지에는 정사각형 그림을 고릅니다. 고르면 바로 아래에 미리보기가 나옵니다.
모바일 이미지를 비워 두면 휴대폰에서도 PC 이미지가 나옵니다.

④ 노출 기간은 팝업과 똑같이 10월 1일 ~ 10월 18일로 넣었습니다. 그 위의 정렬 순서는 숫자가 작을수록 앞에 옵니다. 먼저 보여 줄 배너라 1을 넣었습니다.
‘저장’을 누르고, 같은 방법으로 둘째 배너도 등록합니다.

둘째 배너는 ‘작업 갤러리 보러 가기’, 링크는 /board/gallery, 정렬 순서는 2입니다. 늘 걸어 둘 배너라 노출 기간은 비워 둡니다.

목록에 두 장이 올라왔습니다. 미리보기 그림과 순서, 노출 기간이 한눈에 보입니다.
그런데 지금 홈페이지에 가 보면 배너는 어디에도 없습니다. 팝업은 저장하면 바로 떴지만, 배너는 어디에 놓을지 정해 줘야 보입니다. 그 자리를 정하는 곳이 블록 에디터입니다.

5. 배너를 홈에 걸기

‘블록 관리’ → ‘블록 에디터’를 열고 왼쪽에서 ‘메인화면’을 고릅니다.
오른쪽 위 ‘+ 행 추가’를 누르고, 칸 수는 1칸 그대로 ‘만들기’를 누릅니다. ⑤에서 해 본 그대로입니다. 새 행은 맨 아래에 생깁니다.

새 행의 빈 칸을 누르고 ‘고르기’를 누르면 블록을 고르는 창이 뜹니다.

‘플러그인’ 묶음에 ‘배너’가 보입니다. 1단계에서 플러그인을 켰기 때문에 생긴 것입니다. 눌러 주세요.

오른쪽 패널에 ‘표시할 내용 0개 선택됨’이라고 나옵니다. 배너 블록을 놓기만 했지, 어떤 배너를 보여 줄지는 아직 안 골랐다는 뜻입니다.
여기서 순서가 중요합니다. ① 먼저 맨 아래 ‘적용’을 누르고, ② 그다음에 ‘내용 고르기 (전체 설정 화면)’을 눌러 주세요.

‘적용’을 건너뛰고 바로 ‘내용 고르기’를 누르면, 열리는 창에 콘텐츠 타입이 ‘선택하세요’로 비어 있고 배너 목록이 나오지 않습니다. 배너 블록을 골랐다는 사실이 아직 저장되지 않았기 때문입니다.

‘1번째 칸 설정’ 창이 열립니다. 조금 내려가서 두 군데를 손봅니다.
① 출력 스타일에서 PC와 모바일 모두 스타일을 ‘슬라이드형’, 1줄 출력갯수를 ‘1개’로 바꿉니다. 한 번에 한 장씩 크게 보여 주고 넘기는 방식입니다.
슬라이드형을 고르면 바로 아래에 체크 칸이 나타납니다. ‘자동재생’과 ‘무한반복’을 양쪽 다 켜 주세요.

이 두 칸을 안 켜면 배너가 저절로 넘어가지 않습니다. 화살표나 점 표시도 없어서, 방문자가 손으로 끌어 보기 전에는 둘째 배너가 있는 줄도 모릅니다. 처음에 안 켜고 해 봤다가 12초를 기다려도 첫 장 그대로였습니다.

② 아이템 선택에서는 왼쪽 ‘사용 가능한 배너’에 있는 배너를 오른쪽 ‘선택된 배너’로 넘깁니다. 가운데 맨 위 » 버튼을 누르면 한꺼번에 넘어갑니다.
다 됐으면 오른쪽 아래 ‘적용’을 누릅니다.

창이 닫히면 뒤에 ‘블록 행 수정’ 화면이 남아 있습니다. 여기서 끝이 아닙니다. 맨 아래로 내려가 파란 ‘저장’을 눌러야 실제로 저장됩니다.
저장하면 화면이 닫히고, 미리보기 맨 아래에 배너가 나타납니다.

6. 자리 옮기고 완성 확인

배너가 맨 아래에 있으면 거기까지 내려온 사람만 봅니다. 대문 그림 바로 아래로 올리겠습니다.
오른쪽 ‘화면 구성’ 목록에서 방금 만든 행을 누릅니다.

먼저 관리용 제목을 ‘새 행’ 대신 ‘소식 배너’로 바꾸고 아래 ‘적용’을 눌러 둡니다. 나중에 목록에서 찾기 쉽습니다.
그다음 위쪽의 ‘위로’를 누릅니다. 누를 때마다 한 줄씩 올라갑니다. 세 번 눌러서 둘째 자리로 올렸습니다.

이제 홈페이지를 열어 봅니다.

대문 아래에 배너가 걸렸습니다. 5초마다 다음 장으로 넘어가고, 누르면 공지 글로 갑니다.
넘어가는 간격은 자동재생 옆의 숫자입니다. 5000이 5초이고, 모바일은 3000, 3초로 되어 있습니다.

휴대폰에서는 따로 올린 정사각형 그림이 나옵니다. 글씨가 작아지지 않고 화면 폭을 꽉 채웁니다.

끝으로, 넣어 둔 기간이 어떻게 작동하는지 말씀드립니다.
오픈 공방 배너는 노출 기간을 10월 18일까지로 넣었습니다. 그날이 지나면 그 배너만 빠지고 작업 갤러리 배너는 그대로 남습니다. 블록 에디터를 다시 열 필요가 없습니다. 팝업도 같은 날까지만 뜹니다.
종료일을 어제 날짜로 넣어 시험해 보니 홈에서 바로 빠졌습니다. 행사가 끝난 뒤 내리는 일을 잊어버려도 괜찮다는 뜻입니다.

기간과 상관없이 당장 내리고 싶을 때는 배너 수정 화면에서 ‘사용’을 끄고 저장하시면 됩니다. 팝업 수정 화면에도 같은 칸이 있습니다.