2026. 09. 03
반복되는 프로모션 제작 과정을
하나의 시스템으로 만들기까지
judy.v
carol.me

하나의 프로모션 뒤에 숨겨진 긴 과정들
BX디자인팀에서는 전사 서비스의 프로모션 디자인을 제작하고 있어요. 프로모션 하나를 고객에게 보여주기까지는
생각보다 많은 과정이 필요해요. 기획자는 프로모션의 목적과 내용을 기획서로 정리하고, 디자이너는 이를 바탕으로
페이지부터 다양한 채널의 배너를 제작해요. 완성된 디자인은 검수와 수정을 거쳐서, 각각의 이미지를 어드민에
등록하는 과정을 반복하고 있고요. 일반적인 제작 과정처럼 보이지만, 수많은 프로모션을 만들다보니 반복되는
문제들이 눈에 띄기 시작했어요.
1. 요청 방식도, 제작 기준도 제각각이었던 무법지대의 기획
기획서를 받았을 때 가장 난감한 상황이 어떤 걸까요? 우선 정해진 기획서 양식이 없다보니, 사람마다 사용하는 도구와 양식이 달랐어요. 주로 16:9 비율의 키노트에서 기획하다 보니, 실제 모바일 화면의 비율과 흐름과 맞지 않는 부분이
생길 수밖에 없었어요. 배너들도 제작 가이드가 모두 흩어져있어서 매번 확인하기 어려우니, 글자수가 가이드보다 넘치는 경우도 반복됐어요.






기획자마다 다양한 형태의 페이지 기획서
그러다 보니 실제 디자인하는 시간보다, “이 텍스트 모바일에선 너무 긴데 좀 더 축약해주실 수 있나요?”, “이 장표 아래 버튼은 어떤 화면으로 이동하나요?”하고 기획자와 미팅하며 소통하는 시간이 훨씬 더 길어지는 현상이 나타났어요.
그리고 작업자마다 스타일이 다르듯, 똑같은 프로모션 구조인데도 매번 버튼, 쿠폰, 리스트 등의 요소를 작업할 때마다
새로 디자인하고 있었어요. 프로모션 특성을 고려한 의도도 있었지만, 작업자별로 파일이 로컬 PC에 파편화되고
흩어져 있다보니, 유사 디자인을 모르고 새로 만든 경우도 있었어요. 결국 매번 프로모션을 제작할 때 마다, 겪는 문제
패턴이 동일했고 기획자와 디자이너가 모두 협업할 수 있는 방법으로 ‘프로모션 디자인 키트’를 만들기 시작했어요.
2. “피그마로 모이자!” 협업을 위해 제작한 프로모션 디자인 키트
페이지 빌더를 제작하기에 앞서 기존에 운영되었던 다양한 프로모션 페이지를 분석했어요.

기존 프로모션 페이지 분석
∙ 서비스 목적과 프로모션 유형에 따라 페이지를 Lv.1부터 Lv.4까지 분류했어요.
∙ 각 페이지에 사용된 섹션 수와 구성 패턴을 비교 분석했어요.
∙ 반복적으로 사용되는 레이아웃과 콘텐츠 구조를 추출했어요.
∙ 브랜드 인지도 강화, 서비스 소개, 혜택 전달 등 목적별 페이지 특성을 정의했어요.

섹션 리스트업
1
헤더
4
쿠폰
7
리스트
10
팝업지도
13
외부광고
16
공유하기
19
FAQ
2
안내영역
5
화면안내
8
표
11
영상영역
14
버튼
17
유의사항
20
푸터
3
캐러셀
6
그리드
9
그래프
12
제휴로고
15
탭리스트
18
출처표기
반복되는 섹션 리스트업
분석 결과를 바탕으로 반복적으로 사용되는 구성 요소를 총 20개의 공통 섹션으로 표준화했어요.
템플릿화 과정은 단순히 섹션의 레이아웃만 잡는 작업이 아니었어요. 카카오 T 브랜드 톤앤매너와 가시성, 가독성을
모두 지키기 위해 폰트 크기부터 행간, 자간, 버튼 곡률, 여백 단위 등 아주 사소한 디테일까지 함께 머리를 맞대고
고민하며 가이드를 깎아냈죠.
프로모션 페이지 공통 섹션 템플릿
이렇게 제작된 섹션들로, 기획자는 실제 모바일 화면 기준으로 필요한 섹션을 조합해 페이지 구조를 쌓을 수 있게 했어요. 기획자는 매번 키노트로 기획서를 그릴 필요 없고, 디자이너도 기획 의도와 구조를 바로 이해할 수 있어 일석이조였어요.

