채널톡 아이콘

TypeScript와 D3로 만드는 실시간 MES 도금로 모니터링 — 소스 읽고 내 공정에 맞게 바꾸기

설비 데이터 화면을 어디서부터 만들지 막막했던 분을 위해, 실제 제품 소스를 읽고 개념 설명합니다. 도금로 온도 시각화, 알림 우선순위, 한국어·영어 전환까지 한 프로젝트로 익힙니다. C2I v7.9 실전 소스를 한 줄씩 읽고, 빌드하고, 내 프로젝트에 적용해 변형하는 법

3명 이 수강하고 있어요.

난이도 초급

수강기한 무제한

실습 중심
실습 중심
d3
d3
PLC
PLC
실시간데이터동기화
실시간데이터동기화
공정관리
공정관리
실습 중심
실습 중심
d3
d3
PLC
PLC
실시간데이터동기화
실시간데이터동기화
공정관리
공정관리

수강 후 이런걸 얻을 수 있어요

  • TypeScript로 설비 데이터(도금로·존·알림 기준)의 타입 계약을 읽고 설계하는 방법

  • D3로 SVG를 만들고 setData로 기존 요소를 갱신하는 흐름을 소스에서 추적하는 능력

  • 알림 판정 규칙과 우선순위(전체 OFF, 긴급, 경고, 편차)를 코드와 실행으로 검증하는 방법

  • 한국어·영어 다국어와 브라우저 음성 알림을 구조적으로 처리하는 방법

  • 새 시나리오를 직접 추가하고 타입 검사·빌드·실행으로 검증하는 개발 흐름

  • React,Vue,Svelt,Html에 공통 사용 가능한 컴포넌트 생성 및 기술 습득

  • 소스를 고치는 곳(c2i_util_src)과 쓰이는 곳(dist)을 구분하고, 고친 뒤 build → verify → 화면 확인 순서로 검증한다

  • 내 설비 값을 IDynamicData로 바꾸는 데이터 매핑을 만든다

  • 옵션 지도에서 실제로 읽히는 옵션과 함정을 알고, 렌더링 구조의 한계를 이해한다

  • setData 갱신 흐름과 알림 판정·통합·반복 해제를 코드로 추적하고 규칙을 바꾼다

  • 번역 사전 구조로 새 언어와 음성을 추가한다

  • 온도계·신호등·경광등의 기준과 색을 바꾼다

  • 알림이 외부로 나가는 경계와 서버의 책임(권한·멱등성·재시도)을 설명한다

  • 라이브러리 옵션을 직접 추가하고 빌드·테스트·검증으로 확인한다

도금로 모니터링 소스를 받았는데, 내 공정에 맞게 바꾸려면 어디를 고쳐야 할까?🤔

답은 소스를 읽는 순서에 있습니다. 데이터가 들어와서 화면이 그려지고, 알림이 판정되어 경광등과 음성으로 나가기까지 — 이 길을 실제 소스로 따라가면, 어디를 고치면 무엇이 바뀌는지가 보입니다.


  • 이 강의는 C2I v7.9의 도금로 시각화 컴포넌트(c2i_util_src)와 HTML · React · Vue · Svelte 예제를 가지고, 소스의 줄을 하나씩 강조하며 읽고, 터미널에서 직접 빌드하고, 브라우저에서 동작을 확인합니다. 마지막에는 라이브러리 소스에 새 옵션을 직접 추가해서 빌드 · 테스트 · 전체 검증까지 거칩니다.


  • 강사만 코딩하지 않게, 강의와 같은 순서로 직접 따라 하세요. 고쳐 보고, 깨 보고, 다시 확인하는 것이 소스를 내 것으로 만드는 가장 빠른 길입니다.


이런 분들께 추천해요

이 강의를 들어야 하는 분 (1)

C2I 도금로 컴포넌트 소스를 가져다 내 공정에 맞게 변형해서 쓰려는 개발자

이 강의를 들어야 하는 분 (2)

D3를 차트 예제보다 실제 운영형 컴포넌트로 읽고 싶은 개발자

이 강의를 들어야 하는 분 (3)

온도 임계값, 상태 알림, 다국어·음성 안내를 한 프로젝트에서 익히고 싶은 분

수강 후에는

  • 소스를 고치는 곳(c2i_util_src)과 쓰이는 곳(dist)을 구분하고, 고친 뒤 build → verify → 화면 확인 순서로 검증한다

  • 내 설비 값을 IDynamicData로 바꾸는 데이터 매핑을 만든다

  • 옵션 지도에서 실제로 읽히는 옵션과 함정을 알고, 렌더링 구조의 한계를 이해한다

  • setData 갱신 흐름과 알림 판정·통합·반복 해제를 코드로 추적하고 규칙을 바꾼다

  • 번역 사전 구조로 새 언어와 음성을 추가한다

  • 온도계·신호등·경광등의 기준과 색을 바꾼다

  • 알림이 외부로 나가는 경계와 서버의 책임(권한·멱등성·재시도)을 설명한다

  • 라이브러리 옵션을 직접 추가하고 빌드·테스트·검증으로 확인한다

