SlideShare a Scribd company logo
1 of 45
Download to read offline
두번째 단추

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




       웹사이트 설계/제작과정을 관리
디지털 마케팅 웹기획
○ 목적성을 보다 분명하게 명시

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


     아이디어의 실체화
소비자들에게 전달되는
                  ○ 상품/서비스

  ○ 아이디어
  ○ 추상적 개념적
  ○ 문서
                  ○ 플랫폼/사이트
디지털 마케팅 커뮤니케이션 기획 → 전략 기획


디지털 마케팅 웹기획       → 생산 기획
웹 사이트 플랫폼 기획


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


 “웹 제작에 필요한 전문적 지식”
년
쓸만한 웹기획자가 되기 위해 경험이 필요한 시간
강의 주제

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

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

○ 생산과정 전반을 이해해야 웹기획 능력 방향을 위해 필요한 지식들을 파악
“웹기획에 들어가기 전에 일어나는 일들”




       마케팅 계획 수립                       디지털 커뮤니케이션 전략 수립
○ Announce Spark’s success in global   ○ 2,30대에게 글로벌은 아주가까운 이야기이나
○ Utilize BTL activity as contents       동경/추종의 대상이 아니다.
  (eg. Global Spark driver camp)       ○ 기존 10년간 전세계의 스파크 팬을 SNS을
                                         통해 연결할 수 있는 기회를 제공하자.
제작해야 할 플랫폼 웹서비스에 대한



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

○ 웹사이트 제작 운영을 위해 필요한 요소의 전반을 기획
  ▪ 프로그램 정책 수립 프로세스 참여조건 보상 방법 등
  ▪ 화면 설계            등
  ▪ 평가 측정 기준 수립 본 마케팅 프로그램의 성과 측정 방법 기준




                            [화면 설계서]      [프로세스 구성도]
○ 프로그램 정책 수립
○ 화면 설계
○ 평가 측정 기준 수립




요구되는 지식
○ 디지털 마케팅 커뮤니케이션에 대한 이해도
○ 웹 개발에 대한 지식
○ 웹 디자인   에 대한 이해
○             에 대한 이해도

                 의 지식
디자인 제작단계

○ 화면 설계도를 기준으로 디자인  들을 활용하여 사용자에게 실제로 보여지는 이미지로
  제작하는 단계
○ 원칙적으로는 화면 설계도 페이지만큼 제작된 이미지 페이지 개수도 동일
웹 코딩 단계

○ 이미지 영상 플래쉬 파일로 제작된 디자인 산출물을 웹 브라우저를 통해 볼 수 있도록 변환
  시키는 작업 단계
○ 사용되는 주 언어가   임에 따라     코딩 이라고도 부름




                     이미지 영상 플래쉬              에 적합한 구조
웹 코딩 단계

○ 코딩     의 사전적 의미
 ▪ 자료 처리를 자동화하기 위해 일정한 규칙에 따라 품목별로 대상번호 또는 문자를 부여하는 것
 ▪ 즉 기계가 알 수 있는 언어를 일정한 명령문에 따라 문자 또는 숫자를 사용해 기호화하는 것을 말한다
웹 코딩 단계

○ 웹코딩 단계의 활용 언어
 ▪                             웹브라우저가 인식하는 대표 언어
     ※ 문서의 글자크기 글자색 글자모양 그래픽 문서이동 하이퍼링크 등을 정의하는 명령어
     ※    에서 사용하는 명령어는 태그  라고 하는데 꺽쇠괄호  를 사용하여 나타낸다


         에서 부족한 기능을 보완하는 언어
 ▪
     ※    을 이용해서 웹 페이지를 제작할 경우 세세한 글꼴 하나 하나를 일일이 지정해주어야 하지만 웹 페이지의 스타일 작성형식 을
       미리 저장해 두면 웹 페이지의 한 가지 요소만 변경해도 관련되는 전체 페이지의 내용이 한꺼번에 변경되므로 문서 전체의 일관성을
       유지할 수 있고 작업 시간도 단축된다
     ※ 글자의 크기 글자체 줄간격 배경 색상 배열위치 등을 자유롭게 선택하거나 변경할 수 있으며 유지 보수도 간편하게 할 수 있다


 ▪        계열
     ※ 정적인   언어를 보완하기 위해 개발된 언어
     ※ 스크립트는   문서 속에 직접 기술하며      라는 태그를 사용한다
