[UI 디자인의 모든 것] CH2: UI 디자인 기본(컬러, 타이포그래피, 아이콘)

 

컬러

 

컬러

• 사람이 어떤 사물이나 물체를 볼 때 가장 먼저 인지하는 요소 or 가장 오래 기억에 남는 요소
• 브랜드 컬러는 사용자에게 브랜드의 이미지를 지속적으로 전달해서 기억하고 인지시킬 수 있는 중요한 역할
  • 여러가지 의미를 담고 있는 컬러
    

    

    출처: UI 디자인 원칙_챕터2-1

컬러의 역할

• 중요한 정보를 강조하거나 사용자의 행동을 유도하기 위해 주로 사용
• 브랜드 아이덴티티의 스타일을 결정하는 요소 중 하나
• 중요한 정보 강조
  • 정보의 중요도에 따라 채도나 명도를 활용해 주요 요소와 보조 요소를 구분
    
  • 계층 구조
    
  • 강조
• 사용자의 행동 유도
  • 버튼이나 링크에 컬러를 적용해 사용자가 다음 단계로 나아갈 수 있도록 행동을 유도
  • 컬러를 넣어 사용자가 누르고 싶게 만들기
    • 강조하고 싶은 주요 요소에 ▶️ 브랜드 컬러 사용해 사용자 행동 유도
    • 보조 요소에 ▶️ 채도가 낮은 그레이 컬러 사용해 상대적으로 중요도 낮추기
  • 컬러를 넣어 의미 전달
• 상태(State)
  • 사용자와 상호작용하면서 즉각적인 피드백(상태)를 전달
    • 텍스트 필드 입력
    • 버튼의 활성화/비활성화
    • 토글
    • 탭
• 브랜드 아이덴티티

• • 브랜드 컬러를 지속적으로 사용자에게 전달하여 브랜드 아이덴티티를 각인시킴
  • 브랜드 이미지를 떠오르게 하는 강력한 시각적 전달 요소
  • 브랜드 컬러는 브랜드가 가지고 있는 이미지, 가치관, 성향을 담을 수 있는 대표 컬러로 선정
  • 지속적으로 사용자에게 전달하여 브랜드에 대한 이미지를 만들어 감

---

브랜드를 대표하는 컬러

• 컬러로 연상되는 브랜드 찾아보기 
  • 빨강: 11번가
  • 주황: 당근
  • 노랑: 카카오톡, 밀리의 서재
  • 초록: 윌라, 라인, 네이버
  • 파랑: 토스, 쿠팡
  • 보라: 마켓컬리
• 브랜드 이미지 연상하기
  • 빨강 → 11번가 → 에너지, 활력
  • 주황 → 당근 → 친근한, 따뜻한
  • 노랑 → 카카오톡 → 밝은, 긍정적, 친근한
  • 초록 → 윌라 → 신뢰, 평화, 안정적
  • 파랑 → 토스 → 신뢰, 정직, 배려
  • 보라 → 마켓컬리 → 긍정적, 밝은, 고급스러움
• 브랜드의 메시지 연상하기
  • 빨강 → 11번가 → 다양한 상품을 제공하고 차별적인 서비스로 새로운 라이프 스타일 안내
  • 주황 → 당근 → 친근하고 포근한 이미지 전달
  • 노랑 → 카카오톡 →  커뮤니케이션이 주는 즐거움 전달
  • 초록 → 윌라 → 독서가 주는 즐거움 전달
  • 파랑 → 토스 → 자유로운 금융생활을 금융 생활을 도움
  • 보라 → 마켓컬리 → 자신감과 고급스러움을 의미하는 보라색을 사용해 업계와 차별화된 프리미엄 서비스를 만들겠다라는 강한 메세지 전달

---

컬러 비율

📌 5:25:70의 비율 활용하기
5% 주색(브랜드 컬러), 25% 보조색, 70% 배경색으로 사용

• 반드시 위 비율을 맞춰야 하는 것은 아님
• 디자인의 목적, 레이아웃, 범위에 따라 주색, 보조색, 배경색의 배색 비율을 정할 수 있음
• 비율에 따라 디자인 느낌이 달라질 수 있기에 제품이나 서비스의 성격, 컨셉에 따라 적절한 비율을 찾아야 함
• 컬러를 잘 활용한 브랜드?
  • 스타벅스
  • 이마트

---

UI 컬러 구성

📌 UI 디자인에서는 Primary, Secondary, Neutral, Semantic 컬러를 사용

• Primary  color
  • 주색
  • UI에서 가장 강조해야 하는 영역
  • 사용자의 행동을 유도할 때 사용: CTA 버튼 강조하여 행동 유도, 로그인·회원가입 유도, 중요한 정보 강조
  • 브랜드를 대표하는 컬러로, 브랜드의 인지도를 향상시키고 각인시킴: 브랜드 로고, 앱 아이콘, 스플래시
