콘텐츠 마케팅 스쿨 스터디 노트 ep.09
콘텐츠 마케터에게 꼭 필요한 Figma
피그마는 처음들어보는 툴이었다.
협업에 아주 편리하다는 장점을 가지고 있는 툴이고, 해외에서 시작되어 지금은 우리나라에서도 잘 사용되는 툴로 알려져있다고 한다.
기본적인 기능은 포토샵, 일러스트와 크게 다른점은 없었다.
도형 툴, 펜 툴, 마스크 기능, 선 툴, 패스파인더 등 단축키나 인터페이스가 조금 달라서 어도비 툴에 익숙해져있는 사람이라면 조금 불편하다고 설명을 했지만, 나는 모두 처음 배우는 상황이라 큰 문제가 되진 않았다.
오히려 직관적인 인터페이스에 호감을 느끼는 것 같다. 하지만 포토샵, 일러스트, 피그마 셋 다 다룰줄 알아야 편리한 협업이 가능하다고 느낀다.
피그마의 기능 중 가장 매력적인 부분은 플러그인이다. 피그마의 커뮤니티 브라우저가 우리의 작업 속도를 비약적으로 높여주는 아주 좋은 툴인 것 같다. 무에서 유를 창조하는 것이 아닌, 사람들이 좋아하는 것을 빠르게 만들어야 하는 목적에 아주 부합하는 방식이다.
unsplash의 무료 이미지와 AI를 활용한 사람의 얼굴을 불러오는 등 다양한 기능이 있다.
피그마의 정렬과 레이아웃
프레임은 다양한 사용자별 기기에 맞춰 고를 수 있다.
Constraints 기능을 사용하면 프레임의 변형에 따라 반응하여 원하는 디자인을 만들어낼 수 있다.
Auto layout 기능은 원하는 간격을 지정한 뒤, 아이콘의 추가나 텍스트의 길이에 따라 반응하여 도형 및 프레임의 넓이가 늘어나고 줄어드는 기능이다.
참고 디자인 사이트: https://m3.material.io/
그리드 기능을 사용해 보기 좋은 배치와 크기의 디자인을 할 수 있다.
기기별 그리드 설정방법
아이콘 그리드 값강의를 들으며 처음 듣는 용어들이 참 많았다.
Magin 값, Gutter 값
다양한 기기의 화면 크기별로 Collum의 개수와 값들이 다르다. 이를 계산하기 위한 사이트도 있다.
반응형 웹 그리드 계산 사이트: http://gridcalculator.dk/
컴포넌트와 베리언트
4개로 나뉘어진 다이아몬드는 컴포넌트, 속이 비어있는 다이아몬드는 인스턴스이다.
컴포넌트는 원본이고, 인스턴스는 복제품이며 컴포넌트를 수정하면 인스턴스에 같이 반영되는 특징을 가지고 있다.
인스턴드를 개별적으로 수정하게 되면 독립적인 성질을 가지게 되며, 컴포넌트는 Assets에 저장된다.
따라서, 컴포넌트를 지우게되면 Assets에서도 사라지므로 따로 페이지를 만들어 저장해둔다.
베리언트는 수많은 버튼 컴포넌트를 쉽게 관리할 수 있는 기능 중 하나이다.
베리언트 생성아이콘이 없는 것과 있는 것, 큰것과 작은것 일반모드와 야간모드 등 여러가지 Properties 옵션을 통해서 설정하고 인스턴스로 가져와 원하는대로 바꿀 수 있다.
인스턴스의 기능프로토타입
컴포넌트 스위치 인터랙션
버튼 인터랙션
캐러셀 인터렉션
모달창 인터렉션
내비게이션 드로워 인터렉션
스크롤링 인터렉션
등
다양한 방법의 프로토타입 실행 방법을 배웠다. 이를 직접 글로 작성해서 설명하기는 굉장히 복잡하여 꼭 강의가 필요한 부분인 것 같다.
이런 다양한 인터렉션 기능을 활용하여 실제 콘텐츠가 어떻게 보여질지 테스트할 수 있는 좋은 툴이다.
1월 셋째주 시간관리를 대 실패하여 강의가 많이 밀렸다..주말동안 보강하고 다음 주 강의듣는 시간을 더 집중해야겠다.
“이 글은 제로베이스 콘텐츠 마케팅 스쿨의 강의 자료 일부를 발췌하여 작성되었습니다.”
