Svelte Dev

절대 금지:

• ❌ 브랜드 문서를 읽지 않고 "일반적인" UI 만들기
• ❌ 감성 언어를 기술 용어로 대체하기
• ❌ 브랜드 컬러를 임의로 변경하기

예시: Cloud Between Us 프로젝트

❌ 잘못된 접근

<!-- 일반적인 궁합 테스트처럼 구현 -->
<div class="result-card">
	<h2>당신의 성격 유형: TYPE_A</h2>
	<p>궁합도: 85%</p>
	<div class="progress-bar" style="width: 85%"></div>
	<button>상세 분석 보기</button>
</div>

문제점:

• "성격 유형"이라는 심리학적 용어 사용
• 퍼센트 바로 감정을 수치화
• 브랜드 세계관 무시
• 감성 없는 디자인

✅ 올바른 접근

<script lang="ts">
	import type { CloudProfile } from '$lib/types/cloud';

	export let cloudProfile: CloudProfile;
</script>

<!-- 브랜드 세계관 반영 -->
<article class="sky-canvas">
	<div class="cloud-reveal">
		<span class="cloud-icon" aria-hidden="true">{cloudProfile.emoji}</span>
		<h1 class="cloud-name">{cloudProfile.name}</h1>
		<p class="cloud-subtitle">{cloudProfile.subtitle}</p>
	</div>

	<p class="cloud-essence">
		{cloudProfile.keywords.join(' · ')}
	</p>

	<blockquote class="sky-lore">
		{@html cloudProfile.lore}
	</blockquote>

	<!-- 브랜드 카피 사용 -->
	<p class="chemistry-hint">
		"Some clouds collide.<br />Yours blend."
	</p>
</article>

<style>
	.sky-canvas {
		background: linear-gradient(to bottom, var(--sky-blue), var(--off-white));
		border-radius: 24px; /* 브랜드 라운드 */
		padding: 3rem;
		box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06); /* Soft shadow */
	}

	.cloud-name {
		font-size: 2rem;
		font-weight: 500; /* Soft but intentional */
		letter-spacing: 0.02em;
		margin: 1rem 0 0.5rem;
	}

	.cloud-subtitle {
		font-size: 1.125rem;
		color: var(--text-gray);
		font-style: italic;
	}

	.cloud-essence {
		margin: 2rem 0;
		font-size: 1rem;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--text-gray);
	}

	.sky-lore {
		font-style: italic;
		line-height: 1.8; /* Slightly poetic */
		color: #555;
		border-left: 3px solid var(--warm-peach);
		padding-left: 1.5rem;
		margin: 2rem 0;
	}

	.chemistry-hint {
		text-align: center;
		font-size: 1.25rem;
		line-height: 1.6;
		color: var(--text-dark);
		margin-top: 3rem;
	}
</style>

올바른 이유:

• ✅ 브랜드 언어 사용 ("햇살 (Sunlit)" vs "성격 유형")
• ✅ 세계관 서사 반영 ("The Warm Leader")
• ✅ 컬러 시스템 준수 (CSS 변수)
• ✅ UI 철학 반영 (라운드 24px, 충분한 여백)
• ✅ 감성 카피 사용 ("Some clouds collide. Yours blend.")
• ✅ 타입 안정성 (CloudProfile 타입)

원칙 1: PRD 이해 우선

사용자가 기획서나 PRD를 제공하면:

1. 전체 문서를 정독하고 핵심 목표 파악
2. 기능 요구사항(Functional Requirements) 추출
3. 비기능 요구사항(Non-functional Requirements) 확인
4. 브랜드 정체성 파악
5. 우선순위와 제약사항 이해
6. 모호한 부분은 사용자에게 명확히 질문

절대 금지: 문서를 대충 읽고 추측으로 개발

원칙 2: 체계적인 개발 프로세스

Phase 1: 요구사항 분석

## 📋 요구사항 분석

### 브랜드 정체성

- 브랜드 포지셔닝: [핵심 메시지]
- 톤앤매너: [감성적 특징]
- 세계관: [IP 구조]

### 핵심 기능

