[Activepieces를 사용한 회고리포트 1편]

소개

회사를 다니며 주간업무보고에 많은 에너지를 쓰고 싶지 않다고 생각했었습니다. 마침 회고리포트 스터디를 발견했고, 매시간 무엇을 하고 있는지 묻는 메신저가 오고 자연어로 간단하게 대답하면 자동으로 일의 현황이 저장되는 부분에 매력을 느꼈습니다.

자동화 툴로 Activepieces를 사용하는 이유로는 무료로 10개의 자동화를 운영할 수 있다는 점, n8n보다 비개발자에게 더 직관적인 UI를 제공한다는 점을 꼽을 수 있을 것 같습니다.

진행 방법

1일차에는 Activepieces의 기본 개념을 학습했습니다. 크게 자동화를 발동시키는 트리거(조건)과 자동화 내용을 담은 액션(결과)로 나누어져 있습니다.

ALT

다양한 유형의 작업을 보여주는 한국 웹사이트의 스크린샷

트리거는 하나만 설정할 수 있는 반면, 액션을 여러 개의 연결이 가능합니다.

ALT

결제 프로세스의 다양한 단계를 보여주는 다이어그램

이후 반복 처리와 조건 분기를 활용하여 더욱 강력한 자동화 워크플로우 만들기 위해 Flow 요소인 Loop와 Router을 배웠습니다.

*Flow는 자동화 작업의 단위라고 생각하면 될 것 같습니다.

Loop는 "같은 일을 여러 대상에게 반복" 할 때 사용하며, 저는 while문이라고 생각했던 것 같습니다. Router는 프로그래밍의 조건문 (if/else, switch)과 동일한 개념입니다.

맨 처음 Activepieces에 가입하면 개인 플랫폼에서 Flow를 생성할 수 있습니다.

ALT

Adobe Adobe Adobe Adobe adobe a의 설정 페이지 스크린샷

생성된 플로우에 가장 처음 트리거를 설정해 주어야합니다. 트리거에 대한 자세한 내용은 추후 업로드 하겠습니다. 우선 Webhook의 Catch Webhook으로 선택했습니다.

ALT

화면의 항목 목록을 보여주는 화면의 스크린샷

트리거를 설정한 이후 회색의 +버튼을 눌러 다음 요소를 추가해줍니다. 추가할 때 원하는 요소를 검색하면 쉽게 찾아 넣을 수 있습니다. Loop와 Router를 활용하기 위해 사전 리스트를 작성하고자 Code를 먼저 선택해주었습니다.

ALT

Google Docs의 테스트 플레이북 스크린샷

아래는 2. Code에 작성한 코드입니다.

export const code = async (inputs) => {
  return [
    {// 테스트 1: 중칼로리 (피자)
      "food": "피자",
      "calories": 350
    },
    {// 테스트 2: 저칼로리 (샐러드)
      "food": "샐러드",
      "calories": 120
    },
    {// 테스트 3: 고칼로리 (햄버거)
      "food": "햄버거",
      "calories": 580
    },
    {// 테스트 4: 중칼로리 (초밥)
      "food": "초밥",
      "calories": 280
    }
  ];
};

이후 하단의 이미지처럼 Loop와 Router를 함께 사용해 음식 칼로리별 메세지를 출력하는 플로우를 만들어봤습니다.

ALT

프로세스 단계를 보여주는 순서도

1번은 트리거, 2번은 음식들의 이름과 칼로리가 적혀있는 리스트가 들어있습니다.

3번은 Loop이며 내부 items로 리스트 '2. Code'를 선택해 넣어주었습니다.

*Items란? Items는 반복 처리할 데이터의 배열(리스트)입니다. 이전 단계에서 생성된 데이터나 직접 입력한 데이터를 사용할 수 있습니다.

ALT

스프레드시트의 항목 목록을 보여주는 Google 시트의 스크린샷

4번은 Router입니다. 고칼로리에 해당하는 음식을 분류하는 Branch 1, 중칼로리에 해당하는 음식을 분류하는 Branch 2, 나머지는 저칼로리로 분류되도록 했습니다. 이때 Branch 1의 Execute If 에는 3번 Loop에 들어온 items 중 'calories'를 선택해 조건을 걸어주었습니다.

노랑색으로 표시한 부분이 조건의 대상이 되는 item calories, 파랑색 부분은 (Number) Is greater than으로 설정해 숫자를 비교해주었고, 초록색 부분은 원하는 숫자를 넣어 조건을 완성해줍니다. Branch 2의 경우로 마찬가지로 설정 후 숫자만 500 대신 250을 넣어주었습니다.

ALT

데이터 검색을 보여주는 Google 시트의 스크린샷

5번 코드의 경우 출력할 코드를 작성해주면 됩니다. 이때 Inputs의 초록색 부분에 변수 이름을 적고(foodData), 해당 foodData 값으로 노랑색으로 표시된 3. Loop의 'items'를 선택해 넣어줍니다. 그리고 Code 부분을 작성 시 하단의 <코드 블럭> 내 inputs.foodData(변수 이름)을 통일합니다.

5. Code 코드 참고

사본

export const code = async (inputs) => {   
  const food = inputs.foodData;
  
  return {
    category: "고칼로리",     
    food: food.food,
    calories: food.calories,     
    warning: "적당히 섭취하세요"   
  };
};

Branch 2의 6번 코드의 경우로 마찬가지로 설정 후 category: "중칼로리", warning: "균형잡힌 식사" 을 넣어주었습니다.

7번 코드의 경우 category: "저칼로리", warning: "건강한 선택!" 을 넣어주었습니다.

결과와 배운 점

전체 Flow를 실행하면 Run Details에서 3번 Loop의 Iteration을 바꿔보며 Output을 확인할 수 있습니다. 아, 전체 실행 전 각 단계별로 Tested Successfully를 확인하고 실행해야 합니다.

ALT

프로그램의 실행 세부 정보를 보여주는 화면

원하는 자동화를 구현하기까지 갈 길이 멀어보이지만 스터디를 잘 따라가보며 실제로 사용가능한 결과물을 한 번 만들어보고 싶습니다!

도움 받은 글 (옵션)

Hero님의 Activepieces 핸드북