Pitch: 보라색 무대 위의 대담한 기하학적 자신감

“프레젠테이션을 만드는 데 사용하는 도구 자체가 그 방 안에서 가장 훌륭한 프레젠테이션이어야 합니다.” — Christian Reber, 창립자

Pitch는 프레젠테이션 소프트웨어가 1990년대에 미적 진화를 멈추었기 때문에 탄생했습니다. Christian Reber와 Wunderlist 팀이 베를린에서 설립한 Pitch는 디자이너가 디자이너를 위한 프레젠테이션 도구를 만들면 어떤 일이 벌어지는지를 새롭게 상상했습니다. Google Slides가 실용적으로 느껴지고 PowerPoint가 기업적으로 느껴지는 반면, Pitch는 떠다니는 3D 유리 형상으로 채워진 풀블리드 보라색 그라디언트 히어로로 시작합니다 — 이것이 프레젠테이션이 어떠해야 하는지에 대한 확고한 견해를 가진 제품임을 즉시 보여줍니다.

핵심 요점

악센트가 아닌 무대로서의 보라색 - 대부분의 브랜드는 자사 색상을 버튼 틴트로 사용합니다. Pitch는 히어로 섹션의 전체 환경으로 보라색을 사용하여, 제품 시연을 겸하는 연극적 오프닝을 만들어냅니다.
극굵은 확신이 권위를 전달한다 - 800 웨이트 헤드라인(거의 모든 SaaS 경쟁사보다 굵은)은 제품 포지셔닝에 대한 일말의 망설임도 없음을 전달합니다.
이중 속도 타이포그래피가 리듬을 만든다 - 1.0 줄 높이의 밀도 높고 무거운 헤드라인 다음에 2.0 줄 높이의 통풍 좋은 본문이 오면, “주목을 끌다”와 “편하게 읽게 하다” 사이의 극적인 전환이 만들어집니다.
커스텀 서체는 경쟁적 해자다 - Eina01의 기하학적 부드러움은 시스템 폰트로 복제할 수 없어, Inter을 사용하는 모든 경쟁사가 비교적 평범하게 보이게 만듭니다.
템플릿 우선 온보딩이 빈 캔버스 문제를 해결한다 - 템플릿 갤러리가 정문 역할을 하여, 사용자가 무엇이든 만들기 전에 “좋은 것”이 어떤 모습인지를 가르칩니다.

Pitch가 중요한 이유

Pitch는 생산성 소프트웨어도 그것이 만들어내는 결과물과 같은 수준의 시각적 장인정신을 가질 수 있음을 증명했습니다. 자신의 결과물과 전혀 닮지 않은 도구들이 지배하는 카테고리에서, Pitch는 자신이 설교하는 바를 실천합니다: 마케팅 사이트 자체가 프레젠테이션이며, 제품의 템플릿 갤러리는 모든 사용자의 결과물을 높이는 품질 기준을 세웁니다.

주요 성과: - Wunderlist 팀(Microsoft에 인수)이 제작하여, 소비자 수준의 디자인 감각을 B2B 소프트웨어에 적용 - 보이는 커서를 단순한 기능이 아닌 디자인 요소로 활용한 실시간 멀티플레이어 협업을 개척 - 복잡성을 추가하는 대신 사용자를 더 높은 품질의 결과물로 이끄는 브랜드 맞춤 텍스트 및 비주얼 AI 기능 도입

핵심 디자인 원칙

1. 보라색 무대

히어로 그라디언트는 색상이 입혀진 섹션이 아닙니다 — 그것은 프레젠테이션 무대입니다. 생생한 보라색 그라디언트가 전체 뷰포트를 채우고, 빛을 받아 Pitch의 재질, 깊이, 구성에 대한 이해를 보여주는 반투명 3D 유리 오브젝트가 배치되어 있습니다. 제품은 프레젠테이션 그 자체로서 스스로를 판매합니다.

히어로 아래에서 섹션은 따뜻한 차콜 텍스트(rgb(43,42,53))가 있는 깨끗한 흰색 배경으로 전환됩니다 — 이 색상은 미묘한 보라색 언더톤을 가지고 있어, 브랜드 아이덴티티에 대해 날카로운 대비를 만들기보다 조화를 이룹니다.

┌─────────────────────────────────────────┐
│  ░░░░ 생생한 보라색 그라디언트 ░░░░░░  │
│  ░░░░ 3D 유리 형상 부유 ░░░░░░░░░░░░  │
│  ░░░░░ 흰색 볼드 헤드라인 ░░░░░░░░░░  │
│  ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░  │
├─────────────────────────────────────────┤
│                                         │
│  깨끗한 흰색 섹션                       │
│  따뜻한 차콜 텍스트 (43,42,53)          │
│  넉넉한 2.0 줄 높이 본문               │
│                                         │
└─────────────────────────────────────────┘

