brunch

라이킷 6 댓글 2

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 번개거북 Jan 13. 2023

팀 구성원 근무 시간 Slack 알림

김 대리님, 혹시 박 과장님 오늘 휴가신가요?

김 대리님, 혹시 박 과장님 오늘 휴가신가요?

내 앞자리의 박 과장님이 휴가인지 나도 모를 경우 '모르겠네요'라는 대답을 하게 되는 것이 당연할 것입니다. 이렇게 누가 묻는 상황이 아니더라도 나와 자주 같이 일을 하는 동료들이 휴가나 재택인지 알고 있다면 일을 진행하는데 도움이 될 텐데요, 효율적인 방법은 없을까요?

저의 경우 flex라는 툴을 통해서 다른 분들의 근태를 확인할 수 있기 때문에 (조금 시간이 걸리지만) 근태 내역을 찾아보는 것은 그리 어려운 일은 아닙니다. 하지만 반대로 생각해 보면 저희 부서의 20명이 넘는 인원들이 모두 같은 일에 시간을 소비하는 것보다는, 조금은 더 쉽게 정보를 얻을 수 있다면 좋겠죠. 결론적으로 아침 출근을 해서 이런저런 메시지들을 쭉 확인할 때 휴가/재택인 분들의 정보를 한눈에 볼 수 있도록 작업을 해봤습니다.

< slack 알림 결과 >

사실 이번에 작업한 내용 이전에 손으로 구글 시트에 입력한 근태 정보들을 slack workflow 만으로 구현해서 운영을 했던 기간이 있었는데요, 먼저 간략하게 소개를 해봅니다.

< 구글시트에 수동 입력 >

사실 아래는 위의 <수동 입력 탭>에서 다시 일부 트릭(?)을 활용해서 <알림용 목록>으로 변환되는 과정이 있었지만 해당 부분은 스킵.

< slack 알림을 위해 메시지를 한 셀에 구성 >

< slack workflow >

하지만 이제는 Unpublished.

저의 브런치에서 소개하는 내용은 구글 시트를 활용하는 경우가 많은데요, 이번 글의 이후 내용은 프로그래밍에 관련해서 참조를 할 수 있는 내용 위주로 작성이 되었습니다. 현업에서 개발을 지속적으로 하고 계신 분들에게는 가볍게 참조만 할 수준인데요, 비슷한 것을 만드려는 분들이 제가 했던 삽질을 조금은 피할 수 있기를 바라면서 몇 가지를 적어봅니다.

이제 본격적으로 flex 스크래핑과 slack 알림에 대한 내용입니다.

먼저 개발 언어/환경에 대한 내용인데요, flex의 기능에 동적인 랜더링 요소들이 있어서 이를 쉽게 해결할 수 있는 예제 코드를 찾아보다가 puppeteer(https://pptr.dev/)을 활용하기로 하였습니다.

그리고 Node.js를 기반으로 동작하는 이 서비스를 매일 구동할 수 있는 서비스도 찾을 수 있었는데요, 무료 티어가 어느 정도 넉넉한 https://pipedream.com/ 을 선택하게 되었습니다.

이제 다음 스텝은 flex에서 날짜 기준으로 보여줄 적당한 페이지를 고르는 것인데, 아래 화면과 같이 '구성원 근무'에서 주단위 선택을 하면 각 날짜별/인원별 근태 정보가 요약되어서 보입니다.

< flex : 구성원 근무 화면 >

빨간색 : 주 단위로 설정 - 주소 경로에 weekly가 추가됨

파란색 : 조직 선택 - 주소 경로에 departments가 추가됨

초록색 : flex 화면에서 보이는 주간의 날짜 정보

노란색 : 스크롤을 하기 위해 활용한 영역

< 스크롤 동작 위치 설명 >

노란색 부분에 대한 추가 설명인데요, 구성원이 많은 경우 화면 아래로 스크롤을 할 때마다 추가적으로 정보를 가져오는 구조로 flex의 기능이 동작하게 됩니다.

그런데 이때 화면 전체가 스크롤이 되는 것이 아니라 달력처럼 표시되는 날짜 부분부터 스크롤이 되는데, 스크래핑을 할 때 이 부분이 문제가 될 수 있습니다. 즉 스크롤 명령을 전달해도 동작하지 않을 수 있는 것이죠. 저 같은 경우에는 노란색 부분을 "클릭"하는 액션을 넣은 이후에 스크롤을 하도록 구성해서 문제를 해결했습니다.

이제 실제 메시지 발송을 위한 pipedream 세팅인데, 그리 어렵지 않게 구성할 수 있습니다.

제가 사용한 스텝은 3가지 종류입니다.

< pipedream : workflows >

1. 작업 시작은 trigger로 오전 9시쯤에 알림이 갈 수 있도록 살짝 이전 시간으로 설정을 했습니다.

2. browserless라는 서비스로 스크래핑을 구성했는데요, 이 서비스 역시 무료 티어가 넉넉한 편입니다. pipedream 자체에서 제공하는 node/puppeteer 만으로도 가능하네요.

3. slack 메시지 발송을 하는 부분인데요, 거의 동일한 메시지 발송 형태를 2개 연속으로 연결을 해두었습니다. 이렇게 구성을 해서 잘 동작하는지 검증을 할 경우에 public_channel 부분을 disable 시켜놓고 private_channel에서 확인을 하고 있습니다.

< pipedream : Setting >

그리고 실행 시간 디폴트 값이 30초인데요, 스크래핑 시간이 꽤나 소요되기 때문에 충분한 시간으로 설정을 해두는 것이 필요합니다.

아래에는 익숙하지 않은 분들이 비슷한 구현을 할 때 삽질을 할 수 있는 부분을 고려해서 몇 가지 참고용 코드 샘플을 추려 봤습니다. 제가 요즘 개발도 하지 않는 데다가 익숙하지 않은 환경에서 대략 구성한 것이라 오류가 있을 수 있습니다. (코드 품질은... 조용. 쉿!)