제작기간	22.07.04 ~ 22.07.07 (4일 소요)
사용 언어	html, scss, jquery
사용 플러그인	gsap, swiper
분류	협업, pc, 클론코딩

👨‍👧‍👦 협업

💬 kakao Mobility 사이트는 본인을 포함해 총 3명이 제작한 페이지입니다.

✔ 본인이 만든 페이지

💬 저는 메인페이지와 서비스 > 카카오T 페이지에 있는 모든 tab부분을 담당하였습니다

🖊 메인페이지

📌 숫자 롤링 이벤트

💬 사이트에 들어가자마자 메인페이지에서 바로 보여지는 숫자 롤링 이벤트입니다.


📍 시작값과 최종값 만들기

<div class="day-distance">
  <strong>오늘 하루의 누적 이동거리</strong>
  <em><span>17177098</span>km</em>
</div>

var lastNum = parseInt($('.day-distance span').text())
var startNum = lastNum - (lastNum / 10)

💬 최종적으로 보여질 값을 html에 넣고 lastNum 변수에도 넣어주었습니다.
(❗ 단, html에서의 값은 문자열 형태이므로 parseInt를 통해 정수로 변환해주었습니다.)

💬 처음 로드 될 때의 시작값을 startNum 변수에 넣어주었습니다.
(lastNum에서 10을 나누고 빼준 값을 스타트 값으로 임의로 정하였습니다.)


🚩 페이지가 로드되면 startNum에서 출발하여 최종적으로 lastNum까지 롤링이 되는 이벤트입니다.


📍 시작값에서 최종값으로 5초동안 변화 주기

 var distance = {
   change: startNum
 }
gsap.to(distance, 3, {
  change: lastNum,
  onUpdate: changeNumber,
  delay: 1.2
})

💬 distance라는 객체를 만들고 그 안에 change 속성을 만들어 startNum 값을 넣어주었습니다. 그 후, gsap.to를 이용하여 distance에 change변수를 3초동안 lastNum으로 변화하도록 해주고 gsap 콜백함수 onUpdate 옵션을 추가하고 changeNumber라는 함수를 실행되도록 하였습니다. 여기서

🚩 onUpdate 함수는 애니메이션이 진행되는 동안 계속 실행되는 함수입니다.


📍 changeNumber() 함수

function changeNumber() {
  var currentNum = distance.change;
  var push = parseInt(currentNum).toLocaleString('ko-KR');
  $('.day-distance span').text(push)
}

💬 distance 객체에 들어있는 change 속성을 currentNum변수에 넣어주고 정수로 변환하여, toLocaleString('ko-KR')을 이용하여 한국에서 통용되는 숫자 표현 방식인 3자리마다 콤마(,)를 찍어주도록 하였습니다. 그리고 push 변수에 넣어 html에 text를 교체하여 완성하였습니다!

• toLocaleString() : 지역에 맞는 표현방식으로 출력함.
                         number값으로 toLocaleString('ko-kr')을 사용하면
                         한국에서 통용되는 방식으로 숫자 3자리마다 콤마(,)를                        찍어줌.

🔘 최종코드

var lastNum = parseInt($('.day-distance .distance').text()); 
var startNum = lastNum - (lastNum / 10)
var distance = {
	change: startNum
};
gsap.to(distance, 3, {
  change: lastNum,
  onUpdate: changeNumber,
  delay: 1.2
})
function changeNumber() {
  var currentNum = distance.change;
  var push = parseInt(currentNum).toLocaleString('ko-KR'); 
  $('.day-distance .distance').text(push)
}

💬 최종적으로 3초동안 changeNumber 함수가 실행되면서 값이 계속해서 변화하여 교체가 이루어지므로 마치 화면에서는 숫자가 올라가는 방식으로 표현이 됩니다.

🖊 카카오T 페이지

📌 택시 애니메이션

📍 택시 html 작성

💬 택시 애니메이션을 구현하기 위해서 먼저 버튼과 그것과 맞는 컨텐츠를 연결하기 위해 data속성을 이용해서 각각 통일하는 방법을 선택했습니다.

🚩 그래서 버튼을 누르게 되면 taxi-type클래스에서 버튼과 동일한 data속성을 호출하는 식으로 진행하였습니다.


📍 data속성으로 호출하기

$('.animate-taxi button').click(function () {
	$(this).addClass('active').siblings().removeClass('active')
	var activeTab = $(this).data('tab');
	$('.taxi-type').each(function () {
		if ($(this).data('taxi') == activeTab) {}
	})
})

💬 일단 버튼을 클릭하면 이벤트가 실행되니 click이벤트를 선언하였습니다. 그 후, 버튼에 active클래스를 추가해주고 다른 버튼들은 siblings로 active를 제거해주었습니다.


💬 activeTab 변수를 선언하여 버튼에 data('tab')값을 넣어주었습니다.
그리고 반복문과 조건문을 통해 버튼에 data-tab값과 data-taxi값이 같은 값을 호출하도록 만들었습니다.


📍 1. prevTaxi 왼쪽 하단으로 움직이기

