본문으로 건너뛰기

디자인 시스템

Scoutello는 따뜻하고 유능하며 제품 중심적인 인상을 줘야 합니다. 권장하는 스타일은 밝고 여유로우며 둥글고 에디토리얼한 방향입니다. 명확한 콘텐츠를 우선하고, 은은한 브랜드 색상과 부드러운 표면, 제품이 장식적인 소음 없이 빠르게 반응하는 느낌을 주는 차분한 모션을 더합니다.

마케팅 랜딩 페이지는 현재 비주얼 방향을 가장 명확하게 보여 주는 공개 레퍼런스입니다. 가능한 경우 제품 화면에서도 공유 디자인 토큰을 재사용하고, 브랜드 또는 마케팅 목적이 명확한 화면에서만 표현을 더 풍부하게 확장합니다.

로고 및 브랜드 에셋​

에이전트, 통합 기능 또는 생성된 페이지에서 재사용 가능한 브랜드 마크가 필요한 경우 공개 문서 에셋 URL의 Scoutello 로고를 사용합니다.

다양한 화면 크기에서 선명하게 표시하려면 SVG 버전을 우선 사용합니다. 도구나 대상 환경에서 SVG를 지원하지 않는 경우 PNG 버전을 사용합니다. 로고 주변에 충분한 여백을 두고, 늘리거나 색상을 변경하지 않습니다. 대비가 유지되는 흰색, 따뜻한 크림색 또는 차분한 표면 위에 배치합니다.

브랜드 색상​

기본 색상: #ff8d49

기본 오렌지는 Scoutello의 포인트 색상으로 사용합니다. 주요 CTA, 포커스 상태, 활성 내비게이션, 작은 아이콘 배경, 강조 텍스트, 은은한 글로우, 따뜻한 그라데이션에 적용합니다. 제품 코드에서는 --primary: 24 100% 64% 및 bg-primary, text-primary, border-primary/15, shadow-primary/10와 같은 Tailwind 클래스에 매핑됩니다.

보조 색상: #145466

보조 딥 틸은 화면을 안정감 있게 잡아 주는 색상으로 사용합니다. 기본 오렌지와 함께 사용하는 그라데이션, 어두운 CTA 패널, 시각적 깊이, 간헐적으로 강한 인상을 줘야 하는 브랜드 요소에 적합합니다. 기본 액션 색상으로는 기본 오렌지를 대신하지 않아야 합니다.

지원 색상:

  • 따뜻한 크림색 배경: #fff8f1, #fff4ea, #fcf6f1 및 부드러운 orange-50 / amber-50 표면.
  • 제품 중립 색상: 흰색 카드, 어두운 전경 텍스트, 약 70~75% 불투명도의 보조 텍스트, 밝은 테두리.
  • 3차 파란색: hsl(205 100% 51%)는 지원 토큰으로 사용할 수 있지만, 오렌지와 틸이 브랜드 조합으로 인식되도록 사용을 제한합니다.

비주얼 스타일​

일반적인 느낌을 피할 수 있을 만큼 따뜻하면서도 깔끔하고 고급스러운 SaaS 스타일을 권장합니다. 랜딩 페이지는 크림색 메시 배경, 흰색 카드, 큰 제품 스크린샷, 둥근 모서리, 절제된 그라데이션을 조합합니다.

사용할 요소:

  • rounded-2xl부터 rounded-[2rem]까지를 주로 사용하는 둥근 카드와 패널.
  • border-primary/10, border-primary/15, ring-black/5와 같은 부드러운 테두리 및 밝은 중립 테두리.
  • 강한 색상 블록 대신 여러 겹의 흰색 또는 크림색 표면.
  • shadow-sm, shadow-lg, shadow-2xl shadow-primary/10와 같은 은은한 그림자 또는 직접 지정한 낮은 불투명도의 그림자.
  • 특히 마케팅 및 기능 소개 콘텐츠에서 증거로 활용하는 큰 제품 스크린샷 또는 UI 목업.
  • 오렌지 강조 텍스트, 아이콘 칩, 링, 글로우, 그라데이션 CTA와 같은 작은 브랜드 요소.

피해야 할 요소:

  • 페이지 전체를 채우는 강한 오렌지색 배경.
  • 일반적인 컨트롤에 틸을 과도하게 사용하는 것.
  • 조밀하고 답답한 레이아웃.
  • 강한 그림자, 각진 직사각형, 차갑고 단색 위주의 대시보드.
  • 읽기나 작업 완료를 방해하는 장식적인 모션.

타이포그래피​

마케팅 사이트에서는 다음 글꼴을 사용합니다.

  • landing-display 클래스를 통한 디스플레이 헤드라인에는 Space Grotesk.
  • 마케팅 본문 텍스트에는 Manrope.

공유 앱 및 문서 화면에서는 시스템에 맞춘 UI 타이포그래피를 사용하며, 현재는 Inter에 더 가깝습니다. 모든 화면에서 일관되게 유지할 방향은 자신감 있는 제목, 촘촘한 헤드라인 자간, 읽기 쉬운 본문, 넉넉한 행간입니다.

헤드라인 가이드:

  • 마케팅 페이지에서는 크고 균형 잡힌 제목을 사용합니다.
  • 중요한 문구만 기본 오렌지로 강조합니다.
  • 가능한 경우 max-w-* 및 text-balance로 줄 길이를 제어합니다.