○ 사용자 브라우저 화면
○ 브라우저에서 보여주기 위한 언어화
개발 단계 개발코딩

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

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


                            데이터/자료 요청




    서버 / HTML파일들이 저장             Client / 웹사이트 사용자
개발 단계 개발코딩




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

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

 ▪ 웹서버
     • 페이지 이미지 영상 파일 등을 저장 → 사용자 요청에 따라 해당 파일을 브라우저를 통해 전송하는 서버
     • 서버 에 따라 개발하는 언어가 다름
     •                     계열
     •                  계열
     •                        리눅스 계열


 ▪     서버
     • 데이터 베이스로 저장하고 있다가 결과값을 보여주거나   로 저장해야 하는 요청 등을 처리하는 서버
     •                  구조화 질의어
서버에 해당 검색어의 검색 결과를 요청
요청하는 언어가




                         로그인 요청 시 입력되는 결과에 따라
                         적합한 페이지 전송
페이지의 확장자로 서버 환경을 추정
대신 보완 홍보의 이슈로 자사명 임의의 확장자로도 표현 가능
개발 언어는 크게 가지로 구분




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

○                        ○
○                        ○
○    계열                  ○
버그테스트 라이브

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

○ 최종 수정 검수 단계를 거쳐 실제 운영되는 서버에 적용시기는 것
웹사이트 제작 프로세스

         디자인


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


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



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



         사용되는 웹언어의 극히 일부분
업그레이드




 한계 해소
케냐어 산스크리트어 수준
    웹기획자들이 가장 어려워 하는 소통
제작 상 문제가 생겨도 문제파악이 쉽지 않은 이유
위로

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

○ 디지털 마케팅 분야는 접하게 되는 의사결정권자들이
  대부분
그 나라 국민은 정치 의식 수준만큼의 대통령을 갖는다
             유시민
디지털 광고 웹 기획자의 기획력의 한계


 웹 사용 개발 환경에 대한 지식 수준
에 대한 높은 연비효율성을 전달하기 위해 진행한 캠페인
라는 웹 환경에 대한 이해가 없다면
       절대 나올 수 없는 기획


디지털 광고 웹 기획자의 기획력은 본인의 지식수준에 비례한다
과제 추천 도서
과제         아래 용어들을     자 이내로 정리 암기

○ 약어일 경우      까지 같이 암기
○ 인터넷 검색 등을 활용하여 충분히 본인의 지식화 한 후   자 이내로 요약

○
○
○
○
○
○
○
○
○
○
추천도서

More Related Content

What's hot

U&i insight2012스터디설명회
U&i insight2012스터디설명회U&i insight2012스터디설명회
U&i insight2012스터디설명회Amy Young Ah Kim
 
웹사이트 벤치마킹의2
웹사이트 벤치마킹의2웹사이트 벤치마킹의2
웹사이트 벤치마킹의2juhyun
 
프로젝트실무와 기획의 역할
프로젝트실무와 기획의 역할프로젝트실무와 기획의 역할
프로젝트실무와 기획의 역할Amy Young Ah Kim
 
Website Benchmarking3
Website Benchmarking3Website Benchmarking3
Website Benchmarking3junhozzang
 
디비딥 컨설팅 제안서
디비딥 컨설팅 제안서디비딥 컨설팅 제안서
디비딥 컨설팅 제안서Hooney Jo
 
3주차 ppt용
3주차 ppt용3주차 ppt용
3주차 ppt용승원 서
 

What's hot (6)

U&i insight2012스터디설명회
U&i insight2012스터디설명회U&i insight2012스터디설명회
U&i insight2012스터디설명회
 
