챗GPT와 MDX로 만드는 프로젝트 노트

Astro 프로젝트에서는 @astrojs/mdx 통합 덕분에 마크다운 글 속에 JSX/컴포넌트를 자연스럽게 삽입할 수 있습니다. 이 기능을 활용하면 학습 일지에 챗GPT 프롬프트, 차트, 경고 박스를 함께 담을 수 있어 학생 스스로 프로젝트를 관리하기 쉬워집니다.

왜 MDX + 챗GPT 조합인가요?

프롬프트 기록: 매 활동마다 사용한 프롬프트를 블록으로 저장하면 재현성이 높아집니다.
반복 사용 가능한 컴포넌트: <Callout>이나 <Checklist> 같은 UI를 재사용해 글 전체 톤을 맞출 수 있습니다.
정적 사이트의 장점 유지: Astro는 기본적으로 정적 HTML을 출력하므로, 필요한 부분만 상호작용하도록 제어할 수 있습니다.

기본 작성 흐름

MDX 파일 상단에 프론트매터(카테고리, 태그 등)를 입력합니다.
챗GPT에게 묻고 싶은 질문을 코드 블록으로 남깁니다.
컴포넌트를 import 해 인터랙티브한 UI를 추가합니다.

예시는 아래와 같습니다.

```prompt
너는 초등 메이커 강사야. LED 무드등 수업을 4단계로 설명해 줘.


## 컴포넌트 삽입 예시

아래 코드는 `HeaderLink` 컴포넌트를 불러와 버튼처럼 사용하는 방법을 보여 줍니다. 브라우저에서 클릭해 보면 알림창이 뜹니다.

import HeaderLink from "../../components/HeaderLink.astro";

<HeaderLink href="#" onclick="alert('clicked!')">
  MDX에서 불러온 링크 컴포넌트
</HeaderLink>

## 더 알아보기
- [MDX 공식 문서](https://mdxjs.com/docs/what-is-mdx)
- [Astro 마크다운 & MDX 가이드](https://docs.astro.build/ko/guides/markdown-content/)
- 컴포넌트에 상호작용이 필요하면 여전히 [Client Directives](https://docs.astro.build/en/reference/directives-reference/#client-directives)를 추가해야 합니다.

MDX는 글쓰기와 도구 기록을 한 화면에 모아주기 때문에 학생과 부모, 교사가 같은 맥락을 공유하기에 아주 편리합니다. 오늘 작성한 프롬프트와 결과를 바로 붙여두는 습관을 들여 보세요.