Overview & Purpose 빠르게 변화하는 정보 기술의 세상에서 온라인 비지니스를 성공적으로 이끌기 위한 정보 기술의 기본 지 식 습득과 샘플 웹사이트 제작을 통해 웹사이트 운영등의 기본지식을 강화한다. Objectives 1. 홈페이지 개념 이해 (Domain, Hosting, IP) 2. 웹사이트 개념 이해 (HTML, CSS, JavaScript) 3. 워드프레스 이해 및 제작 실습 4. 워드 프레스 활용 및 마케팅 5. 구글이 좋아하는 웹사이트, 사진 및 문단 레이아웃 6. 구글 Analytics 연구 Materials Needed 1. Laptop Computer 2. Domain, Hosting 3. wordpress 설치
Verification Steps to check for student understanding 1. 도메인,호스팅, IP이란 무엇인가? 2. HTML, CSS, JavaScript란 무엇인가? 3. 워드 프레스란? 4. 구글이 좋아하는 웹사이트란? 5. 질의 응답
1 홈페이지의 개념 이해 (Domain, Hosting, IP) 1. IP (Internet Protocol Address) 네트워크 안에서 컴퓨터가 갖는 고유번호. 주민등록번호 처럼 각각의 컴퓨터는 하나의 아이피를 갖는다. (1) 사설 아이피: 인터넷상에서 확인할 수 없고 내부 네트워크에서만 사용 가능 A class 1개 : 10.0.0.0-10.255.255.255 (8 bit prefix) B class 16개 : 172.16.0.0-172.31.255.255 (12 bit prefix) C class 256개 : 192.168.0.0-192.168.255.255 (16 bit prefix) (2) 공인 아이피: 전세계에서 유일하게 하나의 공인된 아이피가 할당된다. 2. Domain 도메인 인터넷에서 다른 컴퓨터들과 통신하기 위해 갖는 아이피 주소를 이해하기 편하게 문자로 표현한 방식 (1) 일반 도메인: com, net, org, edu, gov, mil, int (2) 국가 도메인: kr, jp, ca, us,fr, uk,... 4
3. Hosting 호스팅 인터넷 전용선과 서버를 구축하지 못한 분들을 위해서 인터넷망에 바로 연결되어 있는 서버를 임대해 주는 서버 (1) Shared hosting: 하나의 서버를 다른 유저와 나눠쓰는 시스템, 저렴하다. 사용에 약간의 제약이 있다. (2) Dedicated hosting: 하나의 서버를 나 혼자 쓰는 시스템, 원하는 세팅및 설가 용이하다. shared hosting 보다 비싸다. 4. Homepage 홈페이지 서버에 웹페이지를 만들어 도메인과 연결하여 인터넷에서 다른 사람들이 들어와 볼 수 있게 한다. 가게에 인테리어를 꾸미고 홍보하듯이 한다. 5
2 웹사이트 개념 이해 (HTML, CSS, JavaScript) 1. HTML (Hyper Text Markup Language) WWW (World Wide Web)에서 하이퍼 텍스트 문서를 작성하는데 사용하는 기본 언어. 하이퍼 텍스트란 문서와 문서를 서로 연결하여 접근하는 방식. 웹페이지의 기본 골격 (1) 페이지의 골격을 만들고 텍스트, 링크, 이미지등을 넣을수 있다. (2) <HTML> <HEAD> 문서의 머리 부분 </HEAD> <BODY> 문서의 몸통부분 </BODY> </HTML> 2. CSS (Cascade Style Sheet) HTML로 작성된 기본골격위에 살을 입히고 장식하는 것. 웹 페이지를 작성 할때 폰트, 위치, 크기, 테두리, 범위등 스타일 시트를 적용하면 간편하고 쉽게 수정이 가능하다. 마치 옷을 갈아 입는 것 처럼. (1) 페이지의 디자인과 레이아웃을 관리할때 사용한다. (2) <style type= text/css > td {font-size:12px;font-family:돋움;color:blue} </style> 6
3. JavaScript 웹사이트와 상호 작용하도록 디자인 된 스크립트 언어 웹사이트가 동적 표현및 풍부하고 다양한 기능이 작동할 수 있도록 한다. <script type= text/javascript src= example.js ></script> 7
3 워드프레스(Wordpress) 이해 및 제작 실습 1. 워드프레스는 전세계 웹 사이트의 20% 이상, 콘텐츠 관리도구 (CMS)의 60% 를 점유하고 있는 홈페이지 및 블로그 제작 도구이자 CMS 도구(플랫폼 툴) 이다. 2. 호스팅 서버를 땅이라 하면, 그 위에 집을 짓을때 필요한 가스, 수도, 전기등과 기본 틀을 제공하는 것을 플랫폼이라 한다. 그 플랫폼을 한번에 제공해 주는 것이 워드프레스이다. 3. 테마는 기본으로 만든 집을 예쁘게 꾸며주는 세트이다. 조명,벽지, 페인트 색등. 워드 프레스는 테마를 한번에 바꿔줄수 있 는 툴을 제공한다. 4. 플러그인은 집에 들어갈 세탁기, TV, 냉장고등 보다 편리하게 집을 만들어주는 장치들이다. 5. 워드프레스를 호스팅서버에 설치하면 워드프레스는 기본적인 웹페이지와 이를 고칠 수 있는 어드민 사이트를 제공한다. 6. 예: www.ubille.com 이 사람들에게 보여질 웹페이지가 된다. 7. www.ubille.com/wp-admin 이 웹페이지를 관리해주는 어드민 사이이트가 된다. 8
9 Step. 1: Installation
Step. 2 10
Step. 3 WordPress Plugin Automatic Update 와 WordPress Theme Automatic Update는 자동 업데이트를 하지 않는게 좋다. 작업하다 보면 기존의 Plugin과 Theme을 각각의 개인 사이트에 맞게 고치는 경우가 많기 때문에, 자동 업데이트를 설정하면 본인들 맞게 고쳐논 기능들이 사라지는 경우가 발생한다. 11
Step. 4 Administrator Name, Password and Admin Email 는 꼭 기억해야 한다. Title은 사이트 이름이 되고 Tagline 는 간단한 설명 혹은 광고 슬로건이 된다. 12
Step. 5 Goto www.ubille.com/wp-admin 아래와 같이 어드민 사이트를 들어가기 위한 로그인 페이지가 나온다. 설치때 만든 Administrator Name과 Password를 이용하여 로그인 한다. 13
Step. 6 웹사이트를 고칠 수 있는 어드민 사이트에서 윈쪽 메뉴에 Dashboard, Posts, Media, Pages, Appearance, Plugin, Users, Tools and Settings 등등 많은 메뉴가 보인다. (1) Dashboard At a Glance: Show Posts,Pages, Comments and version and theme Activity:Recently Published posts and comments and others. Quick Draft: 빠르고 편하게 post title, content, tags 등을 작성하거나 media를 upload 하는 기능 WordPress News: 공식적으로 워드프레스 블로그에서 나온 소식. 14
(2) Post: 글은 블로그의 기본이 되는 요소이다. All Posts: 현재 작성된 모든 글들의 타이틀, 작성자, 카테고리, 태그, 날짜등 보여준다. Add New: 에디트 창에 새글을 작성할 수 있다. 새로운 카테고리,태그, 사진, 동영상 등을 올릴 수 있다. Categories: 모든 글들은 하나 이상의 카테고리를 갖는다. 카테고리를 통해 글들을 주제에 따라 그룹별로 묶어 Navigation으로 쉽게 찾을 수 있게 해준다. Tags: 각각의 글에 키워드들을 부여하여 손쉽게 글을 찾을수 있게 도와준다 (3) Media: 사진, 동영상, 음악등 파일들을 올리고 이를 글이나 페이지에서 활용할 수 있게 해준다. Library: Media에 올린 사진들을 편집, 삭제등의 작업을 한다.타이들, 캡션, alt text, 등 편집할 수 있다. Add New: Media 에 사진, 동영상, 파일등을 새로 올릴 때 사용한다. (4) Pages: 워드프레스에 컨텐츠를 추가하는 또다른 툴이다. 주로, About, Contact등 고정 정보를 제공할 때 사용된다. All Pages: 현재 존재하는 모든 페이지를 편집, 삭제 등 관리한다. Add New Page: 새로운 페이지를 추가할 경우 사용하는 메뉴. 15
(5) Comments: 사이트에 등록된 모든 댓글을 관리할 수 있으며 댓글을 삭제하거나 승인을 기다리는 댓글의 승인을 허용 할 수 있다. (6) Appearance: 현재 사이트에 표현되는 컨텐츠의 모습을 관리하는 곳. Themes: 미리 만들어진 테마(컬러, 그래픽, 글자등)를 쉽고 편하게 교체를 하는 곳. Customize: 설치된 테마에 대한 설정(컬러, 그래픽, 글자등)을 관리하는 곳. Widgets: gadgets 라고도 하는데 테마의 사이드 바에 다양한 정보를 보여줄 수 있다. Categories, Archives, Blogroll, Recent Posts, 등 을 보여 줄 수 있다. Menus: 페이지, 카테고리, 커스텀 링크, 태그 등 연결하는 메뉴을 만들 수 있다. Header: 테마의 헤더부분의 나타나는 부분을 관리하는 곳. Background: 테마의 백그라운드에 표현되는 부분을 관리하는 곳. Theme Editor: 사용자가 직접 사이트의 구성을 변경 할 수 있도록 편집기를 제공하는 메뉴. 16
(7) Plugins: 워드프레스 기본 설치에서 제공하지 않는 새 기능을 관리하는 곳. Installed Plugins: 기존에 다운로드하고 설치한 플러그인들을 관리하는 곳. Add New Plugins: 새로운 플러그인을 다운로드하고 설치하는 곳. Plugin Editor: 사용자가 직접 설치한 플러그인의 소스코드를 편집하는 곳. (8) Users: 워드프레스를 관리할 수 있는 유저를 관리하는 곳. Roles을 각 유저에게 할당하여 맞는 역할(Administrator, Editor, Author, Contributor, Subscriber) 을 부여한다. All Users: 현제 사이트의 모든 유저를 관리하는 곳. Add New User: 새로 유저를 만든는 곳. Your Profile: 현재 유저의 개인 설정을 관리하는 곳. (9) Tools: 컨텐츠의 import,export 하거나 워드프레스 새 버전등 업그레이드 할 때 사용된다. Import: posts, comments, pages, categories, tags, users 등 데이터를 import 할때 사용된다. Export: posts, comments, pages, categories, tags, users 등 데이터를 XML 파일로 export 할때 사용된다. 17
(10) Settings: 사이트의 형태에 필요한 세팅을 관리하는 곳. General: 타이틀, 태그라인, 사이트 주소, 이메일, 타임존, 날짜형태,언어등 Writing: 포멧, 카테고리, 메일 서버등을 설정한다. Reading: 프론트페이지, 블로그 페이지 포스트 숫자,검색엔진 접근 여부등 Discussion: 사이트 접근자가 댓글 입력, 게시글에 링크 걸리는 경우 알림 Media: 미디어 라이브러리에 이미지를 추가할 경우 이미지의 크기 조정 Permalinks: 사이트에 접근할 때, 페이지의 url을 어떠한 방식으로 지정할지 조정하는 부분 18
실전 연습 1 (1) 카테고리 관리하기 Post - Categories -> Name -> Slug -> Parent -> Description -> Add New Category (2) 글 작성하기 Post - Add New -> Title -> 글쓰기 -> 카테고리 선택 -> Tags -> Publish (3) 이미지가 있는 글 작성하기 Post -> Add New -> Title -> 글쓰기 -> 업로드/넣기 - 업로드(3종류) - 보기 (링크, 정렬,크기) -본문 삽입 - 특성 이미지(Use as featured image) - 이미지 고치기 - Publish (4) 영상 임베디드(Embed) 가 있는 글 작성 Post -> Add New -> Title -> 글쓰기 - 비디오 영상 주소 넣기 - 특정 이미지 설정 -> Publish 19
실전 연습 2 (1) 페이지 만들기 Page - Add New -> 글 작성 -> 페이지 속성(상위, 템플릿) - Publish (2) 메뉴 관리하기 Appearance - Menus -> New Menu -> 메뉴에 넣을 수 있는 아이템 (Page, Categories, 사용자 정의 링크) -> 이름,계층 순서 -> 테마 위치 -> 저장 (3) 위젯 관리하기 Appearance - Widget -> 사용 가능한 위젯(검색, 글목록, 분류, 텍스트) - 테마의 위젯 위치 (Blog Sidebar, Portfolio Sidebar, Page Sidebar, Home Widget, Footer Widget) 20
4 워드프레스(Wordpress) 활용 및 마케팅 1. 검색 엔진 최적화( SEO-Search Engine Optimization)를 제공해 준다. Flash는를 쓰지 않는 편이 좋다 URL 주소는 prod-01.html, prod-02.html 등 의미없는 주소로 하지 않는다. coffee cup.html, tea set.html, bread.html 이미지 태그, 제품 테그, 내부 링크등 컨텐츠 구성을 점검한다. 2. HTML 를 몰라도 웹사이트에 콘텐츠를 쉽게 업데이트 할 수 있다. 3. 수 많은 테마와 플러그인 기능들을 손쉽게 웹사이트에 추가 할 수 있다. 4. 사이트에 문제가 있거나 맞춤 기능을 추가 하고 싶을 때 개발자를 구하기 쉽다. 5. Bluehost, 1and1 그리고 Godaddy등 많은 호스팅 업체로 부터 빠른 설치를 제공 받을 수 있다. 6. Themes:Blog, Gallery, Portfolio, Magazine, Business, ecommerce. 7. Free or Premium Theme, Responsive, One Page. 21
8. 워드프레스 뉴스레터: JetPack, SendPress, Mail Poet, Newsletter, MailChimpFlash는를 쓰지 않는 편이 좋다 새 포스트: 새글이 올라오면 바로 구독자에게 알림 메일 발송 주기적 자동 발송: 일/주/월간 단위로 주기적으로 구독자에게엑 발송 비정기: 필요할 때에만 에 따라 발송하는 방법 9. 플러그 인: 사이트의 기능을 강화시켜준다. JetPack: 기본제공 플러그인 세트 케이 보드: 게시판을 만들어주는 기능 WordPress SEO by Yoast: 검색 엔진 최적화를 적용하는 기능 WP터치: 컴퓨터 모니터용 웹사이트를 모바일 웹사이트로 바꿔주는 기능 아키스멧: 스팸댓글 자동 필터링 기능 코드스타일링: 웹사이트의 언어를 현지 언어로 바꿔주는 기능 WP슈퍼캐시: 사이트에서 사람들이 자주 찾는 웹사이트를 고정 페이지로 만드는 기능 22
5 구글이 좋아하는 웹사이트, 사진 및 문단 레이아웃 1. 글의 내용이 다른 곳에서 인용하거나 복사한것이 아니라 처음 원본이냐. 2. 글이 충분히 설명되어 있느냐, 의미없는 글, 혹은 키워드 반복은 금물 3. 페이지 타이틀은 고유하고 의미있게, 글의 포맷은 H1,H2,Bold, Italics으로 텍스트는 작은 문단으로 나눠지고, Font size는 읽기 좋은 사이즈로, Image 는 가능하면 서술형 파일 이름으로 alt tags에도 서술형 이름 넣기 4. 웹사이트 반응 속도를 빠르게 해야 한다. SEO에 영향을 미친다. 또한 방문자들에게 신뢰감을 준다. 빠른 호스팅이나 서버를 써라 설치한 테마나 템플렛를 최적화 해야한다. 사용하는 이미지의 최적화가 필요하다. 너무 많은 이미지를 넣지 말고, 위치마다 알맞은 사이즈와 포멧을 써야한다. CDN (Content Delivery Network)은 전체 사이트를 캐쉬와 배포의 가장 가까운 서버에서 제공한다. 23
5. Google Authorship: SEO에서 중요한 요소 평판, 인기, 신뢰도를 기반으로 순위를 만든다. Google+ profile를 을 이용하라. 다른 사람들로 부터 본인 글이 많은 인용을 받으면 좋다. 클릭수가 올라가면 좋다. 많은 수의 Followers 확보와 상호 교류가 많아지면 좋다. 24
6 구글 Analytics 연구 1. 사이트 방문자수를 확인하거나, 재방문율, 어느 페이지에 오래 머물렀는가, 어느 지역에서 방문하는지 등을 확인한다. 대쉬보드 방문자의 웹 브라우저 종류 방문자의 접속 기기 확인 방문자의 유입 형태 방문자의 유입 경로 2. 계정이 없다면 새 계정을 만든다.들십시요. google.com/analytics 를 방문하여 login 하면된다. 3. 추가 Property 는 Admin -> Account -> Property -> Create New Property 선택하면된다. Website 이름, URL, Category, TimezoneTime Zone 을 선택한 후 Get Tracking ID를 누르면 Tracking ID 번호를 부여 받게 된다. 이Tracking ID 번호를 WordPress에서 Setting -> Google Analytics -> Web Property ID에 넣어주면 된다. * 설정된 리스트 25
26 * 대쉬보드
27 * 새 Property 추가 하기
7 과학적 ROI 분석 1. 구글 Analytic 를 통한 방문자, 유입경로 분석 및 컨텐츠 분석 2. 웹사이트 마케팅은 매출과 연결되야 한다. 3. 웹사이트 방문자 숫자 증가 꾸준하게 컨텐츠를 올리는 것이 중요 내용의 다양성과 가치있는 컨텐츠가 중요 4. 구글, 링크드인, 페이스북, 트위터등 의 소셜미디어의 인바운드 링크 확보 5. 잠재 고객 정보 확보 가치있는 컨텐츠를 무료 제공하며 이메일 주소나 회원 등록으로 모으기 6. 인적 네트워크 확장 가치 있는 컨텐츠를 제공하면, 관심있는 많은 사람과 연결될 수 있다. 직접적이진지 않더라도않지만 다양한 인적 네트워크를 만들어 간다. 28