카카오 T 트럭커 첫 오더 운행 이벤트
첫 운행 완료하고 최대 6만원 추가 보상 받아가세요!
트럭 아이콘
+ 최대 6만원 말풍선
+폭죽
탑승중 배너 1종 요청
글자 수 가이드에 맞지 않는 배너 요청

파편화된 배너 제작 파일들
가이드에 맞지 않는 기획서와 파편화된 제작 파일들
배너 역시 가이드가 파편화되어 있는데다 업데이트도 잦아서, 매번 문서를 찾아 스펙을 확인해야 했어요. 글자 수
가이드를 지키지 않은 요청도 많고, 앱 화면 내 배너 목업 등 제작 파일도 작업자마다 모두 달라서 수작업이 엄청났죠.
프로모션 배너 가이드 및 템플릿
그래서 앱 내 배너부터 외부 제휴 배너, SNS, 광고까지 약 50종의 통합 가이드와 제작 템플릿도 만들었어요. 기획자는
배너 가이드를 한 곳에서 확인하고, 디자이너는 준비된 템플릿으로 더 빠르고 깔끔하게 디자인할 수 있게 됐어요.
3. 완벽한 키트를 만들었지만, ‘피그마’ 자체가 새로운 장벽이 되다
Before
기존 제작 단계
기획자
디자이너
공통
디자이너
기획자
1
Keynote로 기획서 작성
2
디자인 요청 및 문구 검수
3
프로모션 디자인 제작
4
디자인 마크업 png 추출 및 전달
5
디자인 검수 및 수정 반영
6
수정 반영 후 png 재추출
7
어드민 등록 및 배포
After
키트 도입 후 제작 단계
기획자
디자이너
공통
기획자
1
Figma 디자인 키트로 기획서 작성
2
프로모션 디자인 제작
3
디자인 검수 및 수정 반영 + png 추출
4
어드민 등록 및 배포
Before & After
요청과 제작, 검수가 하나의 도구(Figma) 안에서 이어지면 별도 파일을 만들고 전달하는 과정을 줄일 수 있어요.
저희는 7단계나 되던 복잡한 제작 과정을 4단계로 줄일 수 있을 거라고 예상했어요.
평균 제작 기간 감소
50
↓
기획서 - 디자인 수동 입력 시간
80
↓
프로모션 대응 가능 건수
150
↓
기대효과
흐뭇한 미소를 지으며 전사 배포 세션과 가이드 페이지까지 준비했지만, 새로운 문제가 발생했어요.
바로 Figma 사용 자체가 큰 장벽이 될 수 있다는 점이었어요.
Figma를 거의 써 본 적 없는 기획자 분들에겐 접근조차 힘든 툴이었던 거예요. 그 뿐만이 아니었어요.

피그마 권한 요청 아지트


