diff --git a/src/content/docs/ko/basics/layouts.mdx b/src/content/docs/ko/basics/layouts.mdx
index 10adf6dd8d84f..b860dee0cdcc0 100644
--- a/src/content/docs/ko/basics/layouts.mdx
+++ b/src/content/docs/ko/basics/layouts.mdx
@@ -238,22 +238,34 @@ const { title, fancyJsHelper } = Astro.props;
[Markdown/MDX 안내서](/ko/guides/markdown-content/)에서 Astro의 Markdown 및 MDX 지원에 대해 자세히 알아보세요.
-## `.md`, `.mdx`, `.astro`에 하나의 레이아웃 사용
+### 레이아웃에서 TypeScript 사용하기
-단일 Astro 레이아웃을 작성하여 `.md` 및 `.mdx` 파일의 `frontmatter` 객체는 물론, `.astro` 파일에서 전달된 모든 명명된 props를 수신할 수 있습니다.
+모든 Astro 레이아웃의 props로 타입을 제공하여 타입 안정성 및 자동 완성 기능을 추가할 수 있습니다.
-아래 예에서 레이아웃은 프런트매터 YAML `title` 속성 또는 `title` 속성을 전달하는 Astro 컴포넌트에서 페이지 제목을 표시합니다.
-
-```astro /{?title}?/ /Astro.props[.a-z]*/
+```astro ins={2-7} title="src/components/MyLayout.astro"
---
-// src/components/MyLayout.astro
-const { title } = Astro.props.frontmatter || Astro.props;
+interface Props {
+ title: string;
+ description: string;
+ publishDate: string;
+ viewCount: number;
+}
+const { title, description, publishDate, viewCount } = Astro.props;
---
-
-
+
+
+
+
+ {title}
+
- {title}
-
+
+
+
+
```