타이포그래피
사용자의 경험을 향상시키는 중요한 요소
OS별 시스템 폰트
각 OS에서는 최적화된 시스템 폰트를 사용
- IOS, Android 시스템 폰트
장점 : 국문/영문/일문/한자 등 다국어를 지원, 다양한 사이즈와 굵기, 폰트 경량화로 용량이 라이트, 무료, 상업용 사용 가능 - 웹 폰트
웹 페이지에서 사용 가능한 폰트를 온라인에서 다운로드하여 쓸 수 있는 폰트. 모든 플랫폼과 브라우저에서 일관된 디자인 경험 가능.
대표적으로 프리텐다드, 스포카 한 산스, 슈트를 사용.
장점 : 시스템 폰트와 동일
Serif 와 Sans-Serif
- Serif
글자 획의 시작이나 끝부분이 도출된 형태의 글꼴. 한글에서 명조나 바탕체가 그예. 글자 획의 굵기가 가로와 세로가 다르고, 책이나 신문과 같은 인쇄물에서 주로 사용.
- Sans-Serif
글자 획의 끝부분이 돌출되지 않은 글씨체. 한글의 고딕체. Sans-Serif는 Serif가 없다는 뜻이다.
폰트 사이즈
- 사용자를 고려한 폰트 사이즈
모바일 스크린 화면은 작기 때문에 사용자의 움직임, 주변 조명과 같은 요소들이 가독성에 영향을 줄 수 있음. 사용자의 상황, 환경을 고려하여 폰트 사이즈를 설정해야 함. 
디자인 작업은 PC에서 확대해서 작업하기에 모든 디자인은 해당 디바이스 스크린에서 확인 해야 함. 모바일 디자인은 모바일, TV 디자인은 TV, Watch 디자인은 Watch 디바이스에서 최적화 되었는지 꼭 확인하기.- 용도별 사이즈
※ 10 이하의 폰트는 사용 권장 XXX.
시각적 계층 구조
텍스트의 사이즈, 두께, 컬러, 위치, 여백 등 요소를 활용하여 더 나은 사용자 경험을 할 수 있도록 도와줌.
- 타이포그래피 활용 방법 : 텍스트의 사이즈 / 두께 / (대비되는) 컬러 / 자간 및 행간 변화
- 명확한 계층
계층 구조(타이틀 > 서브 타이틀 > 본문)를 명확히 하여 텍스트의 가독성을 높이고 시선의 흐름을 위에서 아래로 자연스럽게 만듦
1) 타이틀(제목)
폰트 사이즈 / 두께 / 컬러 활용하여 가장 잘보이도록 강조, 위에서 아래로 시선을 유도하기 위해 본문과 서브 타이틀 상단에 위치시키기.
2) 서브 타이틀(소제목)
타이틀보다는 작은 사이즈로, 본문보다는 큰 사이즈로 제작, 타이틀과 본문 사이에 위치하기 때문에 위아래 여백 적절히 설정.
3) 본문
타이틀, 서브 타이틀 보다 사이즈는 작게 설정, 컬러도 덜 강조
※ 폰트 사이즈는 확실하게 차이를 두는 것이 좋음. 1.5-2배 정도(본문에 16px을 적용했다면 서브타이틀은 32Px 적용), 과도한 컬러 사용 금물 - 예시
일관된 폰트 스타일
하나의 제품과 서비스에는 일관된 폰트 스타일을 사용하는 것이 좋다.
- 폰트 종류
브랜드 이미지와 의미를 전달할 수 있는 폰트를 선택하기, 하나의 제품과 서비스에는 동일한 폰트로 통일해서 사용, 폰트 종류가 적을 수록 일관된 디자인 가능 및 유지 보수가 용이해짐, 폰트에 차이를 두고 싶다면 같은 폰트의 사이즈와 두께 활용.
- 폰트 사이즈
사용자가 읽기 편하도록 하며, 하나의 화면 디자인에서 폰트크기는 목적에 맞게 최소화로 해야함.
1) 본문 텍스트는 14-18 사이즈를 권장
2) 타이틀, 본문 목적에 맞는 사이즈로 작업 + 너무 다양한 사이즈는 일관성 없고 복잡.
- 폰트 컬러
목적에 맞게, 제품의 UI 디자인 가이드 기준과 동일한 폰트 컬러를 적용하여 일관성 유지.
여백과 정렬
자간(Letter Spacing) : 글자와 글자 사이의 간격, 자간은 꼭 필요한 경우에만 설정(가독성에 큰 영향), 글자가 커질수록 자간이 멀어져 보이기 때문에 자간을 줄여는 것이 좋고, 글자가 작아질수록 식별이 어려워지기 때문에 자간을 늘려주는 것이 좋음. 웹에서는 커닝 작업 안함.
※ 커닝(Kerning)이란?
글자 모양에 따라 간격을 조절한다는 뜻. 자간과의 차이점은 자간은 모든 글자에 동일한 수치값을 적용하는 것이고, 커닝은 글자 모양에 따라 수치값을 다르게 적용하여 시각적으로 보정하는 것.
행간(Line Height) : 글줄과 글줄 사이의 간격을 의미, 용도에 따라 행간이 달라짐, 보통 타이블, 서브 타이틀에는 1.2 -1.5배를 설정하고, 본문에는 1.6-2.0배를 설정.- 타이틀, 서브 타이틀, 본문 여백 활용
브랜드 아이덴티티
- 현대카드
국내 최초 기업 전용서체 YouandiNewKr 폰트를 제작하여 명확하고 독보적인 브랜드 아이덴티티를 만들어 옴. 폰트를 단지 잘만든 것이 아니라, 그 폰트를 지속적으로 유지하고 발전시켜가는 것이 중요한데 현대카드 폰트는 이를 잘 지킴.
- 배달의 민족
2012년 배달의 민족은 사용자에게 브랜드를 알리기 위해 무료로 폰트를 배포함. 전용 폰트를 활용해 간접적으로 브랜드와 기업의 이미지를 효과적으로 전파함. 이또한 지속적으로 다양한 폰트(열한살체, 한나체, 주아체...)를 지속적으로 개발해나가고 있음.
아이콘
아이콘을 제작하기 위해서는 아이콘의 구조와 형태를 알야 함.
아이콘의 역할
복잡한 정보를 직관적이고 간결하게 표현하여 사용자의 상호작용
- 명확한 의미 전달
문화, 나이, 배경 제한 없이 누구에게나 의미 전달 가능
텍스트 없이도 쉽게 의미 전달 가능
좁은 공간, 짧은 시간 내 의미 전달 가능 - 브랜드 아이덴티티
시각적인 매력을 더해 디자인을 더욱 풍부하게 만듦.
브랜드의 성격, 이미지, 의미를 반영한 아이콘은 오래 기억에 남음.
맥도날드의 'M'은 멀리서도 한눈에 알아볼 수 있음.
일관된 아이콘
사용자의 인지 시간 단축 시킬 수 있음
- 아이콘 스타일
Outlined와 Filled는 기본적인 형태로 가장 많이 사용
Colored는 사용자의 행동에 피드백을 주거나 행동을 유도할 때 사용
Image는 높은 주목도가 필요할 때 주로 사용 - Stroke 두께
두께에 따라 아이콘의 분위기가 많이 달라짐.
두께가 얇은 아이콘은 가벼운 느낌, 두꺼운 아이콘은 무거운 느낌.
동일한 두께들로 디자인하는 것이 좋음.
※ 두께가 두꺼워 질수록 표현에 제한이 생기므로, 세밀한 작업이 필요한 경우 얇은 두께를 사용하면 좋음. - Corner radius(곡률)
아이콘의 통일성을 위해 곡률의 규칙을 정하고 모든 아이콘에 동일하게 적용해야 함.
곡률이 0 인 경우 직각 형태로 현대적이고 단단하면서 심플한 느낌을 주고, 곡률의 수치가 높아질수록 둥글어져 부드럽고 따뜻하면서도 친근한 느낌.
- 일관된 스타일
Outlined, Filled, Colored, Stroke 두께, Radius를 통일하여 일관되게 디자인하는 것은 중요.
아이콘은 전체 디자인 컨셉과 브랜드 아이덴티티를 대표하는 요소로 사용자에게 일관된 경험을 전달할 수 있어야 함.
아이콘 시각 보정
사람의 눈은 착시현상으로 인해 글자나 도형이 불균형으로 보이거나 위치, 크기가 다르게 보일 수 있음. 시각 보정을 통해 균형 있는 아이콘 만들기.
- 재생버튼
재생 버튼이 삼각형의 무게중심으로 인해 정렬되어 보이지 않음.
무게 중심으로 삼각형이 왼쪽으로 치우쳐 보이기 때문에 오른쪽으로 위치를 이동하여 중앙 정렬로 보일 수 있게 시각적 균형을 맞춰 주어야 함. - 도형의 부피감
실제 사이즈는 20x20으로 동일하지만 원보다 사각형 면적이 더 넓기 때문에 사각형이 더 커 보임.
이런 경우 임의로 원의 크기를 키우거나 사각형의 크기를 줄여서 시각적 균형을 맞춰주어야 함.'
원과 사각형 면적이 같아지려면 사각형 한 변의 길이 보다 원의 지름이 약 1.12배가 되어야 함. 반대로 사각형 지름에 0.88배를 적용하면 원과 면적이 같아짐.
※ 원의 면적을 구하는 공식 = 반지름x반지름x원주율(3.14)
아이콘 단순화
모바일 스크린은 영역이 작고, 사용자는 야외 또는 이동 중에도 모바일 화면을 보면서 제품을 사용한다. 따라서 사용자의 상황이나 환경을 고려하여 아이콘을 제작해야 한다.
- 아이콘의 단순화
왼쪽이 더 정교해보이지만, 모바일 UI에서는 아이콘이 작은 사이즈로 보이기 때문에 선과 면을 최소화해서 디자인해야 가독성을 높아 보임.
레이아웃과 키라인
- 아이콘 레이아웃
- 아이콘 형태
정사각형, 원형, 가로로 긴 사각형, 세로로 긴 사각형 4가지로 나눌 수 있음.
아이콘의 너비를 동일하게 적용해야 비숫한 비율로 아이콘 제작 가능.
같은 영역 안에서 가로로 긴 사각형은 가로 너비를 세로가 깉 사각형은 세로너비를 동일하게 적용해야 함.
- 아이콘 키 라인
아이콘을 일관되게 배치하기 위해 명확한 규칙이 필요
아래 이미지는 24x24 기준 아이콘의 키라인.
배율 설정
- 배수 설정하기
제품에 사용될 아이콘 사이즈를 규정해야 함.
아이콘은 해상도에 따라 2, 3, 4배 리사이징 되기 때문에 사이즈가 줄어들거나 늘어났을때 소수점이 발생하지 않도록 작업하는 것이 좋음.
일반적으로 12, 16, 20, 24, 32, 48 등 4, 8의 배수를 적용하여 사용하는 편
- Scale 적용하기
아이콘은 해상도에 따라 리사이징 필요
아이콘 가로, 세로에 Constraints Scale은 필수로 적용해야 사이즈에 맞은 이미지를 추출 가능.
레이아웃
해상도
해상도란 화면의 정밀도를 나타내는 지표로 스크린의 가로 픽셀 수 x 세로 픽셀 수를 기준으로 해상도의 정밀도를 표현.
- 해상도 선정 기준
현재 스크린 점유율을 기준으로 작업하기
'StatCounter'에서 조회하여 쉽고 빠르게 확인
[StatCounter 링크](https://gs.statcounter.com/screen-resolution-stats/mobile/worldwide/#monthly-202401-202501 - 2024 ~2025년 기준 점유율이 높은 해상도
안드로이드는 360800, IOS는 375812 해상도 사용
작업하게 될 디자이너, 개발자와 논의하여 적절한 해상도를 선정하기
아래 이미지는 하나의 디자인으로 안드로이드, IOS 두 해상도를 대응한 화면. 모든 해상도에서 일관되어 보이도록 디자인해주는 것이 좋음.
고정과 가변 영역
해상도에 맞는 레이아웃을 작업하기 위해서는 고정과 가변 영역을 잘 설정해야 함.
디자인된 화면이 생각과 다르게 개발되는 경우가 종종 있음. 따라서 해상도에 따라 요소의 크기와 여백은 어떻게 변할 것인지를 고려하여 디자인해야 함.
- 고정과 가변
1) 고정(Fix)
해상도가 커지거나 작아져도 정의한 수치값이 일정하게 유지되는 것.
좌우 마진은 모든 페이지에 일관되게 적용되어야 하기 때문에 고정으로 설정하는 편이 좋음.
2) 가변(Flexible)
고정과 다르게 해상도가 커지거나 작아지면 비율에 맞게 같이 확대되거나 축소되는 것을 의미함. 즉, 디바이스 사이즈에 맞춰 변동되는 부분들을 말함.
해상도에 따라 크기가 변하는 버튼, 배너와 같은 이미지는 가변으로 설정하는 것이 좋음. - 예시
1)캐러셀
2) 리스트
그리드 시스템
디자인 레이아웃에 규칙을 부여하여 일관된 UI를 할 수 있게 도와주는 수단
그리드
격자무늬라는 의미로, 바둑판이나 모눈종이와 같은 것.
디바이스 환경에 따라 디자인 요소를 일정한 간격으로 배치하고, 크기를 부여하여 체계적인 배열을 도와줌.
또한 desktop, tablet, mobile 반응형 디자인 작업 시 해상도 대응이 용이하게 해주고, 동일한 규칙을 적용하여 일관된 UI를 할 수 있게 해줌.
디자이너와 개발자의 원활한 커뮤니케이션을 도와줌.
4가지 기본 요소
- 컨테이너
콘텐츠의 폭, 콘텐츠를 감싸고 있는 너비를 의미
제품이나 서비스 성향에 따라 설정하는 것을 권장
mobile, tablet의 경우 가로 너비가 좁기 때문에 콘텐츠 양이 많을 경우 마진을 줄이고 컨테이너 너비를 넓게 설정하는 것을 권장 - 컬럼(Column)
단의 넓이를 의미함.
콘텐츠를 정렬하고 배치하는 역할
일반적으로 몇 개의 컬럼을 사용할까?(절대적 X)
->Mobile : 2~6 (4컬럼을 주로 사용)
Tablet : 6~12 (6~8컬럼을 주로 사용)
Desktop : 12~16 (12컬럼을 주로 사용) - 거터(Gutter)
컬럼과 컬럼 사이의 간격을 의미
콘텐츠 사이의 여백을 제공하여 가독성을 높여줌.
레이아웃에서 중요한 요소이며 디바이스마다 크기를 적절하게 설정하여 사용해야 함.
- 마진(Margine)
화면의 좌우 여백의 너비를 의미
마진에 따라 콘텐츠의 너비(컨테이너)가 정해지기에 마진 값을 정하는 것은 중요.
마진은 모든 페이지에 일정하게 적용하는 것을 권장
대표적인 마진 값 (절대적 X)
Mobile : 16~20
Tablet : 20-36
Desktop : 24~36 - 그리드 설정
gridcalculator : 컨테이너 사이즈에 따라 coulmn, margine, gutter를 어떤 값으로 설정해야하는지 쉽게 계산해주는 사이트
반응형 디자인
정해놓은 디바이스 화면 크기에 맞게 디자인과 레이아웃이 자동으로 변경되는 것.
- 중요성
1) 다양한 디바이스 사용 (어떤 환경에서든 편리하게 이용 가능)
2) 일관된 디자인
3) 비용 효율화 (하나의 코드 베이스로 되어있어 유지 보수가 용이)
4) 콘텐츠 최적화 (모든 디바이스 해상도에 맞게 콘텐츠를 최적화해줌 -> 텍스트 및 이미지 쉽게 확인하고 이해 가능) - 브레이크포인트
반응형 디자인에서 레이아웃이 변화되는 지점.
이 넷플릭스 링크에 들어가 화면 크기를 조정해보면 알 수 있음. - 브레이크 포인트 설정
현재 기준이 되는 디바이스 해상도를 위해 점유율 확인 필요
우리 서비스를 사용하는 주 사용자는 어떤 해상도를 사용하는지 파악 필요
화면 디자인에 필요한 레이아웃은 어떤 것들이 있는지 확인해야 함.
브레이크포인트를 설정할 때에는 디자이너, 개발자가 같이 논의해서 결정하는 것이 좋음.
대표적으로 사용하는 브레이크 포인트
mobile : 0~599
tablet : 600~1024
desktop : 1024~ - 최적화된 그리드, 12컬럼
12 컬러 그리드는 반응형 디자인에 최적화되어 있음.
2, 3, 4, 6단으로 자유롭게 레이아웃을 나울 수 있고 디자인과 개발에 최적화되어 있음.
반복되는 UI 디자인 분석
공통 UI 요소
공통 요소를 찾기 위한 질문 : 여러 화면에서 공통으로 사용되는 UI요소는? 동일한 스타일이나 동작을 가진 요소는?
- 기본 요소(Item)
가장 작은 요소의 컴포넌트
칩, 아이콘, 라디오 버튼, 체크박스, 버튼 등
- 조합 요소(Module)
기본 요소 + 기본 요소 혹은 기본요소 + 조합요소
카드(이미지+텍스트), 서치바(아이콘 + 입력 필드), Snackbar(텍스트+버튼) 등
- 섹션(Section)
조합 요소 + 조합 요소 + 여백(마진, 패딩)
네이게이션 바, 앱 바, 캐러셀, 탭, 리스트 등
- 개발자 모드에서 분석하기
1) 안드로이드 개발자 모드
설정 > 휴대전화 정보 > 소프트웨어 정보 > 빌드 정보 - 7번 클릭 > pin번호 입력 >설정 > 개발자 옵션 > 레이아웃 범위 표시
2) Web 개발자 모드
단축키는 하기와 같음.
맥 : ⌥ Option + ⌘command + i
윈도우 : F12
앨리먼트와 컴포넌트
컴포넌트 구성
- 엘리먼트(Element) : 더 이상 쪼개지지 않은 가장 작은 단위. 컬러, 타이포그래피, 아이콘, 여백, 곡률, 그리드 등
- 컴포넌트(Component) : 앨리먼트 + 앨리먼트를 조합
- 합성 컴포넌트(Compound Component) :컴포넌트 + 컴포넌트를 조합
- 페이지(Page) : 합성 컴포넌트를 활용하여 UI 화면을 그려냄.
※ 컴포넌트는 작은 단위부터 점진적으로 큰 단위로 작업
컴포넌트 네이밍
컴포넌트 네이밍을 구조화하면 원활한 커뮤니케이션 가능
- 영문 네이밍 : 아이콘과 컴포넌트 네이밍은 개발로 활용될 확률이 높기 때문에 영문으로 정의해 주시는 것이 좋음.
- 사용 맥락에 따른 네이밍
UX/UI 학습