Skip to content

배지 디자이너

배지 디자이너는 badges.ninja에 내장된 시각적 캔버스 편집기로, 디자인 도구 없이 전문적인 배지 이미지를 만들 수 있습니다.

배지 디자이너 — 배지 생성 모달에 폼 사이드바와 나란히 내장

개요

배지를 만들거나 편집할 때 이미지 필드를 클릭하면 디자이너가 열립니다. 템플릿, 텍스트, 사용자 정의 배경을 조합해 배지 이미지를 만들 수 있는 캔버스 작업 공간을 제공합니다.

모양 + 색상 필터가 있는 템플릿 선택기

템플릿 선택

디자이너에는 빠르게 찾을 수 있도록 두 축으로 정리된 80개 이상의 내장 템플릿이 포함되어 있습니다.

  • 8가지 모양 — 원형, 둥근 사각형, 육각형, 방패, 팔각형, 다이아몬드, 배너, 인장
  • 8가지 색상 팔레트 — 골드, 실버, 브론즈, 블루, 그린, 크림슨, 퍼플, 그라파이트

선택 방법:

  1. 디자이너 툴바에서 템플릿 을 클릭합니다.
  2. 선택기 상단의 모양색상 필터로 목록을 좁힙니다. 오른쪽 카운터(예: 8 / 84)는 일치하는 템플릿 수를 보여줍니다.
  3. 템플릿을 클릭해 캔버스에 적용합니다.

생성되는 템플릿은 의도적으로 깔끔합니다 — 모양과 팔레트를 고른 뒤 디자이너에서 직접 텍스트, 아이콘, 리본을 추가하세요.

템플릿이 캔버스에 적용된 상태

도형, 리본, 아이콘 추가

도형 팝오버

색상 바가 있는 아이콘 팝오버

디자이너에는 템플릿 외에도 어떤 템플릿 위에도 겹쳐 쓸 수 있는 세 가지 추가 에셋 라이브러리가 포함되어 있습니다.

  • 도형 — 80개 이상의 벡터 도형(원, 방패, 육각형, 별, 메달, 인장, 월계관, 배너, 기하 도형)을 카테고리별로 그룹화
  • 리본 — 20개의 장식용 리본 오버레이
  • 아이콘 — 50개의 픽토그램 아이콘(원자, 어워드, 뇌, 서류가방, 증서, 코드, 왕관, 다이아몬드, 졸업장, 학사모, 전구, 메달, 로켓, 체크 방패, 별, 과녁, 트로피…)

아무 팝오버에서 하나 선택하면 현재 색상으로 캔버스에 삽입됩니다. 각 팝오버 안의 색상 바 를 사용하면 삽입 에 에셋을 다시 칠할 수 있습니다 — 툴바 기본값과 다른 색을 쓰고 싶을 때 유용합니다.

커스텀 배경이나 이미지 업로드

직접 만든 이미지를 배경이나 상단 레이어로 업로드할 수 있습니다.

  1. 디자이너 툴바에서 업로드 를 클릭합니다.
  2. 컴퓨터에서 이미지 파일을 선택합니다(PNG 또는 JPG 권장).
  3. 이미지가 선택 가능한 객체로 캔버스에 놓입니다 — 끌기, 크기 조정, 회전, 다른 요소 뒤로 보내기가 가능합니다.

이미지 업로드는 템플릿이나 기존 레이어를 지우지 않습니다 — 그 위에 쌓일 뿐입니다.

전체 배경으로 사용하려면 최소 600×600 픽셀의 정사각형 이미지를 사용하세요.

텍스트 추가

캔버스에 추가된 텍스트 요소

  1. 툴바의 텍스트 버튼을 클릭합니다.
  2. 새 텍스트 요소가 캔버스에 나타납니다.
  3. 텍스트를 클릭해 선택한 뒤 내용을 입력합니다.
  4. 텍스트 요소를 드래그해 캔버스 위에서 위치를 조정합니다.

제목, 수령자, 날짜 등 배지의 여러 부분을 위해 텍스트 요소를 여러 개 추가할 수 있습니다.

