웹 표준 기술로 제작하는 모바일/웹 광고

AGENDA

Adobe Flash

Adobe Flash 제작도구를 사용해 만든 광고 콘텐츠

Adobe Flash는 온라인 광고 콘텐츠 제작에 사용되는 도구입니다.
벡터 드로잉, 비트맵 이미지, 타임라인 기반 애니메이팅, 비디오, 오디오, 사용자와의 인터랙션을 위한
프로그래밍 등을 활용 할 수 있어 광고, 게임, 교육 콘텐츠 제작에 빈번하게 사용되었습니다.
(출처: 플래시 배너 전문 제작)

Flash 콘텐츠와 플러그인(설치형)

Flash 콘텐츠를 이용하려면 Flash Player 플러그인을 필수적으로 사용자 환경에 설치해야 합니다.
즉, Flash Player를 설치하지 않은 사용자는 콘텐츠 이용이 불가능합니다. (예: 카카오맵 > 로드맵 뷰)

웹 브라우저 ⇦ 플러그인 설치 그리고 사용자 경험(UX)

Adobe Flash Player 설치는 전 국민이 싫어하는 Active X와 동일한 문제를 야기합니다. (영상 출처: Facebook)

Adobe 2020년 Flash 지원 중단

Adobe 사는 2020년까지만 Adobe Flash Plaery를 지원하기로 공표했습니다.
2020년 이후 Flash 사용 시, 발생하는 모든 문제에 대한 책임을 지지 않습니다.

Windows 7 지원 중단

오래된 운영체제, 기술 사용 시 사용자의 안전, 보안을 위한 지원이 중단됩니다.
기획자, 디자이너, 개발자는 이 점을 고려하여 콘텐츠를 제작해야 합니다.

Adobe Flash, ActiveX와 같은 설치형 플러그인 기술에 의존하는 콘텐츠를
앞으로 제작해서는 안됩니다. 사용자, 제작자 모두가 이용 가능하고, 접근 가능한
Good Contents 제작에 힘써 주세요!

번거롭고 불편한 '설치'는 이제 그만!
웹 표준 기반으로 콘텐츠를 제작합시다.

Web Standards

HTML DOM (HTML / CSS / JavaScript)

HTML5 Canvas (2D 콘텐츠)

WebGL (3D 콘텐츠, 게임 등)

Adobe Flash를 대체하는
웹 표준 플랫폼 기술

HTML DOM 웹 표준 기술을

사용해 만든 광고 콘텐츠

HTML5 Canvas 웹 표준 기술을

사용해 만든 인터렉티브 광고 콘텐츠

Canvas를 사용하려면 웹 페이지 내에 <canvas> 태그를 사용하여 Canvas 요소를
웹 문서에 추가합니다. 그런 다음 JavaScript를 사용하여 캔버스에 Flash와 유사한
인터랙션 기능을 추가/설정할 수 있습니다.

하지만 Canvas를 사용해 그림을 그리고, 인터랙션을 설정하려면 JavaScript (ES6)
프로그래밍을 알아야 합니다. 일반적으로 광고, 모션, 그래픽을 제작하는 디자이너는
프로그래밍 전문가가 아니므로 이러한 제작 환경에 많은 제약을 느낍니다.

Adobe Animate

Adobe to Kill 'FLASH', but by Just Renaming it as 'Adobe Animate'

Animate는 기존 Flash 제작 도구의 타임라인, 작업 영역, 툴을
사용하여 콘텐츠를 만들고 HTML5 Canvas로 출력할 수 있습니다.
몇 번의 클릭으로 HTML5 Canvas 문서를 만들고 웹 및 모바일 환경
에서 완벽하게 재생 가능한 영상 제작 준비를 마칠 수 있습니다.

Canvas 문서에서 벡터 드로잉

Animate는 기본적으로 Flash와 동일한 제작 환경을 제공하므로
Canvas 문서라 하더라도 기본 2D 드로잉 방법은 동일합니다.

