이번 편의 결과물: 포트폴리오 링크를 메신저에 붙여넣으면 제목·설명·이미지가 있는 미리보기가 뜨고, 브라우저 메뉴에 “홈 화면에 추가”가 나타난다. · 다루는 개념: Open Graph 태그, theme-color, link rel="manifest"
이 편에서 만드는 파일
web-practice/portfolio/
├── index.html ~ (head OG 태그, theme-color, manifest 링크)
├── projects.html ~ (head OG 태그, theme-color, manifest 링크)
├── contact.html ~ (head OG 태그, theme-color, manifest 링크)
└── manifest.webmanifest + (PWA 설치 정보)개념 정리
Open Graph는 페이스북이 처음 만들고 대부분의 메신저·SNS가 따라 쓰는 관례다. HTML 표준 API가 아니라 <meta property="og:..."> 태그를 정해진 이름으로 채우면 각 플랫폼이 그것을 읽어 미리보기 카드를 그린다. 표준 API가 아니므로 Baseline 배지 대상이 아니지만, 주요 플랫폼이 폭넓게 소비하는 사실상의 표준이다.
| 태그 | 값 | 역할 |
|---|---|---|
og:title | 페이지 제목 | 카드 제목 |
og:description | 한두 문장 | 카드 설명 |
og:image | 절대 URL | 카드 대표 이미지(권장 1200×630) |
og:url | 정식 URL | 카드가 가리키는 정본 주소 |
og:type | website, profile 등 | 콘텐츠 종류 |
theme-color는 모바일 브라우저의 주소창·작업 전환 화면 색을 지정하는 <meta> 태그다. <link rel="manifest">는 PWA(Progressive Web App, 프로그레시브 웹 앱) 매니페스트 JSON 파일을 연결해, 사용자가 홈 화면에 사이트를 앱처럼 추가할 수 있게 한다. 매니페스트에는 앱 이름, 아이콘, 시작 URL, 표시 모드(display)를 적는다. iOS Safari는 매니페스트의 설치 관련 필드 일부를 다르게 처리하므로, 완전한 iOS 지원이 필요하면 apple-touch-icon 같은 애플 전용 태그를 추가로 검토해야 한다. 이 과목에서는 매니페스트 기본기만 다룬다.
실습
1. manifest.webmanifest 만들기
{
"name": "Zeno Kim 포트폴리오",
"short_name": "Zeno Kim",
"description": "프론트엔드 개발자 Zeno Kim의 포트폴리오 사이트",
"start_url": "/index.html",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#0969da",
"icons": [
{
"src": "favicon.svg",
"sizes": "any",
"type": "image/svg+xml"
}
]
}background_color와 theme_color는 css/tokens.css의 --color-bg, --color-primary 값과 맞춘다.
2. index.html head에 OG·theme-color·manifest 넣기
<!-- index.html -->
<head>
<!-- ...기존 meta·title·stylesheet·리소스 힌트 유지 -->
<meta name="theme-color" content="#0969da" />
<link rel="manifest" href="manifest.webmanifest" />
<meta property="og:type" content="profile" />
<meta property="og:title" content="Zeno Kim — 웹을 만드는 개발자" />
<meta
property="og:description"
content="HTML·CSS·JavaScript로 누구나 쓸 수 있는 화면을 만드는 개발자 Zeno Kim의 포트폴리오입니다."
/>
<meta property="og:image" content="https://zenokim.example/images/og-image.svg" />
<meta property="og:url" content="https://zenokim.example/index.html" />
</head>og:image와 og:url은 절대 URL이어야 한다. 상대 경로를 쓰면 메신저마다 처리 방식이 달라 미리보기가 깨질 수 있다.
3. projects.html과 contact.html에도 각 페이지에 맞는 OG 태그 넣기
<!-- projects.html -->
<meta name="theme-color" content="#0969da" />
<link rel="manifest" href="manifest.webmanifest" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Zeno Kim — 프로젝트" />
<meta property="og:description" content="Zeno Kim이 직접 만들고 배운 프로젝트 6개를 모았습니다." />
<meta property="og:image" content="https://zenokim.example/images/og-image.svg" />
<meta property="og:url" content="https://zenokim.example/projects.html" />contact.html도 같은 형식으로 og:title을 “Zeno Kim — 연락”, og:description을 폼 안내 문구에 맞춰 채운다.
4. 실행
npx serve web-practice/portfolio5. 확인
- Facebook Sharing Debugger 나 메신저 링크 미리보기 기능에 배포된 URL을 붙여넣으면 제목·설명·이미지가 뜬다(로컬 서버 주소는 외부에서 접근할 수 없으므로 실제 확인은 배포 후에 한다).
- Chrome 개발자 도구의 Application 탭 → Manifest에서
manifest.webmanifest가 오류 없이 읽힌다. - Chrome 주소창 오른쪽에 설치 아이콘이 나타나거나, 메뉴에 “앱 설치”/“홈 화면에 추가”가 보인다.
- 모바일 브라우저에서 열면 주소창 색이
theme-color로 지정한 파란색으로 바뀐다.
직접 해보기
og:image를 상대 경로(images/og-image.svg)로 바꿔서 Sharing Debugger에 다시 넣어 보고 무슨 차이가 있는지 확인한다.- 매니페스트의
display를standalone대신browser로 바꿔 보고, 설치 후 실행했을 때 주소창이 보이는지 비교한다.
답 확인
- 상대 경로는 메신저 서버가 어떤 기준 URL로 해석해야 할지 알 수 없어 이미지가 아예 안 뜨거나 깨진 링크로 표시되는 경우가 많다. 항상 절대 URL을 쓴다.
display: browser는 일반 브라우저 탭처럼 주소창이 보이는 채로 열리고,standalone은 주소창 없이 독립된 앱처럼 열린다. 포트폴리오처럼 앱 느낌을 주고 싶으면standalone이 맞다.
자주 하는 실수
| 증상 | 원인 | 고치는 법 |
|---|---|---|
| 메신저에 미리보기가 안 뜬다 | og:image가 상대 경로다 | 절대 URL로 바꾼다 |
| 세 페이지가 전부 같은 제목으로 공유된다 | og:title을 index.html에서만 쓰고 복사하지 않았다 | 페이지마다 제목·설명을 그 페이지에 맞게 채운다 |
| 매니페스트가 인식되지 않는다 | link rel="manifest"의 경로가 틀렸거나 JSON 문법 오류가 있다 | 개발자 도구 Application 탭에서 오류 메시지를 확인한다 |
| iOS에서 설치 아이콘이 다르게 보인다 | 매니페스트만 있고 apple-touch-icon이 없다 | iOS까지 신경 쓴다면 별도의 애플 전용 태그를 추가한다(이 편의 범위 밖) |