CokePLAY App 2.0 오픈 시점에 홈, 이벤트, 푸시 등 주요 접점에서 반복 노출될 캠페인 배너와 앱 UI 기준을 설계했습니다. 캠페인 메시지, CTA, 리걸라인, 인디케이터가 화면 유형에 따라 일관되게 작동하는 운영형 UX/UI 시스템을 구축했습니다.

01

UX Case Study · 2024

CokePLAY
Design System

CokePLAY App 2.0 오픈에 맞춰 배너 가이드라인과 앱 컴포넌트 기준을 하나의 운영 시스템으로 정리했습니다. 캠페인 소재가 반복 교체되는 환경에서도 메시지 위계, CTA, 리걸라인, 화면별 안전 영역이 흔들리지 않도록 설계했습니다.

Banner GuidelineApp ComponentBrand SystemQA Rule

Core Task

캠페인 제작자가 매번 새로 판단하지 않아도 되는 반복 가능한 화면 규칙과 검수 기준 수립.

02

Project Overview

오픈 이후 운영까지 견디는 앱 가이드 체계

단발성 시안 제작이 아니라, 앱 오픈 이후 홈·이벤트·푸시·상세 랜딩에서 반복 사용될 기준을 설계했습니다. 배너 유형과 UI 컴포넌트를 분리해 각 접점에서 필요한 정보량과 행동 기준을 명확히 정의했습니다.

RoleUX Designer · Brand System

ClientCoca-Cola Korea

PlatformiOS · Android

ScopeBanner Guideline + App Component System

Year2024.02

Challenge

캠페인마다 달라지는 화면 기준

메인 KV, 홈 스와이프, 이벤트 리스트, 푸시 메시지가 서로 다른 목적을 갖고 있지만 카피 위계와 CTA 위치, 고지 영역의 기준이 분산되어 운영 편차가 발생할 수 있었습니다.

Goal

브랜드 일관성을 유지하는 운영형 시스템

배너 노출 위치별 역할을 분리하고, 색상·타입·버튼·그리드·안전 영역을 공통 규칙으로 정리해 빠르게 제작해도 동일한 품질로 노출될 수 있는 구조를 만들었습니다.

03

Banner Guideline

노출 위치에 따라 배너가 수행해야 할 역할을 재정의

실제 배너 이미지는 노출하지 않고, 가이드에서 관리한 정보 구조와 검수 포인트가 드러나도록 추상화했습니다. 각 배너는 노출 위치와 사용자 행동 목적에 따라 다른 우선순위를 갖도록 정리했습니다.

01 · Main KV

캠페인 인지를 만드는 첫 화면

키비주얼, 메인 카피, CTA, 리걸라인을 한 화면 안에서 충돌 없이 배치.

1메인 카피 최대 줄 수와 CTA 고정 위치를 분리

2인디케이터와 리걸라인 간섭 방지

02 · Home Swipe

여러 캠페인을 비교하는 탐색 영역

스와이프되는 카드 간 정보량을 맞추고, 짧은 노출 시간 안에 핵심 혜택이 읽히도록 설계.

1카피 길이와 버튼 노출 기준 통일

2다중 배너 상태에서도 CTA 가독성 유지

03 · Event List

목록에서 빠르게 식별되는 이벤트 카드

리스트 화면에서는 임팩트보다 제목, 기간, 참여 조건이 먼저 읽히는 구조로 정리.

1썸네일 영역과 텍스트 영역의 비율 고정

2제목·기간·상태값 우선순위 명확화

04 · Push Message

랜딩 후 정보 확인을 돕는 메시지 구조

푸시 유입 사용자가 랜딩 화면에서 메시지 맥락을 바로 확인하도록 보조 카피 기준을 정리.

1수신 안내와 랜딩 메시지의 연결성 유지

2필수 고지 누락 방지를 위한 체크 항목 정의

04

App Design System

브랜드 가이드를 앱 운영 기준으로 변환

