← 갤러리로 돌아가기

🕸️ 지식 그래프(Knowledge Graph)란?

정보를 "노드(개체)"와 "엣지(관계)"로 연결한 네트워크 — AI가 사실을 더 정확히 찾아내는 방법
💡 가운데 "OO카페" 노드를 중심으로 연결된 노드들이 보여요. 주변의 동그라미(위치, 대표메뉴 등)를 클릭하면 두 노드 사이의 관계(엣지)가 어떤 사실을 담고 있는지 아래에 나타나요.

🔍 클릭해서 관계 탐색하기

OO카페
노드를 클릭하면 "OO카페 —(관계)→ 값" 형태의 관계 사실이 여기에 나타나요

📊 텍스트 vs 지식 그래프

📄 그냥 텍스트 문단

"OO카페는 2019년에 문을 연 동네 카페로, 강남역 3번 출구 근처에 있으며 사장님은 김민지 씨이고 대표 메뉴는 핸드드립 시그니처 블렌드다..." — AI가 "창업연도가 언제야?"라는 질문에 답하려면 문장 전체를 읽고 추론해야 해요.

🕸️ 지식 그래프

OO카페 —(창업연도)→ 2019년 처럼 관계가 이미 구조화되어 있어서, AI가 문장을 다시 해석할 필요 없이 관계를 그대로 조회(query)해서 정확한 답을 줄 수 있어요.

💬 한 줄 정리

지식 그래프는 세상의 정보를 "개체(노드)"와 "그 개체들 사이의 관계(엣지)"로 표현한 네트워크예요. 예를 들어 "아이유 —(직업)→ 가수", "아이유 —(출연)→ 드라마 이름"처럼요. 일반 텍스트는 AI가 매번 문장을 읽고 의미를 추론해야 하지만, 지식 그래프는 관계가 이미 구조화되어 있어서 정확하고 일관된 답변을 뽑아내기가 훨씬 쉬워요. 그래서 검색엔진이나 챗봇이 사실 확인이 중요한 질문(인물, 날짜, 소속 등)에 답할 때 지식 그래프를 함께 활용하는 경우가 많아요. 이 페이지의 그래프는 이해를 돕기 위한 가상의 예시(OO카페)로, 실제 존재하는 브랜드 데이터가 아니에요.

🧾 이 페이지, 이런 프롬프트로 만들었어요

아래 프롬프트를 복사해서 Claude·ChatGPT(GPT)·Gemini 어디에든 붙여넣고 직접 시도해보세요. 참고로 이건 예시 없이 지시만 담은 제로샷(zero-shot) 프롬프트예요 — 원하는 결과물의 예시를 1개 넣으면 원샷(one-shot), 여러 개 넣으면 퓨샷(few-shot) 프롬프팅이 되는데, 예시를 더할수록 결과가 원하는 스타일에 더 가까워지는 경우가 많아요.

비개발자 성인 대상 AI 교양 강의용 인터랙티브 HTML 데모 페이지를 만들어줘.
- 주제: "지식 그래프(Knowledge Graph)"란 무엇인지 시각적으로 보여주는 데모
- 가운데에 중심 노드(가상의 카페 브랜드 "OO카페")를 두고, 그 주위에 "위치·대표메뉴·창업연도·운영시간·사장님" 같은 4~5개의 관련 노드를 원형으로 배치하고, 중심과 각 노드를 선으로 연결해줘
- 사용자가 주변 노드를 클릭하면 "OO카페 —(관계)→ 값" 형식의 사실 문장이 강조되어 나타나야 해
- 지식 그래프가 일반 텍스트 문단과 어떻게 다른지(관계가 구조화되어 있어 AI가 더 정확히 조회할 수 있다는 점) 비교 섹션도 넣어줘
- 실존 브랜드가 아니라 가상의 예시임을 분명히 해줘
- 톤은 차분하고 미니멀한 교육용 사이트 느낌으로, 라이트/다크 모드를 모두 지원해줘
- CSS·JS 전부 인라인으로 넣은 단일 HTML 파일로, 한국어로 출력해줘
이 페이지는 AI(Claude)가 만든 예시 자료입니다 — 강의 데모용