2009년부터 글로벌 제조 현장에서 SCM(공급망 관리) 업무를 수행하며 매번 깨닫는 것은, 결국 모든 업무의 핵심은 ‘흐름(Flow)’과 ‘연결(Connection)’을 어떻게 직관적으로 시각화하고 최적화할 것인가에 달려 있다는 점입니다. 수많은 벤더와 방대한 데이터가 실시간으로 교차하는 환경에서는, 정적인 표나 텍스트만으로 그 거대한 맥락을 온전히 파악하기 어려울 때가 많습니다.

최근 숏폼 영상 트렌드를 살펴보던 중, 사용자의 모션(움직임)을 인식해 반응하는 흥미로운 인터랙티브 영상들을 접했습니다. 화려한 시각 효과도 좋았지만, 문득 이를 우리 ‘키친솔루션 SCM 팀’의 유기적인 네트워크를 표현하는 데 적용해 보면 어떨까 하는 실무자로서의 호기심이 발동했습니다. 복잡한 센서 장비나 무거운 코딩 지식 없이, AI 코딩 어시스턴트와 ‘대화’하는 것만으로 웹캠 연동 모션 인터랙티브 대시보드를 기획하고 구현해 낸 프롬프트 작성 경험을 공유합니다.

1. 꽉 막힌 기성 툴 대신, AI와 함께 직접 뼈대 잡기

실무 현장에서는 종종 기존 시스템의 틀에 우리의 업무 프로세스를 억지로 끼워 맞춰야 하는 답답함을 마주합니다. 반면, 필요한 기능만 쏙쏙 뽑아 직접 파이프라인의 뼈대를 설계했을 때 업무 효율이 비약적으로 상승하는 쾌감이 있죠.

이번 프로젝트도 마찬가지였습니다. 무거운 AR 필터 제작 프로그램을 새로 배우거나 개발자에게 외주를 맡기는 대신, 클로드나 제미나이 같은 AI에게 명확한 업무 지시(프롬프트)를 내려 코드를 작성하게 했습니다. 여기서 핵심은 한 번에 완벽한 결과물을 요구하지 않고, 단계별로 살을 붙여나가는 것입니다.

2. 실전 프롬프트: 대시보드를 완성한 3단계 대화법

제가 AI에게 실제로 입력하여 모션 인터랙티브 웹(HTML/JS) 결과물을 얻어낸 단계별 프롬프트를 공개합니다. 이 프롬프트를 복사해서 AI에게 그대로 입력해 보시면, 누구나 비슷한 결과물을 얻으실 수 있습니다.

✅ 1단계: 시각적 뼈대와 물리 법칙 생성 (p5.js 활용)

먼저 화면에 떠다니는 데이터 노드(팀원)들과 그들의 연결성을 정의합니다.

“웹브라우저에서 바로 실행할 수 있는 HTML과 JavaScript 코드를 작성해 줘. 시각화를 위해 p5.js 라이브러리를 사용해 줘.

요구사항:
1. 어두운 네이비색 배경에 11개의 데이터 노드(원형)가 무작위로 부드럽게 떠다니게 해줘.
2. 노드들 간의 거리가 가까워지면(예: 200px 이하) 두 노드 사이에 반투명한 선이 연결되도록 해서 네트워크 망처럼 보이게 해줘.”

✅ 2단계: AI 모션 인식 엔진 연동 (MediaPipe 활용)

가장 중요한 상호작용 단계입니다. 웹캠을 켜고 손동작을 인식하도록 요청합니다.

“방금 짜준 코드에 구글 MediaPipe Hands 라이브러리를 추가해서 모션 인식 기능을 넣어줘.

요구사항:
1. 사용자의 웹캠을 켜고 손을 인식하게 해줘.
2. 인식된 손 중에서 ‘검지 손가락 끝(Index Finger Tip)’의 좌표를 추출해 줘.
3. 내 검지 손가락이 화면의 떠다니는 노드들에 다가가면, 노드들이 자석의 같은 극처럼 자연스럽게 밀려나는(반발력) 물리 효과를 추가해 줘.”

✅ 3단계: 실무 데이터 입히기 (디테일 튜닝)

마지막으로 우리 팀의 실제 구성원 정보를 넣어 디테일을 완성합니다.

“훌륭해. 이제 이 노드들에 우리 ‘ SCM 팀’ 데이터를 입혀서 코드를 수정해 줘.

데이터:
– 팀장: 다니엘
– 팀원: 장동건 원빈 고수

요구사항:
1. 화면 중앙 배경에 ‘KITCHEN SOLUTION SCM TEAM’이라는 텍스트를 은은하게 깔아줘.
2. 팀장(다니엘) 노드는 다른 팀원들보다 크기를 조금 더 크게 하고, 금색 빛이 나도록 강조해 줘. 나머지 팀원들은 푸른빛으로 설정해 줘.
3. 각 노드 아래에 팀원들의 이름이 텍스트로 따라다니게 해줘.”

이렇게 생성된 코드를 복사하여 메모장에 `.html` 확장자로 저장하거나, 코드펜(CodePen) 같은 웹 에디터에 붙여넣기만 하면 즉시 작동하는 SCM 팀의 모션 인터랙티브 대시보드가 완성됩니다. 제 손의 움직임이 디지털 세상의 에너지 포인트로 변환되어 팀원들의 노드를 밀어내고 연결하는 모습은, 끊임없이 변화하며 영향을 주고받는 공급망의 본질과 아주 닮아있었습니다.

