[내일배움캠프 사전캠프] 4일차 - Figma 프레임, 오토레이아웃, AI 디자인

🌱 TIL (Today I Learned)

 

피그마(Figma) 강의 수강

수업 목표
* 프레임과 그룹의 차이를 이해하고 사용할 수 있다
* 오토레이아웃의 원리를 이해하고 사용할 수 있다
* 컨스트레인트와 리사이징의 개념을 이해하고 사용할 수 있다

[프레임과 컨스트레인트]
- 프레임: 피그마 디자인 시 이해 필수
- 컨스트레인트: 프레임을 움직이는 규칙

[오토레이아웃과 리사이징]
- 오토레이아웃: 하나의 디자인이 여러 디스플레이 사이즈에 어떤 규칙으로 적용되는지
- 리사이징: 오토레이아웃 간 규칙

[프레임과 그룹]
- 디자인이 코드로 변경되는 과정

* 디자인 -> 코드 변환  * 코드 -> 디자인을 레고처럼 쌓음   (코드는 기본적으로 네모난 박스 영역을 만듬. => 박스 모델)  * 웹/앱 코드 읽기 -> 디자인으로 변경하여 화면에 출력

1. 프레임의 개념
- 피그마에서 코드 블록을 만드는 기능 //하나의 틀
- 다른 개체나 프레임을 넣을 수 있어서 '컨테이너' 라고도 불림

2. 그룹의 개념
- 여러 개체를 하나로 묶어주는 기능

- 그룹으로 묶으면 SVG 이미지, 벡타로 인식한다고 생각하면 편함

** PPT 작업 시 다중 선택 후 그룹화를 많이 이용한 경험이 있어 이해가 쉬웠다. **

 

★ 피그마는 그룹이 아닌 프레임으로 해야함 ★
- 그룹은 여러 요소를 한번에 움직일 때, 복잡한 디자인 정리할 때 사용 (실무에서 그룹 사용 빈도 매우 적은 편)

3. 프레임 vs 그룹

 

* 프레임	* 그룹
- 코드 블록 만드는 기능(동시에 그 코드 블록 자체) - 실제 코드도 변경 가능한 개체 - 개발에 필요한 속성 적용 가능	- 편집 or 조정이 필요할 때, 편의를 위해 여러 개체 하나로 - 속성 적용 불가

 

* 프레임 / 그룹 실습으로 비교하기
- 선택할 개체 드래그 > 우클릭 > 프레임 선택
- 선택할 개체 드래그 > 우클릭 > 그룹 선택
** Ctrl 누른 상태로 마우스 오버 시 각 개체 선택 가능 **

[부모-자식 관계와 레이어 정렬]
- 화면 좌측 레이어 패널 배치 관련 설명
- 부모 밑 자식 개체 토글 가능
- 정렬 종류 실습 진행

 

[제약 조건] - 피그마에서 중요한 기능
- 단일 개체: 프레임 정렬 기준이 부모개체
- 다중 개체: 선택된 개체 내에서만 정렬 (기준이 서로가 됨)
- 추가 액션: 간격을 균등하게 설정해주는 기능
 > 단일 개체 선택 시에는 나오지 않음

** 다중 개체 선택 시 영상에서는 ... 으로 나오지만 내 피그마 화면에서는 3*3 모양의 아이콘이 나옴 **

[오토레이아웃 기능] ★피그마의 꽃이자 기본기의 끝판왕★

- 개념 ? ㄴ 레이어에 유연함을 만들어주는 중요한 기능 ㄴ 레이어를 쌓고, 브레임을 배치하고 정렬하는 핵심 기능 ㄴ 패딩, 마진을 구현해주는 기능

 1) 코드 블록의 구조
  * 패딩 - 실제 블록의 사이즈가 되는 내부 여백
  * 보더 - 실제 코드블록의 테두리
  * 마진 - 코드 블록 바깥 여백, 다른 코드 블록과의 간격

 2) 컨테이너 생성 원리
  * 오토레이아웃 - 개체를 패딩으로 감싸 컨테이너를 만들 때 사용
  * 즉, UI 크기는 개체의 크기 + 패딩

 3) 어떻게 쌓는걸까?
  * 컨테이너를 또 하나의 컨테이너로 볼 수 있음

