전체 폴더 구조

assets 폴더

• 파일 원본을 모아놓거나, 개발에 쓰인 figma 자료들, 포토샵이나 일러스트로 제작해서 사이트에 쓴 것들 보관.

docs 폴더

• git에는 안올라가는 자료들, 사이트를 제작하면서 참고하면서 공부한 내용이나, 레퍼런스를 한 사이트의 링크등을 적어둔 폴더

public 폴더

fonts 폴더

• 내부 다운받은 font 파일들을 보관하는 폴더

icons 폴더

• 파비콘, apple-touch icon, 사이트 로고 svg 등 icon들을 따로 모아놓은 폴더

images 폴더

• 사이트에 전반적으로 활용된 이미지들을 보관해놓은 폴더,
  
  
  • 이는 images 폴더 안에서 또 세부적으로 용도에 맞게 나눠져서 관리됨.

videos 폴더

• 프로젝트에 사용된 비디오들을 관리하는 폴더
  
  각 세션과 용도에 맞게 내부에서 추가로 정리함.

src 폴더

• 이는 html, css, js, for404로 체계적으로 관리해 유지보수에 용이하게끔 만든 폴더

  html 폴더

  

• mainPage > 본 프로젝트 메인 페이지

• 404 > 미구현 페이지를 위한 404 페이지

  css 폴더

  

• animations.css > 애니메이션 관련 css를 모아놓음

• components.css > 컴포넌츠 관련 css를 모아놓음 ( UI, button 등 )

• description.css > 본 프로젝트의 index.html은 설명 페이지로 제작될 예정인데, 그를 위한 css

• dustinnormalize.css > 자체 제작한 '초기화' css 파일, 각종 변수에 대응하기 위한 밑작업 파일

• fonts.css > 로컬 font를 사용할 때 이 파일에서 정의

• font-style.css > 최종적으로 각 클래스나 body 등에 어떤 폰트를 적용하고 weight는 어떻게 할지 정해두는 css 파일.

• responsive.css > 각 이름에 맞는 요소를 미디어 쿼리를 통해 나눠 놓고 체계적으로 관리하는 파일.

• style.css > 반응형을 제외한 전역에 사용되는 공통 css를 정의해둔 파일

• global > 전역 css 설정, root에서 함수를 관리하고, portrait과 landscape에 따른 이미지 선택, keyframes를 모아놓고, 반복 사용하는 수치들을 class로 모아놓아 총괄 관리하는 css 파일

• swiper > 외부 cdn으로 불러온 swiper css를 본 프로젝트에 맞게끔 재수정하기 위해 제작된 css 파일

  js 폴더

  

• animations.js > gsap를 이용한 애니메이션들을 총괄하는 스크립트 파일 해당 내용을 export함

• components.js > UI 기능을 관리하는 js 파일, swiper 관련 js도 이에 해당함. 해당 내용을 export함

• dustinNormalize.js > 자체 제작한 변수에 대응하기 위한 js 파일, 주로 IOS 환경을 위해 만들어 짐.

• lenis.js > 프로젝트 중반까지만 해도 lenis를 사용했으나, 막바지에 lenis 요소를 모두 제거함, 그 흔적.

• utils.js > 공통 유틸 함수를 모아놓은 js파일이었으나, 프로젝트 규모에 따라 main.js에서 관리하는게 더 편하다 판단되어 사용하지 않음.

• main.js > export된 모든 요소들과, 자잘한 스크립트들을 작성해 한번에 총괄하는 js 파일.

  404 폴더

  

• 404 페이지만을 위해 제작된 css와 js를 포함함.

CSS 적용 순서

폰트를 우선 불러옴

파비콘과 애플 홈 화면 아이콘을 설정.

그 후 로컬 css를 서순에 맞게끔 적용.

JS 관리 방식

animations.js

이런식으로 기능 별 개별 함수를 만든 후,

외부로 추출함.

initPreloader같은 경우는 프리로더 관련이기 때문에, initAnimations에서 따로 묶지 않고 개별 추출.

components.js

컴포넌트 파일같은 경우에도 기능별 개별 함수로 묶고, 이를 슬라이더와 모달에 따라 나눠서 두개로 분리한 후, 본 프로젝트의 경우 modal 기능이 gsap를 사용하기 때문에 animations.js에서 정리됨 다시 하나로 합쳐서 export함.

dustinNormalize.js

IOS에서 비디오가 멈춰져있고, 전체화면 되는 문제를 확인해서 playsinline을 html에도 추가했지만 혹시 모를 변수에 대비해서 스크립트로 강제 인라인 속성 삽입을 함, 이는 DOMcontentLoaded기 때문에 main.js와는 따로 분리를 해둠.

main.js

main.js에서는 외부에서 export한 함수들을 import해와서 총괄하고,

자체적인 script들도 있음.

이중에서 window.onload 안에 있어야 할 함수와 밖에 있어야 할 함수를 분리하고,

기능별로 함수를 나눈 후, 그걸 하나의 함수에 담아서 실행시켜 유지보수를 용이하게 만듬.