[9천명 접속!] "무아지경" 동국대 축제사이트 돌아보기 1

코딩을 배운지 1년 🐣
동국대 멋쟁이사자처럼에 11기로 들어와 어느덧 12기 운영진까지 하고 있다. (감개무량)

작년 아기사자였을 때 가을 축제 사이트 프론트엔드를 담당했는데, 어느덧 운영진이 되어 또다시 봄 축제 사이트 프론트엔드를 담당하게 되었다! 🦁🪷

12기 우녕진에는 열쩡 가득한 사람들이 많아 너무 좋다 🔥
거의 대부분이 참여했고, 짧은 개발 기간이었지만 사람들이 좋아 너무나 즐거운 시간들이었다!!
다음은 축제 사이트의 개발 관련 기본 정보다.

[개발진]
프론트엔드 5명
백엔드 4명
기획 & 디자인 3명
대외협력 2명

[사용 기술]
FrontEnd - React
BackEnd - 파이썬 기반 Django Rest Framework
Design - Figma
communication - discord notion

[스케줄]
~ 5월 17일 디자인 마감
~ 5월 22일 개발 1차 마감
~ 5월 24일 개발 최종 마감
~ 5월 26일 qa 및 최종 수정
💡 5월 27일 재학생에게 배포!

개발 스케줄이 빠듯했지만
프론트가 무려 5명이나 함께 했기에 든든했고 시간 압박이 많지 않았다 (이때까지만 해도 ..)

---

우리의 아름다운 피그마 ... 🥺

처음 딱 봤을 때

" 와 ... 우리 디자이너들 미쳤다.... 아름답다 .. 예쁘게 해내야겠다.."

프론트엔드로서 너무 행복해지는 디자인이었다.
디자인이 되기 전 프론트엔드끼리 회의를 진행했는데 시간이 얼마 없는 관계로 가장 서로에게 익숙한 js 기반 react를 하기로 했고, 내가 홈 페이지를 맡기로 했다.

그리고 프론트엔드 배포는 netlify로 개발 초반에 진행하기로 했다.

---

이제 내가 맡은 페이지를 상세하게 봐보자.

사실 처음에 봤을 땐 어려울게 없는 페이지라고 생각했다 (햅삐)
기능을 크게 살펴보자면

맨 위 배너 자동 슬라이드

라인업 (날짜별)

부스 랭킹

공지

홍보

---

하지만 ... 나를 큰 고민에 빠지게 한 것이 있었으니..
바로 맨 위 배너 슬라이드 부분이었다.

이 링크에 들어가자마자 보이는 슬라이드와 유사하다. (핸드폰으로 봐야 잘 보인다!)
허걱스 .. 이게 가능한 것인가 ...
너무 예쁜 디자인이지만 .. 어케 .. 개발하지 ...
본격적인 개발 전부터 라이브러리 이것저것 많이 찾아보았다..
역시나 가장 알려져 있는 것은 react-slick 이다.

자동으로 미니 배너가 넘어가게 하면서, 넘어갈 때 강조도 되고 뒷 배경도 같이 움직이고 해당 미니 배너를 누르면 관련 페이지로 이동하는 ... 아 추가로 배너를 누르면 해당 배너가 맨 왼쪽으로 이동하면서 강조되어야하고.. 손으로 넘길 수도 있어야....

세상에나 마상에나 걱정 근심 가득이던 중 한 유튜브를 발견했다.

유레카 !!!

감을 잡았다.. 정말 다행인 것은 미니 배너 갯수가 이미 정해져있었다는 것이다.

💡 강조되는 미니 배너의 index를 추출하고 해당 인덱스를 currentIndex에 할당해 style-component로 스타일을 꾸민다. 미니 배너에 맞는 뒷 배경도 하나씩 숫자로 지정해놓고 만약 1번 미니 배너가 currentIndex가 되면 뒷 배경 1번이 보이게 되는 형식으로 하면 되지 않을까?

---

우선 미니 배너의 slide 코드를 봐보자.

MiniBannerItem으로 이미 틀은 만들어놓은 상태였다.

className={currentIndex === index ? "active" : ""}

이 부분을 보면 currentIndex와 index가 일치하면 active class를 추가하여 해당 배너를 활성화시키고자 했다. 해당 css를 보면

다음과 같이 정의되어있다. 따라서 active가 된다면 강조되는 효과가 있을 것이다.

참고로 !important 를 해준 이유는 chrome에서는 .. css가 안깨지는데 배포한걸 아이폰 사파리에서 보니 .. 깨지는것 아닌가 ..? (망할 사파리..)
라이브러리 호환 문제인 것 같아서 눈물을 머금고 이리저리 시도해보다가 발견한 해결법이었다....

