프로필 링크 디자인, 폰트만 바꿔도 확 달라집니다

모바일에서 '폰트'는 장식이 아닌 '신뢰의 언어'입니다

내 프로필 링크, 뭔가 부족해 보이는데….? 라는 생각이 들었다면 그 해답은 '서체'에 있습니다.

아마도….디자이너는 물론 미감 좋은 마케터들이 모바일 가독성에 집착하는 이유는, 작은 화면에서는 폰트가 단순한 '장식'이 아니라 브랜드의 '신뢰'와 '전문성'을 전달하는 가장 중요한 '기능'이라는 것을 말하지 않아도 알고 있기 때문일 겁니다. '웹 디자인의 95%는 타이포그래피'라는 말이 있을 정도로, 폰트는 인터페이스 그 자체라고 할 수 있는데요

이러한 중요성은 '모바일 폰트 추천', '가독성 좋은 폰트' 등 사람들의 실제 검색 활동으로도 이어집니다. 사용자들은 이미 모바일에서 '읽기 편하고' '전문적으로 보이는' 폰트를 본능적으로 찾고 있으며, 이는 프로필 링크에도 동일하게 적용됩니다.

웹 디자인의 95%는 타이포그래피다: 전문가들이 서체에 집착하는 이유

"웹 디자인의 95%는 타이포그래피"라는 유명한 말이 있습니다. 이는 모든 장식을 걷어낸 모바일 환경에서, 서체가 곧 인터페이스이자 콘텐츠 그 자체임을 의미하는데요.

• 사용성 전문가 제이콥 닐슨(Jakob Nielsen)은 작은 화면일수록 '가독성'이 중요하며, 폰트가 너무 작거나 복잡하면 사용자가 읽기를 포기하고 이탈한다고 강조했습니다.

  

• 어도비의 팀 브라운(Tim Brown)은 '폰트 조합(Pairing)'과 '디자인 위계(Hierarchy)' 이론을 정립하며, '제목'과 '본문' 서체가 조화를 이뤄야 전문성을 갖출 수 있다고 강조했습니다.

  

'웹 디자인 이론'을 왜 '모바일 프로필 링크'에 가져오냐고요? 모바일처럼 작은 화면일수록, 방문자가 경험하는 것은 화려한 그래픽이 아니라 '텍스트' 그 자체이기 때문입니다. 폰트가 곧 그 브랜드의 인상이자 신뢰도가 되는 것이죠. 때문에 CdBd가 서체이 집중하는 이유는 방문자의 '가독성'과 브랜드의 '신뢰도'를 결정하는 가장 중요한 '기능’으로 여기기 때문입니다.

링크트리 같은 단일 서체가 만드는 디자인의 평면성

하지만, 우리가 가장 많이 사용하는 '링크트리'는 이러한 '디자인 위계'와 '가독성'을 구현하는 데 근본적인 한계가 있다고 할 수 있는데요.

링크트리의 서체 기능에서 매우 아쉬운 것은 앞서 말한 것과 같이 한 페이지에 단 하나의 폰트만 적용할 수 있다는 점입니다. 폰트가 하나로 통일되고 크기 구분도 큰 차이가 없다면, 제목(Title), 본문(Body), 버튼(Button) 간의 '디자인 위계'가 무너질 수밖에 없는데요. 특히 같은 버튼 나열이라면 더욱 문제가 될 수밖에 없죠. 그래서 버튼 나열로 보이는 큰 문제점이 생기는데요.

즉, 무엇이 더 중요하고 무엇을 먼저 읽어야 할지 구분되지 않아, 전체 페이지가 중요도 없이 '평면적으로 보이게 된다는 점이죠.

서체 옵션을 활용한 디자인 위계 CdBd에서는 가능해요!

이게 뭐 그렇게 큰일이냐 하실 수 있지만, CdBd는 이런 문제에 공감하는 디자인 감도가 높은 분들이 분명 존재하신다는 것을 확인했고 이를 텍스트 카드로 해결하는 것을 제안드리고 있어요. CdBd는 '링크트리'와 달리, 하나의 '텍스트 카드' 안에서도 원하는 텍스트 부분만 드래그로 선택해 스타일을 자유자재로 변경할 수 있게 만들었죠.

CdBd 텍스트 카드는 페이지에 보이는 모습 그대로 작업할 수 있는 에디터 기능이자 쉽게 카드를 쌓아주기만 하면 바로 적용이 됩니다. 때문에 더욱 직관적이고 쉬운 사용성을 느끼실 수 있어요.

이 기능을 보다 더 쉽게 이해하기 위해는 '서체'와 '폰트'의 차이를 짚고 넘어가면 좋습니다.

