@wondev/dotenv-example 1.0.0

package/.cursor/rules/supabase/supabase-declarative-database-schema.mdc

@@ -0,0 +1,78 @@
+---
+# Specify the following for Cursor rules
+description: For when modifying the Supabase database schema.
+alwaysApply: false
+---
+
+# Database: Declarative Database Schema
+
+Mandatory Instructions for Supabase Declarative Schema Management
+
+## 1. **Exclusive Use of Declarative Schema**
+
+-**All database schema modifications must be defined within `.sql` files located in the `supabase/schemas/` directory. -**Do not\*\* create or modify files directly in the `supabase/migrations/` directory unless the modification is about the known caveats below. Migration files are to be generated automatically through the CLI.
+
+## 2. **Schema Declaration**
+
+-For each database entity (e.g., tables, views, functions), create or update a corresponding `.sql` file in the `supabase/schemas/` directory
+-Ensure that each `.sql` file accurately represents the desired final state of the entity
+
+## 3. **Migration Generation**
+
+- Before generating migrations, **stop the local Supabase development environment**
+  ```bash
+  supabase stop
+  ```
+- Generate migration files by diffing the declared schema against the current database state
+  ```bash
+  supabase db diff -f <migration_name>
+  ```
+  Replace `<migration_name>` with a descriptive name for the migration
+
+## 4. **Schema File Organization**
+
+- Schema files are executed in lexicographic order. To manage dependencies (e.g., foreign keys), name files to ensure correct execution order
+- When adding new columns, append them to the end of the table definition to prevent unnecessary diffs
+
+## 5. **Rollback Procedures**
+
+- To revert changes
+  - Manually update the relevant `.sql` files in `supabase/schemas/` to reflect the desired state
+  - Generate a new migration file capturing the rollback
+    ```bash
+    supabase db diff -f <rollback_migration_name>
+    ```
+  - Review the generated migration file carefully to avoid unintentional data loss
+
+## 6. **Known caveats**
+
+The migra diff tool used for generating schema diff is capable of tracking most database changes. However, there are edge cases where it can fail.
+
+If you need to use any of the entities below, remember to add them through versioned migrations instead.
+
+### Data manipulation language
+
+- DML statements such as insert, update, delete, etc., are not captured by schema diff
+
+### View ownership
+
+- view owner and grants
+- security invoker on views
+- materialized views
+- doesn’t recreate views when altering column type
+
+### RLS policies
+
+- alter policy statements
+- column privileges
+- Other entities#
+- schema privileges are not tracked because each schema is diffed separately
+- comments are not tracked
+- partitions are not tracked
+- alter publication ... add table ...
+- create domain statements are ignored
+- grant statements are duplicated from default privileges
+
+---
+
+**Non-compliance with these instructions may lead to inconsistent database states and is strictly prohibited.**

package/.cursor/rules/supabase/supabase-postgres-sql-style-guide.mdc

