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

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

Swiper-slider로 반응형 작업할 때 이미지 사이즈에 따라서 높이 지정하기

작성자:

 Swiper 슬라이더를 사용하면 웹페이지에 쉽게 슬라이드 기능을 삽입할 수 있습니다.

심지어는 반응 형 웹을 개발할 때도 옵션 만으로 쉽게 반응 형 기능을 구현할 수 있습니다.

autoHeight : true;

위와 같이 옵션을 주면 이미지의 넓이에 맞춰서 이미지의 높이가 자동 조절됩니다. 

하지만 이미지의 크기가 그리 크지 않을 때에는 화면을 줄임에 따라 이미지의 높이가 자동 

조절 되면서 이미지가 너무 작아져 버리는 문제가 생깁니다. 

그래서 이미지가 줄어들 때 이미지의 넓이에 맞춰서 높이를 강제 지정해 주어야 하는 것이

필요할 때도 생깁니다.   

<body>
    <section class="main swiper mySwiper">
      <div class="wrapper swiper-wrapper">
        <div class="slide swiper-slide">
          <img src="images/img01.jpg" alt="" class="image" />
        </div>
        <div class="slide swiper-slide">
          <img src="images/img02.jpg" alt="" class="image" />
        </div>
        <div class="slide swiper-slide">
          <img src="images/img03.jpg" alt="" class="image" />
        </div>
      </div>
      <div class="swiper-button-next nav-btn"></div>
      <div class="swiper-button-prev nav-btn"></div>
      <div class="swiper-pagination"></div>
    </section>

    <!-- Swiper JS -->
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
      var swiper = new Swiper(".mySwiper", {
        slidesPerView: 1,
		autoplay: {     //자동슬라이드 (false-비활성화)         
		    delay: 2500, // 시간 설정          
		   disableOnInteraction: false, // false-스와이프 후 자동 재생        
		},
        loop: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });
    </script>
  </body>

위의 코드는 Swiper 슬라이더에서 제공해 주는 기본 코드 중에 하나 입니다.

브라우저의 화면 크기에 따라 높이도 자동으로 조절되는 듯이 보이지만 마우스를 이용

해서 브라우저의 넓이를 서서히 줄이면 높이가 변하지 않고 그대로 유지 됩니다.

마우스를 이용해서 브라우저의 크기를 변경할 때는 아래와 CSS 코드를 만들어 주시면

됩니다.

  <style>
	@media screen and (max-width: 1024px) {
            .swiper{
		height: 650px !important;
            }
    }

	@media screen and (max-width: 768px) {
            .swiper{
		height: 450px !important;
            }
    }
  </style>

Swiper 슬라이더를 아래와 같이 CDN으로 사용하므로 ! important 선언을 해서 height 속성의 우선 순위를 높여 줍니다. 


    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
    />

댓글

댓글 쓰기