• Secondary  color
  • 보조색
    • 보색: Primary와 반대되는 색으로 생동감 있고 활동적인 느낌을 줌
    • 유사색: Primary 기준으로 조화롭고 안정적인 느낌을 줌
  • Primary color 를 보완하면서 조화를 이루는 역할
• Neutral  color
  • 중립의 컬러
  • UI 디자인에서 지원 역할
  • 보통 텍스트와 배경에 사용
  • 회색 ~검은색까지 회색 음영을 포함
  • UI 디자인에서 70% 를 차지할 만큼 가장 많은 영역에 사용
• Semantic color
  • 시스템 컬러
  • UI 디자인에서 현재 시스템의 상태를 사용자에게 알려주며 상호작용하고 있다는 것을 보여주는 역할
  • UNESCO 도로 표지판 기준으로 표준화된 컬러를 도입하여 사용
    • 빨강, 노랑, 녹색은 세계적으로 일관된 의미로 사용 → 공공시설, 교통 관련 신호등에도 동일하게 적용하여 사용

출처: UI 디자인 원칙_챕터2-1

---

배경과 컬러 

• 컬러는 상대적이라 주변 환경(배경 색)에 따라 영향을 받음
• 다크/라이트 모드에 따라 배경색이 반전되기 때문에 각 모드에 맞는 컬러를 사용해야 함

출처: UI 디자인 원칙_챕터2-1

 

형태와 컬러

• 컬러는 상대적이라 형태에 따라 영향을 받음
• 면적이 넓은 배경과 면적이 좁은 텍스트와 같이 형태에 따라 컬러는 영향을 받음
• 배경에 사용된 경우, 면적이 넓음 ▶️ 가독성 good
• 반면 텍스트는? 상대적으로 면적이 좁아 가독성이 낮음
• 형태에 따라 코드값을 알맞게 적용해 가독성을 높여야 함

 

과도한 컬러 사용 피하기

• 한 화면에 너무 많은 컬러를 사용하는 것은 사용자에게 혼란을 줄 수 있음
• 사용자가 집중할 수 있도록 불필요한 컬러 사용은 지양하기
• 사용자 행동 유도, 정보를 강조해야 하는 경우에는 기준에 맞는 컬러 사용하기
• 텍스트와 배경 컬러의 대비를 높여 가독성 확보하기

---

 

타이포그래피

 

OS별 시스템 폰트

	IOS	Android
한글	Apple SD Gothic Neo	Noto Sans
영문, 숫자	SF Pro	Roboto
세리프	New York

• 시스템 폰트의 장점
  • 국문, 영문, 일문, 한자 등 다국어 지원
  • 다양한 사이즈와 굵기 제공
  • 폰트 경량화로 용량이 가벼운
  • 무료로 사용 가능
  • 상업용으로 사용 가능
• 웹 폰트
  • 사용자가 해당 폰트를 시스템에 설치하지 않아도 사용 가능
  • 모든 플랫폼과 브라우저에서 일관된 디자인 경험 가능
  • 시스템 폰트와 동일한 장점 가지고 있음

 

Serif 와 Sans-Serif

• Serif
  • 글자 획의 시작 or 끝 부분이 도출된 형태의 글꼴
  • 한글에서 명조, 바탕체가 세리프체에 속함
  • 글자 획의 굵기가 가로, 세로가 다름
  • 책이나 신문 같은 인쇄물에서 주로 사용
• Sans-Serif
  • 글자 획의 끝부분이 돌출되지 않은 글씨체
  • 한글의 고딕체가 산세리프에 속함
  • Sans-Serif는 Serif가 없다는 뜻으로, 글자 획의 굵기가 일정하고 끝부분에 삐침이나 돌출없이 반듯한 형태를 뜻함

 

폰트 사이즈

• 사용자를 고려한 폰트 사이즈
  • 모바일 스크린 화면이 작기 때문에 사용자의 움직임, 주변 조명 같은 요소들이 가독성에 영향을 줄 수 있음
  • 사용자의 상황, 환경을 고려해 폰트 사이즈를 설정
• 디바이스 화면으로 보이는 실제 사이즈 고려
  • PC에서는 확대해서 작업하기에 상대적으로 폰트가 크게 느껴지지만 실제 사이즈는 작음
  • 모든 디자인은 해당 디바이스 스크린에서 확인해야 함
  • 폰트 크기와 컬러, 여백 등 모든 요소들이 해당 디바이스에서 최적화되어 잘 보이는지 확인 필요 
• 용도별 사이즈
  • 📌 10 이하의 폰트는 사용하지 않는 것을 권장

