안녕하세요! 방구석에서 코딩이라는 무기로 저만의 자본주의 파이프라인을 뚝딱뚝딱 지어 올리고 있는 1인 개발자입니다.
지난 7편에서 우리는 드디어 제 노트북 안에만 갇혀있던 코드를 Netlify를 통해 전 세계로 배포하는 감격스러운 순간을 맞이했습니다. 화면에 "Site is live!"라는 초록색 글씨가 떴을 때의 그 짜릿함은 정말 잊을 수가 없죠. 배포가 끝나자마자 저는 너무 신이 난 나머지, 새로 부여받은 제 웹사이트 주소를 복사해서 운영 중인 경제 블로그 에디터에 딱! 붙여넣고, 친구들이 있는 카카오톡 단톡방에도 자랑스럽게 전송했습니다. "야, 이거 내가 만든 파이어족 은퇴 계산기인데 한 번씩 써봐라!"
그런데 이게 웬일일까요? 화면에 나타난 건 제가 정성스럽게 디자인한 예쁜 파란색 계산기 화면이 아니었습니다. 그냥 회색 점선으로 된 텅 빈 네모 박스 안에 주소 글씨만 덩그러니 적혀있는, 아주 볼품없고 수상해 보이는 링크 카드가 떠버린 겁니다. 솔직히 제가 봐도 스팸 링크 같아서 절대 클릭하기 싫게 생겼더라고요. 오늘 8편에서는 이 칙칙한 링크에 생명력을 불어넣어 줄 마법의 기술, '오픈그래프(Open Graph) 태그'와 썸네일 적용기에 대한 피 튀기는 썰을 풀어보겠습니다.
링크의 명찰을 달아주자: Open Graph(OG) 태그란?
우리가 카카오톡이나 티스토리에 인터넷 주소를 복사해서 붙여넣으면, 이 플랫폼들의 수집 로봇들이 0.1초 만에 우리 웹사이트로 달려옵니다. 그리고는 "이 사이트 제목이 뭐지? 설명은 뭐라고 적혀있지? 대표 이미지는 어떤 걸 써야 예쁘게 보일까?" 하고 사이트를 뒤지기 시작하죠. 그런데 제가 만든 웹사이트에는 이런 로봇들을 위한 '명찰'이 달려있지 않았습니다. 로봇 입장에서는 와보긴 했는데 뭘 띄워줘야 할지 모르니 그냥 포기하고 텅 빈 회색 박스를 보여준 겁니다.
이 로봇들에게 정확한 정보를 친절하게 떠먹여 주는 명찰이 바로 'Open Graph(OG) 태그'입니다. 적용하는 방법은 아주 허무할 정도로 쉽습니다. 제 리액트 프로젝트 폴더에서 뼈대가 되는 index.html 파일을 엽니다. 그리고 <head> 태그 영역 안에 다음과 같은 마법의 코드 네 줄을 추가해 주면 끝입니다.
"로봇아! 이 사이트 제목(og:title)은 '올인원 배당 파이어족 은퇴 시뮬레이터'고, 설명(og:description)은 '내 사표 쓰는 날짜는 언제일까? 1초 만에 계산해 보세요'야. 그리고 제일 중요한 썸네일 이미지(og:image)는 저기 있는 저 사진을 가져다 쓰렴!"
이렇게 코드로 명찰을 꽉꽉 채워 달아주니 제 마음이 다 편안해지더라고요.
썸네일은 1.91:1 비율과 '어그로'가 생명입니다
코드는 준비되었으니 이제 링크 카드에 들어갈 진짜 예쁜 '이미지' 파일(og-image.png)을 만들 차례였습니다.
아무 사진이나 대충 넣으면 안 됩니다. 카카오톡이나 티스토리 링크 카드는 가로로 긴 직사각형 비율(보통 1200x630 픽셀, 약 1.91:1 비율)을 사용하거든요. 만약 정사각형 사진을 넣으면 위아래가 댕강 잘려나가서 아주 흉측해집니다.
그래서 저는 미리캔버스와 AI 이미지 생성 툴을 동원했습니다. 신뢰감을 주는 어두운 네이비 배경에, 돈을 상징하는 황금빛 동전과 상승하는 J커브 차트 그래픽을 화려하게 배치했죠. 하지만 그림만 예쁘다고 끝이 아닙니다. 한국 사람들은 링크를 볼 때 이미지를 분석하기보다는 '글씨'를 먼저 읽거든요. 그래서 이미지 좌측 상단 빈 공간에 아주 굵고 커다란 고딕체로 "내 사표 쓰는 날짜는 언제일까?"라는 아주 강력한 후킹(Hooking) 문구를 박아 넣었습니다.
이 이미지를 프로젝트의 최상위 public 폴더 안에 조심스럽게 집어넣었습니다. (주의! src 폴더에 넣으면 로봇이 못 찾습니다!)
최종 보스의 등장: "왜 배포했는데 안 바뀌어?!" (캐시의 늪)
자, OG 태그도 완벽하게 적었고 예쁜 썸네일 이미지도 폴더에 넣었습니다. 깃허브(Github)에 코드를 올리니 Netlify가 알아서 자동으로 다시 배포(Redeploy)까지 싹 마쳐주었죠.
가슴을 두근거리며 티스토리 에디터에 다시 제 주소를 붙여넣고 엔터를 쳤습니다! ...어? 그런데 여전히 텅 빈 회색 박스가 나오는 겁니다. 오타가 났나? 파일 경로가 틀렸나? 코드를 수십 번 다시 확인하고 인터넷 주소창에 이미지 경로를 직접 쳐봤더니 이미지는 화면에 아주 빵빵하게 잘 뜹니다. 그런데 왜 링크 카드만 안 변하는 걸까요?
여기서 저는 프론트엔드 개발자들의 혈압을 오르게 만드는 영원한 숙적, '서버 캐시(Cache)' 문제와 마주하게 됩니다.
알고 보니 티스토리와 카카오톡 로봇들은 아주 게으른 녀석들이었습니다. 제가 1시간 전에 아무것도 없는 빈 링크를 한 번 붙여넣었잖아요? 그럼 이 로봇들은 "아, 아까 가봤는데 저 사이트 썸네일 없었어!"라고 자기들 기억 장치(캐시)에 콱 박아버립니다. 제가 Netlify에 새 이미지를 올렸든 말든, 며칠 동안은 다시 방문조차 안 하고 옛날의 텅 빈 기억만 계속 우려먹으면서 보여주는 거죠.
천재적인 꼼수: 주소 끝에 물음표를 달아라 (?v=1)
이 고집불통 로봇들의 기억을 초기화하려면 카카오 디벨로퍼스에 들어가서 '초기화 도구'를 써야 하는데, 매번 그러기엔 너무 귀찮았습니다. 그래서 아주 천재적이고 간단한 꼼수를 하나 찾아냈죠.
티스토리에 제 링크를 붙여넣을 때, 주소 맨 끝에 아무 의미 없는 꼬리표를 하나 달아주는 겁니다. 원래 주소 뒤에 ?v=1 이라고 슬쩍 붙여서 엔터를 치는 거죠. (예: ...netlify.app/?v=1) 이렇게 하면 접속되는 실제 제 웹사이트는 100% 똑같은데, 티스토리 로봇은 "어? 주소 뒤에 뭔가 붙었네? 처음 보는 새로운 주소인가 보다! 당장 뛰어가서 새로 긁어와야지!" 하고 깜빡 속아 넘어갑니다. 엔터를 치는 순간, 로봇이 즉시 Netlify로 달려가서 방금 제가 올린 삐까뻔쩍한 썸네일과 제목을 싹 긁어왔고, 마침내 화면에 제가 원하던 완벽한 링크 카드가 찬란하게 떠올랐습니다!
그 완벽한 썸네일을 품은 링크를 카톡방에 다시 올리자마자, "오, 이거 뭐야?" 하면서 친구들의 클릭이 폭발하기 시작했습니다. 아무리 로직을 잘 짜고 좋은 기능을 만들어도, 결국 사람을 들어오게 만드는 마케팅과 포장지(OG 태그)가 없으면 아무 소용이 없다는 걸 뼈저리게 느낀 하루였습니다.
자, 이렇게 해서 배포와 링크 꾸미기까지 다 끝난 줄 아셨죠? 아닙니다. 사실 배포하는 과정에서 아주 끔찍한 에러 하나가 제 발목을 잡았었거든요. 다른 분들도 100% 겪으실 그 에러! 다음 9편에서는 화면을 시뻘겋게 물들였던 공포의 Vite 배포 에러,[올인원 배당 파이어족 은퇴 시뮬레이터 메이킹 로그 #09] Failed to resolve /assets/... 완벽 해결 가이드 로 찾아오겠습니다. 트러블슈팅의 진수를 보여드릴 테니 다음 편도 꼭 기대해 주세요!
[올인원 배당 파이어족 은퇴 시뮬레이터 메이킹 로그 #09] Vite 배포 에러 "Failed to resolve /assets/..."
안녕하세요! 방구석에서 코딩이라는 무기로 저만의 자본주의 파이프라인을 개척하고 있는 1인 개발자입니다.지난 7편과 8편에서 제 노트북 속에 있던 코드를 전 세계로 배포하고, 예쁜 썸네일까
code-bricks.tistory.com