교육세션을 위한 튜토리얼 자료
피그마 권한 요청 아지트와 피그마 교육 자료
지옥의 5일 권한 회수 정책
사내 피그마 권한은 보안과 비용 문제로 5일만 쓰지 않으면 자동으로 회수되는 엄격한 정책이 있었어요.
기획자분들이 다른 프로젝트를 하거나 휴가를 다녀와서 프로모션을 기획하려고 하면 권한이 끊겨 있어서,
1~5일씩 걸리는 승인 절차를 매번 다시 거쳐야 했던 거죠!
한정된 피그마 자리
전사 기획자분들에게 피그마 유료 계정을 다 쥐여주려면 추가 예산이 필요한데,
프로모션 기획만을 위해 운영 비용과 학습 부담을 요구하는 것이 적절한 지도 다시 생각해야 했어요.
끝이 없는 교육 세션의 굴레
만약 권한을 다 준다고 해도 진짜 문제는 그 다음이었어요. 피그마를 다뤄 본 적 없는 분들에게
피그마 기본 사용법부터 알려줘야 했거든요. 최소 1시간 이상 걸리는 교육 세션을 모든 기획자가 수강하고
이해할 때까지 반복해서 열어야 하는 리소스 부담은 온전히 디자인팀의 몫으로 돌아왔어요.
4. 피그마를 치우다: 기획자도 바로 쓰는 웹 기반 ‘프로모션 빌더’
저희는 다시 질문을 던졌어요.
”프로모션을 만들고 싶은 사람에게, 디자인 툴 사용법을 배우게 하는 게 정말 효율적인 방법일까?”
“기획자가 피그마를 전혀 못써도, 우리가 만든 키트를 사용하게 할 수는 없을까?”
문제점은 밤새 깎아 만든 디자인 키트의 ‘기준’이 아니었어요. 오히려 이런 기준이 있었기에 반복되는 프로모션을
일정한 품질로 만들 수 있었어요. 문제점은 바로 디자인 키트에 접근하는 툴이 문제였던 거죠. 저희는 피그마를 깔끔하게 포기했어요. 대신, 피그마 권한도 0원, 학습도 필요 없는 웹 기반의 ‘프로모션 빌더’를 직접 만들기로 결정했어요.
페이지빌더 → 배너빌더 → 마이페이지
디자인 키트가 프로모션 제작 기준을 정리한 시스템이라면, 프로모션 빌더는 그 기준을 더 쉽게 사용할 수 있게 만든
툴이에요. 기획자들은 컴포넌트나 오토레이아웃 등 어려운 피그마 구조를 이해하지 않아도 돼요. 단순히 빌더에서 필요한
섹션을 선택하고 콘텐츠를 입력하는 방식으로 간단하게 프로모션을 구성할 수 있도록 했어요.
프로모션 빌더는 페이지와 배너, 마이페이지 총 3개의 탭으로 구성했어요.
페이지 빌더
페이지 빌더는 빈 화면에서 자유롭게 만드는 방식이 아니라, 디자인 키트에서 정의한 공통 섹션을 선택하고 조합하는 방식으로 설계했어요. 기획자는 디자인 규칙을 고민하는 대신, 프로모션 목적과 콘텐츠에 집중할 수 있어요. 필요한 섹션을 선택하고 문구와 옵션만 입력하면, 실시간 미리보기를 통해 정보 구조와 문구 길이까지 실제 화면처럼 확인할 수 있어요.
배너 빌더
배너도 필요한 유형을 선택하고 문구를 입력하면 가이드와 실제 적용 화면을 바로 확인할 수 있어요.
또한 앱 개편에 따른 잦은 변경에 대응하기 위해 관리자 등록 시스템을 만들었어요.
디자이너가 코드를 수정하지 않아도 배너를 등록하고 수정할 수 있도록 구성했어요.
마이페이지
프로모션은 여러 번 수정되거나 반복 운영되는 경우가 많아요. 그래서 작업 내용을 저장하고 다시 불러올 수 있는
마이페이지를 만들었어요. 페이지와 배너 기획서를 함께 관리하고, 저장된 JSON 파일을 불러와 이어서 수정할 수
있어요. 이를 통해 이전 작업을 재활용하고, 반복되는 프로모션 업무를 더욱 효율적으로 관리할 수 있어요.
5. 디자이너 작업과의 연결: JSON으로 이어받는 끊김 없는 협업
빌더의 목적은 디자이너의 작업을 대체하는 것이 절대 아니에요.
기획 단계에서 구조와 콘텐츠를 깔끔하게 정돈하고, 그 결과물이 디자이너에게 자연스럽게 이어지게 하는 것이
핵심이에요. 그래서 기획서는 두 가지 방식으로 내보낼 수 있도록 설계했어요.