용도	폰트 사이즈
Title 제목	18-32
Body 본문	14-18
Caption, Label 캡션, 레이블	10-12
Minimal size 최소 사이즈	IOS: 11 / Android: 12 / Web: 14

출처: UI 디자인 원칙_챕터2-2

---

시각적 계층 구조

• 텍스트의 사이즈, 두께, 컬러, 위치, 여백 등 요소를 활용해서 더 나은 사용자 경험을 도와줌
• 타이포그래피 활용 방법
  • 텍스트 사이즈 변화: 중요한 정보는 더 큰 텍스트 사용
  • 텍스트 두께 변화: 헤딩, 제목, 주요 핵심 정보에는 더 굵은 텍스트 사용
  • 텍스트 컬러 변화: 대비되는 컬러를 활용해 텍스트의 가독성을 높임
  • 자간과 행간 조정: 텍스트 위치와 용도에 맞는 자간과 행간을 사용해 가독성을 높임
• 명확한 계층
  • 타이틀 > 서브 타이틀 > 본문을 활용해 계층 구조 만들기
  • 폰트 사이즈는 확실하게 차이를 두는 것이 좋음 ▶️ 1.5-2배 차이를 둘 수 있음 ▶️ e.g. 본문: 16px 이면, 서브 타이틀: 32px 
  • 텍스트에 너무 과도한 컬러 사용하지 않기(복잡해 보일 수 있음)

 

일관된 폰트 스타일

• 폰트 종류
  • 브랜드 이미지와 의미를 전달할 수 있는 폰트 선택하기
  • 하나의 제품과 서비스에는 동일한 폰트로 통일해서 사용하는 것이 좋음
  • 폰트 종류가 적을수록 ▶️ 일관된 디자인 + 유지 보수 용이
• 폰트 사이즈
  • 사용자가 읽기 편하도록 하나의 화면 디자인에서는 폰트 크기를 목적에 맞게 최소화로 사용하기
  • 본문 텍스트는 14-18 사이즈 권장
  • 너무 다양한 사이즈를 사용하면? ▶️ 일관성이 없고 복잡해 보임😓
• 폰트 컬러
  • 제품 UI 디자인 가이드 기준과 동일한 폰트 컬러를 적용해 일관성 유지하기

---

여백과 정렬

• 자간과 행간
  • 자간:
    • 글자와 글자 사이의 간격
    • 꼭 필요한 경우에만 설정하기 ▶️ 설정에 따라 가독성에 큰 영향을 줄 수 있음
    • 글자가 커질수록 자간이 멀어져 보임 ▶️ 자간을 줄여주기
    • 글자가 작아질수록 식별이 어려움 ▶️ 자간을 늘려주기
  • 행간:
    • 글줄과 글줄 사이의 간격
    • 줄의 길이에 따라 행간을 적절하게 설정하면 가독성 높일 수 있음
    • 타이틀, 서브 타이블, 본문과 같이 사용되는 용도에 따라 행간이 다름
    • 보통 타이틀, 서브 타이틀: 1.2-1.5 배 설정, 본문: 1.6-2.0배로 설정함
• 타이틀, 서브 타이틀, 본문 여백 활용
  • 본문 행간
    • 글자 크기에 비례하여 행간 설정
    • 본문 행간의 여백이 가장 작음
  • 서브 타이틀과 본문 행간
    • 본문과 서브 타이블 글자 크기에 비례하여 행간 설정
    • 본문 행간의 여백 보다 큼
  • 서브 타이틀과 타이틀의 행간
    • 본문과 서브타이틀의 글자 크기에 비례하여 행간 설정
    • 서브 타이틀과 본문 행간의 여백 보다 큼

출처: UI 디자인 원칙_챕터2-2

---

 

아이콘

 

아이콘의 역할

• 명확한 의미 전달: 사용자가 해석하지 않아도 의미를 쉽게 전달하고 떠올릴 수 있음
• 브랜드 아이덴티티: 브랜드의 성격, 이미지, 의미를 반영한 아이콘은 사용자 기억에 오래 남음

 

일관된 아이콘

• 아이콘 스타일
  • Outlined, Filled, Colored, Image 같은 다양한 스타일 존재
  • Outlined와 Filled는 기본적인 형태로 가장 많이 사용
  • Colored 는 사용자의 행동에 피드백을 주거나 행동 유도할 때 사용
  • Image는 높은 주목도가 필요할 때 주로 사용
    

    

    출처: UI 디자인 원칙_챕터2-3

• Stroke 두께
  
  • 두께가 얇은 아이콘은 가벼운 느낌을, 두꺼운 아이콘은 무거운 느낌을 줌
  • UI 디자인 전체 컨셉에 영향을 미치기 때문에 동일한 두께로 디자인하는 것이 좋음
  • 📌 두께가 두꺼워질 수록 표현에 제한이 생김 ▶️ 세밀한 작업이 필요한 경우 얇은 두께를 사용하는 게 좋음
