24.11.04.MON
안녕하세요 빵떡징입니다 :>
오늘은 세 번째 교육을 받았습니다.
시간이 잘 가는데 잘 가지 않더라고요. 모순적이죠?
실습은 재밌지만 몸이 피곤해서 그런 것 같습니다.
체력..절대 ... 지켜~~
수면 시간 부족 + 지하철 사람 역대급이라
도착했을 때 꽤나 너덜너덜 해졌는데욥..ㅠ0ㅠ
도착하자마자 쏘스윗 팀원이 건네준 견과류!!
고단한 아침의 단비~~~~~
덕분에 에너지 충전을 했습니다.
(이 글을 볼진 모르겠지만요. 우리 팀원들 최고입니다. 자랑하는 거 맞음.)
그리고 꽤나 힘차게 오늘의 강의 시작~~~ :>
Day3
Part1. 인턴 업무 질문 답변
Part2. 과제 Check~!
Part3. 피그마로 디자인 하기 실전편2
오늘 교육은 이렇게 진행되었는데요!
짧아보인다고요..? 아니요. 전혀요.
Part3 양이 정말 방대했습니다^ㅠ^
쉴 틈 없이 달렸어요! 하하! 차근 차근 정리해보겠습니다.
Part1. 인턴 업무 질문 답변
지난 주에 강사님께서 인턴을 나가게 될 회사에서 담당할 일들에 대해
궁금한 점이 있으면 남겨 달라고 하셨었는데요.
강의 시작 전에 질문들을 확인하고 대답을 해주셨답니다.
강사님께서 항상 언제든 질문해도 된다고 이야기 해주시고,
친절히 꼼꼼하게 알려주셔서 너무너무너무 든든해요!!!!
실제로 인턴 일 나가고도 질문 있으면 연락 달라고 해주시는
최강 친절 강사님~~~~ 꼼꼼하게 다양한 이야기를 해주셔서
새롭게 알게 되는 것들이 많았답니다 :>
Part2. 과제 Check & 2일 차 분량 마무리
지난 주말에 나왔던 과제들 확인하고, 어떻게 만들면 되는지 짚어보는 시간을 가졌습니다!
+ 지난 금요일에 조금 덜 나갔던 진도도 함께 나가면서 확인했어요!
1. Boolean Group 기능 배우기
2.Layout Grid
3. Boolean & Layout Grid 기능 활용하기(Icon 만들기, 과제)
1.Boolean Group
Illustrator의 Pathfinder 기능과 동일하지만 종류가 좀 더 적어요!
- Union selection 도형 합치기
- Subract selection 위에 있는 도형 빼기
- Intersect selection 교집합만 남기기
- Exclude selection 교집합 빼기
이렇게 네 가지가 있고, Illustrator와 다른 점은 적용 후에도 수정 가능하다는 거!
더이상 수정하지 않아도 된다면 Flatten selection을 적용해주면 됩니다.
2.Layout Grid 기능
Frame 생성 후 Frame 선택하고
오른쪽 하단의 Layout grid를 추가하면 됩니다.
Shift + G 단축키를 사용해 Grid 보기/끄기를 할 수 있어요.
3.Boolean & Layout Grid 기능 활용하기(Icon 만들기, 과제)
먼저 위에서 배운 두 기능을 활용해 Icon들을 만들어 보았습니다!
그리고 Boolean 기능 + Gradient 기능을 활용해서
지난주에 하던 작업에 추가 작업을 해보는 시간을 가졌어요.
Part3. 피그마로 디자인 하기 실전편2
1.Layout Grid System
2.Style
3.Publishing
4.Auto Layout
1.Layout Grid System
1-1.Colums & Rows
아까 위에서 Layout Grid 기능에 이은 Grid 유형들을 알아보고 적용해봤어요.
Colum = 열, Row = 행
1-2.Layout Grid Practice
Mobile, Tablet, Desktop 사이즈에서 일반적으로 사용하는그리드를 만들어봤어요.
1-3.Break Point & Containor
Break Point와 Containor에 대해서도 알아봤어요!
- Break Point: 반응형 웹사이트의 그리드가 변경되는 포인트
- Containor: 디자인이 들어갈 영역
- 그렇다면 Containor 사이즈는 어떻게 정하는지?!
정해진 규격 사이즈는 없고 디자이너가 정해야 하는데요.
웹 및 앱을 사용하는 사용자의 디바이스 사이즈를 파악해서 정한다고 합니다.
하지만 우리는 Data가 없잖아요?!-!!
이런 경우에는 평균적인 사이즈 알려주는 사이트 활용하는 방법이 있다고 해요.
gs.statcounter -> 참고해서 해도 되지만 데이터를 통해 파악된 사이즈로 정하는 게 더 좋다는 거! - 반응형으로 디자인할 경우 Break Point 마다 Containor 사이즈가 변경돼요.
2.Style
피그마에서는 자주 사용하는 텍스트, 컬러, 효과, 그리드 등을 "스타일"로 저장해서 사용할 수 있는데요.
이 스타일을 어떻게 생성하는지 배우고! 팀 프로젝트 파일을 만들어서 팀 스타일로 저장을 해보는 시간을 가졌어요!
팀이랑 같이 만들어 볼 수 있어서 더 즐거웠던 시간 - :>
2-1. Text Style 생성
2-2. Color Style 생성
2-3. Grid Style 생성
3.Publishing
팀에서 만든 Style을 Publishing 하고 다른 프로젝트 파일에 불러와서 사용해봤습니다.
3-1.Style Publshing
이렇게 하면 웰컴요정들이라는 파일에 저장되어 있는 스타일이 another이라는 파일의 스타일에 불러와집니다.
3-2.Component Publishing
먼저 Component를 만들고 Publishing 합니다.
그리고 Publishing한 Component를 다른 파일에서 불러오고 사용할 수 있어요!
4.Auto Layout & Constraints
그리고 드디어!!! 교육 3일차의 마지막 파트!!!!!
반응형 레이아웃을 만들기 위해 꼭 알아야하는
Auto Layout과 Constraints 기능을 배우는 시간을 가졌어요.
4-1.Auto Layout
정말..정말.. 쉽지 않았던 오토 레이아웃 시간...~
이것저것 실습해보면서 감을 잡아갔는데요.
힘들었지만!! 반응형으로 레이아웃 만드는 법을 배울 수 있어서 좋았어요!!
Auto Layout은
프레임 크기가 변하는 것에 맞춰 콘텐츠의 레이아웃이
자동으로 변하도록 설정하는 기능인데요! 반응형 레이아웃을 만들 때 사용됩니다.
적용 단축키 Shift + A,
해제 단축키 Shift + Opt + A
4-2.Constraints
그리고 Position의 Constraints를 이용해
콘텐츠의 위치를 일정하게 유지할 수 있도록 하는 방법도 배웠어요.
4-3.AutoLayout과 Constraints를 활용한 웹페이지 만들기
먼저 AutoLayout과 Constraints 둘 다 활용한 반응형 웹페이지 디자인입니다.
그리고 다음은 Constraints를 활용한 반응형 웹페이지 디자인입니다.
이 외에도 반응형 카드, UI 등을 디자인 하면서 실습하는 시간을 가졌어요!
정말 많은 내용이 한 번에 휘몰아쳤는데요..!! 정신 없는 만큼 시간도 잘 가고 즐거운 시간이었습니다.
하핫. 나온 과제들을 배운 내용 잊기 전에 해봐야할 것 같아요!!! 복습 필수!!!..진짜 필수!!!!
네 이렇게 오늘의 대장정도 끝이 났어요!!
오늘 정말 정리를 아주 열심히..해보았는데요!!
팀원들에게 정리왕으로..불리는 영광을 ~~ 호호..
정리왕이 되~~~~(돼인거 앎요~!)
앞으로도..열씨미 정리하며..해보겠슴다~!~!
피가 되고 살이 될 것이야~이야요~
두근두근요정단고ㅏ 함께해서 즐거웠던 :> .. 오늘 진짜 끝끝끝~!
요정들 앞으로도 화이팅탱구리~~~~
본 후기는 유데미 x 스나이퍼팩토리 콘텐츠디자인 인턴형 프로그램 2기 과정(B-log) 리뷰로 작성 되었습니다.
'TIL > Design' 카테고리의 다른 글
00.프로그램 지원/면접 준비/합격 후기_유데미x스나이퍼팩토리 콘텐츠디자인 인턴형 프로그램 2기 (6) | 2024.11.08 |
---|---|
05.❄️겨울이 코 앞에❄️ _ 유데미x스나이퍼팩토리 콘텐츠디자인 인턴형 프로그램 2기 (3) | 2024.11.07 |
04.고양이의 날 ꒰^⌯•ɷ•⌯^꒱ฅ _ 유데미x스나이퍼팩토리 콘텐츠디자인 인턴형 프로그램 2기 (11) | 2024.11.06 |
02.지옥철과 함께 _ 유데미x스나이퍼팩토리 콘텐츠디자인 인턴형 프로그램 2기 (10) | 2024.11.02 |
01.첫 만남은 아무래도 _ 유데미x스나이퍼팩토리 콘텐츠디자인 인턴형 프로그램 2기 (12) | 2024.11.01 |