2. Eina01로 구현한 기념비적 타이포그래피

Pitch는 Eina01를 의뢰 제작했습니다. 이는 부드럽고 둥근 끝처리를 가진 기하학적 산세리프체로, 모든 헤딩에 독특한 온기를 부여합니다. 800 웨이트(극굵은)에서 헤드라인은 자신의 자료를 완벽히 숙지한 기조연설자의 단호함을 담고 있습니다.

타입 스케일은 두 가지 뚜렷한 모드로 작동합니다. 헤드라인은 밀도 높고 임팩트가 있습니다: 1.0 줄 높이에 -1.6px 자간의 80px 디스플레이 텍스트로, 어센더와 디센더가 줄 사이에서 거의 닿아 단순한 텍스트가 아닌 그래픽 요소를 만들어냅니다. 본문은 그 반대입니다 — 2.0 줄 높이의 18px로, 잘 조판된 잡지를 읽는 것 같은 여유롭고 에디토리얼한 느낌의 예외적으로 넉넉한 간격입니다.

음수 자간은 크기에 비례하여 조절됩니다: 80px(-1.6px)과 42px(-0.84px) 모두에서 -2%로, 모든 헤드라인 크기에서 시각적 밀도를 유지합니다.

3. 절제된 Inter티브 디자인

모든 인터랙티브 요소는 날카로운 기업적 모서리와 경쾌한 소비자 둥글림 사이의 공간을 차지합니다. 6px 버튼 라디우스는 “전문 크리에이티브 도구”를 시그널합니다 — 알아차릴 수 있을 만큼 의도적이면서도, 진지하게 받아들여질 만큼 절제되어 있습니다. 24px 수평 패딩의 버튼은 넓게 퍼지지 않으면서도 편안한 클릭 타겟을 제공합니다.

60px의 내비게이션 바는 의도적으로 컴팩트합니다. 프레젠테이션 도구에서는 콘텐츠가 항상 크롬보다 크게 느껴져야 합니다. 공지 바는 레이아웃을 밀집시키지 않으면서 내비게이션 위에 72px의 프로모션 공간을 추가합니다.

적용 가능한 패턴

Pitch의 디자인 시스템은 다른 프로젝트에 직접 적용할 수 있는 여러 패턴을 제공합니다. 따뜻한 차콜 텍스트 색상이 가장 즉시 활용 가능합니다: rgb(43,42,53)는 순수한 검정의 거칠음을 피하면서 가독성을 유지하고, 미묘한 보라색 언더톤은 보라색 계열 브랜드 팔레트와의 응집력을 만들어냅니다.

이중 속도 타이포그래피 시스템은 임팩트와 가독성의 균형이 필요한 모든 맥락에서 작동합니다:

:root {
  /* Pitch-inspired confident purple palette */
  --color-background: rgb(255, 255, 255);
  --color-text-primary: rgb(43, 42, 53);
  --color-brand-purple: #7B2FF2;
  --color-white: rgb(255, 255, 255);

  /* Typography */
  --font-display: "Eina01", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Spacing */
  --nav-height: 3.75rem;
  --button-radius: 6px;
  --button-padding: 0 24px;
}

/* Display headline — dense, heavy, tight */
.display {
  font-family: var(--font-display);
  font-size: 80px;
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -1.6px;
  color: var(--color-text-primary);
}

/* Section headline */
.section-heading {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -0.84px;
  color: var(--color-text-primary);
}

/* Body — generous breathing room */
.body {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  line-height: 2.0;
  color: var(--color-text-primary);
}

