Claude 아티팩트에 이미지가 안 보일 때 — 주소는 멀쩡한데 빈칸인 이유

리포트를 하나 아티팩트로 만든 적이 있어요. 사진이 열 장쯤 들어가는 문서였고, 이미지는 이미 이미지 호스팅에 올라가 있어서 주소만 넘겨주면 되는 상황이었어요. 그런데 아티팩트 안에서만 전부 빈칸이었어요. 주소를 복사해 새 탭에 붙여넣으면 사진은 멀쩡히 떴고요.

저는 처음에 주소를 의심했어요. 오타인가, 권한이 걸렸나, 링크가 만료됐나. 전부 아니었어요.

이미지 잘못이 아니에요

이 증상은 꽤 알아보기 쉬워요.

• 이미지 자리에 alt 텍스트만 뜨거나, 아무것도 없는 여백이 남아요
• 같은 주소를 브라우저 주소창에 넣으면 정상적으로 열려요
• 어떤 이미지 호스팅을 쓰든 똑같아요

확인하는 방법은 하나예요. 개발자도구 콘솔을 열면 이런 문구가 있어요.

Refused to load the image ... because it violates the following Content Security Policy directive: "img-src ..."

번역하면 "이 이미지는 주소가 틀려서가 아니라, 정책상 불러오는 걸 거부했다"예요. 파일이 아니라 규칙의 문제라는 뜻이에요.

아티팩트는 바깥에서 아무것도 못 가져와요

아티팩트가 허용하는 이미지 출처는 아주 좁아요. 2026년 7월 기준으로 코드에 직접 박아 넣은 데이터, 그리고 클로드 자기 도메인 정도예요. 나머지 외부 주소는 전부 차단이에요.

이미지만의 이야기도 아니에요. 같은 규칙이 CDN에서 불러오는 자바스크립트 라이브러리, 구글 폰트, 외부 API 호출, 웹소켓까지 똑같이 막아요. 아티팩트가 만들어준 코드가 로컬에서는 잘 도는데 아티팩트 화면에서만 이상하게 밋밋했다면, 대개 이것 때문이에요.

인터넷에 도는 우회법도 몇 개 봤어요. SVG 안에 이미지를 넣는다거나, CSS 배경 이미지로 바꾸면 된다는 이야기요. 둘 다 결국 같은 규칙에 걸려요. 어떤 문법으로 적었든 브라우저가 바깥으로 요청을 보내는 순간 막히는 구조라서요. placehold.co 같은 임시 이미지 서비스도 마찬가지로 안 나와요.

이건 고장이 아니라 잠금이에요

여기서 "클로드가 부실하네"로 결론 내리기 쉬운데, 저는 반대로 봐요. 이건 일부러 잠근 거예요.

AI가 만든 페이지가 외부로 요청을 보낼 수 있다면, 그 요청 자체가 정보를 실어 나르는 통로가 돼요. 누군가 문서나 대화 속에 숨겨둔 지시문이 클로드를 속여서, 대화 내용을 파라미터로 붙인 이미지 주소를 만들게 할 수 있거든요. 이미지가 안 보이는 대신 대화 내용이 새지 않는 쪽을 택한 거예요.

그래서 기다린다고 풀릴 성질이 아니에요. 정책을 인정하고 방법을 바꾸는 게 빨라요.

그래서 되는 방법 세 가지

1. 이미지를 파일째 코드에 심기

주소로 부르는 대신 이미지 자체를 코드 안에 넣는 방식이에요. data URI라고 불러요. 외부 요청이 아예 없으니 규칙에 걸리지 않아요.

다만 공짜는 아니에요. 이 방식으로 바꾸면 파일이 원본보다 3분의 1쯤 커지고, 그만큼 페이지가 통째로 무거워져요. 저는 열 장을 넣으면서 목록용은 가로 200px, 상단 큰 이미지는 460px로 줄이고 압축을 한 번 거쳤어요. 그렇게 해서 전체 251KB였어요. 줄이지 않았다면 몇 MB짜리 문서가 됐을 거예요.

두세 장이고, 아티팩트 안에서 확인하고 끝낼 문서라면 이게 제일 빨라요.

2. 이미지는 자리만 잡아두기

구조를 잡는 단계라면 굳이 지금 넣을 필요가 없어요. 회색 박스로 자리만 잡아두고 클로드에게 레이아웃만 다듬게 하는 편이 낫습니다. 이미지는 마지막에 한 번에 넣으면 되니까요.

3. 아티팩트 밖으로 꺼내기

가장 단순한 해결이에요. 아티팩트에서 코드를 복사해서 아티팩트가 아닌 곳에 올리면, 지금까지 안 되던 이미지 주소가 그대로 살아나요. 저 규칙은 아티팩트라는 공간의 규칙이지, HTML의 규칙이 아니거든요.

아티팩트 안에서 이미지를 살리는 데는 품이 들고, 밖으로 꺼내면 그냥 됩니다.

1page.run 에디터에 코드를 붙여넣고 발행하면 링크가 하나 나와요. 로그인은 없어도 되고, 이미지 주소는 손댈 필요 없어요. 압축도, 변환도 안 해도 돼요.

어디까지가 아티팩트의 자리인가

정리하면 이래요. 대화하면서 결과물을 눈으로 확인하는 단계에서는 아티팩트가 제일 편해요. 고쳐달라고 말하면 바로 반영되니까요. 그런데 그 결과물을 누군가에게 링크로 건네는 순간부터는 성격이 달라져요. 이미지가 살아야 하고, 주소가 남아야 하고, 받는 사람이 아무 준비 없이 열려야 하죠.

이미지가 안 보이는 문제는 그 경계선을 알려주는 신호에 가까워요. 만드는 단계에서 보여주는 단계로 넘어갈 때가 됐다는 뜻이거든요.

공유 자체가 막히는 경우 — 회사 계정이라 게시 버튼이 없거나 받는 사람에게 로그인 화면이 뜨는 경우 — 는 Claude 아티팩트 공유가 안 될 때에 따로 정리해뒀어요.

자주 묻는 질문

이미지를 채팅에 업로드하면 아티팩트에 들어가나요?

아니요. 클로드는 업로드한 이미지를 볼 수는 있지만, 그걸 아티팩트 코드 안에 그대로 심어주지는 못해요. 아티팩트에 넣으려면 결국 이미지 파일을 코드에 넣을 수 있는 형태로 바꿔야 해요.

아티팩트를 게시(publish)하면 이미지가 나오나요?

아니요. 게시한 페이지에도 같은 정책이 적용돼요. 게시는 누가 볼 수 있는지를 바꾸는 것이지, 외부 리소스 차단을 푸는 게 아니에요.

이미지 몇 장까지 코드에 심는 게 현실적인가요?

압축한 뒤 합쳐서 수백 KB 안쪽이면 무리가 없어요. 그 이상 넘어가면 열리는 속도가 눈에 띄게 느려지고, 이미지 한 장 바꿀 때마다 전부 다시 만들어야 해서 손이 많이 가요. 그 지점부터는 밖에 올리는 쪽이 싸요.

이미지 말고 다른 것도 안 되나요?

네. 외부 CDN에서 불러오는 자바스크립트 라이브러리, 웹폰트, 외부 API 호출도 같은 이유로 막혀요. 아티팩트에서 만든 코드는 외부 의존 없이 한 파일 안에서 완결되도록 요청하는 편이 시행착오가 적어요.