작품으로 마무리 — 제목·favicon·공유 미리보기 | 바이브 코딩 커리큘럼

이 챕터를 끝내면 브라우저 탭에 내 이름·아이콘이 바로 뜨고, 나중에 페이지를 인터넷에 올렸을 때 카카오톡·슬랙 미리보기 카드까지 자동으로 이쁘게 떠줄 준비를 마쳐둔 상태가 돼요. (OG 미리보기는 배포 후에 보여요.)

왜 이 세 가지가 중요한가요?

지금 만든 페이지를 누군가에게 링크로 보내면 상대방은 세 곳에서 첫인상을 받아요.

브라우저 탭 — 탭이 여러 개 열려 있을 때 내 페이지가 어디 있는지 알려줘요. 기본값은 index.html 같은 파일명이라 무의미해요.
favicon — 탭 왼쪽의 작은 아이콘. 없으면 빈 사각형이 뜨고 미완성처럼 보여요.
OG(Open Graph) 미리보기 — 카카오톡·슬랙·트위터 등에서 링크를 공유할 때 자동으로 펼쳐지는 제목 + 설명 + 이미지 카드예요.

세 가지 모두 HTML <head> 안의 태그 몇 줄로 해결돼요. Codex한테 한 번에 부탁하면 돼요.

Codex한테 이렇게 말해보세요

아래 메시지를 그대로 복사하되, [ ] 안의 내용만 내 정보로 바꿔서 보내세요.

현재 index.html의 <head> 부분을 다음 내용으로 업데이트해 줘:
1. <title> 태그를 "[내 이름 또는 페이지 제목]"으로 설정
2. favicon은 텍스트 이모지 [원하는 이모지, 예: 🎨]를 SVG favicon으로 만들어서 연결
3. OG 태그 추가:
   - og:title: "[페이지 제목]"
   - og:description: "[한 줄 소개, 50자 이내]"
   - og:image: 페이지 배경색과 제목 텍스트만 있는 1200×630 SVG를 og-image.svg로 만들고 연결
   - og:url: "[배포 후 실제 URL, 아직 모르면 placeholder로 둬도 됨]"

Codex가 index.html의 <head>를 수정하고 og-image.svg 파일을 새로 만들어 줄 거예요.

결과 확인은 Codex 앱 내장 브라우저가 아니라 진짜 브라우저(Chrome·Safari 등)에서 해야 해요. 내장 브라우저는 자체 탭 UI가 따로 있어서 페이지의 <title>과 favicon이 보이지 않아요.

방금 수정한 index.html을 Chrome(또는 Safari)에서 새 창으로 열어줘.

Codex가 시스템 기본 브라우저로 파일을 띄워 줘요. 새로 열린 브라우저 탭 위쪽에 내가 지정한 제목과 이모지 favicon이 떠 있으면 정상 적용된 거예요.

OG 미리보기는 어떻게 확인하나요? 카카오톡·슬랙 미리보기는 페이지가 인터넷 주소(URL)에 올라가 있어야 진짜 동작해요. 지금은 코드 안에 메타 정보가 잘 들어갔는지 정도만 확인하면 충분하고, 실제 미리보기 카드는 GitHub 트랙에서 페이지를 배포한 뒤 카카오톡·슬랙에 링크를 붙여 넣어보면 바로 보여요.

C1 트랙 완주 — 다음은 어디로?

여기까지 오면 디자인 톤·이미지·아이콘·새 섹션에 탭 제목·favicon·OG 메타 정보까지 갖춘 완성된 정적 웹페이지가 손에 있어요. 이제 다음 갈림길은 세 갈래예요.

GitHub 트랙 — 이 페이지를 인터넷에 올려서 친구한테 링크로 보내고 싶다면. 계정 만들기부터 GitHub Pages 배포, 변경 사항 저장·되돌리기까지 다뤄요.
C2 자동화 트랙 — 반복 작업을 스크립트로 자동화해서 본업 시간을 되찾고 싶다면.
C4 챗봇 트랙 — 내 서비스에 AI 대화 기능을 붙이고 싶다면.

어느 트랙이든 지금까지 익힌 '자연어로 Codex에게 위임하기' 방식 그대로 이어가면 돼요.