쉽게 말하면 오토레이아웃은 또 다른 오토레이아웃으로 감쌀 수 있다.   > 부모도 누군가의 자식이 될 수 있음

 4) 정리
  * 오토레이아웃 - 레이아웃 자동 조정 가능
  * 개체를 내부 여백으로 감싸 컨테이너로 만듬

 

!!실습!!
1. 프레임이 아닌 개체에 오토레이아웃 적용
* 텍스트 요소 우클릭 > 오토레이아웃 추가 > 레이어 패널 생성 확인

(패널에 왼쪽 네모 2개 아이콘 = 오토레이아웃이라는 의미)

2. 이미 있는 프레임에 오토레이아웃 속성 적용
* 텍스트 요소 우클릭 > 프레임 선택 > Shift + A > 레이어 패널 변경 확인

3. 흐름
- 가로, 세로, 간격, 좌/우 패딩, 개별 패딩, 넘친 콘텐츠 숨기기
** 내 화면에서 보이는 자유입력 아이콘은 강의 내용에 없었음 **

4. 오토레이아웃 이름 바꾸기
 1) 프레임 이름 더블 클릭 > 이름 변경
 2) 레이어 > 우클릭 > 이름 변경
 3) Ctrl + R

5. 오토레이아웃 복제, 간격 조정
- 레이어 순서: 기본적으로 아래에서 위로 쌓이는 방식

 

[프레임과 컨스트레인트] => 3번정도는 복습해야 함
* 컨스트레인트: 제약(조건), 제한이라는 뜻
 - 프레임과 밀접한 관계가 있음
 - 오토레이아웃을 정말로 오토-레이아웃으로 만들어주는 기능
 - 반응형 웹사이트/앱 디자인 시 실시간으로 움직일 때의 규칙 생성이 필요

 

** 꼭 기억하기 ** ★ 오토레이아웃 안에 있는 자식 개체들이 움직이는 조건값 ★ ★ 실무에서 굉장히 많이 사용하는 기능 ★

 

** 나만의 단어 정리 **
컨스트레인트는 단순히 방향 정렬이 아닌, 어디를 기준으로 고정을 시킬건지도 포함되어 있음

 

[프레임 리사이징]
1. 리사이징
- 프레임: 기본적으로 가로 세로 길이 고정. (Fixed)
- 오토레이아웃으로 프레임을 감싸면 Fixed 외 다른 값 생김
ㄴ 리사이징이라고 부름 (사이즈가 변경된다는 뜻)
- 부모, 자식의 리사이징 값에 따라 서로 영향을 받음

2. 종류
 1) Fixed: 고정값(공통)
 2) Hug: 자식 컨테이너의 크기에 맞춰 조정(부모만 사용 가능)
 3) Fill: 부모 컨테이너의 크기에 맞춰 조정(자식만 사용 가능)

3. 실습 진행
Shift+A: 오토레이아웃으로 변경

[포지션 이해하기]
1. Static(스태틱) - 기본 상태
2. Fixed(픽스드;고정된) - 화면 전체 기준, 위치 고정
ex) 웹사이트 헤더, 하단 고정 버튼 등이 Fixed Position
3. Absolute(앱솔루트) - 부모 컨테이너 기준, 위치 고정
4. Sticky(스티키) - 스크롤에 따라 움직이다가 특정 위치에서 상단 고정
* Static, Fixed, Sticky -> 프로토타입 패널에서 설정 가능
* Absolute -> 오토레이아웃 프레임 안에 있을때만 사용 가능

 

 

---

 

실시간 세션 진행 - AI 디자이너의 현업 이해

 

[그래픽 디자인에 유용한 AI의 3가지 이점]
- 효율성 향상
- 무한한 창의력
- 뛰어난 접근성
ex) 무드보드, 제품 샷, 모델 샷

