디자인을 하다 보면 똑같은 버튼이나 카드를 여러 번 그려야 할 때가 있습니다. 이때 하나하나 그리지 않고 똑똑하게 관리하는 방법, 그리고 내 디자인을 진짜 앱처럼 움직이게 만드는 방법을 알아볼까요?
1. UI 컴포넌트: 하나만 고치면 다 바뀌는 마법
디자인 요소들을 하나의 '부품'으로 등록해두는 것을 컴포넌트라고 합니다.
* 원본(Main Component): 붕어빵을 찍어내는 '틀'과 같습니다.
* 복사본(Instance): 그 틀에서 찍혀 나온 '붕어빵'들입니다.
* 왜 사용하나요?
* 일관성: 모든 페이지의 버튼 색깔을 똑같이 맞출 수 있습니다.
* 속도와 효율: 만약 버튼 색을 빨강에서 파랑으로 바꿔야 한다면, 원본 하나만 고치면 수백 개의 복사본이 한 번에 바뀝니다!
2. 프로토타이핑: "이거 진짜 작동해요?"
디자인한 그림들을 서로 연결해서 진짜 스마트폰 앱처럼 눌러보고 움직여보는 기능입니다.
* 연결(Link): "이 버튼을 누르면 다음 페이지로 가세요"라고 길을 정해주는 것입니다.
* 인터랙션(Interaction): 클릭할 때, 마우스를 올릴 때 어떤 반응이 일어날지 설정합니다.
* 애니메이션: 화면이 옆으로 슥 밀리거나 나타나는 효과를 주어 자연스럽게 만듭니다.
피그마 실습: 나만의 부품 공장 가동하기
실습 1 & 2: 버튼과 카드 부품 만들기
사각형과 글자를 합쳐서 '버튼 컴포넌트'를 만들었습니다. 그리고 이 버튼을 복사해서 여러 페이지에 두었습니다. 원본 버튼의 색을 바꾸니 모든 페이지의 버튼 색이 동시에 바뀌는 신기한 경험을 했습니다!
실습 3: 가짜 앱 작동시켜 보기
홈 화면과 상세 페이지를 만들고, 버튼에 '클릭하면 상세 페이지로 이동'이라는 명령을 주었습니다. 상단의 재생(Play) 버튼을 누르니 제가 만든 디자인이 진짜 앱처럼 척척 움직였습니다.
* 컴포넌트는 반복되는 디자인을 쉽고 정확하게 관리하는 '부품'입니다.
* 프로토타입은 내 디자인이 실제로는 어떻게 쓰일지 미리 확인해보는 '미리보기'입니다.
'커리어 > 프로덕트 디자이너' 카테고리의 다른 글
| 피그마 기초 사용방법 (0) | 2026.04.01 |
|---|---|
| 오즈코딩스쿨 (0) | 2026.03.14 |
| 디자인 기초, 레이아웃과 글자 꾸미기 (1) | 2026.02.25 |
| [디자인 도구] 피그마(Figma) (0) | 2026.02.24 |
| 디자인 기초, 색상이론 (0) | 2026.02.23 |