- 기술 블로그에 콘텐츠를 자동 배포하는 슬랙봇을 개발한 과정과 방법
- 개발 과정
- 1.자동화 계획 세우기
- 첫째, 기술 블로그에 콘텐츠를 배포할 때 기존에 이용하던 도구(노션, GitLab)를 새로운 도구에(슬랙봇) 통합하기로 함. 구성원이 새 배포 시스템에 쉽고 빠르게 적응하도록 유도하기 위함
- 둘째, TypeScript 프레임워크를 사용하기로 결정. TypeScript는 널리 사용되며, 이는 정적 타입 언어라서 안정적으로 개발할 수 있음. 이는 새로운 배포 시스템을 쉽고 편리하게 유지보수하는 데 도움이 됨
- 셋째, 사용자 친화적인 상호작용을 지원하기
- 슬랙봇을 선택한 이유
- 슬랙봇이 이러한 원칙을 모두 충족함
- 슬랙봇은 ‘Bolt’라는 프레임워크를 제공함. 이는 JavaScript, Java, Python 뿐만 아니라 문서도 잘 지원함. 이를 참고하면 기술 블로그 배포 자동화 도구를 개발하기가 쉬움. 로컬 환경에서 실행해도 슬랙 애플리케이션에서 도구를 테스트할 수 있음
- 슬랙은 사용자에게 보이는 화면을 ‘Block Kit’ 기능으로 설계하도록 지원함. 화면 흐름을 JSON으로 설계하고 함수로 데이터를 처리하면 직관적으로 상호작용할 수 있음
- 2.화면 그리기
- 슬랙은 사용자와 상호작용하는 데 활용하도록 메시지와 모달을 지원함
- 기술 블로그에 콘텐츠를 배포하는 워크플로를 모달로 구현
- 슬랙봇 활용한 기술 블로그 배포 과정
- 블로그 게시: 무슨 콘텐츠를 어디에 배포할지 선택
- 블로그 유효성 검사: 메타데이터와 커버 이미지 등 프론트엔드에 필요한 요소가 배포하려는 콘텐츠에 모두 있는지 확인
- GitLab 이슈/MR 검사: GitLab에 이슈와 MR을 생성하는 단계. 이슈와 MR이 이미 있다면 해당 MR에 커밋
- 완료 메시지: 배포가 완료되면 노션의 콘텐츠 원본 링크와 GitLab MR 링크를 포함하는 메시지를 남김
- 3.봇 설계, 제작하기
- 봇 하나로 노션, GitLab 등 다른 서비스와 모두 상호작용하려 함
- GitLab에 CI/CD 파이프라인을 생성해 애플리케이션을 배포하거나 봇을 수정할 때, 이 방식이 더 유리할 걸로 판단함
- 봇 개발에는 TypeScript 언어와 슬랙에서 지원하는 Bolt 프레임워크를 사용함
- 폴더 구조는 NestJS에서 영감 받아 채택
- workflow.ts : 화면과 데이터 흐름을 정의하며, 모든 워크플로의 시작점
- service.ts : 비즈니스 로직을 정의함
- model.ts : 슬랙 또는 서드파티 API와의 데이터 타입을 정의함
- modal.ts : 사용자와 상호작용하는 화면을 정의함
- 4.봇 작동방식
- 슬랙에서 아무 채널에나 명령을 입력하면 봇이 호출됨
- 이때 노션의 콘텐츠 제목과 콘텐츠를 올릴 채널을 선택하고, ‘제출하기’ 버튼을 누르면 자동으로 필수 메타데이터 입력 여부를 검색함
- GitLab ID, 저자 이름, md 파일명, 커버 이미지,
<!--truncate-->등이 입력해야 할 메타데이터인데 이 중 하나라도 빠지면 콘텐츠를 올릴 수 없음
- 필수 메타데이터가 모두 입력돼 있으면 ‘계속하기’ 버튼을 눌러 다음 절차로 넘어갈 수 있음
- 이때 GitLab에 해당 콘텐츠의 이슈와 MR이 자동 생성됨
- MR에 레이블도 자동으로 달리고, 콘텐츠를 배포하는 파이프라인까지 자동으로 실행됨
- 파이프라인 실행이 완료되면 GitLab 리뷰 앱으로 콘텐츠 배포 상태를 미리 확인할 수 있음
- 도입 결과
- 테크니컬 라이터와 엔지니어가 기술 블로그에 콘텐츠를 배포하기 위해 MR을 만드는 빈도는 약 30% 증가
- 클릭 한 번으로 1분 안에 콘텐츠를 배포
- 파이프라인 실패율이 5% 아래로 줄어듦