1. 어떤 블록을 언제 쓰나 

칸을 누르고 ‘고르기’를 누르면 여섯 가지가 나옵니다. 지난 글에서 보신 그 창입니다.
고르는 기준은 딱 하나입니다. 그 칸에 넣고 싶은 것이 무엇인가.

표에서 위 두 줄이 전체의 8할입니다.
글과 사진만 있으면 회사소개든 서비스 안내든 웬만한 페이지는 다 만들어집니다. 지난 글에서 그 둘로 회사소개를 완성했던 것처럼요.

동영상과 메뉴는 필요할 때 하나씩 얹는 것이고, 로그인 위젯은 사이드바용입니다.
PHP 파일 포함은 코드를 직접 만드는 분들 몫이라, 오늘은 “그런 게 있다” 정도만 알고 가시면 됩니다.

하나 미리 말씀드리면, 어떤 블록을 골랐든 칸에 붙는 설정은 똑같습니다.
블록마다 따로 배울 것이 아니라 한 번만 익히면 되는 부분이라, 그것부터 보겠습니다.

2. 어떤 블록에나 붙어 있는 설정 네개

블록을 고르고 나면 오른쪽 ‘칸 편집’ 패널의 큰 ‘내용 편집’ 버튼 아래에 접혀 있는 항목이 넷 있습니다.
블록이 무엇이든 이 넷은 항상 같은 자리에 있습니다.

① 출력 설정 — 스크롤하다 블록이 보이는 순간의 움직임입니다.
② 제목 — 블록 위에 붙는 머리말입니다.
③ 스타일 — 여백, 배경색, 테두리처럼 칸의 생김새입니다.
④ 콘텐츠 추가 — 한 칸에 블록을 하나 더 쌓는 버튼입니다.

①과 ③은 3번에서, ④는 6번에서 따로 보겠습니다.
지금은 제목만 열어 보겠습니다.

‘칸 제목 표시’에 체크해야 아래 칸들이 살아납니다. 체크 없이 제목만 적으면 아무것도 안 나옵니다.
제목은 큰 글씨, 보조 문구는 그 아래 작은 글씨로 붙습니다.

더보기 링크와 더보기 문구는 제목 오른쪽 끝에 작은 링크를 하나 붙이는 것입니다.
홈 화면에 공지사항 몇 줄을 보여주고 옆에 ‘더보기’를 달아 게시판으로 보낼 때 씁니다. 링크에는 /board/notice 처럼 내 사이트 안 주소를 적으시면 됩니다.

반대로 지난 글의 인사말처럼 글 안에 이미 제목이 들어 있으면 여기는 켜지 않는 편이 깔끔합니다.
제목이 두 번 나오게 됩니다.

그리고 잊지 마세요. 어느 항목이든 바꾸고 나면 패널 맨 아래 ‘적용’입니다.
지난 글의 저장은 창 닫기, 적용이 진짜 저장 규칙이 여기서도 그대로입니다.

3. 생김새는 스타일에서, 움직임은 출력 설정에서

사진에 여백을 주고 싶어서 이미지 블록의 내용 편집 창을 아무리 뒤져도 여백 칸은 없습니다.
그 창 위쪽 안내문에도 “여백·테두리는 칸 편집의 [스타일]에서”라고 적혀 있습니다. 블록이 아니라 칸의 일이기 때문입니다.

칸 너비는 비워 두면 같은 행의 칸들이 균등하게 나뉩니다.
지난 글의 길·문의 두 칸에서 왼쪽을 더 넓게 하고 싶다면 왼쪽 칸에 60%, 오른쪽 칸에 40% 처럼 적으시면 됩니다.

안쪽 여백은 칸 테두리와 내용 사이 간격입니다.
값 하나만 쓰면 사방이 같고(15px), 둘을 쓰면 앞이 위아래·뒤가 좌우입니다(15px 10px). PC와 모바일을 따로 적을 수 있는데, 모바일은 화면이 좁으니 조금 작게 주는 편이 좋습니다.

