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를 활용해 다루고 계신 실무 데이터의 흐름을 새롭게 시각화해 보시는 것을 추천합니다.
제작: 에이드네