[29기 3차 세미나] (1) 피그마로 만드는 자연스러운 ui

 

어느덧 29기의 세미나가 3회차를 맞이했습니다!

 

이번 3차 세미나는 피그마와 노션 두 가지 주제로 이루어져 있어, 각 주제별로 포스팅해보려고 합니다.

 

 

주제

---

 

 

기간 

 

6월 28일(금) ~ 7월 5일(금) 

 

 

이번 세미나는 김민진 멘토님께서 진행해 주셨는데요.

 

피그마는 무엇이고, 피그마로 ui/ux를 어떻게 디자인하는지 함께 알아보았습니다!

 

내용

---

PART 1 :  피그마 기초

 

* 피그마란?

 

 

피그마는 웹 디자인, 앱 디자인 등을 할 때 정말 유용한 디자인 툴입니다.

 

 

피그마는 주로 프로토타이핑 툴이라고 불려요.

웹이나 앱을 만들 때 실제로 동작하는 것처럼 미리 만들어볼 수 있는 도구라는 건데요.

 

 

가장 큰 장점은 인터넷만 있으면 어디서든 사용할 수 있다는 사실!

팀원들과 실시간으로 협업할 수도 있어서, 디자이너들 사이에서 점점 더 인기를 끌고 있어요.

 

 

 

 

* 프로젝트 기본 세팅

 

시작에 앞서 간단하게 피그마의 기본 세팅을 알아보았습니다.

 

 

위 사진은 피그마에 가입하고 로그인을 하면 제일 먼저 볼 수 있는 화면인데요,

 

왼쪽에 보이는 'Teams' 메뉴와 각종 플랜에 대한 짧은 설명을 들은 후

 

'New Design File'을 클릭해 본격적으로 디자인을 시작해봅니다!

 

 

---

 

 

PART 2 : 피그마로 UI 제작하기

 

 

*  상단바 메뉴 소개

 

 

피그마 화면 상단에 여러 가지 메뉴가 있는데, 이 메뉴들을 잘 알아두면 디자인 작업이 훨씬 쉬워집니다.

 

 

 

'선택 도구'는 화면에 있는 오브젝트를 선택하고 크기를 조절할 수 있습니다.

 

 

 

그 옆에 있는 '프레임 도구'는 다양한 디바이스에 맞춘 프레임을 만들 때 쓰여요.

예를 들어, 휴대폰, 태블릿, 데스크탑 같은 여러 크기에 맞는 프레임이 준비되어 있습니다.

 

 

 

또, 도형을 그리고 싶을 땐 '도형 메뉴'를 사용할 수 있어요.

사각형, 원, 선, 다각형 등 다양한 도형이 준비되어 있고, 더블 클릭하면 모양을 자유롭게 바꿀 수도 있어요.

 

 

 

이밖에도 '이미지 삽입' , '텍스트 도구' 등 다양한 메뉴를 알아보았는데요!

 

이런 기본적인 도구들만 잘 활용해도, 간단한 디자인을 쉽게 만들 수 있다고 합니다. 😊 

 

 

 

 

*  요소 삽입하기

 

 

 

실제로 피그마를 활용해보면서, 간단한 디자인을 만들어볼까요?

 

 

원하는 크기의 프레임을 만든 후 도형이나 텍스트를 넣어서 간단한 레이아웃을 구성해봅니다.

 

 

오른쪽에 나타나는 다양한 설정창에서 오브젝트의 위치, 크기, 색상 등을 조정할 수 있는데요.

 

 

이런 식으로 여러 가지 요소를 배치해보면서, 피그마의 기능에 익숙해질 수 있답니다!

 

 

 

 

*  반응형 웹 디자인

 

 

 

 반응형 웹 디자인은 화면 크기에 따라 레이아웃이 유동적으로 변하는 디자인을 이야기합니다.

 

 

피그마에서는 '오토 레이아웃'이라는 기능을 활용해 이를 쉽게 구현할 수 있답니다!

 

 

예를 들어, 텍스트 박스를 만들어서 오토 레이아웃을 설정하면 텍스트 길이에 따라  자동으로 크기가 조절됩니다.

 

 

이렇게 하면 다양한 화면 크기에서도 깔끔한 디자인을 유지할 수 있어요.

 

 

---

 

 

PART 3 : 피그마 실습

 

*  당근마켓 클론 디자인

 

 

 

다음 실습으로 당근마켓 앱의 화면을 따라 만들어봅니다.

 

 

먼저, 당근마켓 앱의 캡처 이미지를 불러와서 아이폰 14 프레임에 맞춰 디자인을 시작합니다.

 

 

상단 바와 하단 바를 프레임으로 만들어 위치를 고정해 두면

나중에 프레임이 커져도 상단과 하단을 고정시킬 수 있어요.

 

 

이런 식으로 영상을 차근차근 따라 하면서, 피그마의 다양한 기능을 직접 익혀보는 시간을 가져보았습니다.

 

 

---

 

 

과제 : 인스타그램 프로필 설정창 클론 디자인

 

 

 

이번 세미나의 과제는 인스타그램의 프로필 설정창을 따라 디자인해보는 것이었습니다. 

 

앞서 실습에서 진행했던 것처럼 다양한 요소와 메뉴를 사용해 해당 화면을 완성하면 과제 완료!

 

이번 세미나도 모든 부원들이 열심히 참여해 주셨습니다 :)

 

 

 

 

피그마는 처음엔 조금 복잡해 보일 수 있지만

 

몇 번 사용해 보면 정말 유용한 도구라는 걸 느낄 수 있답니다.

 

앞으로 피그마를 이용해 즐겁게 디자인 작업하시길 바랍니다!