디지털 마케팅 웹 기획

두번째 단추

웹기획 웹사이트 기획

“웹사이트를 구축하기 위해 전체적인 업무 방향을 설정하며 관리하는 일”

웹사이트 설계/제작과정을 관리

디지털 마케팅 웹기획

○목적성을 보다 분명하게 명시

○수립한 디지털 마케팅 전략을 수행하기 위해 필요한 웹사이트 플랫폼 을 기획

디지털 마케팅에서 웹사이트의 의미

아이디어의 실체화

소비자들에게 전달되는

○ 아이디어

○ 추상적 개념적

○ 문서

○ 상품/서비스

○ 플랫폼/사이트

디지털 마케팅 커뮤니케이션 기획 → 전략 기획 디지털 마케팅 웹기획 → 생산 기획

웹 사이트 플랫폼 기획

디지털 마케팅 커뮤케이션에 대한 지식

“웹 제작에 필요한 전문적 지식”

쓸만한 웹기획자가 되기 위해 경험이 필요한 시간

년

강의 주제

웹 사이트 제작 생산 과정에 대한 이해

○생산 기획을 하기 위해 생산과정에 대한 이해가 필수 조건

○생산과정 전반을 이해해야 웹기획 능력 방향을 위해 필요한 지식들을 파악

마케팅 계획 수립

“웹기획에 들어가기 전에 일어나는 일들”

○ Announce Spark’s success in global

○ Utilize BTL activity as contents

(eg. Global Spark driver camp)

디지털 커뮤니케이션 전략 수립

○ 2,30대에게 글로벌은 아주가까운 이야기이나 동경/추종의 대상이 아니다.

○ 기존 10년간 전세계의 스파크 팬을 SNS을 통해 연결할 수 있는 기회를 제공하자.

제작해야 할 플랫폼 웹서비스에 대한

웹기획의 출발점

“기획의도에 대해 충분한 이해도를 가지고 있는 캠페인 기획자가 웹기획을 담당”

○웹사이트 제작 운영을 위해 필요한 요소의 전반을 기획

▪ 프로그램 정책 수립 프로세스 참여조건 보상 방법 등

▪ 화면 설계 등

▪ 평가 측정 기준 수립 본 마케팅 프로그램의 성과 측정 방법 기준

[화면 설계서] [프로세스 구성도]

웹 기획 단계

○ 프로그램 정책 수립

○ 화면 설계

○ 평가 측정 기준 수립

요구되는 지식

○디지털 마케팅 커뮤니케이션에 대한 이해도

○웹 개발에 대한 지식

○웹 디자인 에 대한 이해

○ 에 대한 이해도

의 지식

○화면 설계도를 기준으로 디자인 들을 활용하여 사용자에게 실제로 보여지는 이미지로제작하는 단계

○원칙적으로는 화면 설계도 페이지만큼 제작된 이미지 페이지 개수도 동일

디자인 제작단계

○이미지 영상 플래쉬 파일로 제작된 디자인 산출물을 웹 브라우저를 통해 볼 수 있도록 변환시키는 작업 단계

○사용되는 주 언어가 임에 따라 코딩 이라고도 부름

웹 코딩 단계

이미지 영상 플래쉬 에 적합한 구조

○코딩 의 사전적 의미

▪ 자료 처리를 자동화하기 위해 일정한 규칙에 따라 품목별로 대상번호 또는 문자를 부여하는 것

▪ 즉 기계가 알 수 있는 언어를 일정한 명령문에 따라 문자 또는 숫자를 사용해 기호화하는 것을 말한다

웹 코딩 단계

○웹코딩 단계의 활용 언어

▪ 웹브라우저가 인식하는 대표 언어※ 문서의 글자크기 글자색 글자모양 그래픽 문서이동 하이퍼링크 등을 정의하는 명령어

※ 에서 사용하는 명령어는 태그 라고 하는데 꺽쇠괄호 를 사용하여 나타낸다

에서 부족한 기능을 보완하는 언어

