diff --git a/build/index.js b/build/index.js
index 564bef03..606fdf50 100644
--- a/build/index.js
+++ b/build/index.js
@@ -38,6 +38,7 @@ Metalsmith(cwd)
     moment,
     localeMap: {
       'en': 'English',
+      'ko': '한국어',
     },
     home(current) {
       const locale = current.locale || this.defaultLocale;
@@ -110,7 +111,7 @@ Metalsmith(cwd)
   })
   .use(locales({
     defaultLocale: 'en',
-    locales: ['en']
+    locales: ['en', 'ko']
   }))
   .use(order())
   .use(categories())
diff --git a/content/docs/ko/elements/action-bar/action-bar.md b/content/docs/ko/elements/action-bar/action-bar.md
new file mode 100644
index 00000000..891d1ec6
--- /dev/null
+++ b/content/docs/ko/elements/action-bar/action-bar.md
@@ -0,0 +1,50 @@
+---
+title: 액션바 (ActionBar)
+apiRef: https://docs.nativescript.org/api-reference/classes/_ui_action_bar_.actionbar
+contributors: [rigor789, eddyverbruggen]
+---
+
+액션바 컴포넌트는 안드로이드 액션바와 iOS NavigationBar의 네이티브-스크립트 추상화 입니다.
+
+---
+
+#### 제목 사용
+
+```html
+<ActionBar title="MyApp" />
+```
+
+#### 커스텀 제목 view
+
+```html
+<ActionBar>
+  <StackLayout orientation="horizontal">
+    <Image src="res://icon" width="40" height="40" verticalAlignment="center" />
+    <Label text="ativeScript" fontSize="24" verticalAlignment="center" />
+  </StackLayout>
+</ActionBar>
+```
+
+#### 안드로이드에서 앱 아이콘 설정
+
+```html
+<ActionBar title="My App" android.icon="res://icon" android.iconVisibility="always" />
+```
+
+#### 가장자리 경계(border) 없애기
+iOS와 안드로이드에서 작은 보더가 액션바 바닥에 그려집니다.
+추가로 iOS에서 액션바의 배경색은 iOS가 적용하는 필터때문에 지정한 값과 약간 달라집니다.
+이 필터와 보더를 제거하려면 `flat` 을 `true` 로 설정하세요
+
+```html
+<ActionBar title="My App" flat="true" />
+```
+
+## Props
+
+| 이름 | 타입 | 설명 |
+|------|------|-------------|
+| `title` | `String` | 액션바에 나타나는 제목.
+| `android.icon` | `String` | 안드로이드에서 보여지는 아이콘.
+| `android.iconVisibility` | `String` | 아이콘이 보여질지 지정.
+| `flat` | `boolean` | 보더와 iOS 컬러 필터를 제거. 기본값은 `false`.
diff --git a/content/docs/ko/elements/action-bar/action-item.md b/content/docs/ko/elements/action-bar/action-item.md
new file mode 100644
index 00000000..0cb22b9c
--- /dev/null
+++ b/content/docs/ko/elements/action-bar/action-item.md
@@ -0,0 +1,56 @@
+---
+title: 액션아이템 (ActionItem)
+apiRef: https://docs.nativescript.org/api-reference/classes/_ui_action_bar_.actionitem
+contributors: [rigor789]
+---
+
+ActionItem 컴포넌트는 액션바에 추가적인 액션 버턴을 추가하는데 쓰임
+
+---
+
+```html
+<ActionBar title="My App">
+  <ActionItem @tap="onTapShare"
+    ios.systemIcon="9" ios.position="left"
+    android.systemIcon="ic_menu_share" android.position="actionBar" />
+  <ActionItem @tap="onTapDelete"
+    ios.systemIcon="16" ios.position="right"
+    text="delete" android.position="popup" />
+</ActionBar>
+```
+
+#### 액션 아이템의 조건부 표시
+
+ActionItems 은 `v-show` 디렉티브를 이용하여 조건부로 표시할 수 있습니다.
+
+```html
+<ActionBar title="My App">
+  <ActionItem @tap="onTapEdit"
+    v-show="!isEditing"
+    ios.systemIcon="2" ios.position="right"
+    android.systemIcon="ic_menu_edit" />
+  <ActionItem @tap="onTapSave"
+    v-show="isEditing"
+    ios.systemIcon="3" ios.position="right"
+    android.systemIcon="ic_menu_save" />
+  <ActionItem @tap="onTapCancel"
+    v-show="isEditing"
+    ios.systemIcon="1"
+    android.systemIcon="ic_menu_close_clear_cancel" />
+</ActionBar>
+```
+
+## Props
+
+| 이름 | 타입 | 설명 |
+|------|------|------------|
+| `ios.systemIcon` | `String` | iOS용 아이콘.
+| `android.systemIcon` | `String` | 안드로이드용 아이콘.
+| `ios.position` | `String` | iOS용 위치 설정.<br>가능한 값:<br>- `left` (기본값): 아이템을 액션바의 왼쪽에 위치.<br>- `right`: 아이템을 액션바의 오른쪽에 위치.
+| `android.position` | `String` | 안드로이드용 위치설정.<br>가능한 값:<br>- `actionBar` (기본값): 아이템을 액션바 내에 위치.<br>- `popup`: 아이템을 옵션 메뉴에 위치. 아이템은 텍스트로 렌더링됨. .<br>- `actionBarIfRoom`: 공간이 있을 경우 아이템을 액션바 내에 위치. 아니면 옵션 메뉴에 둠.
+
+## 이벤트
+
+| 이름 | 설명 |
+|------|-------------|
+| `tap`| 액션 아이템이 탭(tap)되었을때 호출(Emit)
diff --git a/content/docs/ko/elements/action-bar/navigation-button.md b/content/docs/ko/elements/action-bar/navigation-button.md
new file mode 100644
index 00000000..fb649dca
--- /dev/null
+++ b/content/docs/ko/elements/action-bar/navigation-button.md
@@ -0,0 +1,30 @@
+---
+title: 네비게이션 버튼 (NavigationButton)
+apiRef: https://docs.nativescript.org/api-reference/classes/_ui_action_bar_.navigationbutton
+contributors: [rigor789]
+---
+
+NavigationButton 컴포넌트는 안드로이드 네비게이션 버튼과 iOS 백버튼(back  button)의 네이티브-스크립트 추상화입니다.
+
+---
+
+```html
+<ActionBar title="My App">
+  <NavigationButton text="Go back" android.systemIcon="ic_menu_back" @tap="goBack" />
+</ActionBar>
+```
+
+## Props
+
+| 이름 | 타입 | 설명 |
+|------|------|-------------|
+| `text` | `String` | 텍스트를 iOS 에서 보여주도록 설정.
+| `android.systemIcon` | `String` | 해당 아이콘이 안드로이드에서 보입니다.
+
+*안드로이드의 아이콘 리스트는 다음 페이지에서 찾을 수 있습니다. <https://developer.android.com/reference/android/R.drawable.html>. 아이콘은 `ic_` 접두어와 함께 시작하는 것들입니다.*
+
+## Events
+
+| 이름 | 설명 |
+|------|-------------|
+| `tap`| 네비게이션 버튼을 탭(tab) 했을때 발생(Emit).
diff --git a/content/docs/ko/elements/components/activity-indicator.md b/content/docs/ko/elements/components/activity-indicator.md
new file mode 100644
index 00000000..0ee32a4a
--- /dev/null
+++ b/content/docs/ko/elements/components/activity-indicator.md
@@ -0,0 +1,33 @@
+---
+title: ActivityIndicator
+apiRef: https://docs.nativescript.org/api-reference/classes/_ui_activity_indicator_.activityindicator
+contributors: [qgp9]
+---
+
+ActivityIndicator 컴포넌트는 백그라운드에서 동작하는 것을 표시하는 프로그레스 인디케이터를 추가하고 사용자가 일시중지(pause) 할수 있게 도와줍니다.
+
+---
+
+```html
+<ActivityIndicator busy="true" @busyChange="onBusyChanged" />
+```
+
+[> screenshots for=ActivityIndicator <]
+
+## Props
+
+| 이름 | 타입 | 설명 |
+|------|------|-------------|
+| `busy` | `Boolean` | `true` 일때 인디케이터가 활성화됨.
+
+## 이벤트
+
+| 이름 | 설명 |
+|------|-------------|
+| `busyChange`| `busy` 프로퍼티가 바뀔때 발생(Emit)
+
+## 네이티브 컴포넌트
+
+| Android | iOS |
+|---------|-----|
+| android.widget.ProgressBar (indeterminate = true)	| UIActivityIndicatorView
diff --git a/content/docs/ko/elements/components/button.md b/content/docs/ko/elements/components/button.md
new file mode 100644
index 00000000..78359dd7
--- /dev/null
+++ b/content/docs/ko/elements/components/button.md
@@ -0,0 +1,36 @@
+---
+title: 버튼 (Button)
+apiRef: https://docs.nativescript.org/api-reference/classes/_ui_button_.button
+contributors: [qgp9]
+---
+
+버튼(Button) 컴포넌트는 탭(tab) 이벤트에 반응하는 버튼을 표시하는데 사용됩니다.
+
+상호작용이 탭(tab) 이벤트로만 제한되는 것은 아닙니다.
+[네이티브-스크립트에서 사용가능한 모든 제스쳐에대하여 공식 문서를 읽어보세요](https://docs.nativescript.org/ui/gestures).
+
+---
+
+```html
+<Button text="Button" />
+```
+
+[> screenshots for=Button <]
+
+## Props
+
+| 이름 | 타입 | 설명 |
+|------|------|-------------|
+| `text` | `String` | 버튼에 보이는 텍스트.
+| `textWrap` | `boolean` | 버튼의 텍스트가 래핑될지 결정. 기본값은 `false`.
+
+## 이벤트
+
+| 이름 | 설명 |
+|------|-------------|
+| `tap` | 버튼이 눌릴때 발생(Emit)
+
+## 네이티브 컴포넌트
+| Android | iOS |
+|---------|-----|
+| android.widget.Button | UIButton
diff --git a/content/docs/ko/elements/components/date-picker.md b/content/docs/ko/elements/components/date-picker.md
new file mode 100644
index 00000000..a0503d96
--- /dev/null
+++ b/content/docs/ko/elements/components/date-picker.md
@@ -0,0 +1,44 @@
+---
+title: 날짜선택 (DatePicker)
+apiRef: https://docs.nativescript.org/api-reference/classes/_ui_date_picker_.datepicker
+contributors: [qgp9]
+---
+
+DatePicker 컴포넌트는 사용자가 날짜를 선택할 수 있도록 합니다.
+
+---
+
+```html
+<DatePicker @loaded="onDatePickerLoaded" @dateChanged="onDateChanged" />
+```
+
+**노트**: 이 컴포넌트는 `v-model` 을 이용한 양방향(two-way) 바인딩을 지원합니다:
+
+```html
+<DatePicker v-model="selectedDate" />
+```
+
+[> screenshots for=DatePicker <]
+
+## Props
+
+| 이름 | 타입 | 설명 |
+|------|------|-------------|
+| `date` | `Date` | 현재 표시되는 날짜.
+| `minDate` | `Date` | 최소 선택 가능 날짜.
+| `maxDate` | `Date` | 최대 선택 가능 날짜.
+| `day` | `Number` | 현재 선택된 날.
+| `month` | `Number` | 현재 선택된 달.
+| `year` | `Number` | 현재 선택된 년.
+
+## 이벤트
+
+| 이름 | 설명 |
+|------|-------------|
+| `dateChanged` | 선택된 날짜가 바뀔때 발생(Emit)
+
+## 네이티브 컴포넌트
+
+| Android |	iOS |
+|---------|-----|
+| android.widget.DatePicker | UIDatePicker
diff --git a/content/docs/ko/elements/components/html-view.md b/content/docs/ko/elements/components/html-view.md
new file mode 100644
index 00000000..dd76e9dc
--- /dev/null
+++ b/content/docs/ko/elements/components/html-view.md
@@ -0,0 +1,27 @@
+---
+title: HTML뷰 (HtmlView)
+apiRef: https://docs.nativescript.org/api-reference/classes/_ui_html_view_.htmlview
+contributors: [qgp9]
+---
+
+HtmlView 컴포넌트는 정적인 html 컨텐츠를 웹뷰(WebView) 없이 보여줄 수 있도록 해줍니다.
+
+---
+
+```html
+<HtmlView html="<div><h1>HtmlView</h1></div>" />
+```
+
+[> screenshots for=HtmlView <]
+
+## Props
+
+| 이름 | 타입 | 설명 |
+|------|------|-------------|
+| `html` | `String` | 보여줄 html 컨텐츠.
+
+## 네이티브 컴포넌트
+
+| Android | iOS |
+|---------|-----|
+| android.widget.TextView | UILabel
diff --git a/content/docs/ko/elements/components/image.md b/content/docs/ko/elements/components/image.md
new file mode 100644
index 00000000..a22c1e96
--- /dev/null
+++ b/content/docs/ko/elements/components/image.md
@@ -0,0 +1,47 @@
+---
+title: 이미지 (Image)
+apiRef: https://docs.nativescript.org/api-reference/classes/_ui_image_.image
+contributors: [qgp9]
+---
+
+이미지(Image) 컴포넌트는 [ImageSource](https://docs.nativescript.org/api-reference/modules/_image_source_) 나 URL 로부터 이미지를 표시합니다.
+
+---
+
+#### `app` 디렉토리로부터 상대경로로 이미지 표시
+
+```html
+<Image src="~/logo.png" stretch="none" />
+```
+
+#### URL 로 부터 이미지 표시
+
+```html
+<Image src="https://art.nativescript-vue.org/NativeScript-Vue-White-Green.png" stretch="none" />
+```
+
+#### `App_Resources` 로 부터 이미지 표시
+
+```html
+<Image src="res://icon" stretch="none" />
+```
+
+#### `base64` 인코딩 이미지
+
+```html
+<Image src="data:Image/png;base64,iVBORw..." stretch="none" />
+```
+
+[> screenshots for=Image <]
+
+## Props
+
+| 이름 | 타입 | 설명 |
+|------|------|-------------|
+| `src` | `String`, [`ImageSource`](https://docs.nativescript.org/api-reference/modules/_image_source_) | 이미지 소스.
+
+## 네이티브 컴포넌트
+
+| Android | iOS |
+|---------|-----|
+| android.widget.ImageView | UIImageView
diff --git a/content/docs/ko/elements/components/label.md b/content/docs/ko/elements/components/label.md
new file mode 100644
index 00000000..c89096b9
--- /dev/null
+++ b/content/docs/ko/elements/components/label.md
@@ -0,0 +1,47 @@
+---
+title: 레이블 (Label)
+apiRef: https://docs.nativescript.org/api-reference/classes/_ui_label_.label
+contributors: [qgp9]
+---
+
+레이블(Label) 컴포넌트는 읽기전용 텍스트를 표시하는데 사용됩니다.
+
+**노트**: `<Label>` HTML의 `<Label>` 과 **다릅니다**.
+
+---
+
+```html
+<Label text="Label" />
+```
+
+[> screenshots for=Label <]
+
+### FormattedString
+
+특정 부분의 텍스트를 다르게 스타일링해야 한다면 `FormattedString` `Span` 요소를 결합하여 사용할 수 있습니다.
+
+예:
+```html
+<Label textWrap="true">
+  <FormattedString>
+    <Span text="This text has a " />
+    <Span text="red " style="color: red" />
+    <Span text="piece of text. " />
+    <Span text="Also, this bit is italic, " fontStyle="italic" />
+    <Span text="and this bit is bold." fontWeight="bold" />
+  </FormattedString>
+</Label>
+```
+
+## Props
+
+| 이름 | 타입 | 설명 |
+|------|------|-------------|
+| `text` | `String` | 레이블의 텍트스.
+| `textWrap` | `boolean` | 레이블의 텍스트가 래핑될것 인지 지정. 기본값은 `false`.
+
+## 네이티브 컴포넌트
+
+| Android | iOS |
+|---------|-----|
+| android.widget.TextView | UILabel
diff --git a/content/docs/ko/elements/components/list-picker.md b/content/docs/ko/elements/components/list-picker.md
new file mode 100644
index 00000000..9e52c135
--- /dev/null
+++ b/content/docs/ko/elements/components/list-picker.md
@@ -0,0 +1,41 @@
+---
+title: ListPicker
+apiRef: https://docs.nativescript.org/api-reference/classes/_ui_list_picker_.listpicker
+contributors: [qgp9]
+---
+
+ListPicker 컴포넌트는 사용자가 리스트로 부터 값을 선택할 수 있도록 해줍니다.
+
+---
+
+```html
+<ListPicker :items="listOfItems" selectedIndex="0"
+    @selectedIndexChange="selectedIndexChanged" />
+```
+
+**노트**: 이 컴포넌트는 `v-model` 을 이용한 양방향(two-way) 바인딩을 지원합니다:
+
+```html
+<ListPicker :items="listOfItems" v-model="selectedItem" />
+```
+
+[> screenshots for=ListPicker <]
+
+## Props
+
+| 이름 | 타입 | 설명 |
+|------|------|-------------|
+| `items` | `Array<String>` | 리스트 선택기에 표시되는 옵션들의 스트링 배열.
+| `selectedIndex` | `Number` | 현재 선택된 아이템의 인덱스.
+
+## 이벤트
+
+| 이름 | 설명 |
+|------|-------------|
+| `selectedIndexChange`| 리스트 선택기에서 선택된 옵션(인덱스)가 바뀔때 발생(Emit)
+
+## 네이티브 컴포넌트
+
+| Android | iOS |
+|---------|-----|
+| android.widget.NumberPicker | UIPickerView
diff --git a/content/docs/ko/elements/components/list-view.md b/content/docs/ko/elements/components/list-view.md
new file mode 100644
index 00000000..d107f3e3
--- /dev/null
+++ b/content/docs/ko/elements/components/list-view.md
@@ -0,0 +1,62 @@
+---
+title: 리스트뷰 (ListView)
+apiRef: https://docs.nativescript.org/api-reference/classes/_ui_list_view_.listview
+contributors: [qgp9]
+---
+
+리스트뷰(ListView) 컴포넌트는 수직 스크롤 리스트에 아이템을 보여줍니다.  
+리스트에서 각 아이템이 어떻게 표시되는지를 지정하기 위해 다른 `v-template`를 설정할 수 있습니다.
+
+---
+
+```html
+<ListView for="item in listOfItems" @itemTap="onItemTap">
+  <v-template>
+    <Label :text="item.text" />
+  </v-template>
+
+  <v-template if="$odd">
+    <Label :text="item.text" color="red" />
+  </v-template>
+</ListView>
+```
+
+위 예에서 두번째 템플릿은 아이템의 인덱스가 홀수일때 사용됩니다.
+편의를 위해 `$index`, `$even`, `$odd` 헬퍼를 사용할 수 있습니다.
+그러나 필요하다면 임의의 유효한 자바스크립트 표현식과 함께 `v-template`의 `if` 조건을 사용할 수 있습니다.
+
+`v-template` 컴포넌트에 대해 더 자세이 배우려면 [`v-template` 문서](/ko/docs/utilities/v-template) 를 확인하세요.
+
+리스트뷰는 당신의 예상과 다르게 [`v-for`](https://vuejs.org/v2/guide/list.html#Mapping-an-Array-to-Elements-with-v-for) 처럼 아이템들의 룹을 돌지 않습니다.
+대신 리스트뷰는 단지 현재 스크린에 보일 수 있는 아이템을 표시하기 위해 필요한 뷰를 만들고 스크롤이 발생할 경우 이미 off-screen 되었던 뷰를 재사용합니다.
+이 컨셉은 뷰 재활용(recycling)이라고 불리며 모바일 어플리케이션에서 퍼포먼스를 향상시키기 위해 흔히 사용됩니다.
+이는 당신이 `v-template` 안에서  결합된 이벤트리스너에 의존할 수 없고 대신 탭된 아이템(리스트의 실제 아이템도 마찬가지)의 인덱스를 포함하는 `itemTap` 이벤트를 사용해야 하기때문에 중요합니다.
+(역자: 솔직히 뭔소린지 모르고 번역했습니다.)
+
+```js
+onItemTap(event) {
+  console.log(event.index)
+  console.log(event.item)
+}
+```
+
+[> screenshots for=ListView <]
+
+## Props
+
+| 이름 | 타입 | 설명 |
+|------|------|-------------|
+| `for` | `String` | 아이템 이터레이팅을 위한 표현식. 예:<br>- `item in listOfItems`<br>- `(item, index) in listOfItems`<br>- `item in [1, 2, 3, 4, 5]`
+| `items` | `Array<any>` | 리스트뷰에 표시될 아이템 배열. **노트**: 이 프로퍼티는 오직 고급 사용을 위한 것입니다. 대부분의 경우 `for` 프로퍼티를 사용하기를 권장합니다.
+| `separatorColor` | `Color` | 구분라인의 컬러. `transparent` 를 사용하여 제거할 수 있습니다.
+
+## 이벤트
+
+| 이름 | 설명 |
+|------|-------------|
+| `itemTap`| 리스트뷰 내의 아이템이 탭되었을때 발생. 탭된 아이템에 접근하려면 `event.item`을 사용하세요
+
+## 네이티브 컴포넌트
+| Android | iOS |
+|---------|-----|
+| android.widget.ListView | UITableView
diff --git a/content/docs/ko/elements/components/progress.md b/content/docs/ko/elements/components/progress.md
new file mode 100644
index 00000000..d7dc0b59
--- /dev/null
+++ b/content/docs/ko/elements/components/progress.md
@@ -0,0 +1,34 @@
+---
+title: 프로그레스 (Progress)
+apiRef: https://docs.nativescript.org/api-reference/classes/_ui_progress_.progress
+contributors: [qgp9]
+---
+
+프로그레스(Progress) 컴포넌트는 진행상태를 시각적으로 보여주는 바(막대)입니다.
+
+---
+
+```html
+<Progress :value="currentProgress" />
+```
+
+[> screenshots for=Progress <]
+
+## Props
+
+| 이름 | 타입 | 설명 |
+|------|------|-------------|
+| `value` | `Number` | 최대값을 기준으로한 현재 진행 상태.
+| `maxValue` | `Number` | 진행상태의 최대값. 기본값은 `100`.
+
+## 이벤트
+
+| 이름 | 설명 |
+|------|-------------|
+| `valueChange` | value 프로퍼티가 바뀔때 발생
+
+## 네이티브 컴포넌트
+
+| Android | iOS |
+|---------|-----|
+| android.widget.ProgressBar (indeterminate = false) | UIProgressView
diff --git a/content/docs/ko/elements/components/scroll-view.md b/content/docs/ko/elements/components/scroll-view.md
new file mode 100644
index 00000000..83077a5c
--- /dev/null
+++ b/content/docs/ko/elements/components/scroll-view.md
@@ -0,0 +1,35 @@
+---
+title: 스크롤뷰 (ScrollView)
+apiRef: https://docs.nativescript.org/api-reference/classes/_ui_scroll_view_.scrollview
+contributors: [qgp9]
+---
+
+스크롤뷰(ScrollView) 컴포넌트는 스크롤 가능한 컨텐츠를 표시할 수 있게 해줍니다.
+
+---
+
+```html
+<ScrollView orientation="horizontal">
+  <StackLayout orientation="horizontal">
+    <Label text="this" />
+    <Label text="text" />
+    <Label text="scrolls" />
+    <Label text="horizontally" />
+    <Label text="if necessary" />
+  </StackLayout>
+</ScrollView>
+```
+
+[> screenshots for=ScrollView <]
+
+## Props
+
+| 이름 | 타입 | 설명 |
+|------|------|-------------|
+| `orientation` | `String` | `horizontal` 혹은 `vertical`. 기본값은 `vertical`.
+
+## 이벤트
+
+| 이름 | 설명 |
+|------|-------------|
+| `scroll`| 스크롤 이벤트가 발생했을때 발생(Emit)
diff --git a/content/docs/ko/elements/components/search-bar.md b/content/docs/ko/elements/components/search-bar.md
new file mode 100644
index 00000000..8d5735e0
--- /dev/null
+++ b/content/docs/ko/elements/components/search-bar.md
@@ -0,0 +1,41 @@
+---
+title: 검색바 (SearchBar)
+apiRef: https://docs.nativescript.org/api-reference/classes/_ui_search_bar_.searchbar
+contributors: [qgp9]
+---
+
+검색바(SearchBar) 는 검색 커리를 입력하고 검색 제공자에게 요청을 보낼수 있는 사용자 인터페이스를 제공합니다.
+
+---
+
+```html
+<SearchBar hint="Search hint" :text="searchPhrase" @textChange="onTextChanged" @submit="onSubmit" />
+```
+
+**노트**: 이 컴포넌트는 `v-model` 을 이용한 양방향(two-way) 바인딩을 지원합니다:
+
+```html
+<SearchBar v-model="searchQuery" />
+```
+
+[> screenshots for=SearchBar <]
+
+## Props
+
+| 이름 | 타입 | 설명 |
+|------|------|-------------|
+| `hint` | `String` | 편집가능한 인풋 영역의 텍스트 플레이스홀더
+| `text` | `String` | 검색 인풋의 value
+
+## ## 이벤트
+
+| 이름 | 설명 |
+|------|-------------|
+| `textChange`| 텍스트가 바뀔때 발생.
+| `submit`| 검색 인풋이 submit 될때 발생
+
+## Native Component
+
+| Android | iOS |
+|---------|-----|
+| android.widget.SearchView	| UISearchBar
diff --git a/content/docs/ko/elements/components/segmented-bar.md b/content/docs/ko/elements/components/segmented-bar.md
new file mode 100644
index 00000000..a600987e
--- /dev/null
+++ b/content/docs/ko/elements/components/segmented-bar.md
@@ -0,0 +1,41 @@
+---
+title: 세그먼트바 (SegmentedBar)
+apiRef: http://docs.nativescript.org/api-reference/modules/_ui_segmented_bar_.html
+contributors: [qgp9]
+---
+
+세그먼트바(SegmentedBar) 컴포넌트는 불연속적인 선택을 위해 탭형태의 뷰 컬랙션을 보여주는 간단한 방법을 제공합니다.
+
+---
+
+```html
+<SegmentedBar :items="listOfItems" selectedIndex="0"
+    @selectedIndexChange="onSelectedIndexChange" />
+```
+
+**노트**: 이 컴포넌트는 `v-model` 을 이용한 양방향(two-way) 바인딩을 지원합니다:
+
+```html
+<SegmentedBar :items="listOfItems" v-model="selectedItem" />
+```
+
+[> screenshots for=SegmentedBar <]
+
+## Props
+
+| 이름 | 타입 | 설명 |
+|------|------|-------------|
+| `items` | `Array<SegmentedBarItem>` | 세그먼트바에 표시될 아이템 리스트.
+| `selectedIndex` | `Number` | 선택된 아이템들의 인덱스
+| `selectedBackgroundColor` | `Color` | 선텍된 아이템들의 배경색. 전체 바에 배경색을 적용하려면 `backgroundColor`를 사용하세요.
+
+## 이벤트
+
+| 이름 | 설명 |
+|------|-------------|
+| `selectedIndexChange`| 세그멘트 바의 아이템이 탭될때 발생.
+
+## Native Component
+| Android | iOS |
+|---------|-----|
+| android.widget.TabHost | UISegmentedControl
diff --git a/content/docs/ko/elements/components/slider.md b/content/docs/ko/elements/components/slider.md
new file mode 100644
index 00000000..9ddf80c9
--- /dev/null
+++ b/content/docs/ko/elements/components/slider.md
@@ -0,0 +1,42 @@
+---
+title: 슬라이더 (Slider)
+apiRef: https://docs.nativescript.org/api-reference/classes/_ui_slider_.slider
+contributors: [qgp9]
+
+---
+
+슬라이더(Slider) 컴포넌트는 사용자가 특정 범위의 숫자 값을 입력할 수 있도록 해줍니다.
+
+---
+
+```html
+<Slider value="80" @valueChange="onValueChanged" />
+```
+
+**노트**: 이 컴포넌트는 `v-model` 을 이용한 양방향(two-way) 바인딩을 지원합니다:
+
+```html
+<Slider v-model="value" />
+```
+
+[> screenshots for=Slider <]
+
+## Props
+
+| 이름 | 타입 | 설명 |
+|------|------|-------------|
+| `value` | `Number` | 슬라이더의 값
+| `minValue` | `Number` | 슬라이더 최소값. 기본값은 `0`.
+| `maxValue` | `Number` | 슬라이더 최대값. 기본값은 `100`.
+
+## 이벤트
+
+| 이름 | 설명 |
+|------|-------------|
+| `valueChange`| 슬라이더 값이 바뀔때 발생.
+
+## Native Component
+
+| Android | iOS |
+|---------|-----|
+| android.widget.SeekBar | UISlider
diff --git a/content/docs/ko/elements/components/switch.md b/content/docs/ko/elements/components/switch.md
new file mode 100644
index 00000000..865216fb
--- /dev/null
+++ b/content/docs/ko/elements/components/switch.md
@@ -0,0 +1,39 @@
+---
+title: 스위치 (Switch)
+apiRef: https://docs.nativescript.org/api-reference/classes/_ui_switch_.switch
+contributors: [qgp9]
+---
+
+스위치(Switch) 컴포넌트는 사용자가 두개의 상태를 토글 할수 있도록 해줍니다.
+기본 상태는 `false` 나 "off" 입니다.
+
+---
+
+```html
+<Switch checked="true" />
+```
+
+**노트**: 이 컴포넌트는 `v-model` 을 이용한 양방향(two-way) 바인딩을 지원합니다:
+
+```html
+<Switch v-model="itemEnabled" />
+```
+
+[> screenshots for=Switch <]
+
+## Props
+
+| 이름 | 타입 | 설명 |
+|------|------|-------------|
+| `checked` | `Boolean` | 스위치의 상태를 나타네는 부울값
+
+## 이벤트
+
+| 이름 | 설명 |
+|------|-------------|
+| `checkedChange`| 스위치의 값이 바뀔때 발생
+
+## Native Component
+| Android | iOS |
+|---------|-----|
+| android.widget.Switch | UISwitch
diff --git a/content/docs/ko/elements/components/tab-view.md b/content/docs/ko/elements/components/tab-view.md
new file mode 100644
index 00000000..148042eb
--- /dev/null
+++ b/content/docs/ko/elements/components/tab-view.md
@@ -0,0 +1,39 @@
+---
+title: 탭뷰 (TabView)
+apiRef: https://docs.nativescript.org/api-reference/classes/_ui_tab_view_.tabview
+contributors: [qgp9]
+---
+
+탭뷰(TabView) 컴포넌트는 탭으로 그룹화된 컨텐츠를  표시할 수 있도록 해줍니다.
+
+---
+
+```html
+<TabView :selectedIndex="selectedIndex">
+  <TabViewItem title="Tab 1">
+    <label text="Content for Tab 1"></label>
+  </TabViewItem>
+  <TabViewItem title="Tab 2">
+    <label text="Content for Tab 2"></label>
+  </TabViewItem>
+</TabView>
+```
+
+[> screenshots for=TabView <]
+
+## Props
+
+| 이름 | 타입 | 설명 |
+|------|------|-------------|
+| `selectedIndex` | `Number` | 현재 선택된 탭. 기본값은 `0`
+
+## 이벤트
+
+| 이름 | 설명 |
+|------|-------------|
+| `selectedIndexChanged`| tab-view-item 컴포넌트중 하나가 탭되었을때 발생
+
+## Native Component
+| Android | iOS |
+|---------|-----|
+| android.support.v4.view.ViewPager | UITabBarController
diff --git a/content/docs/ko/elements/components/text-field.md b/content/docs/ko/elements/components/text-field.md
new file mode 100644
index 00000000..c2c9764c
--- /dev/null
+++ b/content/docs/ko/elements/components/text-field.md
@@ -0,0 +1,48 @@
+---
+title: 텍스트필드 (TextField)
+apiRef: https://docs.nativescript.org/api-reference/modules/_ui_text_field_
+contributors: [qgp9]
+
+---
+
+텍스트필드(TextField) 컴포넌트는 편집가능한 한줄짜리 박스를 만듭니다.
+
+---
+
+```html
+<TextField :text="textFieldValue" hint="Enter text..." />
+```
+
+**노트**: 이 컴포넌트는 `v-model` 을 이용한 양방향(two-way) 바인딩을 지원합니다:
+
+```html
+<TextField v-model="textFieldValue" />
+```
+
+[> screenshots for=TextField <]
+
+## Props
+
+| 이름 | 타입 | 설명 |
+|------|------|-------------|
+| `text` | `String` | 텍스트필드의 값
+| `hint` | `String` | 플레이스홀더 텍스트
+| `editable` | `Boolean` | `true` 면 사용자가 텍스트필드의 값을 수정할 수 있음
+| `maxLength` | `Number` | 입력 가능한 글자수를 제한
+| `secure` | `Boolean` | `true` 면 입력된 텍스트를 숨깁니다. 기본값은 `false`.
+| `keyboardType` | `KeyboardType` | 쉬운 텍스트 입력을위해 커스텀 키워드를 보여줍니다. 가능한 값: `datetime`, `phone`, `number`, `url`, `email`.
+| `returnKeyType` | `ReturnKeyType` | 리턴키의 레이블. 가능한 값: `done`, `next`, `go`, `search`, `send`.
+
+## 이벤트
+
+| 이름 | 설명 |
+|------|-------------|
+| `textChange`| 텍스트가 바뀌면 발생
+| `returnPress`| 리턴키가 눌리면 발생
+| `focus`| 텍스트필드가 포커스되면 발생
+| `blur`| 텍스트필드가 포커스를 잃으면 발생
+
+## Native Component
+| Android | iOS |
+|---------|-----|
+| android.widget.EditText | UITextField
diff --git a/content/docs/ko/elements/components/text-view.md b/content/docs/ko/elements/components/text-view.md
new file mode 100644
index 00000000..22067ba9
--- /dev/null
+++ b/content/docs/ko/elements/components/text-view.md
@@ -0,0 +1,61 @@
+---
+title: 텍스트뷰 (TextView)
+apiRef: https://docs.nativescript.org/api-reference/classes/_ui_text_view_.textview
+contributors: [qgp9]
+---
+
+텍스트뷰(TextView) 컴포넌트는 편집가능한 여러 줄 박스를 나타냅니다.
+이 컴포넌트는 `editable` 프로퍼티를 `false` 로 설정함으로써 읽기전용 컨텐츠를 표시하는 데도 사용할 수 있습니다.
+
+---
+
+```html
+<TextView text="Multi\nLine\nText" />
+```
+
+**노트**: 이 컴포넌트는 `v-model` 을 이용한 양방향(two-way) 바인딩을 지원합니다:
+
+```html
+<TextView v-model="textViewValue" />
+```
+
+### 다른 스타일의 여러 줄 텍스트를 표시
+
+```html
+<TextView editable="false">
+  <FormattedString>
+    <Span text="You can use text attributes such as " />
+    <Span text="bold, " fontWeight="Bold" />
+    <Span text="italic " fontStyle="Italic" />
+    <Span text="and " />
+    <Span text="underline." textDecoration="Underline" />
+  </FormattedString>
+</TextView>
+```
+
+[> screenshots for=TextView <]
+
+## Props
+
+| 이름 | 타입 | 설명 |
+|------|------|-------------|
+| `text` | `String` | 텍스트 뷰의 값.
+| `hint` | `String` | 텍스트 플레이스홀더.
+| `editable` | `Boolean` | `true`로 설정되면 사용자가 텍스트뷰의 값을 변경할 수 있음.
+| `maxLength` | `Number` | 글자수를 제한.
+| `keyboardType` | `KeyboardType` | 쉬운 입력을 위한 커스텀 키보드를 보여줌. 가능한 값: `datetime`, `phone`, `number`, `url`, `email`.
+| `returnKeyType` | `ReturnKeyType` | 리턴키의 레이블. 가능한 값: `done`, `next`, `go`, `search`, `send`.
+
+## 이벤트
+
+| 이름 | 설명 |
+|------|-------------|
+| `textChange`| 텍스트가 바뀌면 발생.
+| `returnPress`| 리턴키가 눌리면 발생
+| `focus`| 텍스트뷰가 포커스되면 발생
+| `blur`| 텍스트뷰가 포커스를 잃으면 발생
+
+## Native Component
+| Android | iOS |
+|---------|-----|
+| android.widget.EditText | UITextView
diff --git a/content/docs/ko/elements/components/time-picker.md b/content/docs/ko/elements/components/time-picker.md
new file mode 100644
index 00000000..def8bc4c
--- /dev/null
+++ b/content/docs/ko/elements/components/time-picker.md
@@ -0,0 +1,46 @@
+---
+title: 시간 선택 (TimePicker)
+apiRef: https://docs.nativescript.org/api-reference/classes/_ui_time_picker_.timepicker
+contributors: [qgp9]
+
+---
+
+시간선택(TimePicker) 컴포넌트는 사용자가 형식을 가진 시간을 선택할 수 있게 해줍니다.
+
+---
+
+```html
+<TimePicker :hour="selectedHour" :minute="selectedMinute" />
+```
+
+**노트**: 이 컴포넌트는 `v-model` 을 이용한 양방향(two-way) 바인딩을 지원합니다:
+
+```html
+<TimePicker v-model="selectedTime" />
+```
+
+[> screenshots for=TimePicker <]
+
+## Props
+
+| 이름 | 타입 | 설명 |
+|------|------|-------------|
+| `hour` | `Number` | 시간 선택기의 시
+| `minute` | `Number` | 시간 선택기의 분
+| `time` | `Date` | 시간 선택기의 시간
+| `minHour` | `Number` | 선택 가능한 최소 시
+| `maxHour` | `Number` | 선택 가능한 최대 시
+| `minMinute` | `Number` | 선택 가능한 최소 분
+| `maxMinute` | `Number` | 선택 가능한 최대 분
+| `minuteInterval` | `Number` | 선택된 분들의 간격
+
+## Events
+
+| name | description |
+|------|-------------|
+| `timeChanged` | 선택된 시간이 바뀌면 발생
+
+## Native Component
+| Android | iOS |
+|---------|-----|
+| android.widget.TimePicker | UIDatePicker
diff --git a/content/docs/ko/elements/components/web-view.md b/content/docs/ko/elements/components/web-view.md
new file mode 100644
index 00000000..d0332096
--- /dev/null
+++ b/content/docs/ko/elements/components/web-view.md
@@ -0,0 +1,34 @@
+---
+title: 웹뷰 (WebView)
+apiRef: https://docs.nativescript.org/api-reference/classes/_ui_web_view_.webview
+contributors: [qgp9]
+---
+
+웹뷰(WebView) 컴포넌트는 어플리케이션 안에 웹 컨텐츠를 표시하기 위해 사용됩니다.
+Url 이나 로컬 HTML 파일을 가리키는 `src` 속성과 함께 컴포넌트를 사용할 수 있습니다.
+
+---
+
+```html
+<WebView src="http://nativescript-vue.org/" />
+```
+
+[> screenshots for=WebView <]
+
+## Props
+
+| 이름 | 타입 | 설명 |
+|------|------|-------------|
+| `src` | `String` | 표시되는 페이지의 소스
+
+## Events
+
+| name | description |
+|------|-------------|
+| `loadStarted`| 웹뷰에서 페이지가 로딩되기 시작할때 발생
+| `loadFinished`| 웹뷰의 페이지가 다 로딩되었을때 발생
+
+## Native Component
+| Android | iOS |
+|---------|-----|
+| android.webkit.WebView | WKWebView
diff --git a/content/docs/ko/elements/dialogs/action.md b/content/docs/ko/elements/dialogs/action.md
new file mode 100644
index 00000000..14fa4cce
--- /dev/null
+++ b/content/docs/ko/elements/dialogs/action.md
@@ -0,0 +1,24 @@
+---
+title: 액션다이얼로그 (ActionDialog)
+apiRef: https://docs.nativescript.org/api-reference/modules/_ui_dialogs_#action
+contributors: [qgp9]
+---
+
+액션 다이얼로그(ActionDialog)로 선택가능한 옵션들의 리스트를 가진  다이얼로그를 만들 수 있습니다. selectable options.
+
+---
+
+```javascript
+const dialogs = require('ui/dialogs')
+
+module.exports = {
+  mounted() {
+    dialogs.action('Choose one!', 'Or cancel...', ['cheese', 'wine'])
+    .then(result => {
+      console.log(result);
+    })
+  }
+}
+```
+
+[> screenshots for=ActionDialog <]
diff --git a/content/docs/ko/elements/dialogs/alert.md b/content/docs/ko/elements/dialogs/alert.md
new file mode 100644
index 00000000..be10df96
--- /dev/null
+++ b/content/docs/ko/elements/dialogs/alert.md
@@ -0,0 +1,36 @@
+---
+title: 경고창 (AlertDialog)
+apiRef: https://docs.nativescript.org/api-reference/modules/_ui_dialogs_#alert
+contributors: [qgp9]
+---
+
+경고창(AlertDialog)는 확인을 요청하는 간단한 모달 알림창으로 작동합니다.
+
+---
+
+```javascript
+const dialogs = require('ui/dialogs')
+
+module.exports = {
+  mounted() {
+    dialogs.alert('Hello!')
+    .then(() => {
+      console.log("Dialog closed")
+    })
+  }
+}
+```
+
+AlertDialog는 전역적으로 사용할 수 있기 때문에, 다이얼로그 모듈에서 임포트하는 대신, 다음과 같이 간단히 호출할 수 있습니다.
+
+```javascript
+alert('Hello!')
+.then(() => {
+  console.log("Dialog closed")
+})
+```
+
+여러분의 코드 어디에서라도 말이죠.
+
+
+[> screenshots for=AlertDialog <]
diff --git a/content/docs/ko/elements/dialogs/confirm.md b/content/docs/ko/elements/dialogs/confirm.md
new file mode 100644
index 00000000..6a6beb81
--- /dev/null
+++ b/content/docs/ko/elements/dialogs/confirm.md
@@ -0,0 +1,36 @@
+---
+title: 확인창 (ConfirmDialog)
+apiRef: https://docs.nativescript.org/api-reference/modules/_ui_dialogs_#confirm
+contributors: [qgp9]
+---
+
+확인창(ConfirmDialog) 는 부울값(예/아니오, Yes/No) 를 입력하는 다이얼로그입니다.
+
+---
+
+```javascript
+const dialogs = require('ui/dialogs')
+
+module.exports = {
+  mounted() {
+    dialogs.confirm('Are you ready?')
+    .then(result => {
+      console.log(result)
+    })
+  }
+}
+```
+
+ConfirmDialog는 전역적으로 사용할 수 있기 때문에, 다이얼로그 모듈에서 임포트하는 대신, 다음과 같이 간단히 호출할 수 있습니다.
+
+
+```javascript
+confirm('Are you ready?')
+.then(result => {
+  console.log(result)
+})
+```
+
+여러분의 코드 어디에서라도 말이죠.
+
+[> screenshots for=ConfirmDialog <]
diff --git a/content/docs/ko/elements/dialogs/login.md b/content/docs/ko/elements/dialogs/login.md
new file mode 100644
index 00000000..dd0de541
--- /dev/null
+++ b/content/docs/ko/elements/dialogs/login.md
@@ -0,0 +1,24 @@
+---
+title: 로그인창 (LoginDialog)
+apiRef: https://docs.nativescript.org/api-reference/modules/_ui_dialogs_#login
+contributors: [qgp9]
+---
+
+로그인창(LoginDialog)는 사용자 인증에 사용되는 두개의 인풋을 가집니다.
+
+---
+
+```javascript
+const dialogs = require('ui/dialogs')
+
+module.exports = {
+  mounted() {
+    dialogs.login('Please log in', 'Username', 'Password')
+    .then(result => {
+      console.log(result)
+    })
+  }
+}
+```
+
+[> screenshots for=LoginDialog <]
diff --git a/content/docs/ko/elements/dialogs/prompt.md b/content/docs/ko/elements/dialogs/prompt.md
new file mode 100644
index 00000000..630d8dc5
--- /dev/null
+++ b/content/docs/ko/elements/dialogs/prompt.md
@@ -0,0 +1,34 @@
+---
+title: PromptDialog
+apiRef: https://docs.nativescript.org/api-reference/modules/_ui_dialogs_#prompt
+contributors: [qgp9]
+---
+
+PromptDialog는 사용자의 인풋을 요구할 수 있게 해줍니다.
+
+---
+
+```javascript
+const dialogs = require('ui/dialogs')
+
+module.exports = {
+  mounted() {
+    dialogs.prompt('How are you?', 'Amazing!')
+    .then(result => {
+      console.log(`Dialog result: ${result.result}, text: ${result.text}`)
+    })
+  }
+}
+```
+
+PromptDialog 는 전역적으로 사용할 수 있기 때문에, 다이얼로그 모듈에서 임포트하는 대신, 다음과 같이 간단히 호출할 수 있습니다.
+```javascript
+prompt('How are you?', 'Amazing!')
+.then(result => {
+  console.log(`Dialog result: ${result.result}, text: ${result.text}`)
+})
+```
+
+여러분의 코드 어디에서라도 말이죠.
+
+[> screenshots for=PromptDialog <]
diff --git a/content/docs/ko/elements/layouts/absolute-layout.md b/content/docs/ko/elements/layouts/absolute-layout.md
new file mode 100644
index 00000000..33b5b738
--- /dev/null
+++ b/content/docs/ko/elements/layouts/absolute-layout.md
@@ -0,0 +1,46 @@
+---
+title: 고정 (AbsoluteLayout)
+apiRef: https://docs.nativescript.org/api-reference/modules/_ui_layouts_absolute_layout_
+contributors: [qgp9]
+---
+
+AbsoluteLayout 컨테이너는 네이티브-스크립트에서 가장 간단한 레이아웃 컨테이너입니다. 이 컨테이너는 자식들의 위치로 절대 top-left 좌표를 사용합니다.
+AbsoluteLayout은 자식들의 레이아웃을 제안하지 않고 런타임에 자신의 크기가 변경될때 자식들의 크기를 변경하지 않습니다.
+
+### 예제
+
+#### 그리드 같은(grid-like) 레이아웃
+
+```html
+<AbsoluteLayout backgroundColor="#3c495e">
+  <Label text="10,10" left="10" top="10" width="100" height="100" backgroundColor="#43b883"/>
+  <Label text="120,10" left="120" top="10" width="100" height="100" backgroundColor="#43b883"/>
+  <Label text="10,120" left="10" top="120" width="100" height="100" backgroundColor="#43b883"/>
+  <Label text="120,120" left="120" top="120" width="100" height="100" backgroundColor="#43b883"/>
+</AbsoluteLayout>
+```
+<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/absolute_layout_grid.svg" />
+
+#### 요소 겹침 (Overlapping elements)
+
+```html
+<AbsoluteLayout backgroundColor="#3c495e">
+  <Label text="10,10" left="10" top="10" width="100" height="100" backgroundColor="#289062"/>
+  <Label text="30,40" left="30" top="40" width="100" height="100" backgroundColor="#43b883"/>
+</AbsoluteLayout>
+```
+<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/absolute_layout_overlap.svg" />
+
+
+## Props
+
+AbsoluteLayout은 prop이 없습니다.
+
+## 추가적인 자식들의 Props (Additional Children Props)
+
+요소가 AbsoluteLayout의 바로 아래 자식일때, 다음 prop들을 사용할 수 있습니다:
+
+| 이름 | 타입 | 설명 |
+|------|------|-------------|
+| `top` | `Number` | 부모 AbsoluteLayout의 top으로 부터 거리
+| `left` | `Number` | 부모 AbsoluteLayout의 left로 부터 거리
diff --git a/content/docs/ko/elements/layouts/dock-layout.md b/content/docs/ko/elements/layouts/dock-layout.md
new file mode 100644
index 00000000..540b76b0
--- /dev/null
+++ b/content/docs/ko/elements/layouts/dock-layout.md
@@ -0,0 +1,61 @@
+---
+title: 독 (DockLayout)
+apiRef: https://docs.nativescript.org/api-reference/modules/_ui_layouts_dock_layout_
+contributors: [qgp9]
+---
+
+DockLayout는 도킹 메커니즘을 제공하는 레이아웃입니다. 자식 요소들은 레이아웃의 `left`, `right`, `top`, `bottom` 혹은 center 에 도킹될 수 있습니다. 자식 요소의 도킹 방향을 정의하려면 `dock` 프로퍼티를 사용합니다.
+자식 요소를 DockLayout의 중간(center)에 위치시킬때, 자식요소는 반드시 DockLayout의 **마지막 자식** 이어야 하고
+DockLayout의 `stretchLastChild` 프로퍼티가 반드시 `true` 여야 합니다.
+
+### 샘플
+
+#### 마지막 자식을 늘리지(stretch)않고 모든 방향으로 도킹
+
+```html
+<DockLayout stretchLastChild="false" backgroundColor="#3c495e">
+  <Label text="left" dock="left" width="40" backgroundColor="#43b883"/>
+  <Label text="top" dock="top" height="40" backgroundColor="#289062"/>
+  <Label text="right" dock="right" width="40" backgroundColor="#43b883"/>
+  <Label text="bottom" dock="bottom" height="40" backgroundColor="#289062"/>
+</DockLayout>
+```
+<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/dock_layout_no_stretch.svg" />
+
+#### 마지막 자식을 늘리면서(stretch) 모든 방향으로 도킹
+
+```html
+<DockLayout stretchLastChild="true" backgroundColor="#3c495e">
+  <Label text="left" dock="left" width="40" backgroundColor="#43b883"/>
+  <Label text="top" dock="top" height="40" backgroundColor="#289062"/>
+  <Label text="right" dock="right" width="40" backgroundColor="#43b883"/>
+  <Label text="bottom" dock="bottom" backgroundColor="#1c6b48"/>
+</DockLayout>
+```
+<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/dock_layout_stretch.svg" />
+
+#### 한 방향의 여러 자식들
+
+```html
+<DockLayout stretchLastChild="true" backgroundColor="#3c495e">
+  <Label text="left 1" dock="left" width="40" backgroundColor="#43b883"/>
+  <Label text="left 2" dock="left" width="40" backgroundColor="#289062"/>
+  <Label text="left 3" dock="left" width="40" backgroundColor="#1c6b48"/>
+  <Label text="last child" backgroundColor="#43b883"/>
+</DockLayout>
+```
+<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/dock_layout_multiple_on_same_side.svg" />
+
+## Props
+
+| 이름 | 타입 | 설명 |
+|------|------|-------------|
+`stretchLastChild` | `Boolean` | 마지막 자식을 남은 공간에 맞추는 늘이기(stretching)의 활성/비활성화
+
+## 추가적인 자식 Props
+
+요소가 DockLayout의 직접적인 자식일때 다음 Prop들이 가능:
+
+| 이름 | 타입 | 설명 |
+|------|------|-------------|
+`dock` | `String` | 요소의 도킹 방향을 지정. 가능한 값: `top`, `right`, `bottom`, `left`
diff --git a/content/docs/ko/elements/layouts/flexbox-layout.md b/content/docs/ko/elements/layouts/flexbox-layout.md
new file mode 100644
index 00000000..6be50e7a
--- /dev/null
+++ b/content/docs/ko/elements/layouts/flexbox-layout.md
@@ -0,0 +1,100 @@
+---
+title: 플렉스박스 (FlexboxLayout)
+apiRef: https://docs.nativescript.org/api-reference/modules/_ui_layouts_flexbox_layout_
+contributors: [qgp9]
+---
+
+FlexboxLayout 컨테이너는 [Css Flexbox Layout](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)의 유사 구현입니다.
+
+### 샘플
+
+#### 기본 플렉스 레이아웃
+
+```html
+<FlexboxLayout backgroundColor="#3c495e">
+  <Label text="first" width="70" backgroundColor="#43b883"/>
+  <Label text="second" width="70" backgroundColor="#1c6b48"/>
+  <Label text="third" width="70" backgroundColor="#289062"/>
+</FlexboxLayout>
+```
+<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/flexbox_layout_row_stretch.svg" />
+
+#### 컬럼 플렉스 레이아웃
+
+```html
+<FlexboxLayout flexDirection="column" backgroundColor="#3c495e">
+  <Label text="first" height="70" backgroundColor="#43b883"/>
+  <Label text="second" height="70" backgroundColor="#1c6b48"/>
+  <Label text="third" height="70" backgroundColor="#289062"/>
+</FlexboxLayout>
+```
+<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/flexbox_layout_column_stretch.svg" />
+
+#### 행 레이아웃과 flex-start 로 아이템 정렬(align)
+
+```html
+<FlexboxLayout alignItems="flex-start" backgroundColor="#3c495e">
+  <Label text="first" width="70" height="70" backgroundColor="#43b883"/>
+  <Label text="second" width="70" height="70" backgroundColor="#1c6b48"/>
+  <Label text="third" width="70" height="70" backgroundColor="#289062"/>
+</FlexboxLayout>
+```
+<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/flexbox_layout_row_flex-start.svg" />
+
+#### 행 레이아웃과 사용자 순서
+
+```html
+<FlexboxLayout alignItems="flex-start" backgroundColor="#3c495e">
+  <Label text="first" order="2" width="70" height="70" backgroundColor="#43b883"/>
+  <Label text="second" order="3" width="70" height="70" backgroundColor="#1c6b48"/>
+  <Label text="third" order="1" width="70" height="70" backgroundColor="#289062"/>
+</FlexboxLayout>
+```
+<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/flexbox_layout_row_custom_order.svg" />
+
+#### 랩핑 (Wrapping)
+
+```html
+<FlexboxLayout flexWrap="wrap" backgroundColor="#3c495e">
+  <Label text="first" width="30%" backgroundColor="#43b883"/>
+  <Label text="second" width="30%" backgroundColor="#1c6b48"/>
+  <Label text="third" width="30%" backgroundColor="#289062"/>
+  <Label text="fourth" width="30%" backgroundColor="#289062"/>
+</FlexboxLayout>
+```
+<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/flexbox_layout_wrap.svg" />
+
+#### 리버스 컬럼과 여러가지 alignSelf
+
+```html
+<FlexboxLayout flexDirection="column-reverse"
+               justifyContent="space-around" backgroundColor="#3c495e">
+  <Label text="first" height="70" backgroundColor="#43b883"/>
+  <Label text="second" alignSelf="center" width="70" height="70" backgroundColor="#1c6b48"/>
+  <Label text="third\nflex-end" alignSelf="flex-end" width="70" height="70" backgroundColor="#289062"/>
+  <Label text="fourth" height="70" backgroundColor="#289062"/>
+</FlexboxLayout>
+```
+<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/flexbox_layout_column_reverse_space_around_align_self.svg" />
+
+## Props
+
+| 이름 | 타입 | 설명 |
+|-----|-----|-----|
+`flexDirection` | `String` | flex 컨테이너 안에서 flex 아이템들이 위치하는 방향. 다음 4가지 값이 가능: `row` (텍스트 방향과 같음), `row-reverse` (텍스트 방향과 반대), `column` (row와 같지만 위에서 아래), and `column-reverse` (row-reverse와 같지만 위에서 아래). 기본값은 `row`.
+`flexWrap` | `String` | flex 아이템이 한 줄로 강제될지 여러 줄이 가능할지 설정. 여러 줄로 설정되면, 새로운 줄이 쌓이는 방향을 결정하는 교차축(cross-axis)도 정의됨. 3가지 다른 값이 가능:  `nowrap` (한줄. 컨텐츠는 오버플로우 될 수 있음), `wrap` (여러줄. 방향은 flexDirection), `wrap-reverse` (여러 줄. flexDirection 반대방향). 기본값은  `nowrap`.
+`justifyContent` | `String` |  메인 축을 따라 정렬. 줄 위의 모든 플렉스 아이템들이 융통성이 없을때 혹은 융통성은 있지만 최대 크기에 도달했을때, 남은 공간을 분배하는데 유용합니다. 또한 아이템들이 줄을 넘어갈 때(overflow), 아이템들의 정렬을 제어합니다. 가능한 5가지 값: `flex-start` (아이템들이 줄의 시작쪽으로 뭉쳐짐(pack)), `flex-end` (아이템들이 줄의 끝쪽으로 뭉쳐짐), `center` (아이템들이 줄의 중간에 위치), `space-between` (아이템들이 줄위에 균등하게 배치됨; 첫번째 아이템의 줄의 시작 부분에, 마지막 아이템의 줄의 끝에 배치), `space-around` (아이템들이 그들ㅇ르 둘러싸는 일정한 공간을 가지며 중위에 균등하게 배치됨.). 기본값은 `flex-start`.
+`alignItems` | `String` | 플렉스 항목들이 교차축(cross axis)을 따라 배치되는 방법을 설정. `justifyContent` 의 교차축(주축의 수직) 버젼으로 생각할 수 있습니다. 5가지 가능한 값: `flex-start` (아이템의 교차-시작 여백(margin) 가장자리가 줄의 교차-시작에 위치), `flex-end` (교차-끝 여백 가장자리가 줄의 교차-끝 부분에 놓임), `center` (아이템들이 교차축의 중앙에 위치), `baseline` (기준선 정렬(baseline align) 처럼 정렬됨), `stretch` (아이템들을 늘려서 컨테이너를 채움. 하지만 `min-width`/`max-width` 는 유지됨). 기본 값은 `stretch`.
+`alignContent` | `String` | `justifyContent` 가 주축 내의 각 아이템들을 배치하는 것 처럼, `alignContent`sms 교차축 상에서 아이템들을 배치. 가능한 6가지 값: `flex-start` (라인들이 컨테이너의 시작부분으로 뭉쳐짐), `flex-end` (라인들이 컨테이너의 끝 부분으로 뭉쳐짐), `center` (라인들이 컨테이너의 중앙으로 뭉쳐짐), `space-between` (라인들이 균등하게 배포치됨. 첫번째 라인은 컨테이너의 시작 부분에, 마지막 라인은 컨테이너의 끝 부분에 배치.), `space-around` (라인들이 일정한 간격으로 균등하게 배치됨), `stretch` (라인들이 남은 공간을 채우도록 늘려짐). 기본값은 `stretch`. 이 프로퍼티는 플렉스 컨테이너가 하나의 라인만 가지고 있을때는 아무런 효과가 없음.
+
+## 추가적인 자식 Props
+
+요소가 FlexboxLayout의 직접적인 자식일때 다음 prop들이 가능합니다:
+
+| 이름 | 타입 | 설명 |
+|------|------|-------------|
+`order` | `Number` | 플렉스 아이템의 기본 순서를 변경
+`flexGrow` | `Number` | 플렉스 아이템이 필요한 경우 커질수 (grow) 있는지 나타내는 단위 없는 비율. 이 값은 아이템이 차지해야 하는 플렉스 컨테이너의 사용가능한 공간의 크기를 결정.
+`flexShrink` | `Number` | "flex shrink factor" 값. 행(row)에 충분한 공간이 없을때 플렉스 아이템이 다른 플렉스아이템들에대해 상대적으로 얼마나 줄어들어야햐는지 결정. 생략될 경우, 1이 설정되고 음수 공간을 분배할땐 flex basis 가 곱해집니다.
+`alignSelf` | `String` | `alignItems`를 오버라이드. `alignItems` 처럼 5가지 값이 가능:`flex-start` (아이템의 교차-시작 여백(margin) 가장자리가 줄의 교차-시작에 위치), `flex-end` (교차-끝 여백 가장자리가 줄의 교차-끝 부분에 놓임), `center` (아이템들이 교차축의 중앙에 위치), `baseline` (기준선 정렬(baseline align) 처럼 정렬됨), `stretch` (아이템들을 늘려서 컨테이너를 채움. 하지만 `min-width`/`max-width` 는 유지됨). 기본 값은 `stretch`.
+`flexWrapBefore` | `Boolean` | 아이템 래핑을 제어하는 부울값. `true` 로 설정되면 아이템의 새로운 라인으로 래핑 되도록 강제. 기본값은 `false`. (이 프로퍼티는 공식 flexbox 스펙에는 없습니다.)
diff --git a/content/docs/ko/elements/layouts/grid-layout.md b/content/docs/ko/elements/layouts/grid-layout.md
new file mode 100644
index 00000000..414bb327
--- /dev/null
+++ b/content/docs/ko/elements/layouts/grid-layout.md
@@ -0,0 +1,76 @@
+---
+title: 그리드 (GridLayout)
+apiRef: https://docs.nativescript.org/api-reference/modules/_ui_layouts_grid_layout_
+contributors: [qgp9]
+---
+
+GridLayout은 자식 요소들을 행과 열의 테이블 구조로 배치합니다.
+하나의 셀(cell)은 여러 자식 요소를 가질 수 있고, 여러 행/열로 확장(span)되거나 겹쳐질(overlap) 수 있습니다.
+GridLayout은 기본값으로 하나의 행과 하나의 열을 가지고 있습니다.
+행/열을 추가하려면,  열의 정의를(쉼표로 분리) `columns` 프로퍼티에, 행의 정의를(쉼표로 분리) `rows` 프로퍼티에 명시해야 합니다.
+열의 너비와 행의 높이는  픽셀의 절대량, 사용 가능한 공간의 퍼센티지, 혹은 자동으로 지정할 수 있습니다.:
+
+- **Absolute**: 고정된 픽셀 크기.
+- **Star (*)**: 가능한 최대 값(모든 auto 와, 고정 크기 열이 채워진 후), 모든 star-sized 열 크기에 비례하여 나누어짐. 따라서 `3/7` 은 `30/70` 과 같음.
+- **Auto**: 포함된 자식 요소들에 필요한 최대한의 공간을 차지.
+
+### 예제
+
+#### 복잡한 그리드 레이아웃
+
+```html
+<GridLayout columns="40, auto, *" rows="40, auto, *" backgroundColor="#3c495e">
+  <Label text="0,0" row="0" col="0" backgroundColor="#43b883"/>
+  <Label text="0,1" row="0" col="1" colSpan="2" backgroundColor="#1c6b48"/>
+  <Label text="1,0" row="1" col="0" rowSpan="2" backgroundColor="#289062"/>
+  <Label text="1,1" row="1" col="1" backgroundColor="#43b883"/>
+  <Label text="1,2" row="1" col="2" backgroundColor="#289062"/>
+  <Label text="2,1" row="2" col="1" backgroundColor="#1c6b48"/>
+  <Label text="2,2" row="2" col="2" backgroundColor="#43b883"/>
+</GridLayout>
+```
+<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/grid_layout.svg" />
+
+#### 그리드 레이아웃과 별-크기(star sizing)
+
+```html
+<GridLayout columns="*, 2*" rows="2*, 3*" backgroundColor="#3c495e">
+  <Label text="0,0" row="0" col="0" backgroundColor="#43b883"/>
+  <Label text="0,1" row="0" col="1" backgroundColor="#1c6b48"/>
+  <Label text="1,0" row="1" col="0" backgroundColor="#289062"/>
+  <Label text="1,1" row="1" col="1" backgroundColor="#43b883"/>
+</GridLayout>
+```
+<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/grid_layout_star_sizing.svg" />
+
+#### 그리드 레이아웃과 고정/자동 크기
+
+```html
+<GridLayout columns="80, auto" rows="80, 80" backgroundColor="#3c495e">
+  <Label text="0,0" row="0" col="0" backgroundColor="#43b883"/>
+  <Label text="0,1" row="0" col="1" backgroundColor="#1c6b48"/>
+  <Label text="1,0" row="1" col="0" backgroundColor="#289062"/>
+  <Label text="1,1" row="1" col="1" backgroundColor="#43b883"/>
+</GridLayout>
+```
+<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/grid_layout_fixed_auto.svg" />
+
+
+## Props
+
+| 이름 | 타입 | 설명 |
+|------|------|-------------|
+`columns` | `String` | 열의 너비를 나타내는 쉼표로 나누어진 문자열 값. 열의 너비는 절대값이나 `auto`, `*`가 가능. 숫자는 고정된 절대값 너비를 의미하고, `auto`는 가장 넓은 자식의 너비, `*` 는 컬럼이 가능한 모든 가로공간을 차지하도록 만듬.
+`rows` | `String` | 행의 높이를 나타내는 쉼표로 나누어진 문자열 값. 행의 높이는 절대값이나 `auto`, `*`가 가능. 숫자는 고정된 절대값 높이를 의미하고, `auto`는 가장 높은 자식의 높이, `*` 는 행이 가능한 모든 세로 공간을 차지하도록 만듬.
+
+
+## 추가적인 자식 Props
+
+요소가 GridLayout의 직접적인 자식일때 다음 prop들이 가능합니다:
+
+| 이름 | 타입 | 설명 |
+|------|------|-------------|
+`row` | `Number` | 요소의 행
+`column` | `Number` | 요소의 열
+`rowSpan` | `Number` | 요소가 확장되는 행의 수
+`columnSpan` | `Number` | 요소가 확장되는 열의 수
diff --git a/content/docs/ko/elements/layouts/stack-layout.md b/content/docs/ko/elements/layouts/stack-layout.md
new file mode 100644
index 00000000..361e6551
--- /dev/null
+++ b/content/docs/ko/elements/layouts/stack-layout.md
@@ -0,0 +1,73 @@
+---
+title: 스택 (StackLayout)
+apiRef: https://docs.nativescript.org/api-reference/modules/_ui_layouts_stack_layout_
+contributors: [qgp9]
+---
+
+StackLayout 컨테이너는 자식 요소들을 세로(기본값)나 가로로 쌓음(stack)
+
+### 예제
+
+#### 기본 StackLayout
+
+```html
+<StackLayout backgroundColor="#3c495e">
+  <Label text="first" height="70" backgroundColor="#43b883"/>
+  <Label text="second" height="70" backgroundColor="#289062"/>
+  <Label text="third" height="70" backgroundColor="#1c6b48"/>
+</StackLayout>
+```
+<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/stack_layout_vertical.svg" />
+
+#### 가로방향 StackLayout
+
+```html
+<StackLayout orientation="horizontal" backgroundColor="#3c495e">
+  <Label text="first" width="70" backgroundColor="#43b883"/>
+  <Label text="second" width="70" backgroundColor="#289062"/>
+  <Label text="third" width="70" backgroundColor="#1c6b48"/>
+</StackLayout>
+```
+<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/stack_layout_horizontal.svg" />
+
+#### 가로로 자식들이 정렬된 StackLayout
+
+```html
+<StackLayout backgroundColor="#3c495e">
+  <Label text="left" horizontalAlignment="left"
+         width="33%" height="70" backgroundColor="#43b883"/>
+  <Label text="center" horizontalAlignment="center"
+         width="33%" height="70" backgroundColor="#289062"/>
+  <Label text="right" horizontalAlignment="right"
+         width="33%" height="70" backgroundColor="#1c6b48"/>
+  <Label text="stretch" horizontalAlignment="stretch"
+         height="70" backgroundColor="#43b883"/>
+</StackLayout>
+```
+<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/stack_layout_vertical_align_children.svg" />
+
+#### 수직으로 자식들이 정렬된 가로방향 StackLayout
+
+```html
+<StackLayout orientation="horizontal" backgroundColor="#3c495e">
+  <Label text="top" verticalAlignment="top"
+         width="70" height="33%" backgroundColor="#43b883"/>
+  <Label text="center" verticalAlignment="center"
+         width="70" height="33%" backgroundColor="#289062"/>
+  <Label text="bottom" verticalAlignment="bottom"
+         width="70" height="33%" backgroundColor="#1c6b48"/>
+  <Label text="stretch" verticalAlignment="stretch"
+         width="70" backgroundColor="#43b883"/>
+</StackLayout>
+```
+<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/stack_layout_horizontal_align_children.svg" />
+
+## Props
+
+| 이름 | 타입 | 설명 |
+|------|------|-------------|
+`orientation` | `String` | 쌓이는 방향을 지정. 2가지 값이 가능: `verticla`, `horizontal`. 기본값은 `verticla`
+
+## 추가적인 자식 Props
+
+없음.
diff --git a/content/docs/ko/elements/layouts/wrap-layout.md b/content/docs/ko/elements/layouts/wrap-layout.md
new file mode 100644
index 00000000..e5e34561
--- /dev/null
+++ b/content/docs/ko/elements/layouts/wrap-layout.md
@@ -0,0 +1,46 @@
+---
+title: 랩핑 (WrapLayout)
+apiRef: https://docs.nativescript.org/api-reference/modules/_ui_layouts_wrap_layout_
+contributors: [qgp9]
+---
+
+WrapLayout 컨테이너는 orientation 프로퍼티에 기초하여 공간이 다 찰때까지 자식들을 행이나 열에 위치시키고 그들을 새로운 행이나 열로 래핑합니다.
+
+### 예제
+
+#### 기본 WrapLayout
+
+```html
+<WrapLayout backgroundColor="#3c495e">
+  <Label text="first" width="30%" height="30%" backgroundColor="#43b883"/>
+  <Label text="second" width="30%" height="30%" backgroundColor="#1c6b48"/>
+  <Label text="third" width="30%" height="30%" backgroundColor="#289062"/>
+  <Label text="fourth" width="30%" height="30%" backgroundColor="#289062"/>
+</WrapLayout>
+```
+<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/wrap_layout_horizontal.svg" />
+
+#### 수직 WrapLayout
+
+```html
+<WrapLayout orientation="vertical" backgroundColor="#3c495e">
+  <Label text="first" width="30%" height="30%" backgroundColor="#43b883"/>
+  <Label text="second" width="30%" height="30%" backgroundColor="#1c6b48"/>
+  <Label text="third" width="30%" height="30%" backgroundColor="#289062"/>
+  <Label text="fourth" width="30%" height="30%" backgroundColor="#289062"/>
+</WrapLayout>
+```
+<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/wrap_layout_vertical.svg" />
+
+## Props
+
+| 이름 | 타입 | 설명 |
+|------|------|-------------|
+`orientation` | `String` | 흐름의 방향. `horizontal` 이면 아이템이 행들에 배치됨. `vertical` 이면 아이템들이 열들에 배치됨. 기본값은 `horizontal`.
+`itemWidth` | `Number` | 각 자식을 측정하고 위치시키는데 쓰이는 너비. 기본값은 `Number.NaN`. 이 값은 자식들을 제한하지 않음.
+`itemHeight` | `Number` | 각 자식을 측정하고 위치시키는데 쓰이는 높이. 기본값은 `Number.NaN`. 이 값은 자식들을 제한하지 않음.
+
+
+## 추가적인 자식 Props
+
+없음
diff --git a/content/docs/ko/getting-started/1-quick-start.md b/content/docs/ko/getting-started/1-quick-start.md
new file mode 100644
index 00000000..1dda73ae
--- /dev/null
+++ b/content/docs/ko/getting-started/1-quick-start.md
@@ -0,0 +1,25 @@
+---
+title: 빨리 시작하기
+contributors: [qgp9]
+---
+
+NativeScript-Vue를 쉽게 사용해보고 싶다면, [NativeScript Playground](https://play.nativescript.org?template=play-vue)를 사용해보시기를 강력하게 추천합니다. 그것이 NativeScript-Vue를 사용해 볼 수 있는 가장 쉬운 시작입니다.
+
+이미 여러분의 로컬 머신에서 작업할 준비가 되었고, [네이티브 개발을 위한 시스템](/ko/docs/getting-started/installation)이 준비되었다면 템플릿을 사용하여 시작할 수 있습니다.
+
+```shell
+$ tns create my-app --template nativescript-vue-template
+$ cd my-app
+```
+
+그리고나면 당신의 앱을 다음처럼 열 수 있습니다.
+
+```shell
+$ tns run android # 안드로이드의 경우
+```
+
+```shell
+$ tns run ios # iOS의 경우
+```
+
+사용가능한 템플릿의 더 자세한 정보는 [템플릿 문서](/ko/docs/getting-started/templates)를 참고하세요.
diff --git a/content/docs/ko/getting-started/2-installation.md b/content/docs/ko/getting-started/2-installation.md
new file mode 100644
index 00000000..f1230dd5
--- /dev/null
+++ b/content/docs/ko/getting-started/2-installation.md
@@ -0,0 +1,47 @@
+---
+title: 설치
+contributors: [qgp9]
+---
+
+NativeScript-Vue를 사용하기 위해서, 어플리케이션을 컴팔할 수 있도록 시스템이 적절히 설정되어야 합니다.
+
+## 먼저 필요한 것들(Prerequisites)
+
+- [Node.js](#nodejs)
+- [NativeScript CLI](#nativescript-cli)
+- [윈도우즈](#windows) (윈도우에서 안드로이드 앱을 개발할 경우)
+- [맥OS](#macos) (맥에서 안드로이드/iOS 앱을 개발할 경우)
+- [리눅스](#linux) (리눅스에서 안드로이드 앱을 개발할 경우)
+
+### Node.js
+
+최신 "LTS" 버젼의 Node.js를 [https://nodejs.org/](https://nodejs.org/)에서 다운받아 설치하세요. 설치 후 터미널을 재 시작 하고나서 `node --version` 명령어로 Node.js 가 잘 설치되어 있는지 확인하세요.
+
+### NativeScript CLI
+
+네이티브-스크립트 CLI 를 설치하려면 터미널을 열고 다음 명령어를 실행합니다.
+
+```shell
+$ npm install -g nativescript
+```
+
+터미널에서 `tns` 명령어를 실행해 보면 잘 설치되었는지 확인할 수 있습니다. 명령어를 실행하면 가능한 명령들이 출력되어야 합니다.
+
+
+### 윈도우즈 (windows)
+
+윈도우 시스템 필요조건과 안드로이드 SDK 설정 방법:
+
+[Advanced setup: Windows](https://docs.nativescript.org/start/ns-setup-win)
+
+### 맥OS (macOS)
+
+맥 시스템의 필요조건과 Xcode, 안드로이드 SDK 개발환경 설정 방법:
+
+[Advanced setup: macOS](https://docs.nativescript.org/start/ns-setup-os-x)
+
+### 리눅스 (Linux)
+
+리눅스 시스템 필요조건과 안드로이드 SDK 설정 방법:
+
+[Advanced setup: Linux](https://docs.nativescript.org/start/ns-setup-linux)
diff --git a/content/docs/ko/getting-started/3-templates.md b/content/docs/ko/getting-started/3-templates.md
new file mode 100644
index 00000000..479d180d
--- /dev/null
+++ b/content/docs/ko/getting-started/3-templates.md
@@ -0,0 +1,78 @@
+---
+title: 템플릿
+contributors: [qgp9]
+outdated: true
+---
+
+여러분의 `nativescript-vue` 앱을 시작하기 위해 네이티브-스크립트의 [템플릿 시스템](https://docs.nativescript.org/tooling/app-templates)을 사용할 수 있습니다. 이 템플릿들은 `nativescript-vue` 플러그인을 사용하는 네이티브-스크립트 앱을 생성합니다. 어떤 템플릿들은 Vue.js 단일 파일 컴포넌트(`.vue`) 와 라이브-리로드(livereload) 지원과 같은 추가 기능이 내장되어 있습니다.
+
+## nativescript-vue-template
+
+#### 프로젝트 링크
+
+[](https://github.com/tralves/nativescript-vue-template)
+
+#### 설명
+
+이 것은 가장 기본적인 템플릿입니다. 이 템플릿은 여러분의 앱의 시작점으로 사용될 수 있는 몇개의 앱 샘플을 포함하고 있습니다. 그것들을 시도해 보려면, `app-with-list-view.js`, `app-with-router.js`, `app-with-tab-view.js`, 또는 `app-with-vmodel.js` 의 코드들을 복사해서 여러분의 앱의 `app.js` 파일에 붙여 넣으면 됩니다.
+
+#### 설치
+
+```shell
+$ tns create sample-app --template nativescript-vue-template
+```
+
+*더 자세한 설명은 [프로젝트 링크](https://github.com/tralves/nativescript-vue-template) 를 참조하세요.*
+
+## nativescript-vue-rollup-template
+
+#### 프로젝트 링크
+
+[](https://github.com/tralves/nativescript-vue-rollup-template)
+
+#### 설명
+원래의 [rigor789's](https://github.com/rigor789/nativescript-vue-rollup-template)에서 포크된 이 프로젝트는 현재 가장 안정되고 기능적으로 완벽합니다. [🍏 🍍 🍓 Groceries Vue](https://github.com/tralves/groceries-ns-vue) 에서 어떻게 사용되는지 볼 수 있습니다.
+
+이 템플릿은 다음을 지원합니다:
+
+- livereload;
+- .vue 단일파일 컴포넌트;
+- scss 임포트와 .vue 파일의 `<style>` 태그 내에서의 사용;
+- root imports (앱 폴더의 최상단을 의미하는 `/` 으로 시작하는 임포트);
+- 바벨 (`es2015`  `stage-2` presets);
+
+#### 설치
+
+```shell
+$ tns create sample-app --template nativescript-vue-rollup-template
+```
+
+*더 자세한 정보는 [프로젝트 링크](https://github.com/tralves/nativescript-vue-rollup-template) 를 참조하세요*
+
+## nativescript-vue-webpack-template
+
+#### 프로젝트 링크
+
+[](https://github.com/tralves/nativescript-vue-webpack-template)
+
+#### 설명
+
+웹팩 템플릿은 rollup 과 같은 기능을 가진 웹팩(webpack)을 이용합니다.
+이 템플릿은 코드공유 즉, 웹 빌드와 네이티브(안드로이드/iOS) 빌드간에 최대한 많은 로직을 공유하는 프로젝트를 만들수 있는 기능을 지원하기 위해 발전하고 있습니다.
+
+
+ 기능:
+
+- livereload;
+- .vue 단일파일 컴포넌트;
+- scss 임포트와 .vue 파일의 `<style>` 태그 내에서의 사용;
+- 바벨 (`es2015`  `stage-2` presets);
+- (곧) 네이티브/웹 코드공유;
+
+#### 설치
+
+```shell
+$ tns create sample-app --template https://github.com/tralves/nativescript-vue-webpack-template
+```
+
+*더 자세한 정보는 [프로젝트 링크](https://github.com/tralves/nativescript-vue-webpack-template) 를 참조하세요.*
diff --git a/content/docs/ko/getting-started/4-nativescript-plugins.md b/content/docs/ko/getting-started/4-nativescript-plugins.md
new file mode 100644
index 00000000..864c9842
--- /dev/null
+++ b/content/docs/ko/getting-started/4-nativescript-plugins.md
@@ -0,0 +1,30 @@
+---
+title: 네이티브-스크립트 플러그인 사용하기
+contributors: [qgp9]
+---
+
+플러그인들은 어떤 네이티브-스크립트 앱에서도 작동하지만, 아마도 *UI* 플러그인들이 어떻게 Vue와 함께 작동하시는지 궁금할 겁니다.
+
+UI 플러그인은 네이트브스크립트 UI 플러그인이 앵귤러앱에서 사용되던 것과 거의 똑같이 작동합니다.
+예를 들면, [listview sample](https://github.com/rigor789/nativescript-vue/tree/master/samples/app/app-with-list-view.js)에 사용되는 [nativescript-gradient](https://github.com/EddyVerbruggen/nativescript-gradient)가 있습니다.
+
+네이티브-스크립트 CLI를 사용해서 플러그인을 설치하세요.
+
+```shell
+$ tns plugin add nativescript-gradient
+```
+
+앱의 엔트리 파일을 열고 다음 내용을 제일 위에 추가합니다.:
+
+```js
+Vue.registerElement('Gradient', () => require('nativescript-gradient').Gradient)
+```
+
+이제 템플릿에서 새로 등록된 요소를 사용할 수 있습니다:
+
+```html
+<Gradient direction="to right" colors="#FF0077, red, #FF00FF">
+  <Label text="Best gradient." horizontalAlignment="center"
+         style="color: white; padding: 20" />
+</Gradient>
+```
diff --git a/content/docs/ko/getting-started/5-vue-plugins.md b/content/docs/ko/getting-started/5-vue-plugins.md
new file mode 100644
index 00000000..dceff656
--- /dev/null
+++ b/content/docs/ko/getting-started/5-vue-plugins.md
@@ -0,0 +1,85 @@
+---
+title: Vue 플러그인 사용하기
+contributors: [qgp9]
+---
+
+## vue-router
+
+Coming soon...
+
+## Vuex
+
+Vuex 는 Vue.js의 상태 관리 패턴이자 라이브러리입니다. Vuex 는 어플리케이션 내의 모든 컴포넌트를 위한 저장소로 사용되고 상태들이 예측 가능한 방법으로 변화되도록 확신할 수 있는 룰을 제공합니다. Vuex는 네이티브-스크립트 앱에서도 사용될수 있습니다; 그 예로 [NativeScript Groceries Vue sample](https://github.com/tralves/groceries-ns-vue)를 확인하세요.
+
+### 설치
+
+Vue.js 앱에 설치했던 것과 같은 방법으로 Vuex를 설치합니다. npm 의 경우는 다음과 같습니다:
+
+```shell
+$ npm install vuex --save
+```
+
+최신 버젼의 Vuex가 당신의 package.json 파일에 추가될 것입니다.
+
+### 임포트 (Import)
+
+앱의 `main.js`파일의 제일 위에서 Vuex를 임포트합니다:
+
+```js
+import Vuex from 'vuex'
+Vue.use(Vuex)
+```
+이제 일반적인 웹을 위한 Vue 앱에서 앱의 상태를 관리하던 것 처럼 Vuex를 사용할 수 있습니다.
+
+### 저장소 만들기
+
+새로운 Vue 인스턴스 생성 위쪽에 혹은 별도의 폴더에 (예를 들어 앱 폴더 안의 `/store`) 상태를 저장하기 위한 새로운 const 변수를 만드세요. 이 것이 Vuex API를 호출하기 위한 장소입니다. 간단한 저장소 constant는 카운터의 상태를 포함합니다. 당신은 앱 전체에서 이 카운터의 상태의 변화를 추적할 수 있습니다:
+
+```js
+const store = new Vuex.Store({
+    state: {
+      count: 0
+    },
+    mutations: {
+      increment: state => state.count++,
+      decrement: state => state.count--
+    }
+})
+```
+
+### 저장소 사용하기
+
+이제 방금 생성한 저장소를 호출하여 상태를 관리할 수 있습니다. 아래의 예에서 앱은 당신이 '+'나 '-' 버튼을 누를 때 카운터의 상태를 추적합니다. 상태 자체를 조작하는 것이 아니라 값의 증가나 감소를 위한 mutation 을 호출한다는 점을 기억하세요..
+
+```js
+new Vue({
+  computed: {
+    count(){
+      return store.state.count
+    }
+  },
+
+  template: `
+    <Page>
+      <ScrollView>
+        <StackLayout>
+          <Button @tap="increment" text="+" />
+          <Button @tap="decrement" text="-" />
+          <Label :text="count" />
+        </StackLayout>
+      </ScrollView>
+    </Page>
+  `,
+
+  methods: {
+    increment() {
+      store.commit('increment')
+    },
+    decrement() {
+      store.commit('decrement')
+    }
+  }
+}).$start()
+```
+
+Vuex에 대한 더 자세한 정보와 상태 관리 방법은 [Vuex 문서](https://vuex.vuejs.org/en/core-concepts.html)를 참조하세요. Vuex 다양한 요소를 관리하는 좋은 아키텍쳐는 Groceries 앱의 [`/store` 폴더](https://github.com/tralves/groceries-ns-vue/tree/master/app/store)의 에서 볼 수 있습니다.
diff --git a/content/docs/ko/introduction.md b/content/docs/ko/introduction.md
new file mode 100644
index 00000000..dcf02d6c
--- /dev/null
+++ b/content/docs/ko/introduction.md
@@ -0,0 +1,44 @@
+---
+title: 소개
+contributors: [qgp9]
+---
+
+## [네이티브스크립트](https://www.nativescript.org/)가 무엇인가요?
+
+NativeScript는 자바스크립트로 실제 네이티브 모바일 어플리케이션을 만들기 위한 오픈소스 프레임워크입니다.
+
+## [Vue.js](https://vuejs.org/)는 무엇인가요?
+
+Vue(view/뷰 처럼 /vjuː/로 발음합니다) 사용자 인터페이스를 만들기 위한 진보적인 프레임워크입니다. 핵심 라이브러리는 뷰  계층(view layer)에 집중하고 있고 다른 라이브러리나 기존의 프로젝트와의 통합이 매우 쉽습니다.
+
+## NativeScript-Vue는 무엇인가요?
+
+NativeScript-Vue는 Vue.js 를 이용해 모바일 어플리케이션을 만들도록 도와주는 네이티브-스크립트 플러그인입니다. 이미 Vue.js를 사용해 보신 분이라면 NativeScript-Vue가 집처럼 편한하게 느끼실 겁니다.
+
+## 왜 NativeScript-Vue를 사용해야 할까요?
+
+모바일앱을 만들기 위한 다양한 옵션들이 있습니다. 여기에 NativeScript-Vue가 잘 맞을 상황들이 있습니다.
+
+* **진짜 네이티브 iOS와 안드로이드 앱이 필요할 경우**: 네이티브-스크립트는 iOS와 안드로이드의 네이티브 사용자 인터페이스 구성요소를 이용하여 앱을 만듭니다. 이렇게 만들어진 앱은 웹베이스가 아니기때문에 웹뷰기반(WebView-based) 프레임워크들이 가지는 한계를 따르지 않습니다. 네이티브-스크립트는 또한 [다양한 플러그인](http://market.nativescript.org/)을 통해 네이티브 장치의 기능들과 연결됩니다. 만약 여러분의 앱이 iOS나 안드로이드의 API나 기능들을 사용해야 한다면, 네이티브-스크립트로 그렇게 할 수 있습니다.
+* **자바스크립트를 좋아한다면**: 네이티브-스크립트와 함께라면 Object-C나 Swift, Java가 아니라 자바스크립트로 여러분의 모바일앱을 작성할 수 있습니다. 만약 자바스크립트를 좋아하신다면, 여러분의 웹이나 노드 앱을 만들때와 같은 언어로 네이티브 iOS와 안드로이드 앱을 작성하는 이 방법을 좋아하실 겁니다.
+* **Vue를 좋아한다면**: Vue 뷰계층에 대한 간단하고 간편한 접근으로 유명합니다. 웹앱을 Vue로 만드는 것을 좋아한다면 같은 데이터 바인딩이나 이벤트 핸들링처럼 공통된 작업을 같은 문법으로 작성할 수 있는 NativeScript-Vue가 집처럼 편안하게 느껴지실 겁니다.
+
+## 무엇을 배워야 하나요?
+
+Vue에 이미 경험이 있다면 성공적으로 NativeScript-Vue를 배우기 위해 다음 두 가지를 중요하게 고려해야 합니다.
+
+* **네이티브-스크립트 CLI로 작업하기**: 네이티브-스크립트는 웹앱이 아닌 iOS와 안드로이드 앱을 만들기 위한 프레임워크입니다. 여러분은 네이티브-스클비트 CLI 의 몇가지 명령어와 iOS 시뮬레이터, 안드로이드 가상장치의 작동방식에 대해서 배울 필요가 있습니다.
+* **네이티브-스크립트 UI 컴포넌트 배우기**: 네이티브-스크립트는 네이티브 사용자 인터페이스 컴포넌트를 사용하기 때문에 `<div>` 나 `<span>` 같은 HTML 태그가 존재하지 않습니다. 대신 여러분의 인터페이스를 렌더링하기 위해 필요한 [새로운 컴포넌트](https://docs.nativescript.org/ui/components)들을 배워야 합니다.
+
+하지만 걱정하지 마세요. NativeScript-vue를 사용하기 위한 러닝커브가 있는 건 사실이지만, iOS 나 안드로이드 개발을 처음부터 배우는 것 보다는 훨씬 쉽습니다. 어쨌든 여러분은 이미 익숙한 자바스크립트와 Vue로 소스코드를 쓰는 것이니까요.
+
+## 참여하고 싶으세요?
+
+NativeScript-Vue는 오픈소스 프레임워크이고 기여(컨트리뷰션)는 매우 권장됩니다. [프로젝트 컨트리뷰션 가이드](https://github.com/nativescript-vue/nativescript-vue/blob/master/CONTRIBUTING.md)를 확인하시고 **[네이티브-스크립트 커뮤니티 슬랙](https://developer.telerik.com/wp-login.php?action=slack-invitation)의 #vue 채널에 참여하세요**
+
+## 이 프로젝트는 얼마나 안정적인가요?
+
+NativeScript-Vue는 비교적 기능적으로 완벽합니다. 현재 우리는 다음 두가지에 집중하고 있습니다:
+
+* **문서화**: 이 사이트에 NativeScript-Vue로 할 수 있는 모든 것이 문서화 되지는 않았습니다. 샘플과 유즈케이스들이 적극적으로 추가되고 있습니다. 또한 여러분의 기여도 환영합니다.
+* **예제앱**: 우리는 사람들이 이 플러긴을 사용해 보고 피드백을 주기를 바랍니다. 관심이 있으시면 [네이티브-스크립트 커뮤니티 슬랙](https://developer.telerik.com/wp-login.php?action=slack-invitation) 에 참여하시고 #vue 채널에서 알려주세요.
diff --git a/content/docs/ko/routing/manual-routing.md b/content/docs/ko/routing/manual-routing.md
new file mode 100644
index 00000000..a2179025
--- /dev/null
+++ b/content/docs/ko/routing/manual-routing.md
@@ -0,0 +1,126 @@
+---
+title: 수동 라우팅
+contributors: [qgp9]
+---
+
+NativeScript-Vue 에서 라우팅을 하는 가장 쉬운 방법은 `$navigateTo`, `$navigateBack`, `$showModal` 과 같은 편리한 함수를 사용하는 것입니다.
+
+### `$navigateTo`
+`Master` 와 `Detail` 이라는 컴포넌트들이 있다고 가정하고, `Master` 에서 `Detail` 로 이동하기를 원할때 `$navigateTo` 를 호출하기 위한 두가지 방법이 있습니다: 뷰(view)에서 혹은 메소드에서:
+
+#### 뷰(view) 에서
+`Master` 컴포넌트의 `data` 프로퍼티를 통해 `Detail` 컴포넌트를 노출시키고 view 에서 바로 `$navigateTo(<프로퍼티 이름>)` 을 호출합니다.
+
+```vue
+const Vue = require('nativescript-vue');
+
+const Master = {
+  template: `
+    <Page>
+      <ActionBar title="Master" />
+      <StackLayout>
+        <Button text="To Details directly" @tap="$navigateTo(detailPage)" />
+      </StackLayout>
+    </Page>
+  `,
+
+  data() {
+    return {
+      detailPage: Detail
+    }
+  }
+};
+
+const Detail = {
+  template: `
+    <Page>
+      <ActionBar title="Detail"/>
+    </Page>
+  `
+};
+
+new Vue({
+  render: h => h(Master)
+}).$start()
+```
+
+#### 메소드에서
+버튼을 메소드에 연결하고 이 메소드에서 `this.$navigateTo(Detail)` 을 사용하여 `Detail` 컴포넌트로 이동합니다.
+
+```vue
+const Master = {
+  template: `
+    <Page>
+      <ActionBar title="Master" />
+      <StackLayout>
+        <Button text="To Details via method" @tap="goToDetailPage" />
+      </StackLayout>
+    </Page>
+  `,
+
+  methods: {
+    goToDetailPage() {
+      this.$navigateTo(Detail);
+    }
+  }
+};
+
+const Detail = {
+  template: `
+    <Page>
+      <ActionBar title="Detail"/>
+    </Page>
+  `
+};
+```
+
+### `$navigateBack`
+`Detail` 에 전역적으로 노출된 `$navigateBack` 함수를 호출하는 버튼을 추가합니다.
+
+```vue
+const Detail = {
+  template: `
+    <Page>
+      <ActionBar title="Detail"/>
+      <StackLayout>
+        <Button text="Back to Master" @tap="$navigateBack" />
+      </StackLayout>
+    </Page>
+  `
+};
+```
+
+### `$showModal`
+`Detail` 페이지를 모달 페이지로 보여주고 싶다면, 간단히 `$navigateTo` 를 `$showModal`로 바꾸면 됩니다.
+앞에서 처럼 이 메소드는 view 나 함수에서 호출
+
+모달을 닫으려면 `$modal.close` 을 호출하면 됩니다.
+
+```vue
+const Master = {
+  template: `
+    <Page>
+      <ActionBar title="Master" />
+      <StackLayout>
+        <Button text="Show Details modally" @tap="showDetailPageModally" />
+      </StackLayout>
+    </Page>
+  `,
+
+  methods: {
+    showDetailPageModally() {
+      this.$showModal(Detail);
+    }
+  }
+};
+
+const Detail = {
+  template: `
+    <Page>
+      <ActionBar title="Detail"/>
+      <StackLayout>
+        <Button @tap="$modal.close" text="Close" />                    
+      </StackLayout>
+    </Page>
+  `
+};
diff --git a/content/docs/ko/routing/vue-router.md b/content/docs/ko/routing/vue-router.md
new file mode 100644
index 00000000..bf73a410
--- /dev/null
+++ b/content/docs/ko/routing/vue-router.md
@@ -0,0 +1,99 @@
+---
+title: Vue Router
+contributors: [qgp9]
+---
+
+[수동 라우팅](/ko/docs/routing/manual-routing) 이 당신의 유스-케이스와 잘 맞지 않는다면, 완전히 지원되는 [Vue Router](https://router.vuejs.org/ko) 를 배워보세요.
+
+## 설치
+명령줄에서 다음을 실행합니다:
+```bash
+npm i vue-router --save
+```
+
+## 사용법
+전체 예제를 설명과 함께 잘라서 봅시다.
+Vue Router에는 더 다양한 트릭들이 있기 때문에 [공식문서](https://router.vuejs.org/ko/)를 꼭 방문해 보세요.
+
+---
+Vue, VueRouter 를 require 하고, 서로 악수하게 합니다 🤝
+```js
+const Vue = require('nativescript-vue');
+const VueRouter = require('vue-router');
+
+Vue.use(VueRouter);
+```
+
+---
+현재 라우터를 제목(`$route.path`)으로 `Master` 페이지를 정의합니다.
+그리고 `@tap="$router.push('/detail')"` 과 함께 버튼을  만들어서 새 페이지가 스택에 추가되고 그 페이지로 이동할 수 있게 합니다.
+
+또한 `user` 쿼리 파라미터(query param)와 함께 같은 페이지로 향하는 버튼도 만듭니다.
+```html
+const Master = {
+  template: `
+    <Page>
+      <ActionBar :title="$route.path" />
+      <StackLayout>
+        <Button text="To Details" @tap="$router.push('/detail')" />
+        <Button text="To Details (with query param)" @tap="$router.push('/detail?user=John+Appleseed')"></Button>
+      </StackLayout>
+    </Page>
+  `
+};
+```
+
+---
+`Detail` 페이지를 `NavigationButton` 과 함께 정의합니다.
+iOS 에서 이 것은 자동으로 스택의 전페이지로 이동하게 만듭니다.
+하지만 안드로이드에선 `tap` 핸들러가 필요합니다.(iOS에서는 무시됩니다.)
+따라서  `@tap="$router.back()"` 를 추가합니다.
+
+`Master` 페이지의 두번째 버튼에서 `user` query param을 썼던걸 기억하시나요?
+`Details` 페이지에서 다음처럼 그것을 참조할 수 있습니다:
+`<Label :text="$route.query.user">`
+
+마지막으로, 아래 예제처럼 `$router.go(<number-of-pages>)` 이용해 뒤로 (혹은 앞으로) 이동할 수 있습니다.
+
+```html
+const Detail = {
+  template: `
+    <Page>
+      <ActionBar :title="$route.path">
+        <NavigationButton text="Back!" android.systemIcon="ic_menu_back" @tap="$router.back()" />
+      </ActionBar>
+      <StackLayout>
+        <Label :text="$route.query.user" v-if="$route.query.user" />
+        <Button text="Back to Master" @tap="$router.go(-1)" />
+      </StackLayout>
+    </Page>
+  `
+};
+```
+
+---
+아래처럼 어플리케이션의 모든 페이지를 정의합니다.
+```js
+const router = new VueRouter({
+  pageRouting: true,
+  routes: [
+    {path: '/master', component: Master},
+    {path: '/detail', component: Detail},
+    {path: '*', redirect: '/master'}
+  ]
+});
+```
+
+---
+그리고 앱이 시작할때 라우트들 중 하나를 로드합니다:
+```js
+router.replace('/master');
+```
+
+---
+오, 그리고 `Vue` 에가 당신의 라우트들에 대해 알려주는 걸 잊지 마세요:
+```js
+new Vue({
+  router
+}).$start();
+```
diff --git a/content/docs/ko/utilities/v-template.md b/content/docs/ko/utilities/v-template.md
new file mode 100644
index 00000000..b037c239
--- /dev/null
+++ b/content/docs/ko/utilities/v-template.md
@@ -0,0 +1,57 @@
+---
+title: v-template 컴포넌트
+contributors: [qgp9]
+---
+
+`v-template` 컴포넌트는 템플릿으로 재사용될 수 있는 마크업을 정의하는데 사용됩니다.
+
+이 것은 [ListView 컴포넌트](/ko/docs/elements/components/list-view) 에 의해 내부적으로 활용됩니다.
+
+## Props
+
+|이름   | 타입  | 설명 |
+|------|------|-------------|
+| `if` | `String` | 이 템플릿이 사용되는 컨디션(condition)
+| `name` | `String` | 템플릿 이름. 생략되면 자동 생성됨.
+
+# 고급 사용법 (Advanced usage)
+
+이 문서의 나머지 부분은 하나 혹은 복수의 템플릿을 필요로 하는 자신의 컴포넌트를 만들기를 원하는 고금사용자를 위한 내용입니다.
+
+`v-template` 는 템플릿 안에 위치할때 아무것도 렌더링하지 않습니다. 대신 [`TemplateBag`](https://github.com/nativescript-vue/nativescript-vue/blob/master/platform/nativescript/runtime/components/v-template.js#L36) 인스턴스인 `$templates` 프로퍼티를 부모 요소나 컴포넌트에 추가하고 자신을 사용가능한 템플릿으로 등록합니다.
+
+### TemplateBag
+
+`TemplateBag` 클래스는 여러 템플릿을 등록할때 유용하며 아이템과 각 템플릿에 제공되는 조건들에 기초하여 올바른 템플릿을 선택하기 위한 함수를 제공합니다.
+
+템플릿들은 [`KeyedTemplate`](https://docs.nativescript.org/api-reference/interfaces/_ui_core_view_.keyedtemplate) 인터페이스를 따르는 객체로 저장됩니다.
+
+#### `selectorFn` 프로퍼티
+
+The `selectorFn` property returns a function that accepts a single parameter which should be an item whose template should be selected. It will go through all the templates registered in the `TemplateBag` and return the first one where the `if` condition returns a truthy value, and if none of the templates match it will return `default`.
+
+#### 가능한 메소드
+
+##### registerTemplate(name: String, condition: String?, scopedFn: Function): void
+
+ This method is used to register templates into the `TemplateBag` instance, it is mainly used internally. The `scopedFn` should be a render function of a [scoped slot](https://vuejs.org/v2/guide/components.html#Scoped-Slots)
+
+##### getConditionFn(condition: String): Function
+
+ This method builds a function that evaluates the given condition. This methods is used internally.
+
+##### getKeyedTemplate(name: String): [KeyedTemplate](https://docs.nativescript.org/api-reference/interfaces/_ui_core_view_.keyedtemplate)
+
+This method returns the `KeyedTemplate` with the given name.
+
+##### patchTemplate(name: String, context: any, oldVnode: VNode?): View
+
+This method will patch an existing `VNode` using the provided `context`. If no `oldVnode` is provided, it will create a new View instance for the given template.
+
+##### getAvailable(): Array<String>
+
+Returns an array of available `KeyedTemplates` (returns an array of template names)
+
+##### getKeyedTemplates(): Array<KeyedTemplate>
+
+Returns an array of all the `KeyedTemplates` registered in the `TemplateBag`
diff --git a/content/docs/ko/utilities/v-view.md b/content/docs/ko/utilities/v-view.md
new file mode 100644
index 00000000..df149fa8
--- /dev/null
+++ b/content/docs/ko/utilities/v-view.md
@@ -0,0 +1,57 @@
+---
+title: v-view 디렉티브
+contributors: [qgp9]
+---
+
+`v-view` 디렉티브는 현재 요소 `View` 를 부모 프로퍼티로 지정하는데 사용됩니다.
+
+### 사용법
+
+```html
+<Child v-view:parentPropertyName />
+<!-- same as: -->
+<Child ~parentPropertyName />
+```
+
+```html
+<Child v-view:parentArrayPropertyName.array />
+<!-- same as: -->
+<Child ~parentArrayPropertyName.array />
+```
+
+---
+
+많은 `NativeScript` 컴포넌트들은 유효한 `View` 인스턴스를 프로퍼티로 설정해야합니다. 이는 템플릿으로는 불가능 합니다.
+이 디렉티브를 사용하면 부모 요소에 대한 새로운 디렉티브나 참조를 추가할 필요가 없이 부모 프로퍼티를 수동으로 설정하여 시간을 절약할 수 있습니다.
+
+이 디렉티브의 작동방식에 대한 더 이해하기 위해  [Progress NativeScript UI](http://docs.telerik.com/devtools/nativescript-ui/Controls/Angular/SideDrawer/getting-started) 패키지의 `RadSideDraw` 컴포넌트를 살펴봅시다.
+
+`RadSideDrawer` 컴포넌트는 `drawContent` 와 `mainContent` 프로퍼티들이 `View` 인스턴스로 설정될 것이라고 예상합니다.
+`v-view` 디렉티브를 사용하면 다음과 같습니다.
+
+```html
+<RadSideDrawer>
+  <StackLayout ~drawerContent />
+  <StackLayout ~mainContent />
+</RadSideDrawer>
+```
+
+`v-view` 디렉티브를 사용하지 않으면 다음 처럼 해야 합니다.
+
+```html
+<RadSideDrawer ref="drawer">
+  <StackLayout ref="drawerContent" />
+  <StackLayout ref="mainContent" />
+</RadSideDrawer>
+```
+
+```javascript
+{
+  mounted() {
+    this.$refs.drawer.drawerContent = this.$refs.drawerContent.nativeView
+    this.$refs.drawer.mainContent = this.$refs.mainContent.nativeView
+  }
+}
+```
+
+이는 지루하기도 하고 쉽게 실수로 에러를 만들기도 합니다.
diff --git a/content/index_ko.ejs b/content/index_ko.ejs
new file mode 100644
index 00000000..dfa4d6ef
--- /dev/null
+++ b/content/index_ko.ejs
@@ -0,0 +1,58 @@
+---
+layout: landing.ejs
+dest: ko/index.html
+---
+
+<div class="bg-blue-light">
+    <div class="container mx-auto py-8 px-4 md:px-0">
+        <div class="flex flex-wrap">
+            <div class="w-full md:w-1/2 my-8">
+                <h1 class="text-5xl leading-tight text-white">Vue.js 와 네이티브-스크립트를 이용한 진짜 네이티브 앱</h1>
+
+                <p class="w-4/5 leading-loose text-white mt-4">
+                    새로운 언어를 배우는 번거로움 없이 꿈꾸던 앱을 만들고 싶습니까?
+
+                    NativeScript-Vue가 바로 당신을 위한 바른 선택입니다!
+                </p>
+
+                <a href="<%= meta.lang(current, null, 'docs/introduction') %>"
+                   class="px-8 py-4 inline-block bg-green text-white font-bold text-lg no-underline mt-8">
+                    시작하기
+                </a>
+            </div>
+
+            <div class="hidden md:block md:w-1/2 my-8">
+                <img class="w-auto" src="https://art.nativescript-vue.org/misc/phone.svg" alt="phone">
+            </div>
+        </div>
+    </div>
+</div>
+
+
+<div class="container mx-auto py-8 px-4 md:px-0">
+    <div class="flex flex-wrap -mx-3">
+        <div class="w-full md:w-1/3 px-4">
+            <h2 class="text-blue-dark">쉽게 시작하기.</h2>
+
+            <p class="text-blue-dark leading-normal">
+                NativeScript-Vue은 npm 으로 설치할 수 있는 하나의 의존성만을 가지고 있기 때문에 쉽게 시작할 수 있습니다.
+            </p>
+        </div>
+
+        <div class="w-full md:w-1/3 mt-8 md:mt-0 px-4">
+            <h2 class="text-blue-dark">익숙한 문법.</h2>
+
+            <p class="text-blue-dark leading-normal">
+                NativeScript-Vue 는 Vue.js 사용자라면 익숙한 문법을 사용하도록 디자인되었습니다.
+            </p>
+        </div>
+
+        <div class="w-full md:w-1/3 mt-8 md:mt-0 px-4">
+            <h2 class="text-blue-dark">빠른 워크플로우.</h2>
+
+            <p class="text-blue-dark leading-normal">
+                새로운 언어를 배울 필요가 없기 때문에, NativeScript-vue를 사용하면 빠르게 앱을 만들 수 있습니다.
+            </p>
+        </div>
+    </div>
+</div>