[디자인 카타]
포스터 내 디자인 형식이 더 효과적이라고 판단한다. 영화 포스터로서 사진과 타이포그래피가 이미 조화를 이루고 있으며, 제목을 읽는 데 어려움이 없다. 또한 이러한 디자인은 사용자에게 흥미와 호기심을 불러일으킨다. 오른쪽처럼 포스터 하단에 텍스트가 위치할 경우, 사진이 빈 느낌을 주며 글씨 크기가 작아 멀리서 잘 보이지 않을 것이다. 유명하거나 익숙한 영화는 사진만으로도 인지할 수 있지만, 신작처럼 익숙하지 않은 영화는 제목이 잘 보이지 않아 사용자들에게 혼란을 줄 수 있다. 게다가 '범죄도시' 처럼 시리즈별로 나와 포스터 디자인이 비슷한 경우도 혼란을 준다. 따라서 이런 디자인은 사용자들에게 왜 이런 형식이 선택되었는지 의문을 불러일으킬 수 있다. 만약 포스터와 타이포의 글씨가 비슷하거나 디자인 요소만으로 영화를 구별하기 어렵다면, 포스터 속 글씨 외에도 하단에 보조 글씨를 추가하는 것이 좋을 것 같다.
[피그마 기초 3주차 강의 정리]
1. 파운데이션
폰트, 컬러, 곡률 등 이 파운데이션을 조합해 컴포넌트를 만듦.
2. 🌟컬러 스타일🌟
- RGB: 디지털 빛의 3원색, 각각 256개의 값을 보여줄 수 있음.
- Hex Code: 빛의 3원색 정보를 16진법으로 변환한 코드
- 컬러 프로파일(Color Profile): 디스플레이가 코드를 해석할 때 사용하는 색 기준표. 색상에는 절대적인 기준이 없다. 디스플레이 자체 뿐만 아니라 프로그램마다 다르다.
- 컬러 스타일: 팀원 간 커뮤니케이션을 위해 프로덕트에서 활용할 색상 단계의 규칙을 만드는 것
📌만드는 법:
컬러 스타일은 기본적으로 2~3가지 색상으로 만듦. 그 이상도 가능하지만 색상이 많아질수록 더 많은 관리가 필요
1) 포인트 컬러(프라이머리 컬러 primary colors) : 중요하고 핵심적인 부분에만 쓰는 색상. 엑센트 컬러라고도 함.
2) 백그라운드 컬러: 배경색. 일반적으로 흰색(#FFFFFF) 사용.
3) 세컨더리 컬러: 배경색에서 도드라지는 부분을 만들어서 포인트 컬러를 뒷받침하는 색상. 서브 컬러라고도 함.
- 색상의 확장성: 색상을 정한 뒤, 가장 밝은 단계부터 가장 어두운 단계까지 총 10단계를 만든다. 여러 상황에 유연하게 사용할 수 있기 때문. 일반적으로 10단계를 사용하는데, 명도, 채도를 기준으로 만들기 때문에 0~100%까지 10단위로 딱 떨어진다. 또한 중간에 50단위의 색상 단위를 추가하기 쉽다.
- 1:3:6 법칙: 포인트 1, 백그라운드 6, 세컨더리 3 비율로 사용
- 실무에서 색 고르기
브랜드에 어울리는 색상을 고르기 위해 여러 달 동안 테스트하며 분석. 디자이너의 취향에 따라 고르는 것이 아님.
- 피그마에서 색상 고르기 <플러그인 coolors 사용>
개인 프로젝트에서 색상 조합을 찾기 어려울 때마다 사용해보자. 피그마에서 플러그인을 실행하면 손쉽게 아름다운 색 조합을 만들고, 색상 코드를 복사할 수 있다!
-🌟피그마에서 색상 팔레트 만들기 <플러그인 Styler>🌟
사각형 각각 10개씩 복사 ➡️ 색상 피커에서 Hex를 HSL로 바꾸기 ➡️ L값을 10씩 더하거나 빼기. 숫자가 클수록 밝아짐 ➡️ 포인트 컬러 사각형 10개를 Primary/ 로 레이어 이름 수정하고, 제일 어두운 색은 Primary/900 제일 밝은 색은 Primary/50으로 100씩 숫자 줄이기 ➡️ 세컨더리 컬러는 Secondary/로, 백그라운드 컬러는 Tertiary/ 로 바꾼 뒤 동일하게 이름 수정 ➡️ 모든 사각형 선택한 뒤 Styler 플러그인 실행 후, Generate styles 클릭
3. 폰트 스타일
- 폰트 스타일: 디자인 시스템에서 사용할 폰트를 모은 것
- 폰트 스케일: Regular, thin 처럼 일정한 규칙에 따라 정렬된 하나의 세트
- 구성
패밀리: 폰트 이름
굵기(무게감): 굵을 수록 중요도 높음
📌 크기: 10px미만 권장하지 않음. 일반적으로 16px부터 2씩 늘려서 사용. 20px이상부터는 4씩 증가. 본문은 20px 미만/ 제목은 20px 이상
📌 행간: 글줄과 글줄 사이의 간격. 반복된 실험으로 적당한 행간 값 찾기. 서체마다 행간 값이 다름. 보통 노토산스가 기본 폰트보다 위아래가 넓음. 일반적으로 제목처럼 굵고, 큰 폰트는 120~135%/ 본문은 135~170%,150% 추천
자간: 글자와 글자 사이 간격. 특별한 경우 아니면 건들지 말기
- UI에 추천하는 폰트: 노토산스, 프리텐다드, 스포카 한 산스, 민 산스, 수트
4. 마스터 컴포넌트와 인스턴스
- 마스터 컴포넌트: 디자인 원본. 따로 수정하지 않으면 변하지 않음. 수정이나 지우고 싶다면 그냥 하면 됨. 이것을 복사해서 인스턴스 생성. 반복적인 디자인을 빠르게 시간 단축. 복사된 디자인을 한 번에 수정 가능.
- 인스턴스를 먼저 수정하면 마스터 컴포넌트를 수정해도 반영되지 않음.
- 마스터 컴포넌트를 지우더라도 인스턴스는 남아있음. 그러나 편집하려면 다시 마스터 컴포넌트 복구해야함.
- 연결을 해제하면 인스턴스는 일반 프레임으로 변경됨
5. 디자인 시스템의 이해
- 디자인 시스템: UI 구조, 쓰는 방법 등이 상세하게 적힌 문서. 반복된 UI를 효율적으로 사용하고, 팀 전체 소통 수월.
UI키트는 단순히 UI를 모아놓은 것으로 차이가 있음.
새로운 디자인을 하거나 UI가 적게 필요할 때, 팀원이 얼마 되지 않을 때는 오히려 UI키트가 더 낫다. 디자인 시스템은 준비하는 과정이 매우 오래 걸림. 각자 상황에 맞게 디자인 시스템과 UI키트 중에서 선택하기
6. UI 디자인 기본
- 분류
1) 액션: 사용자가 중요한 행동을 수행할 때 사용 ex. 버튼
2) 인풋: 사용자의 입력을 받을 때 사용 ex. 텍스트 필드, 셀렉트 박스
3) 인포메이션: 사용자에게 서비스의 상태나 안내 사항을 전달할 때 사용 ex. 토스트 메시지, 스낵바, 라벨
4) 컨테이너: 컴포넌트 여러개가 결합되어 하나의 덩어리를 이룸 ex. 카드, 바텀시티, 리스트처럼 복잡한 구조
5) 내비게이션: 사용자가 페이지를 이동할 때 사용 ex. 네비게이션 바, 앱 바, 화면 하단의 탭 바, 사이드바
6) 컨트롤: 사용자가 설정이나 값을 수정할 때 사용 ex. 라디오, 체크박스, 스위치
7. UI 만들기 (1)
- 행동 유도성(Affordance): 모든 UI를 설계할 때 심미성 보다는 UI의 개념과 목적을 최우선으로 고려하기
> 버튼 UI의 구조:
1) 컨테이너(Container): 안에 있는 요소를 감싸고 있는 프레임을 뜻
2) 라벨/레이블(Label): 사용자에게 안내하는 글자
3) 리딩 엘리먼트(Leading Element): 더 앞쪽에 있다는 뜻
4) 트레일링 엘리먼트(Trailing Element): 더 뒤쪽에 있다는 뜻
📌 문화권에 따른 LTR( 왼쪽<앞>에서 오른쪽<뒤>으로 ) vs RTL( 오른쪽<앞>에서 왼쪽<뒤>으로 )
- 버튼 UI의 종류
a) 박스 버튼, 일반 버튼
b) 아웃라인 버튼, 고스트 버튼, 엠티 버튼
c) 스플릿 버튼: 주요 액션과 관련된 보조 액션을 제공해야 할 때 사용하는 버튼
d) 텍스트 버튼: 배경색이나 테두리 없이 글자로만 이루어진 버튼/ 주요 액션에 비해 비중이 낮고, 별로 중요하지 않은 기능을 수행
> 텍스트 필드 ( 사용자가 무언가를 입력할 수 있게 하는 컴포넌트 ) UI의 구조:
1) 인풋 컨테이너: 글자를 입력하는 부분
2) 라벨/레이블: 입력해야 하는 값이 무엇인지 알려주는 텍스트
3) 텍스트: 사용자가 직접 입력하는 텍스트
4) 리딩 엘리먼트(Leading Element): 텍스트보다 더 앞쪽에 있는 엘리먼트
5) 트레일링 엘리먼트(Trailing Element): 텍스트보다 더 뒤쪽에 있는 엘리먼트
6) 헬퍼 텍스트(Helper Text): 유효성 검사 결과를 보여주거나 입력해야 하는 값의 가이드라인을 제공하는 도움말
> 플레이스홀더와 밸리데이션
- 사용자가 입력해야 하는 예시를 제공하는 용도로 사용/ 글자를 입력하기 시작하면 사라짐
- 입력값의 조건 적지 말기/ 조건 대신 입력 예시 넣기
> 유효성 검사
- 텍스트필드에서 중요한 건 사용자가 입력한 텍스트가 유효한지 아닌지를 검사 ex) 이메일 형식이 맞지 않을 때, 사용자에게 ‘입력한 텍스트에 문제가 있으니 다시 확인해주세요’ 문구가 뜨는 것. 사용자 이탈 방지
- 부정적인 문구보다는 최대한 긍정적인 방향으로 사용자에게 안내해주기
7. UI 만들기 (2)
> 컨트롤 컴포넌트
- 사용자가 여러 선택지를 특정할 수 있도록 하는 요소
- 컨트롤 요소 자체는 작더라도, 그 주변으로 최소 선택 크기 범위를 만들어주기
- 여러 컨트롤 요소를 배치할 때는 간격을 충분히 주기
- 컨트롤 요소와 라벨의 세로 길이를 같게 해주기
📌 시각 보정: 요소를 컨테이너에 넣었을 때, 수치로는 가운데에 있지만 눈으로 보면 어딘가 모르게 중심이 맞지 않는 것처럼 느껴지는 경우, 디자인을 조정하면서, 시각적으로 균형 잡힌 형태를 만들 수 있음.
📌 곡률을 적용할 땐 반드시 높이의 50% 크기를 넘지 않도록 유의하기
📌 라디오 UI는 사용자가 많이 선택하는 항목을 기본값으로 설정해두기
📌
Create Component: Ctrl + Alt + K
Add auto layout: Shift + A
🎷Ui를 공부할 때는 형태 보다 목적과 기능에 초점을 두고 공부하기!
느낀 점: 2주차부터 학교에서 배운 적 없었던 내용들을 알게 되어 정말 알찬 시간이었다. UI의 명칭이나 규칙, 체계적으로 만드는 과정 등 여태까지 내가 정말 엉성하게 UI를 했구나를 깨달았다. 컴포넌트를 만드는 것도 알려주신 대로 만드니까 깔끔했다. 3주차는 내용이 많은 편이고, 아직 선생님께서 알려주신 추가 정보 사이트에 들어가보지 못해서 계속 복습하며 나의 지식으로 만들 것이다.
'UIUX 내일배움본캠프 > CH 1 온보딩 주차' 카테고리의 다른 글
| 본캠프 5일차_디자인 카타, WIL (3) | 2025.01.27 |
|---|---|
| 본캠프 4일차_디자인 카타, 강의 정리 (0) | 2025.01.24 |
| 본캠프 2일차_디자인 카타, 강의 정리 (1) | 2025.01.22 |
| 본캠프 시작~! 1일차_강의 정리(0120) (2) | 2025.01.20 |