이 강의의 특징

📌 "어디를 고치면 무엇이 바뀌는가"가 중심입니다. 강의 끝에서 바꾸는 곳을 표나 목록으로 정리합니다.

📌 설명하는 코드는 실제 소스의 줄을 강조해서 보여 줍니다. 터미널 실행과 브라우저 동작도 그대로 보여 줍니다.

📌 소스를 고치는 곳(c2i_util_src)과 결과물(dist)을 구분하고, 고친 뒤 빌드 → 검증 → 화면 확인 순서로 확인하는 작업 방식을 익힙니다.

📌 옵션 지도, 렌더링 구조, 알림 규칙처럼 변형할 때 막히는 곳을 직접 실행해 보며 확인합니다. (예: 옵션을 지정하지 않으면 긴급 알림이 나오지 않는 이유, 도금로를 열 개보다 늘리면 오류가 나는 이유)

📌 한국어 · 영어 다국어와 브라우저 음성 안내가 어떻게 동작하는지, 새 언어를 추가하려면 어디를 고치는지까지 다룹니다.

📌 알림이 시스템 밖으로 나가는 정확한 위치(콜백)와, 브라우저에 비밀정보를 두지 않는 책임 분리를 설명합니다.

💡 TypeScript + D3(SVG) + Vite + HTML/React/Vue/Svelte + 알림 엔진 + 다국어/음성 + MES 연결 경계

이런 내용을 배워요

실시간 데이터 연동

PLC 등에서 발생되는 데이터를 실시간으로 보여주세요. 스마트팩토리등 대부분의 기업은 환영합니다.

수강 전 참고 사항

실습 환경

  1. Windows (11) 기준으로 설명 합니다. 개발은 macOS, window11 모두 테스트 하였습니다.

  2. Cursor : 3.24.18 (vscode 외 대부분 IDE)


  3. D3.js v: v7.9.0

  4. Node.js : v22 이상, 추천 V24

학습 자료

  • 제공하는 학습 자료 형식 (MD, 텍스트, 소스 코드, 애셋, 프로그램 등)

  • 분량 및 용량, 기타 학습 자료에 대한 특징 및 유의사항 등

선수 지식 및 유의사항

  • JavaScript·TypeScript 기본 문법과 DOM 이해

  • npm install, npm run build 실행 경험 (Node.js 20.19 이상, Chrome 같은 최신 브라우저)

  • D3 기초(선택·데이터 바인딩)를 알면 더 편합니다

이런 분들께
추천드려요

학습 대상은
누구일까요?

  • C2I 도금로 컴포넌트 소스를 가져다 내 공정에 맞게 변형해서 쓰려는 개발자

  • D3를 차트 예제보다 실제 운영형 컴포넌트로 읽고 싶은 개발자

  • 제조·MES 화면 개발을 처음 연결해 보는 프런트엔드 개발자

  • 온도 임계값, 상태 알림, 다국어·음성 안내를 한 프로젝트에서 익히고 싶은 분

선수 지식,
필요할까요?

  • HTML,CSS,React 등 플레임워크 기술 습득하시면 더 좋습니다.

  • npm install, npm run build 실행 경험 (Node.js 20.19 이상, Chrome 같은 최신 브라우저)

  • D3 기초(선택·데이터 바인딩)를 알면 더 편합니다

안녕하세요
GregHan입니다.

커리어인증

오랜 시간 동안 기술 변화에 맞추면서 보낸 시간이 많아, 이제 보유한 기술과 경험을 초,중급분들께 미약하지만 제 기술을 제공해서 빠르게 성장하는데 함께하고 싶습니다.

기술 스택

-.Mono-Repo (Turbo: "^2.3.4"), FCM(Firebase Cloud Message), WebHook, Redis, MQTT

-. MUI-X, Material-UI 등 Next & React 생태계 UI

-.OCR(Naver), RIMS, Popbill, SNS Login(Google,Naver,Kakao)

-.Js, Vue/Nuxt (VueX, Pinia), AngularJS, React/Next (Redux,Zustand,Recoil), Svelt,

D3, Three (WebGL), C2i: 청와대 납품 BI 차트, echarts, Vuetify, Quasar, Telerick(Progress)

IndexedDB & SqlLite, css, scss, sass, Tailwind, Bootstrap...

-.Leaflet.js, Cesium.js, 다음 & 네이버 지도