러프 스케치 한 이미지 데이터를 불러와 스케치를 토대로
2D 벡터 도형을 그려 그래픽을 제작할 수 있습니다.
(Adobe Illustrator, Flash 제작 경험과 동일)

Canvas 문서의 애니메이팅

Animate의 타임라인을 사용한 애니메이팅 제작자 경험 또한
Flash와 동일합니다. 클래식 트윈, 모션 트윈, 쉐입 트윈 등을
사용해 애니메이션을 제작할 수 있습니다.

Canvas 문서에서
비트맵 이미지 / 애니메이팅

벡터 드로잉 뿐만 아니라, 비트맵 이미지(예: JPG, PNG 등)를
불러와 문서에 추가하고, 애니메이팅 하는 방법 또한 Flash와
동일합니다.

어니언 스킨을 사용한
이전/다음 프레임 비교

Animate의 어니언 스킨(Onion Skin)을 사용해 이전, 다음
프레임을 비교해 현재 프레임에 있는 객체를 조정하여 애니메이팅
할 수 있습니다. 이 또한 기존 Flash에서 제공하는 경험과 동일합니다.

Canvas 문서에서
비디오 / 오디오 재생

Animate는 애니메이션 제작 문서에서 사용 가능한 기본 컴포넌트(Components)를 제공합니다. 제공되는 컴포넌트 중 비디오(Video) 컴포넌트를 사용하면 문서에 비디오 파일(예: MP4)을 추가 또는
링크 할 수 있습니다.

Animate 인터랙션 코드 설정

키프레임 별, 또는 인터랙션을 처리할 프레임을 선택해 액션(Actions) 패널을 열어 JavaScript 코드를 작성해
Animate로 제작한 광고, 모션(영상) 파일에 사용자와 상호작용 할 수 있는 기능을 추가할 수 있습니다.

뿐만 아니라 Animate에서 제공하는 코드 조각(Code Snippets)을 사용하면 코드 작성에 익숙하지 않은

사용자 또한 간단한 인터랙션 코드를 손쉽게 적용할 수 있습니다.

Canvas 문서의 인터랙션 설정

Animate는 CreateJS 라이브러리 오픈 소스를 사용하여 HTML5 콘텐츠를 제작합니다. CreateJS는 HTML5를 통해
웹 표준 플랫폼에서 풍부한 인터랙션 콘텐츠를 사용할 수 있도록 제공하는 모듈식 라이브러리 및 도구 모음입니다.

Animate 광고 제작물을
HTML5로 내보내기

Animate 스테이지에 작성된 애니메이션 콘텐츠를 HTML5로
출력하려면, File > Publish Settings 메뉴를 선택한 후,
출력 옵션을 적절하게 설정합니다.

Animate 학습

Adobe Animate 학습 및 지원 서비스(한글)를 통해
Animate 사용법을 학습할 수 있습니다.

AD Platform for Web/App

웹용 Google 광고 플랫폼

Google의 웹 사이트용 광고 플랫폼은 웹 표준인 HTML5 기반 광고 콘텐츠를 통해 웹 세상에 홍보할 수 있습니다.

앱용 광고 플랫폼

Facebook, Google의 모바일 앱용 광고 플랫폼으로 각 플랫폼에서 제공하는 기술로 제작된 웹 표준 콘텐츠를 통해 모바일 앱 세상에 홍보할 수 있습니다.

AdMob → HTML5 광고

Google의 AdMob에 HTML5 광고 콘텐츠를 업로드 하려면 Google Web Designer를 사용해 만든 HTML5 광고만 지원합니다.

Google Web Designer

앞서 살펴 본 Adobe Animate는 Adobe Flash를 대체하는 뛰어난
도구이지만, 매달 사용료로 일정 금액을 지불해야 하고, Canvas로 출력
되므로 접근성(Accessibility) 이슈를 가집니다.

