DAY 12 인턴 기업 정보에 대한 문자가 왔습니다..!!_유데미x스나이퍼팩토리 콘텐츠디자인 인턴형 프로그램 1기

오전에 갑자기 단체로 시끌벅적해졌는데

그 이유가 바로.. 인턴 기업 정보에 대한 문자가 왔습니다..!!

시간, 장소, 인턴 업무 내용에 관한 문자가 와서

다들 같이 확인해본다고 시끌시끌

이 문자를 받으니 더 실감이 나더군요

강사님께서 업무 내용 스케줄 표 보고 어떨지 대충 알려주시는데

정말 다양했습니다.

발표하는 사람들도 있었고 인쇄 디자인도 하는 사람도 있었고

uiux 제작하는 사람들까지 다양했어요

오늘은 정말 하루종일 인턴에 관한 이야기만 나눴습니다

점심 시간에도 쉬는 시간에도 ㅋㅋ

오늘도 역시 강의는 피그마 툴에 대한 내용이었는데

오토 레이아웃이 알듯말듯해서

과제를 하면서 연습을 더 해봐야할듯합니다 :)

---

단축키

• 면 선 교체 : shift + x
• 레이어 하나씩 위로 : ctrl + ]
• 레이어 하나씩 아래로 : ctrl + [
• 레이아웃 그리드 만들고 보이기 : shift + G
• asset panel : alt + 2
• 오토 레이아웃 : shift + a
• 오토 레이아웃 해제 : shift + alt + a / ctrl + backspace
• 부모요소 레이어 선택 : shift + enter
• 자식요소 레이어 선택 : enter

펜 툴

• 기준점 anchor point : 패스를 고정하는 기준점
• 세그먼트 segment : 기준점 사이 선
• 방향 선 direction line : 세그먼트의 기울기 조정하는 선
• 방향 점 direction point : 방향 선을 움직여 곡선 형태를 조정하는 점
• 패스 path : 기준점과 세그먼트 전체
• 점 추가 후 빼주기
  • pen tool 상태에서 alt 누르고 ‘ - ‘뜨면 클릭
• bend 밴드
  • 각진 모서리를 둥글게 변경
  • 한쪽만 변경할 경우, ctrl + alt 누르고 방향 선 조절

레이아웃

• 정보 전달을 빠르게 전달하기 위해 사진, 영상, 글, 아이콘 배치
• 디자인의 기본 틀
• baseline grid : 본문에 글이 많을 경우
• manuscript grid : 페이지 위에 텍스트가 놓인 그리드
• modular grid : 웹사이트 디자인 할 때
• 그리드 용어
  • container
  • column
  • gutter : 컬럼과 컬럼 사이의 간격
  • margin : 좌우 여백
• layout grid = 안전 영역
  • grid
    • 아이콘, 앰블럼 만들때
  • column (주로 많이 사용)
    • 앱 만들때
    • 반응형 디자인 할땐 type - stretch 많이 사용
  • row
  • 24px 아이콘 —> 안전영역 2px
• material design 의 권장 가이드라인
  • 모바일 360 : 4컬럼
  • 태블릿 600 이상 : 8컬럼
  • 데스크톱 1280 이상 : 12컬럼
  • https://m2.material.io/design/layout/responsive-layout-grid.html#columns-gutters-and-margins
• 브레이크 포인트
  • 반응형 웹사이트의 중단점
  • = 각각의 사이즈 별로 디자인을 만들어두고 웹사이트, 테블릿, 모바일 등 보여주는 형식
  • column layout grid
    • type - stretch
    • margin = (frame - container)/2
      • container —> 정해져있는건 아님, 큰 회사일 경우, 사용자 조사 결과를 보고 정함
    • gutter
• 모든 요소들을 그리드에 맞추진 않음 —> 자유롭게 사용

스타일

• 텍스트, 컬러, 그림자, 그리드 등을 저장해서 스타일로 만들어 모두 동일하게 작업할 수 있게끔 하는 기능
• Color Style / Text Style
  • 해당 요소의 스타일 아이콘 클릭 후 오른쪽 위쪽 + 클릭해 추가
  • gray color scale은 100 단위로 끊어서 사용

오토 레이아웃

• 자동으로 레이아웃이 변한다는 뜻
• 콘텐츠를 감싸는 프레임이 자동으로 확대, 축소 —> 반응형 레이아웃 만들때
• 오토 레이아웃 해제 할때 주의점
  • ctrl + shift + a 로 해제하면 프레임이 생김
  • ctrl + backspace 로 해야 프레임이 사라짐
• 프레임으로 하던 오토 레이아웃으로 하던 상관없지만 처음부터 끝까지 같은 형식으로
• 오토 레이아웃은 작업 시간이 빨라짐
• shift + enter : 부모요소 레이어 선택
• enter : 자식요소 레이어 선택

• 반응형으로 만들때 오토 레이아웃 요소들 사이 간격은 반드시 AUTO
• canvas stacking
  • 여러 오브젝트가 겹쳐져있는것
  • first on top / last on top
  • EX) 프로필 여러개
• absolute position = ignore auto layout
  • frame 패널 우측 상단에 있음
• 오토 레이아웃 사용
  • 버튼 만들때
  • 패딩 넣고 싶을때
  • 반응형 레이아웃 만들때
  • 오브젝트의 방향이 다를때

01

오토 레이아웃이 제일 헷갈리는 기능이구만요.. / 운 좋게 가보고 싶었던 태국 식당에 자리가 있어서 에피타이저부터 먹어보기

---

 

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

 

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