Cloud Shell에서 둘러보기 작성

Cloud Shell은 사용자가 신속하고 효과적으로 프로젝트를 익힐 수 있도록 도와주는 둘러보기라고 불리는 가이드를 구축하고 시작하는 작업을 지원합니다.

둘러보기는 마크다운으로 작성된 일련의 지침입니다. Cloud Shell은 Google Cloud Console의 오른쪽 창에 표시되는 단계와 하위 단계로 텍스트를 파싱하여 이러한 마크다운 파일을 토대로 컨텍스트 내 둘러보기를 만듭니다.

둘러보기 실제 작동 살펴보기

둘러보기 알아보기(둘러보기 사용)

실제 대화형 둘러보기를 통해 대화 형 둘러보기를 알아보려면 아래 버튼을 사용하여 둘러보기 작성을 시작합니다.

Cloud Shell에서 열기

둘러보기 작성

둘러보기는 마크다운 방식으로 작성되며(특히 HTML 코드를 제외한 CommonMark 형식으로 작성) 모든 텍스트 편집기를 사용하여 개발할 수 있습니다. 또한 둘러보기 전용 마크다운 기능을 사용하면 스포트라이트 강조 및 인라인 아이콘 추가와 같은 고급 기능을 포함하는 지시문을 추가하여 사용자가 쉽게 따라할 수 있도록 개발할 수 있습니다.

단계 만들기

둘러보기를 만들 때는 구성을 결정하는 머리말이 필요합니다. 정확한 제목, 단계 머리말, 기본 지침을 설정하려면 아래와 같은 계층 구조를 따르세요.

  • 둘러보기 제목의 H1(#) 태그. 둘러보기에는 H1 태그가 하나만 있어야 합니다.
  • 단계 제목에는 H2(##) 태그를 사용합니다.
  • 하위 단계 제목에는 H3(###) 태그를 사용합니다.

둘러보기를 만드는 데 사용할 수 있는 샘플 마크다운 파일은 다음과 같습니다.

# First Walkthrough

## First step

Hello World

### Part 1

Part One Instructions.

### Part 2

Part Two Instructions.

## Conclusion

Done!

코드 블록 추가

코드 스니펫을 호출하려면 다음과 같이 백틱을 사용하세요.

```
print("hello world")
```

그러면 오른쪽 모서리에 클립보드 복사 버튼이 포함된 상태로 코드 스니펫이 나타납니다.

지시문 추가

지시문(UI 요소 스포트라이트, 인라인 아이콘 표시, 파일 작업 트리거와 같은 고급 둘러보기 기능)을 추가하려면 다음 커스텀 요소 형식을 사용합니다.

<walkthrough-directive-name param="optional parameter">
</walkthrough-directive-name>

이 형식에서 'directive-name'과 'param'은 자리표시자입니다. 예를 들어 editor-open-file 지시문과 filePath 매개변수를 사용하려면 다음 형식을 사용합니다.

<walkthrough-editor-open-file filePath="test/hello.md">
</walkthrough-editor-open-file>

스포트라이트 생성

스포트라이트는 사용자가 Console의 특정 UI 요소를 쉽게 찾을 수 있도록 도와주는 시각적 포커스입니다.

Console 요소를 스포트라이트로 강조하려면 다음 형식을 사용합니다.

<walkthrough-spotlight-pointer spotlightId="target" text="label text">
</walkthrough-spotlight-pointer>

실습을 위해 Cloud Shell의 웹 미리보기 창을 여는 버튼을 스포트라이트로 강조하려면 다음을 사용하세요.

<walkthrough-spotlight-pointer spotlightId="devshell-web-preview-button"
                               text="Open Cloud Shell">
</walkthrough-spotlight-pointer>

편집기 내 요소에는 editor-spotlight 지시문을 사용합니다. 사용자가 '내 파일'을 클릭할 때 기존 hello.md 파일을 스포트라이트하려면 다음을 사용합니다.

<walkthrough-editor-spotlight spotlightId="navigator" filePath="hello.md"
                              text="My file">
</walkthrough-editor-spotlight>

팁: 스포트라이트 ID가 없는 UI 요소에 CSS 선택기를 사용할 수 있습니다.

인라인 아이콘 사용하기

Console 버튼의 용도를 효과적으로 제시하려면 인라인 아이콘을 사용합니다.

예를 들어 <walkthrough-cloud-shell-editor-icon></walkthrough-cloud-shell-editor-icon>은 Cloud Shell 편집기 아이콘 Cloud Shell 아이콘의 인라인 아이콘을 생성합니다.

파일 작업 트리거

사용자에게 유용한 파일을 여는 링크를 둘러보기에 포함할 수도 있습니다. 사용자가 둘러보기를 살펴보면서 '샘플 파일 열기' 디스플레이 텍스트를 클릭할 때 Cloud 편집기에서 파일을 열려면 다음 지시문을 사용합니다.

<walkthrough-editor-open-file filePath="path/to/test.md"
                              text="Open sample file">
</walkthrough-editor-open-file>

참고로, 파일이 사용자의 Cloud Shell 인스턴스에 존재하고 입력한 경로는 기준이 되는 파일 경로여야 합니다. 파일이 홈 디렉토리에 위치하거나 홈 디렉토리의 하위 디렉토리에 있어야 합니다.

올바른 지시문 찾기

사용 가능한 모든 스포트라이트(및 해당 매개변수)의 전체 목록은 둘러보기 마크다운 참조를 확인하세요.

Cloud Shell에서 둘러보기 시작

Cloud Shell에서 둘러보기를 시작하는 방법에는 두 가지가 있습니다.

  1. cloudshell launch-tutorial 명령어 사용하기

    Cloud Shell 세션에서 다음 cloudshell 명령어를 실행하여 기존 마크다운 파일 tutorial.md에서 둘러보기를 시작합니다.

    cloudshell launch-tutorial tutorial.md
    

    또는 Cloud Shell 세션에서 다음 명령어를 실행하여 teachme 별칭을 사용해 기존 파일 hello.md에서 둘러보기를 시작할 수 있습니다.

    teachme hello.md
    
  2. 'Cloud Shell에서 열기'를 사용합니다.

    또는 'Cloud Shell에서 열기' 기능을 사용하여 웹사이트, 블로그 또는 오픈소스 프로젝트에서 사용자를 git 저장소에 호스팅된 둘러보기로 안내할 수 있습니다. 'Cloud Shell에서 열기' 기능은 'cloudshell_tutorial' 매개변수를 허용하며 &cloudshell_tutorial=path/to/file.md와 같이 이 기능을 URL 끝에 추가하여 저장소에서 소스 Markdown 파일의 위치를 지정할 수 있습니다. 즉, 둘러보기에 연결된 버튼의 마크다운은 다음과 같습니다.

    [![Open in Cloud Shell](https://gstatic.com/cloudssh/images/open-btn.png)](https://ssh.cloud.google.com/cloudshell/open?cloudshell_git_repo=https://github.com/testuser/myproject&cloudshell_tutorial=resources/hello.md)
    

다음 단계