2026-05-21 DAY4 TIL

체계적으로 배우는 피그마 기초 완전 정복 (2)

프레임, 오토 레이아웃, 컨스트레인트, 리사이징

 

피그마 디자인의 기본단위 < 프레임 Frame >

오토 레이아웃 과 리사이징

 

º 오토레이아웃 UI 구조 설계에서 핵심적인 역활 / 모든 UI 가 오토레이아웃 사용해서 만들어진다 해도 과언X

º 오토레이아웃 간의 규칙 리사이징

 

프레임과 그룹

 

코드는 디자인을 어떻게 읽는가??

1) 디자인을 코드로 변환

 

2) 코드는 디자인을 레고 처럼 쌓는다 블록모델/박스모델

3) 웹과 앱은 코드를 읽고, 디자인으로 다시 바꿔서 화면에 보여준다.

따라서 UI 를 그린다, 화면을 디자인 한다고 할때 코드로 변환할수 있는 구조

즉, 박스 모듈에 대한것을 개념적으로 가지고 있어야 한다.

그 구조를 위한 기능이 프레임!!

 

프레임과 그룹 (둘다 피그마에서 개체를 만드는 기본적인 기능이지만 차이가 크다)

1) 프레임의 개념

2) 그룹의 개념

    그룹 : 여러 개체를 하나로 묶어주는 기능

★ 중요 ★ 프레임과 달리 그룹은 코드 블록으로 인식이 안됨

                 그룹은 SVG 이미지로 인식한다고 생각

 

피그마는 특별한 목적이 있다 = UI 디자인을 위한 도구다 보니 

                그룹 으로 그룹핑을 하는게 아니라!!

                프레임 으로 그룹핑을 해야 한다!!

 

Q. 그룹은 그럼 언제쓰나 ?

※ 그룹 기능은 여러 요소를 한번에 담아서 움직일때 사용

    or 복잡한 디자인을 정리할 필요가 있을때 그룹을 사용해서 정리

→ 근데 ? 실무에서 그룹을 사용하는 빈도는 매우 적~다 ㅎ

 

그룹은 코드로 변환이 안된다 그래서 개발자와 커뮤가 복잡해진

 

2) 프레임 VS 그룹

º 프레임은 코드 블록을 만드는 기능. 실제 코드로 바꿀 수 있는 개체

º 그룹은 편집이나 조정이 필요할때, 또는 편의를 위해 여러 개체를 하나로 담는기능

º 프레임은 개발에 필요한 속성들을 적용할수 있고, 그룹은 속성을 적용할 수 없다!

 

그럼 ?? 그룹은 언제 써 ? → 일러스트레이션 만들때, 특정 그래픽을 만들 떄는 그룹을 사

                                                                               위 프레임 / 아래 그룹

 

다중개체를 정렬할때 단일 개체와 다르게 그 선택된 개체들 사이에서만 정렬이 발생

                   서로가 그 정렬의 기준점이 된다 

단일개체는 기준이 부모개체

 

정렬 6가지 옵션에서 다중정렬 일때만 추가액션 사용가능 / 단일개체때는 나오지 않음

 

오토레이아웃 기능 살펴보기

오토레이아웃 : 레이어를 쌓고 , 프레임을 배치하고 정렬하는 피그마의 핵심 기능

                          패딩, 마진을 구현해 줄 수 있는 기능

                          콘테이너의 내부여백과 외부여백을 조정하는 레이아웃 기능

                          개체를 패딩으로 감싸 컨테이너를 만들때 사용

                          컨테이너를 간격에 맞게 규칙적을 정렬하는 기능도 사용 

                          auto-layout 즉,레이아웃을 자동을 조정할 수 있는 기능

 

 

1) 코드 블록의 구조 

2) 컨테이너가 만들어지는 원리  

 

º 모든 코드 블록은 내부에 들어있는 개체와 , 개체를 둘러싼 패딩 (내부여백) 으로 만들어 진다

º 우리가 만드는 UI 의 크기는 개체의 크기 + 패딩

 

3) 컨테이너를 쌓을 려면 ?

      ※오토레이아웃의 활용 - 컨테이너를 간격에 맞게 규칙적으로 정렬해주는 기능도 사용 

 

오토레이아웃 만드는법 2가지 

1) 레이어에 오토레이어 추가 누르기 

2) 기존프레임을 오토레이아웃을 바꾸는거 프레임 선택 누르고 그냥 프레임을 감싸주는것

    이상태에서 오토레이아웃 적용 Shift + A 를 누르면 오토레이아웃 적용 

 

 

 

프레임 이름 바꾸는 법

1) 더블 클릭 해서 

2) 레이어 클릭

3)단축기 Ctrl+ R

 

프레임과 컨스트레이인트 

컨스트레인트 (=제약조건) : 오토레이아웃을 정말로 오토레이아웃 답게 만들어 주는 기능 

