[금]▸ 이번 주 학습내용 관련 WIL

WIL (Weekly I learned)

1. 지난 일주일을 돌아봄으로써 나의 현재 상태를 파악
     내일배움캠프 3주차가 끝났다. 
   3주차 까지 들으면서 드는 생각은 컴포넌트, 컴포넌트 프로퍼티, 베리언트, 오토레이아웃 개념이 가장 핵심적이고 중요하다는 생각이 들었다. 이 네가지에 대해서 다시 정리 할 필요가 있고 적용시키고 연습을 많이 해야겠다는 생각이 든다. 캠프를 진행하면서 데일리 미션이 주어지고, 강의 진행을 한다. 이 두가지 갈래를 6시간 안에 끝내려면 뭔가 한가지를 포기해야 하는 느낌이 든다. 피그마 구현에 집중해서 파고들어 기능을 파악하는 주력이 있다면, 전체적인 미션 수행과 수강 진행 속도를 신경을 고루 써서 진도에 신경을 쓰는 주력이 있다고 생각한다. 현재 나는 후자로 진행중이다. 때문에 피그마 툴에 대해서 깊이있게 파고 들지 못했다. 본캠프 때는 피그마 툴을 주력으로 생각하고 집중해서 파고 들 생각이다. 
   
    이제 마지막 주만 남았다. 마지막 주는 복습을 위주로 강의를 듣고 정리할 생각이다. 데일리 미션도 살펴보면서 핵심적으로 모르는 부분을 짚고 넘어가야겠다.
   (개인 일정으로 월~목 수업은 불참하지만 주말을 이용해서 채우기로...)
   
   
   <4주차 정리>
   
   [수업목표]
   - 피그마 플러그인과 커뮤니티 소스를 활용해서 자료를 시각화 할 수 있습니다.
   - 팀원들과 실시간으로 협업하는 방법에 대해 알아봅니다.
   - 피그마 프레젠트로 센스 있게 발표하는 기술을 배웁니다.
   
   [4-2 Plugin]
   포트폴리오를 만드는 이유는 시각 자료로 잘 정리해서 보여주는 목적이다.
   피그마의 ppt - 커뮤니티 소스를 간단하게 수정하면 빠르게 자료를 만들 수 있다.
   노가다 없이, 디자인 감각 없어도 예쁘고 빠르게 자료를 만들 수 있다. 무료이고, 아이콘, 인포그래픽 도형, 텍스트 스타일, 목업이미지 등을 만들 수 있다.
   
   Tip! 피그마 커뮤니티에서 영어로 자료를 검색해 본다. ex) portfolio
   +Mockup : 무료 이미지를 빠르게 가져와서 퀄리티를 높일 수 있다.
   +Unsplash : 프로필 화면을 빠르게 수정할 수 있다.
   +Wireframe Designer : 빠르게 와이어프레임을 가져와서 시각화 할 수 있다.
   
   [4-3 Icon 빠르게 교체하기]
   +Material symbols : Icon 빠르게 가져오기
   +product planner : 포지셔닝 맵
   +Charts : 차트를 빨리 
   +Color palettes : 컬러 매치가 좋은 프러그인
   
   [4-4프레젠테이션 모드]
   프레젠테이션 모드 알아보기-플로우 설정, 옵션설정, 뒤로가는 방법
   하는 목업이미지로 보여지게 하는법
   프레젠테이션 모드는 재생버튼
   
   Tip! Frame → PDF로 묶어서 내보내기 할때
   File → export to frame 하면 하나로 묶인 PDF로 내보내기 가능, 피그마 원본 내보내기 하면 용 완전 큼, 이미지로 저장 후 → PDF로 묶는 것을 추천
   (1) 출력 할 프레임을 복사 
   (2) 새로운 페이지 생성 후 붙여넣기
   (3) File - export to frame PDF
   
   [4-5 피그마로 협엽하는 방법]
   
   (1) 피그마 코멘트
   상단에 멘트 아이콘 클릭, 또는 단축키 c (comment)/ @특정 사람을 태깅해서 코멘을 남길 수 있음/ 코멘이 완료되면 resolved를 누르고 \show resolved comments를 누르면 완료된 코멘도 볼 수있음
   (2) share-링크공유(copy link) 에딧(can edit)권한 주기
   - can view 읽기 전용
   - can edit 수정권한도 포함
   - Link to selection 선택한 프레임이 바로 보이도록 공유
   (3) 작업링크&프로토타입 링크공유
   프로토타입 모드에서 share prototype - copy link/ 이미지 다운 불가
   
   [4-6네이밍 정리 Tip!]
   
   (1) 피그마 자체 기능 - Rename(ctrl+r)눌러서 레이어 명칭 수정하기 기능 
   $n-숫자 자리수
   $nn-3자리 숫자가 증가(1→2→3)
   $nnn-세 자리 숫자가 감소(3→2→1)
   (2) 네이밍 정리 소소한 팁
   컴포넌트를 잘 사용하는 레이어명 정리 방법: 레이어명에 ‘/’를 사용하면 폴더로 구분됨. ex)Icon/Favorite, Icon/Star
   자주사용하는 요소들은 컴포넌트로 지정해두고 ‘/’로 구분하기
   (3) 레이어 쉽게 열고 닫는 tip : 레이어창 선택, ctrl+세모버튼
   (4) 그룹or프레임 안에 담겨있는 요소들 보고싶을때는: 레이어 클릭 후 엔터!
   (5) 지저분한 레이어 한방에 정리하는 tip: 자체 기능 - Tidy up(피그마 자체 기능)
   (6) 인터페이스가 죄다 사라졌어: show/ hide UI 기능 (ctrl+\)(ctrl+shft)
   
   [4-7단축키 모음]
   
   Tools 
   V 이동하기
   C 코멘트 추가, 보기
   Shift+P 펜 툴
   R 연필 툴
   O 원 그리기
   L 선 그리기
   F 프레임 생성
   S 슬라이스 생성
   I 스포이드 툴
   
   Text Align
   T 오토레이아웃 만들기
   Ctrl+Shift+V 스타일에 맞춰 붙여넣기
   Ctrl+B 볼드
   Ctrl+I 아탤릭
   Ctrl+U 밑줄
   Ctrl+Alt+L 왼쪽 정렬
   Ctrl+Alt+R 오른쪽 정렬
   Ctrl+Alt+T 중앙 정렬
   Ctrl+Alt+J 양끝 맞추기
    
   Arrange
   Shift+A 오토레이아웃 만들기
   Alt+Shift+A 오토레이아웃 해제
   Ctrl+] 앞으로 가져오기
   Ctrl+[ 뒤로 보내기
   Ctrl+Alt+] 맨 앞으로 가져오기
   Ctrl+Alt+[ 맨 뒤로 보내기
   
   Object
   Ctrl+G 그룹
   Ctrl+Shift+G 그룹 해제
   Ctrl+Shift+H 숨기기/나타내기
   Ctrl+Alt+Shift+L 전체 잠금 해제
   Ctrl+Shift+L 잠금/잠금해제
   Ctrl+E 병합
   Ctrl+Shift+O 윤곽선으로 변경
   Alt+Double click 이미지 자르기
   
   Copy & Paste
   Ctrl+C 복사
   Ctrl+X 잘라내기
   Ctrl+V 붙여넣기
   Alt+Drag 선택 복사
   Ctrl+Alt+C 속성 복사
   Ctrl+Alt+V 속성 붙여넣기
   
   Essential
   Ctrl+K 링크 생성하기
   Ctrl+Shift+X 선을 그어 지우기
   Ctrl+ Shift+7,8 번호, 구분점 매기기
   

 
2. 더 나은 다음 주를 만들기 위해 어떤 부분을 어떻게 채워나갈지 고민하는 것
 2주차, 3주차 웹/앱 클론디자인 작업을 찬찬히 살펴보면서, 모르는 부분에 대해서 정확하게 인지하고 이를 채워가는 부분에 주력해야겠다. 작업물 진행 당시에는 시간에 쫒겨서 마무리짓지 못하고 종료시킨 의문점들이 몇 가지가 있다. 이를 채울 수 있는 마지막 주가 되길 바란다. 

"궁금한 점이 있으면, 책상 앞으로" - 송민진(UXUI_1기)