네이버 레이아웃 따라서 만든 후기

NAVER fullpage Layout

예전에 네이버 웹사이트를 만들면서 새로 알게 되거나 느꼈던 점을

마구잡이로 적어뒀던 글을 발견하고 이번 기회에 포스팅하면서 정리해보려고 한다. 

포스팅하면서 현재 코멘트 할 부분이 있다면 추가도 하고:)

 

 

우선, 네이버 페이지 레이아웃 재현하고자 했던 당시의 목적은 두 가지 였다.

• 강의를 보고 따라 만드는 클론코딩이 아닌 온전히 혼자 힘으로 웹사이트 레이아웃 제작해본다.
• 가장 대중적이고 대표적인 웹 사이트는 어떤식으로 만들어졌는지 파악한다. 

 

 

열심히 해보겠다고 인터넷 강의를 구매하여 공부 하다보니 강의 영상으로 학습하는 것에 익숙해져서

강의를 다 보고 혼자서 해보는 시간을 갖질 않으니 기억에 오래 남지가 않았다. 

나중에는 새로운 지식을 습득 하는 것에만 급급해서 html과 css의 기초적인 부분도 까먹을 지경에 이르렀었다.

 

이때, 실질적인 학습 방법에 대해 생각해보았고 답은 역시 하나부터 열까지 직접 구현해보는 것 말고는 없었다.

공부하기에 너무 어렵지 않으면서 최신 기술에 대한 반영이 빠른, 소위 배울 게 많은 사이트가 무엇이 있을까 고민하다가

네이버 사이트를 만들어보기로 결정했다.

---

다 만들고 후술하는 것이지만 적어도 비교적 최신(?)의 기술인 flex나 grid가 사용됐을 것으로 예상했으나, 

브라우저 지원성 때문인지 의외로 아직까지 float을 사용해서 만든 페이지를 사용하고 있었다.

따라서 최신 코드 작성 동향을 파악하고자 했던 목적은 모호해졌다..

 

그래도, 몰랐던 부분에 대해 알게 된 것이 있으니 정리해보겠다 !

 

1. 이미지 스프라이트 (IS)

 

스프라이트 이미지

네이버에서는 이미지 파일을 관리하는 기법으로 이미지 스프라이트를 사용했다.

이미지 스프라이트(image sprite)란 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 것를 의미한다.

 

웹 페이지에 이미지가 사용될 경우 해당 이미지를 다운받기 위해 웹 브라우저는 서버에 이미지를 요청하게 된다.

이럴 때 사용된 이미지가 많으면 웹 브라우저는 서버에 해당 이미지의 수만큼 요청을 해야하므로 웹 페이지의 로딩 시간이 오래 걸리게 된다.

이럴 때, 이미지 스프라이트 기법으로 여러 개의 이미지를 하나로 합쳐서 관리하면 실질적으로는 한개의 스프라이트 이미지만 불러오면 돼서 간편하고 로딩 시간 또한 단축해준다. 

실제 사용할 때는 background-position의 x, y 좌표로 원하는 이미지를 브라우저에 보여주게 된다.

 

https://products.aspose.app/html/ko/css-sprite-generator

CSS 스프라이트 생성기 - 한 번의 클릭으로 이미지를 CSS 스프라이트에 병합!

+ 스프라이트 생성기를 이용하면 이미지를 쉽게 병합해준다 :)

 

 

 

2. float 후처리

float 후처리

예전에 국비지원 수업을 들을 때 float을 사용하면 레이아웃이 흐트러질 수 있어서, 이에 대한 대응법으로 해당 플롯 요소의 부모 요소에 클리어픽스(clearfix)처리를 해주는 것을 배운 적이 있다. 그 동안 flex에 익숙해져 있어서 잊고 있었는데,

네이버에서는 float을 주로 사용했기 때문에 당연히 clearfix 처리도 해주었는데 기존에 알고 있던 것과는 약간 달랐다. 

 

기존

display:block;
content: "";
clear: both

 

네이버

content: "";
display: table;
table-layout: fixed;
clear: both;

 

 

 

3. 인접 형제 선택자(adjacent sibling combinator)

인접 형제 선택자 사용

기존에는 li 요소에 이렇게 간격을 줄 때 nth-first 혹은 last child로 처음이나 끝 요소의 간격을 배제하거나 부정연산자 not을 이용하는 방법 정도 알고 있었는데 새로운 방법을 알게 됐다. 그것은 바로바로 인접 형제 선택자. 

 

E+F   E요소를 뒤따르는 F요소를 선택한다. (E와 F 사이에 다른 요소가 있으면 선택되지 않는다.)

 

 

 

4. 무한 루프 슬라이드 banner

무한 루프 슬라이드

무한 루프 슬라이드는 웹사이트에서 많이 사용되는 애니메이션이기 때문에 필수로 알아둬야하는데,

라이브러리를 사용하지 않고 스크립트로 작성하면서 자바스크립트를 공부했었다.

 

원리를 이해하면 크게 어렵지는 않았다.

 

function makeClone() {
  let cloneSlide_first = slides[0].cloneNode(true)
  let cloneSlide_last = slideWrap.lastElementChild.cloneNode(true);
  slideWrap.append(cloneSlide_first)
  slideWrap.insertBefore(cloneSlide_last, slideWrap.firstElementChild)
}
function initFunction(){
  slideWrap.style.width = slideWidth * (slideCount + 2 ) +'px'
  slideWrap.style.left = -slideWidth + 'px'
}

