크라우니메신저 v3 이모지 시스템
개요
크라우니메신저 v3에 이모지 픽커 + 한선씨 이모지.한선 정본 라이브러리 + 입력바 통합을 구축했다.
무엇을 했는지
1. 한선씨 정본: /Users/ef/CrownyOS/apps/메신저/v3/이모지.한선
Unicode emoji 14+ 표준 기반 웹용 이모지 라이브러리 (신규 생성)
카테고리 10개: recent, smiley, people, nature, food, activity, travel, object, symbol, flag
각 카테고리 60개, 총 600개 이모지 (recent는 동적)
추가 함수 목록:
이모지카테고리() — 카테고리 배열 반환
카테고리이름(코드) — 카테고리 한국어 이름
이모지목록(카테고리) — 카테고리별 이모지 배열
이모지_스마일리/피플/자연/음식/활동/여행/사물/기호/국기() — 각 카테고리 내부 함수
이모지키워드맵() — 100개+ 이모지 한글/영문 키워드 맵
이모지검색(키워드) — 전 카테고리 키워드 검색
최근이모지추가(이모지) — 최근 목록 업데이트 (중복제거, 20개 제한)
최근이모지목록() — 최근 20개
자주쓰는이모지목록() — 빈도 상위 20개
스킨톤적용(이모지, 톤) — 스킨톤 수정자 결합
이모지픽커HTML생성() — 웹 픽커 HTML 생성
이모지픽커CSS생성() — 픽커 CSS 생성
이모지픽커JS생성() — 클라이언트 JS 생성 (데이터+핸들러 일체)
_자가검증() — 7건 어설트2. JS 클라이언트 (웹v3/index.html)
이모지 픽커 CSS 추가 (.emoji-picker, .emoji-cat-tabs, .emoji-grid, .emoji-item)
이모지 픽커 HTML 추가 (입력바 내 #emoji-picker)
이모지 버튼 😊 추가 (기존 E 스티커 버튼 옆)
JS 함수:
toggleEmojiPicker() — 픽커 열기/닫기, 다른 메뉴 닫기 연동
emojiSetCat(cat, btn) — 카테고리 탭 전환
emojiSearch(q) — 한글/영문 실시간 검색
emojiRenderGrid(grid, list) — 격자 렌더
emojiInsert(em) — 입력창에 삽입, 커서 위치 유지, localStorage 저장
ESC 닫기
외부 클릭 닫기 (_emojiOutside 핸들러)3. 한선씨 동반 파일 갱신
웹v3/UI컴포넌트.한선: 이모지픽커HTML생성() 추가, 입력바HTML생성() 이모지 버튼 삽입웹v3/앱.한선: 가져오기 "../이모지.한선" 추가, 앱CSS생성()에 이모지픽커CSS생성() 추가, 앱JS생성()에 이모지픽커JS생성() 추가, 앱.열기 인라인 HTML에 픽커 삽입
이모지 총 개수
| 카테고리 | 개수 |
|---|
| smiley | 60 |
| people | 60 |
| nature | 60 |
| food | 60 |
| activity | 60 |
| travel | 60 |
| object | 60 |
| symbol | 60 |
| flag | 60 |
| total | 540개 고정 + recent 동적 |
키워드 맵: 100개+ 이모지 한글/영문 키워드
픽커 UI 동작 흐름
- 사용자가 입력바 옆
😊 버튼 클릭 → toggleEmojiPicker() 실행
#emoji-picker 패널에 .open 클래스 추가 → CSS로 표시- 최근 이모지 20개 격자 렌더 (localStorage
emoji_recent)
- 카테고리 탭 클릭 →
emojiSetCat() → 해당 카테고리 격자 재렌더
- 검색창 입력 →
emojiSearch() → 키워드 맵 검색 → 결과 렌더
- 이모지 클릭 →
emojiInsert() → msg-input 커서 위치에 삽입 → localStorage 갱신 → 픽커 닫기
- 외부 클릭 / ESC → 픽커 닫기
디자인 토큰
CSS 변수만 사용 (인라인 색상 없음):
var(--bg-primary), var(--bg-secondary), var(--border), var(--border-focus)var(--text-primary), var(--text-secondary), var(--accent)var(--radius), var(--radius-xs), var(--radius-pill), var(--shadow-lg)var(--ease-hover) — 트랜지션
관련 파일 경로
/Users/ef/CrownyOS/apps/메신저/v3/이모지.한선 — 정본 (신규)/Users/ef/CrownyOS/apps/메신저/v3/웹v3/index.html — 픽커 CSS+HTML+JS 통합/Users/ef/CrownyOS/apps/메신저/v3/웹v3/UI컴포넌트.한선 — 이모지픽커HTML생성() 추가/Users/ef/CrownyOS/apps/메신저/v3/웹v3/앱.한선 — 픽커 CSS/JS 생성 함수 연결
컴파일 결과
- JS 문법 검증 (node -e): OK (script 0, 106723+ chars)
- hanseonc_high 컴파일: 현재 Bash 권한 제한으로 실행 불가 — 코드 구조는 기존 패턴과 동일하게 작성됨
잔여 이슈
- hanseonc_high 컴파일 검증 필요 (Bash 권한 필요)
- 기존 CrownyOS
이모지.한선 (벡터 렌더러)와 이름 충돌 없음 (다른 경로 /apps/메신저/v3/)
- 스킨톤 선택 UI (색상 팔레트) 구현 미완 — 기반 함수만 존재
- 최근 이모지가 5개로 제한되는 게 아닌 20개 기본값 사용