폰트 변경

텍스트가 Arial에서 Georgia로 변경 — 선택된 텍스트에 세리프 글꼴 적용

디자이너에는 11개의 폰트가 포함되어 있습니다(Arial, Georgia, Times New Roman, Pacifico, Roboto, Open Sans, Montserrat, Lato, Raleway, Oswald, Playfair Display).

  1. 캔버스의 텍스트 요소를 선택합니다.
  2. 툴바의 폰트 드롭다운을 클릭합니다.
  3. 사용 가능한 폰트에서 선택합니다.

폰트 미리보기를 통해 선택 전에 각 옵션의 모양을 확인할 수 있습니다.

색상 변경

색상 선택기가 열린 상태. 임의의 hex를 선택 — 골드는 짙은 파랑 템플릿에서 강한 대비를 줍니다

툴바의 색상 선택기는 두 가지를 동시에 제어합니다.

  • 선택된 텍스트 — 선택된 텍스트 요소의 채움 색을 지정합니다.
  • 기본 삽입 색 — 이어서 삽입하는 도형, 리본, 아이콘 및 선택된 SVG 객체(획과 채움을 그 자리에서 다시 칠함)에 사용됩니다.

팔레트에서 색을 고르거나 hex 코드를 입력하세요. 각 도형/리본/아이콘 팝오버 안에는 툴바 기본값을 바꾸지 않고 한 번만 색을 고를 수 있는 작은 색상 바 도 있습니다.

요소 정렬

툴바의 정렬 버튼을 통해 수평·수직으로 가운데 정렬된 텍스트

정렬 버튼 6개의 가로줄은 캔버스를 기준으로 선택된 객체 에 작용합니다.

버튼동작
왼쪽 정렬캔버스 왼쪽 끝에 고정
수평 가운데 정렬캔버스 X축의 가운데에 배치
오른쪽 정렬캔버스 오른쪽 끝에 고정
위 정렬캔버스 위쪽 끝에 고정
수직 가운데 정렬캔버스 Y축의 가운데에 배치
아래 정렬캔버스 아래쪽 끝에 고정

요소를 캔버스 중앙 근처로 끌면 보라색 점선의 스냅 가이드 가 나타나고 객체가 완벽하게 정렬됩니다.

다중 선택 및 레이어

  • Shift 를 누른 채 클릭해 여러 객체를 선택하거나, 캔버스 위로 선택 상자를 드래그합니다.
  • 맨 뒤로 / 맨 앞으로 로 Z 순서를 제어합니다.
  • Delete 키를 누르거나 툴바의 삭제 버튼을 눌러 선택 항목을 제거합니다.
  • 실행 취소 / 다시 실행(또는 Ctrl+Z / Ctrl+Shift+Z)으로 최근 20개의 변경을 되짚습니다.

요소 삭제

  1. 제거할 요소를 선택합니다(여러 개는 Shift 클릭).
  2. 툴바의 삭제 버튼을 클릭하거나 Delete 키를 누릅니다.

좋은 배지 디자인을 위한 팁

  • 간결하게 유지 — 명확한 텍스트를 사용하고 복잡하지 않게. 배지는 작은 크기로 표시되는 경우가 많습니다.
  • 높은 대비 — 배경 위에서 텍스트가 잘 읽히도록.
  • 배지 이름 포함 — 수령자와 시청자가 한눈에 자격을 이해할 수 있어야 합니다.
  • 정사각형 포맷 — 배지는 정사각형 이미지로 가장 잘 표시됩니다.
  • 브랜드 일관성 — 모든 배지에 조직의 색상과 폰트를 사용하세요.
  • 작은 크기에서 테스트 — 100x100 픽셀에서 미리보기로 가독성을 확인하세요.

배지 이미지 저장

최종 구성된 배지

디자인이 마음에 들면 디자이너에서 완료 또는 저장 을 클릭합니다. 캔버스에서 이미지를 캡처해 배지에 첨부되며, 배지를 만들거나 저장할 때 IPFS에 업로드됩니다.

badges.ninja Documentation