프로젝트 CLAYN 최적화 서순 잡기 ( 결과 포함 )

Dustin Jung·2025년 2월 28일

프로젝트 CLAYN

목록 보기

4/10

서순 잡기

1. 성능 최적화 (GSAP 중심)

GSAP ScrollTrigger 성능 개선

scrub: true 사용 시, anticipatePin 옵션을 적절히 조정 (지나치게 높은 값이면 성능 저하)
markers: true로 애니메이션 흐름 확인 후, 불필요한 트리거 제거
lazy: false로 설정하여 스크롤 부드러움 향상

GSAP 애니메이션 최적화

애니메이션이 많은 경우, will-change: transform, opacity 추가
x, y 대신 transform을 활용하여 레이아웃 변경 최소화
gsap.context() 사용하여 컴포넌트 기반 관리

2. 코드 리팩토링 (정리 및 최적화)

불필요한 CSS 정리

src/css/animations.css에서 사용하지 않는 애니메이션 제거
src/css/components.css의 중복 코드 정리

JS 코드 정리

src/js/animations.js에서 반복되는 GSAP 코드 함수화
이벤트 리스너 제거 (resize, scroll 이벤트 최적화)

이미지 최적화

public/images/ 내 불필요한 이미지 삭제
WebP 및 AVIF 변환 → 페이지 로딩 속도 개선
srcset과 lazy loading 적용하여 가변적인 해상도 지원

3. 네트워크 성능 개선

코드 스플리팅

