#우수 TIL 선정!!
개인 노션에 학습한 걸 정리해두다 보니..
며칠간 TIL을 따로 적지 않았는데
어제 우수TIl로 선정됐다!! 야호!
작은 성취가 필요한 타이밍이었는데
그래도 맞는 방향으로 노력하고 있는 것 같아서
괜히 뿌듯해지다...//
그래서 다시 맘잡고 써보는..~,~
#오늘의 학습 계획
하루종일 피그마 익힐 거다
강의 복습하고, 따로 유튜브 찾아서 공부하고
개인 과제 시작하기 전에 레퍼런스 찾아서 만들어보기!
가 오늘의 목표!!
#피그마 강의
3-8까지 들었었던 거 쭉 노트필기하면서 복습하구..
다시 필기하면서 쭉 훑으니까 전에는 헷갈렸던 개념/용어들이 이제 좀 이해되는 것 같기두..)
3-8
[학습 목표] 버튼 컴포넌트 이해하고, 만들기 실습!
버튼 컴포넌트 = 누름으로써 중요한 동작을 수행
행동 유도성 = 어포던스 : 직관적으로 행동 유도
(→ 버튼을 이거 누를 수 있는 건가…? 라고 고민하게 만들면 안됨)
버튼의 구조
- 컨테이너 : 요소를 감싸고 있는 프레임
- 라벨(레이블) : 버튼의 행동을 안내하는 글자(ui에서 사용자가 입력하는 글자는 텍스트! ui가 사용자에게 안내하는 글자는 라벨이라고 부름)
- 리딩 엘리먼트 : 버튼 라벨보다 앞에 있는 요소
- 트레일링 엘리먼트 : 버튼 라벨보다 뒤에 있는 요소
버튼의 종류
- 박스 버튼 =일반버튼 =솔리드 버튼 : 꽉찬
- 아웃라인 버튼= 고스트 버튼= 엠티버튼 : 외곽선만 있고 비어있는
- 스플릿 버튼 = 주요 액션/보조액션 나눠져 있는 것
- 텍스트 버튼 : 글자로만 되어 있는 버튼 (별로 중요하지 않은 기능)
텍스트필드 컴포넌트 = 인풋에 해당(사용자가 무언가를 입력할 수 있게 하는 컴포넌트)
텍스트필드의 구조
- 인풋 컨테이너 : 글자를 입력하는 부분
- 라벨(레이블) : 입력해야하는 게 뭔지 알려주는 텍스트
- 텍스트 : 사용자가 직접 입력하는 텍스트
- 리딩 엘리먼트 : 텍스트보다 더 앞쪽에 있는 엘리먼트
- 트레일링 엘리먼트 : 텍스트보다 더 뒤쪽에 있는 엘리먼트
- 헬퍼 텍스트 : 도움말
플레이스 홀더 : 플레이스(자리를)+홀더(지키고 있는것). 한국말로는 자리표시자.
사용자가 입력해야 하는 예시를 제공하는 용도
사용자 글자를 입력하기 시작하면 사라지고, 글자를 모두 지우면 다시 나타남
플레이스홀더를 쓸 때 유의할 점! 조건이 아니라 예시를 적기!
플레이스홀더는 값을 입력하기 시작하면 사라짐 → 조건을 확인하기 위해서는 사용자가 입력한 걸 다시 지워야… 불편함!
→ 플레이스홀더에는 예시를! 조건은 헬퍼 텍스트로 적기!
유효성검사 =사용자가 입력한 텍스트가 유효한지 아닌지 검사해주는 것. 특수문자가 있거나, 형식에 맞지 않을 때→ 사용자에게 입력한 텍스트에 문제가 있으니 다시 확인해달라고 안내하는 것!
=밸리데이션 체크(Validation Check)
유효성검사의 목적! 앱을 사용하면서 달성해야하는 목적이 있음(커머스라면 구매, 커뮤니티라면 소통..) 자꾸 방해하면 싫증남!
→ 방해가 발생했을 때, 자연스럽 해결할 수 있도록 도와주는 것
= 적절한 문구와 안내
{주의!} 사람은 본능적으로 부정적인 문구에 거부반응 → 최대한 긍정적인 방향으로 안내하기 ex) 사용자의 이름 양식이 맞지 않습니다 → 최소 4자 이상의 이름이 필요합니다.
3-9
[학습 목표] 컨트롤 컴포넌트, 체크박스 컴포넌트, 라디오 컴포넌트 이해하고 만들기!
컨트롤 컴포넌트 = 사용자가 선택지를 특정할 수 있도록 하는 요소. 여러 선택지들 중 사용자가 원하는 걸 고를 수 있게 돕는 요소!
정해져 있는 편..
체크박스, 라디오, 스위치(토글). 슬라이더
참고할 점! 컨트롤 요소는 다른 UI에 비하면 크기가 매우 작음 → 사용자가 제대로 누르기 불편 … → 컨트롤 요소 자체는 작더라도, 그 주변으로 최소 터치 범위(여기를 눌러도 선택됨) 만들어주기. 최소 1cm 권장!
컨트롤 요소는 대부분 라벨과 같이 쓰임 → 라벨을 누르더라도, 컨트롤 요소가 작동하게 만들기 → 간격을 충분히 두기(잘못 누르지 않도록)
컨트롤 요소와 라벨의 세로를 같게 하는게 팁! 정렬하기 쉬움!
체크박스 컴포넌트 : 여러 선택지 중 1개 이상 선택할 때 사용하는 컨트롤 컴포넌트. 일반적으로 라벨과 함께 쓰임
일반적으로 2가지 의사상태 → 체크됨 or 체크안됨
(자세히 설게하면 더 많은 의사상태 가질수도,,.!)
체크박스는 여러개 선택할 수도, 아무것도 선택 안 할수도, 하위 항목에서 일부만 선택할 수도 있음!
라디오 컴포넌트 : 여러 선택지 중 1개를 선택할 때 사용하는 컨트롤 컴포넌트. 일반적으로 라벨과 함께 쓰임.
(라디오는 왜 라디오일까? - 옛날 라디오버튼에서 유래~..)
라디오의 의사상태 = 선택됨 or 선택되지 않음
여러개를 동시에 선택할 수 없음. 아무것도 선택하지 않는 게 불가능!
라디오는 반드시 기본값으로 무언가가 선택되어 있어야함(사용자가 많이 쓰는걸 기본값으로 선택해두는 게 센스!)
3-10
[학습 목표] 어떤 관점으로 ui를 공부해야하는지 팁!
버튼마다 모양/색상 모두 다른게, 우리는 같은 버튼으로 인식함
→ 왜? 우리는 버튼의 생김새가 아니라, 버튼이 하는 일을 기준으로 생각하기 때문!
→ UI를 비교하고 공부할 때는, 형태가 아니라, 목적/기능에 중심을 두고 공부하기! = UI의 기능주의적 관점
(형태를 먼저 보는게 아니라, 기능을 먼저보기! → 이건 어떤 기능을 하는 ui지?)
4-2
[학습 목표] 컴포넌트 프로퍼티를 이해하고, 배리언츠와 프로퍼티의 차이를 이해하자!
의사 상태 = 버튼이 가진 가상의 상태 ex) 마우스 올렸을 때 버튼 색이 바뀜
컴포넌트 프로퍼티 = 하나의 컴포넌트를 상황에 맞게 변형해서 쓸 수 있게 해주는 설정값 → 버튼 10개를 다 따로 만드는 게 아니라, 하나를 만들어두고, 상태/텍스트/아이콘/onoff여부를 바꿔씀!
→ 많은 디자인을 효율적으로 만들기 위함!
컴포넌트 프로퍼티 (4)
- Variant (상태 변화 포함 가능)
- Boolean (아이콘 보이기/숨기기)
- Text (버튼 문구 변경)
- Instance Swap (아이콘 교체)
👉 상태뿐 아니라 구성요소까지 조절하는 시스템
배리언츠 = 넓은 관점에서는 프로퍼티의 한 종류지만, 별개의 속성이라고 이해하자.
배리언츠 = 변종 (파운데이션 자체가 변화)
프로퍼티 = 속성. 디자인 구조가 바뀌지 않는 선에서 변경할 수 있는 요소들을 다룰 때 사용
컴포넌트 프로퍼티 = 배리언츠 제외하면, 총 3가지. 배리언츠 포함하면 4가지
1.boolean(불리언) : 레이어를 껐다가, 켰다가 하는 속성값 → 요소가 보이고/안보이고 (눈모양 아이콘)
2. 인스턴스 스왑 : 인스턴스를 다른 인스턴스로 교체. (인스턴스가 아닌 걸로는 바꿀 수 없음!! 주의!!) 주로, 버튼 안의 아이콘 등을 교체할 때 사용
3. 텍스트 : 텍스트를 수정하기 쉽게 컴포넌트 속성으로 만들어줌 → 패널에서 텍스트 편집 가능!
텍스트 프로퍼티를 적용하면 텍스트 편집을 더 쉽게 할 수 있다!
베리언츠 vs 프로퍼티의 차이는? 선택하는 기준은?
→ 파운데이션이 변경되는지로 판단!
→ 파운데이션 요소(색상, 간격, 폰트..) 가 바뀌었다면? 배리언츠
→ 파운데이션 값이 바뀌지 않았다면? 프로퍼티
4-3
[학습목표] 버튼의 위계를 이해하고, 배리언츠 만들기 실습!
버튼의 위계 = hierarchy(하이어라키) or Priority(프라이어리티)
hierarchy = 계층, 계급 / priority = 우선순위
→ 중요한 순서대로 위계 1.primary 2.secondary 3.tertiary
(이는 프라이머리 컬러, 세컨더리 컬러와는 아예 별개의 개념!
컬러에서는 프라이머리 = 주요, 세컨더리 = 보조 …
위계에서는 1순위, 2순위)
배리언츠 → 보라색 점선 생김!
버튼의
1.위계(프라이머리, 세컨더리, 터시어리)
2.크기(라지, 스몰)
3.상태(디폴트,프레스드)
만들기 실습!
(꿀팁!) 배리언츠가 들어있는 컴포넌트도 오토레이아웃 적용 가능 → 깔끔하게 정렬할 수 있음!
4-4
[학습 목표] 버튼 컴포넌트에 아이콘 추가하기!
피그마에서 아이콘 사용하는 방법 : 커뮤니티에 있는 플러그인 활용 → 아이콘 셋 다운, 인터넷에서 다운, 직접 그리기
fig 확장자는 피그마 파일 → 더블 클릭으로 열면 자동으로 피그마에서 열림
불리언 → 기본값을 true로 하는 게 편함. false로 하면, 수정할 때마다 귀찮음
4-5
[학습 목표] 버튼 컴포넌트의 아이콘 바꾸기 → 인스턴트 스왑 기능 익히기!
스왑 안되면 → 인스턴스 맞는지 확인해보기! 인스턴스 스왑은 인스턴스끼리만 적용 가능!
4-6
[학습 목표] 버튼 컴포넌트의 텍스트 프로퍼티 실습하기!
#오늘의 회고
1.오랜만에 TIl을 적어보는데 앞으로도 꾸준히 적어야겠다
개인 아카이빙용 노션이랑은 다르게, 오늘 하루 학습한 내용이 시간순으로 보이는게 좋은듯!
오늘 하루가 시각적으로 보이는 기분이다
2.오늘은 피그마를 쭉 복습하고, 챕터 4-6까지 들었다
챕터4 강의 두개랑 챕터 5까지하면 완강인데
추가 학습이 많이 필요할듯.. 하다
한 번 공부할 때 제대로 익혀두는 게 좋을듯
새롭게 세운 목표는
2월에는 피그마, 3월에는 포토샵, 4월에는 일러, 5월에는 영상편집?
순으로 다양한 툴 독학하는거...!!
(이게 되나? 싶지만 #그래도 해야지 어떡해..)
주말이나 개인 시간 투자해서 연습해야지
3.시간보다 복습+챕터3~4이해에 시간이 오래 걸려서 완강은 못했다 ㅜ.ㅜ
내일은 오전 운동갔다가 -> 약속 -> 전시회 보고, 카페가서 카공해야지!
4. 벌써 설이다.. 이번 설 연휴 계획은 일요일까지 피그마 완강+혼자 유튜브/책 보고 공부하기
-> 월요일에는 개인과제 시작해서, 수요일에 끝내기! 인데
가능할 지 몰르겠다.ㅎ.ㅎ
그래도 월요일에는 개인과제를 꼭 시작해야지
'내일배움캠프 콘텐츠마케터 부트캠프' 카테고리의 다른 글
| 마케팅 숙련CH.3 광고 콘텐츠 제작 개인 과제 (1) | 2026.02.19 |
|---|---|
| 2026.02.05(목) TIL (0) | 2026.02.05 |
| 2026.02.03(화) TIL (1) | 2026.02.03 |
| 2026.02.02(월) TIL (1) | 2026.02.02 |
| 2026.01.30(금) TIL (1) | 2026.01.30 |