온라인 쇼핑몰 사이트의 외관은 중요한 첫인상입니다. 이를 위해 감각적인 디자인 스킨과 브랜드에 어울리는 폰트, 이미지를 사용하게 되는데요. 하지만 이러한 디자인이 오히려 고객의 이탈을 초래할 수 있다는 사실, 알고 계신가요? 오늘의 콘텐츠를 보신다면 쇼핑몰 디자인의 핵심인 폰트와 이미지를 유지하면서 이탈을 막고 검색 엔진에서 상위 노출되는 방법까지 한 번에 알아볼 수 있습니다. 그럼 지금부터 자세한 내용을 살펴보겠습니다.

쇼핑몰 디자인의 기본, 웹 폰트(Web font)

웹 폰트란, 웹 페이지를 보는 사용자의 로컬 컴퓨터에 폰트 파일이 설치되지 않아도 항상 화면에서 원하는 폰트를 볼 수 있도록 한 기술을 의미합니다. 서론에서 언급한 쇼핑몰 디자인에서 웹 폰트가 갖는 영향은 상당한데요. 다행히도 이미 시중에는 브랜드 개성을 드러내기 좋은 다양한 스타일의 웹 폰트를 쉽게 찾을 수 있습니다. 다만 문제는 용량이죠.

웹 폰트는 모든 사용자가 동일한 폰트를 볼 수 있게 하는 대신 로컬 폰트에 비해 용량이 크기 때문에 전체적인 사이트 로딩 속도를 느려지게 할 수 있습니다. 그래서 필요한 것이 폰트의 용량을 줄이는 방법 바로 ‘최적화’입니다. 더 자세한 내용으로 들어가 볼까요?

웹 폰트 ‘최적화’를 하지 않으면 일어나는 일

① 방문자 이탈률 증가

일반적으로 쇼핑몰 사이트가 3초 내 로딩되지 않으면 방문자의 30%가 이탈, 5초 이상은 80%가 이탈, 10초가 되면 무려 123%가 이탈한다는 연구 결과가 있습니다. 즉 광고, 마케팅을 통해 어렵게 사이트 유입수를 확보하더라도 무거운 용량의 웹 폰트가 사이트 로딩을 지연시키면 단 몇 초 만에 방문자가 떠날 수 있게 되는 것입니다.

② 검색 엔진 내 후순위 노출

검색 엔진 최적화(SEO)란 웹 사이트가 구글, 네이버 등 검색 엔진에서 더 높은 순위를 차지하도록 최적화하는 과정을 의미합니다. 만약 SEO 성능이 높으면 상위 노출로 더 많은 사용자들이 유입되어 트래픽을 확보할 수 있는데요. 페이지 로딩 속도가 느리면 이 SEO 성능이 저하되기 때문에 검색 엔진 순위가 떨어질 수 있습니다.

③ 부정적인 사용자 경험

웹 폰트 최적화를 하지 않으면 크게 2가지 현상이 벌어집니다. 웹 폰트가 적용된 글자가 잠시 보이지 않거나 기본 시스템 폰트로 먼저 노출되다가 뒤늦게 웹 폰트가 적용되는 현상이죠. 이러한 문제는 사용자에게 혼란을 주고 웹 사이트의 전문성과 신뢰성에 부정적인 영향을 미칠 수 있습니다.

웹 폰트 최적화 방법 4가지

위의 이유에서 알 수 있듯 웹 폰트는 쇼핑몰 디자인의 심미성을 올리는 요소이지만 사용 시 여러 문제를 야기하기 때문에 최적화를 필수적으로 진행해야 하는데요. 최적화는 크게 (1) 무료 웹 폰트 제공 사이트에서 불러오는 방식과 (2) 로컬 컴퓨터에 설치한 폰트의 파일 용량을 줄이는 방식 2가지로 나뉩니다. 다음엔 구체적인 최적화 방법을 하나씩 살펴볼게요.

무료 웹 폰트 사이트를 이용하는 방법

① 구글 폰트(Google Fonts) 이용하기 (CLICK)

1. 위의 사이트에 접속해 원하는 폰트를 클릭합니다.
2. 폰트 페이지 우측 상단 [Get font] > [Get embed code]를 클릭합니다.

3. Web탭 @import 를 체크한 후 하단에 나타나는 코드를 확인합니다.

4. 해당 코드를 복사해 쇼핑몰 html 파일의 <head> 태그 안에 붙여 넣거나앞뒤 <style></style> 태그를 지운 상태로 복사해 쇼핑몰 CSS 파일에 추가합니다.

② 눈누 사이트 이용하기 (CLICK)

1. 위의 사이트에 접속해 원하는 폰트를 클릭합니다.

2. 폰트 페이지 우측 상단 [웹폰트로 사용] 하단에 코드를 복사합니다.

