소셜마케팅이란 무엇인가?

협업이란 어떻게 하는 것이 성공적인 협업인가?

출처소셜마케팅과 협업의 정리by 건강한 협업

소셜마케팅과 협업의 정리
소셜미디어는 TV, 라디오, 신문, 잡지 등과 같이 1:다수 관계의 매스미디어와 달리 1:1, 1:다수, 다수:1의 다양한 관계 형성을 가능케 하는 상호간에 자유로운 의사소통을 가능하게 해주는 인터넷 기반의 미디어이다. 위키피디아(Wikipedia)는 소셜미디어를 사람들의 의견, 생각, 경험, 관점 들을 서로 공유하기 위해 사용하는 온라인 도구나 플랫폼으로 정의하고 있다. 국내에 잘 알려진 대표적인 소셜미디어로는 블로그페이스북, 트위터, 유튜브, 플리커, 핀터레스트, 미투데이, 카카오톡, 카카오스토리 등이 있다.
 
일반적으로 SNS = 소셜미디어로 알고 있다. 마치 매스미디어라는 말을 쓰지않고 광고라 부르는 것과 같다. 사실 SNS는 소셜미디어 중 하나이다. SNS(Social Networking Service)는 친구나 지인 등 인간관계를 위한 커뮤니티형 인터넷 사이트를 말한다. 마이크로 블로그라고도 한다. 페이스북, 트위터,미투데이가 대표적인 SNS이며 카카오톡은 SNS가 아니고 IMS(Instant Messaging Service)이. 이에 카카오톡은 카카오스토라는 사진 공유 기반의 SNS를 만들었.
 
사실 이러한 소셜미디어의 구분은 큰 의미가 없다. 세상은 우리의 상상을 초월하여 급변하고 있다. 정의는 계속 바뀌고, 구분이라는 영역의 한계는 쉽게 무너지고 만다. 그리고 대중은 자신이 선호는 소셜미디어 한두개를 사용할 뿐이다. 하지만 기업이 고객과의 커뮤니케이션 채널로 소셜미디어를 활용하기 위해서는 각 채널별 특성과 차이에 대한 이해가 반드시 필요하다.
출처: http://insidea.tistory.com/6 [인스 아이디어]

출처: http://insidea.tistory.com/6 [인스 아이디어]

2. 소셜미디어 마케팅의 효과
판매 증가 (Improved Sales)
소셜미디어 활용 3년 이상인 경우 효과가 있음 50% 이상 (3~4년 : 57%, 4~5년 : 64%, 5년 이상 : 77%)
매주 5시간 이하 35%, 40시간 이상의 경우는 74%가 효과 있다고 함
노출 효과 (Increased Exposure)
소셜미디어 활용 1년 이상의 경우 효과가 있음 93%이상, 1년 미만은 83%
매주 6시간 이상 투자한 경우 : 효과가 있음 95% 이상 (5시간 이하인 경우는 87%)


3. 주로 사용하는 소셜미디어 플랫폼
1. 블로그는 1인 기업들이 많이 사용하고(62%), 큰 기업들은 상대적으로 덜 사용합니다(50%)
2. 소셜미디어 경험 3년 미만인 경우 구글+와 블로그를 많이 사용하지만, 3년 이상인 경우 유투브를 많이 사용합니다. 콘텐츠 생성에 관심이 많다고 볼 수 있습니다.
3. 매주 40시간 이상 투자하는 경우에는 인스타그램(46%이상), 구글+(41%이상), 유튜브(38%이상), 핀터레스트(37%이상), 블로그(26%이상)에 상대적으로 더 많이 투자합니다. (매주 6시간 미만 투자하는 계층 대비)
4. B2C는 페이스북, 유튜브, 핀터레스트와 인스타그램에, B2B는 링크드인과 구글+, 블로그에 집중합니다.

지금까지 소셜미디어 마케팅의 관하여 살펴 보았다면 협업의 관하여 살펴보자.

