컴포넌트 v2 메시지와 임베드 차이 정리

컴포넌트 v2로 메시지를 보낼 때 기존의 텍스트 메시지, 임베드, 뷰가 기대대로 동작하지 않는 경우가 있다. 이 글에서는 증상과 원인, 그리고 실제로 컴포넌트 v2 환경에서 버튼/드롭다운과 임베드 같은 표현을 구현하는 방법을 정리한다.

증상

• 기존처럼 임베드(Embed) 형태로 보이던 메시지가 적용되지 않거나 무시된다.
• 버튼이나 드롭다운 같은 인터랙티브 요소가 기존 방식으로는 동작하지 않는다.
• 기존에 사용하던 view 기반 UI가 적용되지 않는다.

원인

• 컴포넌트 v2는 기존 텍스트/임베드/뷰와 다른 메시지 페이로드 모델을 사용한다.
• 인터랙티브 요소는 action row 형태의 컴포넌트 구조로 전달해야만 동작한다.
• 임베드 같은 시각적 표현이 필요하면 별도의 container 구성을 사용해서 임베드 유사 UI를 직접 구성해야 한다.

해결 방법

1단계: 버튼/드롭다운은 action row로 교체

버튼이나 셀렉트(드롭다운)는 컴포넌트 v2에서 action row 내부 컴포넌트로 전달해야 동작한다. 개념적인 예시는 다음과 같다.

{
  "components": [
    {
      "type": "action_row",
      "components": [
        {
          "type": "button",
          "style": "primary",
          "label": "확인",
          "custom_id": "confirm_btn"
        },
        {
          "type": "select",
          "custom_id": "choice_select",
          "options": [
            { "label": "옵션1", "value": "opt1" },
            { "label": "옵션2", "value": "opt2" }
          ]
        }
      ]
    }
  ]
}

• 핵심 포인트: 기존에 직접 버튼을 붙이거나 뷰로 구성하던 방식 대신 action row 계층을 반드시 사용한다.

2단계: 임베드처럼 보이게 하려면 container 사용

컴포넌트 v2에서 임베드처럼 보이는 레이아웃은 **container**로 구성한다. 컨테이너에 제목, 설명, 필드, 푸터 등을 넣어 임베드 유사 표현을 만든다. 개념 예시는 다음과 같다.

{
  "container": {
    "title": "제목 텍스트",
    "description": "설명 텍스트",
    "fields": [
      { "name": "필드1", "value": "값1", "inline": false },
      { "name": "필드2", "value": "값2", "inline": true }
    ],
    "footer": { "text": "푸터 텍스트" },
    "color": 16711680
  },
  "components": [ /* action row 포함 가능 */ ]
}

• 주의사항: container는 임베드의 시각적 효과를 흉내 내는 개념적 구성이다. 사용 중인 라이브러리나 플랫폼에 따라 필드명과 구조가 달라질 수 있으니, 실제 API 스펙을 확인해서 맞춰야 한다.

추가 팁: 디스코드 라이브러리나 프레임워크에서 컴포넌트 v2 대응 버전으로 업데이트되어 있는지 확인한다. 디스코드 봇을 디스호스트 같은 환경에 호스팅할 때는 라이브러리 버전과 API 변경사항이 반영되어야 정상 동작을 보장한다.

마무리

컴포넌트 v2 환경에서는 버튼/드롭다운은 action row, 임베드 유사 표현은 **container**로 구성하면 기존 임베드·뷰 방식의 한계를 우회할 수 있다. 디스코드 봇을 운영하거나 호스팅할 때는 이 구조를 기준으로 메시지 페이로드를 재구성하면 문제를 해결할 수 있다.