Spacer GIF

Spacer GIF

작성일: 2016.8.30 Tue

Spacer GIF 알아보기

해당 마크업 작업 당시에는 Spacer GIF라는 명칭을 몰랐는데, 나중에 위키피디아에서 웹 디자인 항목을 읽다가 그것을 일컫는 명칭을 발견했다.

...To create complex designs, many web designers had to use complicated table structures or even use blank spacer .GIF images to stop empty table cells from collapsing....

• 테이블 코딩 시절, HTML 요소 레이아웃(특히 테이블 요소) 유지를 마땅히 CSS로 해결할 수가 없었으므로 위해 사용했다고 한다. CSS가 널리 사용되기 시작한 후로는 대부분 CSS 사용으로 돌아섰다.
• Spacer GIF(여백 유지용 GIF)는 사이즈가 작은 투명한 이미지 파일이다. 파일 이름으로 spacer.gif, transparent.gif, 1x1.gif 등이 널리 사용되었다.
• 현재는 주로 HTML 이메일 레이아웃을 만드는 데 사용된다.

W3C 권고안을 보면 img 요소 섹션을 보면 브라우저가 이미지 데이터를 받아서 화면에 렌더링 할 때 어떤 과정을 거치는지에 대해 자세하게 서술이 되어있다.

W3C 권고안에서 정의된 img 요소 관련 정보

바로가기

src 속성에 관해

src 속성은 항상 존재해야 하며, '비어있지 않고 유효하면서 때에 따라서는 앞뒤로 공백이 들어가 있을 수 도 있는 URL'을 값으로 가지고 있어야 한다. 이 URL이 가리키는 이미지는 유저와 상호작용이 불가능하며, 선택적으로 애니메이션이 들어가 있을 수도 있고, 이미지 리소스가 스크립트화 혹은 페이지화(paged) 되어 있지 않아야 한다.

이에 해당되는 이미지 형식으로 정적인 비트맵 이미지(예: PNG, GIF, JPEG), 벡터 단일 페이지 문서 (PDF 페이지, SVG 루트 요소를 가지는 XML 파일), 애니메이션이 포함된 비트맵 이미지(APNG, 애니메이션 GIF), 애니메이션이 포함된 벡터 그래픽 등등이 있다. 그러나 스크립트가 포함된 SVG 파일, 페이지가 여러장인 PDF파일, 조작 가능한 MNG파일, HTML 문서, 플레인 텍스트 문서 등등의 형식은 제외한다.

img요소를 레이아웃 제작용도로 쓰면 안된다. 그 중에서도 특히 투명 이미지를 게시하는 용도로 img요소를 쓰면 안된다. 왜냐하면 투명 이미지는 특별한 의미를 가지고 있거나 문서에서 도움이 되는 경우가 거의 없기 때문이다.

이미지의 4가지 상태

img는 항상 다음의 4가지 상태 중 하나에 속한다:

1. 사용 불가능(Unavailable)

   유저 에이전트가 아무런 이미지 데이터도 받지 못했을 때.

2. 일부분만 사용 가능(Partially available)

   유저 에이전트가 이미지 데이터 일부를 받았을 때.

3. 완벽하게 사용 가능(Completely available)

   유저 에이전트가 이미지 데이터를 전부 받았고, 적어도 이미지 크기에 대한 정보를 가지고 있을 때.

4. 깨졌음(Broken)

   유저 에이전트가 이미지 데이터를 가능한대로 전부 받았으나, 이미지 크기에 대한 정보 조차 얻을 수 없을 정도로 해독이 불가능할 때(예: 이미지가 오염됨, 이미지 포맷 지원하지 않음, 데이터를 받을 수 없음)

img요소가 부분적으로 사용가능한 상태이거나, 완벽하게 사용가능한 상태일 때, 이미지를 사용가능함이라고 한다. img요소는 처음 등장할 시에는 사용 불가능한 상태이다.

각각의 img요소는 마지막 선택된 소스(last selected source)를 가지며, 초기화시 이는 반드시 null이어야 한다. 또한 현재 픽셀 밀도(pixel density) 값도 가지며, 초기화시 반드시 undefined가 되어야 한다.

... (생략) ...

유저 에이전트가 img요소의 이미지 데이터를 업데이트할 때, 다음과 같은 단계를 거친다:

1. img 요소의 상태를 사용 불가능한 상태로 해 놓는다.
2. 만약 이 요소에 대한 불러오기(fetching) 알고리즘이 여전히 실행중이라면, 알고리즘을 중지시키고, 이 알고리즘으로 인해 생겨난 모든 task를 폐기한다.
3. 만일 img 요소의 현재 이미지 데이터가 있다면, 버린다.
4. 만약 유저 에이전트가 이미지를 지원하지 않는다거나 이미지 지원 자체가 불가능하다면, 이 단계에서 마친다.
5. 그렇지 않고, 만약 요소가 src속성을 가지고 있고 그 값이 빈 문자열이 아니라면, src속성의 값이 선택된 소스(selected source)가 되고, 선택된 픽셀 밀도(selected pixel density)의 값은 1.0이 된다. 이 경우가 아니라면 선택된 소스는 null로 두고, 선택된 픽셀 밀도의 값은 undefined로 둔다.
6. 선택된 소스가 img 요소의 마지막 선택된 소스와 같게 하고, 선택된 픽셀 밀도가 img 요소의 현재 픽셀 밀도 값이 되게 한다.
7. 만약 선택된 소스가 null이 아니라면, 다음 세부단계를 따른다 ...(생략)
8. .....(생략).....
9. 만약 선택된 소스가 null이라면, 요소를 깨진(broken) 상태로 두고, img 요소에 있는 error라는 이름을 가진 간단한 이벤트를 실행하는 task를 queue에 넣는다. 그런 후 과정을 중단한다.
10. .....(생략).....

정리

Spacer GIF는 90년대 후반부터 쓰이던 기법임에도 불구하고 아직 css만으로는 레이아웃을 유지 혹은 고정 시키기 어려울 때 종종 사용되고 있다. 권고안에 따르면 '거의 아무 의미도 가지고 있지 않거나', '문서 내에서 거의 아무런 역할을 하지 못하는' 투명한 이미지를 src 속성값으로 넣으면 안된다고 하고 있지만, 이번 경우에는 에러가 났을 때 placeholder의 역할을 해주고 있으므로 이를 무쓸모하다고는 할 수 없으므로 예외로 쳐도 될 것 같다.

---

참고 사이트

1. 위키피디아 spacer GIF 항목: https://en.wikipedia.org/wiki/Spacer_GIF
2. spacer PNG 픽셀 생성기(data URI): http://png-pixel.com/
3. spacer GIF 픽셀 생성기(URL): http://spacergif.org/