숙명여대 솔룩스 ([30기 1차 세미나] (4) 피그마로 만드는 자연스러운 UI)

1차 세미나의 네 번째 주제 또한, 노션 세미나와 마찬가지로 SOLUX의 모든 부원들이 함께 수강한 세미나였는데요.

바로 피그마를 활용해 자연스러운 UI를 만드는 방법을 배워보는 피그마 세미나였습니다.

노션과 더불어 개발 프로젝트에서 빠질 수 없는 필수 툴로 자리 잡은 피그마, 이번 세미나는 과연 어떤 내용들로 구성되었을지 지금 바로 함께 살펴보시죠!

3월 17일 (월) ~ 3월 31일 (월)

김민진 멘토님께서 진행해 주신 피그마로 만드는 자연스러운 UI 세미나에서는

피그마의 기초부터 UI 제작 실습까지 피그마의 다양한 활용 방법을 폭넓게 다루었습니다.

피그마는 기획 단계에서 디자인을 목적으로 많이 사용되는 대표적인 프로토타이핑 툴입니다.

프로토타이핑 툴이란, 반응형 웹 디자인을 위한 동적인 시안을 제작할 수 있는 디자인 도구를 의미합니다.

별도의 설치 없이 웹 브라우저에서 실행할 수 있고, 팀원들과의 실시간 협업이 가능하며, 무료로 이용할 수 있다는 점에서 최근 사용량이 꾸준히 증가하고 있습니다.

섹션 1에서는 피그마의 개념을 살펴본 뒤, 본격적인 실습에 앞서 기본 세팅을 함께 진행하였습니다.

피그마 상단바에는 선택 도구, 프레임, 도형, 펜, 펜슬, 텍스트 등 다양한 디자인 작업을 위한 기능들이 마련되어 있습니다.

선택 도구는 오브젝트를 선택하고 크기를 조정할 수 있도록 하며, 디자인을 담는 바탕이 되는 프레임 도구는 휴대폰, 태블릿 등 다양한 디바이스에 맞춘 디자인 틀을 만들 때 사용됩니다.

이어서 진행된 실습에서는 원하는 크기의 프레임을 생성하고, 도형, 이미지, 텍스트를 삽입해 간단한 레이아웃을 구성하며 피그마의 핵심 기능들을 직접 활용해 보는 시간을 가졌습니다.

또한 오토 레이아웃과 컴포넌트 기능을 통해 깔끔하고 자연스러운 반응형 웹 디자인을 쉽게 구현할 수 있다는 점도 확인할 수 있었습니다. 반응형 웹 디자인이란, 화면 크기에 따라 오브젝트와 레이아웃이 자동으로 유동적으로 조정되는 디자인을 의미합니다.

마지막 섹션에서는 실제 서비스 중인 '당근마켓' 앱 화면을 그대로 구현해보는 클론 디자인 실습이 진행되었습니다.

예시 이미지를 참고해 프레임을 설정한 뒤, 상단 바와 하단 바부터 디자인을 시작하였습니다.

스포이트 도구로 정확한 색상을 추출하고, 플러그인을 활용해 필요한 아이콘 이미지를 불러오며, 정렬 / 간격 조정 / 텍스트 입력 등의 기능을 활용해 UI를 구성하는 등 다양한 피그마 기능을 직접 적용해 보았습니다.

- 인스타그램 프로필 설정 화면을 클론 디자인해보기

이번 과제는 '당근마켓' 앱의 화면을 클론 디자인해보았던 것처럼, '인스타그램' 앱의 화면을 혼자서 구현해보는 과제였습니다.

SOLUX의 모든 부원들은 세미나에서 익힌 내용을 바탕으로 성실히 인스타그램 화면을 디자인해 과제를 제출해 주셨습니다.

실무에서 유용하게 활용될 수 있는 피그마의 기본 사용법에 익숙해지고, 다양한 기능을 직접 적용해볼 수 있었던 유익한 시간이었습니다. 앞으로도 피그마를 통해 더욱 활발한 디자인 협업이 이루어지길 진심으로 응원합니다! ✨

[30기 1차 세미나] (4) 피그마로 만드는 자연스러운 UI