defer와 async를 사용하여 JS 로딩 방식 최적화
페이지별 필요한 스크립트만 로드 (메인 페이지에서 404 관련 JS 제거

CSS 최적화

font-display: swap; 적용하여 글꼴 로딩 시 FOUT 방지
unused-css 정리하여 불필요한 스타일 제거

4. UX 개선

404 페이지에 부드러운 애니메이션 추가

404 페이지에서도 GSAP을 활용하여 미묘한 효과 추가
opacity, scale, rotate 등을 활용해 깔끔한 연출

접근성(A11Y) 점검

aria-label 추가 등

최종 목표

GSAP 기반의 스크롤 애니메이션이 부드럽게 동작하도록 최적화
코드 구조를 정리하고, 불필요한 요소 제거하여 가독성 향상
네트워크 성능 개선을 통해 페이지 로딩 속도를 높이고, 사용성 강화

서순 잡기 결과

1. gsap 최적화

이는 따로 글을 작성해 정리함.

https://velog.io/@gosoomdoce/gsap.context-%EC%99%80-return-.revert-%ED%95%B4%EC%95%BC%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0
제목 : gsap 최적화(1) - gsap.context(() => {})와 reutrn() => {}.revert 해야하는 이유

https://velog.io/@gosoomdoce/gsap.killTweensOf-%EC%99%80-scrollTrigger.%EC%9A%94%EC%86%8C.kill%EC%9D%B4-%ED%95%84%EC%9A%94%ED%95%9C-%EC%9D%B4%EC%9C%A0-%EA%B7%B8%EB%A6%AC%EA%B3%A0-context%EC%99%80-revert%EC%99%80%EC%9D%98-%EC%97%B0%EA%B3%84
제목 : gsap 최적화(2) - gsap.killTweensOf 와 scrollTrigger.요소.kill()이 필요한 이유, 그리고 context와 revert와의 연계

https://velog.io/@gosoomdoce/gsap%EC%97%90%EC%84%9C-will-change%EC%99%80-x-y%EA%B0%92-transform-topleft-%EA%B0%92-gsap-%EC%B5%9C%EC%A0%81%ED%99%943
제목 : gsap 최적화(3) - gsap에서 will-change와 x, y값, transform, top,left 값

CPU 단독 부담을 덜어내 gpu와 적절하게 분담하도록 조정, 애니메이션 중첩과 중복 실행, 스크롤 트리거 중첩 문제를 미연에 방지하는 기능 추가, 결론적으로 메모리 누수가 방지되며 페이지가 무거워질 가능성을 방지하고, 애니메이션이 의도와 다르게 흘러갈 것을 방지함.

2. 코드 리팩토링

Js와 CSS 최적화

git commit 기능 중 auto-minify 기능을 통한 불필요한 주석 제거, 공백 제거를 통해 css와 js 파일 압축함.
이를 기반으로 페이지 렌더링 속도가 증가함.

이미지 최적화

기존 PNG 파일만 제공 => 아이콘은 SVG로 사용하고, 다른 img태그들은 차세대 이미지 포맷을 차용해 압축함. 이로 인해 각 이미지 파일의 용량을 크게 줄여서 페이지 렌더링 속도를 매우 줄이게 됨.
또 각 이미지 파일들에 대해 height과 width를 인라인으로 명시하거나, aspect-ratio 속성을 제공해서 레이아웃이 변경되는 일이 없게 함.

3. 네트워크 성능 개선

코드 스플리팅
- 외부 CDN font 파일들은 rel 속성을 stylesheet가 아닌 preconnect로 변경해서 렌더링에 멈춤이 없게 함.
- swiper css CDN은 외부 cdn이지만 내부에서 일부 속성 수정을 위해 stylesheet로 유지함.
- 스크립트의 정리를 통해 내부 custom js 파일들을 main.js에서 총괄하고, CDN 스크립트들의 서순에 맞게 defer와 HTML 순서 배치로 관리함.

모든 스크립트에 defer가 들어간 이유?

defer를 적용하면 스크립트가 비동기적으로 다운로드되면서도 HTML 파싱이 완료된 후 실행됨.

defer가 없으면 HTML 파싱이 멈추고 스크립트 로드가 끝날 때까지 기다려야 함.

라이브러리 간 실행 순서 보장

defer를 사용하면 HTML 문서에 나열된 순서대로 스크립트가 실행됨
특히, GSAP과 Swiper 같은 라이브러리는 실행 순서가 중요함.
GSAP → ScrollTrigger → Swiper 순서대로 실행됨
async를 사용하면 각 스크립트가 로드되는 순서대로 실행되어 오류 발생 가능

GSAP, Swiper 등은 DOM 요소를 조작하는 라이브러리

GSAP, Swiper는 document.querySelector(), addEventListener() 등을 활용하여 DOM을 조작함.
defer를 사용하면 HTML이 완전히 로드된 후 스크립트가 실행되므로, DOM 요소를 찾지 못하는 오류를 방지 가능

서버가 없고, GitHub Pages 같은 정적 호스팅 환경이므로 defer가 더 적합

GitHub Pages는 정적 사이트 배포 환경이므로 최적화된 스크립트 실행 방식이 필요합니다.
defer를 사용하면 HTML 렌더링이 멈추지 않고, 모든 스크립트가 로드된 후 실행되므로 UX가 개선됨.

결론

✔ HTML을 빠르게 렌더링하고, 스크립트 실행을 최적화하기 위해 defer 사용
✔ GSAP, Swiper 같은 라이브러리는 실행 순서가 중요하므로 defer가 더 안정적
✔ DOM을 조작하는 라이브러리는 defer를 사용해야 오류 없이 실행 가능
✔ GitHub Pages 같은 정적 사이트 배포 환경에서 더 적합한 방식

css 최적화

FOUT(Flash of Unstyled Text)란?
FOUT(Flash of Unstyled Text)는 웹 폰트가 로드되기 전에 폴백 폰트(기본 시스템 폰트)가 먼저 표시되었다가, 나중에 웹 폰트로 변경되는 현상을 의미

FOIT (Flash of Invisible Text)
**웹 폰트가 로드될 때까지 텍스트가 보이지 않는 현상

즉, 웹사이트가 처음 로드될 때 기본 폰트가 잠시 보였다가, 웹 폰트가 로드되면 폰트가 바뀌는 깜빡임이 발생하는 거나 보이지도 않는 것.

이를 방지하기 위해 구글폰트에서는

끝에 &display=swap을 붙이고, 프리텐다드나 스포카 산스 네오는 google fonts 에서 제공하고 있지 않기 때문에, css에서 import한 후 font-display: swap을 적용하는 방법도 있지만 본 프로젝트에서는

이 css 문서 구조에서

여러가지 기본 초기화, 정리 css인 dustinNormalize.css 에서 폰트를 적용하기 전에 html, body에 font-family로 system-ul를 문저 적용해서 웹 폰트 로드 전, 기본 스타일을 적용시키고, global.css와 fontStyle.css에서 font에 대한 정의해서 밑에 배치함.

이로 인해

이후 font-style.css나 global.css에서 웹 폰트가 적용되면 자동으로 덮어씌워짐
CLS(누적 레이아웃 이동) 방지 및 FOUT(잠시 폴백 폰트가 보이는 현상) 최소화 가능

**즉, FOUT와 FOIT로 인한 UX 경험이 망가질 것을 방지함.

4. UX 개선

404 페이지 제작

404 페이지 제작 시 중요한 요소
1. 사용자가 길을 잃지 않도록 직관적인 메시지를 제공 → "페이지를 찾을 수 없습니다." 등의 명확한 안내 문구 필요
2. 홈페이지 또는 주요 페이지로 이동할 수 있는 버튼 제공 → "홈으로 돌아가기" 버튼 필수
3. 브랜드 아이덴티티를 반영한 디자인 적용 → 사이트의 전체적인 디자인과 일관성을 유지
4. 가벼운 유머 또는 감성적인 메시지 활용 가능 → 사용자의 실망감을 줄이고 긍정적인 경험 제공
5. 간결하고 깔끔한 UI 구성 → 불필요한 요소 없이 직관적인 인터페이스 제공
6. 페이지 로딩 속도 최적화 → 404 페이지도 빠르게 로드되도록 최적화 필요
7. SEO 고려하여 적절한 meta 태그 추가 → 검색엔진이 404 페이지를 인식하도록 설정
8. 애니메이션이나 인터랙션 효과 추가 (필요 시) → GSAP 등으로 부드러운 전환 효과 적용 가능
9. 모바일 및 반응형 디자인 적용 → 모든 기기에서 적절하게 보이도록 반응형 스타일 구현

결론: 사용자가 길을 잃지 않고 빠르게 원하는 페이지로 이동할 수 있도록, 직관적이고 유용한 404 페이지를 제작해야 함!

이 이론을 토대로, 404를 제작. 이는
https://gangordie.github.io/CLAYN/src/html/404.html
에서 확인 가능.

또한

meta name="robots" content="noindex, follow"> <!--noindex로 검색엔진 허용 x 그러나 follow로 링크는 인식-->

로 변경해서 검색엔진에서는 인식이 안되고, 링크로 열리게 끔 함.

접근성 개선

aria-hidden과 aria-label

본 프로젝트의 Nav Btn은 span으로 만든 햄버거 형식임.

            <!--메뉴 바-->
            <button aria-label="CLAYN 네비게이션 토글 버튼" class="header_fixed header_nav_btn header_menu">
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
            </button>

이를 스크린 리더기에서 옳바르게 인식시키기 위해서

aria-hidden="true"로 span 태그는 스크린 리더기가 못 읽게 만들고,

button에 aria-label로 명확히 지시해서 웹 접근성을 높이고 UX를 개선함.

이메일 입력 필드에는 시각적인 라벨(label)이 없어도 괜찮아 보일 수 있지만, 웹 접근성(Accessibility, A11Y)을 고려하면 라벨을 숨기더라도 존재해야 함.
**Placeholder는 label을 대체 불가능하기 때문임
**HTML 표준 & 웹 접근성 가이드라인 준수

위 3가지의 이유에 따라 label을 기재하고, 이를 화면에서만 가림.

이를 통해 **WCAG 접근성 가이드라인 준수 → 모든 사용자가 원활하게 이용 가능

Dustin Jung

더스틴 정입니다

이전 포스트

로드맵 ( 문서화 설명 포함 )

다음 포스트

프로젝트 CLAYN 최적화 서순 잡기 ( 결과 포함 )