[웹 퍼블리싱 06] HTML - 이미지와 대체 텍스트 - TheNullPage(널페이지)

지난 편까지 문서의 뼈대를 세우고 텍스트를 담고 링크로 이었습니다. 이제 문서에 생기를 불어넣는 이미지를 다룰 차례입니다. 그런데 제가 초보 시절 이미지를 넣을 때는 그저 파일 경로만 지정하고 끝냈습니다. 화면에 그림이 뜨니 그걸로 됐다고 여겼죠. 하지만 그림이 뜨지 않을 때, 그리고 눈으로 그림을 볼 수 없는 사람에게는 제 이미지가 텅 빈 공백에 지나지 않았습니다.

이번 편에서는 이미지를 제대로 넣는 법을 다룹니다. 그림을 눈으로 볼 수 없는 사람에게도 전하는 대체 텍스트, 화면 크기에 맞춰 알맞은 그림을 고르는 반응형 이미지, 성능을 살리는 지연 로딩, 그리고 레이아웃이 덜컥거리지 않게 막는 크기 지정까지. 이미지는 단순한 장식이 아니라 정보이기도 하다는 관점에서 접근하겠습니다.

1. 대체 텍스트, 보이지 않을 때를 위한 말

이미지 태그에서 가장 중요한 속성은 파일 경로가 아니라 대체 텍스트입니다. 대체 텍스트는 그림을 보여줄 수 없는 상황에서 그림 대신 전달되는 말입니다. 그림 파일이 깨져서 안 뜰 때, 화면 낭독 프로그램이 그림을 소리로 바꿔야 할 때, 검색엔진이 그림의 내용을 파악해야 할 때 이 텍스트가 그림을 대신합니다.

대체 텍스트를 쓸 때는 그림이 전하는 의미를 문장으로 옮깁니다. 단순히 사진이라고 쓰는 것이 아니라, 그 사진이 무엇을 보여 주는지를 적습니다. 해변에서 노을을 바라보는 사람이라고 쓰면, 그림을 못 보는 사람도 그 장면을 머릿속에 그릴 수 있습니다. 그림의 겉모습이 아니라 그림이 하는 말을 옮기는 것이 핵심입니다.

모든 이미지에 설명이 필요한 것은 아닙니다. 순수하게 장식용인 이미지, 예를 들어 내용과 무관한 배경 무늬 같은 것은 대체 텍스트를 빈 값으로 둡니다. 빈 값으로 두면 화면 낭독 프로그램이 그 이미지를 조용히 건너뜁니다. 반대로 이 속성을 아예 빠뜨리면 프로그램이 파일 이름을 읽어 버려 소음이 됩니다.

여기서 중요한 구분이 있습니다. 의미가 있는 이미지에는 설명을 넣고, 장식용 이미지에는 빈 값을 넣습니다. 둘 다 이 속성 자체는 반드시 존재해야 합니다. 있고 없고가 아니라, 채우느냐 비우느냐의 선택인 것이죠. 저는 이미지를 넣을 때마다 이것이 정보인가 장식인가를 먼저 묻습니다.

대체 텍스트를 잘 쓰는 요령은 그 이미지를 전화로 누군가에게 설명한다고 상상하는 것입니다. 전화로는 그림을 보여줄 수 없으니 말로 전해야 합니다. 그때 자연스럽게 나오는 설명이 좋은 대체 텍스트입니다. 너무 장황하지도, 너무 무성의하지도 않은 딱 필요한 만큼의 말이 이상적입니다.

제가 대체 텍스트를 진지하게 챙기기 시작한 뒤로, 이미지가 많은 페이지의 검색 노출이 조금씩 좋아졌습니다. 검색엔진은 그림을 직접 보지 못하니 대체 텍스트로 그림을 이해하는데, 그 설명이 충실하면 이미지 검색에서도 잡히기 때문입니다. 접근성을 위한 정성이 검색에도 보답으로 돌아온 셈입니다.

2. 반응형 이미지, 화면에 맞는 그림 고르기

같은 이미지라도 작은 휴대폰과 큰 데스크톱에 똑같은 파일을 보내는 것은 낭비입니다. 휴대폰에는 작은 그림이면 충분한데 거대한 원본을 보내면 데이터도 낭비되고 속도도 느려집니다. 그래서 여러 크기의 그림을 미리 준비해 두고 브라우저가 화면에 맞는 것을 고르게 하는 방법이 있습니다.

이미지 태그에 여러 크기의 후보 목록과 각 후보의 실제 폭 정보를 함께 주면, 브라우저가 화면 크기와 화면 밀도를 따져 가장 알맞은 그림을 스스로 내려받습니다. 여기에 이 이미지가 화면에서 차지할 폭에 대한 힌트를 함께 주면 선택이 더 정확해집니다. 폭 정보를 줄 때는 이 힌트가 필수입니다.

단순히 크기만 바꾸는 것이 아니라, 화면 크기에 따라 그림의 구도 자체를 바꾸고 싶을 때도 있습니다. 큰 화면에서는 넓은 풍경 사진을, 작은 화면에서는 인물만 확대한 사진을 보여주는 식입니다. 이런 구도 변경이나 파일 형식 대체에는 그림을 여러 후보로 감싸는 전용 태그를 씁니다.

