발행일

커밋하고 4분 뒤 Revert, 한 시간 동안 "파일 복원" 넷 — 카카오 공유 이미지가 안 뜨던 저녁

커밋하고 4분 뒤 Revert, 한 시간 동안 "파일 복원" 넷

이 글은 2026년 9월에 당시 커밋 이력을 다시 보며 정리한 것입니다. 날짜는 작업한 날 기준입니다.

직짱건강 설문 결과 화면에는 카카오톡 공유 버튼이 있습니다. 2월 25일에 만들 때 공유 카드의 이미지를 이렇게 적어 뒀어요.

// todo : 온라인 환경에서만 이미지를 받을 수 있습니다.
imageUrl: '/Logo.png',

주석대로라면 로컬에서는 안 뜨는 걸 알고 배포 뒤로 미뤄 둔 상태였습니다. 3월 8일 저녁에 그걸 잡으려다 커밋이 여섯 개 났습니다.

6723d3a 21:17 [24-03-08] 공유하기 등 수정 fix
0be14ef 21:21 Revert "[24-03-08] 공유하기 등 수정 fix"
91c7cde 21:31 [24-03-08] 파일 오류 수정
194d0ca 21:51 [24-03-08] 파일 오류 수정 2173655c 21:54 [24-03-08] 파일 복원
f218ae0 22:18 [24-03-08] 카카오 파일 복원

첫 커밋에 넷을 섞었고, 4분 뒤 GitHub에서 되돌렸다

첫 커밋은 4개 파일 +46/−53입니다. 공유 이미지 주소만 바꾼 게 아니었어요.

  • next.config.jsbasePath: process.env.NEXT_PUBLIC_URL 추가
  • 공유 이미지 주소를 '/Logo.png'에서 https://jop-jjang-health-frontend.vercel.app/Logo.png
  • 마이페이지 기본 이미지 경로를 /assets/...에서 /assets/myPage/...
  • 찜 화면의 병원 상세 조회를 forEach 안에서 setState를 누적하던 것에서 Promise.all

4분 뒤 Revert 커밋이 있습니다. 저자가 GitHub noreply 주소이고 커미터가 GitHub이라, 터미널이 아니라 GitHub 화면의 Revert 버튼을 누른 것으로 보입니다. 왜 되돌렸는지는 커밋에 없어요. 다만 basePath에 URL 전체를 넣으면 Next는 그 값을 경로 접두어로 쓰기 때문에 모든 페이지 주소가 깨집니다. 되돌린 뒤 다시 올린 커밋에는 basePath가 없습니다.

이미지 주소를 절대 → 상대 → 절대로 오갔다

Revert 이후 네 커밋의 KakaoShareButton.tsx diff만 모으면 이렇습니다.

 // 91c7cde 21:31
-				imageUrl: '/Logo.png',
+				imageUrl: 'https://jop-jjang-health-frontend.vercel.app/Logo.png',

 // 194d0ca 21:51
-				imageUrl: 'https://jop-jjang-health-frontend.vercel.app/Logo.png',
+				// todo : 온라인에서만 작동 해야하는데 이상하게 안됨
+				imageUrl: 'Logo.png',

 // f218ae0 22:18
-				imageUrl: 'Logo.png',
+				imageUrl: 'https://jop-jjang-health-frontend.vercel.app/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FLogo.dd161765.png&w=128&q=75',

배포 도메인을 붙인 절대 경로가 안 되자 "온라인에서만 작동 해야하는데 이상하게 안됨"이라고 적고 상대 경로로 돌아갔고, 그것도 안 되자 배포된 화면에서 실제로 로고가 그려지는 _next/image 주소를 붙였습니다. 브라우저에서 복사해 온 것으로 보입니다. 마지막 것이 됐고, 지금도 그 주소 그대로입니다.

왜 절대 경로도 안 됐나

