피그마 핵심기능 Hug contents, Fill container, Component에 대해서

 

안녕하세요! 새싹청년취업사관학교 8일차 요약내용으로 돌아온 세상보정입니다.😊 오늘은 'Hug contents vs Fill container' 개념과 '컴포넌트 만들기'의 중요성에 대해 깊이 있게 배울 수 있었는데요. 처음에는 좀 헷갈렸지만, 실습을 통해 감을 잡을 수 있었답니다. 저처럼 UI/UX 디자인에 발을 들이시는 분들이라면 꼭 알아야 할 내용들을 오늘 블로그에서 함께 나눠볼게요!

 

Hug contents vs Fill container, 대체 무슨 차이일까요? 🤔

간단하게 말하면 이렇습니다.

Hug contents

출처: 수업자료 중 일부

내용물에 맞춰 요소의 크기가 '안아주는' 방식이에요. 예를 들어, 버튼 안의 텍스트가 길어지면 버튼 자체의 너비도 자동으로 늘어나는 거죠. 유연한 디자인을 할 때 정말 유용하답니다.

 

Fill  container

출처: 수업자료 중 일부

부모 컨테이너의 크기에 맞춰 요소가 '채워지는' 방식이에요. 컨테이너가 넓어지면 자식 요소도 함께 넓어지는 식이죠. 반응형 웹 디자인에서 특히 중요하게 쓰여요.  이 두 가지를 잘 활용하면 다양한 디바이스 환경에서도 일관성 있고 유연한 UI를 만들 수 있다고 하니 꼭 기억해야합니다!

 

컴포넌트 만들기, 왜 중요할까? 🛠️

다음으로 배운 건 '컴포넌트'였어요. UI 디자인에서 컴포넌트는 재사용 가능한 요소들을 말하는데요, 버튼, 입력창, 네비게이션 바 같은 것들이죠. 솔직히 처음엔 그냥 복사 붙여넣기 하면 되는 거 아닌가 생각했는데, 정말 큰 착각이었어요! 컴포넌트화를 해야 하는 이유, 제가 느낀 중요한 점들을 공유해볼게요.

component를 활용하여 버튼 디자인 동일하게

1. 생산성 향상: 같은 요소를 매번 새로 만들 필요 없이, 한 번 만들어두면 어디서든 불러와 쓸 수 있어요. 작업 속도가 진짜 빨라지더라고요!
2. 일관성 유지: 컴포넌트를 수정하면 연결된 모든 인스턴스에 자동으로 반영되니까, 디자인 전체의 통일성을 유지하기가 훨씬 쉬워져요. 사용자 경험(UX)에도 긍정적인 영향을 주죠.
3. 유지보수 용이성: 나중에 디자인을 수정해야 할 때도 컴포넌트 하나만 고치면 되니까, 오류 발생 확률도 줄고 시간도 절약돼요. 완전 짜증났던 노가다 작업이 사라지는 거죠! 
   
   

디자인 시스템을 구축하는 데 있어서 컴포넌트는 정말 핵심적인 역할을 한다고 해요. 저도 앞으로 컴포넌트 기반으로 디자인하는 습관을 들여야겠다고 다짐했습니다!

 

기능/개념 요점 📝

오늘 배운 핵심 기능과 개념을 한눈에 볼 수 있도록 정리해봤어요. UI/UX 디자인의 기본기를 탄탄히 다지는 데 도움이 되길 바랍니다.

개념	설명	활용 예시
Hug contents	내용물(텍스트, 이미지 등)의 크기에 맞춰요소의 크기가 자동 조절되는 방식입니다.	가변적인 텍스트 길이를 가진 버튼, 태그, 배너 등
Fill container	부모 컨테이너의 크기에 맞춰 요소의 크기가 확장되어 컨테이너를 채우는 방식입니다.	반응형 웹의 섹션, 컬럼, 카드 레이아웃 등
컴포넌트	재사용 가능한 UI 요소로, 한 번 정의하면 여러 곳에서 일관되게 사용할 수 있습니다.	버튼, 아이콘, 입력 필드, 카드, 헤더, 푸터 등
디자인 시스템	재사용 가능한 컴포넌트, 스타일 가이드라인, 원칙 등을 총망라한 일관된 디자인 규칙 모음입니다.	대규모 제품의 UI/UX 일관성 유지, 협업 효율 증대

 

 

💡

오늘의 UI/UX 디자인 핵심 요약!

유연한 레이아웃: Hug contents와 Fill container 이해하기

생산성과 일관성: 컴포넌트 기반 디자인의 중요성

디자인 효율:

컴포넌트는 재사용 가능한 요소로 작업 속도 🚀 & 유지보수 🛠️

함께 성장해요! 

 

 

자주 묻는 질문 ❓

Q: Hug contents와 Fill container 중 무엇을 주로 사용해야 하나요?

A: 상황에 따라 다릅니다. 콘텐츠의 길이에 따라 요소 크기가 유동적으로 변해야 할 때는 Hug contents를, 부모 컨테이너에 맞춰 요소가 확장되어야 할 때는 Fill container를 사용합니다. 반응형 디자인에서는 두 가지를 적절히 조합하는 것이 중요해요.

Q: 컴포넌트 라이브러리 구축이 왜 중요한가요?

A: 컴포넌트 라이브러리는 디자인 시스템의 핵심으로, 생산성, 일관성, 유지보수 효율을 극대화합니다. 팀원 간의 협업을 원활하게 하고, 디자인 품질을 표준화하는 데 필수적입니다.

 

Hug contents와 Fill container, 그리고 컴포넌트의 중요성까지! 배우면 배울수록 디자인의 세계가 정말 깊고 흥미롭다는 생각이 드네요. 저도 아직 부족하지만, 꾸준히 공부해서 좋은 디자이너가 될 수 있도록 노력할게요! 이 글이 여러분의 UI/UX 디자인 학습에 조금이나마 도움이 되었으면 좋겠습니다. 더 궁금한 점이 있다면 댓글로 물어봐주세요~ 😊