if ($(this).data('taxi') == activeTab) {
  var prevTaxi = $('.taxi-type.active').children('img');
  timeLine = gsap.timeline()
  .to(prevTaxi, 1,{
    xPercent: -124,
    yPercent: 100,
    scale: .8,
    skewX: -10,
    ease: Power1.easeIn             
  })
}

💬 버튼을 클릭하면 클릭하기 전 active된 택시와 클릭했을 때 나올 택시 총 2개가 움직이기 때문에 클릭하기 전 택시를 움직이게 하기 위해서 prevTaxi변수에 넣어주었습니다.
그 후, gsap.timeline()을 만들고 prevTaxi를 왼쪽 하단으로 알맞게 조정하여 gsap를 작성하였습니다.


📍 2. prevTaxi 우측 상단으로 고정

  .set(prevTaxi, {
  	xPercent: 124,
  	yPercent: -100,
  })

💬 왼쪽 하단으로 움직인 prevTaxi는 애니메이션이 완료가 되면 그 즉시 우측 상단으로 화면에서 안보이게 set으로 고정을 하였습니다.
버튼을 클릭하면 우측상단에서 애니메이션이 시작되기 때문에 이 과정이 필요하였습니다


📍 3. activeTaxi 우측 상단에서 화면으로

activeTaxi = $(this).children('img');
gsap.to(activeTaxi, 1,{
  xPercent: 0,
  yPercent: 0,
  scale: 1,
  skewX: 0,
  ease: Power1.easeInOut,
  delay: .3
})

💬 active 되지 않은 택시들 전부 css를 통해 우측 상단으로 고정시킨 상태이고 prevTaxi 또한 set으로 우측 상단에 고정한 상태이므로 gsap.to로 x: 0, y: 0로 움직이게 해주고 그 밖의 옵션들도 알맞게 조정해주었습니다.


📍 4. active클래스 추가/제거

$(this).addClass('active').siblings().removeClass('active')

💬 현재 반복문 taxi-type으로 걸려있기 때문에 여기서의 $(this)는 taxi-type입니다. 마지막으로 이 부분에 active를 추가해주고 그 형제요소들은 제거해주어 완성하였습니다.

🔘 최종코드

$('.animate-taxi button').click(function () {

  allText = gsap.utils.toArray('.taxi-type p')

  gsap.to(allText, {
    x: 0,
    opacity: 0,
    ease: Power1.easeOut
  })

$(this).addClass('active').siblings().removeClass('active')

  var activeTab = $(this).data('tab');

  $('.taxi-type').each(function () {

    if ($(this).data('taxi') == activeTab) {

      var prevTaxi = $('.taxi-type.active').children('img');

      timeLine = gsap.timeline()
      .to(prevTaxi, 1,{
        xPercent: -124,
        yPercent: 100,
        scale: .8,
        skewX: -10,
        ease: Power1.easeIn             
      })
      .set(prevTaxi, {
        xPercent: 124,
        yPercent: -100,
      })

      activeTaxi = $(this).children('img');
      activeText = $(this).children('p');

      gsap.to(activeTaxi, 1,{
        xPercent: 0,
        yPercent: 0,
        scale: 1,
        skewX: 0,
        ease: Power1.easeInOut,
        delay: .3
      })
      gsap.to(activeText, {
        x: -50,
        opacity: 1,
        delay: .8,
        ease: Power1.easeOut
      })

		$(this).addClass('active').siblings().removeClass('active')
    }
  })
})

💬 택시 text gsap까지 포함된 최종 코드입니다.

📌 대리 Swiper

💬 카카오T 탭 중 대리 탭 중간에 들어있는 컨텐츠입니다
이 컨텐츠는 swiper로 제작하였습니다.


📍 html

💬 swiper안에 대리운전 type들을 넣고 그 type의 버튼들을 swiper-pagination으로 이용하였습니다. 그리고 버튼을 누를 때 일어나는 화이트 가 fade 되는 현상을 dimmed로 이용하기 위해 작성하였습니다.


📍 swiper