CokePLAY의 컬러와 타이포그래피, 버튼, 그리드는 단순한 스타일 목록이 아니라 캠페인 화면을 빠르게 확장하기 위한 제작 기준으로 정리했습니다.

Color Token

Main Red#F40009

Black#111111

Gray 01#F7F7F7

Gray 03#CCCCCC

Typography System · Pretendard

H1 KR캠페인 메시지가 먼저 읽히는 굵기와 행간20 / 28

Body상세 안내와 조건을 담는 본문 체계14 / 20

ENCokePLAY label and button text16 / 16

Button · CTA

Primary CTA캠페인 참여, 구매 이동 등 주요 행동에만 적용

Secondary CTA상세 보기, 조건 확인처럼 보조 탐색에 사용

Disabled조건 미충족 상태를 명확히 구분

Legal LineCTA와 분리해 필수 고지 가독성 확보

Grid Evidence

05

Banner Rule

Component State

QA Governance

제작 전 판단 가능한 검수 기준

Legal

필수 고지 영역을 화면 요소와 분리

로고, 리걸라인, 수신 안내가 비주얼이나 인디케이터와 겹치지 않도록 안전 영역을 정의.

CTA

행동 목적별 버튼 사용 기준 정리

참여, 구매, 상세 보기 등 행동 강도에 따라 버튼 타입과 위치를 분리.

Copy

배너 유형별 카피 길이와 줄바꿈 관리

문구가 길어져도 메시지 위계와 버튼 가독성이 유지되도록 최대 줄 수와 영역을 제한.

State

오픈 이후 운영자가 반복 적용할 수 있는 상태값

이벤트, 혜택, 종료, 비활성 등 상태별 화면 표현을 컴포넌트 기준으로 정리.

06

Reflection

Rules that anchor brand consistency

배너 가이드라인은 단순한 스펙 문서가 아니라 운영팀과 제작자가 같은 기준으로 판단하게 만드는 장치입니다. 화면 유형별 정보 우선순위와 컴포넌트 규칙을 정리해, 빠르게 교체되는 캠페인에서도 브랜드 경험의 일관성을 유지했습니다.

Output

Main KV, Home Swipe, Event List, Push Message 기준 정리

캠페인 배너가 노출되는 주요 접점별로 카피, 버튼, 고지, 인디케이터 기준을 문서화했습니다.

System

컬러·타입·버튼·그리드를 앱 화면 운영 기준으로 연결

브랜드 가이드가 화면 단위에서 어떻게 쓰이는지 명확히 하여 제작 속도와 검수 품질을 함께 관리했습니다.

삼성전자 MX 및 GMO 사업부 AI Task Force를 이끌며, 소속 크리에이티브 조직을 대상으로 AI 실무 교육을 총괄했습니다. 교육과 병행하여 아이데이션부터 이미지·영상 제작, 편집, 검수까지 이어지는 AI 워크플로우를 설계하고 실제 프로젝트에 적용해 제작 효율과 결과물 완성도를 동시에 끌어올렸습니다.

AI 툴만으로 극장 상영이 가능한 단편 애니메이션을 완성할 수 있는지를 검증한 프로젝트입니다. 스토리보드부터 컷 제작까지 전 과정을 AI 기반 워크플로우로 진행하여, 3개 국제 영화제에서 수상하며 AI 영상 제작의 완성도를 객관적으로 입증했습니다.

청년·자영업자·금융취약계층이 멈춰 있던 일상에서 작은 연결을 통해 다시 앞으로 나아가는 과정을 담은 AI 브랜드 뮤직비디오입니다. 신한을 문제를 대신 해결하는 존재가 아니라, 스스로 내딛는 한 걸음을 조용히 이어주는 브랜드로 설계했습니다.

연락처와 사진처럼 중요한 데이터를 빠짐없이 옮기는 Smart Switch의 역할을, 소중한 것을 볼주머니에 모아 이동하는 햄스터의 습성으로 재해석한 AI 소셜 필름입니다.