• 서체 (Typeface): 쉽게 말해, '글씨의 디자인 스타일 그 자체'입니다. 예를 들어, '바탕체'라는 서체는 붓글씨 느낌의 디자인 스타일을 의미하고, '돋움체'라는 서체는 네모반듯한 디자인 스타일을 설명하는 것 처럼요.

• 폰트 (Font): 그 '서체'라는 디자인 스타일을 '실제로 사용하기 위한 구체적인 프로그램'입니다. 예를 들어, '바탕체'라는 서체(브랜드) 안에는 '바탕체 Bold', '바탕체 Light', '바탕체 12pt' 같은 다양한 옵션이 있습니다. 이 'Bold'나 '12pt' 하나하나가 바로 '폰트'입니다.

CdBd는 여러분께 ‘44종의 '서체'를 제공하며, 여러분은 이를 조합해 다양한 '폰트'로 페이지를 디자인하게 됩니다.

1. CdBd가 제공하는 '서체' (Typeface): 총 44종(한글 26종, 영문 18종)의 엄선된 '서체'를 제공합니다. '텍스트 서체' 메뉴에서 페이지 분위기에 맞는 '글자 디자인 스타일'을 고를 수 있습니다.

2. CdBd가 제공하는 '폰트' (Font) 옵션: 여러분이 고른 '서체'를 '폰트'로 조합할 수 있도록 다음과 같은 옵션을 제공합니다.

• 텍스트 크기 조절: '크기 조절 막대(슬라이더)'를 이용해 12부터 60까지 섬세하게 조절, '제목(H1)'과 '본문'의 위계를 명확히 지정할 수 있어요.

• 다양한 스타일: 텍스트를 굵게 만들거나, 색깔을 바꾸거나, 밑줄을 긋는 등 다양한 '폰트' 스타일을 적용해 돋보이게 할 수 있습니다.

• 가독성 확보: 줄 간격 조절(최대 2포인트) 및 텍스트 정렬(왼쪽, 가운데, 오른쪽) 기능으로 '폰트'의 가독성을 깔끔하게 정리할 수 있습니다.

• 링크 삽입 기능: 이외에도 마치 기사의 참고 자료처럼 텍스트를 지정해 링크를 삽입하는 기능도 가지고 있어, 그 활용도가 매우 높다고 할 수 있습니다.

텍스트 카드 활용, 어떻게 디자인할 수 있을까요?

CdBd의 '텍스트 카드'와 '버튼 카드'의 폰트를 '별도로' 조합하면, '링크트리'에서는 불가능했던, 표현력이 높은 디자인 프로필 링크를 완성할 수 있습니다.

[CdBd 폰트 조합 방법]

1. [+카드 추가]에서 텍스트 카드를 선택해 원하는 텍스트 예를 들면 '브랜드 슬로건'이나 '타이틀'을 입력합니다.

2. 가장 오른쪽의 디자인 보드에서 텍스트 [스타일] 영역을 클릭하해 44종 폰트 중 원하는 서체를 골라 선택하세요.

3. 이때 사이즈 조절이 필요하다면 미리보기 보드에서 텍스트를 선택하고 [크기 조절 막대]로 사이즈를 키워 위계를 만들어 줄 수 있습니다.

4. 이 방법은 텍스트가 포함된 모든 카드에서 적용할 수 있어요.

CdBd 디자이너가 추천하는 서체 조합 6종아름다운 우리 한글로 만드는 폰트 조합 예시 3

• Style 1. 강렬한 임팩트를 줘야 하는 "이벤트 및 신제품 프로모션"

  • 방문자의 시선을 즉시 사로잡고 행동을 유도해야 할 때 적합합니다.

  • 타이틀 폰트: 'G마켓 산스 (Bold)'

    • 꽉 찬 자간과 굵은 획이 특징인 'G마켓 산스'는 그 자체로 강력한 주목도를 가집니다. 타이틀의 크기를 키워 이 폰트를 사용하면, 방문자에게 이벤트의 존재감을 확실하게 각인시킬 수 있습니다.

  • 본문/버튼 폰트: '프리텐다드 (Pretendard)'

    • 이 조합의 핵심은 '균형'입니다. CdBd의 기본 폰트이기도 한 '프리텐다드'는 강력한 타이틀의 힘을 받쳐주면서도, 본문과 버튼의 정보는 군더더기 없이 명확하게 전달하는 가장 안정적이고 가독성 높은 파트너입니다.

• Style 2. 감성적이면서 우아한 분위기의 "디자이너, 작가, 감성 쇼핑몰"

  • 브랜드의 정체성과 감성적인 무드를 전달하고 싶을 때 사용하는 조합입니다.

  • 타이틀 폰트: '마포꽃섬'

    • 일반적인 명조체가 아닌, 개성 있는 손글씨의 질감을 가진 폰트입니다. 페이지 전체에 따뜻하고 감성적인 분위기를 불어넣어, 방문자의 감성을 자극하기에 좋습니다.

  • 본문/버튼 폰트: '본고딕'

    • 감성적인 타이틀 폰트가 시선을 사로잡는 역할을 한다면, '본고딕'은 그와 대비되어 본문의 가독성을 확보하고 전체적인 균형을 잡아주는 깔끔한 파트너입니다.