@@ -0,0 +1,133 @@
+---
+# Specify the following for Cursor rules
+description: Guidelines for writing Postgres SQL
+alwaysApply: false
+---
+
+# Postgres SQL Style Guide
+
+## General
+
+- Use lowercase for SQL reserved words to maintain consistency and readability.
+- Employ consistent, descriptive identifiers for tables, columns, and other database objects.
+- Use white space and indentation to enhance the readability of your code.
+- Store dates in ISO 8601 format (`yyyy-mm-ddThh:mm:ss.sssss`).
+- Include comments for complex logic, using '/_ ... _/' for block comments and '--' for line comments.
+
+## Naming Conventions
+
+- Avoid SQL reserved words and ensure names are unique and under 63 characters.
+- Use snake_case for tables and columns.
+- Prefer plurals for table names
+- Prefer singular names for columns.
+
+## Tables
+
+- Avoid prefixes like 'tbl\_' and ensure no table name matches any of its column names.
+- Always add an `id` column of type `identity generated always` unless otherwise specified.
+- Create all tables in the `public` schema unless otherwise specified.
+- Always add the schema to SQL queries for clarity.
+- Always add a comment to describe what the table does. The comment can be up to 1024 characters.
+
+## Columns
+
+- Use singular names and avoid generic names like 'id'.
+- For references to foreign tables, use the singular of the table name with the `_id` suffix. For example `user_id` to reference the `users` table
+- Always use lowercase except in cases involving acronyms or when readability would be enhanced by an exception.
+
+#### Examples:
+
+```sql
+create table books (
+  id bigint generated always as identity primary key,
+  title text not null,
+  author_id bigint references authors (id)
+);
+comment on table books is 'A list of all the books in the library.';
+```
+
+## Queries
+
+- When the query is shorter keep it on just a few lines. As it gets larger start adding newlines for readability
+- Add spaces for readability.
+
+Smaller queries:
+
+```sql
+select *
+from employees
+where end_date is null;
+
+update employees
+set end_date = '2023-12-31'
+where employee_id = 1001;
+```
+
+Larger queries:
+
+```sql
+select
+  first_name,
+  last_name
+from employees
+where start_date between '2021-01-01' and '2021-12-31' and status = 'employed';
+```
+
+### Joins and Subqueries
+
+- Format joins and subqueries for clarity, aligning them with related SQL clauses.
+- Prefer full table names when referencing tables. This helps for readability.
+
+```sql
+select
+  employees.employee_name,
+  departments.department_name
+from
+  employees
+  join departments on employees.department_id = departments.department_id
+where employees.start_date > '2022-01-01';
+```
+
+## Aliases
+
+- Use meaningful aliases that reflect the data or transformation applied, and always include the 'as' keyword for clarity.
+
+```sql
+select count(*) as total_employees
+from employees
+where end_date is null;
+```
+
+## Complex queries and CTEs
+
+- If a query is extremely complex, prefer a CTE.
+- Make sure the CTE is clear and linear. Prefer readability over performance.
+- Add comments to each block.
+
+```sql
+with
+  department_employees as (
+    -- Get all employees and their departments
+    select
+      employees.department_id,
+      employees.first_name,
+      employees.last_name,
+      departments.department_name
+    from
+      employees
+      join departments on employees.department_id = departments.department_id
+  ),
+  employee_counts as (
+    -- Count how many employees in each department
+    select
+      department_name,
+      count(*) as num_employees
+    from department_employees
+    group by department_name
+  )
+select
+  department_name,
+  num_employees
+from employee_counts
+order by department_name;
+```

package/.cursor/rules/supabase/supabase-writing-edge-functions.mdc

