Translate several pages into Korean

i18n/ko/docusaurus-plugin-content-docs/current/tour/design.md

@@ -0,0 +1,59 @@
+# 설계 결정
+
+다음은 D2의 개발 방향에 대해 설명하는 설계 결정입니다.
+우리는 과거의 실수를 피하고 가장 성공적인 현대 프로그래밍 언어에서 영감을 얻기 위해 최선을 다했습니다.
+
+D2의 설계 결정은 본질적으로 절충안에 가깝습니다.
+따라서 이들 중 일부는 당신이 동의하지 못할 수 있습니다.
+그러나 만약 당신이 프로그래머라면, D2는 당신을 위해 만들어진 것이며, 저희는 이러한 결정들이 모여 당신이 편안하게 느낄 수 있는 언어를 만들었다고 믿습니다.
+
+언어가 계속 발전함에 따라 이러한 것들도 필연적으로 발전할 것입니다.
+
+## 가독성 > 프로토타입 개발 속도
+
+가독성과 프로토타입 개발 속도 모두 중요하지만 둘 중 하나를 택해야 할 경우 D2는 일반적으로 가독성을 선호합니다.
+
+대부분의 경우 둘 중 하나를 택해야 하는 경우는 없습니다.
+좋은 프로그래밍 언어는 일반적으로 두가지 모두를 택할 수 있도록 합니다.
+D2의 문법은 가벼우며, 자동 포맷터가 항상 정확하게 사용되도록 설계되어 프로젝트 간에 일관성을 유지하도록 합니다.
+
+사용 편의성, 프로토타입 개발 속도, 가독성 사이에서 적절한 균형을 찾으시길 바랍니다.
+D2는 특히 위의 세가지를 모두 무시하는 명료하지 않고 간결한 구문의 사용을 피하고 있습니다.
+
+예를 들어 원통 모양을 정의하는 두 가지 방법이 있습니다.
+
+D2:
+
+```d2
+A: Christmas {shape: cylinder}
+```
+
+Mermaid:
+
+```
+A[(Christmas)]
+```
+
+D2는 덜 간결하지만 훨씬 더 읽기 쉽습니다.
+
+## 경고 > 에러
+
+D2는 가능할 때마다 컴파일합니다.
+예를 들어, 존재하지 않는 클래스를 적용하거나 특정 모양에 영향을 주지 않는 스타일을 추가한다고 가정해 보겠습니다.
+사용자 오류가 D2가 무시할 수 있는 오류인 경우 성공적으로 컴파일되고 최대 경고만 표시됩니다.
+디버깅하는 동안 일부 코드를 주석 처리하고 사용되지 않은 변수가 있다는 뜻밖의 오류 메시지를 받는 것보다 더 짜증나는 일은 없습니다.
+
+## 좋은 기본 설정
+
+D2의 기본 설정, 즉 사용자가 아무것도 변경하지 않았을 때는 좋은 다이어그램을 생성해야 합니다.
+이를 위해서는 어떤 기본 설정이 좋은지에 대해 명확한 견해를 가져야 합니다.
+예를 들어, D2는 단색이 아닌 쾌적한 색상이 기본 테마으로 제공됩니다.
+
+## 데스크톱 및 서버용을 위한 최적화
+
+D2는 감시 모드가 내장되어 있고, 매뉴얼 페이지가 유지 관리되며, 표준 입력(stdin)에서 읽고 표준 출력(stdout)으로 쓰는 기능을 지원하는 강력한 CLI를 갖추고 있습니다.
+이미지와 글꼴은 기본적으로 다이어그램에 포함되므로 내보내기(exported) 된 다이어그램은 독립형 다이어그램으로 어디에서나 동일하게 보입니다.
+D2는 PPT 및 GIF와 같은 다양한 형식을 지원하며 모듈화를 위해 다이어그램을 여러 파일로 나눌 수 있는 가져오기(import) 기능을 제공합니다.
+프로그래밍적으로 D2를 편집하고 작성할 수 있는 언어 API도 있습니다.
+이 모든 것은 브라우저 렌더링을 위한 웹 라이브러리와는 반대되는 개념입니다
+D2는 이러한 용도의 웹 라이브러리를 제공하고 유지 관리할 계획이지만, 이는 후순위이기 때문에 전체 기능에서 간소화할 예정입니다.

