피그마(Figma) 왕초보 입문 강좌: UI3 기본기·오토레이아웃·기초 컴포넌트
더 이상 수동으로 여백 맞추느라 야근하지 마세요! 최신 피그마 UI3 화면 구성부터 오토레이아웃(Hug·Fill) 차이 살펴보기, 기초 컴포넌트 실습까지 왕초보 눈높이에 맞춘 3단계 입문 코스예요.
주제 안내
피그마 처음 켰는데 도형만 그리고 있다면? 오토레이아웃부터 잡아야 해요!
웹·앱 UI/UX 디자인이나 쇼핑몰 상세페이지를 만들어 보려고 피그마(Figma)를 켰는데, 텍스트 한 줄 수정할 때마다 버튼 크기와 여백을 일일이 마우스로 다시 맞추고 계시진 않나요? 😭 Fill container와 Hug contents는 이름만으로 차이를 잡기 어려울 수 있어요. TuTu는 부모 프레임의 크기와 안쪽 텍스트가 바뀔 때를 나눠 살펴볼 수 있도록 정리했어요.
하지만 피그마의 꽃이라고 불리는 **오토레이아웃(Auto Layout)**과 프레임(Frame) 구조만 제대로 이해하면, 글자 수나 화면 크기가 바뀔 때 알아서 착착 줄어들고 늘어나는 반응형 디자인을 정말 쉽게 만들 수 있답니다! 최근 업데이트된 UI3 인터페이스에서도 이 리사이징(Resizing) 원리가 모든 실무 작업의 뼈대가 돼요. 💡
UI3 인터페이스 적응부터 오토레이아웃·기초 컴포넌트까지 3단계 입문 루틴
그래서 오늘 TuTu가 디자인 비전공자나 왕초보도 시간 낭비 없이 핵심만 쏙쏙 익힐 수 있도록 검증된 한국어 피그마 기초 강의 7편을 3단계로 정리해 왔어요! 1단계에서는 바뀐 UI3 인터페이스와 파일·페이지·레이어 기초 개념을 탄탄히 다지고, 2단계에서는 입문자들이 가장 어려워하는 **오토레이아웃 리사이징(Fixed / Hug / Fill)과 줄바꿈(Wrap)**을 예시를 보며 비교해요. 마지막 3단계에서는 반복 작업에 활용할 수 있는 기초 컴포넌트와 필수 플러그인까지 챙겼으니, 지금 바로 빈 캔버스 켜고 TuTu랑 같이 시작해 봐요! 🔥
🎬 피그마 UI3 화면 구성과 파일·페이지·레이어 기초
최신 UI3 인터페이스 반영! 피그마 기초부터 마스터까지 첫걸음 (1-1강)
새롭게 바뀐 피그마 UI와 업데이트된 기능들을 반영해 처음부터 다시 찍은 입문 강의예요! 무료 앱·웹·상세페이지 템플릿까지 제공해 줘서 피그마를 처음 켜는 입문자가 전체 흐름을 잡기에 정말 든든해요.
참고 원본 영상 펼치기 (YouTube)
9년 차 현직 디자이너의 왕초보 입문서: 계정 생성·패널 구조·도구 실습 올인원
계정 생성과 데스크톱 앱 설치부터 파일·페이지·레이어 개념, 좌우 속성 패널 구조, 기본 도형 실습과 개발자 모드 맛보기까지 타임스탬프별로 촘촘하게 나뉘어 있어서 사전처럼 필요한 부분만 골라 보기에도 최고예요!
참고 원본 영상 펼치기 (YouTube)
🎬 오토레이아웃 비교: Hug·Fill·Wrap
Fill Container와 Hug Contents 개념 100% 이해하는 오토레이아웃 기초
초보자들이 가장 많이 헷갈려 하는 Fill Container(컨테이너 채우기)와 Hug Contents(콘텐츠 감싸기), 그리고 Auto Spacing의 차이를 딱 9분 만에 직관적인 예시로 콕 집어 설명해 주는 꿀팁 영상이에요! 🍯
참고 원본 영상 펼치기 (YouTube)
리사이징 속성(Fixed·Hug·Fill)부터 반응형 메뉴바·자동 줄바꿈(Wrap) 실습
오토레이아웃의 3대 리사이징 속성을 정리한 뒤, 메뉴가 추가될 때 너비가 자동 조절되는 메뉴바와 최소·최대 크기(Min/Max Size) 옵션, 자동 줄바꿈(Wrap) 기능까지 6분 안에 압축해서 보여줘서 시간 순삭이에요⏳
참고 원본 영상 펼치기 (YouTube)
[Figma A to Z] 커뮤니티 실습 파일로 따라 하는 반응형 오토레이아웃 마스터
피그마 커뮤니티 예제 파일을 직접 복제해서 따라 할 수 있는 반응형 레이아웃 강의예요. 단순 버튼 만들기를 넘어 실제 웹·앱 화면에서 오토레이아웃이 어떻게 반응형으로 작동하는지 체계적으로 연습할 수 있어요.
참고 원본 영상 펼치기 (YouTube)
🎬 작업 속도를 높이는 기초 컴포넌트·플러그인·중첩 레이아웃 실습
디자인 초보도 바로 쓰는 필수 3대 기능: 오토레이아웃·플러그인·컴포넌트
상세페이지나 배너, 기본 UI를 만들 때 반드시 알아야 할 오토레이아웃, 작업 시간을 줄여 주는 알짜 플러그인, 그리고 반복 요소를 한 번에 관리하는 컴포넌트 기초를 초보자 눈높이에서 친절하게 풀어줘요.
참고 원본 영상 펼치기 (YouTube)
오토레이아웃 안에 오토레이아웃 넣기(중첩 구조) & 링크 버튼 컴포넌트 제작
가로·세로 리사이징 기초를 다진 뒤, 실무에서 가장 많이 쓰는 '오토레이아웃 안의 오토레이아웃(Nested Auto Layout)' 설정법과 패딩 활용, 링크 버튼 컴포넌트 제작까지 단계별로 실습할 수 있는 알찬 영상이에요.
참고 원본 영상 펼치기 (YouTube)
계속 둘러보기
NAS 백업 점검: 파일이 아니라 복구를 시험하기
NAS 백업 로그의 '성공' 표시만 믿고 계셨나요? 파일 손상 없는 무결성 검사부터 시점별 버전 복원, 시스템 DSM 구성 복구까지 실제로 되살릴 수 있는지 검증하는 실전 복원 테스트 가이드입니다.
한글 문서 스타일: 제목 번호와 서식 복구
TuTu와 함께 한컴오피스 한글(HWP) 보고서의 뒤엉킨 서식을 한 번에 정리해요! 직접 서식과 문단 스타일(F6)의 차이, 개요 번호(Ctrl+Insert) 수준 체계, 모양 복사(Alt+C)로 망가진 번호와 들여쓰기를 복구하는 실전 팁을 모았어요.
피그마(Figma) 실무 심화 강좌: 베리어블·디자인 토큰·컴포넌트 프로퍼티
주니어 티를 벗고 실무형 프로덕트 디자이너로 레벨업! 피그마 베리어블(Variables)을 활용한 컬러 팔레트·디자인 토큰 설계부터 컴포넌트 프로퍼티(배리언츠·불린·인스턴스 스왑·슬롯), 챗봇 프로토타입과 대규모 디자인 시스템 실무 팁까지 총정리했습니다.
화상회의 카메라 세팅: 역광 해결과 시선 높이 맞추기
화상회의에서 카메라 높이, 창문 역광과 조명 방향, 자동 노출을 점검하는 방법을 다룹니다. 책과 거치대를 활용한 배치부터 밤에 쓰는 간접 조명까지 살펴봅니다.
이번 주제는 여기까지예요. 다음에 또 둘러봐요.
이 주제는 AI의 도움을 받아 사람이 편집했으며, 오류나 편향이 있을 수 있습니다. 영상 권리자로서 노출을 원하지 않으시면 FindTuTu에 문의해 주세요.