개발일지 — 2026년 6월 4일

프로젝트: 2-somin.github.io (포트폴리오 사이트)
작업자: 이소민
작업 시간: 2026-06-04

작업 개요

카카오톡 링크 공유 시 미리보기(Open Graph)가 올바르게 표시되도록 OG 메타데이터를 구성하고, 사이트 파비콘을 포트폴리오 브랜드에 맞게 새로 디자인하였다.

작업 상세

1. OG 메타데이터 설정 (_config.yml)

변경 전

title: "이소민 | UI/UX Designer"
description: "도예학과 출신 UI/UX 디자이너 이소민의 포트폴리오"
og_image:        # 비어 있음
og_description:  # 비어 있음

변경 후

title: "Product Designer 이소민"
description: "Product Designer 이소민의 포트폴리오. 사용자 경험을 섬세하게 설계합니다."
og_image: "og-image.png"
og_description: "Product Designer 이소민의 포트폴리오. 사용자 경험을 섬세하게 설계합니다."
locale: "ko_KR"

• 사이트 타이틀을 직함 중심으로 재정의
• og_image, og_description 필드 신규 입력
• locale을 ko_KR로 수정하여 카카오 크롤러 대응

2. OG 이미지 생성 (images/og-image.png)

• 사이즈: 1200 × 630px (카카오톡/SNS 권장 사이즈)
• 생성 방법: Node.js + sharp 라이브러리로 SVG → PNG 변환 (사진 미사용, 캔버스 드로잉)
• 디자인:
  • 배경: 다크 네이비 그라디언트 (#1a1a2e → #16213e)
  • 서브타이틀: UXUI / PRODUCT DESIGNER (골드 컬러 #c9a97a, 레터스페이싱)
  • 메인 이름: Lee Somin (세리프 폰트, 96px Bold, 흰색)
  • URL 표기: 2-somin.github.io
  • 좌측 골드 수직 accent bar, 원형 장식 요소 배치

디자인 수정 이력:

• 초안: 메인 텍스트 이소민 (한글), 서브타이틀 PRODUCT DESIGNER
• 최종: 메인 텍스트 Lee Somin (영문 세리프), 서브타이틀 UXUI / PRODUCT DESIGNER

3. 파비콘 리디자인 (images/favicon.*)

변경 전: Wikipedia 학술 아이콘 (파란색 졸업모 SVG)

변경 후: 브랜드 커스텀 파비콘

• 디자인: 이 글자, 다크 네이비 배경(#1a1a2e), 골드 텍스트(#c9a97a), 둥근 모서리
• 생성 파일:
  • favicon.svg
  • favicon-32x32.png
  • favicon-192x192.png
  • favicon-512x512.png
  • apple-touch-icon-180x180.png
• theme-color 메타태그: #ffffff → #1a1a2e

4. seo.html OG 태그 보완 및 버그 수정

4-1. OG 태그 누락 항목 추가

| 태그 | 수정 내용 | |——|———–| | og:type | article에만 적용되던 것을 일반 페이지에 website 기본값 추가 | | og:image | site.og_image 폴백 로직 추가 (페이지 헤더 이미지 없을 때) | | og:image:width/height | 1200, 630 명시 추가 | | og:locale | en → ko_KR | | og:description | name 속성 중복 제거, 조건 로직 개선 |

4-2. og:image URL 이중 prepend 버그 수정

버그 원인

{{ site.og_image | prepend: "/images/" | prepend: base_path | prepend: site.url }}

base_path가 이미 site.url을 포함하는 값(https://2-somin.github.io)인데, 뒤에 site.url을 한 번 더 prepend하여 URL이 다음과 같이 깨짐:

https://2-somin.github.iohttps://2-somin.github.io/images/og-image.png  ❌

수정 후

{{ site.og_image | prepend: "/images/" | prepend: base_path }}

https://2-somin.github.io/images/og-image.png  ✅

4-3. og:description 페이지 본문 오출력 수정

about.md 프론트매터에 description이 없어, Jekyll이 page.excerpt(본문 첫 문단)를 OG description으로 출력하던 문제. 프론트매터에 description 명시로 해결.

커밋 이력

변경 파일 목록

_config.yml
_includes/seo.html
_includes/head/custom.html
_pages/about.md
images/og-image.png        (신규)
images/favicon.svg
images/favicon-32x32.png
images/favicon-192x192.png
images/favicon-512x512.png
images/apple-touch-icon-180x180.png