/* Hero gradient stage */
.hero {
  background: linear-gradient(135deg, #7B2FF2 0%, #4A0E8F 100%);
  color: var(--color-white);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* CTA button — 6px radius, professional creative */
.button-primary {
  border-radius: 6px;
  padding: 0 24px;
  font-weight: 600;
  color: rgb(255, 255, 255);
  background: var(--color-brand-purple);
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

iOS 애플리케이션의 경우, 동일한 원칙이 시스템 웨이트 매핑과 SwiftUI의 leading 수정자를 통해 적용됩니다:

extension Color {
    static let pitchBackground = Color.white
    static let pitchText = Color(red: 43/255, green: 42/255, blue: 53/255)
    static let pitchPurple = Color(red: 123/255, green: 47/255, blue: 242/255)
}

extension Font {
    static let pitchDisplay = Font.system(size: 80, weight: .heavy)
        .leading(.tight)
    static let pitchHeading = Font.system(size: 42, weight: .heavy)
    static let pitchBody = Font.system(size: 18, weight: .regular)
        .leading(.loose)
}

struct PitchButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .padding(.horizontal, 24)
            .padding(.vertical, 12)
            .background(Color.pitchPurple)
            .foregroundColor(.white)
            .clipShape(RoundedRectangle(cornerRadius: 6))
            .opacity(configuration.isPressed ? 0.85 : 1.0)
    }
}

디자인 교훈

파란색 바다에서 보라색을 선택하면 보상을 받는다. Slack, Notion, Linear, Figma가 모두 파란색에 기반하는 환경에서, Pitch의 보라색은 즉시 차별화됩니다. 보라색은 창의성과 프리미엄 포지셔닝을 시그널합니다 — 프레젠테이션 도구에 정확히 필요한 연상입니다.

웨이트 800은 브랜드 보이스 결정이다. 대부분의 SaaS 사이트는 헤드라인에 600-700을 사용합니다. Pitch의 극굵은 선택은 가독성에 관한 것이 아닙니다 — 개성에 관한 것입니다. 이 브랜드는 시도해 보라고 제안하지 않습니다; 이것이 바로 그 도구라고 말합니다. 무거운 웨이트는 제품의 포지셔닝이 그 수준의 단언을 뒷받침할 때만 사용하세요.

디스플레이 텍스트의 줄 높이 1.0은 그래픽 요소를 만든다. 어센더와 디센더가 거의 닿으면, 헤드라인은 텍스트로 읽히는 것을 멈추고 시각적 건축물로 기능하기 시작합니다. 이것은 개별 글자 형태가 명확하게 구분되는 큰 크기(60px+)에서만 효과가 있습니다.

컬러 브랜드에서 순수한 검정 텍스트를 피하라. Pitch의 따뜻한 차콜(rgb(43,42,53))은 언더톤이 보라색 팔레트와 일치하기 때문에 페이지 응집력을 유지합니다. 순수한 검정은 시각 체계를 약화시키는 단절을 만듭니다.

확신 주도 브랜드에서 얇은 폰트 웨이트를 피하라. Pitch가 사용하는 가장 가벼운 헤딩 웨이트는 800입니다. 400의 본문 텍스트가 유일한 예외입니다. 300이나 400 웨이트 헤드라인을 섞으면 브랜드가 구축하려는 단호한 포지셔닝이 약화됩니다.

자주 묻는 질문

Pitch의 디자인이 다른 프레젠테이션 도구와 구별되는 점은 무엇인가요?

Pitch는 마케팅 사이트를 자체 제품 철학의 시연으로 활용합니다. 3D 유리 형상이 있는 풀블리드 보라색 그라디언트 히어로, 800 웨이트 Eina01 헤드라인, 이중 속도 타이포그래피(밀집 헤드라인, 통풍 좋은 본문)가 Google Slides의 실용적인 느낌이나 PowerPoint의 기업적 무게감과는 확연히 다른 미학을 만들어냅니다.

Pitch는 일반적인 SaaS 제품과 어떻게 다르게 색상을 사용하나요?

대부분의 SaaS 브랜드는 주요 색상을 악센트로 사용합니다 — 흰색 배경에 색상이 입혀진 버튼. Pitch는 이를 뒤집어 히어로 섹션의 전체 환경으로 생생한 보라색을 사용하여, 장식적 터치가 아닌 몰입형 무대를 만들어냅니다. 보라색은 당당하게 채도가 높으며, 회색이나 흰색으로 희석되지 않습니다.

Pitch는 왜 이렇게 무거운 폰트 웨이트를 사용하나요?

800 웨이트(극굵은) 헤드라인은 의도적인 브랜드 보이스 결정입니다. 이 웨이트에서 타이포그래피는 단순히 콘텐츠를 라벨링하는 것이 아니라 확신과 전문성을 전달합니다. 이는 프레젠테이션이 어떠해야 하는지에 대한 강한 견해를 가진 도구로서의 Pitch의 포지셔닝과 일치하며, 그 견해에 확신을 가진 디자이너들이 만들었습니다.

디자이너들이 Pitch의 멀티플레이어 협업 접근 방식에서 배울 수 있는 것은 무엇인가요?

Pitch는 실시간 협업 커서와 공동 편집을 단순한 기능 체크리스트가 아닌 시각적 아이덴티티의 일부로 다룹니다. 다른 사람들의 커서를 보는 것은 도구를 살아있는 것처럼 느끼게 하고 팀 결과물 철학을 강화합니다. 교훈은 협업 기능이 제품이 무엇을 하는지뿐만 아니라 어떻게 느껴지는지를 형성하는 디자인 요소라는 것입니다.

참고 자료

Pitch 홈페이지 — 제품 및 마케팅 사이트
Pitch 소개 페이지 — 회사 이야기와 팀
Pitch 템플릿 갤러리 — 템플릿 우선 온보딩의 실제 사례
Pitch 블로그 — 제품 업데이트 및 디자인 사고
TechCrunch Series B 보도 — 6억 달러 기업가치로 8,500만 달러 조달
Christian Reber Inter뷰 (Sifted) — 창립자의 디자인 철학
Pitch on Product Hunt — 런칭 및 커뮤니티 반응