콘텐츠 마케팅 스터디 노트(240312-14/7)
피그마(1)
01_Figma 소개와 설치
01. Figma 소개
1) 사용 기업이 늘어나고 있는 추세
2) 모바일, 웹사이트 중심의 ui/ux 디자인 지원
3) 리서치, 유저 플로우, 아이디어, 브레인 스토밍 등에도 사용 가능
4) 하나의 파일에 여러 명의 작업자가 수정 가능
5) 인터넷이 연결된 어느 곳에서도 손쉽게 접속 가능
02. Figma 설치
1) 피그마 검색 후 pricing에서 유료 혹은 무료 버전 선택 후 다운로드
02_Figma 인터페이스
01. 브라우저 모드와 데스크탑 모드
1) recents: 최근 열었던 파일
2) drafts: 피그마나 피그잼 파일 새로 만들기 혹은 이미지 파일 불러오기 가능
3) community
- 필요한 것 다양하게 다운로드 가능
4) team project
5) 검색으로 찾기 가능
6) 데스크탑 모드
- 인터넷 연결되어있는 경우에는 브라우저 모드와 동일
- 한 곳에서 작업을 하면 바로 반영됨
- 데스크탑 모드에는 홈 버튼이 있다 정도의 차이
02. 에디트 모드
1) move
- 오브젝트를 자유자제로 크기 변경
- shift 키를 누르고 움직이면 비율 유지해서 크기 조절 가능
2) scale
- 오브젝트를 비율은 고정한 채로 크기 변경
3) 손가락 툴
- space바가 단축키
4) selection 툴
5) ?
- 화면에 관련된 단축키 알아보기 가능
03_형태 만들기
01. 기본 도형
1) ctrl shif z는 앞으로 돌아오는 단축키
2) frame 툴
- f 누르기 혹은 좌측 상단 바에서 누르기
3) 도형 툴
- 드래그하는 방향만큼 크기가 조절되어서 그려짐
- 마우스에서 손을 뗄 떼 무브 툴로 자동 이동되는 게 불편하면
> keep tool selected~ 누르기
- shift 키를 누른 채로 드래그하면 정사각형만 그려짐
- 코너의 둥글기 값: 모서리 둥글기
> 코너값을 우측의 상세 바에서 수치로 조절 가능
> alt 키를 누르고 조정하면 누른 점의 값만 조절 가능
- 원의 정중앙 오른쪽에 있는 점
> 원의 아크 형태를 변경할 수 있음
- 회전시키는 점
> 바운딩 박스가 기울어지지 않게 오브젝트 자체를 돌릴 수 있음
- 중앙에 있는 점
> 원을 선으로 만들어주는 역할
> 부채꼴 모양으로 만들어주기도 함
02. 다각형과 별
1) 다각형 툴을 단축키 x
2) 오른쪽에 있는 점
- 최대 60각형까지 만들 수 있는 카운트 점
- 위로 올릴 수록 수가 올라감
- 카운트라는 옵션으로 직접 숫자 조절도 가능
3) 별 툴
- 왼쪽에 있는 점
> 도형을 뾰족하게 만드는 정도
4) 다리의 길이 조절로 설정 바퀴 모양, 상장 모양 등 만들기 가능
5) 화살표
(
- 다양한 형태로 조절 가능
03. 선의 형태
1) alignment 사용
- inside가 제일 사용에 좋음
- outside일 때 join값 정하기 가능
2) dash
- 같은 옵션이 선 설정값에 따라 다르게 보임
3) dash 1 gab 100
4) dash는 custom도 가능
04. 펜 툴의 활용
1) 단축키 p
2) shift 키 누르고 수직이나 수평 만들기 가능
3) 처음 시작한 지점을 누르면 더 선이 생겨나지 않음
4) path를 따라나오지 않게 하려면 esc 누르기
5) done을 눌러야만 eidt 편집 모드를 나감
6) 무브 툴로 선 중앙에 커서를 가져다대면 새 앵커 포인트가 생김
7) 중앙이 아닐 경우 path가 따라나오는데 esc를 눌러서 막으면 됨
8) 블렌드 툴
- 점을 클릭하면 곡선으로 변하고 다시 누르면 직선으로 변함
- 핸들러로 조절 가능
- alt 키를 누르면 핸들러 한쪽만 조절 가능
9) 물방울 만들기
- 원을 만든 상태에서 점 하나를 드래그, 핸들러로 안 쪽을 모아서 뾰족하게 만들기
- ctrl 키 누르고 직선으로 만드는 블렌드 툴로 직선으로 만든 뒤 아래로 드래그
05. 불리언과 마스크
1) 두 개의 오브젝트를 같이 선택했을 때만 불리언 그룹이 나타남
2) union selection
- 두 개의 오브젝트가 하나로 연결됨
- 하나를 더블클릭하면 크기를 조절하거나 옮길 수 있음
3) subtract selection
4) intersect selection
- 교집합
5) exclude selcetion
- 겹치는 부분 빼고 나머지
6) 마스크: 이미지가 앞으로 오게 해야함
- ctrl alt m
04_그래픽 스타일의 활용
01. 컬러와 그레이디언트
1) fill 부분에 하나 더 추가하면 검은색 투명도 fill이 추가됨
2) 이용해서 색 믹스 가능
3) 스포이드 단축키: i
4) color style
- 같은 스타일을 사용한 컬러는 스타일 색상으로 지정했다면 한 번에 색상 수정 가능
5) 그레이디언트
- 닷 추가, 색상 간격, 각도 조절 가능
- 원의 경우 중심점 변화 주기, 크기 변화로 3d 느낌 그레이디언트 가능
02. 도형과 이펙트
1) drop shadow
- 블러와 스프레드 값 조절
2) inner shadow
- 면의 영역에만 영향을 미침
3) layer blur
4) background blur
- 뒤에 이미지가 보이지 않게 함
5) effects 쌓기
- 섀도우를 추가로 계속 만들기 가능
6) effect style
- effect 값 스타일 저장 가능
7) copy properties
- 속성 복사
- 속성이 다른 것들을 한꺼번에 복사하면 복사되지 않음
03. 이미지와 플러그인
1) shape tool에서 place image
2) ctrl shift k
3) 도형을 그린 상태에서 도형 안으로 클릭하면 이미지가 그 안으로 들어감
4) 이미지 움직이는 법
- fill에서 crop 클릭
- 바운딩 박스 움직이지 않기!
- 내부를 드래그해서 이미지 위치 바꾸기
5) tile 형태
6) image에서 옵션
- exposure, contrast, saturation, temperature, tint, highlights, shadows 등
7) multiply, color burn, lighten
8) over lay, soft light, hard light
- 이미지를 살짝 조정해서 해야 효과가 잘 드러남
9) 플러그인
- 브라우저 플러그인
- ui faces
04. 스타일의 정리
1) 666666
- 텍스트 문장에 사용
2) 333333
- 타이틀에 많이 사용
3) ededed
- 백그라운드에 많이 사용
05_정렬과 레이아웃
01. 프레임과 레이어
1) 다양한 템플릿을 통해 프레임 그리기 가능
2) 일대일 크기: ctrl 0
3) 프레임 안에 프레임 생성 가능
4) clip content 켜놓고 작업하는 걸 권장
5) 레이어는 캔버스 외부, 내부에 모두 그리기 가능
6) ctrl [ ] 한 칸씩 레이어 순서 조절 가능
7) 한꺼번에 이름 변경하는 법
- shift 키 누르고 전체 선택 후 ctrl i
- 순서: 역슬래쉬d+ / $nn
02. 정렬과 스마트 셀렉션
1) 우측 상단에 있는 정렬 옵션
2) tidy up
- 간격을 똑같이 맞춰 줌
3) 여러 오브젝트를 선택할 때 오브젝트 안 빈 원
- 수평, 옆으로 옮길 때는 자리 이동이 됨
- 간격 조절 선택
03. 컨스트레인트
(캡처 삽입)
1) 화면이 같이 늘어나도록 반응형 만들기
2) 커서 있는 곳 constranits
- left 누른 상태에서 shift 누른 상태로 right 누르면 같이 늘어남
- 왼쪽 아이콘은 왼쪽에, 오른쪽 아이콘은 오른쪽에
- 중앙 로고는 중앙에 항상 배치
- fix positon when scrolling
04. 오토레이아웃
1) auto layout
- shift A, 누르면 프레임으로 바뀜
- 헤딩값이 유지되면서 텍스트를 입력해도 자동으로 조절됨
- Shift alt A는 오토 레이아웃을 해제하는 기능
- 오토레이아웃은 같이 사용 가능
- ctrl D: 이전 작업 반복
- hug contents 누르면 추가하는만큼 칸이 일정하게 늘어남
05. 레이아웃 그리드
1) 우측 바에 레이아웃 그리드
2) 상세 설정으로 사이즈와 컬러 조절하기
3) columns
- 핸드폰
> 4개의 카운트
> 16의 마진
> 거터는 원하는 대로(16, 20 등)
> 컬럼 70
- 웹
> 12개의 카운트
> 200의 마진
> 거터 28
> 컬럼 61
4) 좌우 가이드 그리드로 만드는 방법
- 카운트 1, 마진 16, 거터 0
5) gridcalculator.dk
6) 60, 24, 16 크기
- 컬럼 30, 하이트 30, 마진 30, 거터 0
느낀 점:
며칠 면접 준비와 번아웃으로 페이스를 다시 원래대로 되돌리지 못 해 생각했던 만큼의 달성치는 못 들었지만, 주말을 이용해서 더 보충하기로 했다. 피그마는 사용 방법에 크게 어려운 게 있는 것은 아니지만 처음 접해보는 툴이므로 직접 따라하며 두 배 가까이의 시간이 걸렸지만 기초를 잘 다질 수 있는 시간이었다. 금요일에는 피그마를 마무리하고, 토요일과 일요일에는 실전 포토샵을 학습할 생각이다. 파이팅!
