Minimal Image Editor

VS Code에서 이미지 변환, 매직완드 선택, 복사·붙여넣기, 레이어와 크기 변경에 집중하는 미니멀 이미지 에디터입니다. Simple Image Editor에서 영감을 받아 독립적으로 구현했습니다.

일반 VS Code에 설치하기 (VSIX)

F5 개발 창 없이 사용하려면 확장을 VSIX 파일로 패키징한 뒤 설치합니다. 개인 사용에는 Visual Studio Marketplace 공개나 게시자 계정 인증이 필요하지 않습니다. 패키징에는 Node.js와 npm, 최초 npx 실행에는 인터넷 연결이 필요합니다.

프로젝트 폴더에서 실행합니다.

cd ~/ws/vscod-image-editor
npx @vscode/vsce package
code --install-extension ./vscod-image-editor-0.1.0.vsix

생성되는 파일 이름의 버전은 package.json의 version을 따릅니다. 위 예시는 현재 버전 0.1.0 기준입니다.

code 명령을 사용할 수 없다면 VS Code의 Extensions 패널에서 **… → Install from VSIX…**를 선택하고 생성된 파일을 지정합니다.

설치 후 일반 VS Code 창에서 다음과 같이 설정합니다.

1. 명령 팔레트에서 Developer: Reload Window를 실행합니다.
2. 탐색기의 이미지 파일을 우클릭하고 **Open With…**를 선택합니다.
3. Configure default editor… → Minimal Image Editor — Preview를 선택합니다. PNG·JPEG·WebP 등 사용할 확장자별로 설정합니다.
4. 이후 이미지는 Preview로 열리고, 상단 Edit을 누르면 편집할 수 있습니다.

수정한 버전으로 업데이트

소스 수정은 설치된 확장에 자동 반영되지 않습니다. 프로젝트 폴더에서 다시 패키징하고 설치합니다. 같은 버전을 교체할 때는 --force를 사용합니다.

npx @vscode/vsce package
code --install-extension ./vscod-image-editor-0.1.0.vsix --force

버전을 변경했다면 실제 생성된 VSIX 파일 이름으로 설치합니다. 설치 후 Developer: Reload Window를 실행합니다.

개발 모드로 실행

1. 이 폴더를 VS Code로 엽니다.
2. F5 → Run Image Editor로 Extension Development Host를 실행합니다. 별도 빌드나 런타임 패키지 설치는 필요 없습니다.
3. 새 창의 명령 팔레트에서 Minimal Image Editor: Open Image를 실행하고 PNG·JPEG·WebP 이미지를 선택합니다. 탐색기 이미지 파일의 우클릭 메뉴에서도 실행할 수 있습니다.
4. 원본 이미지의 Preview 탭이 바로 열립니다. Edit을 누르면 저장되지 않은 편집 프로젝트로 전환되며, 처음 저장할 때 .mimage 위치를 선택합니다.
5. 빈 작업은 Minimal Image Editor: New Project로 시작합니다.

F5 실행 문제

저장소를 이동했다면 code ~/ws/vscod-image-editor로 새 경로의 폴더를 엽니다. 실행 및 디버그 패널에서 Run Image Editor를 선택한 뒤 F5를 누릅니다. 기본 F5 설정은 디버거 연결을 기다리지 않고 개발 확장을 실행합니다 (noDebug: true). 중단점이 필요하면 Run Image Editor + Webview Debugging을 선택합니다. 현재 환경에서 확장 호스트 디버거의 localhost 연결 오류가 재현되어, 이 선택 설정은 정상 동작이 보장되지 않습니다.

웹뷰 디버깅 연결은 IPv4 주소 127.0.0.1을 사용하지만, VS Code 내장 디버거의 확장 호스트 연결은 별도입니다. 디버거 없이 개발 확장을 여는 방법은 다음과 같습니다.

code --new-window --extensionDevelopmentPath="$HOME/ws/vscod-image-editor"

새 창이 열리면 명령 팔레트에서 Minimal Image Editor: Open Image 또는 Minimal Image Editor: New Project를 실행합니다. F5 자체는 이미지 편집 화면을 자동으로 열지 않습니다.

Explorer / Open With

PNG·JPEG·WebP 파일을 우클릭한 뒤 Open With… → Minimal Image Editor — Preview를 선택할 수 있습니다. 탐색기에서 파일을 클릭할 때마다 이 미리보기를 사용하려면 **Open With… → Configure default editor…**에서 해당 항목을 지정합니다. 기존 이미지 확장의 기본 연결 설정은 유지됩니다. 이미지 미리보기는 원본 파일 탭에서 열리고, Edit은 별도의 레이어 프로젝트를 생성합니다.

Preview / Edit

이미지는 기본적으로 Preview 모드로 열립니다. 확대·축소와 내보내기가 가능하며 선택·삭제·붙여넣기 등 편집은 비활성화됩니다. 상단 Edit을 누르면 메뉴, 왼쪽 도구 막대, 오른쪽 Properties·History·Layers 패널이 표시됩니다. Preview로 돌아가도 편집 내용은 유지됩니다. 모든 UI와 명령 이름은 영어로 표시합니다.

Zoom