뜻 : 제약(조건), 제한 이라는 뜻 오토레이아웃 안에 있는 자식 개체들이 움직이는 방식을 제한 한다라는 뜻 

오토레이아웃 안에 있는 자식 개체들이 움직일때 조건 값이다.

부모 컨테이너의 크기가 변할때 , 자식 컨테이너는 어디를 기준으로 변할까 ? 를 정할수 있다. 

 

프레임 리사이징

오토레이아웃안에서 자식 개체들이 어떻게 움직일거냐 대한 개념 

콘스트레이트 (제약조건) 일반적인 프레임에  대한 이야기 였다

º 프레임은 기본적으로 가로와 세로의 길이가 고정 이상태를 Fixed 된 상태라고 얘기 

º 이걸 피그마에서 리사이징 즉 사이즈가 변경이 된다는 뜻

º 부모의 리사이징 값에 따라 자식의 리사이징 값이 영향을 받는다 반대로의 상황도 동일 하다

값	설명	유형
Fixed	고정값	공통
Hug	자식 컨테이너 크기에 맞춰 조정	부모만 쓸 수 있음
Fill	부모 컨테이너 크기에 맞춰 조정	자식만 쓸 수 있음

 

자식이 고정값으로 되어있을 때는 부모는 그걸 감쌉니다

즉, 자식이 Fixed 일때 부모는 허그가 가능하다

만약에 자식이 Fill 이어야 한다면 부모는 Fixed 가 되어야 한다 

부모가 Hug 를 해야 한다면 자식은 Fixed 가 된다 

둘다 Fixed 일 수도 있다

 

보이는 결과물은 같지만~~~ 부모자식이 어떤 관계로 되어 있는지에 따라

실제로 어떤 부분들이 동적으로 움직이는가 달라진다

실제로 어떤 부분이 반응형으로 움직이는 가 어떤부분을 동적으로 만들것인가 

포지션 

화면에 있는 요소들의 위치를 어떻게 할 것인가에 대한 개념 

 

피그마에서 설정할수 있는 포지션의 종류 

1) Static(스태틱)

    일반적인 요소들이 가지고 있는 포지션

 

2) Fixed(픽스드;고정된)

     화면 전체를 기준으로 스크롤하더라도 항상 고정된 위치에 있다

     우리가 아는 웹사이트의 헤더나 앱 하단의 버튼 등이 Fixed Position 이다

 

3) Absolute(앱솔루트)

   Fixed와 유사하지만 고정되는 기준이 컨테이너 안.

  즉, Fixed는 화면 전체를 기준으로 하고, Absolute는 본인이 담겨있는 부모 컨테이너를 기준으로 한다.

 

4) Sticky(스티키)

   스크롤에 따라서 기본값과 Fixed를 전환하는 포지션

   스크롤을 따라 움직이다가, 특정 위치부터는 상단에 고정되는 것을 뜻한다

 

Static Fixed Sticky ▶  프로토타입 패널에서 설정 가능

Absolute ▶ 포지션 패널에서 찾을 수 있다 단, 오토레이아웃 안에 있을 때만 사용 가능

                    오토레이아웃에 영향을 받지 않고, 일반 프레임 안에 있는 것처럼 자유롭게 배치 가능 

                      일반 프레임 안에서 배치가 자유로우니 앱솔루트 포지션을 굳이~ 쓸 필요가 없다

 

2. 생성형 AI와 LLM 의 원리

LLM = large language model(거대언어모델)

:  이런사람의 언어를 인식하고 이해해서 답변하는 AI 모델을 LLM 이라고 한다

   보통 생성형 AI 얘기

   WHY 직접적인 산출물이 나오는게 생성형 AI 인데 원리가 같아서 보통 생성형 AI 에 포함

 LLM은 언어를 먹고 언어를 뱉는 AI 

하지만 사실 LLM 은 언어를 이해하지 못 함 단지 예측만 할뿐

기계적인 측면에서 '' 이해 " 라는것을 봤을때 인공지능이 이해를 이해한다 안한다 라고 말을 하면

보통 이해하지는 않지만 이 문장 문맥을 인식해서 다음에 올 답변을 예측한다가 정확한 표현

 

LLM이 어떤 문장을 들이면 모델이 알 수 없는 벡터 OR 스칼라 값과 유사한 값을 대조

그리고 다음에 답변해야 하는 가장 적합한 값을 찾는다.

사용자가 만족할지 안 할지 모르지만 아무튼 그 값에 해당하는 답변을 한다 

 

그래서 LLM은 사실 문장의 의미를 모른다는 뜻이다.

 

하지만 이런 방법에도 한계가 있어서 나온방법이 \

▼ ▼ ▼ ▼ ▼

파인튜닝 - 매개변수를 조정해주는 방법

RAG(검색증강생성) - 또 다른 정보의 풀을 만들어 주는것 

 

