Babymetal club

#5일 #반응형 #리뉴얼 #정규식(Regex) #GSAP #jQuery #Lenis #미디어 쿼리

📌 code review

1. Lenis를 활용한 부드러운 스크롤 구현

Lenis는 페이지의 스크롤을 부드럽게 처리하는 데 사용되었습니다.

const lenis = new Lenis()

lenis.on('scroll', (e) => { })

function raf(time) {
  lenis.raf(time)
  requestAnimationFrame(raf)
}
requestAnimationFrame(raf)

requestAnimationFrame를 활용한 자연스러운 프레임 업데이트로 스크롤 퍼포먼스를 높였습니다.

2. 스크롤 연동 수평 슬라이드

gsap.to(slides, {
  xPercent: -97 * (slides.length - 1),
  scrollTrigger: {
    trigger: '.page',
    start: 'top top',
    end: "+=3000",
    scrub: 1,
    pin: true,
    onUpdate: () => {
      updateScaleAnPosition()
    }
  }
})

GSAP의 ScrollTrigger를 활용해 스크롤에 따라 수평 슬라이드를 구현했습니다. 사용자가 스크롤할 때마다 슬라이드가 자연스럽게 좌우로 이동하며, updateScaleAnPosition()을 통해 중앙에 가까운 슬라이드를 확대해 시각적 집중도를 높였습니다.

3. 랭킹 섹션 자동 롤링 + 클릭 이벤트

setInterval(function () { ... }, 3000);
$('.rank ul li').click(function () { clearInterval(stop); });

eq(n)을 사용하여 보여줄 순위 항목만 show()로 처리하고, 불필요한 DOM 업데이트를 피하여 성능을 최적화했습니다.

4. 무한 롤링 섹션

var render = function () {
  move += 1;
  listClone.css({ transform: 'translateX(' + -move + 'px)' })
  timer = window.requestAnimationFrame(render)
}

무한 롤링 섹션에서는 리스트를 복제하여 양방향으로 계속해서 슬라이딩이 이루어집니다. requestAnimationFrame을 사용해 자연스러운 슬라이딩을 구현하고, 일정 시간 간격으로 복제를 추가해 콘텐츠가 끊김 없이 이어지게 했습니다.

💡requestAnimationFrame이 너무 빠르게 도는 경우 move 증가량을 1 이상으로 조절하거나 setTimeout 보간을 섞어도 좋습니다.

5. 상단 버튼 기능

사용자가 페이지를 스크롤한 후 상단으로 쉽게 돌아갈 수 있도록 하여 UX를 개선했습니다.

$('.to_top').click(function (e) {
  e.preventDefault();
  $('html, body').animate({ scrollTop: 0 }, 600);
});

페이지 스크롤 위치에 따라 상단 버튼을 숨기거나 표시하며, 버튼 클릭 시 부드럽게 페이지 상단으로 이동합니다.

6. 타이핑 효과

타이핑 효과를 구현하여 웹 페이지에 동적이고 흥미로운 요소를 추가했습니다. 한 글자씩 타이핑되고, 일정 시간 후에 백스페이스가 적용되는 구조로 구현되었습니다.

function typeLetter() {
  const word = words[wordIndex];
  ...
  element.textContent = textToType;
}

전통적인 타이핑 로직 direction, letterIndex, setInterval(한 글자씩 출력 → 글자 완성 후 일정 시간 유지 → 다시 백스페이스)을 이용하여 타이핑 효과를 구현하였습니다. 단순한 구조지만 반복성과 속도 조절을 통해 사용자의 주목을 유도하였습니다.

7. 회원가입 페이지

회원가입 페이지는 사용자 입력을 효율적으로 처리하고, 유효성 검사를 통해 사용자 경험을 향상시키기 위해 여러 유용한 기능을 포함하고 있습니다. 주요 기능은 이메일, 비밀번호, 비밀번호 확인 필드에 대한 유효성 검사로, 이로 인해 오류를 미리 방지하고 올바른 데이터만 받도록 하였습니다.

1. 이메일 유효성 검사

회원가입 폼에서 이메일 입력란에 정규식을 사용하여 이메일의 형식을 검사하고 있습니다. 이메일 형식에 맞지 않는 입력이 들어오면 오류 메시지를 출력하여 사용자가 입력을 수정할 수 있도록 유도합니다.