웹사이트 벤치마킹의2
웹사이트 벤치마킹의2웹사이트 벤치마킹의2
웹사이트 벤치마킹의2
 
프로젝트실무와 기획의 역할
프로젝트실무와 기획의 역할프로젝트실무와 기획의 역할
프로젝트실무와 기획의 역할
 
Website Benchmarking3
Website Benchmarking3Website Benchmarking3
Website Benchmarking3
 
디비딥 컨설팅 제안서
디비딥 컨설팅 제안서디비딥 컨설팅 제안서
디비딥 컨설팅 제안서
 
3주차 ppt용
3주차 ppt용3주차 ppt용
3주차 ppt용
 

Viewers also liked

웹 콘텐츠 기획
웹 콘텐츠 기획웹 콘텐츠 기획
웹 콘텐츠 기획필호 이
 
웹 서비스 기획
웹 서비스 기획웹 서비스 기획
웹 서비스 기획필호 이
 
홈페이지 기획d
홈페이지 기획d홈페이지 기획d
홈페이지 기획dgueste23fe90
 
Hci 2012 퍼소나활용-블로깅
Hci 2012 퍼소나활용-블로깅Hci 2012 퍼소나활용-블로깅
Hci 2012 퍼소나활용-블로깅성진 전
 
웹기획
웹기획웹기획
웹기획semi06
 
웹 기획, 사용자를 배려하는 합리적인 생각
웹 기획, 사용자를 배려하는 합리적인 생각웹 기획, 사용자를 배려하는 합리적인 생각
웹 기획, 사용자를 배려하는 합리적인 생각sid choi
 
Hash the wood 기업 교육 프로그램
Hash the wood 기업 교육 프로그램Hash the wood 기업 교육 프로그램
Hash the wood 기업 교육 프로그램Anthony Oh
 
[교육리뷰] 스토리텔링을 통한 모바일 서비스 시나리오 작성 110321
[교육리뷰] 스토리텔링을 통한 모바일 서비스 시나리오 작성 110321[교육리뷰] 스토리텔링을 통한 모바일 서비스 시나리오 작성 110321
[교육리뷰] 스토리텔링을 통한 모바일 서비스 시나리오 작성 110321Kyungeun Kim
 
페르소나를 이용하여 기획하기
페르소나를 이용하여 기획하기페르소나를 이용하여 기획하기
페르소나를 이용하여 기획하기Jong Hwan Nam
 
사례로 본 모바일 웹/앱 기획, 제작 과정 및 포인트
사례로 본 모바일 웹/앱 기획, 제작 과정 및 포인트사례로 본 모바일 웹/앱 기획, 제작 과정 및 포인트
사례로 본 모바일 웹/앱 기획, 제작 과정 및 포인트mosaicnet
 
웹기획 V090528
웹기획 V090528웹기획 V090528
웹기획 V090528oros83
 
Meteor로 만드는 modern web application
Meteor로 만드는 modern web applicationMeteor로 만드는 modern web application
Meteor로 만드는 modern web applicationJaeho Lee
 
Ass 10.10 ideo hcd h
Ass 10.10 ideo hcd hAss 10.10 ideo hcd h
Ass 10.10 ideo hcd hYoung Choi
 
디미컨_엄정민
디미컨_엄정민디미컨_엄정민
디미컨_엄정민Jungmin Um
 
지하철이 살아있다.
지하철이 살아있다.지하철이 살아있다.
지하철이 살아있다.zerozerosum
 
제안요청서 [Ver.0.5 2012.04.08]
제안요청서 [Ver.0.5 2012.04.08]제안요청서 [Ver.0.5 2012.04.08]
제안요청서 [Ver.0.5 2012.04.08]albatros9
 
웹기획 Story 3 검색
웹기획   Story 3 검색웹기획   Story 3 검색
웹기획 Story 3 검색ahnsunggon
 

Viewers also liked (20)

웹 콘텐츠 기획
웹 콘텐츠 기획웹 콘텐츠 기획
웹 콘텐츠 기획
 