- [기능 1]: [설명]
- [기능 2]: [설명]

### 사용자 플로우

1. [단계별 사용자 여정]

### 기술적 제약사항

- 성능: [목표]
- 브라우저 지원: [범위]
- 접근성: [WCAG 수준]

### 질문사항

- [ ] [모호한 부분 1]
- [ ] [모호한 부분 2]

Phase 2: 아키텍처 설계

## 🏗️ 아키텍처 설계

### 디렉토리 구조

src/
├── lib/
│ ├── components/ # UI 컴포넌트
│ ├── data/ # 정적 데이터 (Cloud 프로필, 질문 등)
│ ├── stores/ # 전역 상태 관리
│ ├── utils/ # 유틸리티 함수
│ └── types/ # TypeScript 타입
├── routes/ # SvelteKit 라우팅
└── app.css # 브랜드 CSS Variables

### 주요 컴포넌트

- [컴포넌트명]: [책임과 역할]

### 상태 관리 전략

- [어떤 상태를 어디서 관리할지]

### 데이터 구조

- [타입 정의]

Phase 3: 구현

• 컴포넌트 단위 개발: 작은 단위부터 테스트 가능하게
• 타입 안정성: TypeScript 적극 활용
• 브랜드 준수: 컬러, 카피, 톤 철저히 지킴
• 접근성: ARIA 속성, 키보드 네비게이션
• 반응형: 모바일/태블릿/데스크톱 대응

Cloud Between Us 프로젝트 가이드

브랜드 CSS Variables

/* app.css */
:root {
	/* Primary: 감정의 공기 */
	--sky-blue: #a7d8f5;

	/* Accent: 연애의 온기 */
	--warm-peach: #ffc6a8;

	/* Background: 부드러운 공간감 */
	--off-white: #fafaf8;

	/* Text */
	--text-dark: #111827;
	--text-gray: #6b7280;

	/* UI */
	--radius-sm: 16px;
	--radius-md: 24px;
	--radius-lg: 32px;

	/* Shadow */
	--shadow-soft: 0 4px 24px rgba(0, 0, 0, 0.06);

	/* Animation */
	--transition-smooth: 0.3s ease-out;
}

사용 예시:

<style>
	.button {
		background: var(--warm-peach);
		border-radius: var(--radius-md);
		box-shadow: var(--shadow-soft);
		transition: all var(--transition-smooth);
	}
</style>

타입 정의

// src/lib/types/cloud.ts

export type CloudType =
  | 'sunlit'    // 햇살
  | 'mist'      // 안개
  | 'storm'     // 천둥
  | 'dawn'      // 여명
  | 'wild'      // 바람
  | 'shade';    // 그늘

export type WeatherPhenomenon =
  | 'glow'
  | 'rain'
  | 'thunder';

export interface CloudProfile {
  type: CloudType;
  emoji: string;
  name: string;
  subtitle: string;
  keywords: [string, string, string, string];
  lore: string;
  traits: {
    strengths: string[];
    shadows: string[];
  };
}

export interface CoupleChemistry {
  user: CloudType;
  partner: CloudType;
  skyName: string;           // "Morning Light Through Fog"
  phenomenon: WeatherPhenomenon;
  narrative: string;
  warning: string | null;
}

export interface TestQuestion {
  id: number;
  question: string;
  options: Array<{
    text: string;
    cloudType: CloudType;
  }>;
}

컴포넌트 구조 예시

CloudReveal.svelte (결과 페이지 핵심 컴포넌트)

<script lang="ts">
	import { fade, fly } from 'svelte/transition';
	import type { CloudProfile } from '$lib/types/cloud';

	export let cloudProfile: CloudProfile;

	let revealed = false;

	// 애니메이션 지연
	setTimeout(() => (revealed = true), 300);
</script>

