상세페이지 폰트·색 고르는 기준, 무료 폰트와 포인트 색 하나

상세페이지 폰트를 무엇으로 해야 할지, 무료 폰트를 써도 괜찮은지 궁금해 이 글에 오셨을 겁니다. 결론부터 말씀드리겠습니다. 상업용으로 쓸 수 있는 무료 고딕 폰트 한 가족을 고르고, 굵기 차이로 제목과 본문을 나누고, 색은 검정·회색에 포인트 색 하나만 더하세요.

폰트를 여러 개 섞거나 색을 많이 쓰면 화려해 보이지만, 읽는 사람은 어디부터 봐야 할지 헷갈립니다. 반대로 폰트와 색을 줄이면 같은 내용도 정돈돼 보이고 핵심 문장이 눈에 들어옵니다.

아래에서는 라이선스 확인법, 굵기 대비 주는 법, 포인트 색 고르는 법을 순서대로 풉니다. 여백과 글자 크기의 기본은 상세페이지 디자인 기본 글에서 다뤘으니, 이 글은 폰트와 색 선택에 집중합니다.

상세페이지 폰트는 몇 개까지 써도 되나요

한 가족이면 충분합니다. 폰트 가족(패밀리)은 같은 디자인을 Light, Regular, Bold처럼 여러 굵기로 만든 묶음을 말합니다.

굵기만 바꿔도 제목과 본문은 충분히 구분됩니다. 폰트 모양이 바뀔 때마다 눈은 새 글자에 적응해야 하고, 그만큼 내용보다 겉모양에 신경이 갑니다.

분위기를 내고 싶다면 두 번째 폰트를 큰 제목에만 쓰세요. 본문과 가격, 안내 문구는 기본 고딕으로 통일합니다.

여러 폰트 섞기

• 섹션마다 인상이 달라짐
• 무엇이 중요한지 구분이 흐려짐
• 라이선스 확인할 폰트가 늘어남
• 수정할 때 맞추기 번거로움

VS

한 가족 + 굵기 조절

• 처음부터 끝까지 한 브랜드처럼 보임
• 굵기만으로 위계가 생김
• 라이선스 확인이 한 번으로 끝남
• 새 섹션 추가가 쉬움

분위기용 폰트는 큰 제목에만 하나 더하는 정도로 충분합니다.

폰트 가족을 고를 때는 굵기가 몇 가지인지 먼저 보세요. Regular와 Bold 두 가지뿐이면 강조 단계를 만들기 어렵습니다. 적어도 네 가지 굵기가 있는 가족을 고르면 나중에 손댈 여지가 넉넉합니다.

숫자 모양도 확인하세요. 상세페이지에는 용량, 개수, 보관 기간처럼 숫자가 자주 나옵니다. 예를 들어 '300ml'나 '12개입'을 써 봤을 때 1과 7, 0과 8이 또렷하게 구분되는 폰트가 좋습니다.

예를 들어 수제 캔들을 판다면 이런 차이가 생깁니다.

고치기 전

제목은 붓글씨체, 소개는 둥근 손글씨체, 가격은 굵은 고딕, 주의사항은 또 다른 고딕

→

고친 후

큰 제목만 명조체, 나머지는 고딕 한 가족으로 통일. 소제목 Bold, 본문 Regular

폰트 수를 넷에서 둘로 줄이니 '은은한 향'이라는 분위기는 살고 정보는 또렷해집니다.

상업용 무료 폰트, 무엇을 확인해야 하나요

'무료 폰트'와 '상업용 무료 폰트'는 다릅니다. 개인 용도로만 무료인 폰트도 많습니다. 상세페이지는 물건을 팔기 위한 이미지라서 상업적 사용 허용 여부부터 확인해야 합니다.

라이선스(사용 허락 조건)는 폰트를 내려받는 배포처 페이지나 폰트 파일에 함께 들어 있는 문서에 적혀 있습니다. 사용 범위를 인쇄, 웹, 영상, 포장재, 로고 같은 항목별로 나눠 적어 둔 경우가 많습니다.

OFL(오픈 폰트 라이선스)로 공개된 폰트는 일반적으로 상업적 사용이 허용되고, 폰트 파일 자체를 파는 것만 막습니다. 본고딕(Noto Sans KR)이나 나눔 계열이 이런 방식으로 공개된 폰트로 알려져 있습니다. 다만 조건은 바뀔 수 있으니 받을 때마다 배포처에서 직접 확인하세요.