var swiper = new Swiper(".proxyDetail", {
      effect: "fade",
      simulateTouch:false,
      speed: 400,
      pagination: {
          el: ".swiper-pagination",
          clickable: true,
      },

💬 버튼을 클릭할 때(슬라이드가 바뀔 때), 화이트가 fade되므로 effect: "fade"를 추가하였고, 일반적으로 swiper는 그랩으로 슬라이드가 작동되어서 이를 막아주는 simulaeTouch: false를 추가하였습니다. 그리고 버튼(pagination)을 클릭하면 작동해야 하기 때문에 clickable: true도 추가하였습니다.

on: {
  slideChange: function () {
    gsap.set($('.proxy-type p'), {
      xPercent: 0,
      opacity: 0,
    })
    gsap.to($('.dimmed'), .3,{
      opacity: .3,
      yoyo: true,
      repeat: 1,
      ease: Power1.easeOut
    }) // 화이트현상
    var current = $('.proxy-type').eq(this.realIndex)
    gsap.to(current.children('p'), .6, {
      xPercent: 20.6,
      opacity: 1,
      ease: Power1.easeIn
    })
  }
}

💬 다음은 슬라이드가 바뀔 때 변화되는 부분을 slideChange 기능을 써서 작성하였습니다. dimmed는 background-color를 #fff로 css에 설정된 상태이고 버튼을 누르면 opacity만 조정되고 원 상태로 돌아오므로 reverse를 손쉽게 할 수 있는 yoyo: true와 1번 반복하게 repeat: 1을 사용하여 구현하였습니다.
.eq(this.realIndex)를 사용하여 현재 슬라이드의 realIndex 번호를 구해서 current 변수에 넣었고 current의 텍스트가 나타나게 구현하였습니다.

✔ 팀원이 만든 페이지

📌 카카오모빌리티 리포트

💬 메뉴에서 카카오모빌리티 리포트 메뉴를 클릭하게 되면 이동기술 이야기 메뉴 링크로 이동하게 되고 그 페이지 하단에 리포트 컨텐츠로 스크롤이 이동되어 있습니다.

📍 또 다른 이동기술 이야기 html

💬 이동기술 이야기 페이지 html은 movement.html, movementreport.html로 2개이며 둘 다 같은 소스입니다. 다른 점은 이동기술 이야기메뉴를 클릭할 땐 movement.html로 이동되고, 카카오모빌리티 리포트메뉴를 클릭할 땐 movementreport.html로 이동된다는 것이고, movementreport.html에는 맨 하단 리포트 섹션에 graph라는 클래스가 추가되었습니다.


📍 유일한 클래스로 스크롤 이동하기

if($('section').hasClass('graph')){
  var location = $('.graph').offset();
  $('html, body').animate({scrollTop : location.top}, 0 );
}

💬 모든 페이지에 공통으로 사용하는 스크립트 파일인 common.js에 위의 코드를 넣어놓고 카카오모빌리티 리포트메뉴를 누를 때만 graph 클래스가 존재하기 때문에 로드되면서 자연스럽게 저 코드가 실행 될 수 있었습니다.

👉 다른 방법으로 구현!

💬 제작이 끝나고 나서 이 부분을 html을 굳이 하나 더 만들지 않고 구현할 수 있는 방법이 있을까 고민을 해 보았고, 간단한 방식으로 구현할 수 있었습니다.


📍 카카오모빌리티 리포트메뉴 클릭 시 이동기술 이야기 링크로 이동

  $('.report').click(function(e){
      e.preventDefault();
      window.location.href = "../subpage/movement.html?report"
  })

💬 카카오모빌리티 리포트 메뉴 report에 href 속성값을 지우고 window.location.href를 이용하여 스크립트로 페이지 이동을 하게 하였습니다. 그리고 이 때는 주소뒤에 파라미터 값 ?report를 추가하여 이동되어도 파라미터 값을 가지고 가게 만들었습니다.


📍 파라미터 값을 읽어 구현

var para = window.location.search
if(para == "?report") {
	$('html, body').animate({scrollTop : $('.sc-report').offset().top}, 0 );
}

💬 그리고 모든 페이지에 공통으로 쓰이는 common.js 스크립트 파일에 위 코드를 넣어서 주소창에 쓰여진 파라미터 값을 읽을 수 있는 window.location.search메서드를 이용하여 변수 para에 넣고 조건문을 걸어 ?report와 동일하다면 리포트섹션 top으로 이동하도록 하여 또 다른 html이 필요 없고, 카카오모빌리티 리포트 메뉴를 클릭하였을 때만 이동할 수 있도록 할 수 있었습니다!

😄 협업을 하면서 느낀점

💬 제작하기 전, 효율성을 위해 페이지마다 공통된 부분을 최대한 확실하게 잡고 제작을 시작했어야 하는데 그 부분이 좀 제대로 이루어지지 않은 부분이 있어서 조금 아쉬웠습니다. 협업할 일이 있을 때는 제작하기 전, 페이지마다 꼼꼼히 살펴봐서 공통된 부분을 각각 분류하는 것이 협업의 장점을 극대화 할 수 있다고 크게 느꼈습니다. 하지만 좋은 점이 더 많았습니다. 일단 제작을 같이하는 한 팀이기 때문에 혼자 작업할 때보다 책임감도 더 많이 느꼈기 때문에 좀 더 신중하게 작업에 임했고, 다른 팀원이 쓴 코드를 보면서 혼자 제작했다면 미처 생각하지 못했던 방식을 볼 수 있어서 더 발전하고 성장할 수 있다는 점이 가장 좋았던 부분이었습니다. 제작하는 동안 서로 부족한 점을 채워주고 배려해주면서 큰 충돌없이 제작을 할 수 있었고, 매번 혼자 작업했기 때문에 협업의 두려움이 처음에는 조금 있었지만 그 감정 또한 기우였고, 제작을 마칠 때는 팀원들과의 관계도 더 좋아졌고 큰 성취감을 느낄 수 있는 좋은 시간이었습니다!