웹 성능 최적화 - 정적 리소스 최적화

정적 리소스 최적화하기

해당 글에서는 정적 리소스에 해당하는 부분의 최적화를 어떻게 할 수 있을까에 대한 내용을 공유해 보겠습니다.

가장 접근하기 쉬운 부분부터 알아보고자 정적 리소스 최적화라는 해당 주제를 먼저 선정했습니다!

사실 이미 당연한 듯하고 계신 분들도 있을 것 같아요!

정적 리소스는 초기 로딩 속도에도 영향을 주기 때문에 잘 알고 적용하는 것이 좋습니다.

 

시작해 보겠습니다. 정적 리소스라고 하면 대표적으로 이미지, 동영상, 폰트들이 있을 수 있겠죠!

---

이미지

이미지도 다양한 포맷이 존재합니다.

- JPEG (Joint Photographic Experts Group) : 손실 압축 방식을 사용하는 포맷으로, 이미지 파일 크기를 줄이면서도 비교적 높은 화질을 유지합니다. 웹 브라우저 대부분에서 지원되어, 웹에서 사진이나 고화질 이미지를 표시할 때 주로 사용됩니다. 단, 투명도 지원이 불가능하다는 단점이 있습니다.

- PNG (Portable Network Graphics) : PNG는 무손실 압축 방식을 사용하는 이미지 포맷으로, 압축 과정에서 이미지 품질이 손상되지 않습니다. 특히 배경 투명도를 지원해 아이콘, 로고, 투명한 배경이 필요한 요소에 적합합니다. PNG는 고화질을 유지하면서 색상 정확도가 높지만, JPEG와 WebP보다 파일 크기가 클 수 있다는 단점이 있습니다.

- WebP : Google이 개발한 포맷으로, 손실 및 무손실 압축을 모두 지원합니다. JPEG와 비교해 동일 품질에서 더 작은 파일 크기를 제공해 웹 성능을 높이는데 유리합니다. 또한 WebP는 투명도와 애니메이션을 지원해 PNG와 GIF를 대체할 수 있는 다용도 이미지 포맷으로 각광받고 있습니다. 단, 일부 오래된 브라우저와의 호환성 문제가 발생할 수 있어 다른 포맷과 함께 사용하는 경우가 많습니다.

고화질과 투명도가 필요한 경우 PNG, 파일 크기 대비 품질을 최적화하려면 JPEG, 웹 성능 최적화 및 다용도를 고려할 때는 WebP를 활용하는 방식으로 포맷을 혼합하여 사용하는 것이 좋습니다.

 

이미지 최적화

참고로 최적화 포인트를 확인하기 위해 Light house를 사용했습니다. Light house는 google에서 개발한 웹 페이지의 품질을 평가하기 위한 자동화 도구로 웹페이지의 문제점을 찾고, 개선 방안을 제안받을 수 있습니다.

 

이미지를 최적화하는 방법은 이미지 파일 사이즈 줄이기, 용량 압축하기입니다.

Light house를 돌려보면, 이미지 적절한 크기를 사용하라는 안내를 확인할 수 있습니다.

