34
두두두 두두 MASTER CLASS. 두두두 두두두 두두

디지털마케팅 웹 기술

  • Upload
    -

  • View
    556

  • Download
    3

Embed Size (px)

Citation preview

Page 1: 디지털마케팅 웹 기술

두번째 단추 MASTER CLASS.

디지털 마케팅 기술

Page 2: 디지털마케팅 웹 기술

디지털 마케팅 기술

디지털 광고에 쓰이는 기술용어 및 기획자가 알아야 할 기초

Page 3: 디지털마케팅 웹 기술

WebSite 만들어 질때 필요한것 ?

- Webserver- Browser- Database

Page 4: 디지털마케팅 웹 기술

Webserver? 웹페이지 (HTML) 를 제공해 주는 서버

WINDOWS Linux

IIS APACHE,TOMCAT

Page 5: 디지털마케팅 웹 기술

Browser?

인터넷에서 웹서버의 모든 정보를 볼 수 있게 해줄 뿐 아니라 , 하이퍼텍스트 문서 검색을 도와주는 응용 프로그램이다 . 

Internet Explorer Crome

FirefoxSafari

Page 6: 디지털마케팅 웹 기술

Database Management System?

데이터베이스 (Database) 는 여러 응용 시스템들의 통합된 정보들을 저장하여 운영하는 공용 데이터들의 묶음 !

MSSQL MYSQL ORACLE

Page 7: 디지털마케팅 웹 기술

Web Language

-HTML-CSS-ASP-ASP.NET-PHP-JSP

Page 8: 디지털마케팅 웹 기술

HTML(Hypertext Markup Language)

HTML 은 웹브라우저 상에 정보를 표시하기 위한 마크업 심볼 또는 집어 넣어진 코드들의 집합이다 .

Page 9: 디지털마케팅 웹 기술

CSS(cascading style sheets)웹문서의 전반적인 스타일을 지정 하는 언어

스타일 시트의 기능 - 글자의 크기 조절 - 자간과 행간 설정 - 특정 텍스트에 배경 설정 - 하이퍼텍스트 링크의 스타일 지정- 문단의 여백과 테두리- 시간 소모가 적음

Page 10: 디지털마케팅 웹 기술

ASP(Active Server Page)

- 서버측 스트립트 언어 , VBScript 기반

- IIS 3.0 이상에서 동작

- 동적인 페이지를 구성하기 위해 사용

- 클라이언트가 ASP 를 요청하면 ASP 를 수행시킨 결과값을 응답

- ASP 코드 자체는 클라이언트에게 제공되지 않음

Page 11: 디지털마케팅 웹 기술