4. 협업이란?
협업은 가상의공간과 물리적 공간에서 효과적인 상호작용을 위해 기술을 사용하여 기술혁신, 고객관계 및 효율을 개선, 가치를 창조하려는 목적으로 기업내에서 함께 일하는 고도로 다양화된 팀웍 - 칼로스 도밍게즈(Carlos Dominguez's Articles)시스코 부사장

5. 협업을 위해서는 다음의 네가지가 필요하다
첫째, 공동의 목적과 목표 인식이 필요하다. 기업에서 공동의 목적과 목표가 없는 소통과 협업은 성공하지 못한다. 공동의 목적과 목표가 있을 때 소통과 협업은 의미가 있다. 그래서 전사적인 소통과 협업은 기업 가치관인 미션(목적), 비전(목표), 핵심가치(우선순위)가 정립되고 내재화가 필수 요소가 된다.

둘째, 수평적으로 평등한 관계의 형성이 필요하다. 불평등하고 위계적 환경에서는 자발적 소통과 협업을 끌어내기 어렵다. 수평적으로 평등한 관계여야 소통과 협업은 효과가 있다. 경영진이나 리더가 직원들을 아래로 내려다 보면서 소통과 협업을 외치는 것은 겉으로만 하는 시늉만 이끌어 낼 뿐이다.

셋째, 집단적 협력이 필요하다. 소통과 협업은 기업의 생존과 발전을 위해 필요하다. 공동체 활동에 맞게 팀, 부서, 부문, 전사 차원의 집단적 협력이 되어야 한다. 개인적 협력은 ‘단순접촉효과’와 ‘터틀링’ 수준에 머무는 것이다.

마지막으로 앞의 세 가지 원칙을 바탕으로 서로 활발하게 소통하고 협력하라.
원문 : 정진호가치관경영연구소
출처 : http://ppss.kr/archives/59165

 

그렇다면 일인 미디어포럼에서 요구하는 소셜마케팅 협업이란 무엇인가?
위에서 살펴보았듯이 소셜마케팅은 시대의 변화이고 트렌드의 변화임을 살펴보았듯이 또한 협업은 함께 할 때 가능함을 보여주고 있다.

일인 미디어포럼에서는 이 두 가지의 전혀 다른 분야를 하나의 분야로 재 창출하고자 함에 있는 것이 아닐까 싶다.
그렇기에 첫째로 소셜미디어 교육을 통하여 활용능력을 끌어올리고, 두 번째로 소셜미디어를 기반으로 협업을 진행함으로써 기존의 볼 수 없었던 뉴 마케팅을 만들어 가고 있는 것이다.
지난 2월 방배동 빛 교회에서 1기로 시작하여 현재 구로에서 10기가 진행되고 있는 것은 시대가 변화여 가고 트렌드가 변해가는 것에 대응하고자 하는 적극적 참여인 것이다.
 

현재 소셜마케팅 협업 아카데미를 수료하고 일인 미디어 포럼에 구성원으로 참여하고 있는 숫자가 60명을 넘어섰다 그렇다면 앞으로 최소 3년 이상 지속된다면 새로운 뉴 파워를 가질 수 있을 것이며 미래사회의 충분한 준비가 되지 않을까 생각을 정리하여 본다.



티스토리 스킨 style.css 완전정복 2

 

이 글은 티스토리의 style.css의 내용에 대한 이해를 통하여 css도 배우고 티스토리 스킨을 변경하는데 도움이 되기를 바라는 마음에서 포스팅을 하며 "티스토리스킨 style.css 완전정복 1"에서 이어지는글입니다. 편의상 평어체를 생략합니다.

글자크기 태그 h1, h2, h3 ...

h는 글자크기를 지정하는 태그입니다. h1이 가장 큰글자이고 h2, h3, h4...h6 까지 숫자가 클수록 글자는 작아진다.

<h1>style.css 완전정복 </h1>의 결과물은 아래와 같습니다.

style.css 완전정복

h1의 원래크기는 위와 같지만 스타일쉬트를 아래와 같이 지정하면

h1 {font-size: 0.8em;color:#003366}
; h1 태그를 사용하는 경우 글자크기를 0.8em, 글자색이 바뀌도록 설정

결과는 아래와 같습니다.

style.css 완전정복


font 속성

; font 속성은 글자크기, 색상, 폰트종류, 두께등을 지정할때 사용한다.

※ font에서 지정가능한 값

  • font-family => 폰트종류
  • font-style => 폰트형태 지정 ( italic,oblique,normal(기본값) 을 지정가능)
  • font-variant => 대문자로 표시 (지정값은 small-caps)
  • font-weight => 폰트두께 지정 (값은 bold, bolder, 100,200,..,900 까지의 숫자)
  • font-size => 폰트크기 지정
  • color => 폰트색을 지정 RGB 색상코드표

※ font size 에서 사용되는 단위

  • px, pt는 절대크기 (일반크기는 12px)
  • em, %는 상대적 크기 (예. 0.75em, 75%)
  • 웹 브라우저의 기본크기는 1em, 100%로 특별히 크기를 지정하지 않으면 이 크기로 표시됨.
  • 필자의 블로그는 12px 로 지정되어 있으며, 0.75em, 75%와 같은 크기이다.

예제) 카테고리 옆에 표시되는 숫자에 대한 스타일

.c_cnt { font:0.75em Tahoma, Helvetica, Arial, Gulim, sans-serif; color:#f30;}

위 스타일은 카테고리 옆에 표시되는 글의 갯수에 대한 스타일이며 약식표기이다. 글자 크기를 0.75em으로 지정하고 기본글꼴은 tahoma, 대체글꼴은 Helvetica, Arial, Gulim, sans-serif 순으로 대체되고 글자색은 #f30으로 지정한 예이다.

#f30 은 #ff3300을 줄여서 표현한것이다.

관련글. RGB 색상코드표
색상 테이블 (컬러 테이블)

letter-spacing

;자간(글자와 글자사이)을 조절

예제)

<p>letter-spacing 비앤아이 블로그 - default</p>
<p style="letter-spacing:1px">letter-spacing 비앤아이 블로그 - 1px</p>
<p style="letter-spacing:0.1em">letter-spacing 비앤아이 블로그 - 0.1em</p>
<p style="letter-spacing:0.5em">letter-spacing 비앤아이 블로그 - 0.5em</p>

예제 결과 보기

word-spacing

; 단어와 단어사이의 간격을 조절한다.

예제)

