블로그 모아보기 - 인프런

[인프런 워밍업 스터디 1기 디자인] 1주차(스타일 가이드 만들기) 발자국

월요일부터 본격적으로 시작한 인프런 워밍업 스터디!나는 피그마 베리어블을 활용한 디자인 시스템 구축하는 강의를 선택했다! 이 강의를 선택한 이유현재 다니고 있는 회사에는 디자인 시스템이 없다. 없는 상태에서 일을 하다 보니 페이지마다 디자인들이 일관성 없이 만들어진 것을 보고 얼른 디자인 시스템을 도입해야겠다는 생각이 들었다…하지만 나는 디자인 시스템을 처음부터 구축해본 적은 없어서 강의를 알아보던 중에 인프런에서 워밍업 스터디를 한다는 것을 보았다. 때 마침 베리어블을 활용하여 디자인 시스템 구축 방법을 볼드 강사님의 피드백을 받으면서 배울 수 있는 강의가 있어 당장 신청했다! 1주차 강의 후기1주차 강의는 스타일 가이드 만들기이다.월요일은 피그마 베리어블과 디자인 토큰 / 디자인 시스템 개념 이해하기라는 이론 강의였다. 디자인 토큰과 시스템의 개념을 알고 스타일 가이드를 만드니까 더 이해하기 쉬웠다.화요일부터 실습 강의가 들어가는데 동영상만 봤을 때는 음 이 정도면 쉬워서 미션도 금방 끝나겠네! 하면서 목요일부터 두 개씩 해야지! (멈춰 이 좌식아..!) 하고 집에서 쉬었는데 그런 생각은 하지 말았어야 했다..목요일 퇴근 후 직접 피그마를 켜서 따라해보니까 생각보다 오래 걸리고 결국 미션을 하나 밖에 못 했다..😭그래서 미션이 밀려서 금요일부터 토요일 새벽까지 미션3까지 하고 잤다ㅎ.. 😮‍💨근데 여러 인터넷 강의들을 들어봤지만 이번 인프런 워밍업 스터디는 확실히 다른 분들과 같이 공부하다 보니까 학원 다니는 느낌이 들어서 너무 좋았고 무엇보다 볼드 강사님이 내 미션을 보고 코멘트도 해주셔서 너무 좋았다!! 인프런에서 만나기 전에 인스타에 좋은 디자인 정보들을 올려주셔서 팔로우하면서 일 할 때 참고 많이 했었는데 이렇게 실시간으로 피드백을 받으니 너무너무 좋았다!! 2주차 강의 목표2주차 강의 때는 자만하지 말고 매일매일 미션을 해야겠다는 생각이 들었다. 그래서 2주차 강의 목표를 새워본다면매일 미션 완수하기출근하면서 강의듣기일단 이렇게 2개를 목표로 완주까지 달려볼 것이다!!

UX/UI･워밍업클럽･디자인시스템･볼드･피그마･워밍업스터디

1

0

[인프런 워밍업 클럽 2기] 프로덕트 디자인 3주차

3주차 발자국 기록 정신 차려보니 어느덧 워밍업 클럽도 절반 이상 넘어가고 한 주 정도 남았네요! 출퇴근 전•후로 열심히 하면 수료식 전까지 커리큘럼 마칠 수 있겠죠..? ㅋㅋㅋ - 이번 주 기록 ☑ Input 컴포넌트와 Display 컴포넌트 제작 버튼, 라벨, 텍스트 박스 등 기본적인 컴포넌트를 쭉 만들었다.볼드님 알려주신 대로.. 그대로 잘 따라 한 것 같은데가끔씩 인스턴스 조작해 보면 나는 왜 안 되는지는 의문이다..ㅎㅎ그래도 1기 때와 다르게 이제는 멀티 에딧을 잘 쓸 수 있어서중간에 많은 요소를 한 번에 수정할 때 시간이 많이 줄고 편해진 것 같다. - 회고 이번 주 평일에는 바빠서 커리큘럼 계획대로 전체는 못하더라도 매일 조금씩 한 개의 컴포넌트라도 꾸준히 만들어보려고 했습니다.그래도 아직 많이 남아서 워밍업 클럽을 위해 다음 주 주말 전체를 반납해야 할 것 같은데요..ㅎㅎ마지막까지 힘내서 완주해 보겠습니다!