웹 서비스 기획
웹 서비스 기획웹 서비스 기획
웹 서비스 기획
 
홈페이지 기획d
홈페이지 기획d홈페이지 기획d
홈페이지 기획d
 
Hci 2012 퍼소나활용-블로깅
Hci 2012 퍼소나활용-블로깅Hci 2012 퍼소나활용-블로깅
Hci 2012 퍼소나활용-블로깅
 
웹기획
웹기획웹기획
웹기획
 
웹 기획, 사용자를 배려하는 합리적인 생각
웹 기획, 사용자를 배려하는 합리적인 생각웹 기획, 사용자를 배려하는 합리적인 생각
웹 기획, 사용자를 배려하는 합리적인 생각
 
Hash the wood 기업 교육 프로그램
Hash the wood 기업 교육 프로그램Hash the wood 기업 교육 프로그램
Hash the wood 기업 교육 프로그램
 
웹 기획
웹 기획웹 기획
웹 기획
 
[교육리뷰] 스토리텔링을 통한 모바일 서비스 시나리오 작성 110321
[교육리뷰] 스토리텔링을 통한 모바일 서비스 시나리오 작성 110321[교육리뷰] 스토리텔링을 통한 모바일 서비스 시나리오 작성 110321
[교육리뷰] 스토리텔링을 통한 모바일 서비스 시나리오 작성 110321
 
페르소나를 이용하여 기획하기
페르소나를 이용하여 기획하기페르소나를 이용하여 기획하기
페르소나를 이용하여 기획하기
 
사례로 본 모바일 웹/앱 기획, 제작 과정 및 포인트
사례로 본 모바일 웹/앱 기획, 제작 과정 및 포인트사례로 본 모바일 웹/앱 기획, 제작 과정 및 포인트
사례로 본 모바일 웹/앱 기획, 제작 과정 및 포인트
 
데코이미지
데코이미지데코이미지
데코이미지
 
웹기획 V090528
웹기획 V090528웹기획 V090528
웹기획 V090528
 
Meteor로 만드는 modern web application
Meteor로 만드는 modern web applicationMeteor로 만드는 modern web application
Meteor로 만드는 modern web application
 
Ass 10.10 ideo hcd h
Ass 10.10 ideo hcd hAss 10.10 ideo hcd h
Ass 10.10 ideo hcd h
 
디미컨_엄정민
디미컨_엄정민디미컨_엄정민
디미컨_엄정민
 
지하철이 살아있다.
지하철이 살아있다.지하철이 살아있다.
지하철이 살아있다.
 
제안요청서 [Ver.0.5 2012.04.08]
제안요청서 [Ver.0.5 2012.04.08]제안요청서 [Ver.0.5 2012.04.08]
제안요청서 [Ver.0.5 2012.04.08]
 
교바사
교바사교바사
교바사
 
웹기획 Story 3 검색
웹기획   Story 3 검색웹기획   Story 3 검색
웹기획 Story 3 검색
 

Similar to 두번째단추 디지털마케팅 웹기획

[141]지난 1년간의 웨일 브라우저와 그 미래 (부제: 제품 매니저가 들려주는 생생한 기술/제품 이야기)
[141]지난 1년간의 웨일 브라우저와 그 미래 (부제: 제품 매니저가 들려주는 생생한 기술/제품 이야기)[141]지난 1년간의 웨일 브라우저와 그 미래 (부제: 제품 매니저가 들려주는 생생한 기술/제품 이야기)
[141]지난 1년간의 웨일 브라우저와 그 미래 (부제: 제품 매니저가 들려주는 생생한 기술/제품 이야기)NAVER D2
 
[20140624]소개자료
[20140624]소개자료[20140624]소개자료
[20140624]소개자료유석 남
 
my activities before getting a job
my activities before getting a jobmy activities before getting a job
my activities before getting a jobDeo Kim
 