비용 또는 접근성 문제로 Adobe Animate 사용을 고민 중이라면?

HTML DOM으로 출력해 비교적 접근성 이슈를 줄일 수 있고, 무료로
이용 가능한 Google Web Designer 도구 사용을 고려할 수 있습니다.

Google Web Designer

광고 콘텐츠 디자인

그래픽 소프트웨어(예: Photoshop)를 사용해 광고 콘텐츠 시안을 제작한 후, 이미지 리소스를 내보냅니다.

이미지 최적화

이미지 최적화는 광고 콘텐츠 표시 속도를 향상시켜 고객에게 보다 빨리 보여집니다. 

201KB

새 파일 만들기

Google Web Designer를 구동한 후, 새 파일 만들기 → 배너의 이름, 저장 위치, 환경, 크기, 반응형 설정,
애니메이션 모드 등을 설정하고 확인 버튼을 누릅니다.

타임라인 컨트롤 (애니메이팅)

Google Web Designer 프로젝트에 배경 이미지를 불러온 후, 타임라인 패널에 키프레임(F6)을 만들어 애니메이션을 적용합니다.
생성된 트윈 모션에서 마우스 오른쪽 버튼을 클릭하면 이징(Easing)을 제어할 수 있습니다.

시퀀스 애니메이션

Google Web Designer 프로젝트에 제품 이미지를 불러온 후, 타임라인 패널에 키프레임(F6)을 만들어 애니메이션을 적용합니다.
각 제품 마다 시간 차(Sequence)를 두어 모션 애니메이션을 설정합니다.

이미지 대체 텍스트 ⇒ 접근성 ✔︎

정보를 제공하는 텍스트 이미지는 대체 텍스트(alt)를 제공해 접근성을 보장해야 합니다.
대체 텍스트 항목에 이미지를 서술하는 적절한 대체 텍스트를 작성합니다. (이미지 버튼 컴포넌트의 경우 '이름' 설정)

모든 사용자를 위한 콘텐츠 제작

장애를 이유로 차별하는 행위는 인간으로서의 권리 보장을 저해하는 행위이며, 법으로도 금지되어 있습니다. ( 장애인차별금지법, 대한항공 접근성 개선 문서 )

이벤트 ⇒ 버튼 클릭 시, 페이지 변경

Google Web Designer의 이벤트 패널을 통해 이미지 버튼 컴포넌트를 사용자가 클릭 시,
페이지를 이동하는 연결을 설정할 수 있습니다. (코드 작업 X)

코드 보기 ⇒ 개발자와 Coworking

Google Web Designer 우측 상단의 메뉴바 > 코드 보기를 클릭하면, 개발자가 편집 가능한 코드를 볼 수 있습니다.
필요한 경우 개발자는 광고 콘텐츠 코드를 수정해 도구에서 부여할 수 없는 기능 및 콘텐츠를 설정할 수 있습니다.

미리보기 → 웹 브라우저 환경

Google Web Designer 우측 상단의 메뉴바 > 미리보기를 클릭하면, 웹 브라우저를 통해
제작한 광고 콘텐츠를 미리보기 할 수 있습니다. (다양한 웹 브라우저 테스트)

광고 검사기 → 광고 적합성 검수

Google Web Designer의 광고 검사기 패널은 제작된 광고 콘텐츠의 적합성을 판단하여
제작자에게 잘못된 부분을 수정할 수 있는 정보를 제공합니다.

게시 → 광고 콘텐츠 배포

Google Web Designer 우측 상단의 메뉴바 > 게시를 클릭하면, 광고 콘텐츠를
배포 가능한 파일로 내보냅니다. (로컬, Google 드라이브, Studio, Display & Video 360)

사전 광고 템플릿

Google Web Designer는 HTML5 기반으로 광고 또는
기타 웹 콘텐츠를 디자인하고 제작할 수 있는 도구입니다.