전체가 4개의 슬라이드라면 첫번째 슬라이드(index:0)를 복제하여 마지막에 붙여주고, 마지막 슬라이드(index:3)를 복제하여 첫번째 슬라이드 앞에 붙여줘서 총 6개의 슬라이드를 만들어준다. 복제한 슬라이드는 단순히 눈속임용으로 만들어준 것이다.

그러므로 실제로 유저에게 보여질 때는 3clone이 아닌 index: 0부터 보여져야한다. 위치 초기화 함수를 initFunction 함수로 만들어주었다.

if (curIndex <= slideCount - 1) {
    slideWrap.style.left = -(curIndex + 2) * slideWidth + 'px';
    slideWrap.style.transition = `${0.5}s ease-out`; //이동 속도
  }

그리고 next를 클릭했을 때 코드인데, slideWrap이 왼쪽으로 이동하면서 viewbox에 보여져야하기 때문에 -px로 속성값을 줘야한다.

처음엔 인덱스가 0이고, 슬라이드 두개만큼 (3clone + index:0 슬라이드 너비의 합) 왼쪽으로 이동해야하기 때문에 curIndex + 2를 해주는 것이다. prev도 같은 원리로 만들어진다.

const slideWrap = document.querySelector('.slide_wrap');
const slide = document.querySelector('.slide_item');
const slides = document.querySelectorAll('.slide_item');
let curIndex = 0;
const slideCount = slides.length;
const slideWidth = slide.offsetWidth;
const prevBtn = document.querySelector('.card_nav .btn_prev')
const nextBtn = document.querySelector('.card_nav .btn_next')
//처음 슬라이드 마지막 슬라이드 복사 함수
makeClone()
//슬라이드 넓이와 위치값 초기화 함수
initFunction()

//무한 루프 슬라이드
function makeClone() {
  let cloneSlide_first = slides[0].cloneNode(true)
  let cloneSlide_last = slideWrap.lastElementChild.cloneNode(true);
  slideWrap.append(cloneSlide_first)
  slideWrap.insertBefore(cloneSlide_last, slideWrap.firstElementChild)
}
function initFunction(){
  slideWrap.style.width = slideWidth * (slideCount + 2 ) +'px'
  slideWrap.style.left = -slideWidth + 'px'
}

nextBtn.addEventListener('click', function () {
  if (curIndex <= slideCount - 1) {
    slideWrap.style.left = -(curIndex + 2) * slideWidth + 'px';
    slideWrap.style.transition = `${0.5}s ease-out`; //이동 속도
  }
  if (curIndex === slideCount - 1) {
    setTimeout(function () {
      slideWrap.style.left = - slideWidth + 'px';
      slideWrap.style.transition = `${0}s ease-out`;
    }, 500);
    curIndex = -1;
  }
  curIndex += 1;
  console.log(curIndex)
});

prevBtn.addEventListener('click', function () {
  if (curIndex >= 0) {
    slideWrap.style.left = -(curIndex * slideWidth) + 'px';
    slideWrap.style.transition = `${0.5}s ease-out`;
  }
  if (curIndex === 0) {
    setTimeout(function () {
      slideWrap.style.left = - slideCount * slideWidth + 'px';
      slideWrap.style.transition = `${0}s ease-out`;
    }, 500);
    curIndex = slideCount;
  }
  curIndex -= 1;
  console.log(curIndex)
});

// // 자동 변환 추가
// function moveSlide(){
//   if(curIndex <= slideCount - 1) {
//     setTimeout(()=> {
//       slideWrap.style.left = -(curIndex + 1) * slideWidth + 'px';
//       slideWrap.style.transition = `${0.5}s ease-out`; //이동 속도
//     }, 500)
//   }
//   if (curIndex === slideCount - 1) {
//     setTimeout(function () {
//       slideWrap.style.left = - slideWidth + 'px';
//       slideWrap.style.transition = `${0}s ease-out`;
//     }, 500);
//     curIndex = -1;
//   }
//   curIndex += 1
//   console.log(curIndex)
// }
// function autoSlide(){
//   setInterval(moveSlide, 2000)
// }

// autoSlide()

 

무한 루프 슬라이드를 구현하면서 헷갈렸던 부분만 정리해보자면,

if(curIndex <= slideCount - 1), if (curIndex === slideCount - 1) 조건을 보면서 처음에는 if (curIndex === slideCount - 1) 조건은 if(curIndex <= slideCount - 1)의 부분 집합이 아닌가? 왜 따로 사용하지? 생각했다.

이유는 간단했다. 동시에 다른 동작을 보여주기 위함이다. nextBtn을 누르다 보면 보여지는 마지막 슬라이드(index:3)에 다다른다. 그리곤 버튼을 눌렀을 때 아무런 반응이 없는 일반적인 슬라이드와는 다르게 무한 슬라이드는 index:0번 슬라이드를 미리 복제해둔 0clone 슬라이드로 이동해야하는데 이동함과 동시에 실제 index:0으로 돌아와야한다. 이때 transition:0s로 사용자의 눈을 속이면서 매우 빠르게 돌아오는데 이와 동시에 마치 index3에서 0clone 슬라이드로 이동하는 듯 보여야하기에 (curIndex < slideCount - 1)이 아닌 (curIndex <= slideCount - 1)조건을 사용하는 것이다. console로 인덱스를 찍어보면서 하나하나 분석하다보니 이해를 할 수 있었다.