3. 마치며: 코딩과 SCM의 프로세스 설계

새로운 시스템을 전면 도입하기 전 가볍게 PoC(개념 증명)를 진행하는 것처럼, 기술의 진입 장벽이 낮아진 현재는 실무자가 직접 AI라는 훌륭한 조수와 함께 아이디어를 프로토타입으로 시각화할 수 있는 시대가 되었습니다.

코드를 짜는 과정(프롬프트 엔지니어링)은 SCM의 프로세스 설계와 많이 닮아있습니다. 각 변수(노드)를 어떻게 정의하고, 그들 간의 상호작용(흐름)을 어떤 조건으로 묶어낼 것인지 논리적으로 지시하는 과정이니까요. 여러분도 AI를 활용해 다루고 계신 실무 데이터의 흐름을 새롭게 시각화해 보시는 것을 추천합니다.

제작: 에이드네

게시물 [AI 활용기] SCM 실무자의 시선으로 본 모션 인식 인터랙티브 웹 구현하기 (feat. AI 프롬프트 엔지니어링)이 aidneblog에 처음 등장했습니다.

안녕하세요, Aidne입니다.

이전 포스팅에서 에이전틱 AI가 스스로 업무의 경중을 따지는 ‘능동적 우선순위 판별(Active Prioritization)’의 개념을 다루었습니다. 그렇다면 이 똑똑한 물류 센터장을 내 컴퓨터 안에 실제로 어떻게 채용할 수 있을까요?

오늘은 제가 SCM 현장에서 물류를 라우팅(Routing)하던 방식을 차용하여, 누구나 따라 할 수 있는 Make.com 기반의 ‘지능형 이메일/데이터 분류 자동화 파이프라인’ 설계 청사진을 공개합니다.

1. 기존 파이프라인의 한계: “조건(If)이 없으면 멈춘다”

전통적인 Make.com이나 Zapier 세팅은 철저한 ‘If-Then’ 방식입니다. “제목에 ‘긴급’이라는 단어가 있으면 A로 보내라” 같은 규칙을 사람이 일일이 걸어두어야 하죠. 하지만 고객이 ‘긴급’이라는 단어 대신 “어제 결제했는데 당장 환불해 주세요, 화가 납니다”라고 쓴다면? 기존 봇은 이 맥락을 읽지 못하고 일반 업무로 분류해 버립니다.

우리가 만들어야 할 것은 규칙(Rule)에 얽매인 봇이 아니라, 문맥(Context)을 이해하는 ‘에이전트 노드(Agent Node)’입니다.

2. Make.com 실무: LLM 라우터(Router) 배치하기

이 지능형 공정의 핵심은 데이터가 들어오는 입구(Trigger) 바로 다음에 판단(Triage)을 내리는 AI 모듈을 배치하는 것입니다.

1. 데이터 수집 (Trigger): Gmail 모듈이나 Webhook을 통해 외부 데이터(이메일, 폼 응답 등)를 받아옵니다.
2. LLM 에이전트 투입 (Action): 바로 다음 단계에 OpenAI(ChatGPT)나 Anthropic(Claude) 모듈을 연결합니다.
3. SOP(표준 작업 지침) 프롬프트 입력: 이것이 핵심입니다. AI에게 명확한 역할과 출력 형식을 강제해야 합니다.
   
   
   “너는 우리 회사의 CS 수석 분류 담당자야. 다음 이메일 본문을 읽고 고객의 감정 상태와 업무의 긴급도를 판단해. 출력값은 반드시 [긴급], [일반], [스팸] 세 가지 중 하나의 단어로만 도출해. 다른 말은 절대 덧붙이지 마.”

3. 스위치(Switch) 모듈로 자율 공정 완성하기

AI가 텍스트의 맥락을 읽고 정확히 [긴급], [일반], [스팸] 중 하나의 태그를 뱉어내면, 이제 이 결과값을 바탕으로 물류 레일(경로)을 나눠주면 됩니다.

• Make.com의 Router(또는 Switch) 모듈을 AI 다음 단계에 붙입니다.
• 경로 A (긴급): AI 출력값이 [긴급]일 경우 ➡️ 슬랙(Slack) 모듈로 담당자에게 빨간색 알림과 함께 원문을 즉시 전송합니다.
• 경로 B (일반): AI 출력값이 [일반]일 경우 ➡️ 노션(Notion) 데이터베이스에 ‘처리 대기’ 상태로 차곡차곡 쌓아둡니다.
• 경로 C (스팸): AI 출력값이 [스팸]일 경우 ➡️ 즉시 모듈을 종료하여 불필요한 태스크(Task) 소모를 방지합니다.

결론: 시스템의 지능은 ‘입구’에서 결정된다

수백 개의 노드를 복잡하게 연결한다고 해서 훌륭한 자동화가 아닙니다. 가장 훌륭한 공정은 입구에서부터 불량품을 걸러내고, VIP 자재를 하이패스로 통과시키는 라인입니다. 단 하나의 LLM 에이전트를 입구에 배치하는 것만으로도, 여러분의 자동화 파이프라인은 수동 기계에서 ‘자율 지능 공장’으로 진화할 것입니다.

제작:에이드네

게시물 [에이전틱 AI 심화편] 단순 봇을 ‘수석 분류 담당자’로 승진시키는 능동형 라우팅 설계법 (Make.com 실무)이 aidneblog에 처음 등장했습니다.