반응형 홈페이지 만들 때 고민해 보았던 것들

반응형 홈페이지 만들기

반응형 페이지는 만들어 보기는 했지만 적응형 페이지를 더 많이 만들었습니다. 해서 반응형 페이지에 대해서 어떻게 요소들이 커져야 하는지에 대해 구체적으로 고민해 본적은 없었는데 반응형 작업을 할 일이 많이 생기면서 생각해 본 것들을 적어봅니다. 막연하게 반응형 페이지라 하면 분기점이 지나면서 스타일이 변하는 것 또는 커지는 것을 생각하게 됩니다. 정말 막연해서 하라는걸 하지 뭐 .. 기획대로 하지 뭐 .. 하는 생각을 했었는데 고민해본 것들을 이번 기회에 정리해봅니다. 

 

반응형 페이지에서 어떻게 이미지가 커져야 할까?

 

제가 지금 만들고 있는 페이지의 분기점은 768px, 992px 분기점을 가지고 모바일 사이즈부터 제작하고 있습니다. 모바일에서 타블릿으로 그리고 데스크 탑으로 변하는 과정에서 생각해보아야 할 것은 어떤 효과로 요소들을 보여줘야 할지 입니다. 해상도가 점점 커지면서 크게 두가지로 나누어 생각해 볼 수 있습니다. 

 

1. 일정 px에 도달하면 그 이상 요소가 커지지 않고 양 옆 여백이 넓어지는 효과

2. 여백은 고정 px이되 요소가 같은 비율로 커지는 효과

 

1. 일정 px에 도달하면 그 이상 요소가 커지지 않고 양 옆 여백이 넓어지는 효과

이메일 코딩을 할 때에도 이런 방식으로 했었는데  max-width 를 사용합니다. max-width에 도달하기 전까지는 디자인 요소가 점점 커지다가 설정해둔 max-width에 도달하면 그 순간부터 여백이 넓어지는 형식입니다. 요소는 가운데 정렬 되있겠죠? 모바일 최소 사이즈를 min-width로 설정해주면 좋겠죠? 어떤 사용자가 해상도 늘어졌다 줄어들었다 보면서 틀린그림 찾아내랴마는 그래도 화면이 틀어지는 순간이 보여지는건 싫으니까요 ㅎㅎ

tmi 이지만 저는 이 효과를 후자 보다 더 좋아합니다. 후자는 점점 화면이 커지게 되면서 모바일 ~ 타블릿 해상도에서 같은 디자인을 사용하는 요소들이 비대해 보이는 순간들이 있기 때문입니다. 

 

2. 여백은 고정px이고 요소가 같은 비율로 커지는 효과

이미지가 같은 비율로 커지게 하려면 어떻게 해야할까요 ? 요소의 width는 100%일테고 세로 값은 고정px을 줄 수 없습니다. 왜냐하면 width가 화면 너비에 맞춰 커질때 height도 같이 늘어나야 하기 때문이죠. 이 때 사용하는 방법이 wrapper div에 width: 100%; height: 0;을 주고 padding-bottom: 34% 이런 식으로 주면 가로 세로 비율에 맞게 비디오, 이미지 비율을 유지 할 수 있습니다. 

 

해상도 새로고침

마지막으로 화면 해상도가 변할때 마다 새로고침하는 기능입니다. 저는 이부분에 대해서 작업을 하면서 두어번 정도 고민해본적이 있습니다. 왜냐, 슬랙이나 스와이퍼 같은 플러그인을 사용하다 보면 대게 모바일에서는 플러그인을 사용하고 그렇지 않은 경우 slick을 제거 하는데 이때에 해상도가 분기점을 지나 변할 때 새로고침을 하지 않으면 기존 레이아웃이 유지되기 때문입니다. 사실상 사용자 입장에서는 필요하지 않을 수 있습니다. 사용자는 제작자처럼 화면늘 늘렸다 줄였다를 할 필요가 없기 때문에죠. 하지만 제작하다보면 여간 신경쓰이지 않을 수 없습니다. 컨펌을 받을 때도 마찬가지 입니다. 해서 저는 스크립트에 분기점을 지날 때마다 새로고침 하는 코드를 넣어줍니다. 

window.onresize = function (){
  document.location.reload();
}

그냥 아래와 같이 작성하면 실제 모바일에서 테스트 하면 스크롤을 내릴때 핸드폰 아래 내장 nav-bar가 나타나서 해상도 변화가 일어나면서 계속 새로고침이 됩니다. 그래서 pc에서만 가능하게 해둔 것이죠. 어짜피 모바일에서는 화면을 늘리고싶어도 늘려볼 수 없으니까요.

 

굳이 slick 이나 swiper같은 플러그인을 사용하지 않아도 사용하는 이유는 데스크탑으로 모바일 화면을 만들어 볼 때 클릭 이벤트가 잘 먹히지 않기 때문이었어요. 물론 모바일에서 보면 문제가 없지만 이 또한 컨펌을 할 때 동작이 안되는 것처럼 보이지만 slick이나 swiper를 사용하면 클릭 드래그도 잘동작했습니다. 하지만 click 드래그 스와이프 또한 아래와 같은 코드로 플러그인을 사용하지 않고 해결할 수 있습니다.

    const slider = document.querySelector('.tab-wrap');
    let isMouseDown = false;
    let startX, scrollLeft;
 
    slider.addEventListener('mousedown', (e) => {
      isMouseDown = true;
      slider.classList.add('active');
 
      startX = e.pageX - slider.offsetLeft;
      scrollLeft = slider.scrollLeft;
    });
 
    slider.addEventListener('mouseleave', () => {
      isMouseDown = false;
      slider.classList.remove('active');
    });
 
    slider.addEventListener('mouseup', () => {
      isMouseDown = false;
      slider.classList.remove('active');
    });
 
    slider.addEventListener('mousemove', (e) => {
      if (!isMouseDown) return;
 
      e.preventDefault();
      const x = e.pageX - slider.offsetLeft;
      const walk = (x - startX) * 1;
      slider.scrollLeft = scrollLeft - walk;
    });