파운데이션 모델 활용 지도

🧠 파운데이션 모델 (예: Claude)

방대한 데이터로 미리 학습된, 하나의 범용 AI 모델

↓ 이 하나의 모델을 이렇게 다르게 "활용"해요 ↓

카드를 클릭하면 예시가 더 나와요

→

① 프롬프팅만으로

예: 이메일 작성 도우미, 브레인스토밍 파트너

탭해서 더 보기 ▾

→

② RAG(검색 증강)로

예: 사내 문서 기반 QA 챗봇

탭해서 더 보기 ▾

→

③ 파인튜닝으로

예: 특정 말투·도메인에 특화된 모델

탭해서 더 보기 ▾

→

④ 도구·에이전트 연결로

예: 예약을 대신 잡아주는 에이전트, 코드를 실행하는 코딩 어시스턴트

탭해서 더 보기 ▾

💬 한 줄 정리

파운데이션 모델은 특정 업무 하나를 위해 만든 게 아니라, 방대한 데이터를 학습해 언어·추론의 기본기를 갖춘 범용 모델이에요. 이 하나의 모델을 새 업무마다 처음부터 다시 만들 필요 없이, 프롬프팅(질문·지시만 잘 써서 바로 쓰기), RAG(관련 문서를 검색해 답변에 참고시키기), 파인튜닝(특정 데이터로 추가 학습시켜 특화시키기), 도구·에이전트 연결(실제 프로그램·API를 실행하게 하기) 같은 방법으로 "확장"해서 쓰는 거예요. 어떤 방법을 쓸지는 업무가 얼마나 최신 정보·전문성·실행력을 필요로 하는지에 따라 골라요.

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

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

AI 강의용 인터랙티브 데모 페이지를 만들어줘. 주제는 "파운데이션 모델 활용 지도".
- 상단 중앙에 "🧠 파운데이션 모델 (예: Claude)" 중심 카드를 두고
- 그 아래 화살표로 연결되는 4개의 "가지" 카드를 그리드로 배치:
  ① 프롬프팅만으로 → 이메일 작성 도우미, 브레인스토밍 파트너
  ② RAG(검색 증강)로 → 사내 문서 기반 QA 챗봇
  ③ 파인튜닝으로 → 특정 말투·도메인에 특화된 모델
  ④ 도구·에이전트 연결로 → 예약 대행 에이전트, 코드 실행 코딩 어시스턴트
- 각 가지 카드는 클릭하면 추가 예시 한 줄이 펼쳐지도록(toggle) 만들 것
- 순수 CSS(플렉스/그리드 + 테두리·화살표 문자)로 구성하고 외부 라이브러리나 실제 SVG 연결선 없이 깔끔하게 표현
- 하단에 "한 줄 정리" 카드에서 파운데이션 모델과 활용 방법의 관계를 초보자도 이해할 수 있게 설명
- CSS·JS 전부 인라인으로 넣은 단일 HTML 파일로, 한국어로 출력해줘

🧠 파운데이션 모델 활용 지도

① 프롬프팅만으로

② RAG(검색 증강)로

③ 파인튜닝으로

④ 도구·에이전트 연결로

💬 한 줄 정리

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