블로그 이미지 주소가 data:로 시작할 때: 내장 데이터와 공유 링크 구분하기

노트북 문서 안의 이미지와 별도 사진 파일을 링크 기호와 함께 살펴보는 작업 공간 삽화

블로그에서 복사한 이미지 주소가 data:로 시작한다면, 일반 공개 이미지 파일의 주소와 구분해 목록에 적으세요. data URL은 작은 파일의 내용을 문서 안에 넣을 수 있는 형식입니다. 화면에 이미지가 보인다는 사실만으로 다른 독자가 사용할 공개 공유 주소가 확인된 것은 아닙니다.

링크 목록에는 ‘무엇을 보여주는 주소인지’와 ‘왜 공유할지’를 함께 남기면 좋습니다. 본문 이미지를 표시하는 값, 이미지가 나온 원문 페이지, 독자에게 제공할 자료 주소는 서로 다른 역할입니다.

먼저 주소의 시작 부분과 목적을 확인합니다.

data:가 보이면 내장 데이터 형식으로 구분하기 → 실제 원문 출처는 따로 확인하기 → 독자에게 줄 공개 페이지나 미디어 주소를 검증하기. 문자열이 길다는 이유만으로 정상 공유 링크나 고장 난 링크라고 판단하지 않습니다.

1. data URL은 문서 안에 데이터를 담는 형식

MDN은 data: 스킴으로 시작하는 URL이 작은 파일을 문서 안에 포함할 수 있게 한다고 설명합니다. 기본 구조는 다음과 같습니다. MDN data URL 문서

data:[미디어 종류][;base64],데이터

쉼표 앞에는 데이터 종류와 선택적인 인코딩 표시가 오고, 뒤에는 데이터 자체가 옵니다. 이미지 관련 값에는 image/png 같은 미디어 종류가 나타날 수 있습니다. ;base64는 데이터가 Base64로 표현됐음을 나타내는 선택 항목이며 모든 data URL에 반드시 있는 것은 아닙니다.

구조를 알아보는 용도로 아래와 같이 접두 부분만 기록할 수 있습니다. 이 예시는 완성된 이미지가 아니며 표시될 자료 주소가 아닙니다.

data:image/png;base64,…

2. 이미지 표시와 원문 출처를 따로 기록하기

이미지를 표시한 값이 내장 데이터라면 그것만 보고 원래 어디에서 가져온 자료인지 확정할 수 없습니다. 자료의 출처 페이지를 알고 있다면 그 페이지와 이미지 표시 값을 서로 다른 칸에 기록하세요.

목록 항목무엇을 적을까확인할 목적
이미지 표시 값data: 또는 https: 등 실제 형식현재 문서에서 어떻게 보이는가
원문 출처확인한 자료 소개·게시 페이지작성자와 자료 맥락 확인
공유 목적지독자가 열 수 있는 공개 주소안내한 자료에 실제 도착하는가
상태확인됨·미확인과 확인 날짜다음 검수에서 할 일 구분

예를 들어 원고에서 작은 아이콘이 보이고 주소가 data:라면, ‘현재 원고에 포함된 아이콘 데이터’라고 적을 수 있습니다. 그 아이콘의 원문 출처를 모르면 미확인으로 남기고, 주소에 기관 이름을 임의로 붙이지 않습니다. 이 예시는 목록 정리 방식이며 특정 사이트를 실제로 확인한 사례는 아닙니다.

3. 공유할 주소는 최종 게시 화면에서 확인하기

이미지 주소의 시작 부분, 사용 목적과 독자에게 공유할 주소를 구분하는 점검 도표

MDN은 현대 브라우저에서 data:로의 최상위 페이지 이동이 보안상의 이유로 제한된다고 설명합니다. 본문 안에서 이미지가 표시되는 것과 주소를 클릭해 새 페이지로 여는 것은 같은 동작이 아닙니다. 주소를 클릭할 수 없다고 해서 임의의 외부 변환 서비스에 전체 데이터를 붙여넣을 필요는 없습니다.

자신이 권한을 가진 이미지라면 블로그가 지원하는 미디어 업로드 기능을 사용하고, 저장된 공개 주소나 자료 소개 페이지를 확인해 안내합니다. 다른 사람이 만든 이미지라면 사용 권한과 확인한 원문 출처를 먼저 대조하세요.

최종 글에서 실제 버튼이나 링크를 눌러 제목·자료가 안내한 목적지와 맞는지 확인합니다. 이미지가 보이는지만 확인하고 ‘공유 링크 검증 완료’라고 기록하지 않습니다. 목적지가 아직 정해지지 않았다면 그 항목을 미확인으로 남겨 다음 작업을 분명히 합니다.

MDN은 data URL의 데이터 부분에 일반 웹 주소처럼 검색 매개변수를 붙이면 그 문자열도 데이터에 포함된다고 설명합니다. 내장 이미지 값 끝에 UTM 같은 항목을 덧붙여 방문 링크로 바꾸려고 하지 마세요.

4. 자주 묻는 질문

data:로 시작하면 잘못된 이미지인가요?
문서에 파일 내용을 포함하는 정상 형식일 수 있습니다. 현재 이미지 표시와 공개 공유 주소 확인은 별도로 봅니다.

;base64가 없으면 data URL이 아닌가요?
Base64 표시는 선택 항목입니다. data: 스킴과 전체 구조를 확인하세요.

이 주소를 원문 출처로 기록해도 되나요?
내장 데이터 값만으로 원문 작성자나 게시 페이지를 확인했다고 보지 않습니다. 실제 확인한 출처 페이지를 따로 기록합니다.

MDN data URL 구조·동작 확인하기

자료 확인: 2026년 10월 5일. 기술 근거는 MDN data URL 문서입니다. 역할별 목록과 정리 예시는 이 글에서 구성했습니다. 부분 문자열 예시는 실제 이미지 파일이나 공유 목적지가 아닙니다.

대표 썸네일은 이해를 돕기 위해 AI로 제작한 삽화이며, 본문 주소 점검 도표는 직접 구성했습니다.

이 블로그의 인기 게시물

디노 블로그 링크 추출기

디노 글자수 계산기

URL에 앰퍼샌드 표기가 남을 때: HTML 원문과 추출한 href를 구분하세요