DAY 11 사전교육 마지막 주 시작..!!_유데미x스나이퍼팩토리 콘텐츠디자인 인턴형 프로그램 1기

이번주면 사전교육도 끝.

진짜 회사 인턴 생활 시작.

토요일에 팀원들끼리 사적으로 만나서 인턴 생활이 어떨지에 대해 얘기 나눴는데

오늘 새로 오신 강사님도 인턴 생활에 대해서 간략하게 말씀해주셔서

걱정이 잔뜩 늘어났습니다..

내가 잘 해낼 수 있을지 두렵기도 하고..

막연하게 회사 생활에 대해서만 생각했었는데 다른 분들이 인턴 생활을 하면서 어떤 일을 했는지 듣고 나니

내가 혼자서 그런 일들을 다 해낼 수 있을지,

모르는 건 어떻게 해야할지, 잘 적응할 수 있을지

여러 가지로 걱정이 오만가지네요

그래도.. 최선은 다 해볼 생각입니다.

열심히 해봐야죠.

이번주는 피그마 툴에 대해서 배울 예정인데

기초만 살짝 알고 있는 정도라서

알고 있는건 다시 한번 더 복습하고

새로 배운건 머리 속에 집어넣고

그렇게 마지막 주를 보낼겁니다 :)

---

Figjam

• 피그마의 새로운 디지털 화이트보드 도구
• 아이디어를 브레인 스토밍하고 정리

피그마를 사용해야하는 이유

1. 웹 기반의 온라인 툴
2. 윈도우와 맥 둘 다 사용 가능
3. 벡터 기반
4. 반응형 화면을 빠르게 제작
5. 실시간 협업
6. 다양한 프로토타이핑으로 테스트
7. 컴포넌트로 업무 효율 극대화
8. 코드 베이스 툴

내 폰 해상도 측정

디바이스 해상도 : 390px X 844px

픽셀 밀도 : 3

단축키

• 확대 +
• 축소 -
• 100% 보기 Ctrl+0
• 파일 내 모든 오브젝트 보기 Shift+1
• 핸드 툴 Spacebar
• 멘트 툴 C
• 커서 채팅 /
• 리네임 Ctrl+R
• 이미지 가져오기 Ctrl + Shift + K
• 크롭 : alt + 더블클릭
• 복제하기 : ctrl + d
• fill stroke 색 반전 : shift + x
• 불투명도 100% : 0
• 불투명도 50% : 5
• 불투명도 0% : 00
• 숫자 만큼의 불투명도 : 빠르게 숫자 type
• 이미지를 다른 이미지에 교체 : ctrl + shift + r
  • 복사하고 바꿀 이미지 클릭해서 사용
• flatten 합치기 : ctrl + e
  • 수정 안됨 주의
  • boolean 의 union 과 다름
    • 수정 가능

Frame

• save local copy : 클라이언트에게 원본 파일 전달할 때 사용
• page 새로 만들고 ‘ - (dash) ‘ 길게 사용하면 divider로 전환
• 파일 구조 : Team - Project - File - Page
• Scale-K : 문자나 도형 크기 조절할때 소수점이 생기지 않게 조절
• 피그마의 기본 단위 : Frame (F)
  • 프로토타이핑을 하기 위해선 프레임을 무조건 사용
• X와 Y 좌표가 있어야 코딩이 가능 —> 프레임 안에 반드시 넣어주기
• 그룹 했을때 오브젝트 하나를 선택할 경우, X와 Y 좌표가 나오지 않는다 —>그룹을 잘 사용하지 않는 이유

• 프레임 크기 변경 : Ctrl 누르고 프레임 드래그
• 반응형으로 만들어달라고 했을 경우, 모바일 (375) /테블릿 (768) /데스크탑 (1920) 3가지로 만들기
  • 하나 더 만들어달라할 경우, 랩탑 (1440) 추가

문자

• 행간 & 자간 - 픽셀 단위로 사용 안함 (숫자만 적었을때)
  • auto/percent 단위로 사용
    • 반응형 디자인할땐 percent 사용
• outline stroke : 문자 깰때 사용 —> 우클릭
• 웹사이트 본문 크기 : body 14 - 18 (주로 16, 연령층이 높아지면 17)
  • 10 이하의 크기는 크롬 브라우저에서 렌더링 안됨
• 모바일 글자 크기
  • 큰 제목 (Title) 20 - 34
  • 작은 제목 (Sub Title) 14 - 16

이미지 다루기

• 이미지 복사 (ctrl + shift + c) vs 속성 복사 (ctrl + alt + c)
  • 이미지 복사 —> 이미지만 복사
  • 속성 복사 —> 폰트 크기, 두께 등 속성들 다 같이 복사
• background blur
  • 이벤트 페이지의 글래스 모피즘 같이 사용
  • 앱 아이콘에 사용
  • 항상 fill의 opacity 30%로 낮춰야 효과 적용

도형 툴 알아보기

• shift : 가로 세로 같게 도형 생김
• alt : 클릭한 지점에서 부터 도형 생김
• shift + alt : 클릭한 지점에서 부터 가로 세로 같게 도형 생김
• 원 그리고 도형 편집으로 들어가서 점 하나 잡고 ctrl 누르면 꼭짓점이 생김
• mask = fill image
  • 마스크 : 도형 그리고 위에 사진 배치 후 우 클릭 use as mask
  • fill image : 이미지 불러와서 도형 클릭
• 오브젝트 선택하고 alt 누르고 다른 오브젝트에 마우스 올리면 간격 측정 가능
• 스마트 슬렉트
  • 이미지 2개 이상 선택 후 가운데 빨간 원으로 위치 변경
  • 이미지 2개 이상 선택 후 가운데 빨간 막대기 클릭하면 간격 조정
  • 이미지 3개 이상 선택 후 오른쪽 맨 밑 파란 아이콘 클릭하면 이미지 간격 일정
• Rename Layer (ctrl + R)
  • 이미지 2개 이상 선택 후 한번에 이름 변경
  • 대소문자 변경 —> current match
  • 넘버링 추가 —> number

아이콘

• 대부분 24 x 24 사이즈 프레임으로 시작
  • 20 x 20
  • 40 x 40
  • 48 x 48
• 내보내기
  1. flatten ctrl + e 해주기
     1. 프레임 제외
  2. 내보내기 할 오브젝트 선택
  3. SVG 로 내보내기 = 코드 형태로 내보내기
• 아이콘 만들땐 픽셀 단위로
• 두께를 일정하게 유지하기 위해 라인으로 된 아이콘은 outline stroke (ctrl + shift + e)를 사용해 면으로 변경

01

최종 발표 할 것인가 말 것인가.. 발표는 싫어요.. ㅎㅎ / 점심은 갈비탕

---

 

본 후기는 유데미 x 스나이퍼팩토리 콘텐츠디자인 인턴형 프로그램 1기 과정(B-log) 리뷰로 작성 되었습니다.

 

#콘텐츠디자인인턴형프로그램 #콘텐츠디자인인턴형프로그램1기 #유데미 #udemy #스나이퍼팩토리 #웅진씽크빅 #인사이드아웃 #콘텐츠디자인 #콘텐츠디자이너 #디자이너교육 #디자이너인턴