UI 디자인 공부를 시작한 비전공자라면 반드시 알아야 할 지식 3편
프로덕트 디자이너가 가장 먼저 이해해야 할 텍스트 스타일링
UI 디자인에서 가장 중요한 게 뭘까요? 화려한 비주얼? 개성?
다 좋지만, 무엇보다 중요한 것은 정보가 빠르고 명확하게 읽히는 것입니다.
이 글에서는 사용자 중심의 인터페이스를 만들기 위한 위계의 개념부터 폰트, 텍스트 스타일링까지 다뤘습니다. 하나씩 천천히 따라오시면, UI 디자인의 기초를 다질 수 있을 거예요.
1. 위계: 중요한 정보가 먼저 보이게 만드는 원리
위계란 중요한 내용과 덜 중요한 내용을 시각적으로 구분해, 인터페이스를 쉽게 이해하게 만드는 것입니다.
색, 거리, 크기 등을 조정하면 사용자는 화면을 더 빠르게 읽고 움직일 수 있습니다.
이때 적용할 수 있는 대표적인 원리가 있습니다. 하나씩 함께 살펴봅시다.
① 근접성의 원리
가까이 있는 요소는 같은 그룹으로 인식되고, 멀리 있으면 관련 없어 보입니다.
👉 영역 간 간격을 넓히는 것만으로도 정보가 훨씬 명확해집니다.
② 공통 영역의 원리
사각형 박스처럼 공통된 배경 영역을 만들어 묶어 주면, 사용자는 이것을 한 그룹으로 인식합니다.
③ 유사성의 원리
색, 형태, 굵기, 스타일이 비슷하면 사용자는 이를 하나의 흐름으로 인식합니다.
👉 영역별 디자인을 조금만 다르게 설정해도 자연스럽게 분리가 됩니다.
④ 시선의 흐름
사람의 시선은 좌측 상단 → 우측 하단으로 흐르는 경향이 있습니다.
👉 즉, 좌측 상단은 가장 강한 시각적 위계를 갖는 자리입니다.
⑤ 시각적 무게감
다음 요소가 강할수록 시각적 무게감이 큽니다. 즉, 더 중요하게 읽힙니다.
- 텍스트의 크기가 큼
- 폰트가 더 굵음
- 컬러의 채도가 높거나, 배경색과 대비가 높음
2. 타이포그래피와 폰트
타이포그래피란?
글자의 형태, 간격, 배열 등을 조화롭게 설계하는 것입니다.
폰트란?
여러 굵기와 스타일로 구성된 글자 형태의 집합입니다.
왜 폰트가 중요한가요?
- 폰트를 잘 사용하면 정보 위계를 명확하게 드러낼 수 있습니다.
- 가독성이 좋은 폰트는 UI를 더욱 읽기 편하게 만듭니다.
3. UI 디자인 폰트 선택 가이드
(1) 산세리프(Sans-serif) 폰트
- 세리프체: 장식이 있는 글꼴 (ex. 명조, 바탕)
- 산세리프체: 장식이 없는 글꼴 (ex. 고딕, 돋움)
UI 디자인에서는 대부분 산세리프체를 사용합니다. 글자가 단순해 읽기에 최적화되어 있기 때문입니다.
(2) 여러 굵기와 언어를 지원하는 폰트
프리텐다드(Pretendard)처럼 다양한 굵기를 제공하고, 여러 언어를 지원하는 폰트를 사용하면 좋습니다.
(3) 무료 사용 가능한 폰트
처음 디자인 시스템을 만들 때는 무료 폰트가 훨씬 안전합니다.
비용 부담이 없고, 팀원 모두가 쉽게 적용할 수 있으며, 상업적 사용까지 가능한 폰트를 사용하세요.
4. 텍스트 스타일링: 크기·두께·컬러·행간·자간
타이포그래피는 폰트 자체보다 텍스트 스타일링이 훨씬 큰 역할을 합니다.
크기·두께·컬러·행간·자간만 정확히 다뤄도 화면이 2배는 깔끔해집니다.
① 크기 (Font Size)
- 하나의 기준을 정합니다. 보통은 14~18px을 사용합니다. (*모바일 기준)
- 중요도에 따라 크기를 조절하면서 자연스럽게 위계를 표현합니다.
작은 텍스트는 11px 이하로 내려가면 가독성이 급격히 떨어집니다.
따라서 UI에서는 최소 12px 이상을 권장합니다.
② 두께 (Font Weight)
- 두꺼울수록 위계가 높습니다. 즉, 화면에서 더 중요하게 보입니다.
- UI 본문에서는 보통 Regular 또는 Medium을 기본 두께로 사용하며, 타이틀에서는 주로 bold 이상을 사용합니다.
Light 이하의 두께는 잘 사용하지 않습니다.
모바일 UI에서 잘 보이지 않기 때문입니다.
③ 컬러 (Text Color)
- 기본적으로 뉴트럴 톤(회색 계열)을 사용하고, 강조할 때만 눈에 띄는 컬러를 사용합니다.
- 배경과의 대비가 클수록 위계가 큽니다. 즉, 화면에서 더 중요하게 보입니다.
대비가 너무 낮으면 글자가 잘 읽히지 않습니다.
WCAG(웹 콘텐츠 접근성 가이드라인) 기준, 최소 4:5:1 이상을 권장합니다.
④ 행간 (Line-height)
- 행간은 한 줄에서 다음 줄 끝까지의 세로 간격입니다.
- UI 본문 기준 150~180%가 가장 읽기 좋습니다.
- 너무 좁으면 텍스트가 뭉쳐 보이고, 너무 넓으면 시선이 흩어집니다.
⑤ 자간 (Letter-spacing)
- 자간은 글자와 글자 사이의 간격입니다.
- 제목처럼 글자가 큰 부분일수록, 자간을 미세하게 조정해주세요. 텍스트를 읽기 편하게 만들고, 시각적 안정감을 줄 수 있습니다.
더 자세한 내용을 배우고 싶나요?
코드잇에서는 4주 만에 UI 디자인을 배울 수 있는 <누구나 쉽게 시작하는 UI 디자인>과
취업까지 책임지는 <프로덕트 디자이너 부트캠프>를 운영하고 있어요.
아래 내용을 보고, 여러분의 상황에 맞춰 골라보세요!
4주 단기 과정이 궁금하다면?
이런 역량을 키울 수 있어요
- 여백·그리드·명도·폰트·아이콘·IA 등 UI 원칙을 배워요
- Figma, Photoshop/레오나르도 AI/챗GPT 등 도구 사용법을 배워요
- 38개의 실습으로 이력서, 블로그, 메일, 쇼핑몰, 대시보드, 랜딩 페이지 등을 직접 만들어 볼 수 있어요
- 3개의 프로젝트를 통해 디자인 프로젝트를 완성해요
- 획득 스킬: UI 기본기·디자인 사고력, Figma, 챗GPT, 레오나르도 AI, Photoshop
이런 혜택을 얻을 수 있어요
.png%3Ftable%3Dblock%26id%3D2b26fd22-8e8d-80cb-ae02-c2b1bdf268d1%26cache%3Dv2&w=1920&q=75)
한 달에 한 번씩
현직자 라이브 특강
.png%3Ftable%3Dblock%26id%3D2b26fd22-8e8d-807e-ba9e-c708119af821%26cache%3Dv2&w=1920&q=75)
공식적으로 인정하는
NCS 수료증 발급
고민을 함께 나누는
수강생 전용 커뮤니티
.png%3Ftable%3Dblock%26id%3D2b26fd22-8e8d-8051-a417-e70d9a39879d%26cache%3Dv2&w=1920&q=75)
강의 요약, 학습 보조 자료
목표 달성 자료집 제공
.png%3Ftable%3Dblock%26id%3D2b26fd22-8e8d-80d0-ac73-f1bb05dcebfc%26cache%3Dv2&w=1920&q=75)
복습으로 완성하는 실력
2개월 추가 수강 기간
완주할 수 있게 도와주는
1:1 밀착 학습 관리
디자이너 취업 과정이 궁금하다면?
이런 역량을 키울 수 있어요
데이터 기반 문제 해결력
실제 기업 데이터를 분석하며, 사용자 문제를 정의하고 개선 방안을 설계합니다.
UX/UI 기본기
정보 구조와 시각적 위계를 이해하고, Figma로 완성도 높은 UI를 구현합니다.
AI로 완성하는 실무 디자인
아이디어, 리서치, 디자인을 AI와 함께 수행하며 생산성을 극대화합니다.
협업으로 완성하는 팀 프로젝트
기획부터 디자인까지 팀으로 수행하고, 현직자 피드백을 통해 실무 감각을 기릅니다.
이런 혜택을 얻을 수 있어요
100% 인턴십 제공과 1:1 취업 지원까지 진행돼요!
- 수료생 전원에게 인턴십을 100% 제공해 드려요.
- 이력서 작성부터 면접 대비까지 현직자 멘토의 1:1 코칭이 제공돼요.
수강료 0원에 학습 내내 맥북 무상 지원까지!
- 국비지원으로 전액 무료로 학습할 수 있어요. (올해까지만!)
- 학습 내내 맥북이 무상 지원되니, 최적의 환경으로 공부할 수 있어요.
Share article