목적
이 정책은 ToolPado의 브랜드 아이덴티티를 서비스 전체에서 일관되게 유지하기 위한 구현 기준입니다. 새로운 페이지, 계산기, 콘텐츠, 공유 이미지와 앱 아이콘을 추가할 때 이 문서와 브랜드 소개 페이지를 기준으로 검토합니다.
공식 기준과 자산
- 대표 심볼은
ToolPadoMark공통 컴포넌트와 최신 TP 브랜드 자산을 사용합니다. - 라이트 테마용 심볼과 로고는
/assets/brand/toolpado-icon-light.svg,/assets/brand/toolpado-logo-light.png를 사용합니다. - 다크 테마용 심볼과 로고는
/assets/brand/toolpado-icon-dark.svg,/assets/brand/toolpado-logo-dark.png를 사용합니다. - 파비콘, PWA, Apple Touch Icon은 등록된
/favicon.svg,/icon-192.png,/icon-512.png,/apple-touch-icon.png를 사용합니다. - SNS 프로필 기본 이미지는 안전 영역을 확보한
/brand/toolpado-mark.png를 사용합니다. - 파일명에서
light는 밝은 테마에서 쓰는 자산,dark는 어두운 테마에서 쓰는 자산을 의미합니다. 준비되지 않은 변형 파일에는 가짜 다운로드 링크나 임시 아이콘을 만들지 않습니다.
신규 페이지 구현 기준
공통 구조
새 페이지는 BaseLayout을 사용하고 기존 헤더, 푸터, Breadcrumb, SEO 구조를 재사용합니다. 페이지에는 목적을 설명하는 고유한 H1과 필요한 경우 H2 이하의 정보 구조를 제공하며, 모바일에서 핵심 콘텐츠와 내부 링크를 숨기지 않습니다.
색상과 테마
색상은 src/styles/global.css의 역할 기반 토큰으로 연결합니다. --brand, --surface, --ink, --muted, --line과 헤더·브랜드 페이지 전용 --tp-* 토큰을 사용하고 컴포넌트 안에 HEX 값을 반복 작성하지 않습니다. 시스템 기본, light, dark 테마 모두에서 텍스트와 컨트롤의 대비를 확인합니다.
로고와 아이콘
헤더와 푸터의 브랜드 표시는 HeaderBrand, ThemeLogo, ToolPadoMark 공통 컴포넌트를 사용합니다. 기존 아이콘과 다른 SVG, 이모지, 임시 이미지 또는 출처가 불명확한 로고를 새로 만들지 않습니다. 아이콘만 사용하는 컨트롤은 명확한 aria-label과 키보드 포커스를 제공하고, 16px·20px·24px·32px 크기 체계를 따릅니다.
이미지와 공유 자산
모든 이미지에는 의미에 맞는 alt, 명시적인 크기와 안정적인 비율을 지정합니다. 도구의 OG 이미지는 기본 공유 이미지 또는 실제로 검토된 전용 자산만 사용합니다. PWA와 SNS용 이미지는 동일한 최신 TP 심볼을 사용하고, 예전 아이콘을 복제하거나 페이지별로 다른 버전을 저장하지 않습니다.
공개 전 검토 절차
- 브랜드 페이지의 최신 자산 경로와 공통 토큰을 확인합니다.
- PC와 모바일에서 헤더, 메뉴, 계산 영역, 콘텐츠, 광고 영역의 레이아웃을 확인합니다.
- 시스템·
light·dark테마에서 대비, 아이콘 식별성, 포커스 표시를 확인합니다. - title, description, canonical, H1, 구조화 데이터, 내부 링크와 이미지 응답을 확인합니다.
- 타입 검사, 단위 테스트, E2E, Astro 빌드 후 공개합니다.
예외와 변경 관리
기존 자산으로 충족할 수 없는 새로운 로고 변형이나 채널 전용 이미지는 먼저 브랜드 가이드와 이 정책을 갱신하고 실제 파일을 추가한 뒤 사용합니다. 브랜드 기준과 다른 구현이 필요한 경우에는 페이지 내부에서 임의로 처리하지 않고 공통 컴포넌트와 디자인 토큰의 변경으로 반영합니다.