▪※ 을 이용해서 웹 페이지를 제작할 경우 세세한 글꼴 하나 하나를 일일이 지정해주어야 하지만 웹 페이지의 스타일 작성형식 을

미리 저장해 두면 웹 페이지의 한 가지 요소만 변경해도 관련되는 전체 페이지의 내용이 한꺼번에 변경되므로 문서 전체의 일관성을유지할 수 있고 작업 시간도 단축된다

※ 글자의 크기 글자체 줄간격 배경 색상 배열위치 등을 자유롭게 선택하거나 변경할 수 있으며 유지 보수도 간편하게 할 수 있다

▪ 계열※ 정적인 언어를 보완하기 위해 개발된 언어

※ 스크립트는 문서 속에 직접 기술하며 라는 태그를 사용한다

웹 코딩 단계

○사용자 브라우저 화면

○브라우저에서 보여주기 위한 언어화

○ 로 제작된 개별 파일들이 서버와 연동될 수 있도록 개발

○웹코딩된 페이지를 기반으로 서버가 이해하는 언어들을 추가하는 작업

Client / 웹사이트 사용자 서버 / HTML파일들이 저장

데이터/자료 요청

개발 단계 개발코딩

개발 단계 개발코딩

프로그래머 개발자 들이 코딩이라고 이야기 하는 단계

○웹 개발 언어 서버 프로그래밍 언어

▪ 웹서버 서버로 구분되어 사용되는 개발 언어가 각기 다름

▪ 웹서버• 페이지 이미지 영상 파일 등을 저장 → 사용자 요청에 따라 해당 파일을 브라우저를 통해 전송하는 서버

• 서버 에 따라 개발하는 언어가 다름

• 계열

• 계열

• 리눅스 계열

▪ 서버• 데이터 베이스로 저장하고 있다가 결과값을 보여주거나 로 저장해야 하는 요청 등을 처리하는 서버

• 구조화 질의어

개발 단계 개발코딩

서버에 해당 검색어의 검색 결과를 요청

요청하는 언어가

로그인 요청 시 입력되는 결과에 따라

적합한 페이지 전송

페이지의 확장자로 서버 환경을 추정

대신 보완 홍보의 이슈로 자사명 임의의 확장자로도 표현 가능

개발 언어는 크게 가지로 구분

○ 브라우저 사용자와 소통하기 위한 언어

○

○

○ 계열

○ 서버와 소통하기 위한 언어

○

○

○

○모든 단계의 개발이 완료된 페이지들이 서버에서 정상적으로 작동되는지를 확인

○최종 수정 검수 단계를 거쳐 실제 운영되는 서버에 적용시기는 것

버그테스트 라이브

디자인

클라이언트 에 적합하게 구성

서버에서 동작될 수 있도록 개발

테스트 라이브

웹사이트 제작 프로세스

디지털 광고 대행사에서웹기획자들이 가장 힘들어 하는 부분

사용되는 웹언어의 극히 일부분

업그레이드

한계 해소

케냐어 산스크리트어 수준

웹기획자들이 가장 어려워 하는 소통

제작 상 문제가 생겨도 문제파악이 쉽지 않은 이유

위로

○웹사이트 제작은 각 분야별 전문가들과의 협업작업

○디지털 마케팅 분야는 접하게 되는 의사결정권자들이대부분

그 나라 국민은 정치 의식 수준만큼의 대통령을 갖는다유시민

디지털 광고 웹 기획자의 기획력의 한계

웹 사용 개발 환경에 대한 지식 수준

에 대한 높은 연비효율성을 전달하기 위해 진행한 캠페인

라는 웹 환경에 대한 이해가 없다면

절대 나올 수 없는 기획

디지털 광고 웹 기획자의 기획력은 본인의 지식수준에 비례한다

과제 추천 도서

과제

○약어일 경우 까지 같이 암기

○인터넷 검색 등을 활용하여 충분히 본인의 지식화 한 후 자 이내로 요약

○

○

○

○

○

○

○

○

○

○

아래 용어들을 자 이내로 정리 암기

추천도서