테마 및 브랜딩

스코어카드의 시각 디자인은 독립된 두 개의 레이어로 구성됩니다.

테마는 성격(타이포그래피, 모서리 곡률, 그림자, 질감 및 애니메이션)을 결정합니다. 브랜드 팔레트는 색상을 결정합니다. 테마를 고른다고 색상이 제한되지 않으며, 색상을 바꾼다고 폰트가 달라지지 않습니다. 타깃 사용자에게 어울리는 테마를 먼저 고른 후 브랜드에 맞춰 색상을 조정하세요.

4가지 테마

default

군더더기 없는 시스템 산세리프, 표준적인 곡률, 일반적인 카드 그림자. 고유의 시각적 주장을 최소화한 디자인입니다.

기존 웹사이트에 임베드되어 주변 디자인과 충돌하지 않아야 하거나 브랜드 컬러 팔레트 자체를 돋보이게 하고 싶을 때 사용하세요.

playground

발랄하고 다채로운 스타일. Nunito 및 Quicksand 서체, 넉넉한 둥근 모서리, 배경에 떠다니는 블러 처리된 이모지, 통통 튀는 탄성 트랜지션이 특징입니다.

B2C 일반 대중, 가볍게 즐기는 자가진단, 소셜 공유를 유도하는 콘텐츠에 적합합니다. 새 스코어카드의 기본 테마입니다.

금융, 건강, 보안 위험, 구조조정 등 진중한 주제에는 사용하지 마세요. 경쾌한 톤이 불성실하게 느껴질 수 있습니다.

obsidian

고급스럽고 에디토리얼한 감성. DM Sans 본문 위에 Instrument Serif 제목 서체, 글래스모피즘 반투명 카드, 미세한 노이즈 그레인 질감, 절제된 모션이 적용됩니다.

임원 및 리더십 평가, 컨설팅 펌, 고단가 B2B 등 독자가 시간을 투자할 만한 가치가 있는지 판단하는 환경에 최적입니다.

영업용 브로슈어 느낌을 기피하는 순수 개발자/엔지니어 대상으로는 적합하지 않습니다.

brutalist

원초적이고 대비가 뚜렷한 디자인. Space Mono 및 JetBrains Mono 서체, 각진 직각 모서리, 오프셋이 적용된 단단한 블랙 그림자, 애시드 그린 액센트, 감속 없는 즉각적인 전환이 특징입니다.

개발자 도구, 보안 및 인프라 진단, 뚜렷한 시각적 개성을 가진 에이전시에 적합하며, 고정폭 글꼴을 전문성의 상징으로 받아들이는 사용자에게 좋습니다.

브랜드 컬러의 정확한 표현이 중요한 경우에는 피하세요. 이 테마는 자체 표면 색상과 액센트를 강력하게 고정합니다.

테마 선택 기준

응답자가 진단을 시작하기 30초 전, 그리고 마친 30초 후에 무엇을 하고 있을지 상상해 보세요. 컨설팅 펌을 검토 중인 CTO와 링크드인 링크를 클릭한 마케터는 전혀 다른 톤앤매너를 기대합니다.

확신이 서지 않을 때는 더 차분한 테마를 선택하세요. 경험을 주도하는 것은 질문이지 시각적 치장이 아닙니다.

요금제별 테마 제공 범위

사용 가능한 테마는 가입하신 요금제에 따라 제한됩니다. 플랜에 포함되지 않은 테마를 설정하려고 하면 변경이 거부되고 사용 가능한 테마 목록이 안내됩니다. scorecard_design_guide를 조회한 AI 어시스턴트는 귀하의 계정에서 사용 가능한 테마를 사전에 확인하므로 지원되지 않는 테마를 추천하지 않습니다.

브랜드 컬러 팔레트

16진수(HEX) 값으로 정의되는 10가지 색상:

키	적용 위치
primary	버튼, 진행률 바, 흐름을 이끄는 메인 액센트
primaryForeground	primary 배경 위에 표시되는 텍스트 및 아이콘
accent	절제된 강조 포인트
background / backgroundDark	페이지 전체 배경
surface / surfaceDark	카드 및 패널 배경
text / textDark	본문 텍스트
muted	보조 안내 문구

*Dark 값은 다크 모드에 적용됩니다. 밝은 팔레트를 기계적으로 반전시키지 말고 어두운 환경에 맞게 의도적으로 지정하세요. (기계적 반전은 탁한 색상을 만들기 쉽습니다.)

가독성 체크: 일반 본문 크기에서 primary 위의 primaryForeground, 그리고 background 위의 text가 선명하게 읽히는지 반드시 눈으로 확인하세요.

설정 방법

관리자 화면에서는 스코어카드 편집 메뉴에서 두 가지 모두 설정할 수 있습니다.

AI 어시스턴트를 통해서는 update_scorecard_config 도구를 사용합니다:

{
  "slug": "leadership-check",
  "theme": "obsidian",
  "branding": {
    "colors": { "primary": "#2563eb", "primaryForeground": "#ffffff" }
  }
}

설정 후에는 previewUrl을 요청하세요. 모든 초안은 발행 전 실제 렌더링을 확인할 수 있는 미리보기 링크를 반환합니다. MCP 프롬프트 choose_theme을 사용하면 대화형으로 테마를 선택할 수도 있습니다.