이 전용 태그 안에는 조건별 후보들을 나열하고, 맨 마지막에 어떤 조건에도 해당하지 않을 때를 위한 기본 이미지 태그를 둡니다. 브라우저는 위에서부터 조건을 따져 첫 번째로 맞는 후보를 고릅니다. 최신 형식을 먼저 두고 널리 지원되는 형식을 뒤에 두면, 지원하는 브라우저는 가벼운 최신 형식을, 아닌 브라우저는 안전한 기본 형식을 받습니다.

아래 예시는 해상도별로 그림을 자동 선택하는 이미지 태그입니다. 후보 목록과 폭 힌트가 함께 들어간 것에 주목하세요.

3. 지연 로딩과 성능

페이지에 이미지가 많으면 처음 열 때 그 모든 그림을 한꺼번에 내려받느라 속도가 느려집니다. 그런데 사용자가 처음 보는 것은 화면에 들어온 위쪽 일부뿐입니다. 아래쪽 이미지는 스크롤해 내려가야 보이니, 그때 가서 내려받아도 늦지 않습니다. 이 발상이 지연 로딩입니다.

이미지 태그에 지연 로딩을 지시하는 속성을 붙이면, 브라우저가 그 이미지를 화면에 가까워질 때까지 내려받지 않고 미룹니다. 화면 밖의 이미지 로딩을 미루니 초기 로딩이 가벼워지고 속도가 빨라집니다. 이미지가 많은 긴 페이지일수록 효과가 큽니다.

다만 여기에 함정이 하나 있습니다. 첫 화면에 보이는 가장 큰 대표 이미지에는 지연 로딩을 붙이면 안 됩니다. 그 이미지는 어차피 곧바로 보여야 하는데 로딩을 미루면 오히려 화면에 늦게 뜹니다. 지연 로딩은 화면 밖 이미지에만 붙이고, 첫 화면의 핵심 이미지는 제때 불러오게 두는 것이 옳습니다.

제가 이 함정에 빠진 적이 있습니다. 모든 이미지에 일괄로 지연 로딩을 붙였더니, 정작 첫 화면의 대표 이미지가 늦게 떠서 페이지가 느리게 느껴졌습니다. 성능 측정 지표도 나빠졌죠. 첫 화면 이미지만 예외로 두고 나서야 지표가 제자리를 찾았습니다. 좋은 도구도 잘못 쓰면 독이 된다는 교훈이었습니다.

이미지 해석을 비동기로 처리하도록 지시하는 속성을 함께 쓰면, 이미지 디코딩이 화면 그리기를 막지 않아 더 매끄럽습니다. 이런 속성들은 작은 차이 같지만 이미지가 많은 페이지에서는 체감할 수 있는 개선을 만듭니다.

결국 지연 로딩의 핵심은 지금 당장 필요한 것과 나중에 필요한 것을 구분하는 데 있습니다. 당장 보이는 것은 서둘러 불러오고, 나중에 보일 것은 미루는 것이죠. 이 구분만 지키면 성능과 사용자 경험을 함께 챙길 수 있습니다.

4. 크기 지정으로 레이아웃 지키기

이미지에서 크기 속성을 빠뜨리면 겪는 흔한 문제가 있습니다. 페이지가 처음 뜰 때 이미지가 아직 안 실려서 자리가 비어 있다가, 이미지가 도착하는 순간 갑자기 공간을 밀어내며 아래 내용이 덜컥 내려가는 현상입니다. 글을 읽으려던 사용자가 화면이 튀는 바람에 엉뚱한 곳을 누르기도 합니다.

이 튀는 현상을 레이아웃 이동이라고 부르며, 사용자 경험을 해치는 대표적인 문제로 꼽힙니다. 검색엔진도 이 지표를 페이지 품질의 일부로 봅니다. 그래서 이 튐을 막는 것은 사용성과 검색 양쪽에서 중요합니다.

해결책은 의외로 간단합니다. 이미지 태그에 가로 크기와 세로 크기를 미리 지정해 두는 것입니다. 그러면 브라우저는 이미지가 도착하기 전에도 그 자리를 얼마나 비워 둘지 알기에, 미리 공간을 확보해 둡니다. 이미지가 나중에 도착해도 이미 확보된 자리에 들어갈 뿐 아래 내용을 밀어내지 않습니다.

여기서 지정하는 크기는 화면에 보이는 최종 크기가 아니라 이미지의 원본 비율을 알려주기 위한 값입니다. 실제 화면에서의 크기는 스타일로 유연하게 조절하되, 비율 정보만 태그로 주면 브라우저가 그 비율대로 자리를 잡아 둡니다. 그래서 반응형으로 크기가 변해도 튐은 생기지 않습니다.

제가 이 크기 지정을 모든 이미지에 붙이기 시작한 뒤로, 페이지가 뜨는 동안 화면이 출렁이던 문제가 사라졌습니다. 특히 이미지가 많은 목록 페이지에서 효과가 컸습니다. 속성 두 개를 더 쓰는 작은 수고로 큰 안정감을 얻은 것입니다.

