직접 제작한 아바타 추가하기

프로필 이미지부터 플로팅 버튼, 로딩 애니메이션까지 점원의 시각적 요소를 직접 설정할 수 있어요

젠투 콘솔에서 제공되는 기본 아바타 외에도, 직접 제작한 아바타를 추가할 수 있습니다.

직접 만든 아바타를 사용하려면, 아래 안내에 따라 세 가지 디자인 요소를 준비해주세요:

  1. 프로필 이미지 - 채팅창에 표시될 점원의 프로필

  2. 플로팅 버튼 - 웹사이트 우측 하단에 떠 있는 채팅창 진입 버튼

  3. 로딩 애니메이션 - 상품이 추천되는 동안 채팅창 하단에 보여지는 애니메이션

    1. 제공된 Bubble1~4 애니메이션 중 하나를 선택하거나, 직접 제작한 애니메이션 파일을 업로드할 수 있어요

디자인을 모두 준비하셨다면, 다음 이미지에 표시된 (+) 버튼을 눌러 아바타를 추가해주세요.

1

프로필 이미지 만들기

채팅창 내 보여지는 프로필 이미지로, 브랜드의 로고나 대표 이미지를 설정할 수 있어요

파란색 동그라미로 표시 영역
  • 제작 사이즈

    • 256 X 256 (px) 권장

  • 파일 형식

    • PNG

  • 파일 크기

    • 50KB ~ 2MB

  • 이미지 모양

    • 원형 이미지* 권장


✅ Do

  1. 브랜드 일관성 유지

    • 로고나 마스코트 등 브랜드 아이덴티티와 일치하는 이미지를 사용해 주세요

    • 플로팅 버튼, 로딩 애니메이션과 어울리는 프로필 이미지를 사용해 고객에게 일관된 경험을 제공하세요

  2. 적절한 크기의 이미지 사용

    • 이미지가 선명하게 보이도록, 256 X 256 (px) 크기의 PNG 형식의 파일 업로드를 권장해요

    • 이미지는 남는 여백 없이 화면을 꽉 채워주세요

  3. 파일 크기 최적화

    • 최대 2MB까지 업로드가 가능하지만, 너무 큰 이미지는 로딩 속도에 영향을 줄 수 있어요

    • 이미지가 깨지지 않는 범위 내에서 200KB 이하로 최적화하면 가장 안정적이에요

  4. 친근한 인상 주기

    • 단순한 로고보다 캐릭터 이미지가 고객에게 더 친근하게 다가갈 수 있어요

❌ Don’t

  1. 실제 사람처럼 보이는 이미지

    • 사람의 모습을 닮은 프로필 이미지는 실제 사람처럼 높은 이해력과 감정을 기대하게 만들어, 오히려 사용자 경험에 부정적인 영향을 줄 수 있어요

  2. 통일감 없는 이미지

    • 플로팅 버튼, 로딩 애니메이션과 일관되지 않은 이미지는 브랜드의 정체성을 모호하게 만들어 사용자에게 혼란을 줄 수 있어요

  3. 과도하게 복잡한 이미지

    • 작은 이미지 안에 너무 많은 정보를 담으면 식별이 어려워요

  4. 텍스트가 많은 이미지

    • 글자는 작은 이미지 안에서 잘 보이지 않고, 흐릿하게 보일 수 있어요

  5. 부적절하거나 논란의 여지가 있는 이미지

    • 사용자 신뢰도에 영향을 미칠 수 있으며, 브랜드에 타격이 될 수 있어요

  6. 비율이 맞지 않는 이미지

    • 비정형 비율의 이미지는 잘려서 표시되거나 왜곡될 수 있어요

2

플로팅 버튼 만들기

플로팅 버튼은 채팅창으로 이어지는 진입점이자, 브랜드 아이덴티티를 담을 수 있는 요소에요

파란색 네모로 표시 영역
  • 제작 사이즈

    • 전체 크기 : 250 X 250 (px) 권장

      • 이미지 영역 : 175 X 175 (px)

      • 중요**이미지 외의 영역(여백)은 배경색 없이 투명하게 제작

      • 여백 없이 제작된 이미지는 플로팅 문구와의 간격이 사라져 화면에서 다소 부자연스럽게 보일 수 있으니 주의해주세요.

  • 파일 형식

  • 최대 용량

    • 2MB


✅ Do

  1. 브랜드 일관성 유지

    • 로고나 마스코트 등 브랜드 아이덴티티와 일치하는 이미지를 사용해 주세요

    • 프로필 이미지, 로딩 애니메이션과 어울리는 플로팅 버튼을 사용해 고객에게 일관된 경험을 제공하세요

  2. 적절한 크기의 이미지

    • 이미지가 선명하게 보이도록, 250 X 250 (px) 크기의 GIF, PNG 또는 dotLottie 형식의 파일 업로드를 권장해요

    • 파일 내의 이미지 영역과 여백 비율을 꼭 유지해 주세요

  3. 파일 크기 최적화

    • 최대 2MB까지 업로드가 가능하지만, 너무 큰 이미지는 로딩 속도에 영향을 줄 수 있어요

    • 이미지가 깨지지 않는 범위 내에서 500KB 이하로 최적화하면 가장 안정적이에요

  4. 친근한 인상 주기

    • 단순한 로고보다 캐릭터 이미지가 고객에게 더 친근하게 다가갈 수 있어요

    • 정적인 플로팅 버튼보다는 동작이 있는 플로팅 버튼이 사용자 주목을 유도할 수 있어요

  5. 흰색 및 검정 배경의 경우, 외곽선 추가

    • 플로팅 버튼의 배경이 흰색이나 검정일 때, 외곽선이 없으면 플로팅 버튼이 주변 요소와 섞여 식별이 어려워질 수 있어요