디자이너가 손쉽게 디자인을 하고, 타임라인 기반
애니메이팅, 이벤트 기반 프로그래밍을 작성할 수 있는
기능(사전 광고 템플릿, 컴포넌트 등)을 제공합니다.

템플릿을 사용해 패럴럭스 광고 콘텐츠 제작

'템플릿에서 새 파일 만들기' 화면에서 Parallax for Display & Video 360 템플릿을 선택하면
제공되는 사전 템플릿 4종을 확인할 수 있습니다. (Reveal, Particles, Lockup, Sliding Into Position)

제작 인터페이스

사전에 제작된 패럴럭스 스크롤링 광고 템플릿 작업 파일이 Google Web Designer 도구 화면에 표시됩니다.
제작 인터페이스는 Adobe Flash, Animate CC와 매우 유사합니다. 왼쪽에 툴바, 오른쪽에 텍스트, 속성, CSS,
인터랙션, 이벤트, 다이내믹, 아웃라이너 ,컴포넌트, 라이브러리 등을 사용할 수 있는 각 패널이 보이고, 아래는
애니메이션을 설정하는 타임라인이 표시됩니다.

아웃라이너 패널

아웃라이너(Outliner) 패널을 보면 page1에 사용된 parallax 컴포넌트와 CTA 이미지 레이어를 확인할 수 있습니다.
패럴럭스 스크롤링 조작은 parallax 컴포넌트에서 이루어집니다.

대체 텍스트 < 접근성 ✔︎

CTA 이미지 컴포넌트를 스테이지 화면에서 선택하면 속성 패널의 내용이
parallax 컴포넌트에서 이미지 컴포넌트로 변경됩니다. 사용된 이미지
컴포넌트는 대체 텍스트(alt)를 제공해 접근성을 보장해야 합니다.
대체 텍스트 항목에 이미지를 서술하는 적절한 대체 텍스트를 작성합니다.

패럴럭스 컴포넌트 편집 > 시작, 종료 레이아웃

패럴럭스 컴포넌트 편집은 스테이지 화면의 배너 영역을 마우스로 더블 클릭해 Parallax 편집 화면을 띄울 수 있습니다.
편집 인터페이스 오른쪽에는 레이어, 속성 패널이 표시되고, 왼쪽에는 편집 화면에 표시 됩니다.

패럴럭스 컴포넌트 편집 > 이미지 교체

광고 템플릿에서 제공되는 이미지 대신, 제작자가 만든 그래픽으로 대체하고 싶다면 객체를 선택한 후,
마우스 오른쪽 버튼을 눌러 ‘이미지 대체'를 선택합니다. 이미지를 새롭게 추가하려면 레이어 패널 하단의
+ 버튼을 눌러 추가할 이미지를 선택합니다.

패럴럭스 컴포넌트 편집 > 미리보기

제작한 광고가 어떻게 보일지 확인하려면 탭 메뉴에서 ‘미리보기'를
선택합니다. 웹 브라우저 시뮬레이션 화면이 표시되면 스크롤링 하여
광고 배너가 어떻게 움직여 보여지는지 살펴볼 수 있습니다.

코드 보기 및 편집

도구 오른쪽 상단 메뉴에서 ‘코드 보기’를 선택하면 코드 편집 화면이 표시됩니다.
필요한 경우 코드 편집 화면에서 직접 코드를 수정하거나, 추가할 수 있습니다.

예를 들어 스크린 리더 사용자에게 광고 콘텐츠 정보를 제공할 수 있도록 제품의
이름(Rosehip & Hibiscus Facial Caleanser)을 WAI-ARIA를 사용해
접근성을 개선할 수 있습니다.

광고 검사기

Google Web Designer는 광고 제작을 위한 도구인 만큼 제작한 광고가
적합한지 유무를 테스트 하는 기능을 제공합니다. 문제가 발생하면 경고
아이콘과 함께 오류 메시지를 표시합니다