그러면 LLM이 학습하는거랑 뭐가 다르냐 ?

 학습을 안 시켜도 된다 그냥 추가적인 정보를 주는 것이다

 단, LLM이 단순이 웹에있는내용을 스크래핑해서 보여주는건 검색증강생성이라 하지 않는다 

스크래핑 해서 LLM 모델이 스스로 가공을 해서 보여줘야만 RAG 검색증강생성이라 하는것이다

결국 상황에 따라 다르지만 두 방법 다 사용해야 한다 ~~~~~ 

 

RAG 검색증강 생성 : LLM의 답변 최적화를 위해 외부 지식 베이스를 활용하는 기술 

 

FINE TUNING (미세조정 )AI 모델을 최적화 하기위해 매개변수를 조정하는 활동

 

LLM :거대 언어 모델로 인간의 언어를 이해하고 답변해주는 모델

 

LLM을 활용해서 내 직무관련 업무의 문서로 만들어 보기 

핵심은 AI에게 **"너는 지금 어떤 역할을 맡은 전문가야"**라고 빙의를 시키고, **"어떤 내용을, 어떤 형태로 만들어줘"**라고 명확하게 지시(프롬프트 작성)하는 것

처음 시작하실 때 바로 써먹을 수 있는 4단계 작성 공식과 직무별 예시를 정리

1. LLM 문서 작성 핵심 공식 (이대로만 치세요!)
AI에게 질문할 때는 아래 4가지 요소를 포함해서 대화하듯 작성하면 훨씬 퀄리티 높은 문서가 나옵니다.

역할 정의 (Who): AI에게 구체적인 직책이나 전문가 역할을 부여합니다.
배경/상황 설명 (Context): 이 문서가 왜 필요한지, 타겟 독자가 누구인지 알려줍니다.
핵심 내용 (Input): 문서에 반드시 들어가야 할 키워드나 데이터를 툭툭 던져줍니다.
출력 형식 (Output): 보고서, 기획서, 이메일, 표 형태 등 원하는 형식을 지정합니다.

2. 바로 복사해서 쓰는 직무별 프롬프트 템플릿

대표적인 예시 3가지를 준비

① 기획 / 마케팅 (신규 프로젝트 기획서 초안)
"너는 10년 차 베테랑 **[마케팅 기획자]**야. 이번에 **[2030 세대를 타겟으로 한 친환경 텀블러 브랜드]**를 런칭하려고 해. 이 프로젝트의 **[시장 분석, 타겟 고객 정의, 초기 마케팅 전략]**을 포함한 신규 프로젝트 기획서 초안을 작성해 줘. 직관적으로 볼 수 있게 세부 항목은 개조식(줄글이 아닌 요약 형태)과 표를 적절히 섞어서 구성해 줘."

② 인사 / 경영지원 (사내 가이드라인 및 공지문)
"너는 **[인사팀 팀장]**이야. 다음 달부터 시행되는 **[유연근무제(코어타임 오전 10시~오후 4시)]**에 대한 사내 안내 공지문을 작성해야 해. 직원들이 제도를 오해하지 않도록 **[도입 취지, 필수 준수 사항, 자주 묻는 질문(FAQ) 3가지]**를 포함해 줘. 말투는 정중하면서도 명확한 비즈니스 톤앤매너로 작성해 줘."

③ 영업 / CS (고객 제안서 또는 사과문)
"너는 **[B2B 기술 영업 전문가]**야. **[A 고객사]**에 우리 회사의 **[클라우드 보안 솔루션]**을 도입하라고 제안하는 메일 초안을 쓰려고 해. 고객사가 최근 **[데이터 보안 문제]**로 고민하고 있다는 점을 공감하면서, 우리 제품이 줄 수 있는 **[비용 절감 및 보안 강화]**라는 기대효과를 강조해서 정중한 비즈니스 이메일 형태로 써줘."

3. 문서를 더 프로페셔널하게 만드는 꿀팁

한 번에 끝내지 마세요 (티키타카 하기): AI가 처음 뽑아준 문서가 100% 마음에 들 확률은 낮습니다. "2번 항목은 빼고 3번 항목을 좀 더 구체적으로 늘려줘", "대리급 직원이 읽을 거니까 용어를 조금 더 쉽게 풀어줘"처럼 수정 요청을 이어가야 완성도가 높아집니다.
보안 주의: 회사 내부의 대외비 문서나 민감한 개인정보, 매출 데이터 등을 그대로 입력하지 마세요. (예: 실제 데이터 대신 'A사', '매출 X원' 식으로 치환해서 초안 형태를 잡은 뒤, 나중에 직접 숫자를 채워 넣는 것이 안전합니다.)
혹시 현재 어떤 직무를 맡고 계신가요? 그리고 지금 당장 만들어야 하는 문서(예: 주간 보고서, 이메일, 서비스 기획서 등)가 무엇인지 구체적으로 알려주시면, 바로 복사해서 쓰실 수 있는 맞춤형 프롬프트와 문서 뼈대를 만들어 드릴게요!