HTML – 검색엔진최적화 7 : 페이지랭크

이번 시간은 검색엔진 최적화에 대한 마지막 시간입니다 pdf의 내용이 아직 조금 남아있지만 제가 생각하기에 중요한 얘기들은 많이 했고, 또 검색엔진 최적화에 대한 너무 많은 얘기를 했어요

그래서 양을 좀 조절하기 위해서 여기까지만 하고 나머지는 여러분의 몫으로 남겨둘게요 자 수업을 마무리하기 전에, 구글의 검색엔진이 어떻게 검색을 하는가에 대한, 아주 중요한 것이 바로, 페이지의 랭크라는 개념이 있습니다 랭크는 '순위'라는 뜻인데요 즉, 똑같은 단어를 두 개의 사이트가 동시에 가지고 있을 때 어떤 사이트를 먼저 검색 결과에 노출해 주느냐 라고 하는 것의 기준이 바로 페이지랭크입니다 그래서 구글이 전 세계에 있는 모든 사이트에 페이지랭크를 매겨요 사이트마다 그 페이지의 랭킹을 매겨서 검색했을 때 랭킹이 높은 사이트가 더 먼저 노출되도록 해서 검색의 품질을 높이는 그런 활동을 하고 있는데요 바로 그때 사용하는 알고리즘이 페이지랭크라는 개념입니다

물론 페이지랭크는 실제로 현실에서는 굉장히 복잡해져 있겠죠 그리고 저도 이 페이지랭크에 대해서 100% 정확하게 알고 얘기하는 게 아니기 때문에 제가 하는 얘기가 좀 틀릴 수도 있어요 그런 틀린 얘길 하면 여러분들 댓글로 가열차게 얘기해 주세요 그럼 제가, 수정하겠습니다 자 그럼 지금부터 한번 시작할 건데, 중요한 건 구글이라는 회사의 검색엔진 기법이 중요한 것이 아니고 하이퍼텍스트가 얼마나 중요한지를 보여주는 사례입니다

그리고 웹 페이지를 좋은 정보로서 여러분들이 잘 조직화하고 태그를 잘 사용하는 것이 얼마나 중요한지를 보여 드리기 위해서 준비한 수업이라는 것, 기억해 주세요 A와 B라고 하는 사이트가 있습니다 그리고 A라는 사이트는 인기가 많아서 C와, D와, E라고 하는 사이트에 A라고 하는 사이트의 링크가 있는 거예요 다시 말해서 C, D, E가 A라는 사이트를 가리킨다면, 구글은 A라는 사이트의 페이지랭크를 높입니다 B라는 사이트는 섬처럼 존재하는 사이트예요

예, 이 사이트를 링크하고 있는 페이지는 없어요 자 그러면 A가 B보다 페이지랭크가 더 높은 상태죠 자, 이 상태에서 A에도 있고, B에도 있는 검색어를 입력하면 똑같은 조건이라고 한다면 사이트 A가 페이지랭크가 더 높기 때문에 검색 결과에 더 우선적으로 표시가 되죠 그 얘기는 뭔가요? 더 많은 사람이 방문할 수 있는 가능성이 더 커진다 라는 뜻입니다 자, 이것이 페이지랭크의 기본적인 원리예요

즉 많은 사이트들이 링크를 하고 있다면 그 사이트는 더 좋은 컨텐츠를 가질 확률이 높다 라고 하는 전제에서 출발하는 것이 바로 이 페이지랭크라고 할 수 있겠죠 그리고 A라는 사이트 즉 페이지랭크가 높은 사이트가 D라는 사이트 링크를 걸면 A라는 사이트의 페이지랭크가 높기 때문에 D라는 사이트는 페이지랭크가 상당히 높게 올라가요 즉, C라고 하는 다른 곳에서는 연결되어 있지 않은 사이트가 링크를 하는 것보다 A라고 하는 페이지랭크가 높은 사이트가 링크를 하는 것이 훨씬 더 페이지랭크를 많이 올린다라는 얘기인 것이죠 그래서 이제 우리가 이 페이지랭크라고 하는 개념을 알고 있으면 어떤 사회적 현상들이 해석이 되냐면 예를 들면 여러분들 스팸 때문에 정말 이 세상이 많이 시끄럽고 혼란스럽잖아요? 많은 스팸들이 바로 이 페이지랭크를 높이기 위한 측면의 접근을 합니다 이를테면 어떤 사이트에 들어와서 링크를 남기는 거예요