• Corner radius(곡률)
  • 곡률이 0이면 ▶️ 직각형태로 현대적이고 단단하면서 심플한 느낌을 줌
  • 곡률 수치가 높아질수록 ▶️ 부드럽고 따뜻하면서 친근한 느낌을 줌

•  
• 일관된 스타일
  • Outlined, Filled, Colored, Stroke 두께, Radius 를 통일하여 일관되게 디자인하는 것이 중요함
  • 하나의 제품이나 서비스에서 동일한 스타일 적용해서 작업해야 함
  • 아이콘은 전체 디자인 컨셉 + 브랜드 아이덴티티를 대표하는 요소로, 사용자에게 일관된 경험을 제공할 수 있어야 함

 

아이콘 시각 보정

• 사람의 눈은 착시현상으로 인해 글자나 도형이 불균형으로 보이거나 위치, 크기가 다르게 보일 수 있기 때문에 시각 보정을 통해 균형있는 아이콘을 만들어야 한다. 
• 도형의 부피감
  • 실제 사이즈는 동일(20*20)하지만, 원보다 사각형 면적이 더 넓기 때문에 사각형이 더 커보인다. 이럴 경우 임의로 원의 크기를 키우거나 사각형의 크기를 줄여서 시각적으로 균형을 맞추는 게 좋음
  • 원과 사각형 면적이 같아지려면 사각형 한 변의 길이보다 원의 지름이 약 1.12배가 되어야 함
    반대로 사각형 지름에 0.88 배를 적용하면 원과 면적이 같아짐
  • 아이콘 사이즈는 소수점이 나와도 됨 ▶️ 아이콘 최종 사이즈는 아이콘을 감싸고 있는 프레임의 크기로 추출되기 때문!
    

    

    출처: UI 디자인 원칙_챕터2-3

 

 

아이콘 단순화

• 단순화해서 작업하는 게 좋음
  • 디테일하게 표현되면 완성도가 높아보일 순 있으나, 모바일은 스크린이 작기 때문에 디테일하게 그릴수록 아이콘이 무엇을 의미하는지 이해하기 어려워짐
  • 아이콘을 너무 단순화해서 본인만 알 수 있는 아이콘은 ❌
• 사용자의 상황이나 환경 고려해서 아이콘 제작하기

---

레이아웃과 키라인

• 아이콘 레이아웃
  • 크게 세 영역(트림, 라이브, 패딩)으로 나뉨
  • 트림 영역: 일반적으로 24*24, 아이콘 실제 사이즈를 나타냄, 아이콘 형태는 트림 영역 밖으로 확장되지 않도록 주의하기
  • 라이브 영역: 패딩 영역을 제외한 실질적 작업 영역, 24*24 기준으로 20*20 사이즈로 사용
  • 패딩: 트림 영역 안쪽으로 상하좌우 2만큼의 영역을 나타냄 (아이콘 리사이징 시 이미지가 잘려보이지 않게 하기 위해 2만큼의 여유를 두고 작업)
    

    

    출처: UI 디자인 원칙_챕터2-3

• 아이콘 형태
  • 크게 4가지(정사각형, 원형, 가로로 긴 사각형, 세로로 긴 사각형)로 나뉨
  • 다양한 형태의 아이콘은 그리드에 맞게 배치해 일관되게 제작하기
  • 아이콘 너비를 동일하게 적용해야 비슷한 비율로 아이콘 제작 가능
  • 같은 영역 안에서 가로로 긴 사각형은 가로의 너비를, 세로가 긴 사각형은 세로 너비를 동일하게 해주기
    

    

    출처: UI 디자인 원칙_챕터2-3

• 아이콘 키 라인
  • 정사각형, 원형, 가로 직사각형, 세로 직사각형 모양은 키 라인에 포함되어 있음 ▶️ 키 라인 기준으로 아이콘 제작하기
  • 아래 이미지는 24*24 기준 아이콘의 키라인
    

    

    출처: UI 디자인 원칙_챕터2-3

배율 설정

• 배수 설정하기
  • 아이콘은 해상도에 따라 2, 3, 4 배 리사이징이 되기 때문에 사이즈가 줄거나 늘었을 때 소수점이 발생하지 않도록 작업하는 것이 좋음
  • 일반적으로 12, 16, 20, 24, 32, 48 등 4·8 의 배수를 적용해 사용하는 편
• Scale 적용하기
  • 아이콘은 해상도에 따라 리사이징이 필요
  • 아이콘 가로, 세로에 Constraints Scale은 필수로 적용해야 사이즈에 맞는 이미지를 추출할 수 있음