확인 항목	왜 보나요	셀러 기준
상업적 사용	판매용 이미지에 써도 되는지	'허용'이 명시돼 있어야 함
이미지·웹 사용	상세페이지는 이미지로 올라감	이미지 제작 또는 웹 허용 확인
포장재·인쇄	라벨, 박스에도 쓸 수 있는지	패키지에 쓸 계획이면 확인
로고(BI·CI) 사용	브랜드 로고에 쓰는 건 따로 제한되기도 함	로고에 쓸 땐 별도 확인
출처 표기	표기를 요구하는 폰트도 있음	요구하면 따름

확인한 라이선스 페이지는 날짜와 함께 캡처해 두세요.

확인한 내용은 한곳에 모아 두세요. 폴더 하나를 만들어 폰트 이름, 내려받은 곳, 확인한 날짜, 라이선스 캡처를 함께 넣어 두면 됩니다. 나중에 상세페이지를 고치거나 다른 사람에게 작업을 맡길 때 다시 찾느라 시간을 쓰지 않아도 됩니다.

상세페이지에 쓴 폰트를 라벨, 택배 스티커, 인스타그램 이미지에도 그대로 쓰는 경우가 많습니다. 쓰임새가 늘어날 때마다 그 용도가 라이선스에 포함되는지 한 번씩 다시 확인하세요.

상세페이지 폰트, 고딕과 명조 중 무엇이 좋을까요

본문은 고딕을 권합니다. 고딕은 획 굵기가 고른 반면, 명조는 가는 획과 굵은 획이 섞여 있습니다. 휴대폰처럼 작은 화면에서 이미지가 줄어들면 명조의 가는 획부터 흐려집니다.

제목은 상품 분위기에 맞춰 고를 수 있습니다. 단, 분위기용 폰트는 큰 제목 한두 줄에만 쓰고 문장이 길어지면 고딕으로 돌아오세요.

01수제 캔들·차

큰 제목에만 명조로 차분한 인상

02반찬·간편식

둥근 고딕으로 편안하고 친근하게

03텀블러·생활용품

단정한 고딕 Bold로 깔끔하게

04강아지 간식

손글씨체는 짧은 한 줄 포인트에만

05양말·패션 소품

폭이 좁은 고딕으로 가볍고 경쾌하게

어떤 상품이든 본문과 가격, 안내 문구는 기본 고딕입니다.

손글씨체는 특히 조심하세요. 귀엽지만 글자 모양이 제각각이라 두 줄만 넘어가도 읽는 속도가 떨어집니다.

분위기 폰트를 고를 때는 내 상품을 사는 사람을 떠올려 보세요. 예를 들어 출근용 양말을 판다면 장난스러운 글씨보다 단정한 고딕이 어울립니다. 같은 양말이라도 아이 선물용이라면 둥근 고딕이 더 맞을 수 있습니다. 누구에게 파는지 아직 흐릿하다면 타깃 고객 설정 글을 먼저 보셔도 좋습니다.

글자 굵기 대비, 세 단계면 충분합니다

굵기는 '무엇을 먼저 읽을지' 알려 주는 신호입니다. 제목, 강조, 본문 세 단계로 나누면 대부분의 상세페이지가 정리됩니다.

중요한 건 단계 사이의 간격입니다. Regular와 Medium은 차이가 작아서 화면에서 거의 같아 보입니다. 단계 사이는 두 칸 이상 벌려야 차이가 보입니다.

역할	권하는 굵기	반찬 상세페이지 예시
큰 제목	Bold~ExtraBold	아침 10분, 밥상이 차려집니다
소제목·강조	SemiBold	국산 콩으로 만든 두부조림
본문	Regular	냉장 보관 후 데워 드시면 됩니다
작은 안내	Regular + 회색	배송은 주문 다음 날 출발합니다

Light처럼 아주 가는 굵기는 작은 화면에서 흐려지니 본문에는 피하세요.

가장 흔한 실수는 모든 글자를 굵게 하는 것입니다. 전부 굵으면 아무것도 강조되지 않습니다.

고치기 전

