도구 상자임베드 빌더

디스코드 임베드 빌더

디스코드 봇의 임베드 메시지를 시각적으로 디자인하고 코드를 생성합니다.

임베드 에디터

버튼 컴포넌트
버튼 컴포넌트

디스코드 실시간 렌더링 미리보기

Dishost Logo
디스호스트봇오늘 오후 5:30

새로운 임베드 타이틀

여기에 디스코드 임베드에 들어갈 메인 본문을 작성하세요. 마크다운 서식을 그대로 사용할 수 있습니다.

필드 이름 1필드 내용 1
필드 이름 2필드 내용 2

디스코드 봇 코드 생성기

선택한 언어 전용 봇 개발용 코드가 실시간 갱신됩니다.

TypeScript
import { EmbedBuilder, ActionRowBuilder, ButtonBuilder, ButtonStyle, StringSelectMenuBuilder, UserSelectMenuBuilder, RoleSelectMenuBuilder, MentionableSelectMenuBuilder, ChannelSelectMenuBuilder } from 'discord.js';

// 1. 임베드 메시지 생성
const embed = new EmbedBuilder()
    .setTitle('새로운 임베드 타이틀')
    .setDescription('여기에 디스코드 임베드에 들어갈 메인 본문을 작성하세요. 마크다운 서식을 그대로 사용할 수 있습니다.')
    .setColor(5793266);

embed.addFields([
    { name: '필드 이름 1', value: '필드 내용 1', inline: true },
    { name: '필드 이름 2', value: '필드 내용 2', inline: true }
]);

// 2. 컴포넌트 액션 로우 생성
const row = new ActionRowBuilder<any>();

const button0 = new ButtonBuilder()
    .setLabel('인증 완료')
    .setStyle(ButtonStyle.Success);
    button0.setCustomId('btn_0');
row.addComponents(button0);

const button1 = new ButtonBuilder()
    .setLabel('공식 홈페이지')
    .setStyle(ButtonStyle.Link);
    button1.setURL('https://dishost.kr');
row.addComponents(button1);

디스코드 임베드(Embed) & 컴포넌트 V2(Layout Components) 완전 가이드

디스코드 봇을 개발할 때 사용자에게 고급스러운 카드 레이아웃과 버튼, 드롭다운 등의 UI 요소를 보여주기 위해 필수적인 도구입니다. 본 빌더는 전통적인 임베드(V1)뿐만 아니라 디스코드의 최신 컴포넌트 구조인 Component V2 레이아웃까지 완벽히 대응하여 실시간으로 확인하고 봇 개발용 코드를 가져갈 수 있습니다.

핵심 기능 및 특징

임베드 V1 에디터

제목, 본문, 테두리 색상, 인라인 필드, 버튼, 드롭다운 선택 메뉴를 조합하여 화려한 레이아웃을 생성.

최신 컴포넌트 V2 레이아웃 지원

컨테이너(Type 17), 텍스트 디스플레이(Type 10), 구분선(Type 14)을 중첩하고, 버튼과 선택 메뉴를 실시간으로 시각화.

다양한 언어용 봇 코드 제공

TypeScript (discord.js), Python (discord.py raw payload) 및 원시 JSON 포맷 코드를 실시간 생성하고 바로 복사.

자주 묻는 질문 (FAQ)

Q.컴포넌트 V2(Layout Components)는 무엇인가요?

디스코드가 새롭게 설계한 레이아웃 시스템으로, 기존의 투박한 본문을 대체하여 여러 컨테이너와 텍스트, 분리선 등을 카드 형태로 묶어서 전송하는 최신 UI 스펙입니다.

Q.봇 개발에 이 코드를 어떻게 사용하나요?

생성된 코드를 복사하여 본인의 봇 파일에 붙여넣기만 하면, 봇이 사용자 이벤트에 대응하거나 채널에 메시지를 보낼 때 동일한 임베드/컴포넌트 형태로 전송합니다.