Digital Maketers
Futures League

웹 광고 콘텐츠 제작 도구와
웹 표준 / 접근성 이슈

youtube.com/c/야무

야무9

Adobe Flash

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

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

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

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

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

Adobe Flash Player 설치는 전 국민이 싫어하는 Active X와 동일한 문제를 야기합니다.
(웹툰 출처: 구형 웹 브라우저 업그레이드 대국민 캠페인 2019)

Adobe 2020년 Flash 지원 중단

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

Windows 7 지원 중단

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

Flash out!

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

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

Web Standard Platform

HTML DOM (HTML / CSS / JavaScript)

HTML5 Canvas (2D 콘텐츠)

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

Web Assembly (C, C ++, RUST 등 컴파일)

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

// 캔버스, 렌더링 객체
const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')

// 캐릭터 위치 설정
let charX = 245
let charY = 185

// 렌더링 함수
function render() {

  let x = charX
  let y = charY

  canvas.width = canvas.width
                      
  ctx.drawImage(images["leftArm"], x + 40, y - 42)
  ctx.drawImage(images["legs"], x, y)
  ctx.drawImage(images["torso"], x, y - 50)
  ctx.drawImage(images["rightArm"], x - 15, y - 42)
  ctx.drawImage(images["head"], x - 10, y - 125)
  ctx.drawImage(images["hair"], x - 37, y - 138)
}

// 캐릭터 그리기
render()

광고 콘텐츠 제작에 사용되는
웹 표준 플랫폼 기술은 HTML DOM 또는
HTML5 Canvas 입니다.

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

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

Adobe Animate CC

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

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

Canvas 문서에서 벡터 드로잉

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

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

Canvas 문서에서 애니메이팅

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

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

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

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

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

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

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

포함 또는 링크 된 비디오는 HTML5 Canvas를 지원하는
웹 표준 플랫폼 위에서 재생됩니다.

비디오 뿐만 아니라 오디오 파일(예: MP3) 또한 문서에 불러와
포함시킬 수 있습니다.

Canvas 문서에 인터랙션 설정

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

Animate cc의 인터랙션 코드 설정

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

뿐만 아니라 Animate CC 제공하는 코드 조각(Code Snippets)을 사용하면 코드 작성에 익숙하지 않은 사용자 또한 간단한 인터랙션 코드를 손쉽게 적용할 수 있습니다.

Animate CC 문서를 HTML5로 출력

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

프리 로딩(Preloader) 이미지를 추가하거나, 콘텐츠 정렬 및 에셋 리소스 이름 및 경로 등을 설정할 수 있습니다.

출력된 결과물은 Animate CC 제작 파일(*.fla)이 저장된 위치에 생성
됩니다. 출력된 파일 구성을 살펴보면 HTML, JavaScript, 이미지,
컴포넌트, 비디오, 사운드 파일이 출력된 것을 볼 수 있습니다.

Animate CC 학습

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

한글 자막을 제공하는 영상 강의도 함께 제공되므로 Animate CC를
처음 공부하는 사용자도 손쉽게 도구 사용법을 익힐 수 있습니다.

AD Platform for Web/App

웹용 Google 광고 플랫폼

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

앱용 광고 플랫폼

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

AdMob → HTML5 광고

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

Google Web Designer

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

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

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

Google Web Designer

광고 콘텐츠 디자인

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

이미지 최적화

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

201KB

65.836KB

새 파일 만들기

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)

Parallax Reveal 템플릿 레이아웃을 사용해
패럴럭스 스크롤링 광고를 만들어 봅니다. 광고
‘이름'을 작성한 후 ‘새로 만들기'를 누릅니다.

제작 인터페이스

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

아웃라이너 패널

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

속성 패널

속성 패널을 보면 요소를 구분하는 ID, 위치 및 크기, 변환, 회전 및
배율, 시차(Parallax) 항목을 살펴보거나, 내용을 편집할 수 있습니다.

대체 텍스트 < 접근성 ✔︎

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

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

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

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

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

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

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

코드 보기 및 편집

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

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

광고 검사기

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

파일 크기가 너무 큰 것이 문제가 되므로 새롭게 추가한 이미지 파일 크기
(547.7KB)를 최적화 하여 줄여야 합니다. TinyPNG 서비스를 이용하여
이미지 파일 크기를 줄입니다. (136.0KB)

웹에 게시

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

로컬 컴퓨터에 게시된 데이터 파일을 살펴보면 HTML 파일과 이미지 파일로 구성됩니다.

zip 압축 파일은 앞서 설정 화면에서 Zip 파일 만들기 항목이 체크되었기 때문에 생성된 것입니다.

Google Web Designer 학습

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

Google Web Designer 학습

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

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

Conclusion

정리

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

Animate CC 외에도 광고 콘텐츠 제작에 최적화된 제작 환경을 제공하는 Google
Web Designer를 사용해 콘텐츠를 제작하는 것 또한 가능합니다. 2D/3D, Parallax,
RWD, Expandable Banner 등 다양한 기능을 제공하며, 무료로 사용할 수 있고,
학습 또한 손쉬워 Flash를 충분히 대체할 수 있습니다.

Google Web Designer는 Animate CC와 달리 HTML DOM으로 게시 되기 때문에
HTML, CSS, JavaScript를 직접 수정해 콘텐츠를 편집할 수 있습니다. 예를 들어
접근성 개선이 요구되는 광고 콘텐츠의 경우 제작 도구에서 기능이 제공되지 않더
라도 직접 수정해 접근성을 부여할 수 있습니다.

Thanks!