MDX에서 인터랙티브 컴포넌트 쓰기

MDX를 쓰면 글 중간에 React 컴포넌트를 그대로 삽입할 수 있습니다.

타이머 컴포넌트

위 타이머는 클라이언트 컴포넌트지만, 본문 흐름을 깨지 않고 자연스럽게 들어갑니다.

토글 컴포넌트

텍스트와 UI를 함께 배치하면 튜토리얼 전달력이 훨씬 좋아집니다.

Before / After 컴포넌트

이 방식은 디자인 변경 전후, 코드 리팩터링 전후 비교를 보여줄 때 유용합니다.