jeep renewal coding

JEEP RENEWAL PROJECT

브랜드 JEEP를 모바일, PC 두 버전을 리디자인 후 적응형으로 퍼블리싱하였습니다. SWIPER 플러그인을 활용해 슬라이드를 구현하였고 스크롤 애니메이션 및 간단한 JSON 데이터 바인딩을 활용하였습니다. 인터랙티브한 사이트 제작에 중점을 둔 프로젝트입니다.

기여도 : 디자인 100%, 개발 100%

글꼴 : NOTOSANS

WEBSITE
- MAIN PAGE
- SUB PAGE
MOBILE

PROJECT MAIN TASK

인터랙션 옵저버 (스크롤 애니메이션)

1. 감시자 객체 설정하기

2. 관찰 대상 설정하기

3. if (관찰 대상 트루 조건 시) 실행 코드 입력
로컬 스토리지를 활용한 페이지간 연동

1. 서로 다른 페이지 버튼 간 클래스 통일하기

2. change 이벤트 발생 시 로컬 스토리지에 상태 변경하기

3. 브라우저 로드 시 변경 사항 있으면 페이지 새로 고침
CSS Grid를 통한 액자식 레이아웃 구성

1. 아이템 컨테이너에 display grid 선언

2. Column Row 줄 나누기, 영역 선언

3. 자식 아이템에 영역 지정하기
두 개 스와이퍼 버튼 별 실행

1. 스와이퍼 cdn 링크 설정

2. 슬라이드 별 마크업 및 CSS 진행

3. 스와이퍼 별 js 세부 설정

4. 스와이퍼 id 삽입, CSS 지정
선택 슬라이드 제목 바인딩(값 찾아서 할당하기)

1. 클릭된 상태가 될 요소 변수 선언

2. this와 find()를 이용해 이벤트 대상 변수에 할당하기

3. 해당 클래스의 요소에 해당 변수 text()로 바인딩하기

인터랙션 옵저버?

감시하는 객체를 만들어 요소의 스크롤 애니메이션을 보다 정확하게 수행 할 수 있게 도와주는 수단

let observer = new IntersectionObserver( // 생성자 즉 대상 요소 감시자 설정

(entries) => {

entries.forEach((entry)=> {

if (entry.isIntersecting) { // 요소가 뷰 포트에 보일 시 해당 코드 실행

$(entry.target).css({ opacity : 1});

} else {

$(entry.target).css({ opacity : 0});

}

});

{ threshold : 0.5} // 보이는 영역 비율 50%, 넘을 시 함수 실행

);

observer.observe(opacityText1[0]) // 관찰 대상 설정

로컬스토리지

웹 브라우저 내부에 데이터를 저장하는 기술로, 사용자의 로컬 컴퓨터에 데이터를 저장하여
오프라인 상태에서도 애플리케이션을 사용할 수 있게 해준다.

// input 버튼에 변경이 있을 때 로컬 스토리지의 밸류 값 설정하기

indexPersonal.on("change", function () {

localStorage.setItem("checkboxState", indexPersonal.prop("checked"));

});

// 브라우저 불러올 시 상태 값 가져오기

$(document).ready(function () {

var checkboxState = localStorage.getItem("checkboxState");

}

// 가져온 값 자동 적용

var interval = setInterval(function () {

if (childWindow.closed) { // 일정 시간 간격으로 자식 창이 닫혔는지 확인

clearInterval(interval); // interval 제거

window.location.reload(true); // 부모 창 새로고침

}

}, 1000); // 1초마다 확인

});

CSS Grid

웹페이지 레이아웃을 격자 구조로 구성하는 CSS 기능 3차원 레이아웃에 적합

.grid-container {

display: grid; /* 컨테이너 그리드 박스 지정 */

grid-template-columns: repeat(3, 1fr); /* 행열 프레임 설정 */

grid-template-rows: repeat(2, 1fr);

grid-auto-rows: 480px;

grid-gap: 20px;

grid-template-areas: /* 행열 별 영역 지정 */

'a b b'

'a c d'

;

}

/* 자식 아이템 영역 지정 */

.grid-itemA {

grid-area : a;

}

스와이퍼

스와이퍼란 모바일 터치 슬라이더로, 다양한 플러그인을 제공하는 프레임워크입니다

/* 1. cdn 지정 (css/js) */

/* 2. 슬라이드 css, 마크업 */

/* 3. Javascript 슬라이드 세부 정의 */

var swiper = new Swiper(".carSwiper", {

slidesPerView: 1, /* 화면에 보일 슬라이드 개수 지정*/

spaceBetween: 200,

loop: true, /* 무한 슬라이드 지정 */

pagination: {

el: ".swiper-pagination", /* 페이지네이션 , 클릭 시 인덱스 변경 */

clickable: true,

});

/* 스와이퍼 별 id 지정 , 클릭 이벤트 발생 시 display block, none 처리 */

carBtn.addEventListener("click", function () {

$(#car-catalog).style.display = "block";

$(#accesory-catalog).style.display = "none";

});

데이터 바인딩

요소에 객체 및 데이터 값을 주소를 통해 전달해주는 것

var carformSlides; // 슬라이드

var clickModel // 클릭된 슬라이드 변수

carformSlides.click(function() {

clickModel = $(this).find('p').text(); // 클릭된 (this)의 텍스트 값 변수 할당

$('.clicked-model').text(clickModel); // 해당 값 바인딩

localStorage.setItem('choose', clickModel); // 로컬스토리지에 값 저장

});

저장소에 있는 값 다른 브라우저에서 가져오기

var clickSub = localStorage.getItem('choose');

MAIN
SUB
MOBILE
TOP

MAIN PAGE DESIGN

기존의 중복되는 기능들을 통합하고 GNB의 가시성과 기능을 강화시켰습니다.
사용자들의 구매 가능성을 높일 수 있는 카탈로그 및 차량 프리뷰의 비주얼을 향상시켰습니다.

SUB PAGE

견적 조회 시 차량 이미지를 활용해 사용자의 인지적 부담과 사용성을 높였습니다.

MOBILE PAGE

모바일 디자인 가이드를 준수하고 레이아웃 조정 시에도 같은 앱처럼 보일 수 있도록 제작하였습니다.

모바일 최소 사이즈 준수

안드로이드 기준 디바이스 폰트, 가로 px 설정

정보 가독성 고려 1단 레이아웃

안드로이드 기준 디바이스 폰트, 가로 px 설정

스와이프를 이용해 더 직관적인 차량 확인

차량 상세 스펙 및 이미지를 확인할 수 있습니다.

모바일 GNB 디자인 제작

더 사용성 높은 페이지 네비게이션 구조로써 제작하였습니다.