currentIndex는 useState 훅을 사용하여 상태값을 관리하는 변수다. 현재 보여지고 있는 배너의 인덱스를 추적하고 코드에서 setCurrentIndex 함수를 사용하여 이 값을 업데이트하도록 했다.

  const [currentIndex, setCurrentIndex] = useState(0);

---

그렇다면 currentIndex가 무엇인지 어떻게 알지?

slider의 settings에 설정을 해두었다.

    beforeChange: (_, newIndex) => {
      setCurrentIndex(newIndex);
    },

beforeChange는 슬라이드가 변경되기 전에 호출되는 함수로 setCurrentIndex(newIndex)를 통해 currentIndex 상태를 업데이트하여 현재 선택된 슬라이드 인덱스를 추적한다!

💡 beforeChange: react-slick 라이브러리에서 제공하는 옵션 중 하나로, 슬라이드가 변경되기 전에 호출되는 콜백 함수를 설정하는 역할을 수행한다!

이때 newIndex 는 슬라이드가 변경되어야 할 새로운 인덱스를 의미한다.

이제 과연 미니 배너의 currentIndex가 잘 인식되는지 확인하기 위해 콘솔을 찍어보자!!

아주 잘 찍힌다!!!

이제 화면을 봐보면

여기까지 하면 사실상 다한거임 우하하
뒷 배경이 자동으로 변경되는건 SO EASY

약간의 miss는 배너가 6개밖에 없어 그냥 프론트에서 이미지 관리하겠다구 했는데 그렇게 하다보니 .. 코드가 좀 지저분해지고 나중엔 "굳이.." 싶었다.

큼 ..

완성된걸 보면 (gif로 변환했더니 좀 느리다ㅠ)

currentIndex가 맨 왼쪽에 있는 미니 배너이고, 가장 왼쪽에서부터 일정 부분 떨어져있으며 .. 반응형으로 가능하도록 하기 위해 .. 사실
"픽셀 깎는 노인이 돼 ..." 과정을 거쳤다.. 아까 settings에서 보인 breakpoint도 정말 하나하나 해보며 지정했고,

px값도 막 이렇게 .. 계속 .. 하나하나 조절함 ㅠㅠㅠㅠㅠㅠ
그래도 뿌듯하다 !!!!

---

이제 다음 기능으로 넘어가보자. 라인업 기능은 간단했다.
(아 아니었다)

생각해보니 .. 디자이너의 요구사항에는

"페이지 스크롤에 맞추어 자동으로 왼쪽에서 오른쪽으로 움직이는 애니메이션"이 있었다.

으음 ..... 이건 또 .. 어떻게 구현하지 ....
열심히 구글링하고 찾아보았다 !!

---

Intersection Observer API를 활용해보자!!

해당 글을 참고했다.

대락적으로 설명해보자면

1. .slick-slide 클래스에 transition 속성을 추가하여 슬라이드가 이동할 때의 애니메이션 효과를 설정해준다.
2. lineUpRef 요소를 IntersectionObserver로 관찰하여 슬라이더가 화면에 나타날 때 애니메이션을 시작하고, 화면에서 벗어날 때 애니메이션을 중지한다!!
3. handleIntersection 함수 내에서 슬라이더에 대한 transform 속성을 조작하여 화면에 나타날 때 오른쪽에서 왼쪽으로 이동하는 애니메이션을 구현한다!
   

다음과 같은 방식으로 말이다!!
하지만 ...

그렇다.. 나중에 사라진 기능이다 .. ㅠ 생각보다 사람들이 홈에 머무르는 시간이 적기도 하고 오히려 애니메이션이 번거러워져서 사라졌다 .. 대신 손으로 자유롭게 스크롤해 옆으로 넘겨 볼 수 있도록 대체했다 !!

---

나머지 기능은 사실 큰 어려움 없이 구현했던 기능들이라 따로 소개하지는 않겠다!!

Home 페이지에는 유독 slide가 많이 활용되었는데(맨 위 배너 자동 슬라이드, 라인업, 공지, 홍보)
특히 자동 슬라이드 부분 (맨 위 배너 자동 슬라이드, 공지, 홍보)이 엄청 기억에 남는다..

slide animation 속도 1초 차이를 기획자, 개발자가 모여 엄청나게 고민했기 때문이다. 지금 이 순간에도 가볍게 휙 지나가는 1초가 웹서비스에서는 크게 차이가 나는걸 실감하며 정말 새로웠고 어떻게 해야 ux적으로 편리할지 고민할 수 있던 시간이었다.

---

하지만 진짜 에러는 유저들에게 배포되고 시작하는 것 같다 ㅎㅅㅎ 🥺
배포하고 나서도 계속해서 ux 측면에서 고민하고 수정한 것들이 있는데 이는 2편에서 다루도록 하겠다 !!

---

프론트엔드 깃허브

*netlify 사이트는 더미데이터 좀 넣어놓고 공개하도록 하겠돠