ImageSmith
코드가 가리키는 바로 그 자리에 이미지를: 경로에 포인터를 올리면 카드에 이미지와 픽셀 크기, 파일 크기가 표시됩니다. SVG는 그려지고, .ico에 들어 있는 모든 크기가 나오며, 애니메이션 GIF는 재생됩니다 — 그리고 같은 카드가 솔루션 탐색기의 미리 보기를 대신합니다.
무료 · Visual Studio 2022 및 2026 · UI 14개 언어 · PNG, JPEG, GIF, BMP, TIFF, ICO, WebP, SVG
ImageSmith를 쓰는 이유
이름이 아니라 이미지를 보세요
/Assets/Icons/save.svg만으로는 알 수 있는 것이 거의 없습니다. ImageSmith는 파일을 열지 않고도 경로가 적힌 바로 그 자리에서 이미지 자체를 보여 줍니다 — XAML, Razor, CSS, C#, JSON, 프로젝트 파일, .resx에서.
SVG와 .ico도 포함
Visual Studio는 SVG에 대해 아무것도 보여 주지 않고 아이콘은 한 가지 크기만 보여 줍니다. ImageSmith는 SVG를 그리고, .ico에 든 모든 이미지를 나열하며, 애니메이션 GIF를 재생합니다.
없는 이미지가 눈에 띕니다
프로젝트에도 디스크에도 없는 이미지의 경로에는 물결선이 생기고, Windows에 필요한 크기가 없는 애플리케이션 아이콘에는 힌트가 표시됩니다 — 사용자가 빈 이미지나 흐릿한 아이콘을 보기 전에.
무료, 조건 없음
구독, ‘Pro’ 버전, 데이터 수집이 없고 출력 창이나 시작 시 메시지도 없습니다. 부탁드리는 것은 단 하나, 어느 정도 사용해 보신 뒤 Marketplace에 평가를 남겨 주시는 것뿐입니다. Visual Studio 2022 및 2026, x64 및 ARM64에서 작동합니다.
기능
- 경로에 포인터를 올리면 카드 표시: 바둑판 무늬 위의 이미지, 픽셀 크기, 파일 크기와 형식, 코드에서 표시되는 크기(20%로 표시), 그리고 작업 — 열기, 기본 앱에서 열기, 솔루션 탐색기에서 표시, 경로 복사.
- 기본 제공 미리 보기 대신 솔루션 탐색기에서도 같은 카드, 이미지 복사 포함.
- SVG 렌더링, 16, 24, 32, 48 px로도 표시 — 단추에서 어떻게 보일지 확인할 수 있습니다.
- 색과 형식을 포함한 .ico의 모든 크기; 모든 크기를 PNG로 저장, 크기별 PNG로 저장, 선택한 크기 복사.
- 카드에서 애니메이션 GIF 재생, 프레임 수와 길이 표시.
- 배율 변형을 나란히:
_x2,_x1_25,@2x,.scale-200,.targetsize-24,-480. - 경로 앞의 썸네일, 색 견본처럼.
- 힌트: 이미지를 찾을 수 없음 및 일반 크기가 없는 아이콘.
- PNG, JPEG, GIF, BMP, TIFF, ICO, WebP, SVG; 이미지 뒤 배경은 바둑판 무늬, 흰색 또는 어두운 색.
코드의 카드
이미지 경로에 포인터를 올리면 편집기의 요약 정보 도구 설명에 카드가 열립니다. 프로젝트가 찾는 방식 그대로 디스크의 파일 내용을 보여 줍니다: 파일 폴더나 프로젝트를 기준으로 한 상대 경로, 프로젝트(또는 wwwroot)를 기준으로 한 루트 경로, 해당 어셈블리 프로젝트의 pack URI.
| 부분 | 표시 내용 |
|---|---|
| 이미지 | 바둑판 무늬 위의 이미지(투명 영역이 보임). 작은 이미지는 픽셀을 선명하게 유지한 채 확대하고, 큰 이미지는 맞춰 줄입니다. 모서리의 단추 세 개로 배경을 바꿉니다. |
| 크기 배지 | 픽셀 크기와, 같은 태그에 Width 또는 Height가 설정된 경우 코드에서 표시되는 크기: 1600 × 1000 · 20%로 표시. SVG의 경우: SVG · 맞춤. |
| 정보 | 파일 이름, 픽셀 크기, 파일 크기, 형식, DPI(96이 아닐 때). SVG는 viewBox, 도형 수, 그라데이션이나 텍스트 포함 여부. 솔루션 내 경로. |
| 작업 | 열기(Visual Studio에서), 기본 앱에서 열기, 솔루션 탐색기에서 표시, 경로 복사. |
바둑판 무늬, 흰색 또는 어두운 색
흰색 카드 위의 흰색 로고는 보이지 않습니다. 이미지 오른쪽 위의 단추 세 개로 바둑판 무늬, 흰색, 어두운 색을 오갈 수 있으며, 선택은 Visual Studio를 닫을 때까지 유지됩니다. 카드의 시작 배경은 옵션으로 정합니다.
경로 앞 썸네일
파일이 있는 각 경로 앞에 줄 높이만 한 작은 이미지가 붙습니다 — 색 견본처럼. 아이콘 파일 목록도 한눈에 알아볼 수 있습니다. 편집기를 더 깔끔하게 하려면 끄세요.
솔루션 탐색기
솔루션 탐색기에서 이미지 파일에 포인터를 올리면 기본 제공 미리 보기 대신 ImageSmith 카드가 옆에 열립니다. SVG가 그려지고(기본 제공 미리 보기는 아무것도 표시하지 않음), .ico는 모든 크기를 보여 주며(기본 제공 미리 보기는 하나만), 이미지의 배율 변형이 그 아래에 나란히 놓입니다.
포인터가 항목이나 카드 위에 있는 동안 카드가 유지되므로 링크를 클릭할 수 있습니다 — 여기서는 열기, 기본 앱에서 열기, 경로 복사, 이미지 복사입니다. 포인터가 벗어나거나, 스크롤하거나, 키를 누르거나, 트리를 클릭하면 닫힙니다.
폴더, 코드 파일, ImageSmith가 표시하지 않는 항목은 기본 제공 도구 설명을 그대로 사용합니다. Visual Studio 업데이트로 솔루션 탐색기가 바뀌어 포인터 아래 항목을 찾을 수 없게 되면 ImageSmith는 끼어들지 않습니다.
아이콘(.ico)
.ico 파일에는 크기마다 하나씩 여러 이미지가 들어 있습니다. .ico 카드는 이를 모두 바둑판 무늬 위에 나란히 보여 주고(128 px보다 큰 크기는 128로 표시), 각 크기와 색, BMP와 PNG 중 어느 형식으로 저장되었는지, 바이트 수를 표로 보여 줍니다.
크기를 클릭하면(띠에서든 표에서든) 선택됩니다. 선택한 크기 복사는 그 이미지를 클립보드에 넣습니다.
행의 PNG로 저장은 그 크기를 PNG 파일로 씁니다. 모든 크기를 PNG로 저장…은 폴더를 묻고 크기마다 PNG를 하나씩 씁니다(contoso-16.png … contoso-256.png).
SVG
SVG 파일은 SharpVectors로 그려집니다 — 코드의 카드, 솔루션 탐색기, 썸네일 모두에서. 카드는 이미지 아래에 16, 24, 32, 48 px로 보여 줍니다: 도구 모음 단추에서 어떻게 보일지.
정보는 viewBox(viewBox가 없으면 너비 × 높이), 파일 크기, 도형 수이며, 파일에 있으면 그라데이션과 텍스트도 표시됩니다. 그릴 수 없는 SVG는 이미지 대신 오류 줄을 보여 줍니다.
SVG에서 참조하는 외부 파일과 URL은 절대 로드하지 않습니다.
애니메이션 GIF
애니메이션 GIF는 카드에서 반복 재생되며, 정보에 프레임 수와 길이가 표시됩니다: GIF · 애니메이션, 8프레임, 0.8초. 프레임이 하나인 GIF는 멈춰 있습니다. WebP, TIFF, BMP는 PNG, JPEG와 같은 방식으로 표시됩니다.
배율 변형
이미지는 고DPI 화면을 위해 여러 배율로 준비되는 경우가 많습니다. 파일이 나란히 있으면 카드가 이미지 아래에 이를 늘어놓고, 각각을 배율과 픽셀 크기에 비례해 그립니다(×2 · 64). 표시 중인 것에는 테두리가 그려집니다. 흔히 쓰는 배율이 없으면 점선 칸으로 표시됩니다.
| 이름 규칙 | 예 | 없을 때 점선 칸 |
|---|---|---|
| 배수(WinForms, 보고서 디자이너) | Chart.png, Chart_x2.png, Chart_x1_25.png, Chart_x1.5.png | ×1, ×2 |
| @2x(웹, iOS, React Native) | Chart.png, Chart@2x.png | ×1, ×2 |
| scale-(UWP, WinUI, MSIX) | Logo.scale-100.png, Logo.scale-200.png | 100, 200 |
| targetsize-(UWP, WinUI, MSIX) | Square44x44Logo.targetsize-24.png | 16, 24, 32, 48 |
| 크기 접미사 | icon-16.png, icon-32.png, tent-480.jpg, tent-768.jpg | — |
변형을 클릭하면 같은 카드에서 볼 수 있습니다. 이 행은 코드의 카드와 솔루션 탐색기 모두에 있습니다.
인식 대상
경로는 이미지 파일의 확장명으로 인식되며, 각 언어에서 파일을 지정하는 위치에서 인식됩니다:
| 위치 | 예 |
|---|---|
| XAML(WPF, WinUI, MAUI, Avalonia) | Source="/Assets/logo.png", pack://application:,,,/Contoso;component/Icons/save.svg, /Contoso.Icons;component/…, ms-appx:///Assets/hero.jpg, avares://Contoso.App/Assets/logo.png |
| Razor, Blazor 및 HTML | <img src="~/images/tent.jpg">, srcset, <link rel="icon">, style="background: url(…)" |
| CSS, SCSS, LESS | url("../images/hero.webp"), url(…) without quotes, image-set(…) |
| C# | "Assets/hero.jpg", @"Assets\splash.png", new Uri("pack://…"), Path.Combine("Assets", "logo.svg") |
| JSON | "icon": "images/icon-192.png" (appsettings.json, manifest.json) |
| 프로젝트 파일 | <ApplicationIcon>, <Resource Include="…">, <Content Include="…">, MAUI and appxmanifest images |
| .resx | 이미지에 대한 ResXFileRef와, 이미지 경로인 일반 문자열 값. |
| 형식 | PNG, JPEG, GIF, BMP, TIFF, ICO, WebP, SVG |
솔루션의 다른 프로젝트를 가리키는 pack URI(/Contoso.Icons;component/Icons/save.svg, 버전 유무와 관계없이)는 해당 프로젝트에서 찾습니다. ms-appx:///는 UWP와 WinUI의 한정 파일도 찾습니다(Logo.png에 대한 Logo.scale-200.png). MAUI의 logo.png는 Resources/Images/logo.svg를 찾습니다.
의도적으로 표시하지 않는 것: URL과 data: URI, 바인딩과 리소스({Binding …}, {StaticResource …}), 보간 문자열과 변수로 만든 경로, MSBuild 속성, 와일드카드, pack://siteoforigin:, C#의 파일 이름만 있는 경우("logo.png"는 무엇이든 될 수 있음).
힌트
SmithWorks 제품군과 공유하는 두 종류의 힌트: 각 텍스트는 ImageSmith:로 시작하고, 도구 설명에 이 종류의 힌트 표시 안 함이 있으며, LensSmith가 있으면 힌트가 줄 끝에도 표시됩니다.
| 힌트 | 표시 조건 | 텍스트 |
|---|---|---|
| 이미지를 찾을 수 없음 | 프로젝트에도 디스크에도 없는 이미지의 경로(물결선). URL, 변수가 들어간 경로, 코드의 파일 이름만 있는 경우는 확인하지 않습니다. | ImageSmith: /Assets/banner-old.png is not in the project. |
| 일반 크기가 없는 아이콘 | 16, 32, 48 또는 256 px가 없는 애플리케이션 또는 트레이 .ico(회색 점): Windows가 다른 크기를 확대/축소하므로 흐릿하게 보입니다. 파비콘은 확인하지 않습니다. | ImageSmith: tray.ico has no 16 × 16 image — Windows will scale a larger one. |
각 종류는 설정의 편집기 힌트에서, 또는 힌트에서 바로 끌 수 있습니다.
설정
도구 › 옵션 › SmithWorks › ImageSmith. 모든 옵션에 하는 일을 알려 주는 짧은 설명이 있습니다.
| 옵션 | 기본값 |
|---|---|
| 마우스를 올리면 미리 보기 | 켜짐 |
| 솔루션 탐색기의 카드 | 켜짐 |
| 경로 앞 썸네일 | 켜짐 |
| 미리 보기 배경 | 바둑판 무늬 |
| 힌트: 이미지를 찾을 수 없음 | 켜짐 |
| 힌트: 일반 크기가 없는 아이콘 | 켜짐 |
| Marketplace 평가 요청 | 켜짐 |
설정은 %LocalAppData%\ImageSmith에 저장됩니다. 기본값으로 재설정하면 모든 것이 다시 켜집니다.
자주 묻는 질문
경로에 포인터를 올려도 아무것도 열리지 않습니다. 왜 그런가요?
ImageSmith는 디스크에서 찾은 파일에 대해서만 카드를 표시합니다. 경로가 이미지 확장명으로 끝나는지, 변수나 바인딩, URL로 만들어지지 않았는지 확인하세요(이런 경로는 표시되지 않습니다). 파일이 없다면 대신 경로에 이미지를 찾을 수 없음 물결선이 있어야 합니다. C#의 파일 이름만 있는 경우("logo.png")는 의도적으로 건너뜁니다 — C#에서는 폴더가 있는 경로나 pack URI만 읽습니다.
avares://OtherAssembly/…에는 왜 아무것도 표시되지 않나요?
avares://나 pack URI는 어셈블리를 지정합니다. 그 어셈블리가 열려 있는 솔루션의 프로젝트이면 ImageSmith는 그 프로젝트에서 찾습니다. NuGet 패키지나 참조된 DLL에서 온 경우 이미지는 그 안에 컴파일되어 있어 디스크의 파일이 아니므로 표시할 것이 없으며, ImageSmith는 없다고 보고하지도 않습니다.
SVG의 네임스페이스가 잘못되었거나 없습니다. 그려지나요?
예. xmlns="http://w3.org"로 저장되었거나 네임스페이스가 없는 파일은 흔합니다. ImageSmith는 그리기 직전에 SVG 네임스페이스를 넣으므로 카드에 이미지가 표시됩니다. 브라우저는 여전히 이런 파일을 거부할 수 있으니 고쳐 두는 것이 좋습니다.
카드에 이 SVG를 그릴 수 없다고 나옵니다. 어떻게 하나요?
카드에는 오류의 첫 줄이 표시됩니다(예: 줄과 열이 있는 XML 오류). 파일을 고친 뒤 다시 경로에 포인터를 올리세요 — 변경된 파일은 다시 읽습니다.
솔루션 탐색기의 기본 제공 미리 보기를 계속 쓸 수 있나요?
예 — 설정에서 솔루션 탐색기의 카드를 끄세요. 코드의 카드는 그대로 남습니다.
큰 이미지 때문에 편집기가 느려지나요?
아니요. 이미지는 백그라운드 스레드에서, 카드에 필요한 크기로만 디코딩되며, 썸네일은 작게 디코딩됩니다. 256 MB가 넘는 파일(SVG는 8 MB, ICO는 16 MB 초과)은 이미지 없이 정보만 표시합니다.
ImageSmith가 어딘가로 무언가를 보내나요?
아니요. 컴퓨터에서 솔루션의 이미지 파일을 읽을 뿐 다른 일은 하지 않습니다 — 원격 분석도, 요청도 없으며, SVG가 인터넷에서 무언가를 로드하는 일도 없습니다.
문제를 보고하거나 기능을 제안하려면 어디로 가야 하나요?
GitHub의 Feedback 리포지토리에 이슈를 등록하세요. 버그, 아이디어, 인식되지 않는 경로를 위한 양식이 있습니다(비공개 이름은 바꿔 주세요). Marketplace의 Q&A 탭을 이용할 수도 있습니다.
변경 내역
1.1.0
- SmithWorks 제품군 공통 스타일로 그린 새 아이콘.
1.0.0
- 첫 릴리스: XAML, Razor 및 HTML, CSS, C#, JSON, 프로젝트 파일, .resx의 이미지 경로에 포인터를 올리면 나타나는 카드; 배율 변형이 있는 솔루션 탐색기의 카드; SVG 렌더링, .ico의 모든 크기, 애니메이션 GIF; 경로 앞 썸네일; 힌트 ‘이미지를 찾을 수 없음’과 ‘일반 크기가 없는 아이콘’; 한 번만 하는 평가 요청.