드디어 피그마와 가까워지는~그런 순간..이 오려나?ㅎ
그래도 최근 들어 많이 보면서 예전보다 더 가까워진 것 같다(나의 개인적인 의견. 피그마 의견 없음ㅇㅇ)
오늘은~ 마이페이지 디자인을 해보았따!
하면서 디자인시스템도 만들고 다크모드도 만들고 하는!그런날~~~
오늘의 수업 요약
- 피그마 플러그인
- 마이페이지 디자인해보기
- 디자인시스템 만들기
요즘 강사님이 수업 시작할 때 동기부여 영상을 하나씩 보여주신다!
그래서 덕분에 많은 걸 알아가고 있어서 너무 좋은 시간이다 ㅋㅋㅋ
https://www.ted.com/talks/joe_gebbia_how_airbnb_designs_for_trust
How Airbnb designs for trust
Joe Gebbia, the co-founder of Airbnb, bet his whole company on the belief that people can trust each other enough to stay in one another's homes. How did he overcome the stranger-danger bias? Through good design. Now, 123 million hosted nights (and countin
www.ted.com
오늘은 에어비앤비 창립자인 조 게비아의 연설 강의였다.
에어비앤비의 디자인 방법이란 주제였는데, 낯선 것에서 위험하다는 본능을 이기고 새로운 방법을 추구할 수 있다고 한다.
자기가 가진 편견에서 나오고 싶은 사람들은 한번쯤 보면 좋은 영상이다~
그리고 피그마에서 자주쓰는 플러그인에 대해 배웠다!
플러그인
→ 피그마의 확장 기능을 쉽게 이해하고 활용하는 방법
→ 피그마에 없는 기능을 추가해주는 외부 도구로 작업효율과 결과물 퀄리티를 높여줌
→ 기본 기능만으로 부족한 작업을 빠르고 효율적으로 해결
→ 대부분의 플러그인은 무료로 사용 가능
자주 쓰는 플러그인
- Iconify (무료 아이콘을 바로 삽입 가능)
- Unplash (고품질 무료 이미지 바로 삽입 가능)
- Content Reel (더미 텍스트, 이미지, 아바타 등 자동 생성) >> 실제같은 데이터로 프로토타입 퀄리티 UP
- Stark (색상 대비, 접근성 관련 검사 도구) >> WCAG 기준에 맞는 디자인 확인
- Anima (디자인을 HTML/CSS/React 코드로 변환)
- Autoflow (플로우차트, 다이어그램 화살표 자동 생성) >> 개발자들에게 플로우 알려줄때 사용하기 편함!!
- Similayer (비슷한 레이어를 한번에 선택하는 도구)
- Chart (데이터 시각화 차트 생성 도구)
- Figmotion (애니메이션 프로토타입 제작 도구) >> 인터렉션을 효과적으로 전달
- Figmap (원하는 부분의 지도를 그려줌! But 영문만 지원…)
- Icons 8 Background Remover
- Beautiful Shadows (이쁘게 그림자를 만들어주는!)
- Auto Doc (디자인시스템을 자동으로 만들어주는 플러그인)
이런식으로 알려주셨다!
여기서 내가 찾은 플러그인은 Flamel 이란 플러그인 인데, AI가 자동으로 3D아이콘을 만들어주는 플러그인이다.
다만 하루에 5번만 가능하기에...(무제한은 돈내고...) 신중하게 사용해야된다ㅠㅠㅠ
이러고 그동안 배운 피그마 기능을 한번 더 복습해보았다!
난 어제 못들은 베리어블에 대해 다시 요청드려서 강의영상듣고 다시 들어서 그래도 이해가 매우 잘 됐다!
이제 사용 가능쓰~~~
오늘의 과제는 마이페이지 디자인을 하고 거기에 대한 디자인 시스템을 만들어보는 거였다.
무슨 주제로 만들어야하나...하고 고민하다가 어제 플스 게임 스토어 들어갔다가 마이페이지가 좀 불편한데? 하고 고민한게 생각나서
게임 온라인 스토어를 주제로 삼아보았다.
일단 아이패드로 로우 퍼넬리티 디자인을 해보았다.
젤 필요했던 게 유저가 접속을 했는지 안했는지 확인 안되서 그부분을 추가해보았다.
그리고 밑에 트로피 같은 것도 너무 나열되어있어서 포인트와 함께 한눈에 보이도록 크게 처리하였다.
그리고 제일 중요한 최근 플레이! 마이페이지에서 한번에 보고 싶었어...
그래서 만들어진 미드 피넬리티!
여기서 함정은 국기 넣는다고 해놓고 빼먹음...
근데 국기까지 들어가면 너무 정신이 없을 것 같아서 그냥 뺐다. 글로벌 대한민국~~짝짝짝~~ㅋㅋㅋㅋ
그렇게 만들어진 최종 디자인!!
원래 파랑으로 하려다가 보라색도 미래지향적인 느낌을 줄 수 있을 것 같아서 약간 파랑섞인 보라로 정했다.
베리어블을 이용해 다크모드도 만들라고 하셔서 다크모드도 만들어보았다.
확실히 브랜드컬러는 고대로 가되 프라이머리 컬러는 바꿔야 배경색에 비해 잘 보일 것 같아서 좀 더 밝게 수정하였다.
이렇게 디자인 완성~~~~
그리고 라이트모드/다크모드 로 나눠서 디자인시스템을 뽑았다.
플러그인 중에 DesignDoc 이라고 있는데 자동적으로 수치를 표시해줘서 매우 유용하게 활용하였다.
오늘 하루도 이렇게 완료우~~~~
수업 끝나고 뭔가 추가적으로 더 해보고 싶었는데 아직....두통이 다 나은게 아니라서ㅠㅠㅠㅠ
몸 사리면서 해야겠따...힝
'OZ코딩스쿨_프로덕트 디자이너 부트캠프' 카테고리의 다른 글
| DAY17_디자인과 언어가 같이 늘 순 없나...? (0) | 2025.12.21 |
|---|---|
| DAY16_피그마MAKE는 어떤걸까나~근데 왜이리 뭐뭐가 많지...@.@ (0) | 2025.12.21 |
| DAY14_두통으로 인한 결석..그래도 60퍼는 했따... (0) | 2025.12.17 |
| DAY13_디자인 시스템을 만들어보자! (0) | 2025.12.17 |
| DAY12_피그마 킵고잉 베이붸(블로그밀리지말자..힝) (0) | 2025.12.15 |