라이브 편집으로 프론트 디자인 수정하기
관리자 라이브 편집 모드를 사용하면 실제 블로그 화면을 보면서 텍스트·레이아웃·색상을 실시간으로 수정할 수 있습니다.
코드나 CSS 지식 없이 블로그 프론트엔드 디자인을 직접 수정합니다. 변경 결과가 관리자 화면에서 즉시 반영되어 저장 전 미리보기가 가능합니다.
라이브 편집 모드 진입
관리자 대시보드에서 "디자인 편집" 버튼을 클릭하거나, 블로그 주소 끝에 ?edit=1을 추가합니다 (예: my-blog.nexorablog.co.kr?edit=1). 관리자로 로그인된 상태에서만 편집 모드가 활성화됩니다.
인라인 텍스트 편집
편집 가능한 텍스트 요소(사이트 제목, 슬로건, 섹션 제목 등)를 클릭하면 우측 패널에 편집 입력창이 나타납니다. 텍스트를 수정하면 실시간으로 미리보기에 반영됩니다.
섹션 순서 드래그 앤 드롭
라이브 편집 모드에서는 홈 페이지의 섹션(Hero 캐러셀, 광고, 최신글, 카테고리 등)을 드래그하여 순서를 변경할 수 있습니다. GripVertical 아이콘을 잡고 드래그하면 framer-motion 애니메이션과 함께 순서가 바뀝니다.
변경 사항 저장·취소
우측 패널에서 "저장" 버튼을 클릭하면 현재 편집 중인 항목이 서버에 저장됩니다. "취소" 버튼은 미저장 변경사항을 원래 값으로 되돌립니다. 여러 항목을 수정한 경우 "전체 저장" 버튼으로 일괄 저장합니다.
광고 슬롯 실시간 배치
편집 모드에서 광고 슬롯 위치(Hero 하단, 섹션 사이, 페이지 하단)도 드래그로 재배치 가능합니다. 광고 코드(애드센스/애드핏/쿠팡) 입력도 편집 패널에서 직접 할 수 있습니다.
?edit=1 파라미터는 관리자 계정으로 로그인된 브라우저에서만 편집 모드를 활성화합니다. 일반 방문자에게는 일반 블로그 화면이 보입니다.
편집 모드에서 수정한 내용은 저장하기 전까지 서버에 반영되지 않습니다. 브라우저를 닫기 전에 반드시 저장하세요.
라이브 편집 모드는 관리자 계정 전용 기능입니다. 일반 블로그 방문자는 이 기능에 접근할 수 없습니다.