ASP.NET(C#, VBScript)

- MicroSoft 사의 닷넷 시스템 상에서 동작하는 서버측 스크립트- VBSCRIPT 에서 벗어나 객체지향적인 코드를 지원- ASP 의 단점을 보완- VISUALBASIC, C#, C++ 등이 이용됨 - 디자인과 코드가 분리된 형태로 제작 가능- JSP 에서 사용하는 MVC 패턴과 유사

Page 12: 디지털마케팅 웹 기술

PHP

- 현재 공식적으로 Professional Hypertext Preprocessor 의 약자- Apache 와 주로 연동하여 사용하는 서버측 스크립트 언어- 오픈소스로 제공됨 , 무료- Apache + PHP + MYSQL => 모두 오픈 소스여서 연동하여 자주 쓰임- HTML 처리 , 문서처리 , 정규표현식에 효율적인

Page 13: 디지털마케팅 웹 기술

JSP(JAVA Server Pages)

- 웹 페이지 개발에 자바기술을 사용할수 있는 스크립트 언어- HTML, XML 등 웹 서비스와 관련된 문서를 생성하는데 주로 사용- 서블릿 /EJB 기술과 잘 어울림- 대형사이트에서 ORACLE DB 와 주로 사용됨- JSP 파일을 클라이언트가 호출하면 서블릿 코드로 변환후 컴파일 하여 서블릿 클래스 형태로 보관- JSP 엔진 (TOMCAT, Resin, Jrun)

Page 14: 디지털마케팅 웹 기술

인코딩

-euc-kr-UTF-8

Page 15: 디지털마케팅 웹 기술

UTF-8

- 각종 텍스트 파일의 유니코드 ( 다국어 ) 인코딩입니다 .

- .txt 파일이나 .html 파일을 UTF-8 로 인코딩하면 , 한 페이지에 전세계의 문자를 모두 표현- 일반 유니코드에는 Null 문자가 들어가기 때문에 , 인터넷 문서 즉 HTML 작성에 적합하지 않습니다 .- 인터넷에 올릴 .html 파일 등을 유니코드로 작성할 때에는 UTF-8 인코딩이어야 합니다 .

- 한국어로 작성된 문서를 UTF-8 로 인코딩하면 파일의 용량이 약간 늘어나는 단점이 있습니다 . - 국내에는 아직 UTF-8 인코딩이 많이 쓰이지 않고 대부분 euc-kr 인코딩입니다 .

Page 16: 디지털마케팅 웹 기술

euc-kr

- ' 한글 ' 과 ' 한국에서 통용되는 한자 ' 그리고 ' 영문 ' 을 표현할 수 있습니다 .

- 일본식 한자 / 중국어의 간체자 등은 표현할 수 없습니다 . 또한 프랑스어의 악상이나 독일어의 움라우트 등도 표현할 수 없습니다 .

- HTML 문서의 경우 euc-kr 로도 , 외국 문자를 정확히 표현하는 방법이 있습니다 .

Page 17: 디지털마케팅 웹 기술

데이터 처리 방식

-Get-Post

Page 18: 디지털마케팅 웹 기술

데이터 처리 방식 - 페이지에서 페이지로 정보를 전송하는 방식

Page 19: 디지털마케팅 웹 기술

GET

모든 파라미터는 URL 을 통해서 전달된다 . 사용자의 눈에 직접적으로 표시되기 때문에 로그인 , 비밀번호등의 정보를 GET 으로 전달하면 문제가 발생할수 있다 .URL 의 길이 제한이 있기 때문에 , 많은 양의 데이터는 전달할수 없다 .

Page 20: 디지털마케팅 웹 기술

POST

전달 하는 정보가 HTTP BODY 에 포함되어 전달된다 .HTTP BODY 에 포함되므로 , 웹브라우저 사용자 눈에 직접적으로 보이지 않는다 .BODY 애 포함되어 전달되므로 , 길이에 제한이 없다 ..

Page 21: 디지털마케팅 웹 기술

GET 과 POST 비교

  GET POST

특징

데이터는 URL 뒤에 추가되어 전달 URL 과 별도로 전송

입력값 들이 많지 않은 경우나 공개적으로 URL 넘겨도 무방한 경우에 사용

HTTP 헤더 뒤에 입력 스트림데이터 전달 

장점 - 간단한 데이터를 빠르게 처리 가능GET 보다 많은 데이터를 전송

최소한의 보안 유지의 효과가 있다 .

단점데이터양의 제한이 있다 . 같은 데이터 양이면 GET 보다 처리

속도가 빠르다 .URL 은 4096 바이트로 제한된다

Page 22: 디지털마케팅 웹 기술

쿠키 & 세션

Page 23: 디지털마케팅 웹 기술

쿠키

- 쿠키는 웹서버에서 웹 브라우저를 통해 접속자의 브라우저에 저장하는 정보 - 사용자의 접속한 페이지 , IP 주소 , 등의 정보를 기록

- 웹서버에서 쿠키를 생성시에 , 이름과 값을 웹브라우저에 전달하고 , 그 정보를 웹서버에서 읽어서 사용

- 브라우저에 저장되기때문에 다음에 다시 접속하여도 로그인 유지

- 브라우저에 저장되기 때문에 변조 가능성 존재

Page 24: 디지털마케팅 웹 기술

세션

- 브라우저에 저장되는 쿠키의 단점 떄문에 필요하다 . - 브라우저가 요청하여 처음 접속시 클라이언트 ID 생성 이것을 세션이라고 한다 .

- 세션은 쿠키와 다른게 서버에 저장

-쿠키와 큰 차이는 쿠키는 사용자의 브라우저에 저장되기 때문에 변조 가능성이 있으나 , 세션은 서버에 저장되므로 변조 가능성 없다 .

Page 25: 디지털마케팅 웹 기술

세션 & 쿠키의 차이점

구분 쿠키 세션

저장위치 클라이언트 서버

저장형식 텍스트형식 Object 형

종료시점 쿠키 저장시 설정( 설정 하지 않을 경우 브라우저 종료시 소멸 )

정확한 시점을 알 수 없음

자원 클라이언트의 자원 사용 서버의 자원 사용

용량제한 한 도메인당 20 개 / 쿠키 하나당 4KB / 총 300 개

서버가 허용하는 한 용량 제한 없음

Page 27: 디지털마케팅 웹 기술

스토리보드개발자의 관점의 스토리보드의 핵심은

경우의 수

사용자의 관점

Page 28: 디지털마케팅 웹 기술

스토리 보드

사이트 개발시 개발자가 그리는 그림

이벤트 응모 클릭

로그인 상태 로그아웃 상태

로그인

이벤트 응모 완료

Page 29: 디지털마케팅 웹 기술

원데이 아큐브 디파인 을 착용하고 계신가요 ? 예 아니요

이름

성별 남 여

이메일주소

주민등록번호

집전화번호 * 지역번호 포함

핸드폰번호 ex) 01012345678

