(DAY13) 피그마 오토레이아웃 써보기

안녕하세요 :) 오늘부터 본격적으로 피그마 툴을 활용하기 시작했습니다.

오늘 드디어 오토레이아웃을 알게 되었습니다 ! 알고보니 저는 그동안 피그마를 쓸 줄 모르는 거였네요 😂

 

 

 

---

 

 

✏️오늘의 학습

피그마 오토레이아웃, 프레임, 섹션 개념 알고 활용하기

실습 1) 웹 1개, 모바일 1개 비전보드 만들기 
실습 2) 포트폴리오 메인 1장~2장 만들기
실습 3) 앱 서비스 클론디자인 (오토레이아웃으로 덩어리감 확인하기)

 

 

 

 

📖오늘의 핵심

지금 우리는 미래의 점들을 연결할 수 없다.
현재와 미래가 어떻게든 연결된다는 믿음이 있어야 한다. 

지금의 내가 이해되지 않아도, 내 마음속 직감을 따라가는게 중요하다.

 

 

 

오늘은 스티브잡스가 대학 졸업생들 앞에서 스피치하는 영상을 보고 시작했습니다.

 

 

" 위대하다고 믿는 그 일을 하십시오.
그 일을 못찾았으면 최선을 다해 찾으세요.
그것을 계속 추구하고 안주하지 마십시오. 시간이 갈수록 나아질 것입니다."

 

 

" 죽음이 때로는 유용하다. 매일을 인생의 마지막처럼 살면 성공할 것이다.
죽음 앞에서는 모두 떨어져 나가고 정말로 중요한 것들만 남겨진다.

여러분의 시간은 한정되어 있다. 가슴 뛰는대로 사십시오.

가슴과 영감은 이미 네가 뭘 하고싶어하는지 알고 있다. "

 

너무 공감되고 인생에 적용할 좋은 말들이었습니다 🍀

 

 

 

📝수업 내용 메모장

 

피그마 open !
커뮤니티 안에 있는 자료들 활용하기
⚠️ 센스있게 못 만들거면 잘만들어진걸 갖다 쓰는것도 중요함

피그마 안에는 Figzam, Slide, Buzz등 다양한 기능이 있음
Slide - 요즘 스터디할때 쓰고 있음
Buzz - Canva같은 툴 ( 인스타툰 그릴때 화면비율 이걸로 활용해야겠다.)

피그마 단축키
R : 네모 그리기
ctrl +/-  : 화면 확대/축소
오브젝트 선택한 채 alt 누르고 다른 오브젝트에 마우스 커서 갖다대면 둘의 간격을 알 수 있음.

✨모든 작업을 할 때 좋은 디자이너는 4배수 or 8배수 수치로 작업해주는게 좋음
ex) 아이콘 24x24 안에 맞게 그리기

이미지 Fill 기능에 + 추가하면 검은색 씌울 수 있음

클리핑 마스크 해제 Tip

레이어에서 도형을 선택하고 Remove mask 해야됨

Section
Section에서 화살표 누르면, Ready to dev 로 바꿔주면 "여긴 디자인 완료됐어. 개발해도 돼" 라는 뜻임

A : 프레임 생성

ctrl + shift + ?  : 하단에 단축키 설명이 뜸
사용해본 단축키는 파란색으로 바뀜
도형에서 alt 누른채로 꼭지점 라운드값 한쪽만 줄 수 있음

★오토레이아웃 
Shift + A    (또는)    우클릭 → add auto layout

'뭐랑 뭐랑 한덩어리일까?' 를 생각하고 오토레이아웃으로 묶어주기

→ 연습이 필요할듯

 

(수업 실습한 화면)

 

 

Section 기능과 오토 레이아웃 기능을 제대로 써본게 처음이었다.

그동안 피그마를 어떻게 활용하는건지 감을 못잡았었는데 가려운 곳 긁어준 느낌!! 앞으로 작업할 것들이 기대가 되기 시작했다.

 

 

 

 

 

