WEbd - Live Design Preview

Preview design changes directly on any live webpage. Replace images, edit text, move elements, and tweak CSS - no code required.

WEbd is a live preview tool that lets you see design changes directly on any real webpage. Web designers, content creators, and channel managers can instantly preview design edits on live pages. *Changes are never applied to the actual website — they are only visible temporarily on your own screen. WEbd는 실제 웹페이지 위에서 디자인 변경을 바로 확인하는 라이브 프리뷰 도구입니다. 웹디자이너, 콘텐츠 제작자, 채널 운영자가 웹페이지 디자인 수정을 즉시 확인할 수 있습니다. *실제로 채널에 적용되는게 아닌, 사용자의 화면에서만 임시로 보이는 것입니다. ■ Content Editing Image replacement: instantly swap any image on the page with a file from your computer (manage all page images from the Images tab) Text editing: double-click any text to edit it in place Duplicate, insert, delete, and hide elements (hidden elements can be restored individually from a list) Drag elements to reorder them, or Alt+drag for free positioning Drag the selection box edges to resize elements (proportional resizing supported) Undo / Redo (Ctrl+Z / Ctrl+Shift+Z) ■ Style Editing Adjust text, background, borders, shadows, spacing, corner radius, opacity, blend modes, and layers (z-index) with a single click Visual box model editor for intuitive, per-side margin and padding control Edit the CSS/HTML code of the selected element directly ■ Palette & Fonts Automatically collects every color used on the page — change all elements using a color at once with a single click Selected colors flash on the page so you can instantly see where they are used Detects the fonts used on the page and replaces them in one step (Korean web fonts load automatically; your computer's local fonts are also supported) ■ Tools Full-page capture: save the entire page from top to bottom as a single PNG (the editing UI is automatically excluded from captures) Motion pause: stop rolling banners and animations to inspect the page in a static state On/off switch per site for instant before-and-after comparison Shortcuts: A (edit) · S (drag move) · / (on/off before-after) · 1–7 (tabs) · N (language) · ESC (deselect/minimize) · Alt+W (open/close panel) · parent element(ctrl+↑) · child element(ctrl+↓) ■ Saving & Management Changes are saved automatically per site and persist after page refresh Export/import as JSON for backup and sharing (replaced images included) Available in 한국어 · English · 中文 ■ Privacy All data is stored only in your browser. No data is ever collected or transmitted externally. Site access permission is used solely to display the editing tools and apply your saved styles to the pages you visit. ■ 콘텐츠 편집 이미지 교체: 페이지의 이미지를 내 컴퓨터의 파일로 즉시 교체 (이미지 탭에서 페이지 내 모든 이미지를 모아 관리) 텍스트 수정: 더블클릭으로 바로 편집 요소 복제·삽입·삭제·숨기기 (숨긴 요소는 목록에서 개별 복원) 드래그로 요소 순서 이동, Alt+드래그로 자유 배치 선택 박스 모서리를 드래그해 크기 조절 (비례 조절 지원) 되돌리기 / 다시 실행 (Ctrl+Z / Ctrl+Shift+Z) ■ 스타일 편집 클릭 한 번으로 글자·배경·테두리·그림자·여백·모서리·투명도·블렌드·레이어(z-index) 조정 시각적 박스 모델 에디터로 여백을 방향별로 직관적으로 수정 선택 요소의 CSS/HTML 코드 직접 편집 ■ 팔레트 & 폰트 페이지에 쓰인 색상을 자동 수집, 클릭 한 번으로 해당 색을 쓰는 모든 요소 일괄 변경 색상 선택 시 사용된 위치가 화면에서 반짝여 바로 확인 페이지에 쓰인 폰트를 자동 감지하고 한 번에 교체 (한글 웹폰트 자동 로드, 내 컴퓨터 폰트 사용 가능) ■ 도구 전체 페이지 캡처: 페이지 맨 위부터 아래까지 한 장의 PNG로 저장 (편집 도구 UI는 캡처에서 자동 제외) 모션 일시정지: 롤링 배너·애니메이션을 멈추고 정적인 상태로 확인 사이트 켜기/끄기 스위치로 변경 전후를 즉시 비교 단축키: A(편집) · S(드래그 이동) · /(켜기/끄기 전후 비교) · 1~7(탭) · N(언어) · ESC(해제/최소화) · Alt+W(패널 열기/닫기) · 상위요소(ctrl+↑) · 하위요소(ctrl+↓) ■ 저장 및 관리 변경사항은 사이트별로 자동 저장되어 새로고침 후에도 유지 JSON 내보내기/가져오기로 백업 및 공유 (교체한 이미지 포함) 한국어 · English · 中文 지원 ■ 개인정보 모든 데이터는 사용자의 브라우저에만 저장됩니다. 어떠한 데이터도 외부로 전송하거나 수집하지 않습니다. 사이트 접근 권한은 방문 중인 페이지에 편집 도구와 저장된 스타일을 적용하기 위해서만 사용됩니다.