<section class="cloud-reveal-container">
	{#if revealed}
		<div class="cloud-icon-wrapper" in:fly={{ y: -50, duration: 600, delay: 200 }}>
			<span class="cloud-icon">{cloudProfile.emoji}</span>
		</div>

		<div class="cloud-info" in:fade={{ duration: 600, delay: 400 }}>
			<h1 class="cloud-name">{cloudProfile.name}</h1>
			<p class="cloud-subtitle">{cloudProfile.subtitle}</p>

			<div class="cloud-keywords">
				{#each cloudProfile.keywords as keyword, i}
					<span class="keyword" in:fade={{ delay: 600 + i * 100 }}>
						{keyword}
					</span>
					{#if i < cloudProfile.keywords.length - 1}
						<span class="separator">·</span>
					{/if}
				{/each}
			</div>
		</div>

		<blockquote class="sky-lore" in:fade={{ duration: 600, delay: 800 }}>
			{@html cloudProfile.lore}
		</blockquote>
	{/if}
</section>

<style>
	.cloud-reveal-container {
		text-align: center;
		padding: 4rem 2rem;
		background: linear-gradient(to bottom, var(--sky-blue), var(--off-white));
		border-radius: var(--radius-lg);
		box-shadow: var(--shadow-soft);
	}

	.cloud-icon-wrapper {
		margin-bottom: 2rem;
	}

	.cloud-icon {
		font-size: 6rem;
		display: block;
	}

	.cloud-name {
		font-size: 2.5rem;
		font-weight: 500;
		letter-spacing: 0.02em;
		margin: 0;
		color: var(--text-dark);
	}

	.cloud-subtitle {
		font-size: 1.25rem;
		font-style: italic;
		color: var(--text-gray);
		margin-top: 0.5rem;
	}

	.cloud-keywords {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 0.5rem;
		margin-top: 2rem;
		flex-wrap: wrap;
	}

	.keyword {
		font-size: 1rem;
		text-transform: uppercase;
		letter-spacing: 0.1em;
		color: var(--text-gray);
	}

	.separator {
		color: var(--text-gray);
		opacity: 0.5;
	}

	.sky-lore {
		margin-top: 3rem;
		font-style: italic;
		line-height: 1.8;
		color: #555;
		max-width: 600px;
		margin-left: auto;
		margin-right: auto;
		border-left: 3px solid var(--warm-peach);
		padding-left: 1.5rem;
		text-align: left;
	}

	@media (max-width: 768px) {
		.cloud-icon {
			font-size: 4rem;
		}

		.cloud-name {
			font-size: 2rem;
		}

		.cloud-subtitle {
			font-size: 1.125rem;
		}
	}
</style>

데이터 구조 예시

// src/lib/data/cloudProfiles.ts

import type { CloudProfile } from '$lib/types/cloud';

export const CLOUD_PROFILES: Record<string, CloudProfile> = {
  sunlit: {
    type: 'sunlit',
    emoji: '☀️',
    name: '햇살 (Sunlit)',
    subtitle: 'The Warm Leader',
    keywords: ['Warmth', 'Direction', 'Loyalty', 'Radiance'],
    lore: `
      햇살은 해를 가장 오래 품고 있는 구름이다.<br>
      이 구름은 빛을 통과시키지 않는다.<br>
      빛을 머금고 주변을 밝힌다.<br>
      사랑에 빠지면 길을 잃지 않게 하려 한다.<br>
      관계를 앞으로 움직이게 만든다.
    `,
    traits: {
      strengths: [
        '고백을 먼저 하는 구름',
        '미래를 그리는 구름',
        '"우리"라는 말을 자주 쓰는 구름',
      ],
      shadows: [
        '빛이 강해질수록 상대의 그림자를 보지 못할 수 있다',
        '리드하려는 마음이 통제가 될 위험',
      ],
    },
  },

  mist: {
    type: 'mist',
    emoji: '🌫',
    name: '안개 (Mist)',
    subtitle: 'The Sensitive Soul',
    keywords: ['Sensitivity', 'Intuition', 'Depth', 'Fragility'],
    lore: `
      안개는 해 뜨기 전 공기를 떠다닌다.<br>
      보이지 않지만 가장 많은 감정을 품고 있다.<br>
      사랑은 말보다 분위기다.<br>
      눈빛과 공기의 온도다.
    `,
    traits: {
      strengths: [
        '작은 변화도 알아차린다',
        '말 대신 표정을 읽는다',
        '깊이 연결되길 원한다',
      ],
      shadows: [
        '감정을 너무 많이 흡수해 스스로 흐려질 수 있다',
      ],
    },
  },

  // ... 나머지 4가지 타입
};

궁합 Matrix

// src/lib/data/chemistryMatrix.ts

import type { CloudType, CoupleChemistry, WeatherPhenomenon } from '$lib/types/cloud';

type ChemistryKey = `${CloudType}-${CloudType}`;

export const CHEMISTRY_MATRIX: Record<ChemistryKey, Omit<CoupleChemistry, 'user' | 'partner'>> = {
  'sunlit-mist': {
    skyName: 'Morning Light Through Fog',
    phenomenon: 'glow',
    narrative: `
      햇살의 따뜻한 빛이 안개의 감정을 천천히 녹인다.
      안개는 이해받는다고 느끼고,
      햇살은 보호하고 싶어진다.
    `,
    warning: '빛이 너무 강하면 안개는 사라진다.',
  },

  'sunlit-storm': {
    skyName: 'Lightning at Noon',
    phenomenon: 'thunder',
    narrative: `
      둘 다 강하다.
      햇살은 방향을 잡고, 천둥은 속도를 올린다.
      🔥 케미는 강렬하다.
      💥 충돌도 강렬하다.
    `,
    warning: null,
  },

  // ... 나머지 13가지 조합
};

export function getChemistry(user: CloudType, partner: CloudType): CoupleChemistry {
  const key: ChemistryKey = `${user}-${partner}`;
  const reverseKey: ChemistryKey = `${partner}-${user}`;

  const data = CHEMISTRY_MATRIX[key] || CHEMISTRY_MATRIX[reverseKey];

  if (!data) {
    throw new Error(`Chemistry data not found for ${user} and ${partner}`);
  }

  return {
    user,
    partner,
    ...data,
  };
}

스벨트 베스트 프랙티스

1. 상태 관리

// src/lib/stores/testProgress.ts

import { writable, derived } from 'svelte/store';
import type { TestQuestion, CloudType } from '$lib/types/cloud';

interface TestState {
  currentQuestionIndex: number;
  answers: Record<number, CloudType>;
  isComplete: boolean;
}

function createTestStore() {
  const { subscribe, set, update } = writable<TestState>({
    currentQuestionIndex: 0,
    answers: {},
    isComplete: false,
  });

  return {
    subscribe,

    answerQuestion: (questionId: number, cloudType: CloudType) => {
      update(state => ({
        ...state,
        answers: { ...state.answers, [questionId]: cloudType },
      }));
    },

    nextQuestion: () => {
      update(state => ({
        ...state,
        currentQuestionIndex: state.currentQuestionIndex + 1,
      }));
    },

    previousQuestion: () => {
      update(state => ({
        ...state,
        currentQuestionIndex: Math.max(0, state.currentQuestionIndex - 1),
      }));
    },

    complete: () => {
      update(state => ({ ...state, isComplete: true }));
    },

    reset: () => {
      set({
        currentQuestionIndex: 0,
        answers: {},
        isComplete: false,
      });
    },
  };
}

export const testStore = createTestStore();

// Derived store: 진행률 계산
export const progress = derived(
  testStore,
  $test => ($test.currentQuestionIndex / TOTAL_QUESTIONS) * 100
);

2. 라우팅 & 데이터 로딩

// src/routes/result/+page.ts

import type { PageLoad } from './$types';
import { error } from '@sveltejs/kit';
import { CLOUD_PROFILES } from '$lib/data/cloudProfiles';
import { calculateCloudType } from '$lib/utils/calculateCloud';

export const load: PageLoad = async ({ url }) => {
  // URL 파라미터에서 답변 데이터 가져오기
  const answersParam = url.searchParams.get('answers');

  if (!answersParam) {
    throw error(400, '테스트 결과가 없습니다');
  }

  try {
    const answers = JSON.parse(decodeURIComponent(answersParam));
    const cloudType = calculateCloudType(answers);
    const profile = CLOUD_PROFILES[cloudType];

    if (!profile) {
      throw error(404, 'Cloud 프로필을 찾을 수 없습니다');
    }

    return {
      cloudProfile: profile,
    };
  } catch (err) {
    throw error(500, '결과 처리 중 오류가 발생했습니다');
  }
};

<!-- src/routes/result/+page.svelte -->

<script lang="ts">
	import type { PageData } from './$types';
	import CloudReveal from '$lib/components/result/CloudReveal.svelte';
	import PremiumCTA from '$lib/components/result/PremiumCTA.svelte';

	export let data: PageData;

	$: ({ cloudProfile } = data);
</script>

<svelte:head>
	<title>{cloudProfile.name} - Cloud Between Us</title>
	<meta name="description" content={cloudProfile.subtitle} />
</svelte:head>

<main class="result-page">
	<CloudReveal {cloudProfile} />

	<section class="chemistry-preview">
		<h2>The Cloud Between You</h2>
		<!-- 블러 처리된 궁합 결과 -->
		<div class="blurred-chemistry">
			<p>커플 궁합을 보려면 프리미엄으로 업그레이드하세요</p>
		</div>
	</section>

	<PremiumCTA />
</main>

<style>
	.result-page {
		max-width: 800px;
		margin: 0 auto;
		padding: 2rem;
	}

	.chemistry-preview {
		margin-top: 4rem;
	}

	.blurred-chemistry {
		filter: blur(8px);
		pointer-events: none;
		user-select: none;
	}
</style>

3. 애니메이션

<script lang="ts">
	import { fade, fly, scale } from 'svelte/transition';
	import { quintOut } from 'svelte/easing';

	export let visible = true;
</script>

{#if visible}
	<div in:fly={{ y: 50, duration: 600, easing: quintOut }} out:fade={{ duration: 300 }}>
		<h1>Cloud Between Us</h1>
	</div>
{/if}

브랜드 애니메이션 원칙:

• ✅ 부드럽게 (0.3-0.6초)
• ✅ 의도적으로 (목적이 있는 애니메이션만)
• ❌ 과하지 않게 (우리는 게임이 아니다)

4. 접근성

<button on:click={handleClick} aria-label="Start the love test" aria-describedby="test-description">
	Start the Test ☁️
</button>

<p id="test-description" class="sr-only">
	2분 분량의 간단한 질문에 답하고 당신의 Cloud Type을 확인하세요
</p>

<style>
	.sr-only {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}
</style>

5. 반응형 디자인

<style>
	.container {
		padding: 4rem 2rem;
	}

	.grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 2rem;
	}

	@media (max-width: 1024px) {
		.grid {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@media (max-width: 768px) {
		.container {
			padding: 2rem 1rem;
		}

		.grid {
			grid-template-columns: 1fr;
			gap: 1rem;
		}
	}
</style>

개발 워크플로우

1. 프로젝트 초기화

# SvelteKit 프로젝트 생성
npm create svelte@latest cloud-between-us
cd cloud-between-us
npm install

# TypeScript, ESLint, Prettier 선택

# Tailwind CSS (선택사항)
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

2. 환경 변수

# .env
PUBLIC_API_URL=https://api.cloudbetweenu

s.com
PRIVATE_STRIPE_SECRET_KEY=sk_test_...

3. 개발 서버 실행

npm run dev

체크리스트

개발 전 확인사항

✅ PRD 전체를 읽고 이해했는가?
✅ 브랜드 정체성을 파악했는가?
✅ 세계관 서사를 이해했는가?
✅ 컬러 시스템을 숙지했는가?
✅ 톤앤매너를 파악했는가?
✅ 모호한 요구사항을 명확히 했는가?

코드 리뷰 포인트

✅ 타입 안정성 확보
✅ 브랜드 컬러 정확히 사용
✅ 브랜드 카피 사용
✅ 접근성 속성 추가
✅ 에러 처리
✅ 로딩 상태
✅ 반응형 디자인
✅ 애니메이션 적절성

마무리

모든 개발은 이 질문에서 시작한다:

Every love has a sky.
What does yours look like?

우리는 숫자를 보여주지 않는다.
우리는 하늘을 보여준다.

END OF SKILL