[강동7기 전Z전능 AI PM] 코멘토 청년취업사관학교 DAY 18
DAY 18 | 피그마 기초와 UX/UI 디자인 핵심 개념
UX/UI는 심미가 아니라 설계다
수업은 “디자인은 예쁘게 꾸미는 작업이 아니라 행동과 상호작용을 설계하는 과정”이라는 문장으로 시작했다. 이걸 뒷받침하는 개념 네 가지를 배웠다.
애플 전 부사장 도날드 노먼의 어포던스(Affordance) 개념이 먼저 나왔다. 문 손잡이가 튀어나와 있으면 당기고 싶고, 넓적한 판이면 밀고 싶어지는 것처럼, 별도 설명 없이도 사용자의 올바른 행동을 자연스럽게 유도하는 게 좋은 디자인이라는 것이다. 큰 버튼을 보면 누르고 싶고 스크롤 바를 보면 내릴 수 있다고 직관적으로 판단하는 것도 같은 원리다.
두 번째는 사용성 공학(Usability Engineering)이다. 디자이너의 감이나 고집이 아니라 실제 사용자 테스트와 데이터로 제품을 계속 개선해나가는 과학적 과정이라는 게 핵심이다. 사용자 조사 → 요구사항 분석 → 프로토타입 제작 → 사용자 테스트 → 문제 수정 → 반복 개선의 사이클로 정리됐다.
세 번째는 인터랙션 디자인(Interaction Design)이다. 사용자의 행동에 시스템이 어떻게 반응하는지를 구체적으로 설계하는 분야인데, “버튼을 누르면 어떻게 되는가”, “화면을 스와이프하면?”, “오류가 발생하면 어떤 메시지가 뜨는가”, “애니메이션 효과는 어떠한가” 같은 질문들이 전부 이 영역에 들어간다.
마지막은 사용자 중심 디자인(UCD)과 사용자 경험 디자인(UXD)이었다. UCD가 “사용자는 무엇을 필요로 하는가”에 집중하는 설계 방식이라면, UXD는 광고 노출 → 앱 설치 → 회원가입 → 첫 실행 → 오류 발생 → 고객센터 문의 → 삭제 또는 재사용으로 이어지는 전체 여정을 설계하는 것이다. 완벽한 디자인 시스템이 없다면 피그마 같은 도구는 결국 이 여정을 팀과 함께 맞춰보기 위한 ‘소통’ 수단으로 존재한다는 게 이 파트의 결론이었다.
왜 다들 피그마를 쓰는가
어도비가 피그마를 26조~28조 원(20B 달러) 가치로 평가해 인수를 시도했을 정도로, 지금 업계에서 가장 사랑받는 협업·디자인 도구라고 한다. 이유로 꼽힌 건 네 가지였다. 진입장벽이 낮아 디자이너뿐 아니라 기획자, 개발자도 쉽게 배울 수 있다는 점, 실시간 동시 수정과 개발자를 배려한 Dev Mode로 협업에 최적화돼 있다는 점, 클라우드 기반이라 자동 저장과 파일 아카이빙이 강력하다는 점, 그리고 생산성을 높여주는 플러그인 생태계가 풍부하다는 점이다. “피그마로 시안을 안 주면 개발을 시작하지 않는다”는 말이 나올 정도라는데, 프론트엔드로 일할 때도 피그마 시안 없이 작업을 시작한 기억이 없어서 바로 공감됐다.
화면 구성과 손에 익혀야 할 단축키
화면은 상단 툴바, 왼쪽 패널(Pages·Layers·Assets), 중앙 캔버스, 오른쪽 패널(Design·Prototype)로 나뉜다. 왼쪽에서 페이지 단위로 화면을 정리하고, 레이어로 오브젝트 위계를 확인하고, 에셋에서 컴포넌트를 꺼내 쓰는 흐름이다. 오른쪽 Design 탭은 정렬·색상·이펙트 같은 세부 속성을, Prototype 탭은 화면 흐름과 인터랙션을 다룬다.
오늘 배운 단축키 중 실무에서 계속 쓸 것 같은 것들만 추려봤다.
| 도구/기능 | 단축키 | 메모 |
|---|---|---|
| 무브 툴 | V | Shift+드래그로 직선 이동, Alt+드래그로 복사, Ctrl+D로 동일 간격 연속 복제 |
| 스케일 툴 | K | 글자 크기·테두리 두께·Corner Radius까지 정비율로 함께 조정됨 (무브 툴로 조정하면 깨짐) |
| 프레임 툴 | F | 작업의 기본 단위, 최상위 프레임 영역 밖은 기본적으로 숨겨짐 |
| 슬라이스 툴 | S | 특정 영역만 잘라 이미지로 빠르게 내보낼 때 |
| 사각형/선/원/화살표 | R / L / O / Shift+L | Shift로 그리면 정사각형·정원 |
| 펜 / 펜슬 | P / Shift+P | 펜은 정교한 벡터 패스, 펜슬은 자유 드로잉 |
| 그룹핑 | Ctrl+G | 다중 선택 요소를 하나로 묶기 |
| 핸드 툴 | H 또는 Space | 캔버스 이동 |
| 선택 요소 확대 / 전체 보기 | Shift+2 / Shift+1 | 검토할 때 자주 씀 |
| 양쪽 패널 토글 | Ctrl+\ | 화면 넓게 보고 싶을 때 |
스케일 툴 얘기가 특히 기억에 남는다. 지금까지는 텍스트 박스 크기만 줄이면 되는 줄 알았는데, 무브 툴로 줄이면 글자 크기나 테두리는 그대로 남아 디자인이 깨지고, 스케일 툴(K)로 줄여야 폰트 크기까지 같이 줄어든다는 걸 처음 알았다.
고급 편집 및 협업 기능: 마스킹, 불리언, 컴포넌트
여기서부터가 피그마가 일반 그래픽 툴과 갈라지는 지점이었다.
불리언 연산(Boolean Groups)은 두 개 이상의 벡터 도형을 합집합(Alt+Shift+U), 차집합(Alt+Shift+S), 교집합(Alt+Shift+I), 배타적 합집합(Alt+Shift+E)으로 조합해 새로운 복합 도형을 만드는 기능이다. 도형끼리만 되고 사진과는 적용이 안 된다는 제약이 있었다.
마스킹은 도형을 아래에 깔고 사진을 위에 올린 뒤 두 개를 같이 선택해서 우클릭 → ‘Use as mask’(Ctrl+Alt+M)를 누르면 도형 모양대로 사진이 잘려 보이는 기능이다. 이후 Fill을 Crop으로 바꾸면 이미지 범위를 세밀하게 조정할 수 있다.
가장 핵심이라고 느낀 건 컴포넌트(Component)와 인스턴스(Instance)였다. 컴포넌트는 버튼이나 아이콘처럼 반복해서 쓰는 요소를 마스터 템플릿으로 지정하는 것이고(Ctrl+Alt+K), 이걸 복사하면 인스턴스가 만들어진다. 부모 컴포넌트의 색이나 스타일을 바꾸면 모든 인스턴스에 자동으로 반영되고, 각 인스턴스는 내용이나 색상은 개별적으로 오버라이드할 수 있지만 레이아웃 구조 자체는 함부로 못 바꾼다. 손댄 인스턴스를 원래대로 되돌리고 싶으면 우클릭 → ‘Reset instance’로 한 번에 복구된다.
오토 레이아웃(Shift+A)은 글자 길이 같은 콘텐츠 크기에 따라 여백과 간격이 자동으로 늘어나거나 줄어드는 반응형 그리드 시스템이다. 여기에 팀 라이브러리를 쓰면 컴포넌트를 클라우드에 게시해서 다른 프로젝트 파일에서도 똑같이 가져다 쓸 수 있다고 한다.
실습: 마크 곤잘레스 심볼 그리기
썸네일 만들기 실습은 시간 관계상 건너뛰고, 마크 곤잘레스 특유의 날개 캐릭터 심볼을 직접 따라 그려서 티셔츠 목업 이미지에 합성하는 실습을 진행했다. 이미지를 고정(Lock)해두고 펜슬 툴과 펜 툴로 외곽선을 딴 뒤, 면을 채우고 그룹핑해서 티셔츠 위에 올리는 순서로 진행했다. 배경이 지저분한 이미지를 다룰 땐 피그마 유료 배경 삭제 플러그인이나 브라우저용 포토샵 확장 프로그램으로 미리 투명 PNG를 만들어두면 훨씬 깔끔하다는 팁도 얻었다.
오늘 느낀 것
오늘은 만드는 사람 입장에서 피그마를 처음부터 다뤄본 하루였다. 컴포넌트-인스턴스 구조 하나만 봐도 부모를 고치면 전체에 반영되고, 개별 인스턴스는 오버라이드는 되지만 구조는 못 건드리게 막아둔 게 인상적이었다. 일관성은 지키면서 유지보수는 가볍게 만드는 설계가 도구 곳곳에 스며 있다는 느낌이었다. 어포던스나 UCD 같은 이론들도 결국 “설명 없이도 사용자가 알아서 잘 쓰게 만들자”는 하나의 원칙으로 수렴한다는 게 오늘 배운 것들을 관통하는 지점이었다.
취업 부트캠프 청년취업사관학교 새싹 aipm dx교육 ai교육 실무프로젝트 실무경험 취업포트폴리오 포트폴리오 전z전능 코멘토 모비니티