![[인프런 워밍업 스터디 2기 디자인] 4주차 발자국](https://cdn.inflearn.com/public/files/blogs/e6ac50be-9a62-4ee5-a2ec-6217c56a8590/IMG_3535.png)
4주차 마무리 하기 4주차에는 베리어블을 활용한 페이지를 만들었습니다. 기존에 반응형 페이지를 만들때 example responsive collection과 새로운 responsive collection의 베리어블을 혼용해서 그랬는지 header/learn 의 mobile 버전을 만들 때 충돌이 있어 시간이 소요되었습니다. 결국 example respons...
![[인프런 워밍업 스터디 2기 디자인] 3주차 발자국](https://cdn.inflearn.com/public/files/blogs/3c9a929f-b30a-45b8-a5e1-ce843ac2e615/IMG_3535.png)
3주차를 돌아보며 벌써 3주차라니, 시간이 너무 쏜살같이 지나간 한 주 였습니다. 이번 주는 네비게이션 컴포넌트와 베리어블을 활용해 다크모드를 적용해 보는 시간이었습니다. Keep 제시간에 과제를 제출하려 노력하였습니다. Problem 반응형을 mobile로 디자인 해보는 과정에서 많은 시간을 할애하였습니다. Try 반응형 mobile 페이지를 마무리하겠습...
![[인프런 워밍업 스터디 2기 디자인] 2주차 발자국](https://cdn.inflearn.com/public/files/blogs/244da12b-e977-4ecb-a485-f1d5fc8cb1a8/IMG_3535.png)
2주차를 돌아보며 이번 주차는 alert 부터 toast, spinnerloader, slot, modal까지 전반적인 Feedback 컴포넌트를 만들어보는 시간이었습니다. toast에 장문을 입력했을 때 auto layout된 상태여서 컨테이너 박스 만큼 공백이 고정되어 있는 이슈가 있었고, 이럴 때는 layout 을 해제하고 group 으로 감싸 해결하...
![[인프런 워밍업 스터디 2기 디자인] 1주차 발자국](https://cdn.inflearn.com/public/files/blogs/cd7dbf42-11c3-4c55-a88f-59071f72431d/IMG_3535.png)
1주차를 돌아보며 1기를 수료 후 눈 깜짝할 새 시간이 지나 2기 스터디까지 참여하게 되었다. 여러 생각 끝에 2기를 참여하게 된 만큼 다음 주부터는 꼭 미루지 않고 과제를 해결해야겠다. 오랜만에 강의를 다시 들으니 재미있기도 하고 여전히 시간이 오래 걸려 괴로운 부분도 있었다 😂 Keep 미션을 제시간 안에 마무리 하였음 Problem Feather 아...
![[인프런 워밍업 스터디 1기 디자인] 수료 후기](https://cdn.inflearn.com/public/files/blogs/c29870bd-f71e-4ed8-a550-4d61de852b6f/fd.png)
이런 점이 좋았어요 일반적인 스터디는 스터디원들만 참여하는 과정인데, 인프런 워밍업 클럽은 지식공유자 주도 프로그램으로 질문공간이 무한으로 열려있고 추가로 준비해 주시는 특강이 많은 도움이 되었습니다. 함께하는 러너 분들의 발자국을 보면서 내가 놓쳤던 부분에 대해 다시 회고해 볼 수 있는 기회였습니다. 구체적인 계획과 정해진 완주 기간이 있었기 때문에 혼자...
![[인프런 워밍업 스터디 1기 디자인] 4주차 발자국](https://cdn.inflearn.com/public/files/blogs/5625d837-4106-4e06-8a1f-3be62b91cf8a/fd.png)
4주차 / 5.20 - 5.23 / 페이지 만들기 기타 베리어블 모드 활용 개념 익히고 실습해보기 B2B 이커머스 어드민 페이지 만들기 B2C 이러닝 페이지 만들기 모바일 OTT 서비스 페이지 만들기 KEEP, PROBLEM 강의를 듣기 전에는 4주차 [페이지 만들기]가 가장 고난처럼 보였지만 미리 만들어둔 컴포넌트와 배리어블을 활용하니 뚝딱뚝딱 비교적 빠...
![[인프런 워밍업 스터디 1기 디자인] 3주차 발자국](https://cdn.inflearn.com/public/files/blogs/f5de1a93-3ee4-48b1-ae68-292599f5b194/fd.png)
3주차 / 5.13 - 5.17 / 컴포넌트 만들기 2 3주차 돌아보기 이번 주는 네비게이션 컴포넌트를 만들어보고 다크모드를 적용해 보는 시간이었습니다. 다크모드 적용 후 색상 대비를 점검하는 과정에서 웹 접근성 기준에 충족하지 못한 부분이 있어 수정에 시간이 걸렸습니다. 그날 주어진 강의를 수강하고 해당 과제를 마무리하고자 한 점은 좋았지만, 아직 컴포넌...
![[인프런 워밍업 스터디 1기 디자인] 2주차 발자국](https://cdn.inflearn.com/public/files/blogs/d0157c04-8d36-4371-aa95-09823be5eeeb/fd.png)
2 주차 / 5.7 - 5.10 / 컴포넌트 만들기 1 KEEP 컴포넌트 만드는 게 점점 익숙해지고 있다. 2주차 할일을 3주차로 미루지 않고 끝까지 해냈다 😊 강의를 먼저 쭉 듣고 두번째는 음소거 해 놓고 같이 실습하니까 확실히 시간이 절약되었다. PROBLEM contrast 플러그인을 통해 명도 대비를 확인하는 과정에서 primary 컬러의 대비가 ...
![[인프런 워밍업 스터디 1기 디자인] 1주차 발자국](https://cdn.inflearn.com/public/files/blogs/7d48f4e2-892b-40d4-9dc0-e652ad25d85b/fd.png)
1 주차 / 4.29 - 5.3 / Figma 기초 KEEP 시작에 앞서, 나 자신 칭찬한다. 대견해! 1월에 구매해서 섹션2 듣다가 하차했었는데 .. 🙃 어느새 내가! 스타일 가이드도 만들어보고! 섹션3에 진입했다. 그 과정이 나에겐, 생각보다 간단하지도 쉽지도 않았지만 그럼에도 확실히 1월에 잠깐 수강 했을 때와의 이해도가 다르다는 걸 스스로 체감할 ...
● 배리어블 과 스타일 배리어블은 하나의 변수만 저장 가능하며 참조할 수 있다. 따라서 기본 디자인 요소를 적용할 때 주로 사용된다. 스타일은 다수의 변수까지도 저장이 가능하며 참조할 순 없다. 따라서 다수의 디자인 요소를 적용할 때 사용된다. ● 배리어블의 역할 배리어블은 디자인 토큰 및 프로토타이핑 기능을 한다. *디자인 토큰이란? 디자인 시스템의 기본...