제목, 설명 세 줄, 보관법까지 모두 Bold. 중요한 문장은 빨간색으로 한 번 더 강조

→

고친 후

제목만 ExtraBold, 설명은 Regular, '당일 조리'라는 한 구절만 SemiBold로 강조

한 문단에서 굵게 처리하는 곳은 한 군데로 정해 두면 판단이 쉬워집니다.

대비가 잘 됐는지 확인하는 간단한 방법이 있습니다. 완성한 섹션을 휴대폰에 띄우고 팔을 쭉 뻗어 멀리서 보세요. 글자가 읽히지 않는 거리에서도 제목 덩어리와 본문 덩어리가 구분돼 보이면 대비가 충분한 것입니다.

굵기 대신 크기만 키우는 경우도 많습니다. 제목을 아무리 크게 해도 본문과 같은 Regular라면 힘이 약해 보입니다. 크기와 굵기를 함께 올려야 제목이 제목처럼 보입니다.

글자 크기 단계는 모바일 상세페이지 글자 크기 기준을 함께 참고하세요. 크기와 굵기를 같이 정하면 위계가 더 분명해집니다.

상세페이지 색, 포인트 색은 왜 한 가지일까요

포인트 색은 '여기를 보세요'라는 신호입니다. 신호가 두세 개면 어느 것이 더 중요한지 다시 따져야 합니다. 한 가지 색만 쓰면 그 색이 나올 때마다 중요한 내용이라는 약속이 생깁니다.

색은 역할로 나눠 생각하세요. 바탕색(흰색이나 아주 연한 회색), 글자색(검정이나 진한 회색), 그리고 포인트 색입니다.

70%

• 바탕(흰색·연회색)70%
• 글자(검정·진회색)25%
• 포인트 색5%

이해를 돕기 위한 가정 수치입니다. 포인트 색이 차지하는 면적은 작을수록 눈에 잘 띕니다.

이해를 돕기 위한 예시 수치예요(실제 통계 아님).

예시로 이렇게 나눠 보면, 포인트 색은 화면에서 아주 작은 부분만 차지합니다. 작게 써야 눈에 띕니다.

글자색도 한 번 정해 두세요. 새까만 검정은 흰 바탕에서 조금 딱딱해 보일 수 있어, 아주 진한 회색을 본문색으로 쓰는 경우가 많습니다. 작은 안내 문구는 그보다 한 단계 연한 회색으로 정하면, 굵기를 바꾸지 않고도 중요도가 낮다는 것이 자연스럽게 전해집니다.

이렇게 하세요

• 핵심 숫자(용량, 개수, 시간)
• 섹션 번호나 작은 라벨
• 한 화면에 한 번 나오는 강조 구절
• 구매 안내처럼 행동을 부르는 문구

이건 피하세요

• 본문 문장 전체
• 제목과 강조와 아이콘에 모두
• 혜택과 주의사항을 같은 색으로
• 배경 전체를 포인트 색으로 채우기

주의사항은 포인트 색 대신 회색 상자나 굵기로 구분하세요.

상세페이지 포인트 색은 어떻게 고르나요

새 색을 지어내기보다 이미 가진 색에서 고르세요. 상품 자체 색, 패키지나 로고 색, 상품 사진에 반복해서 나오는 색이 좋은 출발점입니다. 그래야 사진과 글자가 따로 놀지 않습니다.

고른 뒤에는 두 가지를 확인합니다. 흰 바탕 위에 글자로 올렸을 때 잘 읽히는지, 화면을 흑백으로 바꿔도 다른 글자와 구분되는지입니다. 흑백 확인은 색을 구분하기 어려운 분들에게도 정보가 전달되는지 보는 간단한 방법입니다.

1. 1
   후보 뽑기

   상품·패키지·로고·사진에서 색 2~3개

2. 2
   하나로 좁히기

   상품 인상과 가장 가까운 색 선택

3. 3
   진하기 조절

   흰 바탕 글자로 읽히도록 한 톤 진하게

4. 4
   흑백 확인

   캡처를 흑백으로 바꿔 구분되는지 보기

5. 5
   색 값 기록

   색 코드를 메모해 모든 섹션에 같은 값 사용

연한 파스텔 색은 그대로 글자에 쓰면 잘 안 보입니다. 같은 계열에서 진한 색을 글자에 쓰고, 연한 색은 강조 문구 뒤의 얇은 띠 배경으로 쓰세요.

