블로그
전체 4#카테고리
- UX/UI
#태그
- 디자인시스템
- 피그마
- 워밍업스터디
- 워밍업클럽
- Figma
- 디자인
![[인프런 워밍업 스터디 클럽 1기] 디자인 4주차 마지막 발자국](https://cdn.inflearn.com/public/files/blogs/7c52fffe-edcb-4e00-8f9c-1d2706eb7d35/fd.png?w=260)
2024. 05. 26.
0
[인프런 워밍업 스터디 클럽 1기] 디자인 4주차 마지막 발자국
학습 내용 요약.이전에 만든 컴포넌트를 이용한 최종적으로 b2b, b2c 페이지 그리고 모바일 ott 페이지를 만들었다.Day17. 기타 베리어블 모드 활용 개념 익히고 실습해보기Day18. B2B 이커머스 어드민 페이지 만들기Day19. B2C 이러닝 페이지 만들기Day20. 모바일 OTT 서비스 페이지 만들기 DAY21 : Q&A 마지막 온라인 세션┗ 챗지피티를 이용한 디자인 시스템, 그 외 플러그인 추천 등이번에 진행한 마지막 온라인 세션은 챗지피티를 이용한 디자인 시스템 제작과 관련해 진행되었고 그 다음 디자인시스템 제작에 도움되는 플러그인 등 다양한 이야기를 들을 수 있었다. 그 외에도 볼드튜터님이 제작하신 피그마로 활용한 다양한 UI 프로토타이핑을 보며 피그마 활용은 훨씬 더 다양하게 이용될 수 있다는 것을 또 다시 느꼈다. 마지막 회고지난 번에 한 번 1회독을 마쳤지만 강의에서 들었던 것을 실무에서 제대로 활용하기에 부족함을 많이 느꼈는데 이번 스터디를 통해서 배리어블, 기타 플러그인을 제대로 공부했다는 생각을 했다. (아직은 많이 부족하지만!) 무사히 완주했다는 나 자신에게 칭찬해주고 싶고, 추후 피그마 업데이트 되는 부분을 잘 따라가며 실력을 더 쌓아야겠다.
UX/UI
・
디자인시스템
・
피그마
![[인프런 워밍업 스터디 1기 디자인] 3주차 발자국 및 회고](https://cdn.inflearn.com/public/files/blogs/8aeb06fd-7219-44b1-b3be-349f22d9b601/fd.png?w=260)
2024. 05. 19.
0
[인프런 워밍업 스터디 1기 디자인] 3주차 발자국 및 회고
학습 내용 요약.이번 주는 지난 주를 이어 컴포넌트 제작을 마무리 했다 !배리어블에 만들었던 dark모드로 전환하며 명암 대비 체크까지 완료했다.Day12. 피드백 컴포넌트 전체 만들어보고 점검하기Day13. 네비게이션 컴포넌트 만들어보기Day14. 네비게이션 컴포넌트 나머지 만들고 마지막 점검하기Day15. 베리어블 다크모드 개념을 익히고 활용해보기 DAY16 : Q&A 온라인 세션┗ 타이포그래피이번 온라인 세션은 피그마에서 최근 업데이트 되었던 타이포그래피 배리어블에 대한 내용을 주로 다루었다. 3주차 회고 잘 한 점:이번 주도 3주차에 대한 미션을 모두 다 마무리 했다. 🫡 아쉬운 점:온라인 세션으로 진행했던 타이포그래피 파트가 처음 접하다보니 약간 어려웠다! 여러번 접하며 얼른 습득해야겠다 4주차 이전 다짐:마지막 주차인 만큼 앞서 배웠던 부분도 같이 정리해가며 마무리해야겠다.!
UX/UI
・
디자인시스템
![[인프런 워밍업 스터디 1기 디자인] 2주차 발자국 및 회고](https://cdn.inflearn.com/public/files/blogs/e63cdbc7-0dc8-4b6f-9d5b-b982fb45e2a1/fd.png?w=260)
2024. 05. 12.
1
[인프런 워밍업 스터디 1기 디자인] 2주차 발자국 및 회고
학습 내용 요약.이전 시간에는 베리어블들을 만들었다면, 이번 주부터는 베리어블을 이용해 컴포넌트를 제작했다.Day8. 피그마 컴포넌트 기초 배우고 입력 컴포넌트 만들어보기Day9. 입력 컴포넌트 나머지 만들고 마지막 점검하기Day10. 디스플레이 컴포넌트 만들어보기Day11. 디스플레이 컴포넌트 나머지 만들고 마지막 점검하기 2주차 회고 잘 한 점:직장과 병행하면서 차질없이 2주차 입력 컴포넌트와 디스플레이 컴포넌트 모두 만들었다.!1회독 때는 만드느라 급급했는데 다시 스터디를 통해 2회독 째 진행하니 확실히 개념들이 이해되는 듯하다 🙂 아쉬운 점:제일 처음 입력 컴포넌트 제작 시 label에 check와 radio 등 모두 묶어 제작했더니 인스턴스에서 약간 문제가 생겼었었고다시 제작하느라 약간의 뒤처짐?이 있었다ㅠ.ㅠ! 또 마지막 contrast 체크를 못 했는데 다음 주에 같이 진행해야 한다..! 3주차 이전 다짐:다음 주에 석가탄신일인 휴일날에 강의를 들으면서 3주차 미션도 얼른 끝내야겠다 !
UX/UI
・
워밍업스터디
・
디자인시스템
・
피그마
![[인프런 워밍업 스터디 클럽 1기 디자인] 1주차 발자국](https://cdn.inflearn.com/public/files/blogs/198fff23-71e2-445f-8cea-2c6122dba701/fd.png?w=260)
2024. 05. 06.
0
[인프런 워밍업 스터디 클럽 1기 디자인] 1주차 발자국
사수가 없는 스타트업에서 1인 디자이너로 근무하고 있어 ‘스스로 배우고 성장해야 한다’는 생각을 늘 가지고 있다. 작년 하반기에는 회사에 적응하랴 이 외 공부계획에도 많은 욕심을 부린 탓에 결과가아쉬웠다. 그래서 연말 피드백/올해 계획을 세우면서 든 목표설정은 일정기간동안 한 두가지에 집중하기로 했다. 올 해 초에 디자인 시스템 볼드님 강의를 들었지만 강의 끝까지 완주하면서 아직 100% 습득이 안 된 느낌이 들었다. 그 와중에 인프런 워밍업 스터디 클럽 1기를 모집한다는 글을 봤고, 강제성이 필요한 나는 바로 신청했다. Day1. OT5월이 시작되기 이전 첫 프로그램은 OT였다. 볼드 강사님 그리고 같은 1기 스터디 분들과 함께 색다르게 피그잼에서 OT가 진행됐는데 재미있었고, 한시간이 순삭으로 지나갔다. 좋다고 생각했던 부분은 이 스터디가 끝난 다음 자신에게 어떤 보상을 줄건지 써내려가는 시간이 있었다. 다른 분들이 쓴 글도 재미있게 봤고 오티가 끝나고 나서도 끝나면 어떤 걸 보상으로 줄 지 계속 머릿속에 맴돌아서 설렌 출발을 할 수 있었다. 학습 내용 요약.본격적으로 컴포넌트를 만들기 이전, 재료들을 준비하는 베리어블을 만들었다.Day2. 피그마 베리어블과 토큰, 디자인 시스템 이해Day3. 색상 스타일과 베리어블 등록Day4. 간격, 타이포그래피, 아이콘 등록Day5. 그림자, 반응형 기준점, 기타 베리어블 등록Day6. 만든 베리어블로 디자인 가이드 만들기(가이드 제작을 진행하면서 반응형 기준점에 대한 가이드를 빼먹었는데 얼른 수정해야 한다..🫢 ) Day7. Q&A 온라인 세션강의를 들으면서 union selection과 flatten selection의 차이를 느끼지 못했는데 이번 온라인 세션에서 볼드님이 간지러웠던 부분을 확실하게 정리해주셔서 좋았다! 또 이외에 네이밍 짓는 법, 피그마 업데이트로 좀 더 편하게 작업하는 방법 등 유용한 정보들을 많이 얻어가는 시간이였다. (+ 온라인 세션 들으면서 웃겼던 순간! 네이밍에 대해 스터디분들 다 함께 투표하는 시간이 있었는데 모두 default에 투표하니 다른 수강생분이 enabled에 저 밈을 두고 가셔서 너무 웃겼다. ) 1주차 회고 잘 한 점:디자인 시스템 이외에도 생성형 AI 강의도 계획대로 모두 완수한 점! 🫡디자인 가이드를 처음 만들어봤는데 생각보다 시간이 오래 걸렸다. 하지만 완성했다는 것에 칭찬해주고 싶다! 아쉬운 점:디자인 가이드를 더 한 눈에 들어오게 보완해야 할 듯하다. 또 직장과 병행하다 보니 시간이 부족해 강의를 몰아 들었다. 보완할 점: 출근하기 전 오전 시간을 좀 더 활용할 수 있도록 시간 계획을 다시 세워야겠다.피드백에 대한 중요성을 많이 느끼는데, 다음 발자국 작성 시간을 뜻깊게 써야겠다.
UX/UI
・
피그마
・
디자인시스템
・
워밍업클럽
・
Figma
・
디자인