프로모션 페이지 빌더 기획서 내보내기
PNG 내보내기
결과물을 공유하거나 아지트(사내 협업 툴) 요청서에 정적 이미지로 첨부할 때 활용
JSON 다운로드
빌더에서 구성한 섹션과 콘텐츠 정보를 JSON으로 추출
페이지 빌더 플러그인 사용화면
디자이너가 플러그인을 실행해 JSON 파일을 Figma에 내용이 모두 입혀진 섹션의 Figma 인스턴스를 생성해요.
기획서를 보고 따로 싱크를 따로 맞출 필요 없이, 디자이너는 구조 재배치에 시간을 쓰지 않고 디자인 퀄리티를
올리는 작업에 집중할 수 있어요.
배너 빌더 플러그인 사용 화면
배너 기획서 JSON의 경우, 요청된 유형에 맞는 Figma 컴포넌트 기반 제작 템플릿을 생성되게끔 구성해서
매번 일일히 배너 소재와 목업 화면을 만들던 반복 작업을 소멸했어요.
전체 사용 플로우
1
프로모션 빌더로 페이지 및 배너 기획
2
아지트 업무 요청서에 기획서 파일 (JSON) 첨부
3
디자인 검수 및 수정 반영 + png 추출 진행
4
어드민 등록 및 배포
전체 사용 플로우
이 과정에서 가장 중요한 변화는 디자인이 자동으로 완성됐다는 것이 아니에요. 기획 단계부터 실제 고객 화면에 가까운
구조로 내용을 정리하고, 그 구조를 다시 만들지 않은 채 디자인 단계까지 이어갈 수 있게 됐다는 점이에요.
6. 비효율을 제어하고, 디자인 본연의 가치에 집중하는 환경으로
감소시킨 병목 요소 8가지
장표 기획서를 모바일 구조화하는 논의 공수
단순 문구 교체로 발생하는 수정 리소스
담당자 숙련도에 따른 디자인 품질 편차
기획서를 Figma로 옮겨 적는 반복 작업
피그마 권한 절차로 발생하던 리드타임 지연
기획자별 Figma 학습 및 계정 사용 비용
키트 배포 후 반복되는 툴 교육 리소스
레이아웃 깨짐 등 오류 대응 문의
감소시킨 8가지 병목 요소
돌이켜보면 프로모션 페이지 빌더는 디자인 키트와 별개의 프로젝트가 아니에요. 프로모션 디자인 키트가 처음 해결하려
했던 것은 ‘반복 제작‘이었어요. 하지만 키트를 조직 전체에 전파하는 과정에서는 ‘반복 교육과 문의 대응‘이라는
새로운 문제가 터져 나왔죠. 웹 페이지 빌더는 이 두가지 반복을 동시에 해결하기 위한 가장 명확한 선택이었어요.
기획자와 마케터
디자인 툴을 배우는 데 시간을 쓰지 않고, 프로모션의 메시지와 운영 본질에 집중할 수 있게 되었어요.
모바일 화면을 직접 눈으로 보며 기획하고, 저장해 두고 재활용하면서요.
디자이너
정리되지 않은 문서를 재해석하거나 피그마 교육 세션을 여는 대신, 구조화된 기획을 피그마 컴포넌트로 이어받아
더 매력적인 브랜드 경험을 설계하는 데 집중할 수 있게 되었어요.
수작업과 툴 교육에 들던 소모적인 시간을 줄여낸 지금, 기획자와 디자이너는 각자 본연의 업무에 더 깊이 몰입하고
있어요. 도구를 익히는 데 쓰이던 공수를 줄이고 일의 본질에 집중하게 만드는 것. 반복 제작과 반복 교육을 함께 줄여낸 이번 여정이 비슷한 고민을 하는 팀들에게 작은 힌트가 되었으면 해요.
누구보다 빠르게 기획서 만들어 보고 싶다면?
프로모션 디자인 빌더 바로 사용하러 가기



