앱 구별색 · 앱 아이콘

여러 앱을 한 런처에서 고를 때, 아이콘만 색으로 구별합니다.

⚠️

앱 UI 자체는 전 앱이 공통 먹색(--color-primary) + 뉴트럴 톤을 씁니다. 아이콘은 “어느 앱인가”를 구별하는 자리이고, 화면 안은 “같은 회사”임을 보여주는 자리입니다. 버튼·링크·포커스는 반드시 공통 primary/accent를 유지하세요.

전체 화면으로 열기 ↗

원리 — 색 타일 + 흰색 심볼

심볼은 logo-mark-light.svg 하나만 쓰고 배경색만 바꿉니다.

<div style="width:72px;height:72px;border-radius:22.4%;
            display:flex;align-items:center;justify-content:center;
            background:#2E8E76">
  <img src="/brand/logo/logo-mark-light.svg" alt="자주측정" style="width:60%">
</div>

라운드 22.4% — iOS 스쿼클 근사값입니다
심볼은 타일 폭의 60% — 나머지는 여백
색을 심볼에 칠하지 않습니다. 배경만 색이고 심볼은 항상 흰색입니다(무결성 규칙)

JT 앱 아이콘 템플릿 ★

색과 이름만 고르면 전 플랫폼 세트가 만들어집니다. 디자인 도구를 열 필요가 없습니다.

전체 화면으로 열기 ↗

받는 것: master/(SVG·PNG 1024) · ios/(13종) · android/(적응형 전경·배경 + 6종) · web/(5종 + manifest 조각) · README.txt

⚠️

iOS 아이콘은 정사각이고 라운드가 없습니다. 모서리는 iOS가 알아서 깎습니다 — 직접 둥글게 만들어 넣으면 이중으로 깎여 이상해집니다. 알파(투명)도 없습니다 — App Store 심사에서 알파가 있으면 반려됩니다. 이 템플릿은 두 가지를 이미 지키고 있습니다.

디자인 도구로 직접 만들 때

Figma·Sketch에서 손으로 만들 일이 있으면 순서는 이렇습니다.

1024×1024 정사각 프레임 — 라운드 없이
배경: 앱 색 단색 채움
logo-mark-light.svg를 올리고 폭을 60% 로 맞춰 정중앙 배치 → 남는 20% 여백이 Android 적응형 안전영역(66%)을 만족시킵니다
색·이름만 다른 변형은 컴포넌트 + Variant로 만들면 한 번에 관리됩니다

플랫폼별 크기·마스크 규격이 필요하면 Apple 공식 템플릿을 참고하세요 — Figma · Sketch

색 고르는 규칙


도메인 안에서는 같은 계열	계열이 읽혀야 “이 앱들은 한 묶음”이 보입니다
도메인이 다르면 ΔE 20 이상	한눈에 구별되어야 합니다
흰 심볼 대비 3:1 이상	심볼 모양이 안 보이면 아이콘이 아닙니다 (WCAG 1.4.11)
앱 내부에는 쓰지 않음	강조가 필요하면 `--icon-accent` 변수로 국소 사용만

위 미리보기가 이 세 가지를 실시간으로 검사합니다.

도메인별 색군

도메인	색
전사 공통	Charcoal `#1F2328`
연구·품질·규제	Teal `#2E8E76` · Cyan `#2C8AA6` · Lime `#7C9A3E`
생산·물류	Indigo `#5B5FB8`
영업·견적·파트너	Gold `#B98A22` · Coral `#C0603A`
인사·교육	Violet `#7F4FAE` · Purple `#9846AC`
개발·도구	Orchid `#AD4592` · Rose `#B5486B`

예비색(시맨틱 역할 없음): Orange #EF7519 · Pink #BC4B7C · Berry #A83E4D

새 앱이 생기면 도메인을 먼저 정하고 그 색군에서 고르세요. 색군에 남은 색이 없으면 예비색을 쓰되, 위 미리보기에서 ΔE를 확인하고 디렉터 승인을 받습니다.

Pictogram Library