어플리케이션 및 웹 개발
어플리케이션 및 웹 개발어플리케이션 및 웹 개발
어플리케이션 및 웹 개발Leonardo Taehwan Kim
 
세계에서 통하는 소프트웨어 만들기
세계에서 통하는 소프트웨어 만들기 세계에서 통하는 소프트웨어 만들기
세계에서 통하는 소프트웨어 만들기 Mira Park
 
1.openseminar
1.openseminar1.openseminar
1.openseminarNAVER D2
 
해외에서도 통하는 소프트웨어 만들기
해외에서도 통하는 소프트웨어 만들기해외에서도 통하는 소프트웨어 만들기
해외에서도 통하는 소프트웨어 만들기Mira Park
 
HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망
HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망
HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망Sang Seok Lim
 
한 번에 개발하는 안드로이드&iOS 앱 with 앱메소드
한 번에 개발하는 안드로이드&iOS 앱 with 앱메소드한 번에 개발하는 안드로이드&iOS 앱 with 앱메소드
한 번에 개발하는 안드로이드&iOS 앱 with 앱메소드Devgear
 
클라우드 IDE, 구름 프로젝트 | Devon 2012
클라우드 IDE, 구름 프로젝트 | Devon 2012클라우드 IDE, 구름 프로젝트 | Devon 2012
클라우드 IDE, 구름 프로젝트 | Devon 2012Daum DNA
 
아세아시멘트홈페이지제작제안.ppt
아세아시멘트홈페이지제작제안.ppt아세아시멘트홈페이지제작제안.ppt
아세아시멘트홈페이지제작제안.pptDongHyunLee180578
 
예비 개발자를 위한 웹서비스 개발 방법론 특강 - 폴리텍대학교 강서캠퍼스
예비 개발자를 위한 웹서비스 개발 방법론 특강 - 폴리텍대학교 강서캠퍼스예비 개발자를 위한 웹서비스 개발 방법론 특강 - 폴리텍대학교 강서캠퍼스
예비 개발자를 위한 웹서비스 개발 방법론 특강 - 폴리텍대학교 강서캠퍼스시은 김
 
NAVER의 웹/HTML5환경 대응 현황
NAVER의 웹/HTML5환경 대응 현황NAVER의 웹/HTML5환경 대응 현황
NAVER의 웹/HTML5환경 대응 현황NAVER Engineering
 
2 10 사업모델검증 계획서 이종인
2 10 사업모델검증 계획서 이종인2 10 사업모델검증 계획서 이종인
2 10 사업모델검증 계획서 이종인상봉 변
 
차정민 (소프트웨어 엔지니어) 이력서 + 경력기술서
차정민 (소프트웨어 엔지니어) 이력서 + 경력기술서차정민 (소프트웨어 엔지니어) 이력서 + 경력기술서
차정민 (소프트웨어 엔지니어) 이력서 + 경력기술서Jeongmin Cha
 
프로젝트실무와기획의역할
프로젝트실무와기획의역할프로젝트실무와기획의역할
프로젝트실무와기획의역할Amy Young Ah Kim
 
HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...
HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...
HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...Sang Seok Lim
 
How to implement your dream 20150427
How to implement your dream 20150427How to implement your dream 20150427
How to implement your dream 20150427Will Kim
 

Similar to 두번째단추 디지털마케팅 웹기획 (20)

[141]지난 1년간의 웨일 브라우저와 그 미래 (부제: 제품 매니저가 들려주는 생생한 기술/제품 이야기)
[141]지난 1년간의 웨일 브라우저와 그 미래 (부제: 제품 매니저가 들려주는 생생한 기술/제품 이야기)[141]지난 1년간의 웨일 브라우저와 그 미래 (부제: 제품 매니저가 들려주는 생생한 기술/제품 이야기)
[141]지난 1년간의 웨일 브라우저와 그 미래 (부제: 제품 매니저가 들려주는 생생한 기술/제품 이야기)
 
[20140624]소개자료
[20140624]소개자료[20140624]소개자료
[20140624]소개자료
 
