하드 스펙 문서: Antiperfect.Club 리브랜딩 프로젝트 완전 기술 명세서

서론: 하드 스펙이 없는 디자인은 추측에 불과하다

‘느낌’으로 디자인을 하지만, 실제 개발에서는 구체적인 수치와 명세가 필요하다. 이 문서는 Antiperfect.Club 리브랜딩 프로젝트의 완전한 기술 명세서로, 개발자가 즉시 구현할 수 있는 모든 하드 스펙을 담고 있다.

1. 프로젝트 요구사항 명세서 (PRD)

1.1 프로젝트 개요

1.2 핵심 페이지 구조

graph TD
    A[Home] --> B[Services]
    A --> C[Case Studies]
    A --> D[About]
    A --> E[Journal]
    B --> F[UX Compliance]
    B --> G[Full-Stack CRO]
    B --> H[Creative Web Production]
    B --> I[Antiperfect Mindset Workshop]
    
    style B fill:#f9f,stroke:#333,stroke-width:2px
    style C fill:#f9f,stroke:#333,stroke-width:2px

2. 디자인 시스템 명세

2.1 컬러 팔레트

CSS 변수 정의:

:root {
  --color-background: #000000;
  --color-text-primary: #FFFFFF;
  --color-text-secondary: #A0A0A0;
  --color-accent-primary: #FF00FF;
  --color-accent-secondary: #00FFFF;
  --color-accent-glitch: #00FF00;
  --color-component-bg: rgba(255, 255, 255, 0.05);
}

2.2 타이포그래피 시스템

CSS 변수 정의:

:root {
  /* Font Family */
  --font-family-display: 'VT323', monospace;
  --font-family-sans: 'Inter', sans-serif;

  /* Font Styles */
  --font-h1: 400 3.0rem/1.2 var(--font-family-display);
  --font-h2: 400 2.25rem/1.3 var(--font-family-display);
  --font-h3: 700 1.5rem/1.4 var(--font-family-sans);
  --font-h4: 600 1.125rem/1.5 var(--font-family-sans);
  --font-body-primary: 400 1.0rem/1.6 var(--font-family-sans);
  --font-body-small: 400 0.875rem/1.5 var(--font-family-sans);
}

2.3 스페이싱 시스템

4px 기반의 일관된 스페이싱 시스템을 사용한다.

CSS 변수 정의:

:root {
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem;  /* 8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem;    /* 16px */
  --space-6: 1.5rem;  /* 24px */
  --space-8: 2rem;    /* 32px */
  --space-12: 3rem;   /* 48px */
  --space-16: 4rem;   /* 64px */
}

3. 컴포넌트 아키텍처

3.1 컴포넌트 계층 구조

graph TD
    A[Design System] --> B[Atoms]
    A --> C[Molecules]
    A --> D[Organisms]
    A --> E[Templates]
    A --> F[Pages]
    
    B --> B1[Button]
    B --> B2[Input]
    B --> B3[Typography]
    
    C --> C1[ServiceCard]
    C --> C2[CaseStudyCard]
    C --> C3[Navigation]
    
    D --> D1[Header]
    D --> D2[ServiceSection]
    D --> D3[Footer]
    
    E --> E1[ServicePage]
    E --> E2[AboutPage]
    
    F --> F1[Services]
    F --> F2[CaseStudies]
    F --> F3[About]

3.2 핵심 컴포넌트 명세

3.2.1 ServiceBlock 컴포넌트

구조: H2 제목 + 설명 + 2개 모듈 (ShowcaseModule, TechStackModule)

React 컴포넌트 구조:

interface ServiceBlockProps {
  title: string;
  description: string;
  showcase: {
    title: string;
    content: string;
  };
  techStack: string[];
}

const ServiceBlock: React.FC<ServiceBlockProps> = ({
  title,
  description,
  showcase,
  techStack
}) => {
  return (
    <div className="service-block">
      <h2 className="service-title">{title}</h2>
      <p className="service-description">{description}</p>
      <div className="service-modules">
        <ShowcaseModule {...showcase} />
        <TechStackModule technologies={techStack} />
      </div>
    </div>
  );
};

3.2.2 Navigation 컴포넌트

구조: 상단 고정 헤더, 로고 + 네비게이션 링크

4. 레이아웃 시스템

4.1 그리드 시스템

기본 그리드: 12컬럼 그리드 시스템 브레이크포인트:

• 모바일: 320px - 768px
• 태블릿: 768px - 1024px
• 데스크톱: 1024px+

CSS 그리드 정의:

.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-4);
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
    gap: var(--space-2);
    padding: 0 var(--space-2);
  }
}

4.2 페이지 레이아웃 명세

4.2.1 Services 페이지 레이아웃

