React로 AI 이미지 EXIF 추출기 만들기

이미지 파일 속에는 우리가 눈으로 바로 볼 수 없는 숨겨진 데이터가 담겨 있습니다. 흔히 EXIF 데이터라고 부르는 이 정보에는 카메라, 촬영 환경, 이미지 생성 과정의 여러 메타데이터가 포함될 수 있습니다. 특히 AI 생성 이미지에서는 NovelAI 스텔스 PNG, 프롬프트, 모델, 캐릭터 정보 등 다양한 메타데이터가 존재할 수 있습니다. 이번 글에서는 React를 활용해 AI 이미지 EXIF 추출기를 만드는 과정을 자세히 소개하고, 실습과 함께 이해를 돕겠습니다.

1. 프로젝트 시작과 환경 구성

React는 컴포넌트 단위로 UI와 상태를 관리할 수 있는 강력한 프레임워크입니다. 이미지 업로드, 탭 전환, 데이터 표시 기능을 구현하기에 적합하며, 상태 변화에 따라 화면을 실시간으로 업데이트할 수 있습니다. 프로젝트 생성은 다음 명령어로 진행합니다.

npx create-react-app exif-extractor

설치가 완료되면 npm start로 로컬 개발 서버를 실행하고 브라우저에서 확인할 수 있습니다. 추가로 React Router와 Helmet을 설치하면 페이지 라우팅과 SEO 최적화를 쉽게 구현할 수 있으며, 이미지 분석용 라이브러리도 나중에 통합할 수 있습니다.

npm install react-router-dom react-helmet

2. 이미지 업로드와 미리보기 구현

사용자가 파일을 선택하거나 드래그 앤 드롭하면 좌측 패널에서 미리보기하도록 구현했습니다. useState를 활용해 선택한 파일 상태를 관리하고, useRef로 DOM 요소를 참조하여 미리보기 이미지를 표시합니다.

const [file, setFile] = useState(null);
const fileInputRef = useRef(null);

const handleFileChange = (e) => {
  setFile(e.target.files[0]);
};
      

미리보기 기능은 사용자가 올바른 파일을 선택했는지 즉시 확인할 수 있어 편리합니다. 모바일과 데스크톱 환경에서 모두 적용되도록 반응형 스타일링도 중요합니다.

3. NovelAI 메타데이터 추출

이미지 내부에 숨겨진 NovelAI 스텔스 PNG, 긍정/부정 프롬프트, 캐릭터 프롬프트, 모델 정보를 추출합니다. 파일 데이터를 arrayBuffer로 읽은 후, 별도의 분석 모듈인 parseNovelAIMetadata를 통해 메타데이터를 파싱합니다.

const ab = await file.arrayBuffer();
const out = await parseNovelAIMetadata({
  arrayBuffer: ab,
  mime: file.type,
  imageSource: file,
});
      

추출된 데이터는 우측 패널의 탭별 영역에 표시하며, 버튼 클릭으로 각 정보를 클립보드에 복사할 수 있습니다. 이를 통해 AI 이미지 내부 정보를 실시간으로 확인하고 활용할 수 있습니다. 예를 들어 모델 정보를 분석해 다른 이미지 생성 환경과 비교하거나, 프롬프트를 재활용하는 등 다양한 활용이 가능합니다.

4. UI 및 사용자 경험 개선

사용자 경험을 높이기 위해 다음 요소들을 구현했습니다.

• 모바일 감지 및 안내 메시지 표시
• 좌측 파일 패널과 우측 메타데이터 패널 구성
• 탭 전환으로 다양한 메타데이터 확인 가능
• 미리보기 크기 조절 및 다크 모드 지원
• 복사 버튼으로 간편하게 데이터 클립보드 저장

5. 이미지 저장 및 다운로드 기능

추출된 메타데이터를 파일로 저장하거나, 이미지 자체를 다운로드할 수 있는 기능도 추가할 수 있습니다. JavaScript의 Blob와 URL.createObjectURL을 활용하면 간단하게 구현 가능합니다.

const downloadMetadata = (data) => {
  const blob = new Blob([JSON.stringify(data, null, 2)], { type: "application/json" });
  const url = URL.createObjectURL(blob);
  const link = document.createElement("a");
  link.href = url;
  link.download = "metadata.json";
  link.click();
};
      

사용자는 추출한 메타데이터를 저장하고, 다른 프로젝트에서 재활용하거나 백업할 수 있습니다. 이 기능을 추가하면 단순 확인용 툴이 아니라 실제 활용 가능한 생산 도구로 발전합니다.

6. 추가 확장 아이디어

• WebUI, ComfyUI 등 다른 AI 이미지 소스 통합
• 다양한 이미지 형식 지원 (JPEG, HEIC 등)
• 다크 모드 및 사용자 테마 커스터마이징
• 프롬프트 기반 검색 기능 구현
• 이미지 배치 분석, 태그 자동 분류

7. 마무리하며

이번 프로젝트를 통해 React에서 이미지 업로드, 상태 관리, 외부 데이터 파싱, 동적 UI 구성까지 종합적으로 경험할 수 있었습니다. 또한 AI 이미지 내부 정보를 실시간으로 확인하고 클립보드 저장, 다운로드 기능까지 제공하는 유용한 웹 도구를 만들 수 있었습니다.

앞으로 React와 오픈소스 라이브러리를 활용하면 다양한 AI 이미지 소스를 분석하고 통합하는 프로젝트를 손쉽게 구현할 수 있습니다. 실습을 통해 얻은 경험은 웹 개발과 AI 이미지 활용 능력을 동시에 높이는 좋은 기회가 됩니다.