function checkId() {
  var idPattern = /^[a-zA-Z0-9_-]{5,20}$/;
  if (!idPattern.test(id.value)) {
    error[0].innerHTML = "5~20자의 영문 소문자, 대문자, 숫자와 특수기호(_),(-)만 사용가능합니다.";
    error[0].style.display = "block";
  } else {
    error[0].innerHTML = "멋진 아이디네요.";
    error[0].style.display = "block";
    error[0].style.color = "#80a600";
  }
}

이메일 입력란에서 사용자가 특정 규칙을 따르지 않으면 오류 메시지를 표시하는 방식으로 유효성 검사를 수행합니다. 다만, 실제 이메일 유효성 검사에서는 더 복잡한 정규식이나 서버 측 검증이 필요할 수 있습니다.

2. 비밀번호 유효성 검사

비밀번호 입력란에서도 정규식을 사용하여 8~16자의 비밀번호가 영문 대소문자, 숫자, 특수문자를 포함하는지 검사합니다. 이 과정은 사용자가 안전한 비밀번호를 설정하도록 유도하는 중요한 역할을 합니다.

function checkPw() {
  let pwPattern = /^[a-zA-Z0-9~!@#$%^&*()_+|<>?:{}]{8,16}$/;
  if (!pwPattern.test(pw1.value)) {
    error[1].innerHTML = "8~16자 영문, 대소문자, 숫자, 특수문자를 사용하세요";
    error[1].style.display = "block";
  } else {
    error[1].style.display = "none";
    pwMsg.innerHTML = "안전";
    pwMsg.style.display = "block";
    pwMsg.style.color = "#03c75a";
  }
}

이 코드에서는 비밀번호의 형식을 체크하고, 유효하지 않으면 오류 메시지를 표시하고, 유효하면 "안전" 메시지와 함께 긍정적인 피드백을 줍니다.

3. 비밀번호 확인 일치 검사

비밀번호 확인란에서는 첫 번째 비밀번호와 두 번째 비밀번호가 일치하는지 검사하는 로직이 있습니다. 사용자가 비밀번호를 두 번 입력할 때 실수로 다른 값을 입력하지 않도록 돕습니다.

function comparePw() {
  if (pw1.value === pw2.value && pw2.value !== "") {
    pwImg2.src = "img/m_icon_check_enable.png";
    error[2].style.display = "none";
  } else {
    pwImg2.src = "img/m_icon_check_disable.png";
    error[2].style.display = "block";
    error[2].innerHTML = "비밀먼호가 일치하지 않습니다.";
  }
}

이 검사는 두 비밀번호가 일치하는지 확인하고, 일치하지 않으면 오류 메시지를 출력하여 사용자가 실수를 수정할 수 있도록 합니다.

4. 사용자 이름 유효성 검사

사용자 이름 입력란에서는 영문과 한글만 허용하며, 공백을 제외한 특수 문자가 포함되지 않도록 정규식을 활용하여 검증합니다. 이 검사는 사용자 이름이 올바른 형식인지 확인하고, 불필요한 공백이나 특수 문자가 포함되지 않도록 합니다.

function checkName() {
  let namePattern = /^[a-zA-Z가-힣]*$/;
  if (!namePattern.test(username.value) || username.value.indexOf(" ") > -1) {
    error[3].style.display = "block";
    error[3].innerHTML = "한글과 영문 대소문자를 이용하세요(특수기호, 공백 사용 불가)";
  } else {
    error[3].style.display = "none";
  }
}

이 코드는 이름 필드에서 허용되지 않은 문자나 공백이 포함되지 않도록 처리합니다.

이번 프로젝트에서는 GSAP과 Lenis를 적절히 활용하여 부드러운 스크롤과 다양한 애니메이션 효과를 구현하였으며, jQuery를 사용하여 UI를 효율적으로 구성했습니다. 각 콘텐츠마다 scroll, pin, trigger를 적절히 사용하여 한 페이지 내에서도 풍부하고 다채로운 사용자 경험을 제공하였고, 재사용 가능한 .model-images 및 슬라이드 애니메이션을 분리하여 유지보수의 용이성을 높였습니다.

또한, 회원가입 창에서는 이메일과 비밀번호의 유효성 검사를 정규식으로 구현하여 사용자 입력을 검증하고 보안을 강화했습니다. UI는 직관적으로 구성되어 사용자가 원활하게 탐색할 수 있도록 설계되었습니다.