안녕하세요
피그마 공부를 하던 중 오토레이아웃, 컴포넌트, 베리언트의 중요성을 깨닫고
논리적인 구조와 매커니즘을 확실하게 공부하기 위해 직접 실습 프로그램을 제작하게 되었습니다.
① 시작 — 기본 퀴즈 앱
처음엔 오토 레이아웃·컴포넌트·배리언트 개념을 퀴즈로 학습하는 단순한 구조로 시작했습니다. 4지선다 퀴즈 10문제, 정답 시 피드백, 진행도 바, 챕터별 탭 구성이었습니다.
② 퀴즈 → 인터랙티브 시뮬레이터로 전환
퀴즈 방식이 연습에 불충분하다고 판단해서 방향을 완전히 바꿨습니다.
- 실제 피그마 UI처럼 생긴 3단 레이아웃 (레이어 | 캔버스 | 속성 패널)
- 오토 레이아웃 — Gap·Padding 슬라이더, 방향/Wrap/Align 버튼, 아이템 추가·삭제, 실시간 프레임 반영
- 컴포넌트 — Main 색상 순환, 인스턴스 클릭 → 오버라이드, 전파 확인
- 배리언트 — 4 Type × 3 State 전체 매트릭스, 클릭으로 선택
- 컨스트레인트 — 슬라이더로 프레임 너비 조절 → 각 요소 반응 실시간 확인
- 하단 팁 패널 — 챕터별 10~14개 팁 카드
③ 챕터 3개 추가 (Variables·프로토타입·스타일)
- Variables — Light/Dark 모드 전환, 색상 토큰 탭으로 값 순환, 라이브 프리뷰
- 프로토타입 — 3개 화면 전환 실습, Transition 타입 4가지 선택
- 스타일 — Color·Text·Effect 스타일 탭 → 카드 프리뷰 즉시 반영
④ UX 강화
- 🌙 다크/라이트 테마 전환 버튼 추가
- 각 챕터 상단 가이드 툴팁 (hover 시 실습 힌트)
- 화면 전환 fadeIn 애니메이션, 컴포넌트 hover 애니메이션
- 팁 패널 드래그 핸들로 높이 자유 조절
- 팁 패널 ▼ 접기/펼치기 토글 버튼
⑤ 군더더기 제거 — 선택과 집중
컨스트레인트·Variables·프로토타입·스타일 챕터를 삭제하고 핵심 3개(오토 레이아웃·컴포넌트·배리언트)에만 집중했습니다. 불필요한 복잡도를 줄이고 완성도를 높이는 방향으로 정리했습니다.
⑥ 반응형 — 모바일 지원
- 데스크탑: 3열 레이아웃 유지
- 모바일: 좌우 사이드바 숨김 → 바텀 드로어 (레이어·속성·팁 버튼)
- 터치 조작에 맞게 버튼 크기·탭 영역 확대
- 드래그 리사이즈 핸들 터치 지원
⑦ 모바일 속성 패널 개선
드로어 팝업 방식이 불편하다는 피드백 → 팁 패널처럼 하단 고정 패널로 변경했습니다. 캔버스를 보면서 바로 조작할 수 있게 됐습니다. 속성 섹션이 가로로 나열되어 스크롤하며 탐색하는 방식입니다.
⑧ 팁 UI 전면 개편
- 기존: 하단 패널에 작게 표시 → 글씨가 너무 작고 불편했습니다
- 1차 개선: 상단 버튼 클릭 시 오버레이로 올라오는 방식
- 최종: 상단 탭에 💡 팁 탭 추가 → 전체 화면 팁 페이지로 전환했습니다
- 팁 페이지 내 카테고리 필터 버튼 (전체·오토 레이아웃·컴포넌트·배리언트)
- 팁 페이지 진입 시 하단 속성 패널 자동 숨김
⑨ 오른쪽 속성 패널 개선
- 너비 220px → 280px 확장
- 버튼 높이·폰트·슬라이더 모두 키워 클릭/터치 편의성을 높였습니다
버그 수정 이력
| SyntaxError: Unexpected token ')' | 팁 데이터 배열에서 닫는 따옴표 대신 ) 입력 | 따옴표로 수정했습니다 |
| ReferenceError: openDrw is not defined | JS 파싱 실패로 함수 미정의 | 위 문법 오류 수정으로 해결했습니다 |
| 캔버스 영역 보이지 않음 | bottom-bar가 app 안에 있어 3열 레이아웃과 충돌 | app-outer/app 구조를 분리했습니다 |
| TypeError: Cannot read properties of undefined (reading 'length') | 삭제된 챕터 key로 TIPS[key].length 호출 | null 체크를 추가했습니다 |
| TypeError: Cannot set properties of null (setting 'innerHTML') | 드로어 삭제 후 DOM 참조 잔존 | 삭제된 요소 참조를 제거했습니다 |
| 팁 페이지 오토레이아웃만 보임 | tip-card의 고정 width가 grid 레이아웃 방해 | width:auto!important로 오버라이드했습니다 |
| 팁 화면 속성창 숨김 안 됨 | mob-props-bar가 CSS 선택자 범위 밖 | app-outer에 id 추가 후 JS에서 직접 제어했습니다 |
디자이너를 위한 피그마(Figma) 오토레이아웃 & 컴포넌트 실습
피그마를 공부하다 보면 오토레이아웃의 사용법이나 배리언트(Variants)의 상태 변화가 머릿속으로 그려지지 않을 때가 많습니다.그래서 직접 값을 바꿔보며 결과물을 실시간으로 확인할 수 있는
danmi01.tistory.com
'작업 > 작업기록' 카테고리의 다른 글
| [제작과정] 웹디자인기능사 실기 초단기 합격 코드북 (AI 협업 프로젝트) (0) | 2026.03.18 |
|---|