DailyStudy_2_피그마 학습 및 Ui 제작 실습

 

https://www.youtube.com/watch?v=ezldKx-jPag 

"해당 영상을 참고하여 학습"

 피그마 파일에는 두 종류가 있다. 기본 피그마 파일과 피그마 잼이 있다. 피그마 잼은 화이트보드 기능이다. 자유롭게 의견을 공유하고 아이디어를 적는데 쓰는 것 같다. 피그마는 강력한 협업 툴이기도 하니 여러 사람과 아이디어를 공유할 때는 괜찮게 쓸 수 있을 것 같다. 그게 아니라면 사실 뭐 아무 데나 써도 되기 때문에 상관은 없을 것 같다. 나는 종이에 직접 쓰는 걸 선호한다. 이런 툴을 사용하면 그 툴의 특성에 얽매이게 된다. 엑셀을 쓰면 괜히 더 정리하려고 하고 피그마를 쓰면 괜히 더 이쁘게 만드려고 할 것 같다. 이런 강박이 아이디어를 막 뱉어내는 걸 막는다고 생각한다. 이미 아이디어가 나오고 그걸 정리하기 위해서 이런 툴 중 하나를 고르는 건 좋을 것 같다. 보기 좋은 정보가 설득력이 강하다. 

ㅇ. 건 좀 써야겠다. 플로우차트 만드는 건 말도 안 되게 편하고 깔끔하다. PPT나 엑셀로 도형 하나하나 만들어서 했었는데 하... 인생 손해 보고 있었다.

 

기본적으로 프레임을 생성해야 한다. UI가 들어가는 화면의 크기를 정해야지 Ui를 만들 수 있다. 다양한 사이즈의 프레임이 프리셋으로 만들어져 있다. 다양한 휴대폰 화면 크기부터 tv, 인쇄물 등 필요한 크기에 맞춰 만들면 된다. 

 

나머지는 정말 쉽다. 왼쪽이 레이어를 포함한 파일에 관한 정보고 오른쪽이 객체에 관한 정보다. 오른쪽에 색상, 폰트, 아우트라인 등 모든 정보가 있다. 끝.

정말 쉽다. 

툴 사용이 너무 쉽다 보니 UI는 사실 툴 사용 숙련도보다는 이론을 제대로 학습하고 많은 제작 경험을 통해 이론 지식을 작업에 정확히 담아내어 의도를 전달하는 능력이 더 중요할 것 같다.

3D 작업은 툴도 나름 많이 나오고 AI도 나오면서 그나마 툴 사용이 쉬워지고 있지만 그럼에도 복잡하다. 툴 사용 숙련도 자체가 가지는 의미가 크다. 오랜 작업자만이 알 수 있는 부분들이 있다. 그래서 가끔 본질을 잊고 너무 툴에만 집중하는 것 같기도 하다. 그래서 나는 AI가 제발 툴을 쉽게 만들어줬으면 좋겠다. 뭐든 좋으니 제발. 쓸데없는 작업에 들이는 시간을 줄이고 싶다. 

불만을 뒤로 하고, 도형을 더블클릭하면 도형을 수정할 수 있다. 기본적인 도형 이외에 다른 모양이 필요하면 수정하면 된다. 간단한 아이콘은 이렇게 만들 수 있다.

이건 좀 숨겨져 있다. 다양한 오브젝트 모양을 만들려면 Boolean 기능을 써야 하는데 이게 강의 영상에는 바로 위에 있지만 내 버전에는 이렇게 숨겨져 있다. 이 기능은 대놓고 쓰지 말라고 약간 배제하는 느낌이다. 그만큼 좋은 무료 어셋이 많고 그걸 바로 가져와서 작업하는 게 편해 보이긴 하다. 그래서인지 일러스트레이터처럼 도형이나 아이콘을 만드는 기능은 주요 기능이 아니라고 말하는 듯하다. 

