디자이너라면 알아야 할 필수 툴과 기능

 

안녕하세요! 벌써 새싹 청년취업사관학교 UI/UX 과정 2일차네요. 저는 어제보다 더 많은 것들을 배우고 성장할 수 있었던 하루였어요. 특히 이론만 알던 Figma 기능을 실제로 깊이 있게 활용하는 방법을 익히면서 '아, 이게 실전이구나!' 하는 생각이 절로 들었답니다. 2일차 핵심내용을 요약해볼게요.

 

1. 디자인의 미묘한 차이: 그림자, 오토레이아웃, 그리고 텍스트 🎨

디자인은 정말이지 '한 끗 차이'라는 말을 실감하게 되는 것 같아요. 특히 시각적인 요소들이 모여 전체적인 완성도를 결정

하죠. 2일차 수업에서는 이런 미묘하지만 결정적인 차이를 만드는 요소들에 대해 배웠습니다.

💡 Drop Shadow, 절제미가 생명!
Drop Shadow를 무심코 과하게 넣었다가 디자인을 망치는 경험, 저만 있는 거 아니죠? 😅 미니멀하고 세련된 디자인을 원한다면 그림자는 최대한 은은하게, 존재감을 드러내지 않도록 신중하게 사용해야 해요. 그래야 고급스러운 느낌을 유지할 수 있답니다.

그리고 요즘 반응형 디자인은 필수잖아요? 바로 그 기초가 되는 것이 Figma의 오토 레이아웃(Auto Layout) 기능이더라고요! 텍스트나 이미지를 추가하거나 삭제해도 프레임 크기가 자동으로 조절되니까 작업 속도가 확 올라가는 걸 느꼈어요.

또한, 디자인의 가독성과 심미성을 결정하는 중요한 요소로 레이아웃, 글씨 계층, 색상 변경의 중요성에 대해서도 배웠어요. 정보의 중요도에 따라 글씨 크기, 굵기, 색상을 다르게 해서 시각적인 계층을 명확하게 설정해야 한다고 하네요.
저도 모르게 너무 획일적으로 디자인하고 있었던 건 아닌지 반성했답니다. 

오토레이아웃과 constraint를 활용한 실습

📌 제약 조건(Constraint)으로 반응형 디자인 마스터!
다양한 디바이스 환경에 대응하는 건 이제 기본이잖아요? Figma의 Constraint 기능으로 화면 크기가 변해도 요소들이 의도한 대로 반응하게 설정할 수 있다는 게 너무 신기했어요. 복잡한 반응형 디자인도 걱정 없겠더라고요!

constraint 위치

Line 단축키 L

 

• Line 단축키는 L! 정말 사소하지만 이런 단축키 하나하나가 생산성을 높여주는 것 같아요.

2. Figma 고급 활용: 컴포넌트, 제약 조건, 그리고 단축키 🚀

Figma는 알면 알수록 정말 대단한 툴인 것 같아요! 특히 컴포넌트(Component)와 인스턴스(Instance) 개념은 UI/UX 디자이너라면 무조건 마스터해야 할 핵심 중의 핵심이더라고요. 디자인 시스템을 구축하고 일관성을 유지하며 작업 효율을 높이는 데 필수적이라고 합니다.

Frame을 눌러보시면 오른쪽 상단에 저 모양을 클릭하면 컴포넌트를 만들 수 있어요

 

좌) 마스터 컴포넌트 우) 인스턴스 / 다이아몬드가 많은게 컴포넌트/ 다이아몬드 한개 인스턴스

 
쉽게말해서, 컴포넌트에서 복사한 애들을 인스턴스라고 생각하면됨. 인스턴스를 바꾸면 개별만 바뀌는데 컴포넌트를 바꾸면 복사한 인스턴스들이 같이 수정됩니다.

 

• 편집 모드 진입: Enter 키
• 속성 클릭: Ctrl 키 (누른 상태에서 요소 클릭)

이런 단축키들을 손에 익히면 작업 속도가 진짜 몇 배는 빨라질 것 같아요. 제가 맨날 마우스로 일일이 클릭해서 시간 낭비했던 걸 생각하면... 🤦‍♀️

 

3. 생산성을 높이는 실전 팁과 외부 리소스 활용 🛠️

수업에서 강사님이 알려주신 실전 팁들도 정말 유용했어요. 특히 상세 페이지 만들기 연습은 사용자 경험 흐름을 이해하는 데 큰 도움이 될 거라고 강조하셨죠. 저도 곧바로 적용해봐야겠어요!

💡 이미지 생성 기능과 플러그인은 선택 아닌 필수!
요즘 AI 이미지 생성 도구 (예: Midjourney) 익히는 게 중요하다고 하네요. 그리고 Figma 플러그인들은 정말 신세계였어요!

• Background Remove: 한 번에 배경을 싹! 없애줘요.
• Steez: 일반 이미지를 트렌디한 3D 아이콘으로 바꿔준대요.
• Vector to 3D: 벡터 도형에 입체감을 더해주는 마법!

이런 플러그인들을 잘 활용하면 작업 시간을 엄청나게 줄일 수 있을 것 같아요.

마지막으로, 디자인의 완성도를 높이는 목업(Mock-up)의 중요성도 배웠습니다. 포트폴리오를 만들 때 디자인이 실제 제품처럼 보이도록 만들어주는 목업은 클라이언트 설득에도 최고라고 하니, Freepik 같은 유료 서비스나 포토샵 활용법을 익혀두면 좋겠다는 생각을 했어요.

 

글의 핵심 요약 📝

새싹 청년취업사관학교 UI/UX 과정 2일차는 정말 알찬 시간이었어요. 다시 한번 핵심만 콕 찝어볼까요?

1. 디자인 디테일의 중요성: 드롭 섀도우는 신중하게, 오토 레이아웃은 필수! 글씨 계층과 색상도 디자인의 생명이에요.
2. Figma 고급 기능 숙달: 컴포넌트와 인스턴스로 효율적인 디자인 시스템 구축, 제약 조건으로 완벽한 반응형 디자인 구현, 그리고 단축키로 작업 속도 UP!
3. 생산성 향상 팁: 상세 페이지 디자인 연습, AI 이미지 생성 도구 활용, 그리고 필수 플러그인과 목업으로 포트폴리오 퀄리티 높이기!

 

자주 묻는 질문 ❓

Q: Drop Shadow는 무조건 적게 쓰는 게 좋은가요?

A: 미니멀하고 세련된 디자인을 추구한다면 그렇습니다. 하지만 디자인 컨셉에 따라 과감하게 사용해야 할 때도 있으니, 전체적인 조화를 고려하는 것이 중요해요!

Q: 오토 레이아웃은 어떤 상황에서 특히 유용한가요?

A: 텍스트나 이미지 등 콘텐츠의 양이 가변적인 컴포넌트나, 다양한 화면 크기에 유연하게 대응해야 하는 반응형 웹/앱 디자인 작업 시 매우 유용합니다.

Q: Figma 플러그인들은 어디서 찾아볼 수 있나요?

A: Figma 에디터 내에서 'Plugins' 메뉴를 클릭하거나 Figma 커뮤니티 페이지에서 검색을 통해 다양한 플러그인을 찾아 설치할 수 있습니다!

 남은 과정도 열심히 듣고 꾸준히 기록하면서 성장하는 모습 보여드릴게요! 혹시 더 궁금한 점이 있다면 댓글로 물어봐주세요~