본문 가이드:

  • 차분하고 직접적인 문단을 작성합니다.
  • 설명에는 보조 전경 텍스트를 사용하며, 일반적으로 text-foreground/70 또는 text-foreground/75를 적용합니다.
  • 훑어보기 쉬운 섹션, 짧은 문단, 명확한 레이블을 우선합니다.

레이아웃 및 간격​

레이아웃은 여유롭고 안정적으로 느껴져야 합니다. 랜딩 페이지는 반응형 가로 패딩이 적용된 max-w-7xl 컨테이너와 넉넉한 세로 섹션을 사용합니다.

일반적인 패턴:

  • py-16, py-20 또는 주요 마케팅 섹션에서는 그보다 큰 섹션 패딩.
  • 일정한 간격을 유지하는 반응형 그리드 안의 카드.
  • 왼쪽에는 핵심 콘텐츠 열을, 오른쪽에는 제품 스크린샷이나 디바이스 구성을 배치하는 히어로 섹션.
  • 광범위한 제품 가치를 제시할 때는 중앙 정렬 섹션 헤더, 스토리 또는 워크플로 섹션에서는 왼쪽 정렬 헤더.
  • 모바일 우선 레이아웃으로, 작은 화면에서는 깔끔하게 쌓이고 큰 화면에서 여러 열로 확장되는 구조.

여백도 디자인의 일부로 활용합니다. 섹션이 명확하지 않다면 장식을 추가하기 전에 콘텐츠를 단순화하고 여유 공간을 늘립니다.

컴포넌트 및 표면​

Scoutello의 화면 요소는 촉감이 느껴지면서도 가벼워야 합니다.

  • 버튼: 눈에 잘 띄는 마케팅 CTA에는 둥근 필 형태를 사용하고, 그 외 제품 화면에서는 일반적인 제품 버튼을 사용합니다.
  • 카드: 흰색 또는 크림색이며, 둥글고 테두리가 있고 살짝 떠 있는 느낌을 줍니다.
  • 아이콘: 오렌지 톤 칩 안에 작고 단순한 선형 아이콘을 배치합니다.
  • 통계 및 신뢰 요소: 오렌지 톤 테두리나 그라데이션을 적용한 절제된 카드.
  • 폼: 명확한 레이블, 직접적인 도움말, 모바일 사용에 충분한 간격.
  • 스크린샷: 크고 선명하며 살짝 떠 있는 느낌으로 표시합니다. 제품의 구체적인 증거로 활용합니다.

제품 UI를 구축할 때는 일회성 커스텀 스타일링보다 기존의 공유 UI 컴포넌트와 토큰을 우선 사용합니다. 마케팅 UI를 구축할 때는 적합한 경우 랜딩 프리미티브와 랜딩 클래스를 사용합니다.

모션​

모션은 인터페이스를 복잡하게 만들지 않으면서 완성도 있게 보여 주어야 합니다. 랜딩 페이지에서는 짧은 등장 애니메이션, 디바이스가 올라오는 효과, 은은한 글로우 확산 효과, 가벼운 호버 상승 효과를 사용합니다.

권장 모션:

  • 부드러운 불투명도 변화와 함께 12~24px 아래에서 위로 등장합니다.
  • 호버 시 카드를 몇 픽셀만 살짝 들어 올립니다.
  • CTA 호버 상태에서는 요소가 약간 올라가고 그림자가 더 짙어집니다.
  • 내러티브에 따른 탐색을 돕는 경우 섹션이 시차를 두고 등장하도록 합니다.

항상 모션 감소 설정을 존중합니다. 콘텐츠를 숨기거나, 상호작용을 차단하거나, 페이지 이해에 필수적인 것처럼 느껴지게 하는 애니메이션은 피합니다.

보이스 및 콘텐츠 설계​

이 시각 시스템은 직접적이고 구체적인 카피와 가장 잘 어울립니다. 조직이 Scoutello에서 무엇을 게시하고, 관리하고, 자동화할 수 있는지 설명하는 언어를 우선 사용합니다.

사용할 표현:

  • 제품과 관련된 명사: 랜딩 페이지, 타일, 투어, 이벤트, 조직, 대시보드, 게스트, QR 코드, 번역.
  • 게스트 경험과 운영자 워크플로를 연결하는 결과 중심의 설명.
  • 독일어 및 기타 현지화된 카피에서 성별 중립적인 표현.

피할 표현:

  • 예시 없이 모호하게 설명하는 플랫폼 관련 표현.
  • 지나치게 격식적인 엔터프라이즈 전문 용어.
  • 스캔하기 쉬운 섹션이 더 적합한 상황에서 사용하는 긴 문단.

실무 규칙​

  • #ff8d49을 기본 브랜드 강조 색상으로, #145466를 보조 기반 색상으로 사용합니다.
  • 제품 화면에서는 하드코딩된 색상보다 토큰화된 클래스(primary, secondary, foreground, muted, border)를 우선 사용합니다.
  • 마케팅 페이지는 따뜻하고 여유로운 분위기와 둥근 형태를 유지하며, 스크린샷을 중심으로 구성하고 모션은 절제해 사용합니다.
  • 대시보드와 운영 화면은 더 차분하고, 필요한 경우에만 정보 밀도를 높이며, 작업 중심으로 구성합니다.
  • 제품에서 브랜딩 설정을 제공하는 경우 고객이 소유한 게스트 경험에는 조직의 브랜딩이 반영되도록 하되, Scoutello가 소유한 화면은 이 시스템에 맞게 유지합니다.

관련 개념: 라우트 및 화면, 랜딩 페이지 및 타일, 브라우저 우선 게스트 경험.