<aside> 🎨

컬러의 역할

중요한 정보를 강조하거나 사용자의 행동을 유도하기 위해 주로 사용하는 요소이자 브랜드 아이덴티티의 스타일을 강조하는 요소 중 하나.

<aside>

1️⃣ 중요한 정보 강조 정보의 중요도에 따라 **주요 요소**와 **보조 요소**를 구분!

• 계층 구조

  요소의 중요도에 따라 계층 구조로 표현할 수 있음. 타이포 그래피와 함께 표현하면 더 효과적으로 표현 가능.

  

• 강조

  채도, 명도를 적용하여 특정 정보를 강조할 수 있음.

  강조 영역은 화면에서 최소화하여 사용 → 많은 영역을 강조할 경우 시각적으로 복잡해 보이고 사용성을 저하

  

</aside>

<aside>

2️⃣ 사용자의 행동 유도

• 버튼이나 링크에 컬러 적용

  강조할 주요 요소 브랜드 컬러 → 행동 유도, 보조 요소 채도가 낮은 컬러 → 중요도⬇️

• 의미 전달

  예) 녹색은 시작, 빨간색은 종료·도착

  지하철 노선 : 노선마다 갖는 상징적인 색상을 모든 어플에서 동일하게 사용

  

</aside>

<aside>

3️⃣ 상태(State) 즉각적인 피드백 전달

• 텍스트 필드 입력

  

  텍스트 필드 외곽선, 검색어 입력 커서에 색상 적용

• 버튼의 활성화와 비활성화

  

  비활성화 영역 → 그레이스케일, 활성화 영역 → 컬러 적용

• 토글 & 탭

  

  

  온/오프, 클릭에 따른 즉각적인 상태를 보여줌

• 브랜드 아이덴티티

  브랜드 이미지를 떠오르게 하는 강력한 시각적 전달 요소

  브랜드의 이미지, 가치관, 성향을 담을 수 있는 대표 컬러로 선정

  지속적으로 사용자에게 전달하여 브랜드에 대한 이미지를 만듦

  

</aside>

</aside>

<aside>

컬러 비율(5:25:70)

<aside> 💡

5% 주색(강조 영역), 25% 보조색, 70% 배경색으로 사용

주색, 보조색, 배경색이 화면 디자인에 따라 비율이 달라지기도 함!

스타벅스의 예시

</aside>

<aside>

UI 컬러 구성

• Primary color 주색

  UI에서 가장 강조해야 하는 영역, 사용자의 행동을 유도할 때 사용

  브랜드를 대표하는 컬러로 인지도를 향상시키고 각인시키는 데 도움을 줌

  브랜드 아이덴티티 : 로고 · 앱 아이콘 · 스플래시

  강조와 사용자 행동 유도 : CTA 버튼 · 로그인/회원가입 유도 · 중요한 정보 전달

• Secondary color 보조색

  주색을 보완해 주며 조화를 이루는 역할을 함

  보색 : 생동감 있고 활동적인 느낌

  유사색 : 조화롭고 안정적인 느낌

• Neutral color 배경색

  중립의 컬러로 UI 디자인에서 지원 역할, 주로 텍스트와 배경에 사용

  흰색에서 검은색까지 회색의 음영을 포함

  UI 디자인에서 가장 많은 영역에 사용 70%

• Semantic color 시스템 컬러

  현재 시스템의 상태를 사용자에게 알려주고 상호작용 하고 있다는 것을 보여줌

  UNESCO 도로 표지판 기준으로 표준화 된 컬러 사용

  

</aside>

컬러 디자인 스타일 가이드

💡 컬러는 상대적이기 때문에 주변 색상/형태 등에 영향을 받는다!

<aside>

• 배경과 컬러

  다크/라이트 모드에 따라 배경색이 반전되기 때문에 각 모드에 맞는 컬러를 사용해야 함

  

• 형태와 컬러

면적이 넓은 배경과 면적이 좁은 텍스트 등 형태에 따라 컬러는 영향을 받음

**배경**에 사용 → 면적이 넓기 때문에 가독성이 높음

**텍스트**에 사용 → 상대적으로 면적이 좁아 가독성이 낮음

📌 형태에 따라 색상 코드값을 알맞게 적용하여 가독성을 높여야 함!

</aside>

<aside>

📌 과도한 컬러 사용 피하기

• UI 내 사용자가 집중할 수 있도록 불필요한 컬러 사용 지양
• 사용자 행동 유도, 정보를 강조해야 하는 경우 기준에 맞는 컬러 사용
• 텍스트와 배경 컬러의 대비를 높여 가독성을 확보 </aside>

</aside>

<aside>

타이포그래피

<aside>

OS별 시스템 폰트

• IOS, Android 시스템 폰트

  

  ✔️ IOS와 Android 기기를 각각 작업하는 것이 아닌 한 벌로 작업하기 때문에 어떤 시스템 폰트를 사용할 것인지 결정해야 함 → 글로벌 서비스 같은 경우는 해당 폰트를 지원하고 있는지 체크가 필요하고, 디자이너와 개발자가 협의하여 결정 필요

• 웹 폰트

<aside>

</aside>

</aside>

<aside>

</aside>

<aside>

</aside>

<aside>

</aside>

<aside>

</aside>

<aside>

</aside>

</aside>

<aside>

</aside>

<aside>

</aside>