<p>word-spacing - 기본 </p>
<p style="word-spacing:0.1em">word-spacing - 0.1em </p>
<p style="word-spacing:0.5em">word-spacing - 0.1em </p>

예제 결과 보기

text-transform

; 영문의 대소문자를 변경하는 속성.

※ 값의 종류

  • capitalize : 첫 글자만 대문자로 바꿔서 표시
  • uppercase : 모든 영문자를 대문자로 변경
  • lowercase : 모든 영문자를 소문자로 변경


기타 속성들 (width,height,text-align)


width

;폭을 지정한다. div나 span의 영역폭, 이미지의 폭등을 지정할때 사용

height

;높이를 지정할 때 사용. div나 span의 영역 높이, 이미지의 높이(세로크기)등을 지정할때 사용

text-align

. 글자나 그림의 가로 정렬에 사용
. 정렬방식: left, center, right, justify (양쪽정렬)

이글은 창경포럼 인증위원회에서 인증한 조남관 강사님의 글에서 발췌한 것입니다


티스토리스킨 style.css 완전정복 1

티스토리는 이용자측면에서 보면 skin.html과 style.css로 구성되어 있다.

  • skin.html : 블로그의 구조 및 컨텐츠 표시
  • style.css : 블로그에 표시되는 문단 및 글자에 대한 여러가지 속성을 담고 있는 파일로 skin.html에서
    호출하여 사용됨

이 2개의 파일중 여기서 설명하려는 내용은 style.css 파일속에 들어있는 내용의 일부이다.

style.css에는 블로그 제목의 크기 및 색깔, 블로그의 링크색, 글자색, 폭, 줄간격, 배경색등의 정보가 담겨져 있고
블로거가 언제든지 임의로 수정이 가능하여 본인만의 스킨을 만들 수도 있다.



내 스타일 어때?


claire 04 © studio.es by Vincent Boiteau 저작자 표시비영리동일조건 변경허락

이 style.css 파일속에 들어 있는 내용은 css(cascading style sheet)라고 하며 스타일쉬트라고도 한다.


티스토리의 style.css 내용과 의미

이제 본격적으로 style.css의 내용 하나하나에 대해서 알아보자. 티스토리 관리자 페이지에서 보는 style.css는 아래 그림과 같다. 각각의 선택자와 속성의 의미를 알게 되면 스킨을 원하는 모양으로 바꿀 수 있을것이다.

style.css 화면

시작하기 전 알아야 할 사항

  • 블로그는 html 언어로 되어 있음
  • 웹(web) 페이지도 html 언어로 되어 있음
  • 고로 블로그는 웹페이지, html 문서로 표현할 수 있음

