20년 동안 웹사이트를 운영하며 느낀 네이버 검색 등록의 변화 한 개발자

작성자:
  한 개발자의 경험과 개인적인 추측 웹사이트를 개발하고 운영하다 보면 가장 많이 듣는 질문 중 하나가 있습니다. "왜 구글에는 등록되는데 네이버에는 등록되지 않을까요?" 저 역시 이 질문을 수없이 받아왔습니다. 20년 동안 다양한 웹사이트를 개발하고 운영하면서 구글과 네이버에 많은 사이트를 등록해 왔고, 그 과정에서 검색엔진의 변화도 함께 지켜보았습니다. 먼저 한 가지 분명히 말씀드리고 싶습니다. 이 글은 네이버 검색 알고리즘의 정답을 설명하는 글이 아닙니다. 저는 네이버 개발자가 아니며, 내부 검색 알고리즘이나 심사 기준을 알 수 있는 위치에 있지 않습니다. 따라서 이 글은 약 20년 동안 웹사이트를 운영하면서 직접 경험했던 사례를 바탕으로 정리한 개인적인 의견이며, 실제 정책과는 다를 수 있습니다. 검색엔진은 계속 발전하고 있기 때문에 내일 알고리즘이 변경된다면 이 글의 내용 역시 언제든 달라질 수 있습니다. 예전에는 지금보다 검색 등록이 조금 더 수월했던 기억이 있습니다 제가 웹 개발을 시작했던 2000년대 후반부터 2010년 전후만 하더라도 네이버 검색 등록은 지금보다 비교적 단순했던 것으로 기억합니다. 물론 당시에도 등록이 보장되는 것은 아니었지만, 현재처럼 다양한 조건을 고려하는 느낌은 상대적으로 적었습니다. 하지만 시간이 지나면서 검색 품질에 대한 관심이 높아졌고, 네이버 역시 사용자에게 더 신뢰할 수 있는 검색 결과를 제공하기 위해 검색 시스템을 지속적으로 개선해 온 것으로 보입니다. 이러한 변화는 오랫동안 웹사이트를 운영한 개발자라면 한 번쯤 체감해 보셨을 것이라고 생각합니다. 구글과 네이버는 검색을 바라보는 방식이 조금 다르게 느껴졌습니다 제 경험으로는 구글과 네이버는 검색 등록 과정에서 접근 방식에 차이가 있는 것처럼 보였습니다. 구글은 robots.txt, sitemap.xml, meta title, meta description, 구조화된 HTML 등 일반적으로 알려진 SEO 요소를 충실히 적용하면 비교적 빠르게 크롤...
댓글 쓰기

css 이미지 뒤에 공백 제거하기

작성자:

아래 html 소스는 공간 분할 태그인 <div>에 이미지 태그<img>를 담고 있는  일반적인 소스입니다. 

<!doctype html>
<html lang="ko">
 <head>
  <meta charset="utf-8">
  <title>이미지 공백예제</title>
  <style>
    * { margin:0; auto; }
    #container { position:relative; width:100%; }
	#main_img { width:100%; height:auto; text-align:center;}
	#content { width:1200px; height:100px; margin:0 auto; background-color:#ff0000; }
	#notice { width:1200px; height:100px; margin:0 auto; background-color:#00ff00; }
  </style>
 </head>
 <body>
   <!--- container start ---->
   <div id="container">
     <!--- main image start ---->
     <div id="main_img">
	   <img src="https://www.allnek.com/all/common_img/fish02.jpg" alt="이미지설명">
	 </div>
	 <!--- main image end ---->
	 <div id="content">
	 </div>
	 <div id="notice">
	 </div>
  </div>
  <!--- container end ---->
 </body>
</html>

그런데 실행을 해보면 이미지 하단에 얇은 공백이 생기게 됩니다. 이유는 <img>태그는 inline level 요소이기 때둔에 텍스트처럼 수직정렬 기본 값이 baseline 이라는 것입니다.  

baseline 기준으로 정렬된 inline level 요소는 알파벳의 g, y, p, g, q 등과 같은 하강 문자(descender)를 위해 아래쪽에 공간을 필요로 하게 되고 <img>태그도 inline level 요소이기 때문에 아래쪽에 공백이 생기게 되는 것입니다.

해결법

아래 소스 같이 부모 태그에 display:flex와 flex-direction:column 설정해 주면 해결 됩니다

<style>
    * { margin:0; auto; }
    #container { position:relative; width:100%; display:flex; flex-direction:column; }
    #main_img { width:100%; height:auto; text-align:center;}
    #content { width:1200px; height:100px; margin:0 auto; background-color:#ff0000; }
    #notice { width:1200px; height:100px; margin:0 auto; background-color:#00ff00; }
  </style>

댓글

댓글 쓰기