삼성증권 mPOP을 어렵고 무거운 투자 앱이 아니라 일상에서 친근하게 시작할 수 있는 서비스로 인식시키기 위해, 반려머니 캐릭터 ‘쭈식이’를 중심으로 캠페인 세계관과 제안 영상을 설계했습니다.

GMC ACADIA 경쟁 PT에서 차량의 강렬한 존재감과 프리미엄 기술, 도심과 오프로드를 넘나드는 퍼포먼스를 하나의 럭셔리 라이프스타일 서사로 설계했습니다.

아이가 직접 그린 친구 ‘핑고’와의 우정에서 출발해, AI Companion 제품들이 그 마음을 이해하고 지켜주며 또 하나의 가족으로 이어지는 이야기를 설계했습니다. AI Living을 기술의 편리함이 아닌 Openness의 가치로 재해석한 브랜드 필름입니다.

패션, 주얼리, 제품, 스포츠, 판타지 등 여러 주제로 AI 영상을 제작한 R&D 작업입니다. 금속과 유리의 반사, 피부와 패브릭의 질감, 인물의 움직임처럼 장면을 구성하는 요소를 달리하며 표현을 시도했습니다. 일상적인 광고 장면부터 현실에서 촬영하기 어려운 크리처와 액션까지 작업 범위를 넓히고, 그 결과를 하나의 쇼릴로 정리했습니다.

Texture & Light

소재의 질감과 조명 표현

메탈릭 캐릭터, 꽃과 물방울, 패브릭과 주얼리처럼 표면의 특징이 다른 소재를 다뤘습니다. 금속과 보석은 빛의 반사와 하이라이트를, 꽃과 피부는 색과 세부 질감을 중심으로 표현했습니다. 차가운 청록색 정원과 따뜻한 빛이 비치는 클로즈업, 명암 대비가 큰 주얼리 컷을 나란히 구성해 소재와 조명에 따라 달라지는 분위기를 보여줍니다.

METAL & PERFORMANCE

GARDEN & ATMOSPHERE

JEWELRY & TEXTURE

Scale & Motion

인물의 움직임과 공간감

퍼포먼스, 달리기, 자전거와 수중 장면부터 기사와 크리처가 등장하는 판타지까지 여러 종류의 움직임을 영상으로 만들었습니다. 인물이나 사물에 가까이 다가간 컷에서는 동작과 표면을, 넓은 배경 컷에서는 인물과 공간의 관계를 보여주었습니다. 같은 주제 안에서도 전경과 클로즈업을 섞어, 장면의 크기와 시점에 따라 달라지는 인상을 살펴봤습니다.

FANTASY & CINEMA

SPORT & OUTDOOR

Visual Language

주제에 따른 화면 스타일

제품과 공간을 정돈된 구도로 보여주는 광고 장면, 강한 색과 조명을 사용한 스트리트 패션, 자연광과 필름 질감을 살린 일상 장면을 제작했습니다. 사실적인 실사 표현뿐 아니라 일러스트 스타일도 시도했습니다. 하나의 화면 톤으로 통일하기보다 각 주제에 맞는 색감과 구도, 질감을 달리해 여러 제작 방향을 비교해볼 수 있도록 구성했습니다.

PRODUCT & SPACE

STREET & STYLE

EVERYDAY & FILM LOOK

서로 충돌하는 기억과 증언을 따라 그날의 진실을 추적하는 8분 40초 분량의 AI 미스터리 단편 애니메이션입니다. 스토리보드부터 이미지 생성, 모션, 편집까지 전 과정을 AI 기반 워크플로우로 진행했습니다.

엔씨소프트, 카카오게임즈, 넥슨 등 대형 게임사의 런칭·프로모션 캠페인 제작을 총괄했습니다. 각 IP의 세계관과 유저가 기대하는 핵심 판타지를 하나의 강한 장면으로 압축하고, 티저부터 론칭까지 단계별 크리에이티브 전략과 비주얼 톤을 설계했습니다.