@charset "utf-8";

style.css의 제일 위에 있는 내용으로 문자셋을 UTF-8로 지정하는 기능이다. UTF-8은 표현할 수 있는 문자수가 많고 호환성이 좋아서 글로벌 캐릭터 셋으로 사용된다.

참고. css의 약식표기

CSS의 약식 표기방법 보기

body { .... }

html 문서(블로그) 전체에 적용할 내용을 지정한다. html의 시작태그가 <body> 태그이기(최상위태그) 때문에 body 에 대한 속성을 지정하면 블로그 전체에 영향을 미친다.

body 에서 지정한 스타일에 대해서 알아보자

body{
font:12px/1.5 Dotum, Verdana, AppleGothic, Sans-serif;
color:#666;
/*@background-image=background-image:url(images/bg.gif);*/ background-image: none; /*@*/
/*@background-image-position=background-position:;*/ background-position: left top; /*@*/
/*@background-image-repeat=background-repeat:repeat;*/ background-repeat: no-repeat; /*@*/
/*@background-color=background-color:;*/ background-color: #FFFFFF; /*@*/
padding:0; margin:0;
}

케이(Kay~)의 블로그에는 body 스타일이 위와 같이 지정이 되어 있는데 내용중 /* 와 */ 사이의 내용은 주석이므로 무시해도 된다. 그럼 각각의 속성별로 어떤 의미가 있는지 간단하게 알아보도록 하자

body{
font:12px/1.5 Dotum, Verdana, AppleGothic, Sans-serif;
글자의 크기를 12px/1.5 크기로 지정하고 기본글꼴을 돋움(dotum)으로 하되 돋움글꼴이 없는경우
대체글꼴로 Verdana, AppleGothic, Sans-serif 을 지정했다. ( 글꼴크기에 대한 궁금증은 여기 )

color:#666;
블로그의 글자색 지정 (색상코드는
RGB 색상코드표 참조)

background-image: none; => 블로그의 전체 배경이미지 지정, none은 없다는 의미
background-position: left top; => 배경이미지가 있는경우 왼쪽 상단에서부터 표시
background-repeat: no-repeat; =>이미지 한번만 표시하기
background-color: #FFFFFF; => 배경색을 흰색(ffffff)으로 지정, 배경이미지가 있는경우 무시됨
padding:0; margin:0; => html 문서의 패딩과 마진을 없앰
}

배경이미지를 지정할때는 "background:url(이미지url)" 과 같은 형식으로 지정하면 된다.
또는 background-image:url(이미지 url) 과 같이지정해도 된다.

예) <div style="background:url(./image/bg.gif)"> 상대경로 </div>
<div style="background:url(http://ccoma.tisotry.com/logo.jpg)">이미지 절대경로</div>

background의 약식표현

"background:url(images/ico_prev_no.gif) left top no-repeat" 와 같이도 표현

추가 pm 10:40

링크 선택자 (a:link 등)

링크가 걸린 텍스트에 대한 서식지정 부분이다. 링크가 걸린 글자위에 마우스를 올리거나 클릭시 글자색이나 크기등을 지정할 수가 있다.

a:link { color:#333; text-decoration:none;} =>클릭 안한 링크색 지정
a:visited { color:#333; text-decoration:none;} =>한번이라도 클릭한 링크 색 지정
a:hover { color:#666; text-decoration:underline;} =>링크된 글자에 마우스를 올렸을때의 글자색과 밑줄문자를 지정
a:active { color:#666; text-decoration:none;} =>마우스를 클릭했을때

* text-decoration은 none, underline, overline, line-through 등을 지정할 수 있다.

티스토리의 경우 위의 선택자를 이용하여 본문중의 링크색, 사이드바의 링크색이나 글자속성등을 변경할 수 있으나 현재 티스토리는 본문(포스트 본문)과 사이드바의 링크를 따로 설정하고 있기 때문에 여기서 아무리 바꿔도 변경되지 않는다.

관련글. - 티스토리 포스트내의 링크색 바꾸기

이글은 ESM 인증 블러그 조남관 강사님의 글에서 발췌한 것입니다

'css for 티스토리' 카테고리의 다른 글

티스토리 스킨 style.css 완전정복 2  (0) 2011.12.19

+ Recent posts