사용자가 모바일 앱이나 웹을 사용할 때, 가장 많은 시간을 마주하는 요소는 바로 텍스트.
디자이너의 입장에서는 이 텍스트가 읽히는 방식, 즉 가독성과 시각적 안정감을 얼마나 세심하게 고려했는지가 사용자 경험의 질을 좌우하게 됩니다. 이번 글에서는 모바일 운영체제별 타이포 기준부터 시작해 행간, 대비, 정렬, 컬러 사용까지—UI 디자인에서 꼭 알아야 할 텍스트 가독성 원칙들을 정리했습니다. 이 글은 실제 기업 내 디자인 시스템에서 공유되었던 내용을 기반으로 실무에 바로 적용할 수 있도록 재정리한 것입니다.
1. OS별 기본 폰트와 크기
iOS
기본 폰트: San Francisco, 산돌 고딕 네오1
권장 크기: 17pt
특징: 볼드체를 활용해 시각적 위계를 강조함
Android (AOS)
기본 폰트: Roboto
권장 크기: 16px
특징: 텍스트 사이 여백이 충분해 자연스러운 흐름을 제공하며, 삼성/엘지 기기는 별도 시스템 폰트 사용
2. 행간(Line Height)
가독성을 확보하기 위해선 충분한 줄 간격 확보가 필수입니다. 행간은 디자인 시스템 내 여백(padding, margin 등)과도 연결되므로, 보통 4의 배수(px)로 정리하는 것이 좋습니다.
권장 기본값: 1.75배, 최소 1.5배 이상
한글의 경우: 150~180%
기준선(Baseline vs Bounding Box): Android는 Baseline 기준, iOS는 Bounding Box 기준
3. 텍스트 대비(Contrast)
색 대비는 시인성과 접근성 모두에 큰 영향을 줍니다.
권장 명도 대비: 4.5:1 이상 (AA 기준)
굵고 큰 글씨(18pt~24px 이상): 3:1까지 허용
순수 블랙(#000000)은 피로를 유발할 수 있어, #444444 정도의 다크그레이를 권장
테스트 사이트: https://colourcontrast.cc
Check the contrast between different colour combinations against WCAG standards.
4. 컬러 사용 원칙
강조를 위한 색상은 1~2개로 제한하고, 같은 계열 색상 그룹을 활용해 일관성을 유지합니다.
사용 예시: Primary: #00AAF2, #A454FF / Success: #65CF55 / Warning: #FFC74C / Error: #D8250E / Delete: #ACACAC / Impossible: #E8E8E8
강조 컬러를 지나치게 다양하게 사용하면 오히려 정보 전달력이 떨어질 수 있습니다.
5. 글줄 길이(Line Length)
너무 길거나 짧은 글줄은 눈의 피로를 유발합니다.
권장 기준(PC 1920px 기준): 40~70자 이내, 최대 너비 680~780px
줄 길이는 사용하는 디바이스 크기, 텍스트 콘텐츠 성격에 따라 조정할 것
6. 정렬 방식(Alignment)
텍스트 정렬 방식에 따라 시각적 인상과 가독성이 달라집니다.
가운데 정렬(Center Alignment): 제목, 강조 문구에 사용, 시각적으로 매력적이지만 긴 문단에는 부적합
양끝 맞춤(Justified) : 좌우 줄 길이를 맞추는 방식은 단어 간 여백이 들쭉날쭉해져 가독성이 떨어질 수 있음. 본문이나 인쇄물에서 주로 사용되나, 웹이나 모바일에선 추천되지 않음
7. 폰트 형식 선택 (TTF vs OTF)
TTF (True Type Font) : 1980년대 애플이 개발, 가장 보편적 속도가 빠르고 엔진 호환성이 좋음
OTF (Open Type Font) : 1990년대 어도비+마이크로소프트 공동 개발, 곡선 표현, 고해상 출력에 적합 OTF/TTF 모두 Mac, Windows에서 호환되며, 플랫폼이나 프로젝트 특성에 따라 선택하면 됩니다.
8. 영문 전용 서체 사용
한글과 영문은 제작 기준선이 달라 같은 폰트를 사용할 경우 영문이 작게 보일 수 있음. 이를 보완하기 위해
영문은 전용 서체(예: Arial)를 지정해 사용하면 안정적인 텍스트 라인과 미세 조정이 가능합니다.
운영체제별 타이포 기준, 명도 대비, 정렬 방식, 그리고 컬러 사용법까지 이 모든 것은 단순한 규칙이 아닌, ‘읽히는 경험’을 설계하기 위한 실천의 언어입니다.
Kimdoyeon님 글 더보러 가기 : https://brunch.co.kr/@do0167
리서치 출처
사용자가 모바일 앱이나 웹을 사용할 때, 가장 많은 시간을 마주하는 요소는 바로 텍스트.
디자이너의 입장에서는 이 텍스트가 읽히는 방식, 즉 가독성과 시각적 안정감을 얼마나 세심하게 고려했는지가 사용자 경험의 질을 좌우하게 됩니다. 이번 글에서는 모바일 운영체제별 타이포 기준부터 시작해 행간, 대비, 정렬, 컬러 사용까지—UI 디자인에서 꼭 알아야 할 텍스트 가독성 원칙들을 정리했습니다. 이 글은 실제 기업 내 디자인 시스템에서 공유되었던 내용을 기반으로 실무에 바로 적용할 수 있도록 재정리한 것입니다.
1. OS별 기본 폰트와 크기
iOS
기본 폰트: San Francisco, 산돌 고딕 네오1
권장 크기: 17pt
특징: 볼드체를 활용해 시각적 위계를 강조함
Android (AOS)
기본 폰트: Roboto
권장 크기: 16px
특징: 텍스트 사이 여백이 충분해 자연스러운 흐름을 제공하며, 삼성/엘지 기기는 별도 시스템 폰트 사용
2. 행간(Line Height)
가독성을 확보하기 위해선 충분한 줄 간격 확보가 필수입니다. 행간은 디자인 시스템 내 여백(padding, margin 등)과도 연결되므로, 보통 4의 배수(px)로 정리하는 것이 좋습니다.
권장 기본값: 1.75배, 최소 1.5배 이상
한글의 경우: 150~180%
기준선(Baseline vs Bounding Box): Android는 Baseline 기준, iOS는 Bounding Box 기준
3. 텍스트 대비(Contrast)
색 대비는 시인성과 접근성 모두에 큰 영향을 줍니다.
권장 명도 대비: 4.5:1 이상 (AA 기준)
굵고 큰 글씨(18pt~24px 이상): 3:1까지 허용
순수 블랙(#000000)은 피로를 유발할 수 있어, #444444 정도의 다크그레이를 권장
테스트 사이트: https://colourcontrast.cc
Check the contrast between different colour combinations against WCAG standards.
4. 컬러 사용 원칙
강조를 위한 색상은 1~2개로 제한하고, 같은 계열 색상 그룹을 활용해 일관성을 유지합니다.
사용 예시: Primary: #00AAF2, #A454FF / Success: #65CF55 / Warning: #FFC74C / Error: #D8250E / Delete: #ACACAC / Impossible: #E8E8E8
강조 컬러를 지나치게 다양하게 사용하면 오히려 정보 전달력이 떨어질 수 있습니다.
5. 글줄 길이(Line Length)
너무 길거나 짧은 글줄은 눈의 피로를 유발합니다.
권장 기준(PC 1920px 기준): 40~70자 이내, 최대 너비 680~780px
줄 길이는 사용하는 디바이스 크기, 텍스트 콘텐츠 성격에 따라 조정할 것
6. 정렬 방식(Alignment)
텍스트 정렬 방식에 따라 시각적 인상과 가독성이 달라집니다.
가운데 정렬(Center Alignment): 제목, 강조 문구에 사용, 시각적으로 매력적이지만 긴 문단에는 부적합
양끝 맞춤(Justified) : 좌우 줄 길이를 맞추는 방식은 단어 간 여백이 들쭉날쭉해져 가독성이 떨어질 수 있음. 본문이나 인쇄물에서 주로 사용되나, 웹이나 모바일에선 추천되지 않음
7. 폰트 형식 선택 (TTF vs OTF)
TTF (True Type Font) : 1980년대 애플이 개발, 가장 보편적 속도가 빠르고 엔진 호환성이 좋음
OTF (Open Type Font) : 1990년대 어도비+마이크로소프트 공동 개발, 곡선 표현, 고해상 출력에 적합 OTF/TTF 모두 Mac, Windows에서 호환되며, 플랫폼이나 프로젝트 특성에 따라 선택하면 됩니다.
8. 영문 전용 서체 사용
한글과 영문은 제작 기준선이 달라 같은 폰트를 사용할 경우 영문이 작게 보일 수 있음. 이를 보완하기 위해
영문은 전용 서체(예: Arial)를 지정해 사용하면 안정적인 텍스트 라인과 미세 조정이 가능합니다.
운영체제별 타이포 기준, 명도 대비, 정렬 방식, 그리고 컬러 사용법까지 이 모든 것은 단순한 규칙이 아닌, ‘읽히는 경험’을 설계하기 위한 실천의 언어입니다.
Kimdoyeon님 글 더보러 가기 : https://brunch.co.kr/@do0167
리서치 출처
Related Posts