Preview와 Edit 모두에서 하단 − / +, 배율 입력(1–3200%), 프리셋, Fit, 1:1을 사용할 수 있습니다. Ctrl/Cmd + 마우스 휠은 커서 위치를 기준으로 확대·축소합니다. 일반 휠은 스크롤에 사용합니다. 키보드 + / −, 0(Fit), 1(100%)도 지원합니다. 확대 시 스크롤로 이미지의 다른 영역을 볼 수 있으며 200% 이상에서는 픽셀을 선명하게 표시합니다.

Pixel Grid

도트 작업은 캔버스 아래 Pixel Grid 옵션을 켜서 실제 이미지 픽셀 경계를 확인할 수 있습니다. 200% 이상에서만 표시되며 배율에 맞춰 격자 간격이 조정됩니다. 200% 미만으로 축소하면 자동으로 숨겨지고 다시 확대하면 표시됩니다. Preview와 Edit 모두 지원하며, 그리드는 화면 표시 전용으로 저장·내보내기 이미지와 히스토리에 포함되지 않습니다.

편집

• 매직완드: 활성 레이어에서 클릭한 픽셀과 유사한 색을 선택합니다. 허용 오차는 0~255이며, 인접 영역을 끄면 레이어 전체에서 같은 색을 선택합니다. 파란 오버레이가 선택 영역입니다.
• 선택: 반전·해제·삭제를 지원합니다. 선택이 없는 복사·삭제는 활성 레이어 전체에 적용됩니다.
• 복사·붙여넣기: 선택 영역을 복사해 새 레이어에 붙여넣습니다. 에디터 내부 클립보드를 기본으로 사용하며, 시스템 클립보드 쓰기가 허용되는 환경에서는 PNG도 복사합니다. 외부 이미지는 Ctrl/Cmd+V 또는 ＋ 이미지로 가져옵니다.
• 레이어: 이미지 추가, 이름 변경, 표시·숨김, 불투명도, 순서 변경, 삭제를 지원합니다. 레이어 이동 도구에서 드래그한 뒤 놓으면 위치가 적용됩니다.
• 캔버스 크기: 픽셀 배율을 유지하고 기준점에 따라 작업 영역을 변경합니다. 축소하면 영역 밖 픽셀은 잘립니다. 실행 취소로 복원할 수 있습니다.
• 이미지 크기: 모든 레이어를 함께 리샘플링합니다. 비율 유지 옵션을 지원합니다.
• 히스토리: VS Code 문서의 실행 취소·다시 실행과 연결됩니다. 작업 목록의 항목을 누르면 히스토리 항목을 추가하지 않고 해당 상태로 이동합니다. 에디터 Undo/Redo도 같은 목록에서 이동합니다. 이전 상태에서 새로 편집하면 이후 기록은 교체됩니다. 목록은 현재 편집 세션에서 최대 30개, 약 48MB로 제한하며 프로젝트에는 저장하지 않습니다.

저장과 내보내기

프로젝트 저장 / Ctrl·Cmd+S는 레이어를 포함하는 .mimage 파일을 저장합니다. VS Code의 수정 표시, 닫기 시 저장 확인, 문서 복구 기능을 사용합니다.

내보내기는 보이는 레이어를 합쳐 PNG·JPEG·WebP로 저장합니다. JPEG의 투명 영역은 흰색으로 처리합니다. JPEG·WebP 품질은 첫 버전에서 92%로 고정합니다. 원본 이미지는 프로젝트와 별도로 유지됩니다.

화면 내 도움말

Preview와 Edit 모두에서 상단 Help 또는 ? 키로 영어 도움말을 열 수 있습니다. 검색창에서 도구, 단축키, Pixel Grid, 저장·내보내기, 문제 해결 항목을 검색할 수 있습니다. Escape 또는 닫기 버튼으로 돌아옵니다. 도움말이 열린 동안 편집 단축키와 붙여넣기는 캔버스에 적용되지 않습니다.

단축키

개발과 검증

• npm run check: JavaScript 문법 검사
• npm test: 매직완드 연결 영역·허용 오차·투명도·행 경계·프로젝트 검증 테스트
• node test/editor.smoke.cjs: Playwright가 설치된 환경에서 브라우저 통합 검사. 브라우저 경로는 CHROME_PATH로 지정할 수 있습니다.

브라우저 검사는 VS Code 메시지 처리를 모의합니다. 실제 Extension Development Host에서 이미지 열기, 저장 확인, 문서 복구 및 OS별 클립보드 권한은 별도 확인이 필요합니다.

첫 버전은 최대 64개 레이어, 한 변 8192px, 총 16,777,216픽셀까지 허용합니다. 각 레이어는 캔버스 전체 크기로 유지하므로 큰 이미지와 많은 레이어는 메모리 사용량이 큽니다. 프로젝트는 JSON 안에 PNG 레이어를 저장합니다. 색상 프로필과 EXIF 메타데이터 보존, 애니메이션 이미지, 레이어 잠금, 브러시·텍스트·필터는 지원하지 않습니다.

구조: src/extension.js는 VS Code 문서와 파일 작업, media/editor.js는 Canvas 편집과 UI, media/core.js는 선택 알고리즘과 검증을 담당합니다. VS Code Custom Editor API를 기반으로 구현했습니다.