웹에 게시

제작한 광고 배너를 웹에 게시(Publish) 하려면 도구 오른쪽 상단 메뉴에서 ‘게시' 버튼을 클릭합니다.
게시 방법은 ‘로컬', ‘Google 드라이브’, ‘Studio’, ‘Display & Video 360’ 중 하나를 선택할 수 있습니다.
사용자 컴퓨터에 게시 파일을 저장하려면 ‘로컬'을 선택합니다.

Google Web Designer 학습

Google Web Designer 도구 사용법은 고객센터(한글)를 통해 학습
할 수 있습니다. 콘텐츠를 만들고, 애니메이션 적용, 컴포넌트 사용,
이벤트 추가 및 광고 생성, 게시 방법 등을 공부할 수 있습니다.

Google Web Designer 학습

영상 강의 튜토리얼(한글 자막 제공)도 제공하고 있어 글보다 영상을
선호하는 분들도 손쉽게 Google Web Designer를 학습할 수 있습니다.

기본 사용법은 그래픽, 애니메이션 도구가 비슷하므로 Flash에 익숙한
사용자 또한 금새 익힐 수 있습니다.

Lottie & Bodymovin

Lottie 공식 문서

Lottie는 After Effects 애니메이션을 분석하여 JSON으로 데이터를 내보내며, 모바일 앱 / 웹 주요 플랫폼에서 애니메이션을 렌더링 하는 라이브러리입니다.

Lottie 애니메이션이 효과적인 이유 1

Lottie로 제작된 애니메이션(SVG)은 GIF, PNG 시퀀스 애니메이션 보다 월등한 퀄리티, 성능을 보여줍니다.

Lottie 애니메이션이 효과적인 이유 2

Lottie로 제작된 애니메이션은 비디오, 이미지 파일이 아니라 SVG 코드로 출력되므로 JavaScript를 사용해 사용자와 인터랙션 합니다.

Bodymovin 플러그인 설치 및 After Effects 워크 플로우

Bodymovin 플러그인 설치 부터 After Effects를 활용해 애니메이션을 만들고 내보내는 방법을 안내합니다.

벡터 파일 ⇒ 쉐입 레이어화

Ai, EPS, SVG, PDF 벡터 파일을 쉐입 레이어로 변환하지 않으면 Lottie 애니메이션에서 정상적으로 작동하지 않습니다.

Bodymovin 플러그인 실행

메뉴 Window > Extensions > Bodymovin 을 찾아 선택합니다.

Bodymovin 플러그인 설정

Bodymovin > Settings 항목을 클릭하면 설정 메뉴가 표시됩니다.

JSON 파일을 Bodymovin에서 재생 (웹)

Lottie JSON 파일을 Bodymovin을 사용해 웹 환경에서 재생하는 방법을 안내합니다.

lottiefiles.com 애니메이션 마켓 플레이스

Lottie를 사용해 제작된 애니메이션을 무료 또는 유료로 구매하여 사용할 수 있고, 온라인 에디터를 사용해 편리하게 수정할 수도 있습니다.

Lottie 온라인 에디터 소개

Lottie로 제작된 애니메이션을 손쉽게 수정하기 위한 온라인 에디터 사용법을 안내 합니다.

Conclusion

정리

Adobe Flash는 제작사인 Adobe에 의해 2020년 지원 중단 되며, Animate를
사용하면 Flash Player (플러그인) 없이도, 웹 브라우저에서 바로 표시되는 웹 표준
(HTML5 Canvas, WebGL 등) 플랫폼 방식으로 광고 및 교육 콘텐츠를 제작할 수
있습니다. 일부 기능을 제외하고 Flash에서 행하던 모든 것을 사용할 수 있고,
Flash와 동일한 제작 경험을 제공해 기존 Flash 제작자에게 생소하지 않습니다.

yamoo9@naver.com