i18n/ko/docusaurus-plugin-content-docs/current/tour/experience.md

@@ -0,0 +1,20 @@
+---
+sidebar_label: 개발 툴 vs 디자인 툴
+---
+
+# 다이어그램 개발툴
+
+D2는 **"개발자가 다이어그램 작성을 즐겁게 할 수 있게 하자"**라는 단 하나의 목표를 가지고 설계되었습니다.
+간단한 다이어그램을 그릴 경우에 이런 점을 만족시킬 수 있는 툴들은 많지만, 그러한 툴들은 다이어그램이 조금만 복잡해지는 순간 그럴 수 없게 됩니다.
+
+왜 그럴까요?
+오늘날 대부분의 다이어그램 작성 툴들은 개발이 아닌 디자인을 위한 툴이기 때문입니다.
+Figma나 Photoshop에서 볼 수 있는 것처럼, 그 툴들은 빈 캔버스와 작업용 툴바를 제공하여 실행해야할 작업을 디자인 프로세스로 취급합니다.
+엔지니어는 비주얼 디자이너가 아니며, 시스템을 공간적으로 설계하는 능력이 부족하다고 해서 귀중한 문서 작성이 방해되어서는 안 됩니다.
+모든 드래그와 드롭에는 계획이 필요하지 않아야 할 것이며, 업데이트는 새 항목을 위한 공간을 확보하기 위해 항목을 이동하고 크기를 조절해야 하는 귀찮은 작업이 되어서는 안 됩니다.
+D2에서는 이러한 잔업들을 배제합니다.
+
+Hashicorp가 Terraform을 도입하여 엔지니어가 인프라를 텍스트로 작성할 수 있도록 하기 전에는 AWS 및 Google Cloud 콘솔을 클릭하여 인프라를 구성했습니다.
+오늘날, 그런 방식은 전혀 전문적이지 않습니다.
+그런 방식으로 검토 프로세스, 롤백 단계, 기록 및 버전 관리는 어떻게 할 수 있을까요?
+또한, 시간이 지날수록 세계적인 기업들은 시각적 문서를 디자인 툴로 만들지는 않을 것입니다.

i18n/ko/docusaurus-plugin-content-docs/current/tour/grid-diagrams.md

@@ -1,14 +1,14 @@
 # 그리드 다이어그램
 
-그리드 다이어그램을 사용하면 구조화된 그리드에 개체를 표시할 수 있습니다.
+그리드 다이어그램을 사용하면 구조화된 그리드에 객체를 표시할 수 있습니다.
 
 <div className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/grid.svg2')}}></div>
 
 :::info
 위 다이어그램의 소스코드는 페이지 하단에 있습니다.
 :::
 
-두 개의 키워드만으로 이 모든 걸 할 수 있습니다.
+다음 두 개의 키워드만으로 이 모든 걸 할 수 있습니다.
 
 - `grid-rows`
 - `grid-columns`
@@ -65,7 +65,7 @@ The American Government.width: 400
 
 ## 셀 확장
 
-행이나 열 중 하나에 대해서만 너비나 높이를 정의하면 해당 개체가 확장됩니다.
+행이나 열 중 하나에 대해서만 너비나 높이를 정의하면 해당 객체가 확장됩니다.
 
 ```d2
 grid-rows: 3
@@ -94,16 +94,16 @@ grid-columns: 2
 # 여러 셰이프들
 ```
 
-`grid-rows`가 먼저 정의되므로 객체는 열로 이동하기 전에 행을 채웁니다.
+`grid-rows`가 먼저 정의되므로 객체는 가로 방향으로 먼저 채워집니다.
 
 <div className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/grid-row-dominant.svg2')}}></div>
 
-하지만 만약 반대라면:
+반대의 경우는 다음과 같습니다.
 
 ```d2
 grid-columns: 2
 grid-rows: 4
-# bunch of shapes
+# 여러 셰이프들
 ```
 
 아래와 같이 다른 방향으로 채워질 것입니다.
@@ -125,7 +125,7 @@ grid-rows: 4
 - `horizontal-gap`
 - `grid-gap`
 
