OZ코딩스쿨_프로덕트 디자이너 부트캠프

DAY11_피그마 심화고고링!222(사실 어제가 1이어따)

sohnsy0621 2025. 12. 15. 00:44

 

피그마 배우기 4일차! 룰루랄라~~~

강사님이 진도가 빠르다고 느끼셨는지 자세한 설명과 천천히 설명을 하시기 시작했다!

강사님 감사하고..매우 고맙습니다..!! 바로 반영이 되다니...이야...

 


오늘의 수업 요약

- 마스터, 인스턴스 복습

- 오토레이아웃 다시 알려주심!

 

오늘은 수업 처음부터 토스 프로덕트 디자이너 헤드인 강수영님의 강연영상을 보여주셨다.

토스도 처음부터 잘하지 않았다 라는 강연이었는데

https://www.youtube.com/watch?v=ZwWtk-l1tC8

 

토스가 갓 나왔을때부터 봐왔던 사람으로써 프로덕트 디자이너 팀의 실험과 노력이 헛되지 않았음을 느꼈다.

정말 처음에 토스가 나왔을때 공인인증서 없이 계좌이체가 되었기에 신뢰도가 바닥이었기 때문에...

신기능때문에 가입했던 사람들도 많지만 결국 보안이 문제였기에 다들 긴가민가했었다.

그치만 현재 이들의 수많은 노력으로 지금의 토스를 만들어놨기에 진짜 대단하다고 느꼈다.

근데 왜 내부직원들이 이직만 하면 그렇게 말이 많아지는..지...큼큼큼

이건 뭐 다른 문제고..! 하여튼 영상을 보면서 일에 대한 열정을 배우고 싶었다.

 

영상을 다 보고 오토레이아웃과 마스터,인스턴스에 대해 다시 배우기 시작했다.

그리고 오토레이아웃에서 ignore auto layout을 하면 오토레이아웃을 무시한채 배치가 된다는 것을 알았다..!!!

어쩐지 뱃지를 어떻게 다나 했떠니 이런 기능이;;; 키야

 

 

오늘의 과제는 배운걸 복습하고 그걸 이용해서 홈화면을 만들어보고 설정페이지를 클론 디자인해보는거였다!

 

이렇게 다양하게 실습을 하니 안익힐 수 가 없네!!ㅋㅋㅋㅋㅋㅋㅋ

 

홈화면 / 설정페이지

 

홈 화면이랑 설정페이지도 클론 디자인 완료우~

첨에 설정페이지는 어떻게 다 오토레이아웃을 해야되나 하고 고민했는데

일단 기본적으로 들어가는 폼을

(텍스트 / 뱃지 / 버튼) , (아이콘/텍스트/텍스트/버튼) , (아이콘/텍스트/토글) 이렇게 3가지로 나뉘는 걸 확인하고

variants로 만들어두었다. 그리고 추가 요소인 뱃지나 텍스트 부분을 boolean으로 꼈다가 뺄 수 있게 설정해두었다.

아이콘의 경우 instant swap으로도 가능하겠지만 variants로 여러개를 만들어서 내부에서 따로 조정이 되도록 만들고

토글도 온/오프가 되도록 설정해두었다.

확실히 설정쪽은 규격화된 화면이어서 오토레이아웃과 베리언츠를 활용해 만들면 편하겠다는 생각이 들었다.

이렇게 오토레이아웃과 베리언츠와 한발짝 가까워진걸로~~~