실습 1) 웹 1개, 모바일 1개 비전보드 만들기 

 

비전 보드 : 원하는 모습이 담긴 구체적인 삶을 그려낸 것들을 사진 콜라주한 것. 장기 비전이 핵심임.

💡비전보드의 의미를 한참뒤에 이해해서 수업 끝나고 따로 다시 만들었습니다

 

어떤가용 저의 비전

 

 

말로 설명할 수 없는 느낌을 이미지에서 찾으려고 노력했습니다.  원하는만큼 작업할 수 있는 공간이 있으면서 건강한 삶과 여유로운 무드를 유지할 수 있는 라이프를 꿈꾸며 콜라주해봤습니다 🍀

 

 

폰 배경화면 했어용

 

 

해외 젠지들 사이에서 비전보드 만들어서 배경화면 하는게 유행이라고 합니다✨ 멘토님 통해서 처음 알았네요

 

 

 

 

 

실습 2) 포트폴리오 커버 디자인 1장 or 2장 만들어보기

 

 

실습 결과물

 

레퍼런스 이미지

 

 

 

예전에 졸업사진 찍은게 안보여서 임의로 내 그림을 메인 사진에 넣었다. 멘토님이 사진 선택을 잘 해야 할 것 같다는 피드백을 주셨다. 나중에 저걸 웹 포폴로 만들 경우, 저 카드 형식에 프로젝트가 들어갈거고, 클릭하고 싶게 시선이 자연스레 집중되어야 하는데 카드 3개가 좀 작은 듯 하고 집중이 잘 안된다고 했다. 뭔가 웹사이트는 한 번도 안만들어봐서 그런지 감이 잘 안왔다. 만들어봐야 늘 것 같다. 💡멘토님이 포폴 멘트 좋다고 해주셨다. 쫌만 더 다듬으면 쓸 수 있을 멘트일 것 같다.

 

 

 

 

실습 3) 앱 서비스 클론디자인 (오토레이아웃으로 덩어리감 확인하기)

 

 

 

 

(왼쪽) 실습 결과물, (오른쪽) 밸크샐러드 앱 금융쇼핑 탭

 

 

 

다른 과제에 시간을 많이 쏟아서 앱 클론은 많이 못했다.

오늘 배운 오토레이아웃으로 어느 요소끼리 정보가 묶여 있을지를 기준으로 덩어리감만 확인하는 정도로 진행했다.

생각보다 덩어리감 파악하는게 쉽진 않았다. ㅜㅠㅜㅠ

고2때 미대 준비하려고 기초디자인 실기했던게 생각났다. 이래서 덩어리감, 주제부 연습을 시키는구나..!

좀 더 연습이 필요할 것 같다. 특히 Frame 안에서 width값에 Hug/Fill를 설정하는게 어느건 잘되고 어느건 잘 안됐다. 내가 마우스로 클릭하는 순서가 살짝 꼬이는 것 같다. 내일 더 연습할 시간이 있겠지?

 

---

 

💡 오늘 피그마 실습 위주로 진행했다.

예전부터 피그마 책 안에서도 오토레이아웃을 이론으로 접해보긴 했었는데 이렇게 어떤 방식으로 쓰고 활용할 수 있는지는 오늘 처음 겪어봤다. 확실히 멘토님이 직접 하는걸 보는게 책으로 공부하는 것보다 훨씬 공부가 됐다. 특히 Section 개념은 있는지도 몰랐고, Ready to dev 설정 기능이 있는줄도 몰랐었다. 이거 알고 진짜 가려운 곳을 시원하게 긁어준 것 같았다.ㅋㅋㅋㅋㅋㅋㅋ 스터디 끝나고 내친구 AI 개발자에게 냅다 전화해서 이 기능 알았냐고 자랑하듯 떠들떠들 했다 😝 아직 피그마 사용 관련해서 가려운 곳이 많은데 앞으로 수업을 통해 가려운 곳을 내가 전부 해결했으면 좋겠고, 해결할 수 있을거라는 기대감이 차오른 날이었다.