이모지 피커: 검색하고 복사하기
Unicode 15.1의 3,700개 이상 이모지 피커. 이름으로 검색, 9개 카테고리 탐색, 피부색 선택, 클릭으로 복사.
이모지 피커란 무엇입니까?
이 피커를 만든 이유는 시스템 이모지 패널을 열어 같은 다섯 개의 얼굴을 잡으려고 2분 동안 스크롤하는 일이 지겨워졌기 때문입니다. 입력하고, 클릭하고, 붙여넣기 — 흐름은 이것이 전부입니다. 데이터셋은 Unicode 15.1(3,700개 이상의 이모지)이며, 9개 카테고리로 정리되어 있고, 이름과 키워드를 모두 매칭하는 검색창, 사람 이모지를 위한 6가지 Fitzpatrick 피부색, 그리고 세션 동안 복사한 것을 기억해 주는 최근 사용 행이 있습니다.
주요 기능
데이터셋은 Unicode 15.1입니다 — 2023년까지 추가된 모든 얼굴, 손, 음식, 깃발, 기호를 표준에서 직접 가져왔습니다. 카테고리는 Unicode 컨소시엄이 정의한 아홉 개입니다: 스마일리와 감정, 사람과 신체, 동물과 자연, 음식과 음료, 여행과 장소, 활동, 사물, 기호, 깃발. 카테고리 버튼 옆에 최근 사용 행이 자리하며 세션 동안 복사한 것을 기록합니다 — localStorage의 RECENT_EMOJIS_KEY에 저장되며 MAX_RECENT_EMOJIS 항목으로 상한이 설정되어 있습니다.
검색은 이모지 이름과 키워드 목록을 모두 조회하기 때문에 heart를 입력하면 ❤️와 함께 💛, 💚, 💙, 💘도 반환됩니다. 피부색은 Fitzpatrick 척도를 사용하며(기본값 + 다섯 개 수정자), 하나를 선택하면 수정자를 지원하는 모든 사람 이모지에 적용되고, hasSkinTone === false인 이모지(사물, 깃발, 음식)는 선택을 무시합니다. 이모지를 클릭하면 클립보드에 기록되고, 타일 위에 1.5초 동안 녹색 체크 오버레이가 깜박이며, 토스트가 표시됩니다 — 클립보드 쓰기는 놓치기 쉽기 때문에 세 겹의 피드백이 들어갑니다.
그리드는 반응형입니다: 휴대폰 화면에서는 8열, 태블릿에서는 10열, 데스크톱에서는 12열. 높이는 400px로 고정되며, 큰 카테고리는 세로 스크롤로 처리합니다.
사용 방법
곧 출시 예정: 이모지 피커를 여십시오 — 스마일리와 감정에서 시작합니다. 다른 카테고리 버튼을 클릭하면 전환됩니다. 색을 적용하려면 이모지를 클릭하기 전에 카테고리 위쪽의 손 흔드는 버튼 6개 중 하나를 선택하십시오. 선택한 색은 복사 시점에 적용되므로 중간 색을 선택한 상태에서 👋를 클릭하면 클립보드에는 👋🏽이 들어갑니다. 이름을 알 수 있는 것은 스크롤보다 검색이 빠릅니다: coffee를 입력하면 ☕, 🧋가 즉시 나타납니다. 필드를 지우면 카테고리 탐색으로 돌아갑니다.
최근 사용 행(시계 아이콘, 카테고리 막대의 가장 왼쪽)은 세션 기록을 복사 순서로 유지합니다. 최근 사용은 베이스 이모지를 피부색 수정자 없이 저장하며, 현재 선택된 색이 복사 시점에 다시 적용되므로 색을 바꿔도 기록이 흐트러지지 않습니다.
실용 예시
런칭에 관한 Slack 게시물 작성:
검색: fire → 🔥 클릭
검색: rocket → 🚀 클릭두 복사본 모두 다음 메시지를 위해 최근 사용에 들어갑니다.
어느 행에 있는지 기억하지 못해도 국기 고르기:
깃발 카테고리 → 검색: brazil → 🇧🇷 클릭한 메시지에서 피부색 일관되게 유지하기:
색: 진한 색(5번째 버튼) → 👍, 🙏, 🤝 클릭
클립보드에는 👍🏿 → 🙏🏿 → 🤝🏿팁과 모범 사례
색과 카테고리 선택은 컴포넌트 상태에 저장되며 프리셋에서 복원됩니다(프리미엄 기능) — 저장된 프리셋은 selectedSkinTone과 selectedCategory를 모두 캡처합니다.
검색은 순위가 매겨지지 않습니다. 결과는 데이터셋의 자연 순서대로 나오므로 heart나 face 같은 넓은 용어는 많은 결과를, anguished 같은 좁은 용어는 한두 개를 반환합니다. 검색이 비어 있으면 동의어를 시도해 보십시오: cry 대신 sob, big smile 대신 grin, brown으로 원하는 결과가 나오지 않으면 poop. 데이터셋의 이름은 정식 Unicode 이름이며 일상적인 표현과 항상 일치하지는 않습니다.
피부색 수정자는 hasSkinTone === true인 이모지에만 적용됩니다. 깃발, 음식, 사물, 기호는 어떤 색을 선택해도 노란색으로 유지됩니다.
일반적인 문제와 해결 방법
여러 번 복사했는데 최근 사용이 비어 있습니다. 목록은 localStorage에서 읽습니다. 비공개/시크릿 창과 localStorage가 비활성화된 브라우저에서는 유지되지 않습니다 — 세션 내 복사본은 메모리에 표시되지만 새로고침 시 재설정됩니다.
붙여넣은 이모지가 사각형이나 물음표로 표시됩니다. 받는 앱이나 플랫폼이 해당 Unicode 15.1 코드포인트를 지원하지 않습니다. 2022~2023년에 추가된 이모지는 구버전 Android, 구형 운영체제 또는 이모지 글꼴을 업데이트하지 않은 앱에서 렌더링되지 않을 수 있습니다. 2015~2019년의 오래된 이모지는 어디서나 작동합니다.
토스트는 "복사됨"이라고 표시되지만 클립보드의 색이 잘못되었습니다. 피부색 수정자가 선택되어 있습니다. 가장 왼쪽(기본) 색 버튼을 클릭하여 수정자를 제거한 후 다시 복사하십시오.
개인정보 보호 및 보안
검색, 카테고리 필터링, 피부색 적용, 클립보드 쓰기는 모두 로컬에서 실행됩니다. 전체 이모지 데이터셋은 페이지의 JavaScript와 함께 번들로 제공됩니다. 쿼리, 복사된 문자, 사용 데이터는 어디에도 전송되지 않습니다. 최근 사용 이모지는 localStorage에 있으며 기기에서 떠나지 않습니다. 최초 로딩 후 피커는 오프라인에서 작동합니다.
자주 묻는 질문
피부색 선택은 어떻게 작동합니까?
Unicode에서 피부색은 Fitzpatrick 척도 수정자 코드포인트(U+1F3FB ~ U+1F3FF)를 사용하며, 베이스 이모지 코드포인트 뒤에 추가됩니다. 피커는 applySkintone(emoji.emoji, selectedSkinTone)을 호출하여 이모지의 hasSkinTone 플래그가 true일 때 수정자를 연결합니다. 피부색을 지원하지 않는 이모지는 수정 없이 복사됩니다.
최근 사용에 몇 개까지 저장할 수 있습니까?
최근 사용 목록은 MAX_RECENT_EMOJIS 항목으로 상한이 설정되어 있습니다. 새 복사본은 맨 앞으로 이동하고, 상한에서 가장 오래된 항목이 떨어집니다. 같은 이모지를 다시 복사하면 중복되는 대신 맨 앞으로 이동합니다.
영어가 아닌 다른 언어로 검색할 수 있습니까?
아니요. 검색은 데이터셋의 이름과 키워드를 조회하는데, 이는 Unicode 표준의 정식 영어 이름입니다. 영어 키워드를 사용하십시오.
이모지를 클릭하면 녹색 오버레이가 나타나는 이유는 무엇입니까?
복사가 성공했다는 시각적 확인입니다. 오버레이는 1.5초(setTimeout(() => setCopiedEmoji(null), 1500)) 동안 유지된 후 사라집니다. 옆의 토스트는 복사된 정확한 문자를 확인합니다.
지금 이모지 피커를 사용해 보십시오: 곧 출시 예정: 이모지 피커
관련 도구
- 곧 출시 예정: ASCII 테이블 — ASCII 범위의 비이모지 문자 코드를 조회합니다.
- 곧 출시 예정: 랜덤 피커 — 자신의 목록에서 무작위 선택.