배경 색상, 테두리 두께, 라운드는 이름 그대로입니다.
예를 들어 문의하기 칸을 카드처럼 보이게 하려면 안쪽 여백 20px, 배경 #f7f9fc, 테두리 1px, 라운드 12px 정도면 됩니다. 값을 넣고 ‘적용’을 누르면 가운데 미리보기가 바로 바뀌니 눈으로 보면서 맞추시면 됩니다.

다음은 출력 설정입니다.

출력 이벤트는 스크롤을 내리다 그 블록이 화면에 들어오는 순간 어떻게 나타날지입니다.
Fade Up은 아래에서 떠오르고, Fade Down·Left·Right는 방향만 다릅니다. Zoom In은 작게 있다가 커지고, Zoom Out은 그 반대입니다.

이벤트 시간은 그 움직임이 몇 밀리초 동안 이어질지입니다. 1000이 1초이고, 기본값 600이면 충분히 자연스럽습니다.

여기서 한 가지 당부입니다.
모든 블록에 다 걸지 마세요. 첫 화면의 큰 사진 하나에 Fade Up 정도가 딱 좋습니다. 전부 움직이면 정성 들인 페이지가 오히려 정신없어 보입니다.

4. 이미지 블록, 지난 글에서 안 본 것들

지난 글에서는 사진 세 장을 올리고 PC는 리스트형, 모바일은 슬라이드형으로 두는 데까지 했죠?!
같은 창에 아직 안 써 본 것이 세 가지 있습니다.

① 슬라이드 옵션은 스타일을 ‘슬라이드형’으로 골랐을 때만 의미가 있습니다.
자동재생에 체크하고 옆 칸에 3000을 두면 3초마다 다음 장으로 넘어가고, 무한반복은 마지막 장 다음에 다시 첫 장으로 돌아가게 합니다.
이미지 높이 맞춤(cover)은 사진 크기가 제각각일 때 높이를 맞춰 잘라 보여주는 것이라, 세로가 들쭉날쭉해 보이면 켜 보세요.

② 모바일(선택)은 좁은 화면에서 대신 보여줄 사진을 따로 올리는 자리입니다.
가로로 긴 배너는 휴대폰에서 글씨가 안 읽힐 만큼 작아지는데, 그럴 때 세로로 다시 만든 배너를 여기에 넣으면 PC와 휴대폰이 각자 알맞은 그림을 보여줍니다. 비워 두면 PC 이미지가 그대로 나옵니다.

③ 링크는 사진을 누르면 이동할 주소입니다.
제품 사진을 누르면 상세 페이지로 가게 하는 식인데, 내 사이트 안이면 /p/about-us 처럼 앞에 빗금만, 바깥 사이트면 https:// 부터 적습니다. 바깥으로 보낼 때는 옆의 ‘새창’을 켜서 내 사이트가 닫히지 않게 하는 편이 좋습니다.

끝으로 출력 스타일에 ‘숨김’이 있는 것도 알아 두세요.
PC를 숨김으로 두고 모바일만 슬라이드형으로 두면 휴대폰에서만 보이는 사진이 됩니다. 앱 설치 안내 배너처럼 PC에서는 필요 없는 그림에 씁니다.

5. 동영상·메뉴·로그인 위젯 — 각각 화면 하나면 끝

나머지 세 블록은 설정이 몇 개 안 됩니다. 하나씩 보겠습니다.
먼저 동영상입니다. 블록을 고르고 ‘내용 편집’을 누르면 이 창이 열립니다.

① 동영상 종류는 YouTube, Vimeo, 동영상 파일 URL 셋 중 하나입니다.
유튜브라면 주소창의 주소를 그대로 붙여 넣으시면 되고, 직접 올린 mp4 파일이면 그 파일의 주소를 적습니다.

② 자동 재생과 음소거에서 꼭 아셔야 할 것이 있습니다.
자동 재생을 켜려면 음소거도 켜져 있어야 합니다. 창에도 그렇게 적혀 있죠?! 소리가 나는 영상을 마음대로 트는 것은 브라우저가 막기 때문에, 음소거를 끈 채 자동 재생만 켜면 아예 재생이 안 됩니다.
첫 화면에 배경처럼 깔 영상이면 둘 다 켜고, 방문자가 눌러서 볼 영상이면 자동 재생을 끄시면 됩니다.