❌ Don’t

  1. 실제 사람처럼 보이는 이미지

    • 사람의 모습을 닮은 플로팅 버튼은 실제 사람처럼 높은 이해력과 감정을 기대하게 만들어, 오히려 사용자 경험에 부정적인 영향을 줄 수 있어요

  2. 통일감 없는 이미지

    • 프로필 이미지, 로딩 애니메이션과 일관되지 않은 플로팅 버튼은 브랜드의 정체성을 모호하게 만들어 사용자에게 혼란을 줄 수 있어요

  3. 과도하게 복잡한 이미지

    • 작은 이미지 안에 너무 많은 정보를 담으면 식별이 어려워요

  4. 텍스트가 많은 이미지

    • 글자는 작은 이미지 안에서 잘 보이지 않고, 흐릿하게 보일 수 있어요

  5. 부적절하거나 논란의 여지가 있는 이미지

    • 사용자 신뢰도에 영향을 미칠 수 있으며, 브랜드에 타격이 될 수 있어요

  6. 비율이 맞지 않는 이미지

    • 비정형 비율의 이미지는 잘려서 표시되거나 왜곡될 수 있어요

3

로딩 애니메이션 만들기

로딩 애니메이션은 채팅창에서 새로운 상품이 추천되기 전 디스플레이 섹션에 노출되는 요소로, 브랜드 아이덴티티를 담을 수 있는 요소에요

파란색 네모로 표시 영역
  • 제작 사이즈

    • 로딩 애니메이션은 확장형과 축소형, 총 두 가지 사이즈의 애니메이션이 필요해요

      • 제작이 어렵다면, 제공되는 Bubble1~4 애니메이션 중 하나를 선택해 사용하실 수 있어요

    • 확장형 : 640 X 284 (px) 권장

    • 축소형 : 640 X 84 (px) 권장

  • 파일 형식

    • GIF

  • 최대 용량

    • 2MB

  • 영상 최대 길이

    • 7초 권장

  • 영상 재생

    • 반복 (loop) 권장

  • 배경 색상

    • #FFFFFF 권장


✅ Do

  1. 브랜드 일관성 유지

    • 브랜드 아이덴티티와 일치하는 애니메이션을 사용해 주세요

    • 프로필 이미지, 플로팅 버튼과 어울리는 로딩 애니메이션을 사용해 고객에게 일관된 경험을 제공하세요

  2. 적절한 크기의 이미지

    • 이미지가 선명하게 보이도록, 확장형 **640 X 284px, 축소형 640 X 84px크기의 GIF 파일 업로드를 권장해요

  3. 파일 크기 최적화

    • 너무 큰 이미지는 로딩 속도에 영향을 줄 수 있어요. 이미지가 깨지지 않는 범위 내에서 500KB 이하로 최적화하면 가장 안정적이에요

  4. 친근한 인상 주기

    • 단순한 로딩 애니메이션보다 캐릭터 애니메이션을 통해 고객에게 더 친근하게 다가갈 수 있어요

  5. 배경색 #ffffff 적용

    • 사용자의 해상도에 따라 채팅창의 가로 영역이 넓어질 수 있으니, 로딩 애니메이션이 여백과 자연스럽게 어우러지도록 배경색은 #ffffff로 적용하는 것을 권장해요

  6. 영상 길이는 최대 7초, 반복(loop) 영상

    • 파일 용량을 고려해 영상 길이는 최대 7초를 권장합니다. 사용자의 네트워크 상태에 따라 로딩 시간이 길어질 수 있으니, 영상은 자동으로 반복 재생되도록 설정해주세요

❌ Don’t

  1. 통일감 없는 이미지

    • 프로필 이미지, 플로팅 버튼과 일관되지 않은 로딩 애니메이션은 브랜드의 정체성을 모호하게 만들어 사용자에게 혼란을 줄 수 있어요

  2. 과도하게 복잡한 이미지

    • 작은 이미지 안에 너무 많은 정보를 담으면 식별이 어려워요

  3. 부적절하거나 논란의 여지가 있는 이미지

    • 사용자 신뢰도에 영향을 미칠 수 있으며, 브랜드에 타격이 될 수 있어요

  4. 비율이 맞지 않는 이미지

    • 비정형 비율의 이미지는 잘려서 표시되거나 왜곡될 수 있어요

4

아바타 추가하기

디자인을 모두 준비하셨다면, 다음 이미지에 표시된 (+) 버튼을 눌러 아바타를 추가해주세요.

모든 항목을 설정해야 ‘추가하기’ 버튼이 활성화됩니다.

5

적용하기

‘아바타 설정’을 클릭해 새로 추가한 아바타로 변경해주세요. 이후 하단의 ‘내 쇼핑몰에 적용하기’ 버튼을 클릭하면, 변경된 아바타가 쇼핑몰에 반영됩니다. 필요할 경우, X 버튼을 눌러 기존 아바타를 삭제할 수도 있습니다.

Last updated