🏖️ 그늘진 낙원
image2n8n 메인 타이틀 이미지

image2n8n 메인 타이틀 이미지

image2n8n 웹브라우저 이미지를 n8n으로 보내는 브라우저 확장 프로그램

BoniK's WORKS 2026년 9월 2일

웹브라우저 확장 프로그램 image2n8n

image2n8n 메인 타이틀 이미지

개요

저는 예전부터 컴퓨터를 좋아해서 PC 앞에 앉아 있는 시간이 길었습니다. 최근 가장 많이 사용하는 소프트웨어는 자동화 도구인 n8n과 노트 앱인 조플린(Joplin)입니다. 자주 사용하다 보니 n8n과 조플린의 활용도를 극대화하고자 이것저것 만들어 보고 있습니다.

웹브라우저로 여러 사이트를 탐색하다 보면 유용하거나 재미있고 귀한 이미지를 자주 접하게 됩니다. 이런 이미지들을 개인 저장소에 수집해 두면 업무나 취미 생활에 큰 도움이 됩니다.

물론 이미지를 별도로 저장하는 확장 프로그램은 기존에도 많이 있었습니다. Imgur나 구글 포토 같은 외부 서비스로 이미지를 전송해 주는 확장 프로그램은 흔했지만, 내가 원하는 URL로 원하는 방식을 이용해 전달해 주는 도구는 찾기 어려웠습니다. 그래서 직접 만들게 되었습니다.

이미지를 n8n으로 전송하면 단순한 저장을 넘어 다양한 앱이나 AI와 연동할 수 있어 확장성이 뛰어날 것으로 생각했습니다.

작동 개념

웹브라우저에 보이는 이미지를 n8n으로 전송하고, n8n 내부의 다양한 기능을 거쳐 이미지를 처리합니다. 처리 결과나 결과물(텍스트, 파일)은 다시 브라우저로 반환할 수 있습니다.

이미지를 수신할 서버가 반드시 n8n일 필요는 없습니다. Python의 FastAPI나 Node.js의 Fastify 등을 활용해 구축한 커스텀 서버를 이용해도 됩니다.

graph LR
    B["Browser"]
    N8N["N8N"]
	O["AI, API, etc."]

    B -->|"Image File"| N8N
	N8N -->|"Text & File"| B
    N8N <-->|"Text & File"| O

    classDef browser fill:#1681e4,stroke:#0d5bb0,stroke-width:2px,color:#ffffff,rx:8,ry:8
    classDef n8n fill:#e3496d,stroke:#a8283f,stroke-width:2px,color:#ffffff,rx:8,ry:8
    classDef other fill:#8d5bc3,stroke:#4338ca,stroke-width:2px,color:#ffffff,rx:8,ry:8	

    class B browser
    class N8N n8n
	class O other

    linkStyle 0 stroke:#6366f1,stroke-width:6px 5
    linkStyle 1 stroke:#6366f1,stroke-width:6px 5

image2n8n 주요 특징

  • 원하는 URL로 이미지 전송 가능
  • 기본 인증 설정 지원(Basic Auth)
  • 이미지를 파일(Binary), Base64, URL 형태로 전송 가능
  • 응답 결과의 다양한 처리 방식 제공
  • 메타데이터 추출 및 전달(현재 Title, Description 지원)
  • 모바일 브라우저 지원(현재 파이어폭스 지원)
  • 배지(아이콘) 클릭으로 손쉬운 이미지 전송
  • n8n(또는 커스텀 서버)을 활용한 다양한 후처리 가능

image2n8n 설치 방법

지원 브라우저

이 확장 프로그램은 파이어폭스(Firefox)를 기준으로 개발되었습니다. Edge, Chrome에서도 동작을 확인했으나 사용 환경에 따라 원활하지 않을 수 있습니다.

  • 파이어폭스(PC / 모바일)
  • Edge(PC)
  • Chrome(PC) 및 크로미엄(Chromium) 기반 브라우저

배포 웹페이지

GitHub의 README.md에서 더욱 자세한 설명을 확인하실 수 있습니다.

설치 안내

  • 파이어폭스 및 Edge는 스토어에서 image2n8n을 검색하여 설치할 수 있습니다.
  • 상단의 배포 웹페이지 링크를 통해서도 직접 설치할 수 있습니다.
  • Chrome 웹 스토어에는 등록되어 있지 않습니다. GitHub 페이지에서 ZIP 파일을 다운로드하여 수동으로 설치해야 합니다.

image2n8n 설정 및 사용법

image2n8n 설정

확장 프로그램 설치 후 옵션 페이지에 접속하면 image2n8n의 세부 설정을 변경할 수 있습니다.