다음은 메뉴 블록입니다.
④에서 만든 메뉴를 페이지 안에 목록으로 놓는 블록인데, 상단 메뉴와는 별개입니다. 서비스 안내 페이지 왼쪽에 하위 메뉴를 세로로 붙이는 식으로 씁니다.

이 블록에는 ‘내용 편집’ 대신 ‘표시할 내용’ 옆의 ‘고르기’가 있습니다.
누르면 만들어 둔 메뉴가 쭉 나오고, 보여줄 것만 체크한 뒤 ‘선택 완료’를 누릅니다. 목록에 원하는 메뉴가 없으면 창 아래 안내처럼 먼저 ‘메뉴 관리’에서 만들고 오셔야 합니다.

그 아래 ‘디자인 (스킨)’에서 모양을 고릅니다. 넷이 있습니다.
basic 은 기본 목록, sidebar 는 옆에 붙이는 세로 목록, tabs 는 가로 탭, tree 는 하위 메뉴가 접혔다 펼쳐지는 나무 모양입니다.
어디에 둘지에 맞춰 고르시면 됩니다. 왼쪽 칸이면 sidebar, 본문 위에 가로로 놓을 거면 tabs 입니다.

마지막으로 로그인 위젯입니다.

이 블록은 고를 것이 없습니다. 넣을 내용이 로그인 상자로 정해져 있어서 ‘내용 편집’이 아예 없고, 스킨은 지금 basic 하나뿐입니다.
“왜 설정이 없지?” 하고 찾지 않으셔도 됩니다. 사이드바 칸에 넣어 두면 방문자가 어느 페이지에서든 바로 로그인할 수 있습니다.

PHP 파일 포함도 한 줄만 짚고 가겠습니다.
직접 만든 PHP 파일을 칸에 끼워 넣는 블록이라 ‘내용 편집’도 ‘출력 설정’도 없습니다. 코드를 만지지 않으실 거라면 없는 블록이라고 생각하셔도 괜찮습니다.

6. 한 칸에 여러 개 쌓기 — 콘텐츠 추가

지난 글의 사진 세 장 아래에 “주문 제작도 가능합니다” 같은 설명 한 줄을 붙이고 싶다고 해 보겠습니다.
행을 하나 더 만들어도 되지만, 그러면 사진과 설명 사이가 행 간격만큼 벌어집니다. 사진에 딱 붙이고 싶을 때가 콘텐츠 추가가 필요한 순간입니다.

사진이 들어 있는 칸을 눌러 ‘칸 편집’을 열고, 2번에서 본 ④ ‘콘텐츠 추가’를 누릅니다.
그러면 패널 위쪽이 이렇게 바뀝니다.

① ‘이 칸의 콘텐츠’에 칩이 두 개 생깁니다. 앞의 것이 원래 있던 블록이고, 뒤의 ‘미설정’이 방금 추가된 빈자리입니다.
칩을 누르면 그 콘텐츠의 설정으로 전환되고, 칩을 끌어서 순서를 바꿀 수도 있습니다. 옆의 ‘+ 추가’로 셋, 넷도 쌓입니다.

‘미설정’이 선택된 상태에서 아래 ‘고르기’를 누르면 여느 때처럼 블록 여섯 가지가 나옵니다.
‘HTML 직접입력’을 골라 설명을 쓰고, 저장 → ‘적용’까지 하면 사진 바로 아래에 붙습니다.

② 간격은 쌓인 콘텐츠 사이의 틈입니다. PC와 모바일을 따로 적고, 단위는 픽셀입니다.
0이면 딱 붙고, 사진과 설명 사이를 살짝 띄우고 싶으면 12 정도면 됩니다.

여기서 지난 글의 칸 나누기와 헷갈리실 수 있는데, 기준은 방향입니다.
가로로 나란히 놓고 싶으면 칸을 나누고, 위아래로 붙이고 싶으면 콘텐츠 추가입니다.
이 둘을 섞으면 “왼쪽 칸에는 사진과 설명, 오른쪽 칸에는 지도와 주소”처럼 어떤 배치든 만들 수 있습니다.