2탄: 피그마의 기본기 익히기(feat.한국어 사용 설정 방법)

 

1탄: 피그마와의 첫 만남😵‍💫

 

위에서 아직 나는 피그마 쪼렙이지만,

감히! 첫만남에 대해 기술해보았다.

 

 

나름 그래서 몇가지 팁에 대하여

오밤중에 피그마에 대한

2탄을 적어보고자 한다.

 

---

 

 

일단 피그마를 지지고 볶고 뭘하려면

인터페이스에 적응이 되어야 한다고 생각한다.

개인적으로 어떠한 메뉴얼이나

이런거에 따르지않고

무작정 한국어버전을 사용해서 

이리저리 클릭하는게 나의 프로그램에 대한

체득 방법인데,

안타깝게도 피그마는 공식적으로 영어와 일본어만

지원하는 아주 강아지같은 상황이다.

---

 

필자는 지독한 크롬 사용자인데,

크롬 자동 번역을 통해 피그마를 사용해보아하니

여러모로 번역이 무식해서 이리저리 찾아보니

웨일을 사용하면 된다는 썰이 압도적이었다.

자동으로 깔려도 사실 삭제했는데

피그마를 위해 다시 깔았다는게 함정

 

 

네이버 웨일 브라우저

 

상단의 링크를 통해

웨일브라우저를 다운받는다.

 

피그마를 사용하고자 한다면

기본적인 응용프로그램들은

잘 설치하실줄 아는 분들이라 사료하여

웨일 설치 방법은 과감하게 킵하고!

 

---

 

설치된 네이버 웨일 브라우저로 피그마에 로그인 한 화면

 

설치된 네이버 웨일 브라우저로

피그마에 로그인 하면

웹사이트는 번역이 되는 듯 하지만

정작 작업영역으로 가면 그대로

영어로 표현되는 경우가 많다.

이럴때는 화면 아무데서나 우측클릭후

아래서 5번째 메뉴인 번역을 클릭해주면

 

번역이 된 후 원하는 번역 설정

 

바로 작업영역까지 번역이 되며

우측상단에 간단한 번역 설정이 있는데

필자의 설정은 대략 저렇고

원하시는 데로 번역설정을 해준후,

 

 

새로운 작업 공간을 만들면

이렇게 메뉴들까지 깔꼬롬하게,

번역이 되는 상황을 볼 수 있다.

 

---

 

 

모든 디자인 툴은 일단

기본 기능을 확실히 익혀야 한다고 생각한다.

기본기를 탄탄히 다져야

나중에 더 복잡한 작업도

수월하게 할 수 있기 때문이다.

 

앞으로도 여러가지 기능에 대해

개인적인 공간을 빌어 기술하겠지만

몇가지 포커스를 아래에 적어보고자 한다.

 

---

 

피그마의 프레임 기능은

페이지의 레이아웃을 잡는 데

아주 유용하다.

프레임 안에 컴포넌트를 배치하고,

오토 레이아웃을 설정하면

요소 간의 간격 조정도

자동으로 해결되어서

몇픽셀가지고 씨름하는 경우를

수월하게 해결하여

디자인의 일관성과 작업효율성을 늘려준다.

 

---

 

위에서 잠시 기술한

피그마의 컴포넌트 기능은

일종의 블록처럼 끼워 넣는

기능적 요소의 개념이다.

자주 사용하는 UI 요소들을

컴포넌트로 만들어두면,

나중에 다른 프로젝트에서도

재사용할 수 있다.

예를 들어, 버튼 컴포넌트를 만들어 두면,

모든 페이지에서

동일한 스타일을 유지할 수 있어서

UI/UX에서 중요하게 여기는

일관된 디자인을 하는데 있어

중심을 잡아줄수 있다.

나중에 버튼 스타일을 바꿔야 할 때도,

컴포넌트만 수정하면

모든 인스턴스가

자동으로 업데이트 된다.

---

 

피그마는 프로토타이핑 기능도 지원해서,

링크를 설정해 페이지 간의 이동을 구성하고,

버튼 클릭 시 발생할 트랜지션 효과를 지정할 수 있다.

사용자가 실제로 경험할 인터페이스를

미리 시뮬레이션할 수 있고,

이 기능을 통해 클라이언트나

팀원에게 디자인의 전체 흐름을

설명할 때도 유용하다.

---

 

피그마의 또 다른 매력은

플러그인과 커뮤니티 리소스.

다양한 플러그인을 사용하면

작업의 효율성을 높일 수 있고,

커뮤니티에서 공유되는

리소스를 활용하면

디자인 퀄리티를 한층 높일 수 있다.

 

---

 

위의 기술한 4가지 덩어리는 앞으로도

이 블로그를 빌어 사용방법에 대해

적어볼 예정이니

여러모로 미숙해도

누군가는 도움이 되길 바라는 마음에

다음편을 기대해주시길 바란다...