# Static HTML Spaces

Spaces에서는 Streamlit이나 Gradio 대신 앱에 맞춤 HTML을 사용할 수 있습니다. Spaces의 **README.md** 파일 상단의 `YAML` 블록 안에 `sdk: static`을 설정합니다. 그런 다음 HTML 코드를 **index.html** 파일에 배치할 수 있습니다.

Static Spaces는 모든 사용자에게 무료입니다: 컴퓨트에서 실행되지 않고 직접 서빙되므로, [Gradio](./spaces-sdks-gradio) 및 [Docker](./spaces-sdks-docker) Spaces와 달리 생성 시 유료 플랜이 필요하지 않습니다.

custom HTML을 사용하는 Spaces의 몇 가지 예시입니다:

* [Smarter NPC](https://huggingface.co/spaces/mishig/smarter_npc): Spaces에서 iframe을 사용하여 PlayCanvas 프로젝트를 표시합니다.
* [Huggingfab](https://huggingface.co/spaces/pierreant-p/huggingfab): Spaces에서 Sketchfab 모델을 표시합니다.
* [나머지 확산](https://huggingface.co/spaces/huggingface-projects/diffuse-the-rest): 나머지 부분을 그려서 확산

## 서빙 전 빌드 단계 추가

Static Spaces는 정적 에셋을 서빙하기 전에 커스텀 빌드 단계를 추가하는 것을 지원합니다. 이는 서빙 전에 빌드 프로세스가 필요한 React, Svelte, Vue와 같은 프론트엔드 프레임워크에 유용합니다. 빌드 명령은 Space가 업데이트될 때 자동으로 실행됩니다.

Spaces의 **README.md** 파일 상단의 `YAML` 블록 안에 `app_build_command`과 `app_file`을 추가하세요.

예를 들어:
- `app_build_command: npm run build`
- `app_file: dist/index.html`

예시 스페이스:

- [Svelte 앱](https://huggingface.co/spaces/julien-c/vite-svelte)
- [React 앱](https://huggingface.co/spaces/coyotte508/static-vite)

내부적으로 [빌드를 시작](https://huggingface.co/spaces/huggingface/space-build)하여 생성된 파일을 특수한 `refs/convert/build` ref에 저장합니다.

## Space 변수

사용자 정의 [환경 변수](./spaces-overview#managing-secrets)를 Space에 전달할 수 있습니다. Space에 대해 [OAuth를 활성화](./spaces-oauth)한 경우, 클라이언트 ID와 scope와 같은 OAuth 정보도 환경 변수로 사용할 수 있습니다.

JavaScript에서 이 변수들을 사용하려면 `window.huggingface.variables` 객체를 사용할 수 있습니다. 예를 들어, `OAUTH_CLIENT_ID` 변수에 액세스하려면 `window.huggingface.variables.OAUTH_CLIENT_ID`를 사용할 수 있습니다.

oauth를 활성화하고 사용자 정의 환경 변수를 사용하여 해당 변수를 HTML에 표시하는 Space의 예시입니다:

* [정적 변수](https://huggingface.co/spaces/huggingfacejs/static-variables)