독립 설계 아이콘 시스템

왜 이전 보고서를 참고하지 않았나

2026-07-17에 만든 아이콘 인벤토리 보고서는 다른 세션이 만든 팔레트·스타일·개별 아이콘 판단을 기반으로 이어 그린 것이었다. 이번엔 그 보고서를 전혀 열어보지 않고, 아래 세 가지만 근거로 처음부터 다시 설계했다.

1. mobile/src/lib/theme.tsx — 앱이 실제로 쓰는 색(브랜드 로즈 #EE5586, 골프 그린 #6E8B3D 등). 코드 주석에 "브랜드 포인트용 — 남용 금지, 그라데이션 버튼/섹션 라벨/골프 포인트에만 사용"이라고 명시돼 있어, 색을 아끼는 원칙도 여기서 가져왔다.
2. 내가 직접 쓴 광고전략 보고서 — "설렘·신뢰 균형", "거래 언어 대신 사람을 먼저", "유틸리티 화면은 이미 절제된 톤이 맞다", "신체·외모 중심 언어 재사용 금지" 등 이 서비스에 실제로 맞다고 검증한 원칙을 텍스트 카피뿐 아니라 아이콘 설계에도 그대로 적용했다.
3. 실제 화면 소스(mobile/src/app/**/*.tsx) 전수 재검색 — 홈 메뉴 4개 PNG(이미 별도로 반영 완료)를 제외한 이모지 사용처를 유니코드 범위로 다시 스캔해 총 98종을 확인하고, 실제 의미가 겹치는 것들을 정리해 아래 81개로 통합했다.

설계 원칙

• 모든 걸 핑크로 칠하지 않는다. 광고전략 보고서가 확인한 "유틸리티 화면은 이미 적절한 절제된 톤이었다"는 결론을 아이콘에도 그대로 적용해, 보안·설정·운영자 도구는 뉴트럴 잉크를 기본으로 쓰고 로즈는 감정이 실린 액션(찜·매칭·초청)에만 아꼈다.
• "호감"과 "평가"를 색으로 분리한다. 기존 앱은 ⭐ 하나를 운영자 즐겨찾기·후기·VIP 세 곳에 재사용하고 있었다. 로즈 하트(호감)와 골드 별·메달·왕관(평가·등급)을 완전히 다른 색 계열로 나눠, 세 가지 ⭐가 더 이상 같은 그림으로 보이지 않게 했다.
• 사실을 압축하지 않는다. 광고전략 보고서에서 "감정 언어로 다듬는다고 원래 있던 고지 내용이 없어져선 안 된다"고 직접 정정했던 원칙을 아이콘에도 적용했다 — 매칭요청·만남보장처럼 돈이 오가는 액션은 조건 아이콘이 아니라 사람(손) 아이콘을 앞세우되, 정보 자체(그린피·환불 등)는 별도 아이콘으로 명확히 남겨 뒀다.
• 48×48 캔버스, 3px 선. 코드에서 이모지가 실제로 쓰이는 자리(14~22px 텍스트, 20~24px 탭바)가 대부분 작아, 더 큰 캔버스보다 이 크기가 실제 렌더와 더 가깝다고 판단했다.

제작·검증 과정

1. 앱 전체 소스를 유니코드 Extended_Pictographic 범위로 스캔해 98종의 실제 이모지 사용을 다시 확인했다(홈 메뉴 4개 PNG 제외).
2. 같은 뜻으로 여러 곳에 흩어져 있던 이모지를 의미 단위로 통합하고, 같은 이모지가 서로 다른 뜻으로 재사용된 경우(⭐×3, 💎×2, 📋×2, ↩️×2 등)를 찾아 의미별로 아이콘을 분리했다.
3. 각 아이콘을 SVG로 제작한 뒤, 81개 전체를 9×9 격자 PNG 대조표로 렌더링해 실제 그림으로 확인했다.
4. 대조표에서 의도와 다르게 읽힌 9개(매칭요청·만남보장의 악수, 원하는 매칭의 하트, 닮은 연예인의 얼굴, 흡연 필드, 사진없음, 인사 손짓, 신규 배지, 초대 링크, 최근조회)를 찾아 재설계했다 — 무엇이 왜 안 읽혔는지는 아래 각 아이콘 설명에 그대로 남겼다.
5. 재설계 후 다시 렌더링해 전량 재검증했다.

검증 완료: 81개 SVG · 대조표 렌더링 2회 · 재설계 9건 반영

이번 조사에서 제외한 것

현재 단계