실명인증

집주소 우편번호 찾기

직업

이메일 수신 동의를 하시겠습니까 ? 예 아니요

BSC 지원하기 페이지

* 위 정보는 뷰티시크릿클럽 응모 및 멤버 발표 이후 연락 외에 다른 용도로 사용되지 않으나 ,이메일 정보는 아큐브 마케팅 활동에 활용 될 수 있습니다 .

Page 30: 디지털마케팅 웹 기술

원데이 아큐브 디파인 을 착용하고 계신가요 ? 예 아니요

이름

성별 남 여

이메일주소

주민등록번호

집전화번호 * 지역번호 포함

핸드폰번호 ex) 01012345678

실명인증

집주소 우편번호 찾기

직업

이메일 수신 동의를 하시겠습니까 ? 예 아니요

BSC 지원하기 페이지

* 위 정보는 뷰티시크릿클럽 응모 및 멤버 발표 이후 연락 외에 다른 용도로 사용되지 않으나 ,이메일 정보는 아큐브 마케팅 활동에 활용 될 수 있습니다 .

- 필수 항목

모든 항목

미 입력 항목 발생시 alert 메시지 출력 “ 이름이 입력 되지 않았습니다 .”

1. 우편 번호 찾기 클릭시- 우편번호 찾기 팝업

2. 실명 인증 입력시- 실명인증완료시alert 메시지 출력 “ 실명 인증이 완료 되었습니다 .”

- 실명인증실패시alert 메시지 출력 “ 실명 인증이 실패 되었습니다 .”

1

2

Page 31: 디지털마케팅 웹 기술

구현 가능 여부

생각하는것과 실제 구현의 차이

Page 32: 디지털마케팅 웹 기술

웹사이트 트래킹

온라인에서는 사용자의 움직임을 모두 파악 할수 있다 .

Page 33: 디지털마케팅 웹 기술

트래킹의 종류

- 페이지 트래킹- 버튼 트래킹- 사이트 체류시간- 종료한 페이지- 미디어별 , 유입수- 미디어별 , 전환수 , 전환률

Page 34: 디지털마케팅 웹 기술

트래킹 솔루션의 종류

- Google Analytics- Abobe OMNITURE