JSON-LD(JavaScript Object Notation for Linked Data)

JSON-LD(JavaScript Object Notation for Linked Data)는 구조화된 데이터를 표현하기 위한 자바스크립트 기반의 형식입니다. 쉽게 말해, **"검색엔진이나 AI 에이전트에게 우리 웹사이트의 내용을 그들이 이해할 수 있는 언어로 번역해 주는 명세서"**라고 이해하시면 됩니다.

1. JSON-LD의 주요 용도

① 검색 결과 최적화 (Rich Snippets)

구글이나 네이버 같은 검색엔진이 웹페이지를 더 잘 이해하게 돕습니다. 일반적인 검색 결과와 달리 가격, 별점, 재고 유무, 레시피 칼로리 등이 검색 결과 화면에 바로 노출되도록 만듭니다.

 

② AI 에이전트의 데이터 소스

LLM(대형언어모델) 기반의 AI 에이전트가 자사몰에 방문했을 때, 복잡한 HTML 노이즈를 제거하고 상품명: A, 가격: B, 배송비: C와 같은 핵심 정보만 정제해서 읽어갈 수 있게 합니다.

 

③ 지식 그래프 구축

웹상의 데이터들이 서로 연결될 수 있도록 돕습니다. 예를 들어, '삼성전자'라는 브랜드 정보와 '갤럭시 S24'라는 상품 정보를 연결하여 AI가 맥락을 파악하게 합니다.

2. 핵심 기능 및 장점

기능	설명
비침습적 방식	기존 HTML 태그를 건드리지 않고 <script> 태그 내에 독립적으로 존재하여 UI를 해치지 않습니다.
표준화된 어휘	Schema.org라는 전 세계 공통 약속을 사용하여 모든 검색엔진과 AI가 동일하게 해석합니다.
기계 가독성	사람이 보는 텍스트가 아닌, 기계가 즉시 데이터베이스(DB)화 할 수 있는 구조를 제공합니다.

3. 자사몰에서의 활용도 (시나리오)

A. 쇼핑 검색 결과 강화

사용자가 구글에서 상품을 검색했을 때, 단순히 링크만 뜨는 게 아니라 아래와 같이 상세 정보가 포함되어 클릭률(CTR)을 높입니다.

 

B. AI 쇼핑 비서와의 연동

사용자가 AI에게 "10만 원 이하의 빨간색 원피스 찾아줘"라고 명령하면, AI 에이전트는 자사몰의 JSON-LD 데이터를 읽어 조건에 맞는 상품을 즉시 필터링하여 사용자에게 추천합니다.

 

C. 소셜 미디어 공유 최적화

카카오톡이나 페이스북에 링크를 공유할 때, 상품명과 가격이 더 정확하게 미리보기(Open Graph와 연계)에 반영되도록 보조합니다.

4. 구조화 예시 (비교)

• 사람이 보는 화면: "이 니트는 지금 5만원이고 별점은 5점이에요!"
• AI가 읽는 JSON-LD:
•  

• {
    "@type": "Product",
    "name": "프리미엄 니트",
    "offers": { "price": "50000", "priceCurrency": "KRW" },
    "aggregateRating": { "ratingValue": "5" }
  }
  

 

1. JSON-LD 스키마 마크업 샘플

<script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "Product",
  "name": "SEIKO 세이코 남성 시계 (모델번호: 100618000026)",
  "image": [
    "https://test.co.kr/static/images/goods/100618000026_main.jpg"
  ],
  "description": "세이코의 기술력이 집약된 프리미엄 남성용 시계입니다. 면세점 전용 혜택가로 만나보실 수 있습니다.",
  "sku": "100618000026",
  "mpn": "SEIKO-WATCH-001", 
  "brand": {
    "@type": "Brand",
    "name": "SEIKO (세이코)"
  },
  "offers": {
    "@type": "Offer",
    "url": "https://test.co.kr/%EC%8B%9C%EA%B3%84/100618000026",
    "priceCurrency": "USD",
    "price": "350.00", 
    "itemCondition": "https://schema.org/NewCondition",
    "availability": "https://schema.org/InStock",
    "seller": {
      "@type": "Organization",
      "name": "TEST"
    }
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.9",
    "reviewCount": "85"
  }
}
</script>

 

2. 이 코드가 AI 에이전트에게 주는 효과

1. 정확한 가격 인식: 달러($) 가격과 원화(₩) 가격이 혼재될 수 있는데, priceCurrency를 통해 기준 통화를 명확히 알려줍니다.
2. 재고 상태 파악: availability 필드를 통해 AI가 사용자에게 "현재 구매 가능합니다"라고 즉시 안내할 수 있습니다.
3. 모델 식별: sku 또는 mpn 번호를 통해 다른 사이트의 동일 모델과 가격을 비교하거나, 사용자가 특정 모델명을 말했을 때 정확히 이 페이지를 찾아낼 수 있게 합니다.

3. 자사몰 적용 시 주의사항

• 동적 데이터 바인딩: 위 코드는 예시이므로, 실제 적용 시에는 서버(DB)에서 현재 상품의 실시간 가격, 재고 여부, 리뷰 수를 가져와서 자동으로 출력되게 구현해야 합니다.
• 검증 도구 사용: 코드를 적용한 후에는 구글 구조화된 데이터 테스트 도구에 URL을 입력하여 오류가 없는지 꼭 확인해야 합니다.
• 면세점 특수성: 면세점은 회원 등급별 가격이 다르므로, offers 섹션에 '로그인 전 기본 면세가'를 기준으로 노출하는 것이 일반적입니다.