빨간색은 할인이나 경고처럼 읽히기 쉽습니다. 상품이 빨갛지 않다면 포인트 색으로는 다른 색을 먼저 고려해 보세요.

고치기 전

보온 시간은 빨강, 용량은 파랑, 세척법은 초록 글씨. 상품은 민트색

→

고친 후

상품의 민트를 한 톤 진하게 만든 색 하나로 보온 시간과 용량만 강조. 세척법은 회색 박스

사진 속 상품 색과 글자 강조색이 이어져 한 브랜드처럼 보입니다.

강아지 간식처럼 패키지가 알록달록한 상품이라면, 로고에 들어간 색 하나만 골라 쓰세요. 나머지 색은 사진이 보여 주면 충분합니다.

사진 배경색도 함께 보세요. 예를 들어 반찬 사진을 나무 식탁 위에서 찍었다면 사진 전체가 따뜻한 갈색을 띱니다. 이때 차가운 파랑을 포인트 색으로 고르면 사진과 글자가 서로 다른 페이지처럼 보입니다. 사진의 전체 색감과 같은 온도의 색을 고르면 이어져 보입니다.

상세페이지 폰트와 색, 한 번에 맞추는 작업 순서

폰트와 색은 섹션마다 따로 고르지 말고, 먼저 기준을 정한 뒤 전체에 적용하세요. 이 기준을 한 장에 적어 둔 것을 스타일 메모라고 부르겠습니다.

1. 1
   폰트 가족 정하기

   상업용 허용 확인, 라이선스 캡처 저장

2. 2
   굵기 세 단계 정하기

   제목·강조·본문 굵기를 메모

3. 3
   색 세 가지 정하기

   바탕·글자·포인트 색 코드를 메모

4. 4
   모든 섹션에 적용

   메모에 없는 폰트·색이 있으면 바꾸기

5. 5
   휴대폰으로 확인

   실제 화면에서 처음부터 끝까지 넘겨 보기

새 섹션을 추가할 때도 이 메모만 보고 맞추면 됩니다.

이미 올려 둔 상세페이지를 고친다면 첫 화면부터 손대세요. 가장 많은 사람이 보는 곳이라 바뀐 효과를 먼저 확인할 수 있습니다. 그다음 소제목, 본문, 안내 문구 순으로 내려가며 메모와 다른 곳을 하나씩 맞추면 됩니다.

이 순서는 간단하지만, 섹션이 열 개를 넘으면 하나씩 맞추는 데 손이 꽤 갑니다. 처음부터 굵기와 색이 정돈된 틀에서 시작하면 고칠 곳이 줄어듭니다. 상세공방 템플릿도 이런 틀에서 출발해 내 상품에 맞게 직접 고칠 수 있습니다.

정리

상세페이지 폰트는 많을수록 좋은 게 아닙니다. 상업적 사용이 허용된 고딕 한 가족을 고르고, 분위기가 필요하면 큰 제목에만 폰트 하나를 더하세요.

굵기는 제목, 강조, 본문 세 단계로 나누고 단계 사이를 충분히 벌립니다. 모든 글자를 굵게 하면 아무것도 강조되지 않는다는 점을 기억하세요.

색은 바탕, 글자, 포인트 세 가지 역할로 정합니다. 포인트 색은 상품이나 패키지에서 하나만 골라, 꼭 봐야 할 숫자와 문구에만 작게 씁니다.

폰트와 색이 정리되면 문구가 더 잘 읽힙니다. 다음으로 첫 화면 문구를 다듬고 싶다면 상세페이지 첫 화면 글을 이어서 읽어 보세요.

• 내 상세페이지에 쓰인 폰트 이름을 모두 적어 보기
• 각 폰트의 상업적 사용 허용 여부를 배포처에서 확인하고 캡처
• 본문 폰트를 고딕 한 가족으로 통일
• 제목·강조·본문 굵기 세 단계를 정해 메모
• 상품·패키지에서 포인트 색 하나를 고르고 색 코드 기록
• 포인트 색이 쓰인 곳을 세어 보고 핵심 숫자·문구만 남기기
• 캡처를 흑백으로 바꿔 강조가 구분되는지 확인