Hanacard

#1일 #적응형 #웹접근성 #시맨틱 마크업 #jQuery #slick slider

📌 code review

1. Slick 슬라이드 기본 구성

let eb_slider = $('.eb_slider_list');
eb_slider.slick({
    arrows: false,
    dots: true,
    autoplay: true,
    pauseOnHover: false,
    fade: true
});

autoplay + fade 옵션을 통해 부드러운 콘텐츠 전환을 구현했습니다.

2. 정지 / 재생 버튼 구현

$('.event_box2 .btn_stop').click(function(e){
    e.preventDefault();
    if($('.event_box2 .page_act').hasClass('on')){
        $('.event_box2 .page_act').removeClass('on');
        eb_slider.slick('slickPause');
    }
});

.on 클래스의 유무로 정지/재생 상태를 구분하여 시각 피드백 제공하고, 사용자 조작 시 자동롤링 중단 후 명확한 피드백 제공하여 UX를 강화했습니다.

3. 두 개의 독립된 슬라이더 관리

$('.card').slick({
    arrows:false,
    dots:true,
    autoplay:true,
    pauseOnHover:false,
    fade:true,
});

.eb_slider_list 와 .card 슬라이더 각각 독립적으로 구성하고, 각 슬라이더에 별도의 정지/재생 버튼 부여해 사용자 제어 강화했습니다.

4. 탭 메뉴

let tab = $('.life_menu ul li');
let menu = $('.life_style ul li');

tab.mouseover(function(){
    let index = $(this).index();
    menu.css({opacity: 0});
    menu.eq(index).css({opacity: 1});
});

mouseover 이벤트로 콘텐츠 전환하여 즉각 반응하는 인터랙션 구현하고, opacity를 이용해 부드럽게 콘텐츠를 바꾸면서 시각적 이질감 최소화하였습니다.

이번 프로젝트는 웹 개발 역량 강화를 목표로 jQuery 기반의 Slick Slider 라이브러리를 활용하여 시멘틱 마크업, 웹 접근성, 다양한 스크립트 구현을 진행하였으며, PC에 최적화된 적응형 웹사이트입니다.

Slick 슬라이더를 구역마다 따로 제어하고, 선택자 범위가 명확하여 유지 보수에 유리한 jQuery를 사용했습니다. Slick 슬라이더를 중심으로 콘텐츠 흐름을 세심하게 제어하고, 자동 롤링되는 슬라이드, 정지/재생 버튼, 탭 메뉴 등 직관적인 사용자 인터페이스를 jQuery와 Slick을 활용해 직관적인 웹을 구현하였습니다.