3. 해당 코드를 쇼핑몰 CSS 파일에 추가합니다.

로컬 컴퓨터에 설치한 폰트를 최적화하는 방법

③ everythingfonts 사이트 이용하기 (CLICK)

TTF, OTF를 용량이 가벼운 WOFF 또는 WOFF2로 변환하는 방식 ⓒeverythingfonts

위의 사이트 상단 메뉴 중 [Font Conversion]에 접속해 설치한 폰트 형식을 WOFF 또는 WOFF2로 변환합니다.
해당 폰트를 쇼핑몰 서버 디렉토리에 업로드합니다. (웹 서버 업로드 가이드 CLICK)
아래 코드 양식에서 해당 폰트명과 서버 경로를 입력합니다.

@font-face {  font-family: 'Myfont'; /*폰트 이름을 입력합니다*/  
src: url('/fonts/Myfont.woff') format('woff'); /*폰트 파일의 서버 경로와 형식을 입력합니다*/  
font-weight: normal; /*폰트의 굵기를 입력합니다*/  
font-style: bold; /*폰트 스타일을 입력합니다*/}

body {  font-family: 'Myfont', sans-serif;}

4. 위에서 완성한 코드를 복사해 쇼핑몰 CSS 파일에 추가합니다.

④ 서브셋 메이커 사이트 이용하기 (CLICK)

사용하지 않는 폰트 데이터를 제거하여 용량을 줄인 폰트를 ‘서브셋 폰트’라고 한다 ⓒtransfonter

위의 사이트에 접속해 설치한 폰트를 업로드하고 [Convert]를 클릭합니다.
사용하지 않는 폰트 데이터를 제거해 용량이 가벼워진 폰트 파일을 다운로드합니다.
해당 폰트를 서버 디렉토리에 업로드합니다. (웹 서버 업로드 가이드 CLICK)
③-3에 제시된 코드 양식에서 해당 폰트명과 서버 경로를 입력합니다.
위에서 완성한 코드를 복사해 쇼핑몰 CSS 파일에 추가합니다.

📌 고도몰 디자인 스킨 CSS 파일 내 웹 폰트 적용 방법

1. 관리자 페이지 > 디자인 메뉴에 접속합니다.
2. 좌측 하단 폴더 트리 내 “스타일시트/CSS”를 더블 클릭하여 스타일시트 리스트 중 reset.css를 오픈합니다.

3. 구글 폰트ㆍ눈누 사이트에서 복사한 코드 또는최적화해 서버에 업로드한 폰트 코드 (③-3 참고*)를 복사해 reset.css 스타일시트에 추가합니다.

보너스 TIP! 이미지 최적화 방법 3가지

웹 폰트 외 이미지 또한 용량이 클 경우 압축 또는 형식 변환을 통해 사이트 로딩 속도를 개선할 수 있는데요. 아래에 제시한 사이트에 접속한 후 사용할 이미지만 업로드하면 폰트보다 더 간단하게 최적화를 진행해 볼 수 있습니다.

① JPEG, PNG, SVG 등 최적화 무료 사이트 활용하기

고해상도 이미지의 경우 아래 언급한 3가지 사이트에서 무료로 최적화를 진행할 수 있습니다.

1. iLOVEIMG (CLICK)
2. COMPRESSOR (CLICK)
3. 이미지프레소 (CLICK)

② GIF 파일 동영상으로 변환하기 (CLICK)

GIF는 프레임이 많아 MP4, WebM 등 동영상 형식으로 변환하는 것이 좋은데요. GIF 최적화 무료 사이트를 방문해 최적화를 진행해 보세요.

③ PDF 파일 압축하기 (CLICK)

대용량 PDF 파일의 경우 위의 사이트에서 최적화를 진행해 보세요.

지금까지 쇼핑몰 디자인의 기본인 웹 폰트와 이를 최적화하는 방법에 대해 알아보았는데요. 위에서 제시한 방법 중 선택해 쇼핑몰에 적용하신다면 브랜드의 좋은 첫인상을 남길 수 있을 거예요.

덧붙여 고도몰 무료 디자인 스킨은 셀러 분들이 쉽게 웹 폰트를 적용할 수 있도록 상세한 가이드도 제공해 드리고 있어요. 트렌디한 디자인과 빠른 로딩 속도, 검색 상위 노출 어느 것 하나 포기하지 않고 고도몰과 함께 성공적인 쇼핑몰을 제작해 보세요!

비즈니스 디자인 플랫폼, 고도몰
다채로운 쇼핑몰 스킨이 궁금하다면? 아래 배너를 확인해 주세요!

NHN 커머스

SEO 점수 높이는 쇼핑몰 웹 폰트 최적화 방법