• Style 3. 클래식한 분위기로 신뢰감을 주는 "전문 강사 또는 비즈니스 포트폴리오"

  • 전문성과 신뢰감을 주어야 하는 프로필 링크에 어울립니다.

  • 타이틀 폰트: 'KoPub 바탕체'

    • 실제 신문과 서적에 사용되는 이 폰트는, 그 자체로 정보의 신뢰도를 높여줍니다. '전문가' 또는 '장인'의 이미지를 강조하기에 가장 적합한 클래식 세리프 폰트입니다.

  • 본문/버튼 폰트: '프리텐다드'

    • 'KoPub 바탕체'의 클래식함을 해치지 않으면서, 경력 사항이나 상담 버튼의 텍스트를 가장 명확하고 깔끔하게 보여줍니다. 어떤 타이틀과도 잘 어울리는 안정적인 조합입니다.

있어빌리티 빼놓을 수 없으니까, 영문 폰트 조합 예시 3

• Style 4. 강렬한 임팩트를 줘야 하는 "페스티벌 또는 브랜드 캠페인"

  • 강렬한 시각적 압도가 필요할 때 사용합니다.

  • 타이틀 폰트: 'Anton'

    • 매우 굵고 높이가 긴, 압축된(Condensed) 형태의 폰트입니다. 그 자체로 포스터의 헤드라인처럼 작동하여, 한글 폰트보다 더 강렬한 시각적 압도가 필요할 때 방문자의 시선을 고정시킵니다.

  • 본문/버튼 폰트: 'Montserrat'

    • 'Anton'과 같은 기하학적(Geometric) 기반의 폰트라 조화로우면서도, 'Anton'과 달리 가독성이 매우 뛰어납니다. 강력한 타이틀 아래서 기능적인(Functional) 역할을 완벽하게 수행합니다.

• Style 5. 감성적이면서 우아한 분위기의 "뷰티, 패션 브랜드 또는 개인 브랜딩"

  • 세련되고 고급스러운 무드를 전달하고 싶을 때 사용하는 조합입니다.

  • 타이틀 폰트: 'Zeyada'

    • 흘려 쓴 듯한 자연스러운 손글씨체(Script)로, 기계적인 느낌을 완전히 배제하고 페이지에 인간적이고 감성적인 느낌을 부여합니다.

  • 본문/버튼 폰트: 'Poppins'

    • 'Zeyada'의 자유로운 곡선을 모던하게 정돈해주는 폰트입니다. 부드러운 곡선을 가진 산세리프체라 'Zeyada'의 감성적인 느낌과 잘 어울리면서도, 본문과 버튼의 가독성을 해치지 않습니다.

• Style 6. 클래식한 분위기로 신뢰감을 주는 "파인다이닝 또는 고급 서비스"

  • 전통과 신뢰를 강조하는 프리미엄 비즈니스에 어울립니다.

  • 타이틀 폰트: 'Playfair Display'

    • 패션 잡지(보그, 하퍼스 바자)의 헤드라인으로 자주 쓰이는, 획의 대비가 강한 클래식 세리프 폰트입니다. 페이지의 격을 높여주며 고급스러운 인상을 줍니다.

  • 본문/버튼 폰트: 'Lato'

    • 'Playfair Display'의 화려함과 장식성을 받쳐주는, 매우 깔끔하고 전문적인 폰트입니다. 정보 전달과 신뢰감을 동시에 주는, 가장 세련된 조합 중 하나입니다.
      

서체 조합만으로도 달라지는 프로필 링크 지금 사용해보세요.

지금까지 CdBd의 텍스트 카드의 총 44종의 서체를 활용해 '디자인 위계' 그리고 원하는 ‘분위기로 만드는 방법’에 대해 이야기 해보았는데요. 이를 보다 자세히 알려드리고자 6가지 조합까지 살펴봤습니다.

어떻게 보셨나요? 앞서 살펴본 카드 조합 방법처럼, '링크트리'에서는 불가능했던 서체 활용 프로필 링크! CdBd 에디터에서 텍스트 디자인은, 방문자의 첫인상과 브랜드의 신뢰도를 좌우하는 가장 중요한 요소로 활용할 수 있습니다.

이 핵심적인 폰트 조합 기능! 누구나 바로 경험해볼 수 있도록, 첫 번째 페이지를 평생 무료로 제공하고 있어요. 그러니 지금 바로 CdBd 프로필 링크를 경험해보시길 바라요! CdBd 프로필 링크, 가입없이 지금 사용해보기