🎨 크롬 확장프로그램 · 코드 불필요

실제 페이지 위에서
디자인을 바로 바꿔보세요

WEbd는 어떤 웹사이트에서든 이미지 교체·텍스트 수정·요소 이동·색상과 폰트 변경을 코드 한 줄 없이 실시간으로 미리보게 해주는 라이브 디자인 프리뷰 도구입니다. 개발자에게 넘기기 전, 바뀐 화면을 눈으로 먼저 확인하세요.

⬇ Chrome 웹 스토어에서 설치 기능 살펴보기
6개 편집 탭
0줄의 코드
모든 웹사이트
numbuzin.com/product
New Arrival

No.9 NAD+ Retinal Eye Cream

h2 · 텍스트 수정
🖼✏️⧉＋🗑
$15
img · 이미지 교체

Anti-Aging, Pore Minimizer, Wrinkles, Firmer Skin with Retinoid, Peptides & Niacinamide, Gentle Retinal, Korean Eye Cream, 0.67 fl. oz.

BUY NOW
button · 배경색
✅ 변경 완료 — 새로고침해도 유지돼요
WEbdnumbuzin.com
▲ ↕ ↩︎ ↪︎ ✕
StyleImagesPaletteFontsCodeMisc
h2.product-title↑ Parent↓ Child
TEXT
(Current) system-
24
800
LeftCenterRight
120
BOX
기능

선택하고, 바꾸고, 바로 확인

요소를 클릭하면 플로팅 툴바와 6개의 편집 탭이 나타납니다. 모든 변경은 이 사이트에만 저장되고, 새로고침해도 자동으로 다시 적용돼요.

플로팅 툴바

클릭 한 번으로 요소 편집

페이지 위 요소에 마우스를 올리면 크기가 표시되고, 클릭하면 바로 위에 편집 툴바가 뜹니다. 이미지 교체부터 삭제까지 여기서 한 번에 처리하세요.

🖼 이미지 교체✏️ 텍스트 인라인 수정⧉ 요소 복제 ＋ 위/아래/안쪽 삽입👁 숨김🗑 삭제
▲ 편집 모드
🖼✏️⧉＋👁🗑
Glitz stonePocket PLT
₩38,000
Style 탭

코드 없이 비주얼로 조정

선택한 요소가 상단에 표시되고, ↑Parent · ↓Child로 이동할 수 있어요. 글자 크기·굵기·색·정렬·행간(TEXT), 배경·여백·모서리·테두리·그림자·투명도·크기(BOX)까지 슬라이더와 입력으로 즉석에서 다듬습니다.

타이포그래피마진 · 패딩 비주얼 편집모서리 · 테두리그림자 · 투명도↑부모 ↓자식
WEbdnumbuzin.com
▲↕↩︎↪︎✕
StyleImagesPaletteFontsCodeMisc
p.price-section-desc↑ Parent↓ Child
TEXT
15
LeftCenterRight
BOX
This element has no background color.Select parent with background
Margin 022136136
Padding 0000
640 × 47
🔗0000
Images 탭

페이지 속 이미지를 한눈에

페이지에서 사용된 모든 이미지를 원본 크기와 함께 목록으로 보여줍니다. 마우스로 올리기 어려운 이미지도 여기서 이동(Go)·저장(Save)·교체(Replace)로 바로 다룰 수 있어요. Save로 하나씩 내려받거나, 하단 Download all로 페이지 이미지를 한 번에 받을 수 있습니다.

사용 이미지 자동 수집원본 해상도 표시Go · Save · Replace개별/전체 다운로드배경 이미지 포함
WEbdnumbuzin.com
▲↕↩︎↪︎✕
StyleImagesPaletteFontsCodeMisc
Original 1000 × 1300pxIMG PNG
GoSaveReplace
Original 1000 × 1300pxIMG JPG
GoSaveReplace
Original 1240 × 687pxIMG WEBP
GoSaveReplace
Original 1000 × 1300pxIMG PNG
GoSaveReplace
⬇ Download all images (31)
Palette 탭

색 하나로 페이지 전체 톤 바꾸기

페이지에서 실제 쓰인 색을 배경색·텍스트색으로 나눠 사용 횟수와 함께 모아 보여줍니다. 색 하나를 골라 새 색으로 바꾸면 그 색을 쓰던 모든 요소가 한 번에 바뀌고, 자주 쓰는 색은 My palette에 자동 저장돼요.

배경/텍스트 색 분리사용 횟수 표시전체 일괄 변경RescanMy palette 자동 저장
WEbdnumbuzin.com
▲↕↩︎↪︎✕
StyleImagesPaletteFontsCodeMisc
Colors used on this page. Click one to inspect and bulk-change it.
BACKGROUND COLORS
8
4
3
1
TEXT COLORS
22
21
19
15
Rescan
Fonts 탭

