SVG 자리 표시자 이미지 크기와 문구 설정 방법

자리 표시자 그래픽을 준비하는 상황

크기와 문구를 임시 이미지에 넣어야 할 때 이 도구를 사용할 수 있습니다. 가로와 세로, 표시할 문구, 배경색, 글자색을 정하면 설정을 반영한 SVG 자리 표시자 그래픽이 만들어집니다. 결과에는 생성된 SVG를 바탕으로 한 인라인 이미지 데이터 표현도 함께 포함됩니다. 따라서 실제 사진이나 완성된 디자인을 만드는 용도보다는 화면 구성, 문서 초안, 게시물 비율 확인처럼 최종 이미지가 준비되기 전의 시안을 마련할 때 알맞습니다.

값을 하나씩 정하기 번거롭다면 기본 설정으로 먼저 결과를 만든 뒤 필요한 항목만 바꿔도 됩니다. 가로와 세로를 생략했을 때 적용되는 기준이 있고, 문구를 비워 두었을 때 화면에 나타나는 라벨도 별도로 정해져 있습니다. 이 규칙을 알고 입력하면 결과가 예상과 달라졌을 때 원인을 빠르게 구분할 수 있습니다. 색상은 입력한 값이 그래픽에 반영되므로 배경과 문자의 대비를 확인하면서 선택하세요.

입력값을 정하고 결과를 생성하는 순서

먼저 가로와 세로를 입력합니다. 값을 입력하지 않으면 가로 400, 세로 300이 사용됩니다. 두 치수는 각각 따로 1 이상 2000 이하의 유효 범위로 조정되므로, 카드나 게시물처럼 목표 비율이 있다면 두 값을 함께 확인하는 편이 좋습니다.
표시할 문구를 정합니다. 제목, 화면 상태, 치수 안내처럼 결과를 구분하는 짧은 표현을 넣을 수 있습니다. 문구를 비워 두거나 값이 없는 상태로 두면 빈 라벨 대신 유효한 가로와 세로를 곱셈 기호로 연결한 표시가 사용됩니다.
배경색과 글자색을 입력합니다. 색상을 생략하면 배경색은 #cccccc, 글자색은 #333333이 적용됩니다. 밝은 배경에는 충분히 구별되는 글자색을 선택하고, 입력한 색상 값이 결과에 반영되는지 확인하세요.
생성 동작을 실행하고 결과를 확인합니다. 성공한 결과에서는 입력한 치수와 색상, 표시 문구가 반영된 SVG 자리 표시자 그래픽을 볼 수 있습니다. 함께 제공되는 인라인 이미지 데이터 표현은 생성된 SVG를 바탕으로 하며 SVG 이미지 데이터 접두사로 시작합니다.
표시 문구에 <나 >처럼 HTML에서 의미가 있는 문자를 넣었다면 화면에 들어간 형태를 살펴봅니다. 표시 문구는 SVG와 이미지의 대체 텍스트에 포함되기 전에 HTML 특수문자가 변환되므로, 입력한 문자열이 마크업으로 해석되는 결과를 전제로 확인하지 마세요.

출력 항목을 읽고 확인하는 기준

결과를 검토할 때는 먼저 치수부터 살펴보세요. 입력한 숫자가 1보다 작거나 2000보다 크면 원래 요청한 숫자가 그대로 남지 않고 각 방향의 허용 범위 안으로 조정됩니다. 가로와 세로가 독립적으로 조정되므로 한쪽만 범위를 벗어난 경우에도 두 값을 모두 다시 읽어 보는 것이 안전합니다.

문구 입력란을 비워 둔 결과에는 빈 표시 대신 조정이 끝난 치수 조합이 나타날 수 있습니다. 그러므로 문구가 보였다는 사실만으로 별도의 문구를 입력했다고 판단하지 말고, 실제 입력값과 결과 라벨을 함께 대조하세요. 색상은 지정한 값이 SVG에 사용되며, 생략한 항목에는 정해진 기본 색상이 들어갑니다.

결과를 활용할 때는 제공된 형식을 목적에 맞게 구분해야 합니다. 하나는 SVG 자리 표시자 그래픽이고 다른 하나는 그 SVG에서 만들어진 인라인 이미지 데이터 표현입니다. 이 결과를 최종 사진이나 완성된 디자인으로 해석하지 말고, 필요한 크기와 문구가 반영된 시안인지 확인한 다음 사용 목적에 맞는 후속 작업을 진행하세요.

사용 예시

소셜 미디어 게시물에 사용할 시안의 비율을 확인하려고 1200×630 크기의 자리 표시자 이미지를 준비하는 상황입니다.

가로 1200, 세로 630, 문구 ‘신제품 미리보기’, 배경색 #f2f2f2, 글자색 #222222를 입력하고 생성 동작을 실행합니다.

성공 결과에는 가로 1200, 세로 630이 반영된 SVG 자리 표시자 그래픽과 SVG 이미지 데이터 접두사로 시작하는 인라인 이미지 데이터 표현이 포함됩니다.

제한 사항

치수는 1에서 2000 사이의 결과로 조정되며, 산출물은 SVG 그래픽과 인라인 이미지 데이터 표현이므로 최종 사진이나 완성 디자인을 대신하지 않습니다.

자주 발생하는 오류

가로 또는 세로에 1보다 작은 값이나 2000보다 큰 값을 넣으면 요청한 치수와 결과가 달라질 수 있습니다. 목표 크기가 필요하다면 각 값을 1에서 2000 사이로 다시 입력하고 두 방향의 결과를 함께 확인하세요.

자주 묻는 질문

크기를 입력하지 않고도 자리 표시자 이미지를 만들 수 있나요?

가로와 세로를 모두 생략해도 기본 설정으로 생성할 수 있습니다. 이때 두 치수에는 각각 400과 300이 적용되며, 문구를 입력하지 않았다면 결과에는 유효한 두 치수를 곱셈 기호로 연결한 라벨이 표시될 수 있습니다.

문구에 HTML 태그를 입력하면 그대로 실행되나요?

문구에 HTML 태그처럼 보이는 문자를 입력해도 해당 문자열은 표시되기 전에 HTML 특수문자 변환을 거칩니다. 따라서 입력 내용을 원시 마크업이 실행되는 방식으로 해석하지 말고, 결과의 표시 문구와 대체 텍스트를 확인하세요.

생성된 결과를 이미지 URL로 바로 사용할 수 있나요?

결과에서 확인할 수 있는 형태는 SVG 자리 표시자 그래픽과 생성된 SVG를 바탕으로 한 인라인 이미지 데이터 표현입니다. 이미지 주소가 필요한 상황이라면 이 도구가 제공하는 결과 형태가 목적에 맞는지 먼저 확인하세요.