드디어 피그마 학습 시작이다... 이게 뭐라고 굉장히 긴장된다.
우선 예전에 피그마를 쓸 일이 있어서 (내가 뭘 만들지는 않았고 다른 분들이 디자인 하시는 걸 실시간으로 봤었다.) 계정을 만들었던 적이 있으니까 그 계정으로 다시 로그인했다. 혹시 몰라서 데스크톱 앱도 깔았다.
유명하디 유명한 바로 그 피그마는 웹 기반의 디자인 툴이라고 한다. 그래서 구지 앱을 설치 할 필요가 없고 인터넷 연결만 되면 어디서든 작업이 가능하고 실시간으로 협업도 가능하다. 보통 디자인이나 프로토타입을 제작할 때 주로 쓰인다. 구체적으로는 ux/ui 디자인, 아이콘 제작, 상세페이지 제작까지도 할 수 있다.
기업에서 피그마를 주로 쓰는 이유가 협업 기능이 좋고 다양한 플러그인을 지원한다는 것인데 자동 저장과 버전 기록으로 이전 상태로 쉽게 복구할 수 있는 장점도 있다.
빠밤! 요렇게 로그인 후 파일들을 만들었다. 파일에 처음 접속하면
이 화면을 볼 수 있다. 파일명도 저렇게 설정해놨다.
가장 하단에 인터페이스가 있고 그것들을 활용해 무언가를 만든다. 편집을 하는 상황에는
요렇게 인터페이스가 한줄 더 생성되고 강의 들으면서 열심히 이것저것 건들여보니까
이런 결과물들이 나왔다. 다루기 어려운 것 같으면서도 또 은근 간단하기도 한데 이거 실습하는 과정을 타임랩스로 찍는게 아니면 어떻게 한 컷씩 다 첨부를 하지???
피그마는 하나의 파일 안에 여러 페이지들을 만들 수 있고 페이지 안에 섹션과 프레임, 레이어들을 추가할 수 있다.
그게 이런식으로 좌측에 쌓인다. 쌓인 섹션과 프레임 등등이 화면상에는 이렇게 나타나고 가장 위에 있는 항목이 이미지 상에서도 맨 위에 존재한다. 만일 크기가 작은 도형이 프레임 밑에 깔리면 그 도형은 프레임에 가려져 볼 수 없다.
이미지 속 도형들처럼 처음에는 네모나 원형, 세모여도 둥근 네모로 만들거나 다각형으로 변형시킬 수 있고 특히 원형의 경우 마치 원형 도표처럼 만들 수 있다. 발표할 때 활용하면 딱이겠는데?
화면을 늘리거나 키우는 것도 다 단축키가 있다. 예를 들면 화면을 키울 땐 z를 누르면서 마우스 커서를 클릭하면 되고 줄이고 싶다면 z+option키를 누르면서 커서를 클릭하면 된다. 처음에는 이거 몰라서 엄청 헤매다가 결국 트랙패드로 늘리고 줄이고 했었다. 역시 피그마도 주로 사용하는 단축키를 알아둬야 작업 시간을 줄일 수 있을 것 같다.
제공해주신 강의는 구 버전의 피그마인지 지금이랑 스타일이 달라서 해당 강의를 촬영하신 곳에서 유튜브에 올리신 2025 버전으로 다시 보고 공부했다. 근데 그것도 지금꺼랑 좀 다르다. 그새 바뀐 부분들이 있나보다... 유튜브 싹 보고 강의 본 뒤에 노션에 있는 실습을 할 수 있을 것 같다.