정리하면 이미지에는 항상 크기 정보를 함께 주는 것이 좋습니다. 레이아웃이 흔들리지 않게 하는 가장 값싼 방법이기 때문입니다. 대체 텍스트가 접근성의 기본이라면, 크기 지정은 안정성의 기본입니다.

5. 이미지를 넣을 때의 나의 순서

실무에서 이미지를 넣을 때 저는 늘 같은 순서를 밟습니다. 먼저 이 이미지가 정보인가 장식인가를 판단합니다. 정보라면 대체 텍스트에 의미를 담고, 장식이라면 빈 값으로 두어 화면 낭독 프로그램이 건너뛰게 합니다. 이 판단이 첫 단추입니다.

다음으로 크기 정보를 붙입니다. 원본의 가로세로 비율을 알려주는 값을 넣어 레이아웃 튐을 막습니다. 이 두 가지는 거의 모든 이미지에 예외 없이 적용하는 기본입니다.

그다음 이 이미지가 첫 화면에 보이는지 아래쪽에 있는지를 따집니다. 아래쪽이라면 지연 로딩을 붙이고, 첫 화면의 핵심 이미지라면 붙이지 않습니다. 이 구분을 잊으면 앞서 말한 함정에 빠지니 항상 의식적으로 확인합니다.

마지막으로, 이 이미지가 여러 화면 크기에서 쓰인다면 반응형 후보를 준비할지 판단합니다. 큰 대표 이미지처럼 크기 차이가 큰 경우에는 여러 후보를 두는 것이 값어치를 합니다. 작은 아이콘처럼 크기 차이가 미미하면 굳이 후보를 여럿 만들지 않습니다.

이 순서를 습관으로 만들고 나서, 저는 이미지 때문에 접근성이나 성능이 무너지는 일을 거의 겪지 않게 되었습니다. 이미지는 넣기 쉬운 만큼 대충 다루기도 쉬운데, 이 작은 절차만 지켜도 그 대충의 대가를 피할 수 있습니다.

대체 텍스트를 쓰다 보면 어디까지 설명해야 할지 애매한 경우가 많습니다. 저의 기준은 이렇습니다. 그 이미지가 사라졌을 때 문맥에서 빠지는 정보가 무엇인지를 생각하고, 딱 그만큼만 채웁니다. 주변 글에 이미 설명이 있는 이미지라면 대체 텍스트를 길게 쓸 필요가 없고, 이미지만이 전하는 정보가 있다면 그것을 빠짐없이 담습니다. 중복도 누락도 아닌 균형이 핵심입니다.

차트나 그래프처럼 정보가 많은 이미지는 특별히 주의합니다. 이런 이미지는 짧은 대체 텍스트만으로 다 담기 어렵습니다. 그래서 핵심 수치나 추세는 대체 텍스트에 요약하고, 자세한 데이터는 이미지 근처의 본문이나 표로 함께 제공합니다. 그림을 볼 수 없는 사람도 같은 정보에 닿을 수 있게 하는 것이 목표입니다. 그림은 표현 수단일 뿐, 정보 자체는 누구에게나 열려 있어야 합니다.

글자가 담긴 이미지는 되도록 피하려 합니다. 이미지 안에 중요한 문구를 넣으면 그 글자는 확대해도 흐릿해지고, 화면 낭독 프로그램도 읽지 못하며, 검색에도 잡히지 않습니다. 꼭 필요하다면 그 글자를 대체 텍스트에 그대로 옮겨 담습니다. 하지만 가능하다면 애초에 진짜 텍스트로 두고 스타일로 꾸미는 편이 모든 면에서 낫습니다.

이미지 형식 선택도 성능에 큰 영향을 줍니다. 같은 그림이라도 최신 형식으로 저장하면 화질은 유지하면서 용량이 크게 줄어듭니다. 사진에는 사진에 맞는 형식을, 단순한 도형이나 아이콘에는 그에 맞는 형식을 고르는 것이 좋습니다. 형식 하나만 바꿔도 페이지가 눈에 띄게 가벼워지는 경우가 많아서, 저는 이미지를 올리기 전에 형식과 용량을 항상 점검합니다.

이 모든 이야기를 관통하는 하나의 생각은 이미지를 장식이 아니라 정보로 대하는 태도입니다. 그림이 예쁘게 보이는 것도 중요하지만, 그 그림이 전하는 정보가 모든 사용자에게 닿는지가 더 중요합니다. 눈으로 보는 사람에게는 아름다움을, 볼 수 없는 사람에게는 같은 정보를 전하는 것, 그 둘을 함께 챙기는 것이 이미지를 제대로 다루는 일입니다.

이번 편에서는 이미지를 정보로 다루는 법을 살펴봤습니다. 다음 편에서는 여러 데이터를 행과 열로 정리하는 표로 넘어가겠습니다. 표는 잘 쓰면 복잡한 정보를 명료하게 전하지만, 잘못 쓰면 접근성을 크게 해치는 까다로운 요소이기도 합니다. 그림을 담았으니 이제 데이터를 정리할 차례입니다.