UX/UI･uxui･figma･피그마･프로덕트디자인･볼드･배리어블

0

[인프런 워밍업 클럽 2기] 프로덕트 디자인 2주차

2주차 발자국 기록 워밍업 클럽을 두번째한다고 첫번째 보다 쉬울꺼라고 생각했던 스스로를 반성합니다..ㅎ회사 프로젝트 때문에 바빠져서 오히려 더 쉽지 않네요..이번주는 피그마 작업은 많이 못해서 토요일 진행했던 라이브를 복습&회고해 보겠습니다. - 이번 주 기록 ☑ 챗gpt를 활용해서 디자인시스템 문서화하는 법개인적으로는 ant design system이 잘 만들어졌다 평소에 생각하는데라이브 투표 결과, 많은 분들이 꼽은 좋은 디자인시스템은 KRDS와 G마켓이었다.두 개의 특징은 컴포넌트가 잘 만들어져있기도 하지만 문서화 역시 잘 되어있다는 것. - 문서화를 할 때 주로 정리하는 요소들 : Spec, States, Usage, Anatomy, Behaviour, Best Practice, Accessibility, Responsive Design, Research and Testing, Props 프롬프트를 사용하면 빠르고 편하게 문서화를 할 수 있는데- 프롬프트를 입력할 때 신경 쓸 것 : CIGO.- 마지막으로 진짜로 내용이 맞는지 점검해 보고 자연스럽게 만드는 작업이 꼭 필요. - 회고 1기 때와 비교했을 때 잘 만들었다고 생각하는 디자인시스템이 매우 뚜렸하게 나와 신기했습니다.작업은 이번 주 못한 부분까지 다음주는 2배로 열심히 하겠습니다…!

UX/UI･uxui･figma･피그마･프로덕트디자인･볼드･배리어블

0

[인프런 워밍업 클럽 2기] 프로덕트 디자인 1주차

1주차 발자국 기록 지난 인프런 워밍업 클럽에 이어서 2번째로 참여하게 되었습니다.1기 때 양이 너무 많아서 힘들긴 했지만.. 그래도 워밍업 클럽 덕분에 완강과 실습을 모두 해낼 수 있었다고 생각합니다. 이번에는 복습 겸 BX를 담아 체계적으로 만들어보려고 합니다. 더 나아가서 개발자분들과도 협업하여 디자인 시스템을 만들 수 있으면 그 부분까지 확장시켜볼 계획입니다. - 이번 주 기록 ☑ 디자인 토큰이란?- 디자인 토큰은 전자에 해당- 디자인 시스템의 기본 구성 요소- 작고 반복 가능할 수 있는 디자인 결정들을 기본 디자인 에셋으로 저장해서 활용- 토큰은 디자인 시스템 관리와 수정에 용이하고 일관성 및 멀티 브랜드 관리에 도움 ☑ 디자인 시스템이란?재사용 가능한 컴포넌트, 패턴 그리고 가이드 🪄 추천 플러그인 : Styles to variable- 스타일을 배리어블로 만들어줌- collection 이름을 정할 수 있음https://www.figma.com/community/plugin/1253669344925342575 🪄 홈페이지 : batch styler- 스타일 일괄 수정할 수 있음https://www.figma.com/community/plugin/739825414752646970 - 회고 이번 주는 회사에 적응하느라 하루 이틀씩 밀렸습니다.주말까지 채워서 작업을 진행했는데 다음 주는 매일 조금씩 해 보도록 하겠습니다.

UX/UI･uxui･figma･피그마･프로덕트디자인･볼드･배리어블

0

[인프런 워밍업 스터디 클럽 1기_디자인] 4주차 마지막 발자국

