[{"data":1,"prerenderedAt":177},["ShallowReactive",2],{"doc:M-SITE-04":3},{"docId":4,"axis":5,"axisLabel":6,"route":7,"sourceFile":8,"categoryId":9,"categoryName":10,"title":11,"kicker":12,"crumb":13,"leadHtml":22,"preambleHtml":23,"sections":24,"toc":47,"shots":57,"captureRefs":120,"estimates":121,"estimatesRaw":69,"proseChars":122,"fm":123,"adminMeta":169,"related":172},"M-SITE-04","guide","기능별","\u002Fguide\u002FF08\u002FM-SITE-04","content\u002Fguide\u002FM-SITE-04.md","F08","사이트 디자인","페이지 빌더 기본 (미리보기·저장)","기능별 · 사이트 디자인",[14,17,19,20],{"label":15,"to":16},"고객센터","\u002F",{"label":6,"to":18},"\u002Fguide",{"label":10,"to":18},{"label":11,"to":21},null,"페이지 한 장의 \u003Cb>뼈대를 짜고 저장하는\u003C\u002Fb> 화면입니다. 마우스로 끌어다 놓는 방식이라 코드를 몰라도 됩니다.","",[25,30,34,38,42],{"key":26,"label":23,"id":27,"html":28,"d2":29},"S1","sec-S1","\n\u003Cp>이 문서는 \u003Cb>여기까지\u003C\u002Fb>를 다룹니다 — 템플릿 고르기, 섹션 넣고 순서 바꾸기, 미리보기, 저장. 섹션 하나하나에 무엇을 채우는지는 \u003Ca href=\"\u002Fguide\u002FF08\u002FM-SITE-05\">빌더 섹션 편집\u003C\u002Fa>에, 페이지 자체를 만들고 제목을 붙이는 일은 \u003Ca href=\"\u002Fguide\u002FF08\u002FM-SITE-03\">페이지 관리\u003C\u002Fa>에 있습니다.\u003C\u002Fp>\n\u003Cp>\u003Cb>손님 화면 영향\u003C\u002Fb>: 여기서 짠 배치가 \u003Cb>손님이 보는 페이지 그 자체\u003C\u002Fb>가 됩니다. 미리보기에서 본 모습이 그대로 나갑니다.\u003C\u002Fp>\n\u003Cdl class=\"sum3\">\u003Cdiv>\u003Cdt>\u003Csvg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" aria-hidden=\"true\">\u003Cpath d=\"M20 6L9 17l-5-5\">\u003C\u002Fpath>\u003C\u002Fsvg>이 문서로 해결되는 것\u003C\u002Fdt>\u003Cdd>페이지 한 장을 짜서 저장합니다\u003Csmall>템플릿 고르기부터 저장까지\u003C\u002Fsmall>\u003C\u002Fdd>\u003C\u002Fdiv>\u003Cdiv>\u003Cdt>\u003Csvg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\u003Ccircle cx=\"12\" cy=\"12\" r=\"9\">\u003C\u002Fcircle>\u003Cpath d=\"M12 7v5l3 2\">\u003C\u002Fpath>\u003C\u002Fsvg>걸리는 시간\u003C\u002Fdt>\u003Cdd>처음이면 약 20분\u003Csmall>익숙해지면 10분쯤 걸립니다\u003C\u002Fsmall>\u003C\u002Fdd>\u003C\u002Fdiv>\u003Cdiv>\u003Cdt>\u003Csvg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\u003Cpath d=\"M3 7l9-4 9 4-9 4-9-4z\">\u003C\u002Fpath>\u003Cpath d=\"M3 7v10l9 4 9-4V7\">\u003C\u002Fpath>\u003C\u002Fsvg>미리 준비할 것\u003C\u002Fdt>\u003Cdd>넣을 이미지와 문구\u003Csmall>진열할 상품·후기는 미리 만들어 두세요\u003C\u002Fsmall>\u003C\u002Fdd>\u003C\u002Fdiv>\u003C\u002Fdl>",true,{"key":31,"label":23,"id":32,"html":33,"d2":29},"S6","sec-S6","\u003Csection class=\"chooser\" data-chooser=\"\">\u003Ch2 class=\"chooser__q\">지금 무엇을 하려고 오셨나요?\u003C\u002Fh2>\u003Cp class=\"chooser__sub\">하나만 고르세요. 고른 일의 순서만 펼쳐집니다. 각 단계에 무엇을 고르는지는 맨 아래에 접어 두었습니다.\u003C\u002Fp>\u003Cdiv class=\"tgrid\">\u003Cbutton type=\"button\" class=\"tcard\" data-task=\"a\" aria-pressed=\"false\" aria-controls=\"panel-a\">\u003Cspan class=\"tcard__hot\">가장 많이 하는 일\u003C\u002Fspan>\u003Cspan class=\"tcard__t\">페이지를 처음 꾸미려고 해요\u003C\u002Fspan>\u003Cspan class=\"tcard__d\">템플릿을 고르고 섹션을 배치해 저장합니다.\u003C\u002Fspan>\u003Cspan class=\"tcard__meta\">\u003Cspan class=\"chip chip--acc\">4단계\u003C\u002Fspan>\u003Cspan class=\"chip\">약 20분\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"tcard__cta\">이 순서 보기 \u003Csvg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\u003Cpath d=\"M5 12h14M13 6l6 6-6 6\">\u003C\u002Fpath>\u003C\u002Fsvg>\u003C\u002Fspan>\u003C\u002Fbutton>\u003Cbutton type=\"button\" class=\"tcard\" data-task=\"b\" aria-pressed=\"false\" aria-controls=\"panel-b\">\u003Cspan class=\"tcard__t\">지금 구성을 갈아엎고 다시 짜고 싶어요\u003C\u002Fspan>\u003Cspan class=\"tcard__d\">템플릿을 바꾸거나 빈 페이지로 되돌립니다.\u003C\u002Fspan>\u003Cspan class=\"tcard__meta\">\u003Cspan class=\"chip chip--acc\">2단계\u003C\u002Fspan>\u003Cspan class=\"chip\">약 3분\u003C\u002Fspan>\u003Cspan class=\"chip chip--warn\">⚠ 되돌릴 수 없는 단계 있음\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"tcard__cta\">이 순서 보기 \u003Csvg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\u003Cpath d=\"M5 12h14M13 6l6 6-6 6\">\u003C\u002Fpath>\u003C\u002Fsvg>\u003C\u002Fspan>\u003C\u002Fbutton>\u003Cbutton type=\"button\" class=\"tcard\" data-task=\"c\" aria-pressed=\"false\" aria-controls=\"panel-c\">\u003Cspan class=\"tcard__t\">저장했는데 손님 화면이 그대로예요\u003C\u002Fspan>\u003Cspan class=\"tcard__d\">어디서 막혔는지 차례로 확인합니다.\u003C\u002Fspan>\u003Cspan class=\"tcard__meta\">\u003Cspan class=\"chip chip--acc\">2단계\u003C\u002Fspan>\u003Cspan class=\"chip\">약 2분\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"tcard__cta\">이 순서 보기 \u003Csvg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\u003Cpath d=\"M5 12h14M13 6l6 6-6 6\">\u003C\u002Fpath>\u003C\u002Fsvg>\u003C\u002Fspan>\u003C\u002Fbutton>\u003C\u002Fdiv>\u003Cdiv class=\"chooser__hint\" data-chooser-hint=\"\">\u003Csvg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\u003Ccircle cx=\"12\" cy=\"12\" r=\"9\">\u003C\u002Fcircle>\u003Cpath d=\"M12 16v-5M12 8h.01\">\u003C\u002Fpath>\u003C\u002Fsvg>\u003Cdiv>\u003Cb>아직 아무것도 고르지 않으셨어요.\u003C\u002Fb> 위에서 하나를 누르면 그 일의 순서만 펼쳐집니다.\u003Cbr>화면 설명(고르기 조건·표의 각 칸 뜻)이 궁금하시면 맨 아래 \u003Cb>더 알아보기\u003C\u002Fb>를 펼쳐 보세요.\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fsection>\n\u003Csection class=\"taskpanel\" id=\"panel-a\" data-taskpanel=\"a\" hidden=\"\" aria-label=\"페이지를 처음 꾸미려고 해요\">\u003Cdiv class=\"taskpanel__hd\">\u003Cspan class=\"now\">지금 하는 일\u003C\u002Fspan>\u003Ch3>페이지를 처음 꾸미려고 해요\u003C\u002Fh3>\u003Cdiv class=\"prog\">\u003Cspan data-ptxt=\"\">0 \u002F 4 단계 완료\u003C\u002Fspan>\u003Cspan class=\"pbar\">\u003Ci data-pbar=\"\">\u003C\u002Fi>\u003C\u002Fspan>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"taskpanel__bd\">\u003Col class=\"steps\">\u003Cli class=\"step\">\u003Cdiv class=\"step__n\">1\u003C\u002Fdiv>\u003Cdiv>\u003Ch4>템플릿을 고르거나 빈 페이지로 시작합니다\u003C\u002Fh4>\u003Cdiv class=\"wherebar\">\u003Cspan class=\"where\">\u003Csvg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\u003Crect x=\"3\" y=\"4\" width=\"18\" height=\"16\" rx=\"2\">\u003C\u002Frect>\u003Cpath d=\"M9 4v16\">\u003C\u002Fpath>\u003C\u002Fsvg>\u003Cb>사이트 디자인 › 페이지 › [페이지 편집]\u003C\u002Fb>\u003C\u002Fspan>\u003Cspan class=\"where\">\u003Csvg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\u003Ccircle cx=\"12\" cy=\"12\" r=\"9\">\u003C\u002Fcircle>\u003Cpath d=\"M12 7v5l3 2\">\u003C\u002Fpath>\u003C\u002Fsvg>약 \u003Cb>3분\u003C\u002Fb>\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cp>빌더는 세 덩어리로 나뉩니다. \u003Cb>왼쪽\u003C\u002Fb>은 무엇을 넣을지 고르는 패널, \u003Cb>가운데\u003C\u002Fb>는 지금 모습이 보이는 캔버스, \u003Cb>위쪽\u003C\u002Fb>은 미리보기와 저장 버튼입니다.\u003C\u002Fp>\n\u003Cp>왼쪽 \u003Cb>템플릿 선택\u003C\u002Fb> 탭에는 목적별로 짜인 완성본이 들어 있습니다. 랜딩용은 \u003Cb>기본·교육·재테크·건강·커리어\u003C\u002Fb> 다섯 갈래고, 소개 페이지용 템플릿도 따로 있습니다. 하나를 고르면 여러 섹션이 묶인 채로 캔버스에 한 번에 들어옵니다.\u003C\u002Fp>\n\u003Cdiv class=\"shotwrap\">\u003Cdiv class=\"shot shot--captured\" data-shot-key=\"AD01\u002F0703-003\u002Fstep1\" style=\"height:auto;min-height:0;border-style:solid\">\u003Cimg class=\"shot__img\" src=\"\u002Fcaptures\u002FAD01-0703-003-step1.png\" alt=\"템플릿 고르기 탭 — 랜딩 템플릿(기본·교육·재테크·건강·커리어) \u002F 소개 템플릿\" decoding=\"async\" width=\"1440\" height=\"1038\" style=\"max-width:100%;height:auto;display:block\">\u003Cspan class=\"pin\" style=\"left:22%;top:30%\" aria-hidden=\"true\">1\u003C\u002Fspan>\u003Cspan class=\"pin\" style=\"left:24%;top:62%\" aria-hidden=\"true\">2\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"bubbles\">\u003Cp class=\"bubble\">\u003Cspan class=\"bn\" aria-hidden=\"true\">1\u003C\u002Fspan>\u003Cb>템플릿 선택\u003C\u002Fb>과 \u003Cb>섹션 선택\u003C\u002Fb>, 두 탭을 오가며 씁니다.\u003C\u002Fp>\u003Cp class=\"bubble\">\u003Cspan class=\"bn\" aria-hidden=\"true\">2\u003C\u002Fspan>템플릿 하나를 고르면 \u003Cb>여러 섹션이 한꺼번에\u003C\u002Fb> 캔버스에 들어와요.\u003C\u002Fp>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"tip\">\u003Cdiv>\u003Cp>처음이라면 템플릿부터 고르는 편이 빠릅니다. 마음에 드는 게 없으면 \u003Cb>[빈 페이지로 만들기]\u003C\u002Fb>로 백지에서 시작해도 됩니다.\u003C\u002Fp>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Clabel class=\"stepchk\">\u003Cinput type=\"checkbox\" data-step-chk=\"\">다 했어요\u003C\u002Flabel>\u003C\u002Fdiv>\u003C\u002Fli>\u003Cli class=\"step\">\u003Cdiv class=\"step__n\">2\u003C\u002Fdiv>\u003Cdiv>\u003Ch4>섹션을 골라 추가합니다\u003C\u002Fh4>\u003Cdiv class=\"wherebar\">\u003Cspan class=\"where\">\u003Csvg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\u003Ccircle cx=\"12\" cy=\"12\" r=\"9\">\u003C\u002Fcircle>\u003Cpath d=\"M12 7v5l3 2\">\u003C\u002Fpath>\u003C\u002Fsvg>약 \u003Cb>5분\u003C\u002Fb>\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cp>왼쪽 \u003Cb>섹션 선택\u003C\u002Fb> 탭에서 넣고 싶은 종류를 고르고 \u003Cb>[추가]\u003C\u002Fb>를 누르면 캔버스 아래에 한 칸이 붙습니다. 섹션은 배너·상품 진열·후기·게시판·로케이션(지도)·텍스트·이미지와 글·설문 여덟 가지입니다.\u003C\u002Fp>\n\u003Cdiv class=\"shotwrap\">\u003Cdiv class=\"shot shot--captured\" data-shot-key=\"AD01\u002F0703-003\u002Fstep2\" style=\"height:auto;min-height:0;border-style:solid\">\u003Cimg class=\"shot__img\" src=\"\u002Fcaptures\u002FAD01-0703-003-step2.png\" alt=\"섹션 고르기 탭 — 종류 고르기 · [추가]\" decoding=\"async\" width=\"1440\" height=\"1038\" style=\"max-width:100%;height:auto;display:block\">\u003Cspan class=\"pin\" style=\"left:24%;top:40%\" aria-hidden=\"true\">1\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"bubbles\">\u003Cp class=\"bubble\">\u003Cspan class=\"bn\" aria-hidden=\"true\">1\u003C\u002Fspan>종류를 고른 뒤 \u003Cb>[추가]\u003C\u002Fb>를 눌러야 캔버스에 들어옵니다.\u003C\u002Fp>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cp>같은 종류를 여러 번 넣어도 됩니다. 예를 들어 배너를 맨 위에 하나, 중간에 또 하나 두는 식입니다.\u003C\u002Fp>\u003Clabel class=\"stepchk\">\u003Cinput type=\"checkbox\" data-step-chk=\"\">다 했어요\u003C\u002Flabel>\u003C\u002Fdiv>\u003C\u002Fli>\u003Cli class=\"step\">\u003Cdiv class=\"step__n\">3\u003C\u002Fdiv>\u003Cdiv>\u003Ch4>순서를 바꾸고 내용을 고칩니다\u003C\u002Fh4>\u003Cdiv class=\"wherebar\">\u003Cspan class=\"where\">\u003Csvg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\u003Ccircle cx=\"12\" cy=\"12\" r=\"9\">\u003C\u002Fcircle>\u003Cpath d=\"M12 7v5l3 2\">\u003C\u002Fpath>\u003C\u002Fsvg>약 \u003Cb>10분\u003C\u002Fb>\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cp>캔버스의 섹션은 \u003Cb>끌어서 위아래로 옮길 수 있습니다.\u003C\u002Fb> 손님이 먼저 보게 하고 싶은 것을 위로 올리세요.\u003C\u002Fp>\n\u003Cp>섹션을 누르면 왼쪽 패널이 그 섹션의 입력 칸으로 바뀌고, 오른쪽에서 고친 결과가 바로 보입니다. 어떤 칸을 채우는지는 \u003Ca href=\"\u002Fguide\u002FF08\u002FM-SITE-05\">빌더 섹션 편집\u003C\u002Fa>에서 종류별로 설명합니다.\u003C\u002Fp>\n\u003Cdiv class=\"shotwrap\">\u003Cdiv class=\"shot shot--captured\" data-shot-key=\"AD01\u002F0703-003\u002Fstep3\" style=\"height:auto;min-height:0;border-style:solid\">\u003Cimg class=\"shot__img\" src=\"\u002Fcaptures\u002FAD01-0703-003-step3.png\" alt=\"캔버스 — 섹션 끌어서 순서 바꾸기 \u002F 섹션 누르면 왼쪽 패널이 편집 칸으로 바뀜\" decoding=\"async\" width=\"1440\" height=\"1038\" style=\"max-width:100%;height:auto;display:block\">\u003Cspan class=\"pin\" style=\"left:55%;top:40%\" aria-hidden=\"true\">1\u003C\u002Fspan>\u003Cspan class=\"pin\" style=\"left:22%;top:55%\" aria-hidden=\"true\">2\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"bubbles\">\u003Cp class=\"bubble\">\u003Cspan class=\"bn\" aria-hidden=\"true\">1\u003C\u002Fspan>섹션을 \u003Cb>끌어 올리고 내려\u003C\u002Fb> 순서를 정합니다.\u003C\u002Fp>\u003Cp class=\"bubble\">\u003Cspan class=\"bn\" aria-hidden=\"true\">2\u003C\u002Fspan>섹션을 누르면 이 자리가 \u003Cb>그 섹션 편집 칸\u003C\u002Fb>으로 바뀌어요.\u003C\u002Fp>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Clabel class=\"stepchk\">\u003Cinput type=\"checkbox\" data-step-chk=\"\">다 했어요\u003C\u002Flabel>\u003C\u002Fdiv>\u003C\u002Fli>\u003Cli class=\"step\">\u003Cdiv class=\"step__n\">4\u003C\u002Fdiv>\u003Cdiv>\u003Ch4>미리보기로 확인하고 저장합니다\u003C\u002Fh4>\u003Cdiv class=\"wherebar\">\u003Cspan class=\"where\">\u003Csvg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\u003Ccircle cx=\"12\" cy=\"12\" r=\"9\">\u003C\u002Fcircle>\u003Cpath d=\"M12 7v5l3 2\">\u003C\u002Fpath>\u003C\u002Fsvg>약 \u003Cb>2분\u003C\u002Fb>\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cp>위쪽 \u003Cb>[미리보기]\u003C\u002Fb>는 \u003Cb>지금 편집 중인 내용 그대로\u003C\u002Fb> 보여 줍니다. 저장한 내용이 아니라 화면에 떠 있는 내용 기준이라, 저장 전에 마지막으로 검산하기 좋습니다.\u003C\u002Fp>\n\u003Cdiv class=\"shotwrap\">\u003Cdiv class=\"shot shot--captured\" data-shot-key=\"AD01\u002F0703-003\u002Fstep4\" style=\"height:auto;min-height:0;border-style:solid\">\u003Cimg class=\"shot__img\" src=\"\u002Fcaptures\u002FAD01-0703-003-step4.png\" alt=\"위쪽 영역 — 페이지명 \u002F [미리보기] \u002F [저장]\" decoding=\"async\" width=\"1440\" height=\"1038\" style=\"max-width:100%;height:auto;display:block\">\u003Cspan class=\"pin\" style=\"left:18%;top:14%\" aria-hidden=\"true\">1\u003C\u002Fspan>\u003Cspan class=\"pin\" style=\"left:88%;top:14%\" aria-hidden=\"true\">2\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"bubbles\">\u003Cp class=\"bubble\">\u003Cspan class=\"bn\" aria-hidden=\"true\">1\u003C\u002Fspan>제목을 안 붙였으면 여기가 \u003Cb>제목 없음\u003C\u002Fb>으로 보입니다.\u003C\u002Fp>\u003Cp class=\"bubble\">\u003Cspan class=\"bn\" aria-hidden=\"true\">2\u003C\u002Fspan>\u003Cb>[저장]\u003C\u002Fb>을 눌러야 손님 화면이 바뀝니다.\u003C\u002Fp>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"shotwrap\" style=\"grid-template-columns:minmax(0,1fr)\">\u003Cdiv class=\"shot shot--captured\" data-shot-key=\"AD01\u002F0703-003_pu01\u002Fmain\" style=\"height:auto;min-height:0;border-style:solid\">\u003Cimg class=\"shot__img\" src=\"\u002Fcaptures\u002FAD01-0703-003_pu01-main.png\" alt=\"미리보기 창 — 저장 전 내용 기준\" decoding=\"async\" width=\"1440\" height=\"1038\" style=\"max-width:100%;height:auto;display:block\">\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cp>\u003Cb>[저장]\u003C\u002Fb>을 누르면 \"페이지를 저장하시겠어요?\"라고 한 번 더 물어봅니다. 빠뜨린 필수 칸이 있으면 \"필수 입력 항목을 모두 입력해주세요.\"가 뜨고 저장되지 않습니다.\u003C\u002Fp>\n\u003Cdiv class=\"warn\">\u003Cdiv>\u003Cp>저장 중에 \"페이지 저장 중 오류가 발생했어요.\"가 뜨면 잠시 뒤 다시 눌러 보세요. 그 사이 창을 닫으면 고친 내용이 사라집니다.\u003C\u002Fp>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Clabel class=\"stepchk\">\u003Cinput type=\"checkbox\" data-step-chk=\"\">다 했어요\u003C\u002Flabel>\u003C\u002Fdiv>\u003C\u002Fli>\u003C\u002Fol>\u003C\u002Fdiv>\u003Cdiv class=\"taskpanel__ft\">\u003Cbutton type=\"button\" class=\"btn-ghost\" data-rechoose=\"\">\u003Csvg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\u003Cpath d=\"M19 12H5M11 18l-6-6 6-6\">\u003C\u002Fpath>\u003C\u002Fsvg>다른 일 고르기\u003C\u002Fbutton>\u003Cspan>끝났습니다. 아래 \u003Cb>손님 화면에서는 이렇게 보여요\u003C\u002Fb>에서 손님 쪽 화면이 어떻게 바뀌는지 확인하세요.\u003C\u002Fspan>\u003C\u002Fdiv>\u003C\u002Fsection>\n\u003Csection class=\"taskpanel\" id=\"panel-b\" data-taskpanel=\"b\" hidden=\"\" aria-label=\"지금 구성을 갈아엎고 다시 짜고 싶어요\">\u003Cdiv class=\"taskpanel__hd\">\u003Cspan class=\"now\">지금 하는 일\u003C\u002Fspan>\u003Ch3>지금 구성을 갈아엎고 다시 짜고 싶어요\u003C\u002Fh3>\u003Cdiv class=\"prog\">\u003Cspan data-ptxt=\"\">0 \u002F 2 단계 완료\u003C\u002Fspan>\u003Cspan class=\"pbar\">\u003Ci data-pbar=\"\">\u003C\u002Fi>\u003C\u002Fspan>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"taskpanel__bd\">\u003Col class=\"steps\">\u003Cli class=\"step\">\u003Cdiv class=\"step__n\">1\u003C\u002Fdiv>\u003Cdiv>\u003Ch4>어떻게 다시 짤지 정합니다\u003C\u002Fh4>\u003Cdiv class=\"wherebar\">\u003Cspan class=\"where\">\u003Csvg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\u003Ccircle cx=\"12\" cy=\"12\" r=\"9\">\u003C\u002Fcircle>\u003Cpath d=\"M12 7v5l3 2\">\u003C\u002Fpath>\u003C\u002Fsvg>약 \u003Cb>1분\u003C\u002Fb>\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cp>두 가지 길이 있습니다. 다른 템플릿으로 \u003Cb>바꾸거나\u003C\u002Fb>, \u003Cb>[빈 페이지로 만들기]\u003C\u002Fb>로 백지부터 시작하거나입니다. 섹션 몇 개만 빼고 싶은 거라면 갈아엎지 말고 그 섹션만 지우는 편이 낫습니다.\u003C\u002Fp>\u003Clabel class=\"stepchk\">\u003Cinput type=\"checkbox\" data-step-chk=\"\">다 했어요\u003C\u002Flabel>\u003C\u002Fdiv>\u003C\u002Fli>\u003Cli class=\"step\">\u003Cdiv class=\"step__n\">2\u003C\u002Fdiv>\u003Cdiv>\u003Ch4>경고 창을 읽고 진행합니다\u003C\u002Fh4>\u003Cdiv class=\"wherebar\">\u003Cspan class=\"where\">\u003Csvg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\u003Ccircle cx=\"12\" cy=\"12\" r=\"9\">\u003C\u002Fcircle>\u003Cpath d=\"M12 7v5l3 2\">\u003C\u002Fpath>\u003C\u002Fsvg>약 \u003Cb>1분\u003C\u002Fb>\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"warn\">\u003Cdiv>\u003Cp>\u003Cb>지금까지 짠 구성이 초기화됩니다.\u003C\u002Fb> 되돌리는 버튼은 없습니다.\u003C\u002Fp>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cp>템플릿을 바꿀 때는 \"템플릿을 변경하면 현재 편집 중인 섹션 구성이 초기화됩니다.\"라고, 빈 페이지로 만들 때는 \"빈 페이지로 만들면 현재 선택한 템플릿 또는 섹션 구성이 초기화됩니다.\"라고 뜹니다.\u003C\u002Fp>\n\u003Cdiv class=\"warn\">\u003Cdiv>\u003Cp>이 경고는 \u003Cb>처음 한 번만\u003C\u002Fb> 뜹니다. 두 번째부터는 묻지 않고 바로 초기화되니 더 조심하세요.\u003C\u002Fp>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Clabel class=\"stepchk\">\u003Cinput type=\"checkbox\" data-step-chk=\"\">다 했어요\u003C\u002Flabel>\u003C\u002Fdiv>\u003C\u002Fli>\u003C\u002Fol>\u003C\u002Fdiv>\u003Cdiv class=\"taskpanel__ft\">\u003Cbutton type=\"button\" class=\"btn-ghost\" data-rechoose=\"\">\u003Csvg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\u003Cpath d=\"M19 12H5M11 18l-6-6 6-6\">\u003C\u002Fpath>\u003C\u002Fsvg>다른 일 고르기\u003C\u002Fbutton>\u003Cspan>끝났습니다. 아래 \u003Cb>손님 화면에서는 이렇게 보여요\u003C\u002Fb>에서 손님 쪽 화면이 어떻게 바뀌는지 확인하세요.\u003C\u002Fspan>\u003C\u002Fdiv>\u003C\u002Fsection>\n\u003Csection class=\"taskpanel\" id=\"panel-c\" data-taskpanel=\"c\" hidden=\"\" aria-label=\"저장했는데 손님 화면이 그대로예요\">\u003Cdiv class=\"taskpanel__hd\">\u003Cspan class=\"now\">지금 하는 일\u003C\u002Fspan>\u003Ch3>저장했는데 손님 화면이 그대로예요\u003C\u002Fh3>\u003Cdiv class=\"prog\">\u003Cspan data-ptxt=\"\">0 \u002F 2 단계 완료\u003C\u002Fspan>\u003Cspan class=\"pbar\">\u003Ci data-pbar=\"\">\u003C\u002Fi>\u003C\u002Fspan>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"taskpanel__bd\">\u003Col class=\"steps\">\u003Cli class=\"step\">\u003Cdiv class=\"step__n\">1\u003C\u002Fdiv>\u003Cdiv>\u003Ch4>[저장]까지 눌렀는지 확인합니다\u003C\u002Fh4>\u003Cdiv class=\"wherebar\">\u003Cspan class=\"where\">\u003Csvg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\u003Ccircle cx=\"12\" cy=\"12\" r=\"9\">\u003C\u002Fcircle>\u003Cpath d=\"M12 7v5l3 2\">\u003C\u002Fpath>\u003C\u002Fsvg>약 \u003Cb>1분\u003C\u002Fb>\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cp>미리보기만 보고 창을 닫으면 아무것도 저장되지 않습니다. 빌더로 다시 들어가 짜 둔 모습이 그대로 있는지 보세요. 없다면 저장이 안 된 것입니다.\u003C\u002Fp>\u003Clabel class=\"stepchk\">\u003Cinput type=\"checkbox\" data-step-chk=\"\">다 했어요\u003C\u002Flabel>\u003C\u002Fdiv>\u003C\u002Fli>\u003Cli class=\"step\">\u003Cdiv class=\"step__n\">2\u003C\u002Fdiv>\u003Cdiv>\u003Ch4>그 페이지가 손님에게 열려 있는지 확인합니다\u003C\u002Fh4>\u003Cdiv class=\"wherebar\">\u003Cspan class=\"where\">\u003Csvg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\u003Ccircle cx=\"12\" cy=\"12\" r=\"9\">\u003C\u002Fcircle>\u003Cpath d=\"M12 7v5l3 2\">\u003C\u002Fpath>\u003C\u002Fsvg>약 \u003Cb>1분\u003C\u002Fb>\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cp>빌더에서 저장해도, 그 페이지가 \u003Cb>메뉴에 걸려 있지 않으면\u003C\u002Fb> 손님은 들어올 길이 없습니다. 확인하는 방법은 \u003Ca href=\"\u002Fguide\u002FF08\u002FM-SITE-03\">페이지 관리\u003C\u002Fa>에, 메뉴에 거는 방법은 \u003Ca href=\"\u002Fguide\u002FF08\u002FM-SITE-02\">메뉴 관리\u003C\u002Fa>에 있습니다.\u003C\u002Fp>\u003Clabel class=\"stepchk\">\u003Cinput type=\"checkbox\" data-step-chk=\"\">다 했어요\u003C\u002Flabel>\u003C\u002Fdiv>\u003C\u002Fli>\u003C\u002Fol>\u003C\u002Fdiv>\u003Cdiv class=\"taskpanel__ft\">\u003Cbutton type=\"button\" class=\"btn-ghost\" data-rechoose=\"\">\u003Csvg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\u003Cpath d=\"M19 12H5M11 18l-6-6 6-6\">\u003C\u002Fpath>\u003C\u002Fsvg>다른 일 고르기\u003C\u002Fbutton>\u003Cspan>끝났습니다. 아래 \u003Cb>손님 화면에서는 이렇게 보여요\u003C\u002Fb>에서 손님 쪽 화면이 어떻게 바뀌는지 확인하세요.\u003C\u002Fspan>\u003C\u002Fdiv>\u003C\u002Fsection>",{"key":35,"label":23,"id":36,"html":37,"d2":29},"S7","sec-S7","\u003Ch2 id=\"손님-화면에서는-이렇게-보여요\">손님 화면에서는 이렇게 보여요\u003C\u002Fh2>\n\u003Cp>\u003Ccode>V · 바로 보여요\u003C\u002Fcode> — 다만 \u003Cb>저장했을 때부터\u003C\u002Fb>입니다.\u003C\u002Fp>\n\u003Cp>여기서 짠 배치가 손님이 보는 페이지 레이아웃 그 자체입니다. 특히 메인 페이지를 꾸미면 손님이 사이트에 들어와 \u003Cb>가장 먼저 보는 화면\u003C\u002Fb>이 바뀝니다.\u003C\u002Fp>\n\u003Cdiv class=\"tablewrap\">\u003Ctable class=\"dtable\">\u003Cthead>\u003Ctr>\u003Cth>이 단계에서 한 것\u003C\u002Fth>\u003Cth>손님 화면 어디가 만들어지나\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\u003Ctbody>\u003Ctr>\u003Ctd>\u003Cb>1단계\u003C\u002Fb> 템플릿 고르기\u003C\u002Ftd>\u003Ctd>페이지 전체 뼈대가 한 번에 잡힙니다.\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Cb>2단계\u003C\u002Fb> 섹션 추가\u003C\u002Ftd>\u003Ctd>손님이 위에서 아래로 훑어 내리며 보는 \u003Cb>덩어리 하나하나\u003C\u002Fb>가 됩니다.\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Cb>3단계\u003C\u002Fb> 순서 바꾸기\u003C\u002Ftd>\u003Ctd>손님이 \u003Cb>무엇을 먼저 보는지\u003C\u002Fb>가 바뀝니다.\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Cb>4단계\u003C\u002Fb> 저장\u003C\u002Ftd>\u003Ctd>이때부터 실제 손님 화면에 반영됩니다.\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003C\u002Fdiv>\n\n\u003Cp>반영 시점: \u003Cb>저장 즉시\u003C\u002Fb>. 미리보기에서 본 모습이 곧 손님이 보는 모습입니다.\u003C\u002Fp>\n\u003Cblockquote class=\"why\">\u003Cp>근거: 06 반영원장 F08 · M-SITE-04 행(V · 저장시 · \"미리보기 = 실제 화면\"). 손님 화면 위치는 같은 원장 §5의 \"메인 페이지의 배너·진열\" \u003Ccode>\u002F\u003C\u002Fcode> 행에서 확인했습니다.\u003Cbr>\u003Cspan class=\"est\" title=\"쏠쏠 고객센터가 아직 확인하지 못한 내용입니다.\">확인 중\u003C\u002Fspan> 이 페이지에 해당하는 \u003Cb>손님 화면 번호가 06 원장에 아직 없어\u003C\u002Fb> 손님 화면 캡처 키를 만들지 않았습니다. 원장이 정정되면 Before→After 캡처를 붙입니다.\u003Cbr>보조 근거: solsol-mng(new) 02_customer-admin.md (S-AD01-0703-003)\u003C\u002Fp>\u003C\u002Fblockquote>",{"key":39,"label":23,"id":40,"html":41,"d2":29},"S9","sec-S9","\u003Ch2 id=\"꼭-알아두세요\">꼭 알아두세요\u003C\u002Fh2>\u003Cul class=\"knowlist\">\u003Cli>\u003Cspan class=\"ic-danger\">\u003Csvg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\u003Cpath d=\"M12 9v4M12 17h.01\">\u003C\u002Fpath>\u003Cpath d=\"M10.3 3.9L1.8 18a2 2 0 001.7 3h17a2 2 0 001.7-3L13.7 3.9a2 2 0 00-3.4 0z\">\u003C\u002Fpath>\u003C\u002Fsvg>\u003C\u002Fspan>\u003Cdiv>\u003Cb>템플릿을 바꾸거나 빈 페이지로 만들면 지금 구성이 사라져요.\u003C\u002Fb> 경고는 처음 한 번만 뜹니다.\u003C\u002Fdiv>\u003C\u002Fli>\u003Cli>\u003Cspan class=\"ic-danger\">\u003Csvg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\u003Cpath d=\"M12 9v4M12 17h.01\">\u003C\u002Fpath>\u003Cpath d=\"M10.3 3.9L1.8 18a2 2 0 001.7 3h17a2 2 0 001.7-3L13.7 3.9a2 2 0 00-3.4 0z\">\u003C\u002Fpath>\u003C\u002Fsvg>\u003C\u002Fspan>\u003Cdiv>\u003Cb>[저장]을 누르기 전에는 손님 화면이 그대로예요.\u003C\u002Fb> 미리보기는 저장이 아닙니다.\u003C\u002Fdiv>\u003C\u002Fli>\u003Cli>\u003Cspan class=\"ic-info\">\u003Csvg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\u003Ccircle cx=\"12\" cy=\"12\" r=\"9\">\u003C\u002Fcircle>\u003Cpath d=\"M12 16v-5M12 8h.01\">\u003C\u002Fpath>\u003C\u002Fsvg>\u003C\u002Fspan>\u003Cdiv>\u003Cb>미리보기는 저장 전 내용을 보여 줘요.\u003C\u002Fb> 그래서 저장 직전 검산에 쓰기 좋습니다.\u003C\u002Fdiv>\u003C\u002Fli>\u003Cli>\u003Cspan class=\"ic-info\">\u003Csvg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\u003Ccircle cx=\"12\" cy=\"12\" r=\"9\">\u003C\u002Fcircle>\u003Cpath d=\"M12 16v-5M12 8h.01\">\u003C\u002Fpath>\u003C\u002Fsvg>\u003C\u002Fspan>\u003Cdiv>\u003Cb>제목을 안 붙이면 제목 없음으로 보여요.\u003C\u002Fb> 제목은 \u003Ca href=\"\u002Fguide\u002FF08\u002FM-SITE-03\">페이지 관리\u003C\u002Fa>에서 붙입니다.\u003C\u002Fdiv>\u003C\u002Fli>\u003Cli>\u003Cspan class=\"ic-info\">\u003Csvg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\u003Ccircle cx=\"12\" cy=\"12\" r=\"9\">\u003C\u002Fcircle>\u003Cpath d=\"M12 16v-5M12 8h.01\">\u003C\u002Fpath>\u003C\u002Fsvg>\u003C\u002Fspan>\u003Cdiv>\u003Cb>섹션 안을 채우는 방법은 여기 없어요.\u003C\u002Fb> 종류별 입력 칸은 \u003Ca href=\"\u002Fguide\u002FF08\u002FM-SITE-05\">빌더 섹션 편집\u003C\u002Fa>에 있습니다.\u003C\u002Fdiv>\u003C\u002Fli>\u003C\u002Ful>\n\u003Ch2 id=\"이-일이-자주-생긴다면\">이 일이 자주 생긴다면\u003C\u002Fh2>\u003Cdiv class=\"nextchips\">\u003Ca href=\"\u002Fstart\u002FG3\">\u003Csvg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\u003Cpath d=\"M3 17l6-6 4 4 8-8\">\u003C\u002Fpath>\u003Cpath d=\"M21 7v5h-5\">\u003C\u002Fpath>\u003C\u002Fsvg>내 사이트 꾸미기 — 기본 정보부터 푸터까지 순서대로\u003C\u002Fa>\u003Ca href=\"\u002Fguide\u002FF08\u002FM-SITE-05\">\u003Csvg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\u003Cpath d=\"M3 17l6-6 4 4 8-8\">\u003C\u002Fpath>\u003Cpath d=\"M21 7v5h-5\">\u003C\u002Fpath>\u003C\u002Fsvg>빌더 섹션 편집 — 섹션 종류별로 무엇을 채우나\u003C\u002Fa>\u003Ca href=\"\u002Fguide\u002FF08\u002FM-SITE-02\">\u003Csvg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\u003Cpath d=\"M3 17l6-6 4 4 8-8\">\u003C\u002Fpath>\u003Cpath d=\"M21 7v5h-5\">\u003C\u002Fpath>\u003C\u002Fsvg>메뉴 관리 — 꾸민 페이지를 손님 메뉴에 걸기\u003C\u002Fa>\u003C\u002Fdiv>",{"key":43,"label":44,"id":45,"html":46,"later":29},"LATER","더 알아보기","sec-LATER","\u003Cdiv class=\"later__hd\">\u003Ch2>더 알아보기\u003C\u002Fh2>\u003Cp>여기서부터는 \u003Cb>참고 정보\u003C\u002Fb>입니다. 급하면 안 읽으셔도 됩니다. 필요할 때 펼쳐 보세요.\u003C\u002Fp>\u003C\u002Fdiv>\u003Cdiv class=\"more\">\u003Cbutton type=\"button\" class=\"more__btn\" data-more=\"\" aria-expanded=\"false\" aria-controls=\"more-233\">\u003Csvg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" class=\"ic\" aria-hidden=\"true\">\u003Cpath d=\"M9 6l6 6-6 6\">\u003C\u002Fpath>\u003C\u002Fsvg>\u003Cspan>단계마다 무엇을 고르나\u003C\u002Fspan>\u003Cspan class=\"sub\">고를 수 있는 것들\u003C\u002Fspan>\u003C\u002Fbutton>\u003Cdiv class=\"more__bd\" id=\"more-233\" hidden=\"\">\u003Cdiv class=\"tablewrap\">\u003Ctable class=\"dtable\">\u003Cthead>\u003Ctr>\u003Cth>무엇을\u003C\u002Fth>\u003Cth>쉽게 말하면\u003C\u002Fth>\u003Cth>예시\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\u003Ctbody>\u003Ctr>\u003Ctd>\u003Cb>랜딩 템플릿\u003C\u002Fb>\u003C\u002Ftd>\u003Ctd>손님을 모으는 한 장짜리 페이지용 완성본. 다섯 갈래 중에 고릅니다.\u003C\u002Ftd>\u003Ctd>기본 · 교육 · 재테크 · 건강 · 커리어\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Cb>소개 템플릿\u003C\u002Fb>\u003C\u002Ftd>\u003Ctd>회사·강사를 소개하는 페이지용 완성본.\u003C\u002Ftd>\u003Ctd>회사소개 페이지\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Cb>섹션\u003C\u002Fb>\u003C\u002Ftd>\u003Ctd>페이지를 이루는 덩어리 하나. 여덟 가지 중에 골라 넣습니다.\u003C\u002Ftd>\u003Ctd>배너 · 상품 진열 · 후기 · 게시판 · 로케이션(지도) · 텍스트 · 이미지와 글 · 설문\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Cb>빈 페이지\u003C\u002Fb>\u003C\u002Ftd>\u003Ctd>템플릿도 섹션도 없는 백지에서 시작합니다.\u003C\u002Ftd>\u003Ctd>완전히 다르게 짜고 싶을 때\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003C\u002Fdiv>\n\u003Cp>섹션 종류별로 무엇을 채우는지는 \u003Ca href=\"\u002Fguide\u002FF08\u002FM-SITE-05\">빌더 섹션 편집\u003C\u002Fa>에서 다룹니다.\u003C\u002Fp>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"more\">\u003Cbutton type=\"button\" class=\"more__btn\" data-more=\"\" aria-expanded=\"false\" aria-controls=\"more-234\">\u003Csvg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" class=\"ic\" aria-hidden=\"true\">\u003Cpath d=\"M9 6l6 6-6 6\">\u003C\u002Fpath>\u003C\u002Fsvg>\u003Cspan>화면에 보이는 정보\u003C\u002Fspan>\u003Cspan class=\"sub\">눈에 띄는 것들이 무슨 뜻인지\u003C\u002Fspan>\u003C\u002Fbutton>\u003Cdiv class=\"more__bd\" id=\"more-234\" hidden=\"\">\u003Cdiv class=\"easy\">\u003Cdiv class=\"easy__i\">\u003Cdiv class=\"easy__t\">페이지명\u003C\u002Fdiv>\u003Cdiv class=\"easy__d\">위쪽에 보이는 지금 꾸미는 페이지 이름입니다. 안 붙였으면 \u003Ccode>제목 없음\u003C\u002Fcode>으로 보입니다.\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"easy__i\">\u003Cdiv class=\"easy__t\">왼쪽 패널\u003C\u002Fdiv>\u003Cdiv class=\"easy__d\">평소에는 템플릿·섹션을 고르는 자리, 섹션을 누르면 그 섹션 편집 칸으로 바뀝니다.\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"easy__i\">\u003Cdiv class=\"easy__t\">가운데 캔버스\u003C\u002Fdiv>\u003Cdiv class=\"easy__d\">지금 짜인 모습이 그대로 보입니다. 여기서 글과 이미지를 바로 고칠 수 있습니다.\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"easy__i\">\u003Cdiv class=\"easy__t\">오른쪽 미리보기\u003C\u002Fdiv>\u003Cdiv class=\"easy__d\">섹션을 편집하는 동안 고친 결과가 바로바로 비칩니다.\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"more\">\u003Cbutton type=\"button\" class=\"more__btn\" data-more=\"\" aria-expanded=\"false\" aria-controls=\"more-235\">\u003Csvg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" class=\"ic\" aria-hidden=\"true\">\u003Cpath d=\"M9 6l6 6-6 6\">\u003C\u002Fpath>\u003C\u002Fsvg>\u003Cspan>여기서 할 수 있는 일\u003C\u002Fspan>\u003Cspan class=\"sub\">지금 눌러도 되는 버튼\u003C\u002Fspan>\u003C\u002Fbutton>\u003Cdiv class=\"more__bd\" id=\"more-235\" hidden=\"\">\u003Cdiv class=\"easy\">\u003Cdiv class=\"easy__i\">\u003Cdiv class=\"easy__t\">빈 페이지로 만들기\u003C\u002Fdiv>\u003Cdiv class=\"easy__d\">백지로 되돌립니다. \u003Cb>지금 구성이 사라집니다.\u003C\u002Fb>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"easy__i\">\u003Cdiv class=\"easy__t\">추가\u003C\u002Fdiv>\u003Cdiv class=\"easy__d\">왼쪽에서 고른 섹션을 캔버스에 붙입니다.\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"easy__i\">\u003Cdiv class=\"easy__t\">끌어서 순서 바꾸기\u003C\u002Fdiv>\u003Cdiv class=\"easy__d\">섹션을 위아래로 옮깁니다.\u003C\u002Fdiv>\u003Cspan class=\"eg\">예: 후기를 배너 바로 아래로\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"easy__i\">\u003Cdiv class=\"easy__t\">섹션 하나만 지우기\u003C\u002Fdiv>\u003Cdiv class=\"easy__d\">섹션 편집 칸 안에 있습니다. → \u003Ca href=\"\u002Fguide\u002FF08\u002FM-SITE-05\">빌더 섹션 편집\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"easy__i\">\u003Cdiv class=\"easy__t\">미리보기\u003C\u002Fdiv>\u003Cdiv class=\"easy__d\">저장 전 내용 그대로 새 창에 띄웁니다.\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"easy__i\">\u003Cdiv class=\"easy__t\">저장\u003C\u002Fdiv>\u003Cdiv class=\"easy__d\">손님 화면에 반영합니다. 누르기 전에는 아무것도 바뀌지 않습니다.\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"more\">\u003Cbutton type=\"button\" class=\"more__btn\" data-more=\"\" aria-expanded=\"false\" aria-controls=\"more-236\">\u003Csvg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" class=\"ic\" aria-hidden=\"true\">\u003Cpath d=\"M9 6l6 6-6 6\">\u003C\u002Fpath>\u003C\u002Fsvg>\u003Cspan>눌러서 열리는 화면\u003C\u002Fspan>\u003Cspan class=\"sub\">버튼을 누르면 뜨는 창\u003C\u002Fspan>\u003C\u002Fbutton>\u003Cdiv class=\"more__bd\" id=\"more-236\" hidden=\"\">\u003Cp>\u003Cb>1. 미리보기 창\u003C\u002Fb>\u003C\u002Fp>\n\u003Cdiv class=\"shotwrap\" style=\"grid-template-columns:minmax(0,1fr)\">\u003Cdiv class=\"shot shot--captured\" data-shot-key=\"AD01\u002F0703-003_pu01\u002Fmain\" style=\"height:auto;min-height:0;border-style:solid\">\u003Cimg class=\"shot__img\" src=\"\u002Fcaptures\u002FAD01-0703-003_pu01-main.png\" alt=\"미리보기 창 — 저장 전 내용 기준\" decoding=\"async\" width=\"1440\" height=\"1038\" style=\"max-width:100%;height:auto;display:block\">\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cp>지금 편집 중인 내용을 손님이 보는 모습으로 띄워 줍니다. 저장된 내용이 아니라 \u003Cb>화면에 떠 있는 내용\u003C\u002Fb>을 보여 준다는 점만 기억하세요.\u003C\u002Fp>\n\u003Cp>\u003Cb>2. 섹션마다 열리는 고르기 창\u003C\u002Fb>\u003C\u002Fp>\n\u003Cp>상품·후기·게시글을 진열하는 섹션은 무엇을 걸지 고르는 창이 따로 열리고, 로케이션 섹션은 주소를 찾는 창이 열립니다. 이 창들은 \u003Ca href=\"\u002Fguide\u002FF08\u002FM-SITE-05\">빌더 섹션 편집\u003C\u002Fa>에서 종류별로 설명합니다.\u003C\u002Fp>\u003C\u002Fdiv>\u003C\u002Fdiv>",[48,51,54],{"id":49,"label":50},"지금-무엇을-하려고-오셨나요","지금 무엇을 하려고 오셨나요?",{"id":52,"label":53},"손님-화면에서는-이렇게-보여요","손님 화면에서는 이렇게 보여요",{"id":55,"label":56},"꼭-알아두세요","꼭 알아두세요",[58,78,87,98,111,117],{"key":59,"caption":60,"status":61,"capture":62,"pins":67},"AD01\u002F0703-003\u002Fstep1","템플릿 고르기 탭 — 랜딩 템플릿(기본·교육·재테크·건강·커리어) \u002F 소개 템플릿","captured",{"file":63,"w":64,"h":65,"ext":66},"\u002Fcaptures\u002FAD01-0703-003-step1.png",1440,1038,"png",[68,73],{"n":69,"x":70,"y":71,"text":72},1,"22%","30%","**템플릿 선택**과 **섹션 선택**, 두 탭을 오가며 씁니다.",{"n":74,"x":75,"y":76,"text":77},2,"24%","62%","템플릿 하나를 고르면 **여러 섹션이 한꺼번에** 캔버스에 들어와요.",{"key":79,"caption":80,"status":61,"capture":81,"pins":83},"AD01\u002F0703-003\u002Fstep2","섹션 고르기 탭 — 종류 고르기 · [추가]",{"file":82,"w":64,"h":65,"ext":66},"\u002Fcaptures\u002FAD01-0703-003-step2.png",[84],{"n":69,"x":75,"y":85,"text":86},"40%","종류를 고른 뒤 **[추가]**를 눌러야 캔버스에 들어옵니다.",{"key":88,"caption":89,"status":61,"capture":90,"pins":92},"AD01\u002F0703-003\u002Fstep3","캔버스 — 섹션 끌어서 순서 바꾸기 \u002F 섹션 누르면 왼쪽 패널이 편집 칸으로 바뀜",{"file":91,"w":64,"h":65,"ext":66},"\u002Fcaptures\u002FAD01-0703-003-step3.png",[93,96],{"n":69,"x":94,"y":85,"text":95},"55%","섹션을 **끌어 올리고 내려** 순서를 정합니다.",{"n":74,"x":70,"y":94,"text":97},"섹션을 누르면 이 자리가 **그 섹션 편집 칸**으로 바뀌어요.",{"key":99,"caption":100,"status":61,"capture":101,"pins":103},"AD01\u002F0703-003\u002Fstep4","위쪽 영역 — 페이지명 \u002F [미리보기] \u002F [저장]",{"file":102,"w":64,"h":65,"ext":66},"\u002Fcaptures\u002FAD01-0703-003-step4.png",[104,108],{"n":69,"x":105,"y":106,"text":107},"18%","14%","제목을 안 붙였으면 여기가 **제목 없음**으로 보입니다.",{"n":74,"x":109,"y":106,"text":110},"88%","**[저장]**을 눌러야 손님 화면이 바뀝니다.",{"key":112,"caption":113,"status":61,"capture":114,"pins":116},"AD01\u002F0703-003_pu01\u002Fmain","미리보기 창 — 저장 전 내용 기준",{"file":115,"w":64,"h":65,"ext":66},"\u002Fcaptures\u002FAD01-0703-003_pu01-main.png",[],{"key":112,"caption":113,"status":61,"capture":118,"pins":119},{"file":115,"w":64,"h":65,"ext":66},[],[],0,3607,{"docId":4,"title":11,"category":9,"playbooks":124,"themes":126,"aliases":127,"screenIds":136,"subscreens":139,"docType":143,"template":144,"frontImpact":145,"captures":150,"updatedAt":164,"freshness":165,"wave":166,"author":167,"reviewStatus":168},[125],"G3",[],[128,129,130,131,132,133,134,135],"페이지빌더","빌더","페이지꾸미기","메인화면꾸미기","템플릿","섹션추가","미리보기","빈페이지",[137,138],"S-AD01-0703-003","S-AD01-0703-003_pu01",[140,141,142],"템플릿 고르기","섹션 고르기","미리보기 창","process","D2",{"kind":146,"latency":147,"evidence":148,"screens":149},"visible","immediate","estimated",[],[151,155,157,159,161,163],{"key":152,"slot":153,"status":154},"AD01\u002F0703-003\u002Fmain","빌더 전체 — 왼쪽 패널·위쪽 버튼·가운데 캔버스","pending",{"key":59,"slot":156,"status":154},"템플릿 고르기 탭",{"key":79,"slot":158,"status":154},"섹션 고르기 탭",{"key":88,"slot":160,"status":154},"캔버스에서 섹션 순서 바꾸기",{"key":99,"slot":162,"status":154},"위쪽 페이지명·[미리보기]·[저장]",{"key":112,"slot":142,"status":154},"2026-07-22","pending-review","W3","백콘텐츠(ops-content-writer)","draft",{"docId":4,"screenIds":170,"subscreens":171,"updatedAt":164,"freshness":165},[137,138],[140,141,142],[173],{"id":125,"title":174,"to":175,"axis":176},"내 사이트 꾸미기","\u002Fstart\u002FG3","playbook",1784876347268]