내일배움캠프 UX/UI 21일차 TIL
2025.02.20
UI 디자인의 기본
컬러, 타이포그래피, 아이콘
하루 계획
디자인 카타
- 저는 A를 선택했습니다.
- 서비스의 목적에 따라 다르겠지만 물건을 구매하는 커머스의 경우에는 장바구니에 담기나 구매하기 버튼이 제일 눈에 띄어야 된다고 생각합니다. 공유 기능이 장바구니 기능만큼 중요한 기능은 아니라고 생각하기에 오른쪽 상단에 공유 버튼을 넣는 것이 더 좋다고 생각했습니다. 참고하기 위해서 여러 커머스 앱들을 찾아보았는데 쿠팡이나 에이블리, 아이디어스 등 대부분의 앱에서도 장바구니 및 구매 > 찜 기능 > 공유 순으로 중요도에 따라 위계를 설정한 것을 볼 수 있었습니다.
- B는 장바구니에 담기 버튼 옆에 공유 버튼이 있어서 접근성이 좋다고 생각했습니다. 공유를 통해 상품을 더 많이 알릴 수 있다는 점은 좋다고 생각하였습니다. 하지만 장바구니에 담기 버튼 옆에 공유 버튼이 있으면 사용자가 다른 버튼으로 착각하거나 잘못 누를 수도 있다고 생각했습니다.
학습 목표
-UI 디자인의 모든 것 1-2 강의 수강
-UI 디자인의 모든 것 1-2 과제 진행
-이해가 안되거나 어려운 부분 복습
-하루 5분 UX 읽기
수업 목표
-목적에 맞는 컬러를 사용할 수 있다.
-타이포그래피의 계층 구조를 이해하고 적용할 수 있다.
-일관된 스타일로 아이콘을 만들 수 있다.
1. 컬러
컬러는 사람이 어떤 사물이나 물체를 볼 때 가장 먼저 인식하고 가장 오래 기억하는 요소이다.
그러므로 브랜드에서 컬러는 브랜드의 이미지를 지속적으로 전달하고 인식하게 하는 중요한 요소이다.
또한 컬러는 여러가지 의미를 전달한다.
빨강 : 에너지, 열정적, 위험한, 정지, 부정, 경고, 에러
주황 : 친근한, 에너지, 보류, 경고
노랑 : 활기찬, 즐거운, 희망적, 낙천적
녹색 : 자연의, 균형적인, 긍정적인, 진행, 승인, 성공
파랑 : 안정감, 신뢰, 성공, 비전, 정보
보라 : 고급스러운, 고상한, 고귀함, 우아함, 예술, 창조
검정 : 고급스러운, 세련된, 권위있는
흰색 : 깨끗한, 심플한, 정직한, 맑은
컬러의 역할
중요한 정보를 강조하거나 사용자의 행동을 유도할 때 주로 사용된다.
또한 텍스트 필드나 버튼, 토글, 탭 같은 기능들의 상태를 나타낼 때도 이용한다.
컬러만으로도 브랜드가 떠오르게 하는 강력한 시각적 전달 요소이다.
컬러를 지속적으로 사용자에게 노출시켜 브랜드 아이덴티티를 각인 시킨다.
브랜드를 대표하는 컬러
1) 컬러로 연상되는 브랜드
빨강- 코카콜라, 슈프림, 넷플릭스
주황- 환타, 당근마켓
노랑- 카카오톡
초록- 스타벅스, 네이버, 이니스프리
파랑- 신한, 포카리 스웨트, 토스
보라- 마켓컬리, 더벤티
2) 브랜드 이미지 연상
코카콜라- 활동적인, 강렬한
당근마켓- 친근함, 에너지
카카오톡- 밝음, 활발함, 친근함, 에너지
네이버- 신뢰감, 편안함, 안정감
신한- 보안, 신뢰감, 안정감, 차분함
마켓컬리- 고급진 느낌, 음식들이 신경을 많이 쓴 것 같은 느낌이 듦
3) 브랜드 메세지 연상
코카콜라 - 활동적인, 강렬한
빨간색과 타이포그래피 로고를 통해 열정적이고 활력적인, 에너지있는 이미지를 전달하였다.
당근마켓 - 친근함, 에너지
주변 이웃과 거래하는 앱인 당근 마켓은 당근과 관련된 주황색을 이용하여 당근 마켓이라는 브랜드를 각인시키고, 친근하고 활기찬 이미지를 전달하였다.
카카오톡 - 밝음, 활발함, 친근함
귀엽고 밝은 이미지와 활발한 이미지를 통해 소셜 앱인 카카오톡을 편하고 밝고 친근한 이미지로 나타내려고 하였다.
네이버 - 신뢰감, 편안함, 안정감
네이버를 이용할 때 초록색을 통해 편안함과 안정감, 신뢰감을 느끼게끔 하였고, 관련된 기능이나 앱들을 비슷한 컬러 팔레트를 사용하여 네이버가 사용자 기억에 남도록 하였다.
신한 - 보안, 신뢰감, 안정감, 차분함
신한은 은행으로써 가장 중요한 신뢰감을 나타내기 위해 정직함과 신뢰감을 주는 파란색을 선택하였다.
마켓컬리 - 고급진 느낌, 음식들이 신경을 많이 쓴 것 같은 느낌이 듦
짙은 보라색으로 고급지고 다른 앱에 비해 신경을 많이 쓴 것 같은 느낌을 준다.
컬러 비율
5:25:70 비율
5(주색), 25(보조색), 70(배경색)
절대적인 것은 아니고 목적이나 서비스, 레이아웃 등에 따라 달리질 수 있다.
UI 컬러 구성
Primary Color(주색): 가장 강조해야하는 영역, 사용자의 행동을 유도하거나 브랜드를 대표하는 컬러
Secondary Color(보조색): Primary Color와 조화를 이루면서 보조해주는 컬러 ex. 보색, 유사색, 브랜드 로고
Neutral Color(중립): 주로 텍스트와 배경에 사용, 흰색부터 검정색 까지의 음영을 포함한다.
Semantic Color(시스템 컬러): 시스템의 상태를 알려주어 상호작용
배경과 컬러
주변 환경에 따라 다크/라이트 모드가 적용될 수 있다.
2. 타이포 그래피
Serif와 Sans-Serif
Serif
글자 획이나 시작, 끝부분이 돌출된 형태 (명조, 바탕)
인쇄물에서 주로 사용
Sans-Serif
글자 획이 돌출되지 않은 글씨체 (고딕류)
폰트 사이즈
사용자의 상황과 환경을 고려하여 폰트 사이즈를 설정한다.
제목의 폰트 사이즈는 18~32
본문은 14~18
캡션이나 레이블은 10~12
IOS는 11 안드로이드는 12 웹은 14를 최소 사이즈로 하고 있다.
시각적 계층 구조
텍스트의 사이즈, 두깨, 컬러, 위치, 여백 등을 사용해 더 가독성을 높이고 사용자가 편하게 사용하게끔 해야한다.
일관된 폰트 스타일
- 하나의 제품과 서비스에는 폰트의 종류를 통일하는 것이 좋다. 보수할 때도 편하고 일관된 이미지를 전달할 수 있다.
-너무 다양한 사이즈를 사용하면 일관성이 없어 보인다.
- 목적에 맞게 적절한 컬러를 사용한다.
여백과 정렬
글씨가 클수록 자간은 줄여주는 것이 좋다. (꼭 필요한 경우에만)
행간을 적절하게 설정하면 가독성을 높일 수 있다.
타이틀, 서브 타이틀, 본문 마다 행간이 다르다.
타이틀이나 서브 타이틀은 1.2~1.5배, 본문은 1.6~2.0배를 설정한다.
여백을 잘 활용하면 그룹핑 되어보이는 효과도 있다.
3. 아이콘
일관된 아이콘
아이콘 스타일 - Outlined, Filled 스타일을 가장 많이 사용하고 컬러 아이콘은 행동을 유도하거나 피드백을 줄 때 사용한다.
Stroke 두께 - 두께에 따라 디자인 컨셉에 영향을 주기 때문에 통일하는 것이 좋다.
Corner radius 곡률 - 곡률의 규칙을 정해 모든 아이콘에 적용해야한다.
아이콘 시각 보정
착시 현상으로 글자나 도형이 불균형으로 보일 수 있다. 이런 경우 위치를 이동해 균형을 맞춰준다.
도형의 모양에 따라 면적이 다르게 보이기 때문에 사각형보다 원을 더 크게 하는 것이 좋다.
아이콘의 단순화
모바일은 스크린이 작고 다양한 환경에서도 이용하기에
쉽게 알아보고 이해할 수 있게끔 단순화한다.
레이아웃과 키라인
24x24, 아이콘의 실제 사이즈를 나타내는 트림 영역
20x20, 패딩을 제외한 작업 영역인 라이브 영역
리사이징 시 이미지가 잘리지 않게 2만큼의 여유를 두는 패딩
정사각형, 원형, 가로로 긴 사각형, 세로로 긴 사각형 마다 그리드가 조금씩 다름
배수로 설정하고, 콘스트레인스는 스케일로 설정하면 리사이징을 통해 해상도에 따라 크기를 변경할 수 있다.
1-2 과제
1. 아이콘 만들기
2. 다이얼로그 UI 디자인
학습 경험
새로 알게된 점
오늘 강의를 통해 아이콘에 대한 내용을 배우게 되었다. 기존에 몰랐던 아이콘의 착시효과에 대해 알게 되었다.
평소에는 중앙에 맞게 정렬하면 된다고만 생각했는데 새로운 지식을 쌓은 느낌이다. 또한 각 아이콘마다 부피감이 다르기 때문에 그리드도 조금씩 다르게 잡는다는 것을 처음 알게 되었다. 그동안 아이콘을 만들면서 그런 것을 신경쓴 적이 없었는데 앞으로는 부피감을 신경쓰면서 제작 해야겠다는 생각이 들었다.
아쉬운점 , 어려웠던 점
오늘은 전체적으로 집중력도 떨어지고 공부하는 태도도 별로였던 것 같아서 아쉬웠다. 강의가 1시간 30분 정도되는 길이여서 그런지 강의를 들을 때 좀 졸렸던 것 같다. 그래서 딴 짓도 조금 하고 침대에도 눕기도 했었다.
강의 과제 중 아이콘을 만들다가 Stroke 설정을 어떻게 해야할지 고민이 되었다. inside로 설정해야되는지, 아이콘을 만들 때 그리드에 완전히 딱 맞도록 해야되는 건지 헷갈렸던 것 같다.
개선 방향
잘 준비를 일찍 끝내서 일찍 잠에 들도록 할 것이고, 긴 강의는 30분씩 끊어서 보는 식으로 해서 집중력을 개선해보고자 한다.
아이콘과 관련된 내용은 내일 튜터님께 질문해볼 생각이다.
내일 할 일
UI 디자인의 모든 것 1-3 강의 듣기
UI 디자인의 모든 것 1-3 과제 진행
튜터님께 질문