회의나 보고에 소모되는 시간이 많다!
어떤 회의나 보고가 ""좋은""걸까?
우선 회의에 대해 단계적으로 알아갔다.
IP 변경 회의 스크린샷
각 스텝마다 md 파일로 정리하며 진행되었고 해당 작업 과정을 기반으로 보고에 대해서도 메이킹 해달라 하니 유사하게 진행되었다.
채널업 보고서 - 스크린샷
이것을 기반으로 좋은 회의보고를 위한 회의를 ㅋㅋ 시작하니 훨씬 수월했다.
우린 구성원의 VoE를 취합해서 해결해주고 있다
결국 이런 대응방안은 특정 게시판에 게시되어야한다!
모든 게시글을 일일히 만들수 있지만, 바이브코딩으로 어느정도 반자동화 하고싶어서
우선 게시글이 될 템플릿을 만들고, 그 안에 들어가는 내용은 어느정도 내가 정리한 엑셀로 input 주려고 한다~~ 게시글이 성공적으로 완성되면, 기한상 게시판에 올리는것까지는 직접하려고 한다! (오류나면 아주 곤란함)
점진적으로 사내게시판에 업로드까지 자동화하는게 목표다!!
# 🚀 ChangeUP VoE 리포트 대량 렌더링 봇(Bot) 개발 스터디 회고
## 🎯 1. 프로젝트 목표 (목적)
사내 조직문화 혁신(ChangeUP)의 핵심인 **'구성원 목소리(VoE)'**와 **'주관부서 검토 개선안'**을 투명하고 트렌디하게 전사에 공유하기 위함.
단, 실무자의 노가다성 시각화(장표) 렌더링 디자인 업무를 없애기 위해, **수십/수백 건의 엑셀(Excel) Row 데이터를 사내 게시판용 고품질 포스터(PNG/PDF)로 클릭 한 번에 무한 양산해 내는 자동화 파이프라인(Node.js + Puppeteer)** 시스템을 밑바닥부터 자체 구축하는 것이 핵심 목표입니다.
---
## 🛠️ 2. 아키텍처 시스템 설계 (개발 전략)
무거운 PPT 원본 템플릿을 코드(Code)로 끌고 들어와 수천 건씩 찍어내기 위해 **'투명 배경 샌드위치 레이어링(Layering)'** 기법을 고안했습니다.
1. **투명 배경 요소 물리 분할**: 디자이너의 PPT 템플릿을 [1.상단 메인], [2.중간 따옴표/배경], [3.하단 꼬리말 배경], [4.랜덤 엘리 캐릭터] 등 쪼개어, 전체 위치(좌표)가 고정된 A4 크기의 투명 PNG 낱장 파일들로 분리 저장.
2. **HTML/CSS 캔버스 좌표 조준**: 분리된 여러 투명한 PNG들을 `position: absolute` 및 `z-index` CSS 속성을 통해 가상의 HTML 도화지 위에 100% 사이즈로 차곡차곡 겹쳐 세워, 하나의 완벽한 마스터 포스터 레이아웃을 코딩으로 조립해 냄.
3. **엑셀 파싱 및 자동 텍스트 렌더링 매핑**: 자체 개발한 Node.js 스크립트(`generate_test.js`)가 엑셀을 통째로 읽고, 템플릿 이미지들의 비어있는 정확한 픽셀 공간들에 `[소제목]`, `[VoE 압축 요약본]`, `[답변 정제본]` 텍스트를 오리지널 사내 폰트로 맵핑해 밀어 넣음.
---
## 💥 3. 맞닥뜨린 주요 챌린지 및 극복 (Troubleshooting)
### 🚨 1) 구형 마크다운 엔진의 한계와 PDF 렌더러의 충돌
* **증상**: 초기에 HTML+CSS로 겹겹이 짠 아름다운 입체 템플릿(그라데이션, 그림자 효과)을 기존 `md-to-pdf` 등 단순 컴파일 플러그인에 물렸더니 시스템 렌더러가 뻗거나 CSS 서식이 모두 처참히 깨져버림. 윈도우 내장 명령 프린터(`msedge --print-to-pdf`)도 터미널 환경 문자 인코딩 충돌로 콘솔창에 바이너리 쓰레기값만 뱉어내며 생성에 실패.
* **극복 (Pivot 전략)**: 불안정한 외부 간편 플러그인 모듈에 의존하는 것을 포기! 아예 **크롬(Chromium) 렌더러(Puppeteer 라이브러리)를 통째로 내장시킨 자체 Node.js 캡처 스크립트(`capture.js`)**를 쌩으로 작성하여, 백그라운드로 보이지 않는 가상 브라우저를 띄운 뒤 화면 전체를 고해상도(Retina Device 2배수율) PNG 이미지로 완벽히 찰칵 찍어 폴더에 꽂아버리는 무적의 방식으로 우회 성공!
### 🚨 2) 동일 '개선안' 기준 다수 VoE 다중 데이터의 논리 병합
* **증상**: 제공된 엑셀 데이터상, 1개의 '주관부서 검토 개선안(답변 H열)'에 각기 다른 여러 명의 '구성원 VoE(사연 B열)' 행(Row)들이 수직으로 분산되어 있었음. 그대로 1줄당 1개 게시물 이미지를 만들면 게시판 내용이 무한 도배되는 문제 발생.
* **극복**: 스크립트 단에 `Grouping 데이터 파서 로직`을 추가 삽입. **H열(개선안) 텍스트가 완전히 일치하는 행들을 자동으로 하나의 거대 배열로 합치게 만들고**, 결합된 다수의 멤버 VoE 사연들을 합쳐서 (CSS 말줄임 등을 활용해 최대 5줄 컷팅 등) 핵심만 깔끔하게 압축/요약해 단 한 장의 템플릿 포스터에 구워내는 데이터 집계 로직 완성.
### 🚨 3) 오리지널 디자인 핏(Fit) 이식 및 OS 물리 폴더 동기화 문제
* **증상**: 테스트 중 윈도우 로컬 PC 환경 밖에서 새 PNG 이미지 폴더 덮어쓰기(드롭)를 시도하다가, 상하단 레이어 원본 에셋이 모두 한 방에 유실되는 OS 휴먼 에러 지옥 경험 😅. 또한 지정된 사내 오리지널 폰트(Paperlogy, LG Smart_H 등)의 스타일이 웹 CSS 출력물에 바로 묻어나지 않는 현상.
* **극복**: Git 형상 관리 시스템(`Git Commit`)을 강제로 백그라운드에 붙여, 매 변경 때마다 소스 코드를 영구 안전 스냅샷 처리해 휴먼 에러를 방어. 또한 CSS `@font-face` 속성의 오프라인 라이브러리(`/★서체 다운 필수★/*.ttf`) 절대 경로를 Node 런타임 스크립트(`__dirname`)로 강제 매핑시켜 디자이너 시안과 완벽하게 똑같은 100% 싱크로율의 폰트를 렌더링하는 데 성공함!
---
## 🌟 4. 현재까지의 성과 종합 (To-Be)
이러한 피 말리는 핑퐁 우여곡절을 통해, 현재 **[1. 엑셀(Excel)에서 목표 케이스 추출] ➡️ [2. VoE-개선안 텍스트 및 서체 가공] ➡️ [3. A4 투명 5단 PNG 레이어 합성 좌표 계산] ➡️ [4. 자동화 브라우저 초고해상도 이미지 포스터 Export]**로 이어지는 가장 숨 막히는 **렌더러 파이프라인(`generate_test.js`) 1호기 테스트 가동에 성공**했습니다.
이제 기획자가 원클릭으로 구동하는 것만으로, 수십 건이든 수백 건이든 가장 완벽한 폰트와 찰떡같은 디자인 비율의 게시물이 단 몇 분 만에 대량 Output 폴더로 자동 양산되는 시점에 거의 다가섰습니다.🚀