@@ -0,0 +1,105 @@
+---
+description: Coding rules for Supabase Edge Functions
+alwaysApply: false
+---
+
+# Writing Supabase Edge Functions
+
+You're an expert in writing TypeScript and Deno JavaScript runtime. Generate **high-quality Supabase Edge Functions** that adhere to the following best practices:
+
+## Guidelines
+
+1. Try to use Web APIs and Deno’s core APIs instead of external dependencies (eg: use fetch instead of Axios, use WebSockets API instead of node-ws)
+2. If you are reusing utility methods between Edge Functions, add them to `supabase/functions/_shared` and import using a relative path. Do NOT have cross dependencies between Edge Functions.
+3. Do NOT use bare specifiers when importing dependecnies. If you need to use an external dependency, make sure it's prefixed with either `npm:` or `jsr:`. For example, `@supabase/supabase-js` should be written as `npm:@supabase/supabase-js`.
+4. For external imports, always define a version. For example, `npm:@express` should be written as `npm:express@4.18.2`.
+5. For external dependencies, importing via `npm:` and `jsr:` is preferred. Minimize the use of imports from @`deno.land/x` , `esm.sh` and @`unpkg.com` . If you have a package from one of those CDNs, you can replace the CDN hostname with `npm:` specifier.
+6. You can also use Node built-in APIs. You will need to import them using `node:` specifier. For example, to import Node process: `import process from "node:process". Use Node APIs when you find gaps in Deno APIs.
+7. Do NOT use `import { serve } from "https://deno.land/std@0.168.0/http/server.ts"`. Instead use the built-in `Deno.serve`.
+8. Following environment variables (ie. secrets) are pre-populated in both local and hosted Supabase environments. Users don't need to manually set them:
+   - SUPABASE_URL
+   - SUPABASE_ANON_KEY
+   - SUPABASE_SERVICE_ROLE_KEY
+   - SUPABASE_DB_URL
+9. To set other environment variables (ie. secrets) users can put them in a env file and run the `supabase secrets set --env-file path/to/env-file`
+10. A single Edge Function can handle multiple routes. It is recommended to use a library like Express or Hono to handle the routes as it's easier for developer to understand and maintain. Each route must be prefixed with `/function-name` so they are routed correctly.
+11. File write operations are ONLY permitted on `/tmp` directory. You can use either Deno or Node File APIs.
+12. Use `EdgeRuntime.waitUntil(promise)` static method to run long-running tasks in the background without blocking response to a request. Do NOT assume it is available in the request / execution context.
+
+## Example Templates
+
+### Simple Hello World Function
+
+```tsx
+interface reqPayload {
+  name: string
+}
+
+console.info('server started')
+
+Deno.serve(async (req: Request) => {
+  const { name }: reqPayload = await req.json()
+  const data = {
+    message: `Hello ${name} from foo!`,
+  }
+
+  return new Response(JSON.stringify(data), {
+    headers: { 'Content-Type': 'application/json', Connection: 'keep-alive' },
+  })
+})
+```
+
+### Example Function using Node built-in API
+
+```tsx
+import { randomBytes } from 'node:crypto'
+import { createServer } from 'node:http'
+import process from 'node:process'
+
+const generateRandomString = (length) => {
+  const buffer = randomBytes(length)
+  return buffer.toString('hex')
+}
+
+const randomString = generateRandomString(10)
+console.log(randomString)
+
+const server = createServer((req, res) => {
+  const message = `Hello`
+  res.end(message)
+})
+
+server.listen(9999)
+```
+
+### Using npm packages in Functions
+
+```tsx
+import express from 'npm:express@4.18.2'
+
+const app = express()
+
+app.get(/(.*)/, (req, res) => {
+  res.send('Welcome to Supabase')
+})
+
+app.listen(8000)
+```
+
+### Generate embeddings using built-in @Supabase.ai API
+
+```tsx
+const model = new Supabase.ai.Session('gte-small')
+
+Deno.serve(async (req: Request) => {
+  const params = new URL(req.url).searchParams
+  const input = params.get('text')
+  const output = await model.run(input, { mean_pool: true, normalize: true })
+  return new Response(JSON.stringify(output), {
+    headers: {
+      'Content-Type': 'application/json',
+      Connection: 'keep-alive',
+    },
+  })
+})
+```

package/.cursor/rules/web/design-rules.mdc

@@ -0,0 +1,381 @@
+
+**기본 구조:**
+```
+역할: [프레임워크] 전문가이며 [UI 라이브러리] 특화
+상황: [애플리케이션 유형]을 개발 중이며 [특정 요구사항] 필요
+작업: [컴포넌트 타입]을 생성하되 [구체적 기능] 포함
+제약: [스타일링 방식], [접근성/반응형 요구사항] 준수
+출력: [코드 형식]과 [문서화 수준] 제공
+```
+
+**고급 컨텍스트 레이어링:**
+- **프로젝트 컨텍스트**: 업계, 대상 사용자, 목표
+- **기술적 컨텍스트**: 플랫폼, 제약사항, 통합 요소  
+- **디자인 컨텍스트**: 브랜드, 스타일, 패턴
+- **사용자 컨텍스트**: 페르소나, 시나리오, 행동 패턴
+- **비즈니스 컨텍스트**: KPI, 성공 지표, 일정
+
+### UI/UX 특화 프롬프트 패턴
+
+**컴포넌트 생성 패턴:**
+```
+TypeScript React 버튼 컴포넌트를 생성하세요:
+- 변형: primary/secondary/outline 상태 지원
+- 크기: small/medium/large 옵션
+- 상태: disabled, loading 상태 처리
+- 접근성: ARIA 속성과 키보드 네비게이션
+- 스타일링: Tailwind CSS와 디자인 토큰 활용
+- 테스트: Jest와 React Testing Library 포함
+```
+
+**레이아웃 설계 패턴:**
+```
+모바일 우선 반응형 그리드 레이아웃 구현:
+- 데스크톱: 3열, 태블릿: 2열, 모바일: 1열
+- CSS Grid와 Tailwind 브레이크포인트 사용
+- 간격: 일관된 스페이싱 시스템 적용
+- 성능: 이미지 지연 로딩과 최적화
+- 접근성: 스크린 리더 호환성
+```
+
+## 컴포넌트 설계와 디자인 시스템 전략
+
+### Atomic Design 기반 프롬프트
+
+**원자(Atoms) 생성:**
+```
+기본 인풋 필드 원자 컴포넌트 생성:
+- 의미적 HTML 요소 사용
+- 타입별 변형: text, email, password, number
+- 상태: default, focused, error, disabled
+- 접근성: 레이블 연결, ARIA 속성
+- 스타일링: 디자인 토큰 기반
+```
+
+**분자(Molecules) 구성:**
+```
+검색 박스 분자 컴포넌트 설계:
+- 구성 요소: 입력 필드 + 검색 버튼 + 아이콘
+- 기능: 자동완성, 실시간 검색, 키보드 단축키
+- 상태 관리: 검색어, 결과, 로딩 상태
+- 최적화: 디바운싱, 캐싱, 성능 고려
+```
+
+### 디자인 토큰 기반 시스템
+
+**토큰 체계 구축:**
+```json
+{
+  "color": {
+    "primary": {
+      "50": "#f0f9ff",
+      "500": "#3b82f6",
+      "900": "#1e3a8a"
+    }
+  },
+  "spacing": {
+    "xs": "0.25rem",
+    "sm": "0.5rem",
+    "md": "1rem"
+  },
+  "typography": {
+    "heading": {
+      "fontSize": "1.875rem",
+      "lineHeight": "2.25rem"
+    }
+  }
+}
+```
+
+**토큰 활용 프롬프트:**
+```
+디자인 토큰 기반 카드 컴포넌트 생성:
+- 배경색: semantic token의 surface 색상 사용
+- 패딩: spacing token의 md, lg 값 적용
+- 텍스트: typography token의 body, heading 스타일
+- 테마 지원: 다크/라이트 모드 자동 대응
+- 일관성: 전역 토큰 시스템과 연동
+```
+
+## 반응형 디자인과 접근성 고려사항
+
+### 모바일 우선 반응형 전략
+
+**브레이크포인트 시스템:**
+```
+반응형 내비게이션 메뉴 구현:
+- 모바일 (320px+): 햄버거 메뉴, 풀스크린 오버레이
+- 태블릿 (768px+): 축약된 메뉴, 드롭다운 지원
+- 데스크톱 (1024px+): 풀 메뉴, 메가 메뉴 옵션
+- 터치 친화적: 44px 최소 터치 영역
+- 성능: 뷰포트별 최적화된 자원 로딩
+```
+
+**플렉시블 레이아웃:**
+```
+CSS Grid와 Flexbox 조합 레이아웃:
+- 주요 구조: CSS Grid로 2차원 배치
+- 컴포넌트 정렬: Flexbox로 1차원 조정
+- 컨테이너 쿼리: 컴포넌트 레벨 반응형
+- 유동 타이포그래피: clamp()와 뷰포트 단위
+- 종횡비 유지: aspect-ratio 속성 활용
+```
+
+### WCAG 2.1 AA 준수 접근성
+
+**접근성 체크리스트 프롬프트:**
+```
+접근성 준수 폼 컴포넌트 생성:
+- 의미적 HTML: fieldset, legend, label 요소
+- ARIA 속성: aria-required, aria-invalid, aria-describedby
+- 색상 대비: 4.5:1 최소 비율 준수
+- 키보드 내비게이션: Tab, Enter, Space 키 지원
+- 스크린 리더: 명확한 읽기 순서와 안내
+- 에러 처리: 구체적이고 도움이 되는 메시지
+- 포커스 관리: 명확한 시각적 표시
+```
+
+**키보드 내비게이션 패턴:**
+```
+모달 다이얼로그 접근성 구현:
+- 포커스 트래핑: 모달 내부로 포커스 제한
+- ESC 키: 모달 닫기 기능
+- 초기 포커스: 첫 번째 상호작용 요소로 이동
+- 배경 스크롤: 모달 열림 시 방지
+- ARIA 속성: role="dialog", aria-modal="true"
+- 스크린 리더 알림: 모달 열림/닫힘 상태 전달
+```
+
+## 실제 개발 시나리오별 프롬프트 예시
+
+### 랜딩페이지 개발
+
+**기본 랜딩페이지:**
+```
+SaaS 제품 랜딩페이지 생성:
+- 히어로 섹션: 강력한 헤드라인, 서브헤딩, CTA 버튼
+- 가치 제안: 3개 핵심 혜택, 아이콘과 설명
+- 사회적 증명: 고객 로고, 평점, 사용자 수
+- 기능 하이라이트: 스크린샷과 설명, 호버 효과
+- 가격 테이블: 3단계 요금제, 추천 플랜 강조
+- CTA 섹션: 무료 체험 유도, 연락처 정보
+- 스타일: 미니멀, 전문적, 모바일 최적화
+```
+
+**한국 시장 특화 랜딩페이지:**
+```
+한국 B2B SaaS 랜딩페이지 설계:
+- 문화적 고려: 신뢰 구축 요소, 정중한 표현
+- 소셜 증명: 한국 기업 로고, 상세한 후기
+- 결제 방식: 카카오페이, 네이버페이 통합
+- 고객 지원: 라이브 챗, 한국어 지원 명시
+- 인증: 국내 보안 인증, 개인정보보호 표시
+- 모바일 우선: 세로 스크롤링, 터치 최적화
+```
+
+### 대시보드 인터페이스
+
+**분석 대시보드:**
+```
+데이터 분석 대시보드 구현:
+- 정보 구조: 계층적 데이터 표시, 맞춤형 뷰
+- 시각화 전략: 차트 유형별 데이터 매칭, 상호작용
+- 필터링 시스템: 날짜 범위, 카테고리, 사용자 정의
+- 성능 고려: 지연 로딩, 점진적 공개
+- 개인화: 위젯 배치, 개인 설정
+- 내보내기: PDF 보고서, 공유 링크, 예약 발송
+```
+
+### 폼 디자인과 검증
+
+**복합 단계별 폼:**
+```
+사용자 등록 다단계 폼 설계:
+- 사용자 플로우: 단계별 분해, 저장/재개 기능
+- 검증 전략: 인라인, 요약, 점진적 검증
+- 에러 처리: 구체적 에러 상태, 복구 제안
+- 데이터 지속성: 자동 저장, 세션 관리
+- 조건부 로직: 이전 답변에 따른 필드 표시/숨김
+- 전환 최적화: 필드 최소화, 스마트 기본값, 사회적 증명
+```
+
+### 네비게이션 시스템
+
+**이커머스 내비게이션:**
+```
+온라인 쇼핑몰 내비게이션 시스템:
+- 카테고리 구조: 계층적 조직, 패싯 내비게이션
+- 검색 경험: 자동완성, 오타 허용, 비주얼 검색
+- 사용자 계정: 위시리스트, 주문 내역, 계정 설정
+- 쇼핑 도구: 장바구니 미리보기, 비교, 최근 본 상품
+- 신뢰 신호: 보안 배지, 고객 서비스 접근
+- 개인화: 추천 카테고리, 브라우징 히스토리
+```
+
+## 프롬프트 최적화 팁과 주의사항
+
+### 효과적인 프롬프트 구조
+
+**구체성 계층:**
+1. **일반적**: "폼 만들어줘"
+2. **기본적**: "React 폼을 검증과 함께 만들어줘"
+3. **구체적**: "react-hook-form과 Zod 검증을 사용한 TypeScript 폼 컴포넌트를 만들어줘"
+4. **최적화**: 위 내용 + 접근성 요구사항, 스타일링 프레임워크, 에러 처리 패턴, 통합 요구사항
+
+### 반복적 개선 전략
+
+**OODA 루프 적용:**
+1. **관찰(Observe)**: 현재 출력 품질과 gaps 분석
+2. **방향설정(Orient)**: 결과에 기반한 이해 조정
+3. **결정(Decide)**: 구체적인 프롬프트 수정 선택
+4. **실행(Act)**: 개선된 프롬프트 구현
+
+**피드백 기반 반복:**
+```
+이전 컴포넌트에서 [구체적 개선사항]이 필요합니다.
+[정확한 요구사항]에 맞게 수정해주세요:
+- 문제점: [specific issue]
+- 기대 결과: [exact requirements]  
+- 제약사항: [what cannot be changed]
+- 성공 기준: [measurable criteria]
+```
+
+### 컨텍스트 보존 기법
+
+**세션 상태 관리:**
+```
+프로젝트 컨텍스트 유지:
+- 이전 대화 참조: "앞서 만든 디자인 시스템에 기반하여"
+- 일관된 명명: 프로젝트 전반에 걸친 용어 통일
+- 진행 상황 추적: 완료된 작업과 남은 작업 명시
+- 결정 문서화: 중요한 설계 결정과 근거 기록
+```
+
+## 초보자 실수와 개선 방안
+
+### 자주 발생하는 실수들
+
+**❌ 모호한 프롬프트:**
+"깔끔한 웹사이트 만들어줘"
+
+**✅ 개선된 버전:**
+```
+[구체적 업종] 비즈니스를 위한 반응형 웹사이트 생성:
+- 주요 목표: [리드 생성/판매/정보 제공]
+- 핵심 섹션: [소개, 서비스, 후기, 연락처]
+- 브랜드 성격: [전문적/친근함/혁신적]
+- 기술 요구사항: [CMS, SEO 친화적, 모바일 최적화]
+- 성공 지표: [전환 목표, 사용자 행동]
+```
+
+**❌ 컨텍스트 누락:**
+"대시보드 디자인해줘"
+
+**✅ 개선된 버전:**
+```
+원격 팀을 위한 프로젝트 관리 대시보드 설계:
+- 사용자 컨텍스트: [팀 규모, 기술 수준, 일일 워크플로우]
+- 데이터 유형: [프로젝트 진행률, 팀 성과, 마감일, 리소스]
+- 사용자 목표: [빠른 상태 확인, 상세 분석, 팀 협업]
+- 디바이스 사용: [주로 데스크톱, 모바일 체크인, 태블릿 발표]
+- 통합 요구: [기존 도구, API, 내보내기 요구사항]
+```
+
+### 디버깅과 문제 해결
+
+**체계적 디버깅 프레임워크:**
+```
+에러 분석 요청:
+- 에러: [정확한 에러 메시지]
+- 컨텍스트: [관련 코드와 환경 정보]
+- 기대 동작: [일어나야 할 일]
+- 실제 동작: [실제로 일어나는 일]
+- 해결 제약: [변경할 수 없는 것]
+- 해결 요구: [솔루션 기준]
+```
+
+## 2025년 최신 UI/UX 트렌드 반영
+
+### 현재 주요 디자인 트렌드
+
+**글래스모피즘과 뉴모피즘:**
+```
+모던 카드 컴포넌트 생성:
+- 글래스모피즘: backdrop-filter blur 효과, 투명도
+- 뉴모피즘: 부드러운 3D 효과, 미묘한 그림자
+- 다크 모드: 시스템 설정 감지, 매끄러운 전환
+- 마이크로 인터랙션: CSS 애니메이션 활용
+- 벤토 그리드: CSS Grid로 모듈형 콘텐츠 블록
+```
+
+### AI 기반 개인화
+
+**적응형 UI 구현:**
+```
+사용자 행동 기반 개인화 인터페이스:
+- 행동 추적: 사용자 상호작용 패턴 분석
+- 콘텐츠 추천: 개인화된 콘텐츠 표시
+- 적응형 레이아웃: 사용 패턴에 따른 UI 조정
+- 예측적 UI: 사용자 의도 예측 인터페이스
+- 동적 콘텐츠: 실시간 개인화 로딩
+```
+
+## 한국어 사용자를 위한 특화 가이드
+
+### 한국 시장 맞춤 디자인
+
+**문화적 고려사항:**
+```
+한국 사용자 대상 인터페이스 설계:
+- 시각적 선호: 깔끔하고 정리된 레이아웃, 충분한 여백
+- 상호작용 패턴: 모바일 우선 사용, 세로 스크롤링 선호
+- 신뢰 요소: 인증서, 고객 후기, 브랜드 평판
+- 커뮤니케이션: 정중하고 공식적인 언어, 관계 중심
+- 소셜 통합: 카카오톡 공유, 네이버 연동, 커뮤니티 기능
+```
+
+**한글 타이포그래피:**
+```
+한글 최적화 타이포그래피 시스템:
+- 폰트 선택: Noto Sans KR, Source Han Sans, Black Han Sans
+- 계층구조: 한글 문자 높이를 고려한 헤딩 레벨
+- 가독성: 한글 텍스트 행간, 문자 밀도 최적화
+- 다국어 지원: 한영 혼용 콘텐츠, 폰트 폴백
+- 성능: 웹폰트 최적화, 문자 서브셋팅
+```
+
+### 로컬라이제이션 체크리스트
+
+**한국 웹 표준 준수:**
+```
+한국 웹 접근성 및 표준 적용:
+- 접근성: KWCAG 준수, 스크린 리더 호환성
+- 성능: 한국 네트워크 최적화, CDN 고려사항
+- 결제 통합: 카카오페이, 네이버페이, 로컬 신용카드
+- 소셜 로그인: 카카오톡, 네이버, 로컬 플랫폼 연동
+- 검색 최적화: 네이버 SEO, 로컬 검색 패턴
+```
+
+## 실무 적용을 위한 체크리스트
+
+### 프로젝트 시작 전 준비
+
+1. **요구사항 명확화**: 구체적인 목표와 제약사항 정의
+2. **사용자 리서치**: 타겟 사용자와 사용 맥락 이해
+3. **기술 스택 결정**: 프레임워크, 라이브러리, 도구 선택
+4. **디자인 시스템**: 기존 시스템 또는 신규 구축 계획
+5. **접근성 요구사항**: WCAG 준수 수준과 특별 요구사항
+
+### 품질 보증 체크리스트
+
+**배포 전 검증:**
+- [ ] 접근성 준수 (WCAG 2.1 AA)
+- [ ] 반응형 디자인 테스트
+- [ ] 성능 최적화
+- [ ] 크로스 브라우저 호환성
+- [ ] 에러 처리 구현
+- [ ] 로딩 상태 관리
+- [ ] 키보드 내비게이션 지원
+- [ ] 스크린 리더 호환성
+- [ ] 색상 대비 검증
+- [ ] 모바일 사용성 테스트