> ## Documentation Index
> Fetch the complete documentation index at: https://supastack.dev/llms.txt
> Use this file to discover all available pages before exploring further.
> For the full documentation corpus in one file, fetch: https://supastack.dev/llms-full.txt

# 마케팅 페이지

랜딩 섹션, 법적 페이지, FAQ, 변경 로그, 사이트 설정.

## 초보자 연습

전제 조건: 아래 두 개의 초보자 가이드를 읽고, 웹 로컬 설정을 완료하고, 편집기의 루트에서 이 모노레포를 엽니다. 웹 설정은 `apps/web/.env.local`에 속합니다. Next.js는 ​​루트 `.env`를 읽지 않습니다. 기본 가짜 모드의 `/dashboard`는 데이터베이스가 없는 데모입니다. `/auth`에는 마이그레이션된 데이터베이스가 필요합니다.

빠른 용어: 작업 영역은 한 팀의 별도 사용자, 데이터 및 설정입니다. 서버는 신뢰할 수 있는 백엔드입니다. 제공업체 키를 브라우저 및 전화 코드에 보관하세요. 마이그레이션은 테이블을 생성하거나 업데이트하는 버전이 지정된 데이터베이스 변경입니다. AI 모델은 응답하는 엔진입니다. 모델 카탈로그는 서버의 사용 가능한 모델 ID 및 가격 목록입니다. 공급자는 AI, 이메일, 청구 서비스와 같은 외부 서비스입니다. 자격은 작업 영역에서 기능을 사용할 수 있도록 하는 부여입니다. 웹훅은 한 서비스가 다른 서비스의 URL에 보내는 메시지입니다.

1. `apps/web/src/marketing/site-config.ts`를 열고 제품 이름, 태그라인, 탐색 라벨/URL 및 지원 주소를 자신이 소유한 값으로 변경합니다.

2. `apps/web/public/og.png`를 교체하고 `apps/web/src/marketing/seo.tsx`의 대체 텍스트와 치수를 한 번의 변경으로 업데이트합니다.

3. 홈, FAQ, 바닥글, 소셜 미리보기를 새로 고칩니다. 이전 텍스트가 남아 있으면 게시하기 전에 이 저장소에서 이전 이름을 검색하세요.

사용자 정의 코드의 경우 제공된 `prompts/README.md`로 시작하고 가장 가까운 프롬프트(앱 화면의 경우 `prompts/new-app-screen.md`, 공개 페이지의 경우 `prompts/new-landing-page.md`)를 복사합니다. 서버, 데이터베이스 또는 공급자 작업의 경우 코딩 에이전트에게 이 가이드의 작업을 제공하고 `AGENTS.md`, `.ai/PROJECT_CONTEXT.md` 및 일치하는 `.ai/` 미러를 읽도록 요청하세요. 여기에 이름이 지정된 정확한 소스 파일을 검사하십시오. 편집하기 전에 파일을 나열하고 확인합니다. 작업 공간 소유권과 서버 전용 비밀을 보존합니다. 차이점을 보여주세요. 원하는 동작, 입력 및 출력 필드, 허용된 역할, 예상되는 성공 및 오류, 테스트 계정, 공급자 또는 장치를 알려주십시오. 샘플 값을 사용하십시오. 절대 진짜 비밀을 붙여넣지 마세요.

[시작하기 전에](https://supastack.dev/ko/docs/web/before-you-start.md)

[단말기 기본사항](https://supastack.dev/ko/docs/web/terminal-basics.md)

[웹 로컬 설정](https://supastack.dev/ko/docs/web/ship-in-5-minutes.md)

[에이전트 프롬프트 및 프로젝트 메모리](https://supastack.dev/ko/docs/web/agents.md)


## 사이트 구성 업데이트

`apps/web/src/marketing/site-config.ts`는 브랜드 카피, 탐색/바닥글 링크, FAQ 및 선택적 저장소/문서 대상을 소유합니다. 제품 이름을 구성 요소 전체에 분산시키기 전에 이를 업데이트하십시오. 키트의 자체 크롬은 이 구성을 사용합니다. 복사 가능한 크롬 블록은 제품 소품을 수용합니다.


## 자산 계열을 함께 교체

공유된 4개 타일 표시에는 얇은 윤곽선이 있는 흰색 왼쪽 위/오른쪽 아래 및 회색 오른쪽 위/왼쪽 아래 타일이 있습니다. 헤더 표시를 투명하게 유지하십시오. 앱 아이콘/파비콘은 둥근 검정색 뒷면을 사용합니다. 파생 제품은 마크 및 관련 앱/데스크톱 자산을 함께 대체할 수 있습니다.

공유 공개 소셜 카드는 `/og.png`입니다. 치수 및 대체 텍스트로 `marketing/seo.tsx`의 설명자를 업데이트합니다. 블로그 기사 카드는 별도의 다음 이미지 경로를 사용합니다.


## 모든 공공장소를 확인하세요

머리글/바닥글, 연락처, FAQ, 법적 페이지, 현지화된 홈 카피, 제목 및 소셜 카드를 확인하세요. 제품의 마케팅 테마 모드를 선택하고 작동하는 지원/연락처 링크만 제공하세요.

[제품 스타일](https://supastack.dev/ko/docs/web/theming.md)

[법적 페이지 발판](https://supastack.dev/ko/docs/web/project-structure.md)

[메타데이터 및 소셜 카드](https://supastack.dev/ko/docs/web/project-structure.md)


## 설치 및 설정

마케팅 표면은 하드코딩된 JSX가 아니라 타입이 지정된 데이터에 연결됩니다 — 히어로, 기능 섹션, 가격, FAQ, 변경 로그, 쇼케이스, 연락처, 법적 페이지가 모두 사이트 설정과 콘텐츠 파일에서 카피와 구조를 읽습니다.

MARKETING_THEME_MODE(src/theme/marketing-theme.ts)가 마케팅을 키트의 고정 다크 브랜드에 둘지, 방문자의 테마 팩을 상속할지, 특정 팩에 고정할지 결정합니다. 파생 제품은 자체 모드를 선택합니다.

```
src/marketing/         branded chrome and sections
src/kit/blocks/        copyable token-only section patterns
  marketing/           hero, features, product grid, pricing, FAQ, CTA
  app/                 stat grid, data table, empty state, choice pills
  chrome/              site header, footer, prose page

MARKETING_THEME_MODE = "locked" | "inherit" | "<pack-id>"
```


## 구현 워크플로

먼저 블록 라이브러리로 페이지를 구성하고, 패턴이 없으면 같은 토큰 전용 스타일로 새 블록을 작성해 src/kit/blocks.ts에 등록하세요. 마케팅 컴포넌트를 제품 표면에 넣지 마세요 — 두 크롬 시스템은 분리된 상태를 유지합니다.

로컬라이즈된 카피는 사전과 site-content 오버레이를 통해 흐릅니다. 언어별로 컴포넌트를 포크하는 대신 거기에 키를 추가하세요.


## 검증 및 문제 해결

마케팅 페이지를 320px와 데스크톱에서, 보이는 키보드 포커스와 함께, 최소 하나의 라이트 팩과 하나의 다크 팩에서, 그리고 reduced motion으로 확인하세요. 마케팅 주장이 기능을 참조한다면 링크된 문서 페이지가 존재하는지 확인하세요.


## 다음

[SEO와 공유](https://supastack.dev/ko/docs/web/seo.md)