오늘 한일
-팀 프로젝트 진행
-디자인 완성도 올리기 특강 참여(8시)
내일 할일
-팀 프로젝트 진행UI 완성도 올리기 특강 정리
눈대중은 위험
->디자이너 본인 눈에는 괜찮아 보여도, 실제로는 간격이 들쭉날쭉->정돈되지 않아 보임
사용자->허술하다, 아마추어 같다라는 인상을 줌
-간격 시스템(Spacing):8의 배수로 간격을 잡는 방법
->화면 전체 간격이 맞물려서 균형과 리듬이 생김
->7px, 13px 같은 애매한 수치는 정렬감 깨짐
타이포그래피 계층
권장 사이즈
- 본문:최소 16 px(가독성을 위한 기본 크기)
- 서브 텍스트 14px
- 제목 24px, 20px, 18px
*실무에서 가장 작은 크기는 12px (12보다 작아지면 가독성에 문제 발생)
폰트->브랜드 신뢰감을 보여줌(브랜드 언어)
- 정보 전달의 도구
- 브랜드 일관성 제공
- 높은 호환성, 안정적으로 보여지는
왜 수치가 감각을 만든다고 할까?
- 사람의 뇌는 숫자로 정리된 규칙을 무의식적으로 감지->정돈된 인상 형성
->디자인 감각은 숫자로부터 시작, 애매한 숫자는 애매한 인상을 줌
시각적 위계 만들기
시선의 자연스러운 흐름
기본 패턴
- 위->아래, 좌->우(서양식 UI 기준)
- 모바일은 스크롤 환경->위에서 아래로 읽는 흐름 특히 중요
- 사용자에게 어디부터 봐야 하는지를 알려주지 않으면 정보가 뒤섞여 혼란을 줌
시각적 위계를 만드는 요소
종류
- 크기:큰 글자를 더 먼저 읽힘
- 굵기:BOLD 텍스트가 NORMAL보다 더 먼저 보임
- 여백:간격 차이가 우선순위를 만듦
- 색상:명도/채도 차이가 정보의 우선순위를 드러냄
- 정렬:기준선이 맞아야 시선이 편안하게 이동
나쁜 예시:모든 텍스트가 같은 크기, 같은 색상->어디를 먼저 봐야 하는지 알 수 없음
무엇을 먼저 보게 만들지가 중요->시각적 위계
모든 글자 크기를 다르게 주는 것X->3단계로 나누는 것을 추천(사용자가 중요도를 파악 가능)
버튼도 위계 존재
- 프라이머리 버튼(메인 행동,색 강조)
- 보조 버튼(메인 행동X, 연한 배경, 테두리만 적용)
- 부가 버튼(눌러도, 안눌러도 상관 없는)
화면은 한 번에 다 보이는 게 아니라, 시선이 흐르는 순서대로 읽림
일관성의 무의식적 효과
왜 일관성이 중요한가?
이유
- 사용자는 의식적으로 버튼 모양을 신경 쓰지 않음->무의식적 학습으로 UI를 사용
- 같은 기능인데 매번 모양, 위치가 다르면->사용자 혼란+신뢰감 하락
- 일관성 있는 UI는 별 설명 없어도 이건 누르면 되겠구나 하는 예측 가능성 존재
일관성이 깨질 때 생기는 문제
문제
- 버튼 크기, 모서리, 색상이 다 다름->날림 느낌
- 같은 폰트인데 간격, 정렬 안 맞음->정돈되지 않음
- 컴포넌트 복붙하다 스타일 조금식 다름->브랜드 톤앤매너 붕괴
*기능이 같은건 똑같이 묶어주기
일관성을 지키는 방법
방법
- 디자인 시스템 만들기:버튼, 폰투, 아이콘, 간격 기준을 정리
- 컴포넌트화:피그마에서 같은 건 같은 컴포넌트로 관리
- 스타일 가이드 활용:텍스트, 컬러 스타일 미리 정의
- QA 루틴:완성된 화면에서 버튼 3개 비교->같은가? 확인
*버튼 색상은 꼭 한가지일 필요X->역할 기준으로 나누기(기능적 구분 필요, 일관성)
통일성, 반복성, 일관성을 유지하는 것->잘만든 UI
보이는 만큼, 눌리는 만큼 고려하기
버튼 크기
터치 영역
- 손가락이 눌러야 하기 때문에 시각적 크기보다 판정 영역이 더 넓어야 함
크기 - 높이:44PX 이상
- 폰트 16PX 이상, 버튼 안 여백(패딩)은 좌우 16-24PX 권장
왜 44XP인가?
->사람 손가락 평균 터치 면적이 7~9MM 터치 영역을 시각적으로 환산한 값
아이콘 크기
권장
- 최소 24PX 이상 권장(특히 모바일 환경)
- 라인형 아이콘은 명도, 굵기 조절 필요
왜 24PX 이상이어야 하나?
->시인성때문
아이콘의 굵기, 모서리, 크기 통일 필요
아이콘은 보이고, 버튼은 눌리고, 텍스트는 읽혀야 함
UXUI 도전!!!