+--------------------------------------------------------------------------+
| Header: [Services] [Case Studies] [About] [Journal]                      |
+--------------------------------------------------------------------------+
|                                                                          |
|     <H1> Services & Capabilities                                         |
|     <H4> This is how I translate my unconventional arsenal...            |
|                                                                          |
+==========================================================================+
|                                                                          |
|     <Service Block 1: UX Compliance & Team Training>                     |
|                                                                          |
|     +------------------------------------------------------------------+ |
|     |  [서비스 설명]                                                   | |
|     |  +------------------------------------------------------------+  | |
|     |  | [관련 역량 쇼케이스: Pragmatic Compliance...]              |  | |
|     |  +------------------------------------------------------------+  | |
|     |  [Key Technologies: WCAG, JIRA, ISO 27001...]                | | |
|     +------------------------------------------------------------------+ |
|                                                                          |
+--------------------------------------------------------------------------+

5. 인터랙션 명세

5.1 애니메이션 가이드라인

5.2 CSS 애니메이션 변수

:root {
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --ease-out: ease-out;
  --ease-in-out: ease-in-out;
}

/* 호버 효과 예시 */
.button {
  transition: all var(--duration-fast) var(--ease-out);
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(255, 0, 255, 0.4);
}

/* 글리치 효과 예시 */
.glitch-text {
  animation: glitch 0.1s infinite;
}

@keyframes glitch {
  0% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(-2px, -2px); }
  60% { transform: translate(2px, 2px); }
  80% { transform: translate(2px, -2px); }
  100% { transform: translate(0); }
}

6. 반응형 디자인 명세

6.1 브레이크포인트

6.2 반응형 타이포그래피

/* 모바일 */
@media (max-width: 768px) {
  :root {
    --font-h1: 400 2rem/1.2 var(--font-family-display);
    --font-h2: 400 1.5rem/1.3 var(--font-family-display);
    --font-h3: 700 1.25rem/1.4 var(--font-family-sans);
  }
}

/* 태블릿 */
@media (min-width: 769px) and (max-width: 1024px) {
  :root {
    --font-h1: 400 2.5rem/1.2 var(--font-family-display);
    --font-h2: 400 2rem/1.3 var(--font-family-display);
  }
}

7. 성능 최적화 명세

7.1 이미지 최적화

• 포맷: WebP 우선, PNG/JPEG 폴백
• 크기: 데스크톱 1440px, 태블릿 768px, 모바일 320px
• 로딩: Lazy loading 적용
• 압축: 80% 품질 기준

7.2 폰트 최적화

/* 폰트 로딩 최적화 */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: 'VT323';
  src: url('/fonts/vt323-regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

8. 접근성 명세

8.1 WCAG 2.1 AA 준수 항목

8.2 접근성 CSS

/* 키보드 포커스 스타일 */
:focus {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}

/* 애니메이션 제어 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

9. 테스트 명세

9.1 브라우저 지원

9.2 성능 목표

10. 배포 명세

10.1 빌드 설정

{
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "gsap": "^3.12.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.0",
    "@types/react-dom": "^18.2.0",
    "@vitejs/plugin-react": "^4.0.0",
    "typescript": "^5.0.0",
    "vite": "^4.0.0"
  }
}

10.2 환경 변수

# .env.production
VITE_APP_TITLE=Antiperfect.Club
VITE_APP_DESCRIPTION=Creative Technologist Portfolio
VITE_ANALYTICS_ID=GA_MEASUREMENT_ID

결론: 명세서의 힘

이 하드 스펙 문서는 단순한 디자인 가이드라인을 넘어서, 실제 개발팀이 즉시 구현할 수 있는 완전한 기술 명세서다. 모든 수치, 색상, 타이포그래피, 애니메이션, 반응형 동작이 구체적으로 정의되어 있어, 개발 과정에서 발생할 수 있는 모호함을 최소화한다.

특히 CSS 변수를 활용한 디자인 시스템은 일관성 있는 개발을 가능하게 하며, 컴포넌트 아키텍처는 재사용 가능한 코드 구조를 제공한다. 이는 단순한 포트폴리오 웹사이트를 넘어서, 확장 가능하고 유지보수가 용이한 디지털 제품의 기반이 된다.

부록: 개발 체크리스트

A. 구현 전 체크리스트

• [ ] 디자인 시스템 CSS 변수 설정
• [ ] 폰트 파일 최적화 및 로딩 설정
• [ ] 컴포넌트 아키텍처 설계
• [ ] 반응형 브레이크포인트 정의
• [ ] 접근성 가이드라인 적용

B. 구현 후 체크리스트

• [ ] 모든 브라우저에서 테스트
• [ ] 성능 최적화 검증
• [ ] 접근성 검사 통과
• [ ] 모바일 사용성 테스트
• [ ] SEO 메타데이터 설정

이 명세서를 바탕으로 개발을 진행하면, 일관성 있고 확장 가능한 웹사이트를 효율적으로 구축할 수 있을 것이다.