-`grid-gap`을 설정하는 것은 `vertical-gap`과 ​​`horizontal-gap`을 동시에 설정하는 것과 같습니다.
+`grid-gap` 설정은 `vertical-gap`과 ​​`horizontal-gap`을 동시에 설정하는 것과 같습니다.
 
 `vertical-gap` 또는 `horizontal-gap`으로 `grid-gap`을 재정의할 수 있습니다.
 
@@ -135,7 +135,7 @@ grid-rows: 4
 
 <div className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/japan.svg2')}}></div>
 
-> [D2 소스 코드](https://github.com/terrastruct/d2/blob/master/docs/examples/japan-grid/japan.d2)
+> [소스 코드](https://github.com/terrastruct/d2/blob/master/docs/examples/japan-grid/japan.d2)
 
 ### 또는 테이블형 데이터에도 저장 가능합니다.
 
@@ -185,7 +185,7 @@ D2의 일반 객체처럼 그리드와 다른 객체를 연결할 수 있습니
 
 ## 중첩
 
-D2의 현재 버전에서는 그리드 다이어그램 내에 그리드 다이어그램을 중첩할 수 있습니다.
+D2의 현재 버전에서는 그리드 다이어그램 내에 또다른 그리드 다이어그램을 중첩할 수 있습니다.
 다른 유형의 중첩도 곧 제공될 예정입니다.
 
 ```d2
@@ -205,7 +205,7 @@ footer
 
 ## 소스 코드
 
-이 페이지 상단의 이미지에 대한 소스 코드입니다.
+다음은 이 페이지 상단의 이미지에 대한 소스 코드입니다.
 
 ```d2
 grid-rows: 5

i18n/ko/docusaurus-plugin-content-docs/current/tour/intro.md

@@ -1 +1,80 @@
-TODO
+---
+sidebar_label: D2란?
+pagination_next: tour/experience
+---
+
+# D2 둘러보기
+
+**D2**는 텍스트를 다이어그램으로 변환하는 다이어그램 스크립트 언어입니다.
+"D2"라는 이름은 **Declarative Diagramming(선언형 다이어그램)**의 약자입니다.
+"Declarative(선언형)"라는 단어에서 알 수 있듯이, D2에서 다이어그램으로 표시하려는 내용을 작성하면, 그에 맞는 이미지를 생성합니다.
+
+예를 들어, CLI를 다운로드 받아 `input.d2`란 이름의 파일을 만들고, 다음 실행문을 복사하여 실행하면 아래의 이미지를 얻을 수 있습니다.
+
+```sh
+d2 --theme=300 --dark-theme=200 -l elk --pad 0 ./input.d2
+```
+
+<div style={{width: "100%"}} className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/terminal-theme.svg2')}}></div>
+
+```d2
+network: {
+  cell tower: {
+    satellites: {
+      shape: stored_data
+      style.multiple: true
+    }
+
+    transmitter
+
+    satellites -> transmitter: send
+    satellites -> transmitter: send
+    satellites -> transmitter: send
+  }
+
+  online portal: {
+    ui: {shape: hexagon}
+  }
+
+  data processor: {
+    storage: {
+      shape: cylinder
+      style.multiple: true
+    }
+  }
+
+  cell tower.transmitter -> data processor.storage: phone logs
+}
+
+user: {
+  shape: person
+  width: 130
+}
+
+user -> network.cell tower: make call
+user -> network.online portal.ui: access {
+  style.stroke-dash: 3
+}
+
+api server -> network.online portal.ui: display
+api server -> logs: persist
+logs: {shape: page; style.multiple: true}
+
+network.data processor -> api server
+```
+
+## CLI 감시 모드
+
+<img className="screenCap" width="100%" src={require('@site/static/img/screenshots/cli.gif').default}
+alt="D2 CLI"/>
+
+D2의 사용법을 알아보는 이 과정은 약 5~10분 안에 끝낼 수 있으며, 마지막 부분에는 참고를 위한 치트 시트를 다운로드 받을 수 있습니다.
+기본적인 것만 원하는 경우 <a href="/tour/hello-world">시작하기</a> 챕터를 참고하세요. 2분 정도 소요됩니다.
+
+:::info
+D2의 소스 코드는 다음에서 호스팅됩니다.
+[https://github.com/terrastruct/d2](https://github.com/terrastruct/d2).
+
+이 문서의 소스 코드는 다음과 같습니다.
+[https://github.com/terrastruct/d2-docs](https://github.com/terrastruct/d2-docs).
+:::