대신 기능 찾기는 잘 돼있다. 검색하면 해당 기능과 단축키를 바로 알려준다. 이 기능을 쓰는 게 위에서 한 것처럼 타고 들어가는 것보다 더 쉬워 보인다. 복잡한 툴일수록 통합 검색기능이 필수라고 생각한다. 자주 안 쓰지만 가끔 쓰는 기능은 어디 있는지 까먹기도 하고 그 정도 기능들은 꽁꽁 숨겨져 있는 경우가 많기 때문에 그걸 찾으러 들어가는 시간도 걸린다. 이렇게 검색 기능이 있으면 편하다.

보다시피 어셋 커뮤니티가 잘 만들어져 있다. 보통 웹사이트로 넘어가서 따로 찾아야 하는 경우가 대부분인데, 이렇게 프로그램 안에 박아 놓은 거 보면 잘 써먹으라는 뜻인 것 같다. 

커뮤니티 어셋. 굉장히 예쁘다.

컴포넌트 기능이다. 아이콘 몇 개를 묶어서 컴포넌트로 만들면 재사용할 수 있다. 블루프린트에서 함수로 만들어서 재사용하는 것과 비슷한 개념이다.  그러고 보니 디자인 파일을 블루프린트로 본다면 컴포넌트와 함수의 개념이 일맥상통하는 것 같다.

원본에 변형을 가하면 사본도 따라간다. 함수의 개념으로 생각하면 당연하다. 똑같은 함수를 공유하니 함수 내용이 바뀌면 따라 바뀐다. 3D 소프트웨어에서는 Instance로 복사하는 개념이랑 비슷하다. Instance로 복사하면 원본을 수정하면 사본도 수정된다. 서로 다른 여러 툴을 공부하면 이런 게 재밌다. 특정 기능을 이해하는 새로운 틀이 생긴다. 새로운 툴을 배울 때마다 이 틀은 계속 늘어나고 사고가 유연해진다. 그렇기에 굉장히 생뚱맞은 무언가를 많이 배우는 게 쓸모없어 보여도 그게 쌓이면 쌓일수록 다음 학습을 더 쉽게 만들고 생각을 더 넓게 만든다. 그렇게 패턴이 보이고 규칙이 보이면 여유로워지고 삶의 태도도 바뀐다. 다양한 경험이 주는 이점이다. 

 

재활용의 측면에서 컴포넌트 기능이 그룹핑보다 나은 것 같다. 그룹핑은 단순히 묶어주기만 한다. 이를 이동하거나 동일한 기준을 적용시키기에는 어렵다. 반면 컴포넌트로 만들면 컴포넌트를 라이브러리처럼 가져다 쓸 수 있고, 일괄 수정에 용이하다. 그렇지 않고 따로 하나면 있는 객체라면 그룹핑이 나을 수도 있다.

갑자기 블루프린트 하고 싶다. 피그마가 끝나면 할 거니까 걱정말자. ㅎ

스페이싱 기능은 두가지 이상의 오브젝트를 선택하면 우측에서 사용할 수 있다. 정렬은 기본으로 글자 크기에 맞게 틀 사이즈를 맞춰주는 기능도 편하다. 스페이싱으로 간격을 맞출 수 있다. 기본적으로 움직일 때도 그렇고 Alt를 눌러도 그렇고 스페이싱 관련된 정보를 많이 준다. 그만큼 간격이 UI에서 중요한 것 같다.

마스크 기능은 레이어 순서를 잘 정해주면 된다. 마스크 기능도 대놓고 나와 있지 않기 때문에 검색으로 찾았다. 원하는 영역만 이렇게 자를 수 있다.

스타일 기능이다. 문서를 길게 만들다 보면 글자의 크기를 통일하는 게 중요하다. 제목은 제목 크기와 색을 써야 하고 소제목은 또 따로 써야 한다. 일단 그걸 다 기억하긴 힘들다. 그렇다고 복사해서 쓰는 것도 꽤 귀찮다. 그럴 때 스타일 기능을 쓴다. 텍스트의 속성과 컬러의 속성을 스타일로 만들면 다음 텍스트를 쓸 때 그대로 적용시키기만 하면 된다. 참 편하다.