지그재그 어텐션 광고 프로덕트 디자인
Design
Kim kwangkuk
Company & Position
Kakaostyle, Monetization Team Main Product Designer
Role
UX Flow Defination 100%
UI Design 100%
![](https://framerusercontent.com/images/zRZJFhSOg95jHJcyu72lYd0vxE.png)
Overview
지그재그에 입점한 파트너들은 지그재그 앱 내에서 자신들이 운영하는 다양한 페이지를 통해 유저와 만나고 있습니다. 파트너들은 종종 유저들에게 매력적인 혜택을 제공하는 기획전을 만들고 홍보하여 판매액을 늘리길 원했지만, 당시 지그재그에는 파트너들이 직접 트래픽을 유입시킬 수 있는 시스템이 존재하지 않았습니다. 이에 따라 광고팀에서는 파트너들이 원하는 특정 페이지에 더 많은 트래픽을 유입시킬 수 있는 광고 시스템을 구현하기로 하였습니다.
Problem
운영중인 페이지의 트래픽을 높히고 싶으나
마땅한 시스템이 없는 상황
![](https://framerusercontent.com/images/9flBtjgZb3y5fQvntFdLoCcK20.png)
Solution
광고주가 원하는 랜딩 페이지를
설정할 수 있는 배너 광고 시스템 구현.
![](https://framerusercontent.com/images/exdDhKp0sQBWwoW9Hqo5i4ddsM.png)
Key Scenario
광고주가 배너에 들어갈 이미지와 텍스트 그리고 랜딩 페이지를 설정하면 다양한 지면에 광고주의 배너가 노출됩니다. 앱 내에 광고가 노출되는 페이지 중에는 광고가 너무 강조되면 안되는 페이지도 존재하기 때문에 강조 타입, 비강조 타입이 모두 생성되도록 하였습니다.
Key Scenario
![](https://framerusercontent.com/images/zxP4l3WYbNjIP6xNjDvQPiPcZ4c.png)
광고 이미지, 텍스트,
랜딩 페이지 설정
![](https://framerusercontent.com/images/FAPLz8aDTU2WYRlCOdkrXlUjcg.png)
![](https://framerusercontent.com/images/WAd5LyaNVjLo8lmP7qzUni1aq2U.png)
이미지와 텍스트가 조합된
여러 타입의 광고 UI 생성
![](https://framerusercontent.com/images/FAPLz8aDTU2WYRlCOdkrXlUjcg.png)
![](https://framerusercontent.com/images/PLT5FcZPpIAvOjFxPH0ZHNrzUhQ.png)
앱 내 여러 광고 구좌에 노출,
클릭 시 랜딩 페이지로 이동
UX Flow & UI Design
플로우를 설계하기 위해 프로덕트 오너, 프론트엔드, 백엔드 엔지니어, 광고 오퍼레이터 등의 유관 부서 담당자분들과 매일 스크럼을 진행하며 작업 현황을 싱크하였습니다. 이 과정에서 기술적인 피드백과 운영 관점에서의 피드백을 반영하며 안정적으로 플로우를 완성할 수 있었습니다.
![](https://framerusercontent.com/images/CwKFrAdRQojchIbffefkqJxKmak.png)
Partner Center l UX Flow & UI Design
![](https://framerusercontent.com/images/X9EQnFulyg87gRI3wKS4bZNx4YQ.png)
APP l UI Design
지그재그 배너 광고
![](https://framerusercontent.com/images/MYWXR8gfb2Df1FF7FGRjvBtNs.png)
PartnerCenter l Main Flow
![](https://framerusercontent.com/images/qFwra4ufa8Du4muBagEfGkAj1s.png)
![](https://framerusercontent.com/images/sy4kxwJpeHU4kwIRqwzwhxiRRHg.png)
![](https://framerusercontent.com/images/7ea9XLNXmzjU4ugmD4SyuKIMM.png)
![](https://framerusercontent.com/images/YyOVnhkduTyVusyc3r2oo9bAY.png)
![](https://framerusercontent.com/images/udPLM8WjaD9tq3Q2lGFyEWxP5KU.png)
카테고리 페이지 최상단
![](https://framerusercontent.com/images/zLe3DtZYP8HJcL0Q4mr2FsMw2jE.png)
상품 리스트 중간
![](https://framerusercontent.com/images/0zvOZlhW9HobmiUQJcz7sP4QUDI.png)
상품 상세 페이지 중간
![](https://framerusercontent.com/images/PO9O1aQndsgCMyvHSI9L69Lg.png)
기획전
![](https://framerusercontent.com/images/H5sFjeLSxljsdmf9bGX43HEfA.png)
![](https://framerusercontent.com/images/dJkm6jgENtQrEzAew0V3LYoQWf0.png)
Project owner : Choi Product Designer : kimkk Backend Engineer : jun Frontend Engineer : Lake iOS Engineer : rosie AOS Engineer : son
Lunching : 2022.05 Working : 2022.01~2022.05 Maintanance : 2022.05~2022.12
Kakaostyle