피그마 상세페이지 디자인 만들기_[1]폰트 사이즈 사용법

 

 

 

 

상세페이지를 디자인하는데 있어서 정말 중요하게 작용하는 폰트 사이즈 사용법에 대해 말씀드릴게요

통계에 따르면  PC사용자 보다 모바일로 쇼핑을 하는 비율이 높게 나타나고 있는 만큼 가독성에 대한 부분은 절대 빠질 수 없는 디자인 요소 중 하나입니다.

 

가독성 이게 뭐냐면요~

 

판매자 분들도 고객이 되는 경우 경험 해보셨을거에요~

구매를 위해 상세페이지를 보면서 이런 점 느끼신 적 있으신가요?

"
글씨가 안보이네~
너무 작아서 키워서 봐야겠다~
내용이 너무 많아서 다 읽지도 않는데.............등등
"

바로 이겁니다.

 

사용자들이 읽기에 불편이 없어야 하고 너무 많은 글로 인해 불필요하다는 느낌을 주어서는 안되겠죠

타겟층에 따라 폰트 사이즈도 달라질 수는 있지만 기본적으로 너무 작은 텍스트는 누구나 힘들거에요~

 

그래서 오늘은 상세페이지에서 사용하는 폰트 사이즈에 대해 피그마로 디자인하는 방법을 알려드리도록 하겠습니다.

피그마가 어떤 툴인지 모르시거나, 아직 다운로드가 안되셨다면 아래 영상에서 확인해주세요!

 

https://youtu.be/qZfdBuygr00

 

 

그럼 첫번째로 상세페이지에 사용하는 타이틀과 내용을 넣을 때 사용해야하는 폰트 사이즈 입니다.

 

 

 

이미지를 다운받아 확인하실 수 있도록 올려드릴텐데요

카톡으로 나에게 보내서 다운로드 받아서 확인하셔도 되고, 폰에 이미지를 넣어서 확인하셔도 됩니다.

제가 드리는 이미지는 스마트스토어처럼 양쪽 여백이 보이실거에요~

진짜 스마트스토어에 올렸을 때와 비슷한 폰트사이즈가 될테니 어느정도 사이즈 인지 감이 좀 오실거에요~

 

 

아래 이미지를 다운받아 확인해주세요

(폰에 따라 보이는 사이즈는 조금 다를 수 있습니다.)

 

텍스트는 읽기에 불편함이 없어야 합니다. 잘팔리는 상세페이지를 만드는데 있어 기획이 무척 중요한 요소지만 이미지와 폰트사이즈는 그 기획을 제대로 전달하기 위한 수단이 됩니다.

 

설명부분의 폰트 사이즈는 읽기에는 무리가 없지만 조금 작다고 느껴질 수 있는 사이즈 입니다.

많은 이야기를 10줄가까이 올리는 분들이 간혹 계시는데요~ 그런 부분은 피해주셔야 해요 ㅠ

 

아래 이미지를 다운받아 위 이미지와 한 번 비교해보세요!

 

차이가 조금 보이시나요?

폰트 사이즈만큼 줄간격과 컬러도 무척 중요합니다. 

다음에는 폰트 줄간격과 컬러에 대해서 알려드리도록 하겠습니다.

풀영상은 아래 링크에서 확인하실 수 있습니다.

 

https://youtu.be/uXLTaUMp4zw