PR Creator - 컴포넌트 트리 기반 PR 페이지 자동 생성 시스템 제작기

🔹 프로젝트 개요

메가공무원·넥스트스터디 계열의 프로모션 페이지는

매월 수십 건 단위로 제작되며,

“슬라이드형”, “탭형”, “팝업형”, “테이블형” 등 반복되는 패턴이 많았습니다.

퍼블리싱팀 입장에서는 매번 동일한 구조를 새로 작성하는 대신,

기존 컴포넌트를 재활용해 빠르게 조합하는 시스템이 필요했죠.

그래서 기존 /nc/components 구조를 그대로 활용하면서,

컴포넌트 트리 기반으로 조합 가능한 PR Creator를 만들었습니다.

---

🔹 핵심 구조: cdata.json + pr_creator

프로젝트의 시작점은 nc 컴포넌트 데이터(cdata.json) 입니다.

모든 컴포넌트(버튼, 테이블, 슬라이드, 팝업 등)는

이 JSON 트리에 정의되어 있으며,

PR Creator는 이를 기반으로 컴포넌트 리스트를 자동 렌더링합니다.

/* =========================================================
   컴포넌트 트리 로딩/렌더링
========================================================= */
$.ajax({
  url: "/nc/cdata.json",
  dataType: "json",
  cache: false
}).done(function (data) {
  $("#cmpListWrap").html(`
    <div class="cmp-wrapper">
      <p class="cmp-tit">컴포넌트 재료</p>
      ${buildList(data, 0, "")}
    </div>
  `);
});

이렇게 로딩된 트리는

버튼 클릭 → 미리보기 호출 → 드래그앤드롭 삽입까지

전체 워크플로우를 자동화합니다.

---

🔹 백엔드: 기존 ASP 자산 재활용

서버 측은 preview.asp를 통해

/nc/components/{type}/{file}.asp 파일을 찾아 렌더링합니다.

If id <> "component" Or Not IsAllowedType(typ) Then
  Response.Status = "400 Bad Request"
  Response.Write "<!-- invalid params -->"
  Response.End
End If

Dim basePath : basePath = "/nc/components/"
...
Server.Execute foundPath

즉, 기존 퍼블리셔들이 관리하던 컴포넌트 폴더를 그대로 재사용하되,

q 파라미터를 통해 하위 컴포넌트를 선택적으로 로드하는 구조입니다.

이 방식 덕분에

👉 새로운 빌드 환경 도입 없이

👉 기존 자산의 수정 없이

즉시 자동화 시스템을 구축할 수 있었습니다.

---

🔹 프론트엔드 기능 요약

기능	설명
🔹 컴포넌트 트리	cdata.json 기반 계층형 UI, 토글/확장 기능
🔹 프리뷰 레이어	/nc/pr_creator/preview.asp 호출 후 실시간 렌더링
🔹 드래그앤드롭 삽입	섹션(.prCon1~N) 안으로 컴포넌트 이동/복제
🔹 스타일 편집 모드	각 컴포넌트별 반응형 스타일 직접 추가 및 미리보기
🔹 코드 추출 미리보기	작성된 HTML을 포매팅 + 하이라이팅 + 복사 버튼 제공

---

🔹 시각적 구성 (UI 스타일링)

퍼블리셔들이 가장 많이 사용하는 인터랙션인

드래그, 드롭, 리사이즈, 뷰포트 변경 등을 전면 지원합니다.

pr_style.css는 모든 요소에 시각적 피드백을 주도록 설계했습니다.

.evSection .inner.drop-hover {
  border:2px dashed #3b82f6 !important;
  background:rgba(59,130,246,0.05);
  transition:all .2s ease;
}
.ui-draggable-dragging {
  border:1px solid #3b82f6 !important;
}

또한 .cmp-item-wrapper와 .cmp-layer 구조를 분리해

우측에는 컴포넌트 선택 패널,

좌측에는 프리뷰 레이어(실행 결과) 를 배치했습니다.

결과적으로 퍼블리셔는

“섹션 추가 → 컴포넌트 클릭 → 드래그앤드롭 → 코드 추출”

이라는 4단계로 PR 페이지를 완성할 수 있습니다.

---

🔹 UI 인터랙션

1. 직관성
   • 컴포넌트명과 실제 시각 결과가 일치하도록 data-cmp 오버레이 적용
   • 그룹형(_group) 요소는 보라색 라벨로 구분
2. 안정성
   • 중복된 팝업 ID 자동 필터링
   • 스타일 적용 시 UID 기반 규칙 관리 (.pruid-xxxx)
3. 확장성
   • 반응형 스타일(@media)까지 자동 추출
   • 향후 React 버전 전환 시 동일 구조로 이식 가능

---

🔹 도입 효과 요약

항목	개선 전	개선 후
PR 페이지 제작시간	약 3시간	25분
QA 수정 빈도	8~10회	1~2회
코드 중복률	65%	10% 이하
유지보수성	낮음	높음 (JSON + ID 기반)
팀 협업 효율	개인 중심	팀 단위 병렬 작업 가능

---

🔹 PR Creator 제작자로서의 관점

PR Creator는 단순한 자동화 도구가 아닙니다.

퍼블리셔의 사고방식을 “코드 작성자”에서 “컴포넌트 설계자”로 바꾸는 계기였습니다.

우리는 이 시스템을 통해

• 반복 업무를 자동화하고,
• 디자인 자산을 컴포넌트 단위로 표준화하며,
• 새 인원이 들어와도 동일한 결과물을 빠르게 낼 수 있게 만들었습니다.

즉, “사람의 숙련도” 대신 “시스템의 일관성”으로 퀄리티를 보장하는 구조로 전환했습니다.

---

🔹 앞으로의 방향

• Firebase 기반 버전(데이터 동기화 및 히스토리 관리)
• “내 템플릿 저장” 및 “PR 자동 배포” 기능 추가 예정

---

💬 마무리

PR Creator는 단순히 ‘빠르게 만드는 툴’이 아니라, ‘퍼블리싱의 구조화된 자산화’를 위한 시스템입니다.

이 프로젝트는 퍼블리셔 중심의 개발 문화 속에서도

얼마든지 효율적인 자동화를 실현할 수 있음을 보여준 사례입니다.

“코드를 덜 치는 것이 아니라,

잘 설계된 코드 위에서 더 많은 결과를 만들어내는 것.”

- 메가공 퍼블리싱팀