이 글을 쓰며 저장소를 다시 보고 안 것입니다. 로고 파일은 public/Logo.png가 아니라 public/assets/Logo.png에 있었어요. 그러니 https://.../Logo.png는 404였습니다. "이상하게 안됨"이 아니라 파일이 그 자리에 없었던 겁니다. 그날 그 주소를 브라우저에 직접 쳐 봤다면 바로 알았을 텐데, 그 기록은 없습니다.

상대 경로 'Logo.png'가 안 되는 이유는 따로 있습니다. 카카오 공유 카드의 이미지는 사용자의 브라우저가 아니라 카카오 쪽에서 가져가 카드에 그립니다. 카카오 쪽에서 열 수 있는 절대 주소여야 하고, /Logo.pngLogo.png는 카카오 서버 입장에서 어디를 가리키는지 정할 수 없어요. 2월의 주석 "온라인 환경에서만"은 반쯤 맞았습니다. 온라인이어야 하는 건 맞는데, 절대 주소여야 한다는 조건이 빠져 있었어요.

마지막에 붙인 _next/image?url=...Logo.dd161765.png 주소는 되긴 하지만 빌드 산출물의 경로입니다. 파일 이름의 해시가 로고 파일 내용에서 나오니 로고를 바꾸면 주소가 죽습니다.

찜 화면은 같은 저녁에 한 번 더 뒤집혔다

여섯 커밋 중 셋이 Like/index.tsx를 건드렸습니다. 21:54 커밋은 찜 목록을 받아 오는 useEffect를 통째로 지웠고, 22:18 커밋은 그걸 initializeHospitalInfo라는 이름으로 다시 넣었어요. 저녁 전체를 한 diff로 보면 +45/−36이고, 남은 변화는 forEach 안에서 setHospitalInfo를 누적하던 것을 Promise.all로 모아 한 번에 넣는 것 하나입니다.

검증

그날 확인한 것.

  • 배포된 화면에서 카카오톡 공유를 눌러 카드에 로고가 뜨는 것을 봤을 겁니다. 마지막 커밋 뒤로 공유 이미지 커밋이 없다는 것이 근거의 전부입니다.

이 글을 쓰며 확인한 것.

  • 여섯 커밋의 시각·저자·커미터는 git log --format='%h %ci %an %cn'으로, Revert가 GitHub 화면에서 된 것은 커미터 GitHub으로 판단했습니다.
  • 로고 파일 위치는 git ls-tree f218ae0으로, 현재 imageUrl이 그날 마지막 값 그대로인 것은 git grep으로 확인했습니다.
  • 저녁 전체의 순변화 +45/−36은 git diff 6723d3a^ f218ae0 --stat입니다.
  • 카카오 쪽에서 이미지를 가져간다는 설명은 지금의 이해이고, 그날 공유 API 문서를 봤는지는 기록이 없습니다.

남은 것 · 한계

  • 한 커밋에 네 가지를 넣고, 되돌리고, 조각내서 다시 올렸습니다. 무엇이 문제였는지 커밋 단위로 알 수 없게 된 게 그날 저녁의 가장 큰 비용이에요. 커밋 제목이 "파일 오류 수정"·"파일 복원"이라 나중의 저도 diff를 열어야 했습니다.
  • 주소가 안 되면 주소를 직접 열어 보는 것을 안 했습니다. 404 하나면 끝날 일이었어요.
  • 빌드 해시가 든 주소가 지금도 코드에 있습니다. 로고를 바꾸는 순간 공유 카드 이미지가 깨지는데, 그 위험을 아는 사람이 저장소에 없습니다.
  • 여섯 달 뒤 TripTune에서도 한 저녁에 메서드를 세 번 바꾸고 이틀 사이에 axios를 두 번 걷어냈습니다. 바꾸고 보고 또 바꾸는 방식은 그때까지 그대로였어요.

관련 글: 직짱건강 — 백엔드를 기다리지 않고 설문 인터페이스를 먼저 완성한 방법 · 검색은 GET, 목록은 POST · axios를 걷어냈다가 이틀 만에 되돌렸다가 다시 걷어냈다