> ## Documentation Index
> Fetch the complete documentation index at: https://daehan-base.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Web (HTML + JS)
> HTML과 JavaScript만으로 Base 로그인과 Base Pay를 연동하는 방법을 알아보세요.
이 퀵스타트는 HTML과 JavaScript만 사용하여 Base Account SDK로 Base 로그인과 Base Pay를 웹 페이지에 추가하는 **최소한의** 코드를 보여줍니다. 프레임워크나 추가 라이브러리는 필요하지 않습니다.
**인터랙티브 플레이그라운드:** SDK 함수를 연동 전에 테스트해보고 싶으신가요?
[Base Pay SDK
Playground](https://base.github.io/account-sdk/pay-playground)에서 `pay()`와 `getPaymentStatus()` 함수를 직접 실험해보세요.
**영상 콘텐츠를 선호하시나요?**
이 페이지 [마지막 섹션](#video-guide)에서 구현 내용을 자세히 다루는 영상 가이드를 확인하세요.
## 1. SDK 설치 (선택 사항)
Base Account SDK는 두 가지 방법으로 사용할 수 있습니다:
### 옵션 A: CDN (설치 불필요)
HTML에 스크립트 태그만 추가하면 됩니다. 빌드 도구가 필요 없습니다!
```html index.html theme={null}
[...rest of your code]
[...rest of your code]
```
전체 예시는 아래 [예시](#2-copy-paste-this-html-file)를 참고하세요.
### 옵션 B: NPM 패키지
로컬 설치를 원하시는 경우:
```bash npm theme={null}
npm install @base-org/account
```
```bash pnpm theme={null}
pnpm add @base-org/account
```
```bash yarn theme={null}
yarn add @base-org/account
```
```bash bun theme={null}
bun add @base-org/account
```
그런 다음 ES 모듈을 사용하세요:
```html index.html theme={null}
```
이 가이드에서는 간단함을 위해 CDN 방식을 사용합니다.
## 2. 이 HTML 파일을 복사해서 붙여넣기
```html index.html expandable theme={null}
Base Account Quick-start
Base Account Demo
```
## 3. 파일 서빙
모든 정적 서버에서 동작합니다:
```bash theme={null}
npx serve .
# or
python -m http.server
```
[http://localhost:3000을](http://localhost:3000을) 열고, **Sign in with Base** (선택 사항)를 클릭한 후 **Pay with Base**를 클릭하고 트랜잭션을 승인하면 Base Sepolia에서 5 USDC를 전송 완료! 🎉
## 다음 단계
* **[사용자 인증 가이드](/base-account/guides/authenticate-users)** – 백엔드 검증을 포함한 전체 SIWE 인증 구현
* **[결제 수락 가이드](/base-account/guides/accept-payments)** – 결제 흐름에서 사용자 정보 수집
**브랜드 가이드라인을 준수해 주세요**
`SignInWithBaseButton` 또는 `BasePayButton`을 사용하려면 애플리케이션 전반의 일관성을 위해 Base 브랜드 가이드라인을 준수해 주세요.
## 영상 가이드