근데 그 링크가 사람들을 낚기 위한 그런 링크일 수도 있겠지만 자신의 사이트에 대한 링크가 여러 사이트에 많이 퍼져 있을수록 그 사이트의 명성 다시 말해서 페이지랭크가 높아지기 때문에 그 사이트는 더 많은 사람들의 검색결과에 노출될 가능성이 높아지고 더 많은 사람들에게 노출된다는 것은 더 많은 유입으로 이어지고 더 많은 유입이 된다는 것은 더욱 큰 비즈니스 기회를 가질 수 있다 라는 그런 의미이기 때문에 이러한 시스템에 의해서 이 스팸이 기승을 부리게 되는 측면도 있는 것이죠 물론 제가 설명 드리지 못한 페이지랭크는 이것보다 훨씬 더 복잡할 것이고 그리고 제가 설명드린 게 조금은 틀릴 수도 있어요 하지만 대략적인 얘기는 맞을 겁니다 근데 이제 중요한 것은 우리 수업은 html 수업이에요, 검색엔진 수업이 아니고 더더구나 구글이라는 특정 회사에 대한 수업은 더더욱 아니기 때문에 이 페이지랭크가 중요한 것이 아니라 제가 얘기하고 싶은 것은 바로 웹의 본질은 링크에 있다는 얘기를 하고 싶은 겁니다

하이퍼텍스트에 있다 라는 겁니다 그리고 역사를 놓고 봤을 때 이 야후라는 회사가 이, 웹 기업 중엔 제일 잘나가는 회사였던 때가 있었어요

그런데 야후가 굉장히 큰 실수를 하는데 그 실수가 뭐였냐면 검색엔진은 더 이상 사업성이 없다 라고 판단하고 검색엔진에 대한 투자를 중단하면서 구글이라고 하는 신생기업에게 검색엔진 사업을 아웃소싱합니다 맡기는 거죠 그 이후에 구글이 엄청난 성장을해서 지금의 야후는 구글의 상대가 안 되죠 바로 그 구글이 그렇게 성장할 수 있었던 이유는 바로 남들은 이제 검색엔진은 끝났다, 기회가 없다고 생각하는 그 순간에 구글은 웹의 본질이라고 할 수 있는 '링크', '하이퍼텍스트' 그런 기본으로 돌아가서 그 본질을 정확하게 응시했기 때문에 제가 생각하기에는 이런 좋은 기회를 가질 수 있었던 것이 아닐까 라고 생각합니다 그래서 여러분들도 웹이라는 것이 너무나 복잡해졌습니다

너무나 복잡한 때일수록 사실은 본질로 돌아가는 것이 훨씬 더 중요해요 그리고 이, 웹과 관련된 공부를 할 때 처음 하는 게 html이거든요

그래서 소홀해지기 쉽지만 사실은 처음 배우는 게 가장 중요한 겁니다 그리고 이 html이라는 것은 여러분이 웹을 하지 않는 이상, 아닌가요? 웹을 하는 이상, ㅎㅎ, 여러분은 단 한 순간도 html을 떠날 수 없어요 그렇기 때문에 html과 관련된 공부들을 깊게 꾸준히 해나가는 게 굉장히 중요하다라는 것을 제가 강조하기 위해서 검색엔진 파트를 제 수업에 넣은 거니까요, 검색엔진 수업이 아니라 그, 웹이라는 것이 정보로서 너무너무나 중요하다 html를 어떻게 하면 더 정보로서 가치를 높일 수 있을 것인가 라는 거에 대해서 여러분들이 고민을 좀 많이 하셨으면 좋겠다는 의미에서 이 수업을 넣은 겁니다

여기까지 하겠습니다

PWA가 뭔지 3분 동안 설명해줄께 (Introduction to PWA)

