어마어마하게 머리를 굴리고 굴려서 만들었습니다.
다만, 디자인은 제가 해보지 못했습니다.
스타일부스터_최신글_사용설명서.md
스타일부스터·최신글디자이너사용설명서
대상:new-basic테마v1.25이상,관리자이문서는"처음써보는분"이따라하기만하면되도록화면에보이는이름그대로적었습니다.어렵게느껴지면1장(5분만에만들기)만먼저따라해보세요.
나머지는필요할때찾아읽으면됩니다.
목차
1.5분만에첫최신글만들기 2.최신글디자이너가무엇인가요?(큰그림)
3.박스를화면에놓기 4.디자이너화면구경하기 5.탭만들기(게시판연결)
6.목록(표)디자인하기 7.갤러리(카드)디자인하기 8.부품하나하나설명 9.꾸미기(글자·배경·테두리·그림자·마우스올림)
10.자유배치와정렬배치 11.새글·링크/파일·댓글수(고정표시)
12.날짜를원하는모양으로 13.모바일화면따로디자인하기 14."이런경우는어떻게보일까?"확인하기 15.저장하기와사이트에반영하기 16.저장된디자인관리(열기·복제·내보내기·가져오기·삭제)
17.버전기록으로되돌리기 18.되돌리기·임시저장·단축키 19.자주만드는모양따라하기(레시피)
20.문제가생겼을때(자주묻는질문)
21.알아두면좋은한계
1.5분만에첫최신글만들기
가장빨리결과를보는순서입니다.자세한설명은뒤에있으니지금은그냥따라하세요.
1.사이트에관리자로로그인합니다.
2.화면오른쪽가장자리의Style Booster탭(버튼)을눌러패널을엽니다.
3.패널위쪽메뉴에서[최신글]을누릅니다.
4."새최신글박스끌어서놓기"점선칸을마우스로잡고,최신글을넣고싶은자리까지끌어다놓습니다.(놓을자리는화면에표시됩니다.)
5."어떤모양에서시작할까요?"창이뜹니다.[목록형]을누릅니다.
6.최신글디자이너화면이열립니다.왼쪽"이탭설정"의게시판칸에서보여줄게시판을고릅니다.
7.가운데화면에실제글이나타납니다.마음에들면위쪽의[저장]을누릅니다.
8.처음저장이면디자인이름을먼저적으라는안내가나옵니다.이름을적고다시[저장]을누릅니다.
9.디자이너가닫히고,박스자리에진행바가나타났다가최신글이보입니다.
10.마지막으로패널맨아래의[적용]을누릅니다.이걸눌러야방문자화면에나타납니다.
중요:7번(저장)은"디자인"을저장하는것이고,10번(적용)은"이박스를사이트에놓는것"을저장하는것입니다.둘다해야합니다.
2.최신글디자이너가무엇인가요?(큰그림)
용어먼저
말뜻
박스사이트화면에놓이는"최신글영역"하나입니다.
디자인그박스가어떻게생겼는지의설계도입니다.박스하나에디자인하나가연결됩니다.
탭박스안의탭버튼입니다.예:`자유게시판
부품글한줄(또는카드)안에들어가는것들입니다.제목,글쓴이,날짜,썸네일등.
상자부품을담는칸입니다.정렬상자와자유배치영역두종류가있습니다.
구조
박스(사이트에놓이는영역)─디자인1개 └탭1(자유게시판)─모양:목록─PC디자인/모바일디자인 └탭2(갤러리)─모양:갤러리─PC디자인/모바일디자인 └탭3…(최대8개)
탭마다연결하는게시판,모양(목록/갤러리),보여줄글수,디자인이모두따로입니다.
탭마다PC화면과모바일화면을따로디자인할수있습니다.
박스가처음나타날때는첫번째탭의글만불러오고,다른탭은방문자가누를때불러옵니다.(사이트가가벼워집니다.)
관리자만만들고고칠수있습니다.방문자는결과만봅니다.
3.박스를화면에놓기
3-1.새로만들기 1.패널[최신글]탭을엽니다.
2."새최신글박스끌어서놓기"칸을마우스로누른채화면쪽으로끕니다.
3.놓을수있는자리에안내표시가나옵니다.원하는자리에서마우스를뗍니다.
4."어떤모양에서시작할까요?"창이뜹니다.
선택처음모양
목록형제목·글쓴이·날짜가줄줄이나오는표(머리글포함)
갤러리형4칸카드.위에썸네일,아래에제목과요약,썸네일위에댓글수배지
블로그형왼쪽에큰썸네일,오른쪽에제목·요약·글쓴이·날짜
취소아무것도하지않음(빈박스만남음)
모양은시작점일뿐입니다.고른뒤에마음대로바꿀수있고,탭마다다른모양을쓸수도있습니다.
화면에주황색테두리가보여도창이떠있는동안에는자동으로숨겨집니다.
3-2.취소했는데빈박스가남았어요
[취소]를누르면"아직디자인이없는최신글박스입니다"라는빈박스가남습니다.패널의[선택영역]
탭에서그박스를눌러지우거나,박스의[디자인]버튼을눌러이어서만들면됩니다.
3-3.이미만들어둔디자인으로박스만들기패널[최신글]→"저장된디자인"의점선칸(디자인이름이적힌칸)을화면에끌어다놓으면,그디자인의복사본으로새박스가만들어집니다.(복사본이라서이박스를고쳐도원래디자인은바뀌지않습니다.)
3-4.이미놓은박스에디자인바꾸기/고치기 1.패널[선택영역]탭을엽니다.
2.화면에서그최신글박스를누릅니다.
3.패널에"최신글박스b1"(번호는박스마다다름)카드가나타납니다.
버튼하는일
[디자인]디자이너를열어이박스의디자인을고칩니다.디자인이아직없으면모양고르기창이먼저뜹니다.
[다른디자인으로]보관함의디자인하나를골라,그복사본을이박스에연결합니다.
[보관함에서고르(디자인이없는박스일때)위와같습니다.
기]
카드안의"마지막저장결과"를열면지난저장때걸러낸값과탭별시험출력결과를볼수있습니다.
4.디자이너화면구경하기
디자이너는화면전체를덮는편집창입니다.열려있는동안에는스타일부스터패널이잠시숨겨집니다.
┌위쪽막대──────────────────────────────────────────────────┐ │이름|PC·모바일|되돌리기다시|확대|경우확인안내선|버전내보내기처음으로저장닫기│ ├왼쪽──────────┬가운데(미리보기)────────┬오른쪽──────────┤ │탭│실제화면과똑같이보임│고른것의속성│ │이탭설정│누르면선택,끌면이동│(글자·배경·테두리│ │표열/카드격자││그림자…)│ │부품추가│││ │레이어│││ └────────────────┴────────────────────────────┴──────────────────┘
4-1.위쪽막대
버튼하는일
디자인이름칸보관함에보이는이름입니다.저장할때꼭있어야합니다.
PC/모바일어느화면용디자인을고칠지고릅니다.(13장)
되돌리기/다시(둥근방금한일을취소/다시실행.최대80단계.
화살표)
−100%+미리보기확대·축소(40%~160%).
경우확인긴제목,썸네일없음같은경우를가정해미리봅니다.(14장)
안내선모든칸의경계를점선으로보여줍니다.칸이어디까지인지모를때켜세요.
버전저장했던옛버전을보고되돌립니다.(17장)
내보내기지금디자인을파일로저장합니다.(16장)
처음으로지금탭의지금화면(PC또는모바일)디자인을처음모양으로되돌립니다.(확인창이뜸.되돌리기로복구가능)
저장디자인을서버에저장합니다.(15장)
닫기편집창을닫습니다.저장안한변경이있으면한번물어봅니다.
4-2.가운데미리보기실제화면과똑같은방식으로그려집니다.미리보기와사이트가다르게나오는일이없습니다.
위쪽작은줄에게시판이름·실제글5개처럼지금보는데이터가표시됩니다.게시판에글이없으면"예시글"로보여줍니다.
미리보기에서링크는눌러도이동하지않습니다.(편집중이니까요.)
무엇을누르면무엇이선택되나요?
글자/아이콘→그부품부품이담긴칸의빈곳→그상자표의한줄의빈곳→"행",카드의빈곳→"카드"
머리글줄/머리글칸→머리글탭버튼→탭(눌렀던탭으로이동하면서탭글자꾸미기가선택됨)
박스의바깥→"바깥틀"
선택하면파란테두리가생기고,오른쪽에그속성이나옵니다.
선택을풀려면오른쪽위의✕또는키보드Esc.
4-3.왼쪽위쪽부터순서대로 1.탭:탭목록,순서바꾸기(↑↓),[탭추가],[이탭지우기]
2.이탭설정:이름,게시판,모양,글수,제목/요약자르기 3.표열(목록일때)또는카드격자(갤러리일때)
4.부품추가 5.레이어:지금디자인의구조를나무처럼보여줍니다.
5.탭만들기(게시판연결)
5-1.탭추가·지우기·순서 [탭추가]:새탭이만들어집니다.(탭이름"새탭2"같은이름,목록모양으로시작.)최대8개.
탭이름을누르면그탭으로이동해서고칠수있습니다.
탭이름옆↑↓로순서를바꿉니다.맨위의탭이처음에보이는탭입니다.
[이탭지우기]:확인후지웁니다.(탭이1개뿐이면지울수없음.되돌리기로복구가능)
5-2."이탭설정"
항목설명
탭이름방문자에게보이는탭글자.(게시판을고르면,이름이"새탭…"일때게시판이름으로자동으로바뀝니다.)
게시판이탭이보여줄게시판.탭마다다른게시판을연결할수있습니다.
모양목록(표)또는갤러리(카드).바꾸면이탭의디자인이그모양의처음모양으로바뀝니다.(확인창이뜸.되돌리기로복구가능)
보일글수1~30개.
제목자르기0이면자르지않고칸너비에서알아서줄입니다.숫자를넣으면그글자수까지만보입니다.
(글자)
요약자르기요약(본문앞부분)을몇글자까지보여줄지.
(글자)
게시판을고르지않은탭도저장은됩니다.이때그탭은방문자에게안내문구만보입니다.저장할때한번더물어봅니다.
5-3.탭줄꾸미기탭버튼모양은따로꾸밉니다.오른쪽패널이비어있을때보이는"최신글전체"카드의버튼을쓰세요.
버튼꾸미는대상
바깥틀꾸미기박스전체를감싸는틀(배경,테두리,여백…)
탭줄꾸미기탭버튼들이늘어선줄.탭사이간격,탭위치(왼쪽/가운데/오른쪽/양끝늘이기)
탭글자꾸미기탭버튼하나하나.기본(고르지않은탭),선택된탭,마우스올림세가지를따로꾸밉니다.
6.목록(표)디자인하기
목록모양은표입니다.열(세로칸)마다부품을넣고,열너비를마우스로조절합니다.
6-1.열너비조절(마우스로)
1.미리보기에서열과열사이에마우스를올리면파란세로선이보입니다.
2.그선을좌우로끌면양옆열의너비가바뀝니다.끄는동안즉시따라옵니다.
3.마우스를놓으면확정됩니다.(전체합은항상100%라서,한쪽이커지면옆열이줄어듭니다.)
6-2.열추가·삭제왼쪽"표열"카드:
버튼하는일
열추가오른쪽에빈열추가(최대12열).기존열들이조금씩줄어듭니다.
마지막열지우맨오른쪽열삭제.그열에새글·링크/파일·댓글수가들어있으면안내가나오며지울수기없습니다.
같은너비모든열을같은너비로.
머리글머리글줄을선택해서켜고끄고꾸밉니다.
행글한줄(행)을선택해서꾸밉니다.
6-3.열에부품넣기 1.미리보기에서넣고싶은열의빈곳을누르거나,왼쪽레이어에서"열1·정렬"같은줄을누릅니다.
2.왼쪽"부품추가"에서원하는부품버튼을누릅니다.
3.선택한열안에부품이들어갑니다.
규칙:상자를선택하고부품을추가하면그상자안에,부품을선택하고추가하면그부품바로뒤에들어갑니다.
6-4.머리글(표의맨윗줄)
최신글에는필요없을수도있지만원하면쓸수있습니다.
표열→[머리글]을누르고,오른쪽의"머리글줄보이기"를체크합니다.
머리글칸을누르면글자를직접적을수있고(예:제목,글쓴이,작성일),칸마다글자모양을따로꾸밀수있습니다.
머리글줄전체를누르면배경,아래선,여백을꾸밀수있습니다.
6-5.행높이와행꾸미기행아래가장자리를끌면모든행의높이가함께바뀝니다.(또는[행]을눌러숫자로입력)
행높이0=내용에맞게자동.
행사이간격도넣을수있습니다.
행을선택해서배경·테두리(예:아래점선)를주고,마우스올림에서배경색을바꾸면"줄에마우스를올리면색이바뀌는"효과가됩니다.
7.갤러리(카드)디자인하기
갤러리모양은카드가격자로늘어선모양입니다.카드하나의디자인을정하면모든카드에똑같이적용됩니다.
7-1.격자설정왼쪽"카드격자"→[카드·격자설정]을누르면오른쪽에서정할수있습니다.
항목설명
한줄에몇개1~8개
카드사이간격0~80
그리고카드전체의배경·테두리·둥글기·그림자·마우스올림효과(예:올리면살짝위로뜨기)를꾸밉니다.
7-2.카드안구조기본갤러리형은이렇게생겼습니다.
카드 ├자유배치영역←썸네일을꽉채우고,그위에댓글수배지를올림 │├썸네일 │└댓글수 └정렬상자(세로)
├제목 └요약
자유배치영역은부품을원하는위치에마음대로놓는영역입니다.(10장)
정렬상자는부품을차례대로줄세우는영역입니다.(10장)
7-3.썸네일칸크기자유배치영역을선택하면"가로÷세로비율"로칸의모양을정합니다.(예:1.4=가로가약간더긴사진비율,1=정사각형,0=아래의높이값사용)
8.부품하나하나설명
부품을선택하면오른쪽의"부품설정"카드에그부품만의옵션이나옵니다.
8-1.모든"글데이터"부품에공통:값이없을때게시글에따라값이없을수있습니다.(예:썸네일이없는글)이때어떻게할지부품마다정합니다.
선택결과
숨기기그부품이없는것처럼보이지않음(자리도차지하지않음)
자리비워두기보이지는않지만자리는유지(줄이어긋나지않게하고싶을때)
대신보일값아래"대신보일글자"(썸네일은"대신보일이미지주소")를보여줌
썸네일의기본값은자리비워두기,나머지는숨기기입니다.편집화면에서는값이없는부품이흐린점선으로보여서,숨겨져있어도선택하고고칠수있습니다.
8-2.글데이터부품(게시판이주는값전부)
부품보여주는것부품설정
제목글제목앞/뒤글자,몇줄까지보일지(1~6),제목뒤표시(11장)
요약본문앞부분앞/뒤글자,몇줄까지(1~8)
글쓴이작성자이름앞/뒤글자(예:"by")
날짜작성일표시방식,날짜형식(12장)
조회수조회수앞/뒤글자(예:"조회"),천단위쉼표
번호글번호(목록순번)앞/뒤글자,천단위쉼표
썸네일대표이미지채우는방식,가로÷세로비율,마우스올리면살짝확대
좋아요수추천수앞/뒤글자,천단위쉼표
카테고리글의분류앞/뒤글자
게시판이름그글이속한게시판앞/뒤글자,게시판주소로링크
게시판바로가기게시판으로가는링크(스타일만)
확장필드게시판에추가한항목확장필드키(게시판설정의키이름그대로)
글번호(ID)시스템글번호앞/뒤글자,천단위쉼표
썸네일설정자세히
채우는방식꽉채우기(잘림):칸을사진으로가득채움.사진가장자리가잘릴수있음.
전체보이기:사진전체가보임.빈곳이생길수있음.
가로÷세로비율(0=칸채움):1.5=3:2사진모양.0=부품이들어있는칸의크기에맞춤.
마우스를올리면살짝확대:체크하면마우스를올릴때사진이조금커집니다.
썸네일은게시글대표이미지→본문첫이미지→첫첨부이미지순으로찾습니다.
8-3.꾸밈부품(데이터와상관없이내가넣는것)
부품용도부품설정
글자고정문구(예:"NEW","더글자보기")
아이장식아이콘아이콘이름(FontAwesome이름,예:star,fire,heart),종류콘(채움/선/브랜드)
그림내가올린이미지이미지주소,설명(alt),채우는방식
선구분선(처음에1px회색선.높이·색으로모양변경)
빈칸간격(처음에12×12.너비·높이로크기변경)
아이콘이름은FontAwesome사이트의이름에서fa-를뺀것입니다.예:fa-star→star.
8-4.부품위치·순서(오른쪽"위치·순서"카드)
버튼하는일
앞으로/뒤로같은상자안에서순서바꾸기
복제같은부품하나더(단,새글·링크/파일·댓글수는복제불가)
지우기부품삭제(키보드Delete도같음.되돌리기로복구가능)
정렬상자안의부품에는추가로:
칸안에서맞춤:상자설정따름/시작/가운데/끝/늘이기남는공간:부품기본값/남는공간채우기/내용크기만큼만
예:제목이있는열에서제목이칸을꽉채우고뒤의표시(N,댓글수)가오른쪽끝에붙게하려면,제목은"남는공간채우기",나머지는"내용크기만큼만"으로합니다.
9.꾸미기(글자·배경·테두리·그림자·마우스올림)
부품,상자,행,카드,머리글,탭,바깥틀무엇이든선택하면오른쪽에같은꾸미기카드들이나옵니다.오른쪽패널은크게"기본"(평소모습)과"마우스올림"(마우스를올렸을때)두덩어리로나뉩니다.
입력한칸은연두색으로표시됩니다.값을지우면"설정안함(기본)"으로돌아갑니다.색칸옆✕로도지울수있습니다.
9-1.글자
항목설명
글자색색상선택기또는직접입력(예:#ff0000,rgba(0,0,0,.5))
글자크기6~200(px)
굵기얇게~가장굵게
글꼴고딕/명조(세리프)/고정폭/둥근/맑은고딕/나눔명조/굵은제목체/손글씨
정렬왼쪽/가운데/오른쪽
줄간격0.8~3(1.4가보통)
글자간격-5~30
대소문자그대로/ABC/abc/Abc
기울임체크
밑줄없음/밑줄/취소선
글자그림자가로,세로,흐림,색
색입력방법:#빨강처럼16진수(#ff0000),투명도가있는rgba(0,0,0,0.3), transparent(투명)모두가능합니다.사이트에다크모드가있어도색은사이트의다크모드엔진이알아서자연스럽게바꿔줍니다.
9-2.배경배경색배경그림없음
그라데이션:시작색,끝색,각도(0~360.180=위에서아래로)
이미지주소:주소,크기(채우기/맞추기/원본),위치,반복
투명도(%):100=불투명,낮을수록투명(내용물까지같이흐려짐에주의)
9-3.테두리테두리두께:위/오른쪽/아래/왼쪽을각각.예)아래만1→아래줄만생김.
선모양:실선/점선(긴)/점선(짧은)/이중선테두리색모서리둥글기:위왼쪽,위오른쪽,아래오른쪽,아래왼쪽각각(모두99를넣으면알약모양)
9-4.그림자 [그림자추가]를누르면그림자가하나생깁니다.최대4개까지겹칠수있습니다.
항목:가로,세로,흐림,퍼짐,색,안쪽그림자(체크하면안쪽으로생김)
각그림자오른쪽위휴지통으로지웁니다.
예)가볍게떠보이게:가로0,세로4,흐림12,색rgba(0,0,0,0.2)
9-5.변형·필터가로이동/세로이동(px):원래자리에서옮김크기(%):100이원래크기회전(도):-180~180 필터:흐리게,밝기(%),흑백(%),채도(%)
부드러운전환(ms):마우스올림효과가일어나는시간.예)200→0.2초에걸쳐부드럽게.0이면즉시바뀝니다.
9-6.여백·크기안쪽여백:위/오른쪽/아래/왼쪽바깥여백:위/오른쪽/아래/왼쪽(마이너스도가능)
너비/높이:120px,50%,auto처럼숫자+단위로적습니다.(단위를안적으면이칸은무시되니꼭적으세요.)
최소높이,최대너비넘치는부분숨기기:체크하면칸밖으로나온부분이잘림(둥근모서리안에사진을넣을때필수)
겹침순서:숫자가클수록위에겹침마우스모양:기본/손가락/화살표/글자/이동/확대/도움말
9-7.마우스올림(호버)
마우스를올렸을때의모습을따로정합니다.정할수있는것은글자색,밑줄,배경,테두리,그림자,변형· 필터입니다.(크기·여백같은배치값은올렸을때바꿀수없습니다.)
예)행에마우스를올리면배경이연한노란색:행→마우스올림→배경색예)카드에마우스를올리면살짝떠오르고그림자:카드→마우스올림→변형·필터:세로이동-3, 그림자추가 "마우스올림"은글한줄또는카드전체에올렸을때안쪽부품이어떻게바뀌는지로정하는것입니다.부품에정한호버는그부품에올렸을때(혹은줄/카드에올렸을때)적용됩니다.
10.자유배치와정렬배치
상자는두종류입니다.한디자인안에둘을섞어도됩니다.
10-1.정렬상자("줄세우기")
부품을가로또는세로로차례차례줄세우는상자입니다.글자길이가달라도알아서맞춰줍니다.목록에가장적합합니다.
오른쪽설정:
항목설명
방향가로로늘어놓기/세로로쌓기
사이간격부품사이의거리
가로·세로맞춤(교차축)시작/가운데/끝/늘이기/글자줄맞춤
나란히놓는방향맞춤시작/가운데/끝/양쪽끝으로/고르게
넘치면다음줄로체크하면자리가모자랄때다음줄로내려감
헷갈릴때:"방향"이가로이면,"나란히놓는방향맞춤"은좌우위치,"가로·세로맞춤"은위아래위치를정합니다.방향이세로이면반대입니다.
10-2.자유배치영역("마음대로놓기")
부품을원하는곳에정확히놓는영역입니다.사진위에배지를올릴때씁니다.갤러리카드에적합합니다.
조작
하고싶은일방법
위치옮기기부품을마우스로끌기
크기바꾸기부품을선택하면오른쪽아래에생기는파란점을끌기
미세이동부품을선택하고키보드방향키(Shift를같이누르면5배)
숫자로정확히오른쪽"자유배치위치"의왼쪽/위/너비/높이(영역크기대비%)
겹침순서겹침순서숫자(큰값이위)또는레이어의순서
위치와크기는영역크기대비%로저장돼서,화면크기가달라져도비율이유지됩니다.
영역의모양은"가로÷세로비율"로정합니다.0이면높이값(여백·크기카드의"높이")을씁니다.
끄는동안은서버응답을기다리지않고바로따라오고,놓는순간확정됩니다.
10-3.레이어(구조보기와옮기기)
왼쪽레이어는지금디자인을나무모양으로보여줍니다.
줄을누르면그상자/부품이선택됩니다.(미리보기에서선택하기어려운겹친부품도여기서선택!)
끌어서옮기기:레이어줄을다른줄위/아래로끌면순서나소속이바뀝니다.
줄의위쪽절반에놓기→그줄앞에들어감
줄의아래쪽절반에놓기→그줄이상자라면그안의맨끝에들어감자유배치영역으로옮기면자리가새로정해지고,정렬상자로옮기면위치값은없어집니다.
자기자신안으로는옮길수없습니다.
한화면에쓸수있는부품/상자는최대150개,상자안의상자는7단계까지입니다.
11.새글·링크/파일·댓글수(고정표시)
이세가지는지울수없는고정부품입니다.모양과위치만바꿉니다.
이름무엇기본모양
새글최근글에붙는N표시빨간N
링크·파일글에링크가있으면링크아이콘,첨부파일이있으면클립아이콘작은회색아이콘
댓글수[3]처럼댓글개수파란굵은글씨
11-1.목록에서는"제목끝에붙기"
제목을선택하면오른쪽에"제목뒤에붙는표시(고정)"카드가있습니다.
세가지각각"제목끝에붙이기"체크(기본체크됨).
체크되어있으면제목글자바로끝에이어붙고,제목이길어말줄임(…)이되어도표시는가려지지않습니다.
[모양고치기]를누르면작은창이열립니다.
새글:보일글자(N,NEW등),새글로볼기간(시간)(24시간이내글만표시등)
댓글수:앞글자,뒤글자([]를()로바꾸기등),0개일때도보이기링크·파일:링크아이콘이름,파일아이콘이름,링크가있으면보이기,파일이있으면보이기공통:글자색,크기,굵기,배경색,안쪽/바깥여백,모서리둥글기
11-2.갤러리에서는"떼어서자유롭게놓기"
갤러리에서는댓글수를사진위구석에배지로놓고싶은경우가많습니다.
1.제목을선택합니다.
2."제목뒤에붙는표시(고정)"에서댓글수의"제목끝에붙이기"체크를끕니다.
3.레이어에"댓글수"라는독립부품이생깁니다.(제목바로뒤에생김)
4.그부품을자유배치영역(예:썸네일이있는영역)으로끌어(레이어에서끌기)옮기고,위치와모양 (배경·둥글기·글자색)을꾸밉니다.
다시붙이려면그독립부품을선택하고[제목뒤에붙이기]를누릅니다.
독립부품이된새글·링크/파일·댓글수는지우기와복제가막혀있습니다."안에이부품이들어있어지울수없다"는안내가나오면,먼저그부품을제목뒤에붙인다음지우세요.
12.날짜를원하는모양으로
날짜부품을선택하면"표시방식"을고릅니다.
방식보이는모양
날짜(형식지정)2026-11-10처럼내가정한형식
○분전·○시간전방 금전,3분전,2시 간전,5일전
일정시간까지는○시간전,이후는날짜24시간이내는3시 간전,그후는11.09같은날짜
세번째방식에서는"○시간전으로보일기간(시간)"으로기준을정합니다.(기본24)
날짜형식글자표
글자뜻예
Y연도4자리2026
y연도2자리26
m월(2자리)01~12
n월(그대로)1~12
d일(2자리)01~31
j일(그대로)1~31
H시(24시간제,2자리)00~23
h시(12시간제,2자리)01~12
i분00~59
a오전/오후am/pm
예시
입력결과
Y-m-d2026-11-10
Y.m.d H:i2026.11.1014:05
m.d11.10
n월j일11월10일
y/m/d26/11/10
"○분전"방식은화면에서계속갱신됩니다.(페이지를열어둔동안1분마다자동으로바뀜.서버캐시에오래된"3시간전"이남아있어도화면에서바로고쳐줍니다.)
형식에쓸수없는글자가있으면저장할때기본형식(Y-m-d)으로바뀌고,그사실이"걸러낸값"
목록에기록됩니다.
13.모바일화면따로디자인하기
PC와모바일은완전히따로디자인할수있습니다.(화면너비768px이하가모바일디자인으로보입니다.)
13-1.처음상태아무것도하지않으면모바일도PC디자인을그대로씁니다.표가좁은화면에서줄어드는정도로만달라집니다.
13-2.모바일따로만들기 1.위쪽막대에서[모바일]을누릅니다.(미리보기폭이390px로좁아집니다.)
2.위쪽작은줄에"모바일은지금PC디자인을그대로씁니다"와함께[모바일따로디자인하기]버튼이있습니다.누릅니다.
3.PC디자인이모바일용으로복사됩니다.이제부터모바일화면의변경은PC에영향을주지않습니다.
4.모바일에서는보통이렇게바꿉니다.
열을1개로줄이고(표열→마지막열지우기),한열안에서세로로쌓기제목2줄까지보이기,글쓴이와날짜를한줄에갤러리는한줄에2개,간격줄이기
13-3.모바일관련버튼
버튼하는일
PC디자인다시복사모바일디자인을PC디자인으로덮어씀(확인창)
따로쓰기끝내기모바일전용디자인을지우고다시PC와같게(확인창)
탭마다모바일을따로정합니다.어떤탭은PC와같게,어떤탭은따로두어도됩니다.
14."이런경우는어떻게보일까?"확인하기
실제글이늘예쁘게들어오지는않습니다.제목이아주길거나,사진이없거나,댓글이0개인경우도보기좋아야합니다.위쪽[경우확인]을누르면체크목록이열립니다.체크한경우를예시글에적용해서미리보여줍니다.(실제글에는영향없음)
체크항목확인할수있는것
긴제목제목이길때줄바꿈/말줄임이괜찮은지
썸네일없음사진이없는글에서빈자리가어색하지않은지
댓글0개/댓글많음배지모양,"0개일때보이기"설정
링크·파일없음/있음아이콘이있을때와없을때
요약없음요약이비었을때
카테고리없음카테고리가비었을때
새글아님/모두새글N표시
글이하나도없을때빈게시판일때의모습("게시글이없습니다")
실제글대신예시글로보기게시판의실제글대신예시를사용
여러개를동시에체크할수있습니다.예)긴제목+썸네일없음+댓글많음.
15.저장하기와사이트에반영하기
15-1.저장버튼을누르면 1.디자인이름이비어있으면먼저적으라는안내가나옵니다.
2.게시판을고르지않은탭이있으면"그래도저장할까요?"하고한번묻습니다.
3.디자이너가닫히고,박스자리에진행바가나타납니다.
단계무엇을하는지
디자인검사값이안전한지,범위를벗어난게없는지확인.걸러낸값은사유와함께기록
스타일(CSS)만들기이디자인의스타일파일을만듦
탭마다시험출력탭마다실제글로한번그려보고결과를확인
저장디자인과버전기록을저장
4.끝나면화면아래에"저장했습니다"안내가뜨고,박스에최신글이나타납니다.
진행바는보여주기용연출이아니라실제진행단계입니다.어느단계에서멈추면그단계에이유가적힙니다.저장에실패하면작업내용은임시저장본으로남아다음에디자이너를열때이어서작업할수있습니다.
15-2."걸러낸값"이란?
안전하지않거나범위를벗어난값(예:크기5000px,이상한주소)은저장할때자동으로제거됩니다.어떤값이왜제거됐는지는박스카드의"마지막저장결과"에서볼수있습니다.(아무것도걸러내지않았다면"걸러낸값없음")
15-3.마지막단계:패널의[적용]
디자인저장만으로는사이트에나타나지않습니다.패널맨아래[적용]을눌러야"이박스가이자리에놓여있다"는설정이사이트에반영됩니다.
디자인을고치기만했다면(박스는그대로)저장즉시반영됩니다.다만서버캐시때문에최대약 60초뒤에방문자에게보일수있습니다.
박스를새로놓았거나,옮겼거나,다른디자인으로바꿨다면반드시[적용]이필요합니다.
[되돌리기]는[적용]전에박스를놓았던것을취소합니다.
16.저장된디자인관리(열기·복제·내보내기·가져오기·삭제)
패널[최신글]탭의"저장된디자인"카드에서합니다.
각디자인은점선칸(이름과탭요약)과그아래버튼들로보입니다.
버튼하는일
점선칸끌기화면에끌어다놓으면그디자인의복사본으로새박스생성
열기디자이너로열어서고치기(고치고저장하면같은디자인에새버전으로저장)
이름바꾸기(커서모양아이새이름을입력콘)
복제(겹친네모)같은디자인을하나더만듦(이름뒤에"(복사)"가붙음)
내보내기(파일아이콘)이디자인을파일(.json)로저장—다른사이트로가져가거나백업용
삭제(휴지통)영구삭제(확인창.되돌릴수없음)
위의[파일에서가져오기]:내보내기로받은파일을골라올리면,새디자인으로추가됩니다.(이미있는디자인을덮어쓰지않습니다.)
가져오기중안전하지않은값이있으면자동으로걸러내고,"걸러낸값○개"로알려줍니다.
복사방식(연결되지않음)
보관함의디자인을박스에쓰면항상"복사본"입니다.원본과박스는연결되지않습니다.
그래서원본을고쳐도이미놓은박스는바뀌지않고,박스의디자인을고쳐도원본은바뀌지않습니다.
여러박스를한꺼번에바꾸고싶다면,하나를고친뒤다른박스들을지우고다시복사해서놓으세요.
박스만내보내기와의차이패널의영역보관함에서박스를내보내면박스위치정보만나가고디자인은같이가지않습니다.
다른사이트로옮길때는디자인을따로내보내고,그사이트에서가져오기를하세요.
삭제하면박스는?
디자인을삭제하면그디자인을쓰던박스(복사본아닌직접연결된것)는"디자인을찾을수없습니다"안내만보입니다.박스의[디자인]버튼으로새로만들거나,[보관함에서고르기]로다른디자인을연결하세요.
17.버전기록으로되돌리기
저장할때마다버전이쌓입니다.(최근30개까지보관)
1.디자이너위쪽[버전]을누릅니다.(한번이라도저장한디자인만해당)
2.버전목록에버전번호·저장시각·메모가보입니다.
3.각버전옆버튼: 비교:그버전의탭개수와구성이지금과같은지간단히알려줌이버전으로:그버전의디자인을지금편집화면에불러옵니다.
4.불러온뒤에도[저장]을눌러야확정됩니다.마음에안들면되돌리기(Ctrl+Z)로방금불러온것을취소할수있습니다.
이름을바꾸거나복제,가져오기,복사도각각첫버전으로기록됩니다.
18.되돌리기·임시저장·단축키
18-1.되돌리기/다시위쪽막대되돌리기/다시로최대80단계까지오갑니다.
숫자입력처럼비슷한변경을연달아하면하나로묶여서한번에되돌려집니다.
18-2.임시저장(자동)
편집하는동안약1.5초마다이브라우저에자동으로임시저장됩니다.
실수로닫았거나,저장이실패했거나,컴퓨터가꺼졌다면같은디자인을다시열때위쪽에이렇게나옵니다.
"저장하지못한임시작업이있습니다(날짜).[이어서작업][버리기]"
[이어서작업]을누르면그상태로복구됩니다.
임시저장은그브라우저(컴퓨터)에만있습니다.다른기기에서는보이지않습니다.
18-3.새로고침·창닫기방지디자이너가열려있는동안에는새로고침이나탭닫기를하면"이페이지를나가시겠습니까?"경고가뜹니다.(작업을잃지않도록)
18-4.단축키
키하는일
Ctrl+Z되돌리기
Ctrl+Y또는Ctrl+Shift+Z다시
Ctrl+S저장
Ctrl+D선택한것복제
Delete(또는Backspace)선택한것지우기
Esc열린작은창닫기/선택해제
방향키자유배치영역의선택한부품을1%씩이동(Shift같이누르면5%)
글자입력칸에커서가있을때는단축키가일부동작하지않습니다(입력이우선).맥에서는Ctrl대신 Command를쓰세요.
19.자주만드는모양따라하기(레시피)
레시피1.제목+글쓴이+날짜의기본게시판목록 1.새박스→[목록형]
2.게시판고르기,보일글수5~10 3.열경계를끌어제목60%/글쓴이16%/날짜24%정도로 4.날짜열의상자를선택→나란히놓는방향맞춤:끝,날짜글자정렬:오른쪽 5.행선택→테두리두께아래1,선모양점선(짧은),색연한회색 6.행→마우스올림→배경색연한색
레시피2.번호열이있는목록 1.목록형에서열추가1회→열이4개 2.새열(맨오른쪽)을선택→번호부품추가 3.번호를맨앞열에두고싶다면,열자체를옮기는것이아니라부품을옮깁니다.왼쪽레이어에서부품(번호,제목등)을끌어원하는열로옮기세요.(예:번호는1열,제목은2열,글쓴이는3열,날짜는 4열)
4.열경계를끌어번호열은좁게(8~10%),제목열은넓게조절
5.머리글을켰다면칸글자를"번호","제목"등으로바꿈
레시피3.사진위에댓글수배지가있는갤러리 1.새박스→[갤러리형](이미이렇게만들어져있습니다)
2.카드·격자설정에서한줄에몇개4,카드사이간격14 3.카드→모서리둥글기10,넘치는부분숨기기체크 4.카드→마우스올림→변형·필터:세로이동-3,그림자추가(가로0,세로8,흐림20,색 rgba(0,0,0,0.15))
5.카드→기본→부드러운전환200 6.댓글수배지(자유배치영역안):배경#20231f,글자색#d7fb55,모서리99,글자가운데정렬
레시피4.블로그형(큰사진+글)
1.새박스→[블로그형]
2.사진크기를바꾸려면자유배치영역을선택→너비/높이(예:220px,150px)
3.오른쪽상자의사이간격으로글사이거리조절 4.제목몇줄까지보일지2,요약2
레시피5.탭4개(자유게시판|갤러리|블로그|뉴스)
1.새박스→[목록형]
2.첫탭:게시판자유게시판,탭이름자유게시판 3.[탭추가]→게시판갤러리,모양:갤러리(카드)로바꾸기(확인창→확인)
4.[탭추가]→게시판블로그,모양목록으로두고사진/요약부품을넣어블로그처럼 5.[탭추가]→게시판뉴스 6.탭을하나씩선택해서각각디자인 7.탭글자꾸미기로탭버튼모양을한번에정함
레시피6."N일이내새글만N표시"
1.제목선택→[모양고치기](새글)
2.새글로볼기간(시간):72→3일이내글만N표시 3.보일글자:NEW,배경색빨강,글자색흰색,안쪽여백2525,모서리4
레시피7.제목길이를줄이고싶을때이탭설정→제목자르기에30입력→30글자넘으면…처리또는제목몇줄까지보일지2→2줄까지보이고잘림두방법을같이쓰지말고하나만쓰세요.
20.문제가생겼을때(자주묻는질문)
Q.저장했는데사이트에안보여요.
패널[적용]을눌렀나요?박스를새로놓았으면꼭필요합니다.
박스를놓은페이지에서보고있나요?(박스는놓은페이지에서만나옵니다.)
이미놓은박스의디자인만고쳤다면최대60초기다린뒤강력새로고침(Ctrl+F5)을해보세요.
박스에"이박스가쓰던최신글디자인을찾을수없습니다"가보이면,디자인이삭제된것입니다.
[보관함에서고르기]로다시연결하세요.
Q.방문자에게만안보이고나는보여요.
게시판의읽기권한이방문자에게막혀있으면방문자에게는글이보이지않습니다.(관리자에게만보임)게시판의읽기권한을확인하세요.
도메인이여러개인사이트에서,그게시판이다른도메인소속이면이도메인에서는보이지않습니다.
Q.탭을눌렀는데"불러오는중…"만나와요.
인터넷연결이나서버상태를확인하고탭을한번더눌러보세요.("불러오지못했습니다.탭을다
시눌러보세요"라고안내됩니다.)한번불러온탭은다시요청하지않습니다.
Q.미리보기와사이트모양이달라요.
미리보기는사이트와같은방식으로그려지므로,사이트가오래된화면을보여주고있을가능성이큽니다.강력새로고침을해보세요.
사이트의다른CSS가영향을줄수있는특별한경우는,해당부품에글자크기·색을직접지정해보세요.
Q.값을넣었는데반영이안돼요.
입력칸이연두색이되었는지확인하세요.(값이들어갔다는표시)
너비/높이는단위까지써야합니다.(120px○,120×)
저장후박스카드의"마지막저장결과"에서걸러낸값이있는지보세요.범위를넘는값은저장때자동으로지워집니다.
Q.제목뒤의N표시나댓글수가제목이길때사라져요.
제목뒤표시는"제목끝에붙이기"가체크되어있으면제목이말줄임이되어도가려지지않게처리됩니다.체크가꺼져있다면독립부품이므로자유배치영역밖으로나갔는지확인하세요.
Q.새글/링크·파일/댓글수를지울수없다고해요.
고정부품이라서지울수없습니다.안보이게하고싶다면"0개일때도보이기"를끄거나,글자색을배경색과같게하거나,크기를0에가깝게하는방법이있습니다.위치만바꾸려면제목에서떼어독립부품으로만든뒤움직이세요.
Q.실수로박스를지웠어요.
패널아래[되돌리기]로[적용]전변경을취소할수있습니다.이미[적용]했다면,디자인은보관함
에남아있으니같은디자인의점선칸을다시끌어다놓으면됩니다.
Q.디자인이사라졌어요.
패널[최신글]→저장된디자인에있는지먼저보세요.삭제했다면복구되지않으니,중요한디자인은내보내기로파일백업을해두세요.
Q.편집창이안닫히고경고가나와요.
저장하지않은변경이있다는뜻입니다.[저장]하거나,버리려면경고에서확인을누르세요.(임시저장본은남습니다.)
Q.모바일에서만이상해요.
그탭의[모바일]에서확인하세요."모바일은지금PC디자인을그대로씁니다"상태라면PC디자인이좁은화면에서줄어든것이니,[모바일따로디자인하기]로모바일전용으로바꾸세요.
Q.어떤부품을누르려는데자꾸다른게선택돼요.
왼쪽레이어에서이름으로선택하세요.[안내선]을켜면각칸의경계가보입니다.
21.알아두면좋은한계
항목한계
탭박스하나에최대8개
보일글수탭마다1~30개
표열최대12개
갤러리한줄카드1~8개수
부품/상자수한화면(PC또는모바일)에최대150개
상자겹침상자안의상자는7단계까지
그림자대상하나당4개까지
버전기록디자인당최근30개
사용권한관리자만만들고고칠수있음
서버반영디자인고침은저장후최대약60초걸릴수있음
제목여러줄2줄이상으로자르면말줄임(…)없이잘림
보관함디자인박스에쓰면복사본이라원본과연결되지않음
박스내보내기박스위치만나가고,디자인은따로내보내야함
임시저장그브라우저에만저장됨
게시판스킨이기능은최신글박스전용이며,게시판목록/상세스킨은바꾸지않음
예전최신글박스예전방식의최신글박스는그대로동작하지만,새로만드는것은이디자이너방식만가능
부록:한눈에보는작업순서표
[패널최신글탭]
새최신글박스끌어서놓기 │ ▼ 모양고르기(목록형/갤러리형/블로그형)
│ ▼ ┌─디자이너──────────────────────────────┐ │①탭만들기→게시판·모양·글수정하기│ │②부품추가하고,열너비·위치조절│ │③글자·배경·테두리·그림자·마우스올림꾸미기│ │④모바일따로디자인(필요하면)│ │⑤[경우확인]으로긴제목·사진없음점검│ │⑥[저장](이름필수)│ └─────────────────────────────────────────┘ │ ▼ 박스에서진행바→최신글표시 │ ▼ 패널[적용]←반드시!
│ ▼ 방문자화면에서확인(모바일도!)
끝.
써 보신 후, 피드백 부탁드립니다.
제작한 스킨 디자인은 서로 공유가 가능합니다.
저도 시간이 좀 되면, 테스트 해보겠습니다.
지금 버전은 초기 버전입니다.
개선할 것이나 버그가 많이 있을 것입니다.
@디대리
