웹 페이지의 디자인 요소를 분석하는 크롬 익스텐션입니다.

Latest Version

Version
1.0.0
Update
January 20, 2025
Size
20.16KiB
Developer
Category
Users
0
Rating
0 ★
Manifest Version
3
Web Store Status
Languages Support
한국어
See more
Permissions
ActiveTab
Scripting
Storage
See more

Web Design Assistant Extension

[개요]
Web Design Assistant는 웹페이지에 사용된 **폰트(글꼴)**와 컬러(색상) 팔레트를 빠르게 분석해주는 크롬 확장 프로그램입니다. 클릭 몇 번만으로 디자이너·프론트엔드 개발자가 필요한 정보를 손쉽게 확인하고, 디자인을 개선하거나 스타일 가이드를 만들 때 참고할 수 있습니다.

[주요 기능]
폰트 분석: 현재 페이지에서 사용된 폰트 확인
컬러 팔레트 추출: 웹사이트에 적용된 색상을 자동으로 수집하여 팔레트 형태로 표시

[사용 방법]
크롬에 설치 후, 브라우저 우측 상단의 ‘Web Design Assistant’ 아이콘을 클릭합니다.
분석하고 싶은 웹페이지로 이동한 뒤, “분석 시작” 버튼을 누르면 자동으로 스캐닝이 진행됩니다.
결과 창에 폰트 리스트 및 컬러 팔레트가 표시됩니다.
필요 시 색상 팔레트에서 해당하는 색상버튼을 눌러 색상을 빠르게 복사하세요.

[활용 사례]
디자인 QA: 클라이언트 사이트에서 폰트나 색상이 디자인 가이드와 일치하는지 확인
UI/UX 리서치: 잘 만든 사이트에서 사용한 컬러·폰트를 참고해 디자인 인사이트 얻기
학습: 웹 초보 디자이너/개발자들이 사이트 구조와 스타일 속성을 쉽게 파악

[향후 업데이트 예정 기능]
다국어 기능 추가 (현재는 임시 기능)

[주의 사항]
일부 페이지(특히 매우 복잡한 SPA 등)에서는 폰트가 동적으로 로드되므로, 분석 시간이 다소 걸릴 수 있습니다.
@font-face로 임베드된 글꼴 중 보안 설정이 있는 경우, 식별이 제한될 수 있습니다.

[문의/피드백]
버그 제보 및 기능 요청: [email protected]
Read more

Source Manifest.json

{
"update_url": "https://clients2.google.com/service/update2/crx",
"manifest_version":3,
"name":"Web Design Assistant",
"version":"1.0.0",
"description":"\uc6f9 \ud398\uc774\uc9c0\uc758 \ub514\uc790\uc778 \uc694\uc18c\ub97c \ubd84\uc11d\ud558\ub294 \ud06c\ub86c \uc775\uc2a4\ud150\uc158\uc785\ub2c8\ub2e4.",
"permissions":["activeTab",
"scripting",
"storage"],
"action":{"default_popup":"popup.html",
"default_icon":{"16":"images/icon16.png",
"48":"images/icon48.png",
"128":"images/icon128.png"}}}
Read more

Similar Extensions

icon

GoFullPage - Full Page Screen Capture Extension · Developer Tools 0 77052 ★ 1.81MiB

icon

ColorZilla Extension · Developer Tools 0 3845 ★ 410KiB

icon

JSON Formatter Extension · Developer Tools 0 1859 ★ 19.86KiB

icon

User-Agent Switcher for Chrome Extension · Developer Tools 0 2631 ★ 132KiB

icon

Lighthouse Extension · Developer Tools 0 318 ★ 50.7KiB

icon

Similarweb - Website Traffic & SEO Checker Extension · Developer Tools 0 3255 ★ 1.19MiB

icon

SEOquake Extension · Developer Tools 0 2529 ★ 1.5MiB

icon

Clear Cache Extension · Developer Tools 0 1124 ★ 616KiB

icon

ModHeader - Modify HTTP headers Extension · Developer Tools 0 1061 ★ 676KiB

icon

Selenium IDE Extension · Developer Tools 0 286 ★ 3.96MiB

icon

Postman Interceptor Extension · Developer Tools 0 957 ★ 478KiB

icon

SEO META in 1 CLICK Extension · Developer Tools 0 1108 ★ 462KiB

icon

Stylus Extension · Developer Tools 0 1101 ★ 1.01MiB

icon

CSS Peeper Extension · Developer Tools 0 363 ★ 279KiB

icon

WhatRuns Extension · Developer Tools 0 398 ★ 290KiB

icon

Color Picker for Chrome™ Extension · Developer Tools 0 118 ★ 194KiB

icon

BuiltWith Technology Profiler Extension · Developer Tools 0 407 ★ 54.1KiB

icon

Fake Filler Extension · Developer Tools 0 752 ★ 536KiB

icon

Detailed SEO Extension Extension · Developer Tools 0 193 ★ 266KiB

icon

Responsive Viewer Extension · Developer Tools 0 298 ★ 639KiB

icon

JSON Viewer Pro Extension · Developer Tools 0 137 ★ 349KiB

icon

Requestly - Intercept, Modify & Mock HTTP Requests Extension · Developer Tools 0 1227 ★ 876KiB

icon

Grepper Extension · Developer Tools 0 405 ★ 1.41MiB

icon

Color Tab Extension · Developer Tools 0 1395 ★ 11.21KiB