LED 전광판 표시 엔진
매장 입구나 실내에 다는 LED 전광판에서 광고 · 홍보 · 알림 문구를 움직이는 효과와 함께 보여 주는 텍스트 모션 엔진을 개발했습니다. 점주가 문구를 입력하면 엔진이 그 글자에 이동 · 전환 · 강조 효과를 입혀 전광판에 출력합니다. 전광판은 일반 화면보다 표시 환경이 제한적이라, 그 안에서도 문구가 손님 눈에 띄게 하는 것이 과제였습니다. 엔진과 함께, 점주가 입력한 문구와 설정이 실제 장치에 반영되는 흐름을 맡았습니다.
점주가 쓴 한 줄을 움직이는 광고로 바꾸는 엔진
텍스트 모션 엔진은 매장용 LED 전광판에 들어가, 점주가 입력한 광고 · 홍보 · 알림 문구를 움직이는 효과와 함께 출력합니다. 엔진은 입력한 글자와 설정값을 받아 그 문구에 맞는 동적 효과를 만들고 전광판 화면에 내보냅니다. 매장 운영자가 전광판 콘텐츠를 직접 바꿀 수 있게 하는 것이 이 엔진의 목적이었습니다.

이동 · 전환 · 강조로 나뉜 여러 모션 패턴
텍스트 모션 엔진에는 글자가 흘러가는 이동, 문구가 다른 문구로 바뀌는 전환, 특정 글자를 돋보이게 하는 강조 같은 여러 모션 패턴이 들어 있습니다. 전광판은 일반 화면보다 표시 환경이 제한적입니다. 그 안에서도 문구가 눈에 잘 띄도록 패턴마다 시각 효과를 구성했습니다.

입력하고, 미리 보고, 내보내는 문구 관리
점주는 입력 화면에서 광고 문구와 알림 내용을 쓰고, 설정을 정한 뒤 미리보기로 확인하고 전광판에 내보냅니다. 입력, 미리보기, 출력이 한 흐름으로 이어져, 매장 운영자가 전광판 문구를 직접 바꿉니다. 내보내기 전에 미리 보는 단계가 있어 전광판에 올라갈 모습을 먼저 확인합니다.

소프트웨어 설정을 실제 전광판으로 옮기는 장치 연동
점주가 입력한 문구와 설정값은 전광판 장치에 그대로 반영돼야 합니다. 소프트웨어에서 정한 내용이 실제 하드웨어로 넘어가 현장에서 동작하는 흐름을 구현했습니다. 경력 초기에 참여한 이 프로젝트는 성공적으로 마무리돼 사내외에서 주목을 받았고, 소프트웨어를 하드웨어 장치와 연결해 현장에서 돌린 첫 경험이 됐습니다.

이 작업의 포인트
입력한 문구에 이동 · 전환 · 강조 효과를 입히는 텍스트 모션 엔진
점주가 직접 쓰는 문구 입력 · 미리보기 · 출력 흐름
소프트웨어 설정이 전광판 장치에 그대로 반영되는 연동
인사이트
GA4 client_storage: 'none'은 정말 쿠키를 막을까?
두 달 전 이 블로그에 「GA4 쿠키 없이 쓰기」라는 글을 썼습니다. clientstorage: 'none' 으로 쿠키 저장을 끄고, 자체 분석이 쓰던 익명 ID 를 clientid 로 넘기면 쿠키 0개로 GA4 를 쓸 수 있다는 내…
GA4 Measurement Protocol: gtag.js 없이 서버에서 이벤트 보내기
랜딩 페이지의 전송량을 파일 단위로 쪼개 보다가, 가장 큰 파일이 우리 코드가 아니라는 것을 알았습니다. Google Analytics 의 gtag.js 였고, 방문 한 번에 176KB 를 받고 있었습니다. 페이지 전체가 1,094K…
중소 제조업 AI 도입 순서: DX를 먼저 끝내야 할까?
공장을 가진 중소·중견 제조기업 16만여 곳 가운데 스마트공장을 도입한 곳은 19.5%입니다. 회사가 작을수록 이 비율은 더 떨어집니다. 중소벤처기업부가 2025년 4월에 낸 제1차 스마트제조혁신 실태조사 결과입니다. 그림: 기업 규…
Next.js loading.tsx와 404: 버튼이 화면보다 먼저 살아나게 하기
관리 화면 왼쪽 위에 사이드바를 접고 펴는 ☰ 버튼이 있습니다. 폭 하나 바꾸는 버튼인데, 대시보드에서 누르면 2초 넘게 아무 반응이 없었습니다. 레이아웃만 바꾸는 일이 왜 이렇게 오래 걸리는지부터 들여다봤습니다. Next.js 16…