-.WebRTC & WebSocket, MQTT, Silverlight(C#) & ASP.Net

-.Node, Nest, Spring Boot, Docker, Git, pm2

-.AWS, Azure, nCloud(Naver)

-.Oracle, PostgreSQL, MySQL, MariaDB, MS-SQL, MongoDB(mongoose), InfluxDB, Supabase

-.Python, Numpy/Scipy, Jupyter, Django(DRF: Django Rest Framework)/Flask,

-.TensorFlow, Keras, ScikitRun, LangChain

솔루션

  • IAM-Guardian – SGC + ML + AI + Graph 플랫폼

  • IAM-MES – 개별 · 배치 · 연속 제조를 업종별 풀스택 통합 플랫폼

  • IAM-ERP – AI 회계 ERP · 증빙 자동분개 · 잠금 원장

  • IAM-FREE-BI – 쇼핑몰 · 중소기업 무료 브라우저 BI

  • IAM-SPC – 메타기반 범용 SPC · Edge+중앙 · IATF 16949

  • IAM-VeloMap – AI 기반 Lidar 후처리 자동화 솔루션(+Guardian 병합)

-.씨티-와우(City-Wow): 국토,국방,공공 및 병원,제조기업 등 3D 시뮬레이션 및

실시간 모니터링 서비스 ('23.10 ~ 현재; Three, Vanila.js)

-.씨유(SeeU): 업종별 화상 채팅 서비스(병원, 제조..)(구글-밋 + 크로마키, STT & TTS Chatting)

('23.02 ~ 23.10; WebRTC, WebSocket, Vue3 & Pinia, Quasar, Node, MySQL)
-.서베이-와우(Survey-Wow): 구글-폼, MS-폼 , 네이버-폼 설문 결과를 간단하게 분석하고

공유하는 데이터 분석 웹 서비스 ('22.03 ~ 23.01; Vue2 & VueX, Quasar, Node, MySQL)

-.데이터-와우(Data-Wow): xls, json,csv , API 연동 등 공공 데이터 자동 분석 시각화

('22.01 ~ 22.12; Vue2 & VueX, Vuetify, Node, MongoDB) - 행안부 공공데이터 포상
-.DDMV(Data-Dam Multi-Dimensional Vis-): 데이터-댐 다차원 탐색적 시각화 분석서비스

('20.01 ~ 20.08; Vue2 & VueX, Vuetify, Node, MongoDB) - 인천시 공공데이터 포상
-.씨투아이(C2i: Chart Inteiiligence Insights) 차트 컴포넌트: 차트 갤러리 메뉴

BI 기반 차트 (with D3.js): '15.04 ~ 현재 ; D3.js(v3.3 ~ v7.9) 기반의 BI 패턴의 차트 솔루션

(문재인 정부 일 자리 대시보드 청와대 납품, 몽골 재정관리 국책 프로젝트 남품. 다국어 지원)

 

Data Mart & Warehouse, ROLAP, BI, 시각화, 클라우드 인프라 등 다양한 기술 스택과

업무 분석, Oracle(v6.3 ~ ) 모델링 & 튜닝 분야에 대한 전문 정보 및 경험 보유.

 

-.(주)캐주얼-인사이트 (Casual-Insights) CTO

-.전 KISTI 연구원

-.전 LG-CNS Oracle Modeler, DBA & 선임 연구원

-.전 극동(현대) 정유 전산실 사원

**. 데이터 댐 다차원 시각화-.종합 소개(필수) : https://youtu.be/noZ9H7wftsI

-.소비상권-I(필수 : 백화점 매장 포스 데이터 - 일반 제조 유통업체) : https://youtu.be/ArL-Pv3U-40 -.소비/상권-II (한국 KDX, 식신 데이터 제공): https://youtu.be/Wcpu29gI53Y

-.보건의료 (한국 KDX, 온누리H&C 데이터 제공): https://youtu.be/I8WBqAFp9L4-

.공공 데이터 (경기 화성 시청 공공 데이터 제공) : https://youtu.be/2QCw_6aeRVE

*.D3 & ThreeJS 차트 갤러리 :https://gregory-han.github.io/chart/

*.포상이력

1999.08 한겨레신문 & UTC 벤처21 본상 수상.(상금 5천만원)
2000.10 ㈜소프트다임 대통령상 수상 (PowerSi OLAP)
2002.11 한국 e-비즈니스대상 산업자원부 장관상 수상
2020.08 인천시 공공 데이터 포상
2022.12 행안부 공공 데이터 포상
더보기

커리큘럼

전체

13개 ∙ (2시간 6분)

해당 강의에서 제공:

수업자료
강의 게시일: 
마지막 업데이트일: 

수강평

아직 충분한 평가를 받지 못한 강의입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!

GregHan님의 다른 강의

지식공유자님의 다른 강의를 만나보세요!

비슷한 강의

같은 분야의 다른 강의를 만나보세요!

얼리버드 할인 중

₩43

49%

₩108,900

평생교육이용권 지원 강의