폰트 교체를 전 페이지에 한 번에

페이지에서 쓰인 폰트를 사용 위치 수와 함께 모아, 하나를 골라 전체로 교체합니다. 한글 웹폰트는 자동으로 불러오고, 내 컴퓨터 폰트(Chrome 103+)까지 목록에서 바로 선택. Show로 어디에 쓰였는지 화면에서 반짝여 확인하세요.

사용 폰트 자동 수집전체 교체한글 웹폰트 자동 로드💻 내 컴퓨터 폰트Show 하이라이트
WEbdnumbuzin.com
▲↕↩︎↪︎✕
StyleImagesPaletteFontsCodeMisc
Fonts used on this page. Pick one to replace it everywhere. Korean web fonts load automatically.
💻 Load my computer's fonts
Pretendard Variable130 places
The quick brown fox 0123
Choose a replacement…Show
Rescan
Code 탭

필요하면 CSS·HTML 직접 편집

선택한 요소의 CSS 규칙만 골라 편집하고 Apply를 누르면 즉시 반영됩니다. 같은 탭에서 요소의 HTML도 그 자리에서 수정할 수 있어, 비주얼 편집과 코드 편집을 자유롭게 오갈 수 있어요.

선택 요소 CSS 편집HTML 인라인 편집즉시 ApplyReload
WEbdnumbuzin.com
▲↕↩︎↪︎✕
StyleImagesPaletteFontsCodeMisc
CSS
img#eListPrdImage22_6.asyncImage
CSS rules for the selected element only. Edit and press Apply.
#eListPrdImage22_6 {
  border-radius: 16px;
}
Apply
Misc 탭

백업 · 언어 · 캡처 · 모션 정지

변경 개수를 확인하고 전체를 Export/Import(JSON)로 백업하세요. 언어를 English·한국어·中文로 바꾸고, 전체 페이지를 스크린샷으로 저장하고, 애니메이션과 자동 슬라이더를 일시정지해 정적인 상태로 살펴볼 수 있어요.

Export / Import (JSON)🌐 EN · 한 · 中📸 전체 페이지 캡처⏸ 모션·스크립트 정지사이트 초기화
WEbdnumbuzin.com
▲↕↩︎↪︎✕
StyleImagesPaletteFontsCodeMisc
0 style rules · 0 content changes
Changes only apply to this site (numbuzin.com).
BACKUP
ExportImport
LANGUAGE
English한국어中文
CAPTURE
📸 Capture full page
MOTION / SCRIPTS
⏸ Motion: RUNNING — click to pause
Delete all changes for this site
사용법

네 단계면 충분해요

설치 후, 편집하고 싶은 아무 페이지에서 바로 시작하세요.

1

아이콘 클릭

툴바의 WEbd 아이콘을 눌러 편집 패널을 엽니다. 커서 버튼(▲) 또는 단축키 A로 편집 모드를 켜세요.

2

요소 선택

바꾸고 싶은 요소를 클릭하면 플로팅 툴바와 스타일 패널이 나타납니다. 더블클릭하면 텍스트를 바로 수정할 수 있어요.

3

바로 편집

이미지 교체, 색·폰트 변경, 요소 이동(S)까지 실시간으로. 잘못했다면 Ctrl+Z로 되돌리세요.

4

자동 저장

변경은 이 사이트에만 저장되어 새로고침 후에도 유지됩니다. 캡처로 공유하거나 JSON으로 백업하세요.

단축키

손이 빨라지는 키

AltW패널 열기 / 닫기
A편집 모드 켜기 / 끄기 (탐색 모드 전환)
S드래그 이동 모드 (Alt+드래그 = 자유 배치)
/이 사이트에서 켜기 / 끄기 (전후 비교)
1~6탭 전환 (Style·Images·Palette·Fonts·Code·Misc)
더블클릭텍스트 바로 수정
CtrlZ되돌리기 / Ctrl+Shift+Z 다시 실행
ESC선택 해제

기획·마케팅·디자인 리뷰가 훨씬 빨라집니다.

WEbd로 실제 화면 위에서 입혀보고, 판단하고, 캡처해 공유하세요.

설치

Chrome 웹 스토어에서 설치

파일을 직접 불러올 필요 없어요. 웹 스토어에서 Chrome에 추가 한 번이면 끝입니다.

WEbd

WEbd – Live Design Preview

Chrome Web Store · 무료 · Manifest V3
  • 1아래 버튼으로 Chrome 웹 스토어의 WEbd 페이지를 엽니다.
  • 2Chrome에 추가 → 확장 프로그램 추가를 클릭합니다.
  • 3툴바의 퍼즐 아이콘에서 WEbd를 📌 로 고정하세요.
  • 4아무 사이트에서 WEbd 아이콘을 클릭 = 편집 시작 / 종료.
⬇ Chrome 웹 스토어에서 설치