인프런 워밍업스터디클럽 디자인 1기 4주차 마지막 발자국을 남긴다.그간 다른 인강 사이트의 여러 강좌를 들어봤지만, 볼드 강사님의 피그마 강의가 가장 인상깊게 남았다.피그마가 업데이트 될때마다 강사님께서 정성스럽고 디테일한 자료를 공유해주셨고,강의 실습에 적용해보고 한단계 더 성장할 수 있는 계기가 되었다.물론, 실무에서도 당연히 잘 사용할 수 있을것 같아서 너무 뿌듯하다. 4주차 마지막 실습1. 모든 컴포넌트를 조합하여 페이지화2. Mobile/ Tablet/ Desktop 반응형 적용3. Light/ Dark 모드화 이 모든 작업은 이 강좌의 주제인 베리어블에서부터 시작된다.볼드님 강의를 들으면 모든 UI 화면을 손쉽게 전환할 수 있다.앞으로는 강사님 말씀대로 이 모든 베리어블이 데이터베이스화 되서 엑셀로도 연동되어UI 화면을 직접 수정하지 않아도 해당 베리어블의 값만 수정하면 디바이스별/ 모드별 화면이 단 한 번의 클릭으로 짜잔! 바뀌게 될 것이라는 점에 백퍼 공감!!!피그마의 최신 업데이트 관련해서 공부해보고 싶은 사람은이 강좌 무조건 추천한다!인프런 워밍업스터디클럽에 처음 참여했는데 너무 유익한 시간이었다.다음 기회가 있다면 다시 참여해보고 싶다. 회고칭찬 미션 모두 클리어강좌 완강아쉬움피그마 업데이트본을 전부 반영하지 못한 점개선점 컬러 베리어블에 이어 폰트 베리어블을 디자인시스템에 적용해서 디벨롭!

UX/UI･인프런･워밍업스터디클럽･디자인1기･볼드･피그마･디자인시스템

0

[인프런 워밍업 스터디 클럽 1기_디자인] 2주차 발자국

디자인 1기 | 김혜경 베리어블 등록하기(1)color(text/bg/border/icon/shadow)- 강의 내용과는 달리 Primary-Color 변경 및 .theme 컬러 추가로 다른 베리어블에도 적용하느라 시간이 좀 소요됨베리어블 등록하기(2) - spacing베리어블 등록하기(3) - border(radius/ width)베리어블 등록하기(4) - effect(blur/ opacity)베리어블 등록하기(5) - typography(mobile/desktop)- 피그마 최신 업데이트 > 폰트가 베리어블로 처리 가능하다는 점을 감안해서 폰트 베리어블에 도전!!회고칭찬 컬러 베리어블 커스터마이징폰트 베리어블 추가아쉬움미션 클리어 분발!!개선점 폰트 베리어블 설정을 제대로 추가한건지 체크 필요!

UX/UI･인프런･워밍업클럽･피그마베리어블･디자인시스템･볼드

0

[인프런 워밍업 스터디 클럽 1기_디자인] 1주차 발자국

디자인 1기 | 김혜경 4/26 두근두근! 오리엔테이션!황금같은 토요일 저녁 8시에 모두들 모여서 동기부여 뿜뿜!!! Mission(1) - Color Variables.primitive, .theme, sematic 으로 구성된 컬러 베리어블 등록!유용한 플러그인을 사용하여 빠르게 컬러를 생성/등록/문서화 할 수 있었다.볼드님의 지식을 내 것으로 만드려면 복습/예습만이 최선이다.각 미션별로 체크할 수 있도록 이렇게 세심하게 신경써주시니 정말 더 열심히 할 수 밖에 없다. 강의 내용과는 조금 다르게 Primitive 컬러를 내 나름대로 커스터마이징해서 진행해보았다.각 부서별 사람들과 공유하도록 플러그인을 사용해서 문서화하니 시간도 절약되고 유용했다.컬러 베리어블을 등록하고 나면, 이제 한숨을 돌릴 수 있다.회고칭찬 강의 완강!스터디 1/2/3기에 이어 이번 워밍업클럽까지 참여!강의 내용과는 다르게, 베리어블 커스터마이징아쉬움개인사정으로 첫 주 진도는 여기까지라 반성 또 반성 ㅠ 개선점 최신 업데이트된 폰트 베리어블에 도전해보기로!!잠을 조금 줄여서라도 새벽/저녁 시간에 두 타임으로 나눠서 분발!!

UX/UI･인프런･워밍업클럽･디자인시스템･볼드

0