logo

Petefolio

ArticlesClippingAbout me
Slack Apps로 알림 전송하기

Development

Slack Apps로 알림 전송하기

8/26/2024

서비스 개발을 하다보면 각종 외부 서비스의 웹훅을 처리하여 팀 슬랙 채널에 알림을 전송해야할 필요가 있습니다. 이번 글에서는 Slack Apps를 사용하여 슬랙 채널에 알림을 보내는 방법을 알아봅니다. Slack Apps를 사용하면 Slack API를 본격적으로 학습하지 않고도 빠르게 알림 기능을 구현할 수 있습니다.

1. 슬랙 워크스페이스 생성하기

Slack
https://slack.com/get-started#/create

슬랙 채널이 없다면 새로 생성해주시고, 기존에 사용하고 있는 워크스페이스가 있다면 바로 진행해도 좋습니다. 단 워크스페이스의 앱 관리 권한을 갖고 있어야 이후 튜토리얼을 진행할 수 있습니다. 

2. Slack Apps 생성하기

Slack API: Applications | Slack
https://api.slack.com/apps

슬랙의 알림 기능은 슬랙 워크스페이스 내에서 동작하는 App을 통해 수행됩니다. 위 링크 상단의 Create New App -> From scratch -> 등록할 App의 이름과 워크스페이스를 선택함으로 앱을 생성해줍니다.

만약 원하는 워크스페이스가 없는 경우, 권한이 없는 상황일 수 있으므로 워크스페이스 관리자에게 아래 방법을 통해 권한부여를 요청하세요

앱 관리 권한 설정법

3. Incoming Webhooks 설정

좌측 메뉴의 Features -> Incoming Webhooks에서 해당 기능을 Activate 시켜줍니다.

하단의 Webhook URLs for Your Workspace 에서 해당 앱에서 알림을 전송할 수 있는 링크를 제공합니다. Add New Webhook to Workspace를 누른 뒤, 알림을 전송하고자 하는 채널을 선택해주세요.

등록 이후에는 하나의 웹훅 링크를 받게 됩니다. 이 엔드포인트로 알림 요청을 보내면 슬랙은 해당 채널에 알림 메시지를 게시해줍니다.  

4. 애플리케이션에서 요청 보내기

위에서 받은 주소로 요청을 보내봅시다. 저는 스프링부트를 사용하여 진행했습니다.

@RestController
public class SampleController {

    private final RestTemplate restTemplate = new RestTemplate();
    private static final String SLACK_WEBHOOK_URL = "URL";

    @PostMapping("/notify")
    public ResponseEntity<Void> notifySlack() {
        HttpHeaders headers = new HttpHeaders();
        headers.setContentType(MediaType.APPLICATION_JSON);

        String message = "{\"text\":\"Hello, Pete!\"}";
        HttpEntity<String> entity = new HttpEntity<>(message, headers);

        restTemplate.exchange(SLACK_WEBHOOK_URL, HttpMethod.POST, entity, String.class);

        return ResponseEntity.noContent().build();
    }
}

JSON 형식의 response body의 text 속성에 전송하고자 하는 알림 내용을 넣어 알림을 전송할 수 있습니다. 아래는 그 결과입니다. 

5. Block Kit 사용하기

text 속성으로 요청을 보내면 단순한 문자열 밖에 전송하지 못합니다. 슬랙의 Incoming Webhook API는 단순한 문자열을 전송하는 text 속성과 더불어 blocks라는 속성을 제공합니다.

blocks 속성에는 Block Kit API 의 구성요소를 전달하여 알림내용을 더욱 풍부하게 만들 수 있습니다. 예를 들어 이미지를 알림에 포함시킨다거나, 특정 링크로 이동하는 버튼을 추가한다거나, 알림의 특징을 표현할 수 있는 색상을 입힐 수 있습니다.

Slack
https://app.slack.com/block-kit-builder/

위 링크는 Block Kit Builder를 구성할 수 있는 페이지로, 여러 구성요소들을 UI 기반으로 구성하고 그에 해당하는 blocks 속성값을 JSON으로 가져올 수 있습니다.

Javascript와 같은 언어로는 위에서 가져온 JSON만으로 Resposne Body에 붙여넣기하여 바로 알림을 전송할 수 있지만, 자바와 같은 언어로는 어렵습니다. Slack은 Java를 위한 SDK를 제공하여, Block Kit을 구성하는 것을 도와줍니다.

Slack SDK는 여러 기능을 제공합니다. 지금 튜토리얼에서는 Block Kit을 만드는 기능을 가진 slack-api-model 과, API 호출을 담당하는 slack-api-client에 대한 의존성 설정을 수행합니다.

dependencies {  
  implementation('com.slack.api:slack-api-model:1.42.0')
  implementation('com.slack.api:slack-api-client:1.42.0')
}

먼저, 위에서 구성한 Block Kit에 대한 구성요소를 생성하는 함수를 만들어 줍니다. slack-api-model의 요소들을 가져와 LayoutBlock의 List를 만들어줍니다

private List<LayoutBlock> createLayout() {
  HeaderBlock headerBlock = HeaderBlock.builder()
    .text(PlainTextObject.builder().text("Notification Test").emoji(true).build())
    .build();

  SectionBlock sectionBlock1 = SectionBlock.builder()
    .text(MarkdownTextObject.builder().text("Hello *Pete!*").build())
    .build();

  ButtonElement button = ButtonElement.builder()
    .text(PlainTextObject.builder().text("Petefolio").build())
    .url("https://petefolio.xyz")
    .actionId("button-action")
    .build();

  SectionBlock sectionBlock2 = SectionBlock.builder()
    .text(MarkdownTextObject.builder().text("Please Visit this.").build())
    .accessory(button)
    .build();

  return Arrays.asList(headerBlock, sectionBlock1, sectionBlock2);
}

이후 해당 List를 받아 Slack api instance를 사용하여 전송하는 로직을 작성해주면 됩니다.

public ResponseEntity<Void> notifySlack() throws IOException {
  Slack slack = Slack.getInstance();

  List<LayoutBlock> blocks = createLayout();

  Payload payload = Payload.builder()
          .blocks(blocks)
          .build();

  slack.send(SLACK_WEBHOOK_URL, payload);
  return ResponseEntity.noContent().build();
}

전송 API를 호출해보면 Slack Block Kit Builder에서 구성한 대로 알림이 전송된 것을 확인할 수 있습니다.

1

AI Summary

Beta

📬 새 글이 올라올 때 알려드려요!

새 글 알림받기