Slack 이미지 전송 문제 해결: attachments에서 Block Kit으로 마이그레이션

문제 상황:

• Slack 봇에서 이미지 전송 시도.
• attachments를 사용한 JSON 페이로드 전송.
• 이미지가 표시되지 않는 문제 발생.
• 메시지는 문제없음
• 다른 사람들은 잘 된다고 함 (???)

 

원인 분석:

 

1. JSON 형식 오류? → JSON 유효성 검사기로 확인 결과 이상 없음.
2. 이미지 URL 문제? → 유효하고 공개적으로 접근 가능한 URL 확인.
3. Slack API 권한 문제? → chat:write, files:write 등 필요한 권한 확인.

 

핵심 원인: attachments의 레거시화

 

• Slack API 문서에서 attachments는 레거시 기능이며, Block Kit 사용을 권장한다는 문구 발견.
• attachments 방식이 deprecated 된 것은 아니지만, 내부적으로 문제가 발생했을 가능성 존재.

 

해결: Block Kit으로 마이그레이션

1. Block Kit Builder 활용:
   • https://app.slack.com/block-kit-builder를사용하여 JSON 페이로드 생성.
   • 드래그 앤 드롭 방식으로 쉽게 레이아웃 구성, 실시간 미리보기 가능.
     
     
2. 코드 수정:주요 변경 사항:
   
   

   // 기존 코드 (attachments 사용)
   public void sendMessage(String msg, String imageUrl) throws NoEnvException {
       handleRequest("""
               {
                   "text": "%s",
                   "attachments": [{
                       "image_url": "%s"
                   }]
               }
               """.formatted(msg, imageUrl));
   }
   
   // 수정된 코드 (Block Kit 사용)
   public void sendMessage(String msg, String imageUrl) throws NoEnvException {
       try {
         String encodedImageUrl = URLEncoder.encode(imageUrl, StandardCharsets.UTF_8);
           handleRequest("""
               {
                   "blocks": [
                       {
                           "type": "section",
                           "text": {
                               "type": "mrkdwn",
                               "text": "%s"
                           }
                       },
                       {
                           "type": "image",
                           "image_url": "%s",
                           "alt_text": "Generated Image" // alt_text 필수!
                       }
                   ]
               }
               """.formatted(msg, encodedImageUrl));
       }
       catch (Exception e) {
        logger.error("Error encoding URL: " + e.getMessage());
        throw new NoEnvException("URL encoding failed.",e);
       }
   }

• attachments 대신 blocks 배열 사용.
• section 블록: 텍스트 메시지 포함 (마크다운 형식: mrkdwn).
• image 블록: 이미지 표시. image_url과 함께 alt_text는 필수!
• image 블록에는 title을 쓸 수 있음
• context 블록 안에는 image나 mrkdwn 타입의 element만 허용. 최대 10개.
  
  
  

결과:

• Block Kit 적용 후 이미지 정상적으로 전송됨.

 

교훈:

• 공식 문서 최신 상태 확인: API 변경 사항, 권장 사항 등 수시로 확인.
• 레거시 기능 경계: attachments처럼 더 이상 권장되지 않는 기능은 사용 지양.
• Block Kit 적극 활용: 더 유연하고 다양한 기능 제공, Slack에서 적극 지원.
• alt_text 중요: image 블록에는 alt_text 꼭 넣기
• Block Kit Builder: Block Kit JSON 쉽게 생성

attachments vs Block Kit:

	attachments (legacy)	Block Kit
유연성/확장성	낮음	높음
상호작용 요소	제한적	다양 (버튼, 메뉴 등)
레이아웃	단순	풍부
Slack 권장/지원	❌	✅
invalid_blocks 에러	발생 가능성 높음	낮음
image 사용	까다로움.	alt_text만 잘 넣으면 됨

추가 고려 사항:

• Block Kit 상호작용: 버튼 클릭 등 이벤트 처리 로직 필요 (Interactivity & Shortcuts).
• 최대 Block 갯수: 한 메시지당 최대 50개.