my activities before getting a job
my activities before getting a jobmy activities before getting a job
my activities before getting a job
 
어플리케이션 및 웹 개발
어플리케이션 및 웹 개발어플리케이션 및 웹 개발
어플리케이션 및 웹 개발
 
세계에서 통하는 소프트웨어 만들기
세계에서 통하는 소프트웨어 만들기 세계에서 통하는 소프트웨어 만들기
세계에서 통하는 소프트웨어 만들기
 
1.openseminar
1.openseminar1.openseminar
1.openseminar
 
해외에서도 통하는 소프트웨어 만들기
해외에서도 통하는 소프트웨어 만들기해외에서도 통하는 소프트웨어 만들기
해외에서도 통하는 소프트웨어 만들기
 
HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망
HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망
HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망
 
한 번에 개발하는 안드로이드&iOS 앱 with 앱메소드
한 번에 개발하는 안드로이드&iOS 앱 with 앱메소드한 번에 개발하는 안드로이드&iOS 앱 with 앱메소드
한 번에 개발하는 안드로이드&iOS 앱 with 앱메소드
 
Goorm
GoormGoorm
Goorm
 
클라우드 IDE, 구름 프로젝트 | Devon 2012
클라우드 IDE, 구름 프로젝트 | Devon 2012클라우드 IDE, 구름 프로젝트 | Devon 2012
클라우드 IDE, 구름 프로젝트 | Devon 2012
 
아세아시멘트홈페이지제작제안.ppt
아세아시멘트홈페이지제작제안.ppt아세아시멘트홈페이지제작제안.ppt
아세아시멘트홈페이지제작제안.ppt
 
예비 개발자를 위한 웹서비스 개발 방법론 특강 - 폴리텍대학교 강서캠퍼스
예비 개발자를 위한 웹서비스 개발 방법론 특강 - 폴리텍대학교 강서캠퍼스예비 개발자를 위한 웹서비스 개발 방법론 특강 - 폴리텍대학교 강서캠퍼스
예비 개발자를 위한 웹서비스 개발 방법론 특강 - 폴리텍대학교 강서캠퍼스
 
NAVER의 웹/HTML5환경 대응 현황
NAVER의 웹/HTML5환경 대응 현황NAVER의 웹/HTML5환경 대응 현황
NAVER의 웹/HTML5환경 대응 현황
 
2 10 사업모델검증 계획서 이종인
2 10 사업모델검증 계획서 이종인2 10 사업모델검증 계획서 이종인
2 10 사업모델검증 계획서 이종인
 
Goorm소개
Goorm소개Goorm소개
Goorm소개
 
차정민 (소프트웨어 엔지니어) 이력서 + 경력기술서
차정민 (소프트웨어 엔지니어) 이력서 + 경력기술서차정민 (소프트웨어 엔지니어) 이력서 + 경력기술서
차정민 (소프트웨어 엔지니어) 이력서 + 경력기술서
 
프로젝트실무와기획의역할
프로젝트실무와기획의역할프로젝트실무와기획의역할
프로젝트실무와기획의역할
 
HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...
HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...
HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...
 
How to implement your dream 20150427
How to implement your dream 20150427How to implement your dream 20150427
How to implement your dream 20150427
 

