TIL. 2025/10/17
1. 오늘 학습 키워드
(2강) 피그마 핵심 개념 학습
: 새로운 개념인 리사이징과 포지션에 대한 개념을 배움
(3강) 비 디자인 환경 이해 및 비 요소 만들기
: UI 디자인 환경에 대한 기초적인 배경지식을 이해하고, UI를 구성하는 요소에 대하여 다룸
1-1. 오늘의 학습 목표
- 2-1강. ~ 2-5강. 복습 (강의 다시보기)
- 2-6강. ~ 2-7강. 강의 수강 완료
- 2강 강의 수료 후, 과제 제출 완료하기
- 3-1강. ~ 3-3강. 강의 수강 완료
2. 오늘 학습 한 내용을 나만의 언어로 정리하기
: 리사이징 옵션, 관계성에 따라 부모&자식간의 유동성이 어떻게 작용되는지에 대해 배울 수 있었음
각 강의 당 내용 요약 정리
2-6강. 프레임과 리사이징
리사이징은 컨스트레인트와 유사함
오토레이아웃 안에서 자식개체들이 어떻게 움직일거냐에 대한 개념,
컨스트레인트는 프레임 개념이라면 리사이징은 오토레이아웃 컨테이너 안에서 일어나는 일
리사이징의 개념
: 프레임은 기본적으로 Fixed 상태(가로,세로 값 고정) > 오토레이아웃으로 감싸면 기본값(Fixed)외의 다른 사이즈 값이 생김
= 리사이징(Re-sizing) : 사이즈가 변경된다
/ 부모의 길이나 크기에 따라 자식들이 어떻게 영향을 받는지, 또는 그 반대의 자식들이 변하는거에 따라 부모는 어떻게 변할건지에 대한 개념
리사이징의 종류 : 3가지
- 가로, 세로 길이에 각각 적용할 수 있음
| 값 | 설명 | 유형 |
| Fixed | 고정값 | 공통 |
| Hug | 자식 컨테이너의 크기에 맞춰 조정 (부모컨테이너가 감싸는 형태) | 부모만 쓸 수 있음 |
| Fill | 부모 컨테이너의 크기에 맞춰 조정 (자식컨테이너가 꽉채우는 형태) | 자식만 쓸 수 있음 |
실습
'리사이징에는 관계가 있다' 에 대한 학습
자식(Fixed) + 부모(Hug) = 가능
자식(Fill) + 부모(Fixed) = 가능
> 반대의 경우 : 부모(Hug) + 자식(Fixed) = 가능
> 자식(Fixed) + 부모(Fixed) = 가능
'리사이징과 움직임' 학습
: 리사이징 옵션에 따라서 부모자식 각각의 컨테이너들이 어떻게 움직임이 변하는지에 대한 학습
1) 자식(Fixed) + 부모(Hug) : 자식 개체를 패딩값을 둔 채로 감싸는 형태이기때문에, 부모 컨테이너는 따라서 움직여줌.
= 자식컨테이너 길이에 따라 유동적으로 변함.
2) 자식(Fill) + 부모(Fixed) : 부모 컨테이너 사이즈를 변경하면, 자식컨테이너는 그 변화된 만큼 부모컨테이너 영역을 꽉 채운다. = 부모컨테이너 길이에 따라 자식컨테이너 길이가 유동적으로 변함.
자식(Fixed) + 부모(Hug) ↔ 자식(Fill) + 부모(Fixed)
보이는 디자인의 결과물의 차이가없어 보일수 있지만, 부모자식이 어떤 관계로 되어있는지에 따라 실제로 어떤 부분이 동적으로 움직이는지 달라진다.
**어떤부분이 반응형으로 움직이는가**가 다름!
2-7. 포지션 이해하기
: 화면안에 있는 요소들의 위치를 어덯게 할것인가?에 대한 개념,
디자인보다는 개발에서 많이 사용하는 개념 :피그마로 디자인하는 화면은 정적임, 움직임 X> 개발은 실제로 그것들을 움직이게 만드는 과정이 핵심
> 움직는 과정에서 위치가 중요함, 디자인은 평면에다 배치 but, 개발은 입체적으로 위치시키는 과정(ex. 고정하거나 스크롤에 다른 위치 조정) = 포지션
피그마에서 설정할 수 있는 포지션의 종류
1)Static(스태틱) : 기본값 , 스크롤 하면 같이 움직임
2)Fixed(픽스드;고정된) : 스크롤을 하더라도 고정된 위치에 있음.(ex. 웹사이트 헤더, 앱 하단의 버튼)
3)Absolute(앱솔루트) : 'Fixed'와 유사한 형태, 하지만 화면 전체가 기준이 아닌, 고정 기준이 컨테이너 안.
즉, 본인이 담겨있는 부모컨테이너를 기준으로 고정되어있음.
4)Sticky(스티키) : 스크롤에 따라 기본값>Fixed 로 전환되는 포지션, 스크롤을 움직이다가 특정위치에 달라붙듯이 상단에 고정되는 것을 말함.
피그마에서 포지션 설정하기
프로토타입 패널에서 설정 가능 > 추후 강의 진행 예정 / 개념만 파악해두자!
- Scroll with parent(기본값) : 부모 컨테이너의 스크롤을 따라 간다는 뜻으로, ' Static(스태틱) '을 의미
- Fixed(stay in place) : 현재 위치에 머무른다는 뜻으로, 'Fixed(픽스드)'을 의미
- Sticky(stop at top edge) : 맨 위 모서리에서 멈춘다는 뜻으로, 'Sticky(스티키)'를 의미
- 'Absolute' 는 포지션 패널 안에 있음. > 오토레이아웃 프레임 안에 있을 때만 사용 가능. / 오토레이아웃에 영향은 받지않음. 자유로운배치
굳이 사용할 필요는 없지만, 오토레이아웃처럼 규칙적으로 배치되어있는 컨테이너 안에서 별도의 위치를 지정해야 할 때, 사용함.
2-8. 2주차 과제 제출
최종적으로 2강의 마지막 단계인 2주차 과제까지 제출하여 마무리하였다.
-
3-1. 이번에 배울것
수업 목표 : UI 디자인 환경을 이해하고 적합한 디자인 원칙을 수립 / 피그마에서 스타일을 생성하고 관리 / 컴포넌트의 개념을 이해하고 기능 및 형태에 따라 분류
ui디자인의 환경 + 앞서 배운 기능''들을 토대로 ui를 실제로 만들어보는 시간을 가져볼 계획임을 설명 들었다.
-UI디자인에서의 컬러와 폰트
: 가장 기본적으로 베이스가 되는 개념, 컬러와 폰트가 ui환경에서 어떤식으로 구현이 되는지에 대해 배울 예정
-컴포넌트와 인스턴스의 관계
: 피그마에서 제일 중요한 '컴포넌트 기능' 과 그 복사본인 인스턴스의 관계에 대해 알아볼 것
>컴포넌트를 통해 만들어낸 ui키트와 디자인 시스템의 차이점에 대해서도 다룰 예정
3-2. 파운데이션
파운데이션이란? UI를 구성하는 가장 작은 기초가 되는 재료
UI를 디자인 할때, 기초 재료인 컬러와 폰트는 파운데이션 요소라고 칭함.
피그마를 통해 만들고자 하는 것 : UI(user interface), 즉, 화면에 나오는 사용자들이 상호작용 할 수 있는 요소들을 만드는 것.
(파운데이션을 명확하게 알고 배워야, 심화되는 요소들을 만들 수 있음.)
UI = 버튼, 체크박스, 라디오, 탭 등등 화면에서 보는 모든 요소
= 파운데이션(기초재료) / 컴포넌트(파운데이션을 조합해 만들어짐) = 즉, 버튼이라는 컴포넌트를 만들기 위해서는 파운데이션부터 만들어야함.
모든 컴포넌트들은 파운데이션 요소를 조합하여 만들 수 있음.(컴포넌트 개념>디자인 시스템 배울때, 구체적으로 다룰예정)
*파운데이션의 구성 > 버튼같은 컴포넌트를 만들기 위해서는 기초 재료!
- 색상(Color)
- 서체(Font, Typography)
- 간격, 여백(Spacing, Gap)
- 곡률(Radius)
- 그리드(Grid)
- 고도(Elevation) - 1주차에서 배운 **높이** 개념이에요!
- 아이콘(Icon)
3. 학습하며 겪은 문제/해결방법
-문제1. 참고자료 (https://drive.google.com/file/d/1QwWM7paXYfLhLkCyHqieyVIf0Hd3bDfN/view)
: ⓐ처음 설정을 오토레이아웃으로 설정함.
ⓑ부모를 움직이면, 두 도형이 같이 크기가 커졌다, 작아졌다 같이 움직임.
> 해결 방법 : 주어진 해설지를 보고, 처음부터 다시 프레임 구성하였음.
ⓐ 프레임+프레임> 프레임으로 묶어주는 과정 재시도 후,
ⓑ 위, 아래 프레이컨스트레인트 값을 다시 조정하여 수정함.
-문제2. 참고자료 (https://drive.google.com/file/d/1XaL3OzJkoLSU4K-kwipmF9-qHJXHbmUt/view)
: 좌우로 나란히 배열된 도형을 아무리 움직여도 부모 프레임이 움직이지 않았음
> 해결 방법 : 주어진 해설지를 보고, 처음부터 다시 프레임 구성하였음.
부모 프레임의 높이 리사이징 값이 명확하게 들어가지 않아서 반응하지 않았기 때문에, 재설정할때, 다시 값을 정확히 넣어 수정함.
4. 내일 학습 할 것은 무엇인지
: 오늘 수강하지 못한 강의(3-3강.)부터 3-5강.을 수강할 계획이며, 앞서 배운 강의들을 다시 한번 보면서 스스로 실습하며 복습할 예정이다.
(한 주를 보내면서 내가 꽤나 이해하는데 시간이 걸리는 편이라, 학습목표를 크게 잡지 않기로 스스로 다짐했다..ㅎ)
+ 주어진 과제 실행
'내일배움캠프 사전캠프' 카테고리의 다른 글
| [내일배움캠프 사전캠프] DAY.7 커리큘럼 설명회 / (3강) ~3-7강까지 수강완료 (0) | 2025.10.21 |
|---|---|
| [내일배움캠프 사전캠프] DAY.6 개인상담 및 강의수강: (3강) 컬러 스타일과 폰트 스타일 (0) | 2025.10.20 |
| [내일배움캠프 사전캠프] DAY.4 (2강) 피그마 핵심 개념 학습 (0) | 2025.10.16 |
| [내일배움캠프 사전캠프] DAY.3 (1강) UXUI 기초 개념 이해 / 수강 완료 (0) | 2025.10.15 |
| [내일배움캠프 사전캠프] DAY2. 아티클 스터디 및 피그마 기초 강의 수강 (0) | 2025.10.14 |