이제 이 코스의 마지막 파트야 먼저 PWA가 뭔지, 그리고나서 우리의 웹사이트를 PWA로 만들꺼야 일단 PWA가 뭔지부터 알아보자 PWA(Progressive Web Application)은 웹사이트인데 일반 웹사이트들과 다른 특징을 가지고 있어 첫째는 오프라인을 지원한다는것이고 둘째는 더 빠르고, 알림(notification) 제공 및 홈 스크린에 관여할 수 있다는거야 알다시피 일반적인 웹사이트는 이러한게 없지 하지만 이렇게 PWA로 전환하게되면 app처럼 동작할 수 있게되지 많은 기업들이 이걸 이용하고 있고 (Uber, Tinder,

) 한번 휴대폰으로 이 웹사이트들을 들어가보면 정말 App처럼 느껴지는걸 알 수 있을꺼야 위치기능 지원, 알림, 홈스크린에서 실행 가능 (웹사이트에 갈 필요가 없음) 즉, 홈스크린에 저장했다가 실행할 수 있는거지 정말 앱처럼 느껴질거고 예를 들면 URL을 숨길 수도 있지 그러니깐 좀 더 앱 같이 느껴져 이게 PWA이고 우리가 같이 만들어볼꺼야 PWA라는걸 알아차릴 수 있는 방법은 여기 Application으로 가서? 아 미안 Audits 여기 보면 Lighthouse라는걸 사용하는데 이건 PWA를 위한 스캐너야! 크롬에 built-in(내장)되어있는거지 여기 보면 우리는 auditing을 하고있고 이건 이 웹사이트가 좋거나 나쁘다는걸 말해줄꺼고, PWA인지 아닌지, 그리고 PWA라면 얼마나 빠르게 동작하는지 등을 알려줄꺼야 확인해 보자! SEO는 82고, PWA지수(?)는 58이라고 알려주네 즉 이건 PWA 앱이 아니야

그러나 구글 번역기를 살펴보자 이건 웹앱이야 내가 휴대폰에 설치했거든 한국어를 영어로 번역할 때 자체 splash 스크린을 열어줘 그리고 구글 번역기로 이동하지

Lighthouse는 온라인, 오프라인으로 둘다 접속을 시도하고 매우 느린 CPU, Wi-Fi 환경에서도 실험해봐 아주 좋지! 점수를 확인해보니까

그렇게 좋은 application은 아니네! 우리는 이 Performance를 100을 만드는데 집중할꺼고 이 4개를 100으로 만드는데 집중할꺼야 최소한 90 이상으로는 되도록

이게 다야! 이 코스의 마지막 부분인 다음 시간에 보자

Introducing Wptobe WordPress Theme

워드프레스는 아주 쉽다던데 테마깔고 플러그인 깔면 여행사도 나오고 재능거래도 나온다고 하던데 테마깔고 플러그인깔면 된다고 하던데 테마 찾고,결제하고, 인스톨, 오 디자인이 짠! 아싸! 플러그인 이것도 필요하고 저것도 필요하고 인스톨 인스톨 인스톨 내가 인스톨 장인이지 ! 어?디자인이 깨지네? 근데 수정은 어떻게 하라는거지? 기능하고 디자인은 어떻게 연결하지? 도대체 소스는 어디있는거야? 그래서 나왔습니다 인터넷 사업전문 워드프레스 빌더! 가로 섹션으로 나눠디자인해서 각 섹션을 드래그앤드랍으로 넣고 빼고 옮기실 수 있는 빌더가 있습니다

워드프레스로 기능성 웹사이트를 만드시려면 워프토비가 필수입니다 공짜지요! 라이센스없지요! 100% 오픈소스입니다 그냥 사용하시면 됩니다 워프토비를 설치하시시고 추가하실게 있으시면 WPTOBECOM으로 가셔서 원하시는 디자인섹션을 다운로드하시고 플러그인인스톨을 합니다 인스톨이되면 외모/위젯 메뉴에 디자인이 뜹니다 원하시는곳에 드래그앤 드랍하시면 끝! 디자인이 완성되셨으면 워프토비 회원관리 플러그인을 설치합니다 쪽지,회원관리,포인트 기능이 다되는 기능성 워드프레스 웹사이트 완성!