[실제 생성형 AI 사례]

ㄴ 예시로 들어주신 내용이 전일 AI 과제하면서 찾은 내용에 있어서 반가웠다. ㅎ

사례 1. 나이키
실제 발매는 되지 못했지만 다양한 신발을 3d 모델링으로 뽑을 수 있다는 것을 보여준 사례
** 푸마 - 푸마 인버스 실제 출시

사례2. 11번가
미드저니 활용하여 이미지 제작, 포토샵 AI로 배경 확장

사례3. 플러스엑스
광고, 브렌딩, 캠페인에 활용
지그재그의 경우 텍스트 입력 후 3d 아이콘 생성하여 배치한 이미지 제작 및 브렌딩

[실제 업무 프로세스]
* AI 디자인 프로세스
1. 목표 설정 - 타깃, 일정 공유, 목적 핵심 메시지 정리
2. 컨셉 도출 - 디자인 방향 설정, 컨셉 키워드, AI와 브레인스토밍
3. 레퍼런스 수집 - 레퍼런스 탐색, AI 프롬프트 활용 시안 생성
4. 초안 제작 - 각 레퍼런스에서 마음에 드는 부분을 모아서 규칙을 찾고 다양한 시안을 제작함
5. 피드백 - 수백개 이상의 시안을 생성하게 되어 테스트 후 팀원들과 피드백 진행, 자세한 디테일은 포토샵 같은 툴을 사용
6. 마무리

 

** 각 과정에서 주로 사용하는 AI
챗 지피티 - 기획 컨셉 피드백 정리용
 : 배너 목적 정리, 타깃 메시지 문장화, 디자인 피드백 정리

미드저니 - 이미지 생성
 : 무드/스타일 실험, 비주얼 시안 생성

포토샵 - 수정 보완 마무리용
 : 요소 제거/추가, 자연스러운 리터치

[실제 실습 진행해보기] => 명일 과제로 진행 예정
1. 레퍼런스 수집
내가 생각하는 무드에 맞는 이미지를 찾아서 모으기

2. 기획안 작성
배경
목표
타깃
메시지
CTA
레퍼런스 이미지

3. 이미지 생성
챗 gpt > 20~40대 직장인들이 방문하는 모던하고 깔끔한 컨셉의 무드보드 생성 요청

 

* 명일 진행 예정 과제 내용

 

[실습 미션]
배너 디자인 제작

[작업 항목]
아트보드 사이즈: 1080×1080 또는 1200×675
이미지 배치 (AI 이미지 or 레퍼런스 활용)
컬러/폰트/버튼 적용 (기획서 기반)
레이아웃 구성: 여백/정렬/계층 구조 고려

[Q & A]

다른 수강자 분들 질문을 통해 다양한 정보를 습득했다. 프롬프트 쓰는 방법이라던지, 새로 듣는 용어라던지 !

비전공 분야라서 힘든 부분을 질문 드렸더니, 도움되는 자료를 Slack 내 공유해주신다고 하셨다.

 

오늘은 별다른 과제가 없던 날임에도..

피그마 2강까지 다 듣고 마지막 과제에서 바로 막혀버려서 애먹었다 ㅠㅠㅠ

혼자 잡고있는다고 해결되는게 아님에도 어떻게든 하고싶어서 시간을 낭비한 것 같다.

앞으로 시간 / 계획 분배 연습에도 힘을 좀 써야겠다 ㅠ

 

 

 

---

TIL 제출 이후 , , ,

너무너무 찝찝해서 붙잡고 머리 싸맨 결과 !!!!!! 피그마 2주차 과제를 끝냈다 ㅠㅠㅠ

정말 손에 많이 익혀야 할듯..

그와중에 엄마한테 톡이 왔다..

 

 

 

 

진짜 오늘 내 상황에 딱 맞는ㅋㅋㅋㅋㅋ

내일도 힘내자 !!!!!!!!