기업소개 소식 레터・영상

CHive-CX UI, 상담 솔루션에 적합한 ICON 제작하기

[2025-04-02]#14 - 씨앤에이아이 UI/UX
씨앤에이아이, CHive-CX UI Icon 제작
씨앤에이아이에서 CHive-CX를 위한 새로운 UI ICON을 제작하였습니다.

씨앤에이아이 CHive-CX에 사용한 기존 아이콘들은 상담 솔루션에 적합하지 않을 뿐 아니라 CHive-CX를 이용중인 다양한 기업들의 니즈를 만족시켜주지 못했습니다. 그래서 UX/UI팀에서는 씨앤에이아이 브랜드와 상담환경에 맞는 사용자경험(UX)을 위한 아이콘을 만들기로 결정했습니다.

장기간의 프로젝트가 되었고 총1137개의 아이콘으로 여러 상황에 대응하기 위한 solid, line, duotone 3가지의 스타일로 제작하였습니다.

CHive-CX 상담 맞춤 아이콘과 제작 과정

기존에 사용중인 아이콘은 상담 솔루션을 표현했다고 보기 어려운 이미지들이 많았습니다. 상담 서비스에서 자주 사용하는 상담 정보나 콜 현황, 옴니채널 등과 같은 단어를 표현한 아이콘은 관련한 이미지를 서치해 보아도 복잡한 아이콘으로만 존재하고 서비스 UI에 적합하지 않았습니다.

그래서 씨앤에이아이에서는 상담 솔루션에 사용 중인 기능들이 최대한 간결하고 잘 표현 될 수 있도록 아래와 같은 과정을 거쳐 상담 솔루션에 최적화된 맞춤형 아이콘을 디자인하였습니다.

  • 1
    필요한 아이콘 리스트 작성 및 관련 이미지 서치
  • 2
    규격 그리드 제작
  • 3
    1차 아이콘 디자인 및 폰트 변환
  • 4
    폰트 오류 수정
  • 5
    CHive-CX 적용 1차 테스트
  • 6
    아이콘 디자인 변경 및 2차 폰트 변환
  • 7
    폰트 오류 수정
  • 8
    2차 테스트 후 완료

CNAI에서 제작한 상담 서비스 맞춤 아이콘

ICON Font와 개발

Codehive Creative Icon 디자인 라이브러리

Icon을 폰트로 제작하게 된 계기는 수많은 아이콘의 색상과 크기 등을 제어하기 위함이며, 직접 개발하고 제작한 아이콘 폰트를 사용하면 프론트 개발의 효율과 완성도가 높아집니다.

반면에 실제로 아이콘을 적용하고자 할 때, ICON Font에 어떤 종류의 아이콘이 있는지, 아이콘을 불러오기 위한 각각의 이름이 무엇인지 파악하기 어렵다는 단점이 있는데요. 이를 해결하기 위해 씨앤에이아이에서는 아이콘 정보를 열람할 수 있는 라이브러리를 관리하고 있습니다. 아이콘 및 사용 방법 개선, 추가 업데이트가 가능하다는 것이 자체제작 아이콘의 가장 큰 장점이라고 할 수 있습니다.

옴니채널 아이콘과 하이비

Hivee 이모지

CNAI Icon ver.1은 모든 상담 채널을 의미하는 옴니채널의 아이콘을 중심으로 세분화 하였고, 앞으로 출시할 버전업된 CHive-CX 솔루션에 적용될 예정입니다.

CHive-CX 곳곳에서 활약할 하이비 미니 이모지도 함께 제작하였으니 많은 사랑 부탁드립니다.




더 나은 고객경험을 위해 끊임없이 고민하는 씨앤에이아이가 되겠습니다.

감사합니다.