🌱 TIL (Today I Learned)
피그마 강의 수강
[UI의 분류] -> 임의적 분류, 관점에 따라 분류가 상이해짐
- 액션(Action): 사용자가 중요한 행동을 수행할 때
- 인풋(Input): 사용자의 입력을 받을 때
- 인포메이션(Information): 서비스의 상태, 안내사항 전달
- 컨테이너(Container): 컴포넌트 다수 결합되어 특정 정보를 가공해서 하나의 템플릿으로
- 내비게이션(Naviagtion): 사용자가 페이지를 이동할 때
- 컨트롤(Control): 사용자가 설정이나 값을 수정할 때
[의사 상태(Pseudo State)]
- 컴포넌트에게도 별명이 있다?
: 기본 자체는 유지한 채, 상황에 따라 다른 스타일을 가지는 경우가 있음
ㅋㅋㅋ 쌤이 개구쟁이 내동생~ 노래부를때 빵터짐
* 의사 상태의 개념(의사: 가상의, 가짜의)
- 컴포넌트의 가상의 상태를 나타낼 때 사용
ex) 버튼에 마우스 오버, 버튼 클릭, 텍스트 입력 클릭, 체크 박스 클릭, 누를 수 없을 때 등 다양한 종류
(마우스를 올리면 색상이 변하는 것도 의사 상태)
※ 설계 시 유의점
- 컴포넌트마다 사용 가능/불가 경우가 존재
ex) 버튼인데 체크된 것은 불가능, 체크박스가 링크인건 존재할 수 없음
[UI 만들기 실습] #1
★ 컴포넌트를 분석하고 공부할 때는 형태가 아니라 정의와 뜻에 집중!
1. 버튼 컴포넌트: 누름으로써 중요한 동작을 수행하는 요소
ㄴ '액션'에 해당하는 컴포넌트
1) 버튼 설계 시 유의점
- 행동 유도성(Affodance = 어포던스)
ㄴ 상호작용 가능 물체는 '상호 작용이 가능하다는 시각적 단서'를 제공해야 함
-> 버튼을 설계할 때는 누를 수 있다는 시각적인 힌트를 드러내야 함.
2) 버튼의 구조
- 컨테이너: 안에 있는 요소를 감싸고 있는 프레임
> 버튼의 높이 = 컨테이너 안의 상하 여백 + 안에 있는 요소의 높이
- 라벨/레이블(Label): 버튼의 행동을 안내하는 글자(텍스트 아님)
> UI에서 '사용자'가 입력하는 글자 = 텍스트 / 'UI'가 사용자에게 안내하는 글자 = 라벨
- 리딩 엘리먼트(Leading Element): 버튼 라벨보다 더 앞쪽에 있다는 뜻
ex) 우리나라는 LTR 문화권이기 때문에 왼쪽 끝에 있는 아이콘이 리딩 엘리먼트
- 트레일링 엘리먼트(Trailing Element):
> 버튼 라벨보다 더 뒤쪽에 있다는 뜻
3) 버튼의 종류
* 박스 버튼(일반 버튼, 프라이머리 버튼): 일반적으로 아는 버튼, 색상이 안에 꽉 차있는 형태
> 중요한 내용에 사용
* 아웃라인 버튼(고스트 버튼, 엠티 버튼): 테두리가 있고 속이 비어 있는 듯한 형태
> 살짝 덜 중요한 내용에 사용
* 스플릿 버튼: 주요 액션과 보조 액션이 나눠져 있어 스플릿(Split, 쪼개진) 버튼이라 불림
> 주요 액션이 있는 상태에서 '보조' 액션을 제공해야 할 때 사용
* 텍스트 버튼: 배경, 테두리 없이 '텍스트'로만 이루어진 버튼
> 별로 중요하지 않은 내용에 사용
4) 버튼 제작 실습 😎
- 오토레이아웃으로 버튼 만들기
2. 텍스트필드
ㄴ 컴포넌트 종류 중 '인풋'에 해당하는 컴포넌트
*인풋: 사용자가 무언가 입력할 수 있게 하는 컴포넌트
1) 텍스트필드의 구조
- 인풋 컨테이너(Input Container): 글자 입력하는 부분
- 라벨/레이블(Label): 입력해야 하는 값이 무엇인지 알려주는 텍스트
- 텍스트(Text): 사용자가 직접 입력하는 텍스트
- 리딩 엘리먼트(Leading Element): 텍스트보다 더 앞쪽에 있는 엘리먼트
- 트레일링 엘리먼트(Trailing Element): 텍스트보다 더 뒤쪽에 있는 엘리먼트
- 헬퍼 텍스트(Helper Text): 유효성 검사 결과를 보여주거나 입력해야 하는 값의 가이드라인을 제공하는 도움말
2) 플레이스홀더와 밸리데이션
- 플레이스홀더
ㄴ 플레이스(자리)+홀더(지키고 있는 것) = '자리표시자'
> 사용자가 입력해야 하는 예시 제공하는 용도로 사용
> 사용자가 글자를 입력하기 시작하면 사라지고 글자를 모두 지울 때 다시 나타남
※ 사용 시 유의점
- 플레이스홀더 자리 입력값에 조건 적는 것 지양할 것.
why? 사용자가 내용을 입력하면서 '조건'을 잊을 때 작성했던 내용을 다시 지워야하는 번거로움.
> 조건값은 헬퍼 텍스트로 사용하기 !
- 밸리데이션(=유효성 검사)
ㄴ 사용자가 입력한 텍스트의 유효 여부를 검사해주는 것
** 사용자는 앱을 사용하면서 달성해야 하는 '목적' 이 존재
ex) 인스타그램 -> 게시물 게시 -> 좋아요, 덧글 정상적으로 받아야 함
> 구매나 소통의 과정을 방해하는 요소가 발생했을 때, 자연스럽게 피하거나 해결할 수 있도록 도와주는 과정
> 적절한 문구나 안내로 사용자가 다시 행동을 완료할 수 있도록 하는 부분이 유효성 검사
※ 사용 시 유의점
- 오류 발생 시에도 오류처럼 보이지 않도록! 거부감을 최소화 시켜줘야 함
- 부정적인 문구보다는 최대한 긍정적인 문구로 사용자에게 해결책 안내하기
ex) 사용자 이름 형식이 맞지 않습니다. (X) -> 최소 4자 이상의 이름이 필요합니다. (O)
3) 텍스트필드 제작 실습 😎
- 오토레이아웃으로 텍스트필드 만들기
[내가 기억하려고 적는 진행 과정]
1. 플레이스홀더(자리표시자) 텍스트 -> 오토레이아웃 설정 -> 인풋 컨테이너로 이름 변경
2. 패딩 16 16, 채우기, 외곽선, 모서리 반경 설정
3. '라벨' 텍스트 (타이틀 폰트) -> 인풋 컨테이너 상단 배치
4. 헬퍼 텍스트 (바디 폰트) -> 인풋 컨테이너 하단 배치
5. 라벨, 인풋컨테이너, 헬퍼 텍스트 드래그 후 오토레이아웃 설정
6. 간격 4
7. 각 요소 Fill 확인, 인풋컨테이너, 텍스트 레이아웃 정렬 좌측 확인
8. 컴포넌트로 만들기
[UI 만들기 실습] #2
* 컨트롤 컴포넌트: 사용자의 선택을 돕는 요소
ㄴ 여러 선택지 중 사용자가 원하는 것을 고를 수 있도록 돕는 요소
* 컨트롤 컴포넌트의 종류
- 체크박스, 라디오, 스위치(토글), 슬라이더
: 슬라이더는 포함되지 않을 수도 있음 / 앞 3가지 컨트롤은 기본적으로 포함
* 설계 시 참고할 점
- 컨트롤 요소의 '최소 터치 영역'
ㄴ 원래 크기는 작더라도 실제 누를 수 있는 공간은 조금 더 넓게 잡는 것 필요
| 컨트롤 요소는 다른 UI에 비하면 크기가 매우 작아서 사용자들이 제대로 누르기에 불편할 수 있음 > 따라서 작더라도, 그 주변으로 최소 크기 범위 생성이 필요 |
- 컨트롤 요소의 라벨
ㄴ 컨트롤 요소는 대부분 '라벨'과 같이 쓰임
> 라벨을 누르더라도 컨트롤 요소가 작동하게 하는 것이 일반적
> 여러 컨트롤 요소 배치 시 간격을 충분하게 주는 것 필요 (간격이 좁아서 잘못 누르는 일 없도록)
- 컨트롤 요소와 라벨의 정렬
ㄴ 행간을 사용하는 값으로 세로 크기를 같게 맞추면 정렬 깔끔하게 가능!
ex) font size 16px, line-height(행간) 24px -> 24px에 크기 맞추기
3. 체크박스 컴포넌트: 여러 선택지 중 원하는 선택지를 '여러 개' 선택할 수 있는 컴포넌트
ㄴ 일반적으로 '라벨'과 함께 쓰임
1) 체크박스의 의사 상태: 기본적으로 2가지 의사 상태를 가짐(체크됨 / 체크되지 않음)
** 자세히 설계한다면 더 많은 상태를 가질 수 있음
2) 체크박스의 특징
- 체크박스는 여러개를 선택할 수 있음
- 체크박스는 아무것도 선택하지 않을 수 있음
- 하위 항목이 있을 때, 일부만 선택할 수도 있음
3) 체크박스 제작 실습 😎
-
[내가 기억하려고 적는 진행 과정]
1. 가로/세로 24 프레임 생성 (4배수, 8배수 모두 적합한 24)
- 폰트 기본 사이즈 16, 이 16이 가지고 있는 행간(=높이) 기본적으로 24
> 껍데기
2. 20x20 프레임이 하나 더 있어야 함
3. 체크박스 컨테이너를 프레임 1 가운데에 넣고 프레임 1 채우기 색상을 없애기
시간이 부족해서 라디오 컴포넌트는 크리스마스 지나고 !!!!
피그마 디자인 과제 피드백 이후 수정
[피드백 이전]
- 가로형 이벤트 강조 배너
- 정사각 배너
- 기본형 알람 배너
- 확장형 알람 배너
[피드백 내용]
- 가로형 이벤트 강조 배너
- 폰트 good, 색 조합 크리스마스 느낌나게 잘 썼다고 칭찬받음 후후...🎄
- CTA 버튼 위치 조정 (하단부 -> 본문 하단 중앙부)
- 상단 왼쪽 '10일 한정 출석이벤트' 리본, 텍스트 크기 확대
- 배경 불투명도 더 밝게 조정
- 행간 조정
- 정사각 배너
- 상단 왼쪽 '10일 한정 출석이벤트' 리본, 텍스트 크기 확대
- 배경 패턴 삭제, 배경 원색 브라운 계열 -> 블랙 or 회색 계열로 연하게 조정
- 본문 하단 아이콘 크기 '가장 맛있는 선물' 크기 가로에 맞게 확대
- 개인 추가 사항: 배경에 아무 패턴이 없어 단조로운 느낌인 것 같아 눈오는 효과 같이 도형 일부 추가
[피드백 이후]
- 가로형 이벤트 강조 배너
- 정사각 배너
확실히 튜터님이 피드백 해주신 내용 반영하여 수정하니 눈에 더 확 띄는 느낌이 들었다 !!
이미지 Fx를 활용하여 만든 산타 쓴 배민이 아이콘은 다음 과제가 있다면 더 완벽하게.. 하체까지 구현하는걸로 ㅠㅠ
정말.. 아직은 더 많은 연습이 필요할 것 같다..!
내일은 크리스마스여서 캠프 휴일 !!
오늘 하루도 정말 시간이 순삭된 것 같다 ㅠㅠㅠ 빨리 손에 익혀서 더 많은 디자인을 해보고 싶은 마음 가득~~~
오늘도 고생했다 나,, 미리 메리 크리스마스 🎄🎅🤶
'[사전 캠프]' 카테고리의 다른 글
| [내일배움캠프 사전캠프] 9일차 - 피그마 컴포넌트, 배리언츠, 프로퍼티, GPT 활용하기 (2) | 2025.12.26 |
|---|---|
| [내일배움캠프 사전캠프] - 광고 디자인 만들어보기 (배달의 민족) (0) | 2025.12.26 |
| [내일배움캠프 사전캠프] 7일차 - 폰트 스타일, 마스터 컴포넌트, 디자인 시스템, 프롬프트 (1) | 2025.12.23 |
| [내일배움캠프 사전캠프] 6일차 - 피그마 프라이머리, Coolors | Styler 플러그인, 디자인 실습 (3) | 2025.12.22 |
| [내일배움캠프 사전캠프] 5일차 - 파운데이션, 생성형 AI, LLM (3) | 2025.12.19 |