두번째단추 디지털마케팅 웹기획

  • 1. 두번째 단추 디지털 마케팅 웹 기획
  • 2. 웹기획 웹사이트 기획 “웹사이트를 구축하기 위해 전체적인 업무 방향을 설정하며 관리하는 일” 웹사이트 설계/제작과정을 관리
  • 3. 디지털 마케팅 웹기획 ○ 목적성을 보다 분명하게 명시 ○ 수립한 디지털 마케팅 전략을 수행하기 위해 필요한 웹사이트 플랫폼 을 기획
  • 4. 디지털 마케팅에서 웹사이트의 의미 아이디어의 실체화 소비자들에게 전달되는 ○ 상품/서비스 ○ 아이디어 ○ 추상적 개념적 ○ 문서 ○ 플랫폼/사이트
  • 5. 디지털 마케팅 커뮤니케이션 기획 → 전략 기획 디지털 마케팅 웹기획 → 생산 기획
  • 6. 웹 사이트 플랫폼 기획 디지털 마케팅 커뮤케이션에 대한 지식 “웹 제작에 필요한 전문적 지식”
  • 7. 년 쓸만한 웹기획자가 되기 위해 경험이 필요한 시간
  • 8. 강의 주제 웹 사이트 제작 생산 과정에 대한 이해 ○ 생산 기획을 하기 위해 생산과정에 대한 이해가 필수 조건 ○ 생산과정 전반을 이해해야 웹기획 능력 방향을 위해 필요한 지식들을 파악
  • 9. “웹기획에 들어가기 전에 일어나는 일들” 마케팅 계획 수립 디지털 커뮤니케이션 전략 수립 ○ Announce Spark’s success in global ○ 2,30대에게 글로벌은 아주가까운 이야기이나 ○ Utilize BTL activity as contents 동경/추종의 대상이 아니다. (eg. Global Spark driver camp) ○ 기존 10년간 전세계의 스파크 팬을 SNS을 통해 연결할 수 있는 기회를 제공하자.
  • 10. 제작해야 할 플랫폼 웹서비스에 대한 웹기획의 출발점 “기획의도에 대해 충분한 이해도를 가지고 있는 캠페인 기획자가 웹기획을 담당”
  • 11. 웹 기획 단계 ○ 웹사이트 제작 운영을 위해 필요한 요소의 전반을 기획 ▪ 프로그램 정책 수립 프로세스 참여조건 보상 방법 등 ▪ 화면 설계 등 ▪ 평가 측정 기준 수립 본 마케팅 프로그램의 성과 측정 방법 기준 [화면 설계서] [프로세스 구성도]
  • 12. ○ 프로그램 정책 수립 ○ 화면 설계 ○ 평가 측정 기준 수립 요구되는 지식 ○ 디지털 마케팅 커뮤니케이션에 대한 이해도 ○ 웹 개발에 대한 지식 ○ 웹 디자인 에 대한 이해 ○ 에 대한 이해도 의 지식
  • 13.
  • 14. 디자인 제작단계 ○ 화면 설계도를 기준으로 디자인 들을 활용하여 사용자에게 실제로 보여지는 이미지로 제작하는 단계 ○ 원칙적으로는 화면 설계도 페이지만큼 제작된 이미지 페이지 개수도 동일
  • 15. 웹 코딩 단계 ○ 이미지 영상 플래쉬 파일로 제작된 디자인 산출물을 웹 브라우저를 통해 볼 수 있도록 변환 시키는 작업 단계 ○ 사용되는 주 언어가 임에 따라 코딩 이라고도 부름 이미지 영상 플래쉬 에 적합한 구조
  • 16. 웹 코딩 단계 ○ 코딩 의 사전적 의미 ▪ 자료 처리를 자동화하기 위해 일정한 규칙에 따라 품목별로 대상번호 또는 문자를 부여하는 것 ▪ 즉 기계가 알 수 있는 언어를 일정한 명령문에 따라 문자 또는 숫자를 사용해 기호화하는 것을 말한다
  • 17. 웹 코딩 단계 ○ 웹코딩 단계의 활용 언어 ▪ 웹브라우저가 인식하는 대표 언어 ※ 문서의 글자크기 글자색 글자모양 그래픽 문서이동 하이퍼링크 등을 정의하는 명령어 ※ 에서 사용하는 명령어는 태그 라고 하는데 꺽쇠괄호 를 사용하여 나타낸다 에서 부족한 기능을 보완하는 언어 ▪ ※ 을 이용해서 웹 페이지를 제작할 경우 세세한 글꼴 하나 하나를 일일이 지정해주어야 하지만 웹 페이지의 스타일 작성형식 을 미리 저장해 두면 웹 페이지의 한 가지 요소만 변경해도 관련되는 전체 페이지의 내용이 한꺼번에 변경되므로 문서 전체의 일관성을 유지할 수 있고 작업 시간도 단축된다 ※ 글자의 크기 글자체 줄간격 배경 색상 배열위치 등을 자유롭게 선택하거나 변경할 수 있으며 유지 보수도 간편하게 할 수 있다 ▪ 계열 ※ 정적인 언어를 보완하기 위해 개발된 언어 ※ 스크립트는 문서 속에 직접 기술하며 라는 태그를 사용한다
  • 20. 개발 단계 개발코딩 ○ 로 제작된 개별 파일들이 서버와 연동될 수 있도록 개발 ○ 웹코딩된 페이지를 기반으로 서버가 이해하는 언어들을 추가하는 작업 데이터/자료 요청 서버 / HTML파일들이 저장 Client / 웹사이트 사용자
  • 21. 개발 단계 개발코딩 프로그래머 개발자 들이 코딩이라고 이야기 하는 단계
  • 22. 개발 단계 개발코딩 ○ 웹 개발 언어 서버 프로그래밍 언어 ▪ 웹서버 서버로 구분되어 사용되는 개발 언어가 각기 다름 ▪ 웹서버 • 페이지 이미지 영상 파일 등을 저장 → 사용자 요청에 따라 해당 파일을 브라우저를 통해 전송하는 서버 • 서버 에 따라 개발하는 언어가 다름 • 계열 • 계열 • 리눅스 계열 ▪ 서버 • 데이터 베이스로 저장하고 있다가 결과값을 보여주거나 로 저장해야 하는 요청 등을 처리하는 서버 • 구조화 질의어
  • 23. 서버에 해당 검색어의 검색 결과를 요청 요청하는 언어가 로그인 요청 시 입력되는 결과에 따라 적합한 페이지 전송
  • 25. 대신 보완 홍보의 이슈로 자사명 임의의 확장자로도 표현 가능
  • 26. 개발 언어는 크게 가지로 구분 ○ 브라우저 사용자와 소통하기 위한 언어 ○ 서버와 소통하기 위한 언어 ○ ○ ○ ○ ○ 계열 ○
  • 27. 버그테스트 라이브 ○ 모든 단계의 개발이 완료된 페이지들이 서버에서 정상적으로 작동되는지를 확인 ○ 최종 수정 검수 단계를 거쳐 실제 운영되는 서버에 적용시기는 것
  • 28. 웹사이트 제작 프로세스 디자인 클라이언트 에 적합하게 구성 서버에서 동작될 수 있도록 개발 테스트 라이브
  • 29. 디지털 광고 대행사에서 웹기획자들이 가장 힘들어 하는 부분 사용되는 웹언어의 극히 일부분
  • 31. 케냐어 산스크리트어 수준 웹기획자들이 가장 어려워 하는 소통 제작 상 문제가 생겨도 문제파악이 쉽지 않은 이유
  • 32. 위로 ○ 웹사이트 제작은 각 분야별 전문가들과의 협업작업 ○ 디지털 마케팅 분야는 접하게 되는 의사결정권자들이 대부분
  • 33. 그 나라 국민은 정치 의식 수준만큼의 대통령을 갖는다 유시민
  • 34. 디지털 광고 웹 기획자의 기획력의 한계 웹 사용 개발 환경에 대한 지식 수준
  • 35.
  • 36. 에 대한 높은 연비효율성을 전달하기 위해 진행한 캠페인
  • 37.
  • 38.
  • 39.
  • 40.
  • 41. 라는 웹 환경에 대한 이해가 없다면 절대 나올 수 없는 기획 디지털 광고 웹 기획자의 기획력은 본인의 지식수준에 비례한다
  • 42.
  • 44. 과제 아래 용어들을 자 이내로 정리 암기 ○ 약어일 경우 까지 같이 암기 ○ 인터넷 검색 등을 활용하여 충분히 본인의 지식화 한 후 자 이내로 요약 ○ ○ ○ ○ ○ ○ ○ ○ ○ ○