OG 이미지가 제대로 미리보기되지 않을 때

소셜 미디어에 링크를 공유했을 때 OG 이미지가 제대로 안 보이는 경험이 많다. 카카오톡 미리보기, 페이스북 공유, 트위터 카드처럼 플랫폼마다 캐시 시간이 다르고, 내 로컬에서 됐다고 배포되는 게 아니기 때문이다.

혼자 개발하다 보니 확인한 값과 실제 바꾼 값을 따로 남기는 습관이 생겼다. 같은 문제가 반복되면 이전 기록이 있으면 훨씬 빠르게 처리된다.

문제의 경계 먼저 정하기

컨테이너 작업에서는 로컬과 운영의 차이가 자주 숨어 있다. Docker로 배포한 상황이라면:

• 로컬 개발 서버에서 메타태그가 정상인지
• 실제 배포된 이미지가 접근 가능한지
• DNS와 포트 매핑이 맞는지

이 세 가지를 먼저 정확히 분리해야 한다.

먼저 확인할 증거들

화면만 보고 판단하면 놓치는 부분이 많다. 다음을 먼저 모아보자:

# 1. 실제 컨테이너가 띄워진 상태 확인
docker ps

# 2. 로그로 에러 유무 확인
docker logs --tail=100 service-name

# 3. 환경변수와 포트 매핑 확인
docker inspect service-name

• 먼저 볼 값: 포트 매핑이 실제로 작동하는지
• 비교할 값: 정상이던 때 컨테이너 상태
• 남겨둘 기록: 명령어 출력, HTTP 응답 코드, 수정한 설정

포트 매핑이 헷갈리기 쉬운 이유

많은 경우 포트 매핑이 애매하면 다른 부분을 고쳐도 결과가 바뀌지 않는다. OG 이미지 경로가 상대 경로라면?

/ (root)
├── public/
│   └── og.png

docker-compose에서 포트가 8080:3000이면 실제 URL은 http://localhost:8080/og.png여야 한다. 내부 프로세스는 :3000을 보지만, 외부 미리보기는 :8080으로 접근한다.

실제 검증 과정

1. 로컬 개발 서버에서 curl http://localhost:3000/ 로 메타태그 확인
2. 배포 환경에서 실제 이미지 URL 응답 코드 확인 (404인지, 301인지)
3. 카카오톡 같은 플랫폼에서 "미리보기 초기화" → 다시 공유

이 순서로 하면 대부분의 OG 문제는 빠르게 찾을 수 있다.

다음 번을 위해 남겨둘 기록

비슷한 증상이 나올 때 대비해 간단하게라도 기록해두자:

• "포트 매핑 변경했음" → 어떤 포트를 어떻게 변경
• "이미지 경로 수정" → 절대 경로 vs 상대 경로
• "플랫폼 캐시 초기화" → 어느 플랫폼에서 얼마나 기다렸는지

이렇게 작은 확인을 남겨두면 다음 문제는 훨씬 짧게 처리할 수 있다.