image2n8n 설정1
image2n8n 설정2
  • n8n 웹훅 URL을 필요한 만큼 추가할 수 있습니다.
  • 업로드 성공 및 실패 시 동작할 액션을 지정할 수 있습니다.
  • 메타데이터(현재 Title, Description 지원)를 추출하고 수정한 뒤 전송할 수 있습니다.
  • 크기가 작은 이미지에서 배지(업로드 아이콘)가 표시되지 않도록 크기 필터를 설정할 수 있습니다.
  • 우클릭이 제한된 환경이나 모바일에서도 사용할 수 있도록 배지 표시 옵션을 설정할 수 있습니다.
  • 배지의 투명도 및 표시 위치를 조절할 수 있습니다.

image2n8n 사용법

설정을 마친 후 웹브라우저에서 원하는 이미지를 전송하는 과정은 다음과 같습니다.

Step 1. 원하는 이미지 위에 나타나는 배지(업로드 아이콘)를 클릭합니다.

image2n8n 사용법 1.원하는 이미지의 배지를 클릭

Step 2. 이미지 업로드 대화상자에서 원하는 웹훅(URL)을 선택하고 전송 방식을 지정합니다.

/content/images/2026/09/image2n8n-overview-step2.webp
  • PC: 이미지에 마우스 우클릭을 하거나 우측 상단에 표시되는 배지를 클릭하면 전송 대화상자가 나타납니다.
  • 모바일: 이미지 위에 표시된 배지를 터치하면 전송 대화상자가 나타납니다.
  • 공통: 웹사이트의 제약이나 보안 설정으로 인해 파일명, 메타데이터 등을 추출할 수 없는 경우가 있습니다. 이럴 때는 Base64 방식으로 전송하면 정상 작동할 확률이 높습니다.
⚠️ 저작권이 있는 이미지를 무단으로 수집 및 사용할 경우 법적 책임을 질 수 있으므로 주의해야 합니다.

image2n8n 활용 예

이미지 수신 이후의 처리 과정은 n8n 워크플로우 또는 커스텀 서버에서 직접 구성해야 합니다.

  • 원하는 저장소(이메일, 클라우드 등)에 이미지 보관
  • 이미지 자르기, 변환, 배경 제거, 재구성 등 편집 작업
  • ImageMagick, Rembg, ffmpeg, ExifTool, AI 연동 등을 통한 자동화 처리
  • 이미지 메타데이터 편집 및 활용

image2n8n 활용 시나리오 예

  • Google Drive, Dropbox 등에 이미지 자동 분류 및 저장
  • 이메일이나 메신저로 이미지 자동 전송
  • 이미지 크기 축소 및 압축
  • JPG, PNG, WebP 등 타 포맷으로 자동 변환
  • 이미지 배경 제거(누끼 작업) 및 투명 PNG 변환
  • 워터마크 삽입 후 자동 저장
  • 썸네일 이미지 자동 생성
  • OCR을 활용한 이미지 내 텍스트 추출 및 번역
  • EXIF 정보 확인 및 개인정보 메타데이터 삭제
  • C2PA, 디지털 SynthID 정보 검증
  • 이미지 처리 후 블로그 및 웹사이트 자동 업로드
  • AI를 통한 이미지 분석, 설명 작성 및 태그 생성
  • AI 이미지 수정, 복원, 업스케일링
  • AI를 활용한 스타일 변환(사진을 만화 스타일로, 또는 그 반대로 변환)
  • AI 분석 결과와 이미지 변환 데이터를 DB에 연동 저장
  • 이미지 기반의 자동 글 작성 워크플로우 구축

N8N사용자를 image2n8n 추가 활용 팁

n8n팁- 쿼리를 이용해 분기하면 하나의 워크플로우로 여러 작업 처리 가능

URL에 쿼리 파라미터를 추가하여 조건 분기를 설정하면, 하나의 n8n 워크플로우만으로도 다양한 작업을 처리할 수 있습니다.

https://n8n.example.com/webhook/image2n8n?act=upload&service=dropbox
https://n8n.example.com/webhook/image2n8n?act=send_email
https://n8n.example.com/webhook/image2n8n?act=convert&type=jpg2webp
https://n8n.example.com/webhook/image2n8n?act=rembg
https://n8n.example.com/webhook/image2n8n?act=create_thumb
https://n8n.example.com/webhook/image2n8n?act=ocr

원하는 기능을 의뢰하고 싶다면?

n8n 워크플로우나 커스텀 서버 구축 관련 의뢰는 mail@bonik.me로 문의해 주시기 바랍니다.(작업 난이도에 따라 비용 상이)

라이선스 및 후원

태그

BoniK

협업, 의뢰, 레슨 등 문의 : mail@bonik.me | https://open.kakao.com/me/bonik

추천 게시물