이미지 압축 사이트도 많지만, 대표적으로 google에서 개발한 https://squoosh.app/ 가 있습니다.
(저는 개인적으로 확장자 변환, 사이즈 조정이 불필요할 때는 편의 상 https://tinypng.com/ 도 많이 사용합니다.)

 

또한, Light house에서 권장하는 WebP로 변환해 사용하는 것이 좋습니다.

마지막으로, https://cloudinary.com/ 같은 CDN 서비스를 활용하면 요청 시 옵션을 줘 상황에 맞는 사이즈로 리사이즈할 수 있고 캐싱이 된다는 장점이 있습니다.

 

---

동영상

웹에서 많이 사용되는 비디오 포맷은 대표적으로 2가지입니다. MP4와 WebM입니다.

- MP4(MPEG-4 Part 14): 최신 웹 브라우저 대부분과 호환되는 인터넷 친화적인 비디오 포맷입니다. 품질이 좋고 파일 크기가 작아서 웹에서 동영상을 재생할 때 인기가 있습니다.

- WebM: HTML5 비디오 및 오디오 태그와 함께 사용하기 위해 Google이 개발한 비디오 포맷입니다. 고화질 동영상을 손실 없이 효과적으로 압축할 수 있는 고성능 비디오 코덱인 V8, VP9를 지원합니다.

보통 WebM과 MP4를 함께 사용하는 방식을 많이 사용합니다.

 

동영상 최적화

동영상 용량을 줄이는 것이 바로 동영상 최적화입니다! 자원을 덜 사용한다에 해당하죠.

동영상 압축 사이트도 많지만, 대표적으로 https://www.media.io/ 가 있습니다.

필요한 길이만큼만 동영상 길이를 줄이고, 동영상이 깨지지 않을 정도로 압축해(화질 저하) 용량을 줄입니다.

또한, MP4라면 WebM 확장자로 변환해 사용합니다. (단, WebM 확장자를 지원하지 않는 브라우저도 있기에 fallback으로 mp4도 처리해줘야 합니다.)

이미지 최적화와 마찬가지로 https://cloudinary.com/ 같은 CDN 서비스를 활용하는 것도 좋습니다.

 

---

폰트 최적화

폰트에는 다양한 포맷이 존재합니다. EOT, TTF/OTF, WOFF, WOFF2가 있습니다. 하나씩 간단히 살펴보겠습니다.

- EOT : 웹용으로 MS가 개발한 폰트 형식입니다. 주로 ie6에서 사용

- TTF(True Type Font) /OTF(Open Type Font) : 벡터기반의 폰트 형식으로 스케일이 변해도 품질이 유지되며 모든 운영체제 지원

- WOFF/WOFF2 (Web Open Font Format) : TTF/OTF의 무단배포등의 문제를 해결하기 위해 만들어짐. TTF/OTF를 이용한 구조를 하고 있으며, 압축된 버전이라 웹에서 다운로드하여 사용하기에 최적화. 글꼴 내 라이센스 및 메타데이터 등을 따로 포함할 수 있어 저작권 문제에 도움을 줌

용량도 EOT > TTF/OTF > WOFF > WOFF2 순입니다.

지원 범위가 달라 모든 브라우저와 장치에서 잘 보이게 하려면 다양한 폰트 형식을 지원해 주는 것이 좋습니다. WOFF2를 적용하되, WOFF2 적용이 안 되는 경우를 고려해 WOFF를 적용시키면 좋습니다.

 

폰트 적용 방법

1. 웹 폰트 서비스를 이용

index.html 파일 내 head 영역에 <link href="폰트서비스" rel="stylesheet">로 적용하는 방법입니다.

적용 후 global css에서 font-family: '폰트 이름'; 을 적용해 주면 됩니다.

추가, 제거 등의 관리가 쉽다는 장점이 있지만, 외부 서비스에 의존하게 되고 외부 서버의 응답이 늦어지게 되면 초기 로딩에도 시간이 지연될 수 있다는 단점이 있습니다.

 

2. Font Download

외부 서비스에 의존하지 않고, 웹사이트가 항상 동일한 폰트를 사용하도록 보장해 줍니다. 단, 폰트 파일을 직접 관리해야 하고, 서버 용량에 부담이 있다는 단점이 있습니다.

TTF/OTF 확장자만 지원해 주는 폰트라면 폰트 변환 사이트를 통해 WOFF, WOFF2 확장자로 변환할 수 있습니다.

폰트 변환 사이트는 다양하지만 대표적으로 https://cloudconvert.com/ttf-converter 가 있습니다.

다운로드한 폰트 파일을 적용하는 방법은 css 폴더에 아래와 같은 형식으로 작성해 주면 됩니다.

아래 코드는 src/assets/fonts 폴더를 생성한 뒤 해당 위치에 폰트 파일을 저장한 경우입니다. (번들링 시 파일 최적화 이점을 활용)

@font-face {
  font-family: 'NanumBarunPenBold';
  src:
    url('../assets/fonts/NanumBarunpenB.woff2') format('woff2'),
    url('../assets/fonts/NanumBarunpenB.woff') format('woff'),
    url('../assets/fonts/NanumBarunpenB.ttf') format('truetype'); // ttf
}

@charset "utf-8";

@import url('./font.scss');

별도로 관리하기 위해 위 코드는 font.scss에, 아래 코드는 global.scss 파일에 작성했습니다.

 

폰트 최적화

1. Font Display 속성 활용하기

- FOIT(flash of invisible text) : 폰트를 다운로드하기 전에는 텍스트를 노출하지 않습니다.

- FOUT(flash of unstyled font) : 폰트가 다운로드되기 전에는 기본 폰트를 노출합니다. 다운로드 후 폰트 교체합니다.

 

Font Display를 활용하면 FOIT, FOUT를 적절히 이용할 수 있습니다.

- swap(FOUT) : 폰트를 다운로드하기 전에는 기본 폰트를 노출하고 다운로드 완료 후 폰트 교체

- block(FOIT) : 3초 내에 폰트를 다운로드하지 못하면 기본 폰트 노출하고 다운로드 완료 후 폰트 교체

- fallback(FOIT) : 0.1초 정도 block이 발생. 3초 내로 다운받지 못하면, 다운로드 여부와 상관없이 기본 폰트 노출 (대신 캐시해줌)

- optional(FOIT): fallback과 비슷함. 폰트가 다운로드하는 시간이 너무 오래 걸리면 브라우저가 연결을 취소할 수 있다. (캐시해줌)

위 font-display를 적용해 테스트할 때 네트워크에 캐시 사용 중지를 체크한 뒤 확인하면 더 명확하게 볼 수 있습니다.

 

2. 폰트 용량 줄이기 (woff2, subset)

subset이란 필요한 글자만 추려 폰트를 만드는 것입니다.

영어는 26개의 알파벳으로 이루어져 있습니다. 영문 폰트는 대소문자를 포함해 총 72자의 글자가 필요합니다.

하지만 한글은 자음, 모음의 조합으로 구성되어 있고, 모든 경우를 조합하면 한글의 글자 수는 무려 11,172자나 된다고 합니다.

사용할 폰트에 사용될 부분만 적용하기 위해 사용하는 대표적인 사이트는 https://transfonter.org/ 가 있습니다.

나무위키에 제공되는 완성형 한글 목록을 참고해 아래와 같이 적용할 수 있습니다.

아래는 한글 + 영어 대소문자 + 숫자, 특수문자를 적용하기 위한 characters입니다.

가 각 간 갇 갈 갉 갊 감 갑 값 갓 갔 강 갖 갗 같 갚 갛 개 객 갠 갤 갬 갭 갯 갰 갱 갸 갹 갼 걀 걋 걍 걔 걘 걜 거 걱 건 걷 걸 걺 검 겁 것 겄 겅 겆 겉 겊 겋 게 겐 겔 겜 겝 겟 겠 겡 겨 격 겪 견 겯 결 겸 겹 겻 겼 경 곁 계 곈 곌 곕 곗 고 곡 곤 곧 골 곪 곬 곯 곰 곱 곳 공 곶 과 곽 관 괄 괆 괌 괍 괏 광 괘 괜 괠 괩 괬 괭 괴 괵 괸 괼 굄 굅 굇 굉 교 굔 굘 굡 굣 구 국 군 굳 굴 굵 굶 굻 굼 굽 굿 궁 궂 궈 궉 권 궐 궜 궝 궤 궷 귀 귁 귄 귈 귐 귑 귓 규 균 귤 그 극 근 귿 글 긁 금 급 긋 긍 긔 기 긱 긴 긷 길 긺 김 깁 깃 깅 깆 깊 까 깍 깎 깐 깔 깖 깜 깝 깟 깠 깡 깥 깨 깩 깬 깰 깸 깹 깻 깼 깽 꺄 꺅 꺌 꺼 꺽 꺾 껀 껄 껌 껍 껏 껐 껑 께 껙 껜 껨 껫 껭 껴 껸 껼 꼇 꼈 꼍 꼐 꼬 꼭 꼰 꼲 꼴 꼼 꼽 꼿 꽁 꽂 꽃 꽈 꽉 꽐 꽜 꽝 꽤 꽥 꽹 꾀 꾄 꾈 꾐 꾑 꾕 꾜 꾸 꾹 꾼 꿀 꿇 꿈 꿉 꿋 꿍 꿎 꿔 꿜 꿨 꿩 꿰 꿱 꿴 꿸 뀀 뀁 뀄 뀌 뀐 뀔 뀜 뀝 뀨 끄 끅 끈 끊 끌 끎 끓 끔 끕 끗 끙 끝 끼 끽 낀 낄 낌 낍 낏 낑 나 낙 낚 난 낟 날 낡 낢 남 납 낫 났 낭 낮 낯 낱 낳 내 낵 낸 낼 냄 냅 냇 냈 냉 냐 냑 냔 냘 냠 냥 너 넉 넋 넌 널 넒 넓 넘 넙 넛 넜 넝 넣 네 넥 넨 넬 넴 넵 넷 넸 넹 녀 녁 년 녈 념 녑 녔 녕 녘 녜 녠 노 녹 논 놀 놂 놈 놉 놋 농 높 놓 놔 놘 놜 놨 뇌 뇐 뇔 뇜 뇝 뇟 뇨 뇩 뇬 뇰 뇹 뇻 뇽 누 눅 눈 눋 눌 눔 눕 눗 눙 눠 눴 눼 뉘 뉜 뉠 뉨 뉩 뉴 뉵 뉼 늄 늅 늉 느 늑 는 늘 늙 늚 늠 늡 늣 능 늦 늪 늬 늰 늴 니 닉 닌 닐 닒 님 닙 닛 닝 닢 다 닥 닦 단 닫 달 닭 닮 닯 닳 담 답 닷 닸 당 닺 닻 닿 대 댁 댄 댈 댐 댑 댓 댔 댕 댜 더 덕 덖 던 덛 덜 덞 덟 덤 덥 덧 덩 덫 덮 데 덱 덴 델 뎀 뎁 뎃 뎄 뎅 뎌 뎐 뎔 뎠 뎡 뎨 뎬 도 독 돈 돋 돌 돎 돐 돔 돕 돗 동 돛 돝 돠 돤 돨 돼 됐 되 된 될 됨 됩 됫 됴 두 둑 둔 둘 둠 둡 둣 둥 둬 뒀 뒈 뒝 뒤 뒨 뒬 뒵 뒷 뒹 듀 듄 듈 듐 듕 드 득 든 듣 들 듦 듬 듭 듯 등 듸 디 딕 딘 딛 딜 딤 딥 딧 딨 딩 딪 따 딱 딴 딸 땀 땁 땃 땄 땅 땋 때 땍 땐 땔 땜 땝 땟 땠 땡 떠 떡 떤 떨 떪 떫 떰 떱 떳 떴 떵 떻 떼 떽 뗀 뗄 뗌 뗍 뗏 뗐 뗑 뗘 뗬 또 똑 똔 똘 똥 똬 똴 뙈 뙤 뙨 뚜 뚝 뚠 뚤 뚫 뚬 뚱 뛔 뛰 뛴 뛸 뜀 뜁 뜅 뜨 뜩 뜬 뜯 뜰 뜸 뜹 뜻 띄 띈 띌 띔 띕 띠 띤 띨 띰 띱 띳 띵 라 락 란 랄 람 랍 랏 랐 랑 랒 랖 랗 래 랙 랜 랠 램 랩 랫 랬 랭 랴 략 랸 럇 량 러 럭 런 럴 럼 럽 럿 렀 렁 렇 레 렉 렌 렐 렘 렙 렛 렝 려 력 련 렬 렴 렵 렷 렸 령 례 롄 롑 롓 로 록 론 롤 롬 롭 롯 롱 롸 롼 뢍 뢨 뢰 뢴 뢸 룀 룁 룃 룅 료 룐 룔 룝 룟 룡 루 룩 룬 룰 룸 룹 룻 룽 뤄 뤘 뤠 뤼 뤽 륀 륄 륌 륏 륑 류 륙 륜 률 륨 륩 륫 륭 르 륵 른 를 름 릅 릇 릉 릊 릍 릎 리 릭 린 릴 림 립 릿 링 마 막 만 많 맏 말 맑 맒 맘 맙 맛 망 맞 맡 맣 매 맥 맨 맬 맴 맵 맷 맸 맹 맺 먀 먁 먈 먕 머 먹 먼 멀 멂 멈 멉 멋 멍 멎 멓 메 멕 멘 멜 멤 멥 멧 멨 멩 며 멱 면 멸 몃 몄 명 몇 몌 모 목 몫 몬 몰 몲 몸 몹 못 몽 뫄 뫈 뫘 뫙 뫼 묀 묄 묍 묏 묑 묘 묜 묠 묩 묫 무 묵 묶 문 묻 물 묽 묾 뭄 뭅 뭇 뭉 뭍 뭏 뭐 뭔 뭘 뭡 뭣 뭬 뮈 뮌 뮐 뮤 뮨 뮬 뮴 뮷 므 믄 믈 믐 믓 미 믹 민 믿 밀 밂 밈 밉 밋 밌 밍 및 밑 바 박 밖 밗 반 받 발 밝 밞 밟 밤 밥 밧 방 밭 배 백 밴 밸 뱀 뱁 뱃 뱄 뱅 뱉 뱌 뱍 뱐 뱝 버 벅 번 벋 벌 벎 범 법 벗 벙 벚 베 벡 벤 벧 벨 벰 벱 벳 벴 벵 벼 벽 변 별 볍 볏 볐 병 볕 볘 볜 보 복 볶 본 볼 봄 봅 봇 봉 봐 봔 봤 봬 뵀 뵈 뵉 뵌 뵐 뵘 뵙 뵤 뵨 부 북 분 붇 불 붉 붊 붐 붑 붓 붕 붙 붚 붜 붤 붰 붸 뷔 뷕 뷘 뷜 뷩 뷰 뷴 뷸 븀 븃 븅 브 븍 븐 블 븜 븝 븟 비 빅 빈 빌 빎 빔 빕 빗 빙 빚 빛 빠 빡 빤 빨 빪 빰 빱 빳 빴 빵 빻 빼 빽 뺀 뺄 뺌 뺍 뺏 뺐 뺑 뺘 뺙 뺨 뻐 뻑 뻔 뻗 뻘 뻠 뻣 뻤 뻥 뻬 뼁 뼈 뼉 뼘 뼙 뼛 뼜 뼝 뽀 뽁 뽄 뽈 뽐 뽑 뽕 뾔 뾰 뿅 뿌 뿍 뿐 뿔 뿜 뿟 뿡 쀼 쁑 쁘 쁜 쁠 쁨 쁩 삐 삑 삔 삘 삠 삡 삣 삥 사 삭 삯 산 삳 살 삵 삶 삼 삽 삿 샀 상 샅 새 색 샌 샐 샘 샙 샛 샜 생 샤 샥 샨 샬 샴 샵 샷 샹 섀 섄 섈 섐 섕 서 석 섞 섟 선 섣 설 섦 섧 섬 섭 섯 섰 성 섶 세 섹 센 셀 셈 셉 셋 셌 셍 셔 셕 션 셜 셤 셥 셧 셨 셩 셰 셴 셸 솅 소 속 솎 손 솔 솖 솜 솝 솟 송 솥 솨 솩 솬 솰 솽 쇄 쇈 쇌 쇔 쇗 쇘 쇠 쇤 쇨 쇰 쇱 쇳 쇼 쇽 숀 숄 숌 숍 숏 숑 수 숙 순 숟 술 숨 숩 숫 숭 숯 숱 숲 숴 쉈 쉐 쉑 쉔 쉘 쉠 쉥 쉬 쉭 쉰 쉴 쉼 쉽 쉿 슁 슈 슉 슐 슘 슛 슝 스 슥 슨 슬 슭 슴 습 슷 승 시 식 신 싣 실 싫 심 십 싯 싱 싶 싸 싹 싻 싼 쌀 쌈 쌉 쌌 쌍 쌓 쌔 쌕 쌘 쌜 쌤 쌥 쌨 쌩 썅 써 썩 썬 썰 썲 썸 썹 썼 썽 쎄 쎈 쎌 쏀 쏘 쏙 쏜 쏟 쏠 쏢 쏨 쏩 쏭 쏴 쏵 쏸 쐈 쐐 쐤 쐬 쐰 쐴 쐼 쐽 쑈 쑤 쑥 쑨 쑬 쑴 쑵 쑹 쒀 쒔 쒜 쒸 쒼 쓩 쓰 쓱 쓴 쓸 쓺 쓿 씀 씁 씌 씐 씔 씜 씨 씩 씬 씰 씸 씹 씻 씽 아 악 안 앉 않 알 앍 앎 앓 암 압 앗 았 앙 앝 앞 애 액 앤 앨 앰 앱 앳 앴 앵 야 약 얀 얄 얇 얌 얍 얏 양 얕 얗 얘 얜 얠 얩 어 억 언 얹 얻 얼 얽 얾 엄 업 없 엇 었 엉 엊 엌 엎 에 엑 엔 엘 엠 엡 엣 엥 여 역 엮 연 열 엶 엷 염 엽 엾 엿 였 영 옅 옆 옇 예 옌 옐 옘 옙 옛 옜 오 옥 온 올 옭 옮 옰 옳 옴 옵 옷 옹 옻 와 왁 완 왈 왐 왑 왓 왔 왕 왜 왝 왠 왬 왯 왱 외 왹 왼 욀 욈 욉 욋 욍 요 욕 욘 욜 욤 욥 욧 용 우 욱 운 울 욹 욺 움 웁 웃 웅 워 웍 원 월 웜 웝 웠 웡 웨 웩 웬 웰 웸 웹 웽 위 윅 윈 윌 윔 윕 윗 윙 유 육 윤 율 윰 윱 윳 융 윷 으 윽 은 을 읊 음 읍 읏 응 읒 읓 읔 읕 읖 읗 의 읜 읠 읨 읫 이 익 인 일 읽 읾 잃 임 입 잇 있 잉 잊 잎 자 작 잔 잖 잗 잘 잚 잠 잡 잣 잤 장 잦 재 잭 잰 잴 잼 잽 잿 쟀 쟁 쟈 쟉 쟌 쟎 쟐 쟘 쟝 쟤 쟨 쟬 저 적 전 절 젊 점 접 젓 정 젖 제 젝 젠 젤 젬 젭 젯 젱 져 젼 졀 졈 졉 졌 졍 졔 조 족 존 졸 졺 좀 좁 좃 종 좆 좇 좋 좌 좍 좔 좝 좟 좡 좨 좼 좽 죄 죈 죌 죔 죕 죗 죙 죠 죡 죤 죵 주 죽 준 줄 줅 줆 줌 줍 줏 중 줘 줬 줴 쥐 쥑 쥔 쥘 쥠 쥡 쥣 쥬 쥰 쥴 쥼 즈 즉 즌 즐 즘 즙 즛 증 지 직 진 짇 질 짊 짐 집 짓 징 짖 짙 짚 짜 짝 짠 짢 짤 짧 짬 짭 짯 짰 짱 째 짹 짼 쨀 쨈 쨉 쨋 쨌 쨍 쨔 쨘 쨩 쩌 쩍 쩐 쩔 쩜 쩝 쩟 쩠 쩡 쩨 쩽 쪄 쪘 쪼 쪽 쫀 쫄 쫌 쫍 쫏 쫑 쫓 쫘 쫙 쫠 쫬 쫴 쬈 쬐 쬔 쬘 쬠 쬡 쭁 쭈 쭉 쭌 쭐 쭘 쭙 쭝 쭤 쭸 쭹 쮜 쮸 쯔 쯤 쯧 쯩 찌 찍 찐 찔 찜 찝 찡 찢 찧 차 착 찬 찮 찰 참 찹 찻 찼 창 찾 채 책 챈 챌 챔 챕 챗 챘 챙 챠 챤 챦 챨 챰 챵 처 척 천 철 첨 첩 첫 첬 청 체 첵 첸 첼 쳄 쳅 쳇 쳉 쳐 쳔 쳤 쳬 쳰 촁 초 촉 촌 촐 촘 촙 촛 총 촤 촨 촬 촹 최 쵠 쵤 쵬 쵭 쵯 쵱 쵸 춈 추 축 춘 출 춤 춥 춧 충 춰 췄 췌 췐 취 췬 췰 췸 췹 췻 췽 츄 츈 츌 츔 츙 츠 측 츤 츨 츰 츱 츳 층 치 칙 친 칟 칠 칡 침 칩 칫 칭 카 칵 칸 칼 캄 캅 캇 캉 캐 캑 캔 캘 캠 캡 캣 캤 캥 캬 캭 컁 커 컥 컨 컫 컬 컴 컵 컷 컸 컹 케 켁 켄 켈 켐 켑 켓 켕 켜 켠 켤 켬 켭 켯 켰 켱 켸 코 콕 콘 콜 콤 콥 콧 콩 콰 콱 콴 콸 쾀 쾅 쾌 쾡 쾨 쾰 쿄 쿠 쿡 쿤 쿨 쿰 쿱 쿳 쿵 쿼 퀀 퀄 퀑 퀘 퀭 퀴 퀵 퀸 퀼 큄 큅 큇 큉 큐 큔 큘 큠 크 큭 큰 클 큼 큽 킁 키 킥 킨 킬 킴 킵 킷 킹 타 탁 탄 탈 탉 탐 탑 탓 탔 탕 태 택 탠 탤 탬 탭 탯 탰 탱 탸 턍 터 턱 턴 털 턺 텀 텁 텃 텄 텅 테 텍 텐 텔 템 텝 텟 텡 텨 텬 텼 톄 톈 토 톡 톤 톨 톰 톱 톳 통 톺 톼 퇀 퇘 퇴 퇸 툇 툉 툐 투 툭 툰 툴 툼 툽 툿 퉁 퉈 퉜 퉤 튀 튁 튄 튈 튐 튑 튕 튜 튠 튤 튬 튱 트 특 튼 튿 틀 틂 틈 틉 틋 틔 틘 틜 틤 틥 티 틱 틴 틸 팀 팁 팃 팅 파 팍 팎 판 팔 팖 팜 팝 팟 팠 팡 팥 패 팩 팬 팰 팸 팹 팻 팼 팽 퍄 퍅 퍼 퍽 펀 펄 펌 펍 펏 펐 펑 페 펙 펜 펠 펨 펩 펫 펭 펴 편 펼 폄 폅 폈 평 폐 폘 폡 폣 포 폭 폰 폴 폼 폽 폿 퐁 퐈 퐝 푀 푄 표 푠 푤 푭 푯 푸 푹 푼 푿 풀 풂 품 풉 풋 풍 풔 풩 퓌 퓐 퓔 퓜 퓟 퓨 퓬 퓰 퓸 퓻 퓽 프 픈 플 픔 픕 픗 피 픽 핀 필 핌 핍 핏 핑 하 학 한 할 핥 함 합 핫 항 해 핵 핸 핼 햄 햅 햇 했 행 햐 향 허 헉 헌 헐 헒 험 헙 헛 헝 헤 헥 헨 헬 헴 헵 헷 헹 혀 혁 현 혈 혐 협 혓 혔 형 혜 혠 혤 혭 호 혹 혼 홀 홅 홈 홉 홋 홍 홑 화 확 환 활 홧 황 홰 홱 홴 횃 횅 회 획 횐 횔 횝 횟 횡 효 횬 횰 횹 횻 후 훅 훈 훌 훑 훔 훗 훙 훠 훤 훨 훰 훵 훼 훽 휀 휄 휑 휘 휙 휜 휠 휨 휩 휫 휭 휴 휵 휸 휼 흄 흇 흉 흐 흑 흔 흖 흗 흘 흙 흠 흡 흣 흥 흩 희 흰 흴 흼 흽 힁 히 힉 힌 힐 힘 힙 힛 힝
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789,:.;()*~!@#$%^&-=+_~'"

 

3. 폰트 우선 로딩 (preload)

webpack-font-preload-plugin 와 같은 라이브러리를 활용해 font를 미리 load 할 수 있습니다.

세 가지 모두 먼저 받는 것이 아닌 특정 확장자, 예를 들면 woff2만 먼저 받도록 라이브러리를 설정할 수 있습니다.

---

그 외로 icon을 사용할 때 이미지 파일이 아닌 svg 코드로 가져와 사용하는 방법 등이 있습니다.

참고로 svg 변환 사이트로는 https://www.svgviewer.dev/svg-to-react-jsx 가 있습니다.

 

여기까지 정적 리소스 최적화 방법에 대해 정리해봤습니다 :)

추가로 알게되는 부분이 있다면 해당 게시글에 계속 업데이트 해 볼 예정입니다!