한국어 페이지와 영어 페이지를 각각 열어 제목만 읽으면 둘 다 완성된 것처럼 보일 수 있습니다. 그러나 영어 버튼이 영어 홈으로 돌아가거나, 두 URL에 한국어 본문이 들어가거나, 대표 이미지만 있고 글 안의 사진은 깨져 있을 수 있습니다. 이 글은 특정 고객사 작업의 성과 보고가 아닙니다. 작은 팀이 한 주제를 두 언어로 공개할 때 사용할 수 있는 배포 검수 방법입니다.
검수는 편집 화면에서 끝내지 않습니다. 로컬 파일은 의도를 보여주고, 배포된 페이지는 방문자가 실제로 받는 결과를 보여줍니다. 둘이 다를 수 있다는 전제에서 출발합니다. 특히 영어판은 한국어판의 문장을 하나씩 바꾸는 파일이 아니라, 영어 독자가 같은 문제를 이해하고 다음 행동을 정할 수 있도록 별도로 편집한 글이어야 합니다.
두 주소가 모두 글을 가리키는가
먼저 한 주제에 대응하는 한국어 URL과 영어 URL을 종이에 나란히 적습니다. 목록 카드, 글의 제목, 언어 선택 버튼, 검색 엔진에 전달할 주소가 그 쌍을 일관되게 가리켜야 합니다. 영어 목록에서 글을 누르면 한국어 상세로 넘어가는 상태는 영어 상세가 발행된 상태가 아닙니다. 목록의 설명만 번역됐는지, 상세 본문도 실제로 존재하는지 따로 확인해야 합니다.
정적 파일 기반 사이트라면 두 언어의 글 파일이 존재하는지와 해당 언어의 상세 경로가 그 파일을 읽는지가 별개의 점검 항목입니다. 파일을 추가해도 경로가 없으면 공개 주소는 404가 됩니다. 경로를 만들어도 잘못된 디렉터리를 읽으면 두 언어에 같은 본문이 나타납니다. 목록, 상세, 언어 전환을 한 묶음으로 검수해야 하는 까닭입니다.
브라우저 주소창에 두 URL을 직접 입력해 봅니다. 한국어 글에서 EN을 눌러 영어 글로, 영어 글에서 한국어를 눌러 원래 글로 돌아옵니다. 다른 주제나 홈으로 이동한다면 링크를 성공으로 세지 않습니다. 언어를 바꾼 뒤에는 제목과 날짜, 본문 첫 단락을 읽습니다. 전환 버튼의 글자만 바뀌었다면 번역 페이지가 아닙니다.
자연광이 드는 책상에서 인쇄한 원고와 노트를 검토하는 손.원본 전체 보기
언어 표시는 본문을 대신하지 않는다
hreflang은 서로 대응하는 언어별 URL을 검색 엔진에 알리는 표지입니다. Google의 다국어 페이지 가이드는 각 언어 페이지가 자기 자신과 다른 언어 페이지를 함께 가리키도록 안내합니다. 한쪽에만 링크를 넣거나 아직 존재하지 않는 영어 주소를 넣는 방식으로는 쌍을 완성했다고 볼 수 없습니다. 한국어와 영어 페이지의 실제 응답을 읽어 상호 표기가 있는지 확인합니다.
각 페이지의 canonical은 그 페이지의 공개 주소를 가리키는지도 봅니다. 영어판이 한국어판을 canonical로 선언하면 독립적인 영어 글을 제공하려는 의도와 어긋날 수 있습니다. 여기서 핵심은 검색 결과 순위를 예측하는 일이 아닙니다. 페이지가 스스로 무엇이며 어느 언어의 짝을 갖는지 일관되게 말하는지 확인하는 일입니다. 검색 콘솔의 제출이나 사이트맵 노출을 색인 확정으로 보고하지도 않습니다.
화면에 보이는 언어와 문서가 선언한 언어도 맞아야 합니다. W3C의 WCAG 2.2 언어 기준 설명은 페이지의 주된 언어를 프로그램이 판별할 수 있어야 한다고 설명합니다. 영어 본문을 올려도 문서의 언어가 한국어로 남아 있으면 보조 기술이 그 글을 잘못 읽을 수 있습니다. 페이지의 lang 속성과 실제 본문 언어를 함께 확인하고, 문장 일부만 다른 언어라면 그 구간의 표기까지 살핍니다.
제목과 요약도 언어별로 직접 읽습니다. 탭 제목은 영어인데 공유 미리보기 설명은 한국어일 수 있습니다. 목록 카드의 요약이 본문과 다른 약속을 하는지도 확인합니다. 영어판에서 표현을 고치며 사실이나 조건을 바꿨다면 단순 번역 차이가 아닙니다. 두 편의 정보가 같은 주제와 근거를 공유하되 각각의 독자에게 자연스럽게 읽혀야 합니다.
본문 이미지 두 장은 어디에 있는가
대표 이미지 한 장은 본문 사진 두 장이 아닙니다. 각 언어의 공개 글 안에서 서로 다른 사진이 실제로 렌더링되는지 확인합니다. 파일 경로만 적혀 있거나 편집 화면에 미리보기만 남아 있는 상태는 통과가 아닙니다. 두 번째 사진이 본문 하단에 있다면 그곳까지 내려가 로드 결과를 봅니다. 모바일 연결이 느릴 때 늦게 나타나는 사진도 있으므로 이미지의 로딩이 끝난 뒤 판단합니다.
이미지의 장면과 설명은 글의 근거를 과장하지 않아야 합니다. 스톡 사진이나 생성 이미지를 고객사의 회의 또는 자체 실험 현장으로 소개하면 실제 기록으로 오해할 수 있습니다. 이 글의 두 이미지는 원고 검토와 화면 확인 장면을 실사 필름 느낌으로 새로 생성했습니다. 실제 프로젝트를 촬영한 사진은 아닙니다. 외부 사진을 사용하는 글이라면 원본의 사용 조건을 확인하고 저작자와 필요한 라이선스 표기를 남깁니다.
대체 텍스트는 파일 이름이나 문단 전체를 되풀이하는 자리가 아닙니다. 사진이 글에서 맡는 역할을 짧게 설명합니다. W3C의 이미지 대체 텍스트 결정 안내는 장식인지 정보를 전달하는지, 링크의 기능을 설명해야 하는지에 따라 대체 텍스트를 달리 정하도록 돕습니다. 출처 표시는 대체 텍스트로 숨기지 않고 독자가 볼 수 있는 위치에 둡니다.
창가 공유 작업 공간에서 노트북과 휴대전화 화면을 확인하는 사람.원본 전체 보기
작은 화면에서 다시 읽는다
데스크톱에서 멀쩡한 글도 좁은 화면에서는 다른 문제가 생깁니다. 긴 영어 단어가 본문 폭을 밀어내고, 두꺼운 표가 옆으로 튀어나오고, 세로로 긴 사진의 중요한 부분이 카드의 크롭에 잘릴 수 있습니다. 한국어판이 통과했다고 영어판까지 통과한 것은 아닙니다. 제목의 줄바꿈, 본문 행간, 링크의 누르기 쉬운 간격, 사진의 캡션을 두 언어 각각에서 확인합니다.
본문 폭은 충분히 좁게 유지하되 사진은 컨테이너보다 커지지 않도록 합니다. web.dev의 반응형 이미지 안내는 이미지의 고유 크기가 작은 화면을 넘칠 수 있으므로 컨테이너 폭에 맞춰 제한할 것을 설명합니다. 화면을 좁혔을 때 좌우 스크롤이 생겼다면 먼저 어느 요소가 넘치는지 찾습니다. 전체 페이지에 overflow: hidden을 붙여 문제를 가리는 것과는 다릅니다.
사진의 용량도 확인합니다. 작은 본문 이미지에 원본의 수천 픽셀 파일을 그대로 보낼 필요는 없습니다. 이 글에서는 생성한 원본을 본문 폭에 맞게 줄여 WebP 파일로 저장했습니다. 외부 사진을 최적화할 때도 필요한 출처와 라이선스 표기는 유지합니다. 사진의 정당한 사용과 실제 화면의 로딩은 같은 검수표에 놓여야 합니다.
배포 완료와 글 공개는 다르다
로컬 빌드가 통과해도 실제 배포가 아직 처리 중일 수 있습니다. 저장소의 커밋, 배포 서비스의 Production Ready, 공개 도메인의 응답을 서로 다른 확인 단계로 둡니다. Vercel의 환경 설명에서도 Preview는 시험과 협업용, Production은 사용자에게 제공되는 배포로 구분됩니다. Preview 주소에서 글을 읽었다고 공개 도메인까지 검증한 것은 아닙니다.
배포 뒤에는 공개 도메인의 두 URL에서 제목과 날짜, Work 분류, 본문 길이, 출처 링크, 사진 두 장을 다시 확인합니다. 링크를 눌러 원자료가 열리는지 살피고, 영어 버튼이 영어 본문으로 가는지 재확인합니다. 가능하면 넓은 화면과 좁은 화면을 모두 봅니다. 이미지 파일이 응답만 하고 화면에는 안 보이는 경우도 있어 실제 DOM과 렌더링을 함께 읽습니다.
이 순서에서는 한쪽만 먼저 게시됐을 때 상태를 숨기지 않습니다. 영어 글의 경로가 실패했다면 한국어 글까지 발행 완료라고 보고하지 않습니다. 두 편이 모두 확인되기 전에는 다음 주제로 넘어가지 않는 편이 안전합니다. 배포 서비스가 Ready라고 표시해도 공개 페이지가 이전 버전이면 원인부터 찾아야 합니다. 반대로 편집기의 일시적 오류만 보고 새 글을 다시 밀어 넣으면 중복 페이지가 생길 수 있습니다.
검수표의 마지막 줄에는 결과를 남깁니다. 두 URL, 확인한 배포의 커밋, 각 언어의 제목과 본문 분량, 사진의 원본·권리, 모바일 확인 여부, 남은 문제를 적으면 됩니다. 이 기록은 홍보 문구가 아니라 다음 배포 때 같은 실수를 반복하지 않기 위한 작업 메모입니다. 두 주소가 실제로 열리고 서로를 가리키는지까지 기록한 뒤 작업을 닫습니다.
