블로그
전체 42025. 03. 31.
0
[인프런 워밍업 클럽 스터디 3기 프로덕트 디자인] 2주차 발자국
2주차 학습1) 아이콘 컴포넌트 만들기 본격적으로 컴포넌트를 만들기 전, 아이콘 컴포넌트를 만드는 방법에 대해 배웠습니다. 강의를 듣기 전에는 flattern을 해도 원하는대로 안깨져서 의문이었는데 꼭 유니온을 해준 후 flattern을 해야하는 것을 알게 되었습니다. 깨기 전에 아이콘을 확대 및 축소하고나서 선을 정리하는 과정이 재밌었습니다2) 입력 컴포넌트 & 디스플레이 컴포넌트 만들기 1주차 이론 부분을 배울 때 state 종류들이 많이 헷갈렸었는데 실제 여러가지 상태의 컴포넌트를 만들어보니 훨씬 익히기 쉬웠습니다. 많은 컴포넌트들을 배우면서 어려운 부분들도 있었지만 기초적인 부분이니 반드시 복습을 해야할 것 같습니다. 색상 배리어블을 등록할 때 warning error 등 status 색상이 과연 어떻게 쓰일까? 생각했었는데 컴포넌트를 만들면서 어떤 상황에 쓰이는지 알게된 점도 좋았습니다. 회고좋았던 점&잘한 점: 미션을 하기 전에 강의에서 본 그대로 한 번 따라 하고나서 다시 한번 미션에서 만들어보는 방식으로 진행하니까 머릿속에 훨씬 잘 들어왔다. 아쉬운 점 : 초반에는 생각을 하면서 만들어보다가 뒤에 체력이 떨어져 따라할려고만 했던 것 같아 다시 복습을 할 필요가 있었다.
인프런
・
프로덕트디자이너
・
피그마
・
디자인시스템
・
배리어블
2025. 03. 30.
0
[인프런 워밍업 클럽 피그마 프로덕트 디자이너 3기] 4주차 발자국
4주차 학습어드민 페이지, 이러닝 페이지, ott페이지 만들기지금까지 만든 디자인 시스템으로 b2c,b2b 서비스의 페이지들을 만들어보았습니다.디자인 시스템으로 페이지를 구성하니 훨씬 시간도 단축되고 효율적으로 만들 수 있었습니다.컴포넌트를 이것저것 조합해서 하나의 페이지를 만드는게 레고를 조립하는 것처럼 재밌었습니다.반응형으로 바꾸기페이지를 만든 후 디바이스에 따라 알맞게 변하도록 반응형 작업을 배웠습니다.최소 최대 너비 설정, 불린 배리어블로 네비게이션 바꾸기 등 다양한 배리어블을 만들고 적용했습니다.다양한 디바이스에 대응하는 것이 필수인 만큼 여러 버젼으로 만드는 연습을 꾸준히 해야겠습니다. 4주차 마지막 느낀점좋았던 점디자인 시스템을 어디부터 공부해야 할지 막막했는데 볼드님 강의와 스터디로 자세히 그리고 재밌게 배울 수 있어서 너무 좋았다. 미션 페이지를 보니 정~~말 뿌듯하다. 스터디 덕분에 이렇게 완강을 할 수 있었던 것 같다. 2회독 3회독 필수..!! 그리고 이전에는 디자인 시스템들 보면 무슨 말인지 몰라서 공부 포기했었는데 이제 제대로 뜯어볼 수 있을 것 같다.아쉬운 점강의를 들으면서 내가 컬러나 타이포 컴포넌트 등 기초적인 부분에서 아직 많이 부족한 것을 느꼈다. 기초적인건 정말 마스터하고 취업하자.. 공부할게 산더미인데 배울게 넘쳐 난다니 오히려 좋다!!앞으로 할 것여러 디자인 시스템 뜯어보기강의 2회독 시작하기모작 디자인 할 때 디자인 시스템 만들어보기
인프런
・
프로덕트디자이너
・
디자인시스템
・
피그마
・
uxui
2025. 03. 23.
0
[인프런 워밍업 클럽 스터디 3기 프로덕트 디자인] 3주차 발자국
3주차 학습1) 피드백 & 네비게이션 컴포넌트 만들기 피드백 컴포넌트와 네비게이션 컴포넌트를 배웠습니다. 네비게이션 컴포넌트에서 기존에 만들었던 컴포넌트를 가져와 변형하는 방식이 재미있었고, 피드백 컴포넌트에서 모달 컴포넌트 만드는게 가장 기억에 남습니다. nested instances를 다 추가하다보면 길어지는 경우가 많아 적절히 사용해야할 것 같습니다2) 다크모드 & 브랜드 모드 다크모드와 브랜드 모드를 만드는 방법에 대해 배웠습니다. 브랜드 모드를 바꿀 때 컴포넌트 색상이 촤라락 바뀌는 부분이 신기하고 쾌감이 느껴졌습니다. 다크모드 색상을 정할 때 웹 접근성을 유의하며 정해야할 것 같습니다. 따라하기만 해서 다시한번 강의를 보면서 볼드님이 설정한 색상들을 한번 정리해봐야겠습니다. 회고좋았던 점&잘한 점: 이전에 밀린 부분이 있어서 이번주에 진도를 거의 따라가려고 노력했다. 컴포넌트 부분이 많이 어려웠는데 포기하지않고 강의들은 후 혼자 만들어보는 방식으로 익힐려고 노력 했다. 어려웠던 점 : 컴포넌트 부분이 많이 어려워서 다시 강의를 듣고 용어같은건 정리해서 틈틈히 외워야할 것같다 다음주 다짐1) 컴포넌트 배운거 용어들 복습하기 2) 진도 잘 따라가기
인프런
・
프로덕트디자이너
・
프로덕트디자인
・
피그마
・
베리어블
2025. 03. 09.
0
[인프런 워밍업 클럽 스터디 3기 프로덕트 디자인] 1주차 발자국 🐾
1주차 학습 1) 배리어블 토큰의 필요성과 계층 구조 &네이밍 배리어블 토큰이 필요한 이유과 계층 구조는 어떻게 되어있는 지, 네이밍을 짓는 방법을 공부하며 배리어블 토큰과 친해지는 시간을 가졌습니다. 특히 네이밍 부분을 공부하면서 이제까지 학교에서 프로젝트 할 때 frame104958....;;이렇게 그냥 놔두었던게 부끄럽게 느껴졌습니다. 여러가지 디자인 시스템들도 알려주셔서 사례들도 함께 꼭 공부해야겠습니다 2) 컬러와 타이포그래피 배리어블 이론&실습컬러와 타이포그래피에 대한 이론을 공부하고 볼드님과 함께 실제로 배리어블을 등록해보았습니다. 처음에는 semantic theme 등 계층이 어렵게 느껴졌었는데 (물론 지금도 어렵지만) 확실히 실습으로 따라해보니 이해가 잘 되었습니다. 그런데 컬러 부분에서 많은 컬러들을 등록할 때 실제로 써보지않아서 왜 이 컬러를 등록해야하는 지 감이 오지 않았습니다. 다음주 컴포넌트 파트에서 직접 써보며 더 공부를 해야겠다는 생각이 들었습니다. 그리고 볼드님이 알려주신 플러그인들로 능률이 456% 올랐습니다 색상과 타이포 생성해주는 플러그인 너무 좋습니다 3) 기타 effect 배리어블과 그리드 간격과 그림자 효과에 대한 이론을 배우고 실습을 통해 배리어블을 직접 등록해보았습니다. 그림자 효과를 한번만 적용하는 줄 알았는데 겹쳐서 사용한다는 걸 처음 알았습니다. 굉장히 유용한 수업이었습니다. 회고 좋았던 점&잘한 점: 나름 볼드님이 알려주신대로 잘 따라하고 있는 것 같다. 효율적인 작업과 소통을 위해 배리어블이 꼭 필요한 것 같다. 완전 P인데 이번에 배리어블을 만들어보면서 파워 J가 된 기분이 들어서 좋았다. 아쉬운 점 : 근데 정말 따라만 하고 있어서 내걸로 만들려면 나중에 혼자 응용을 해봐야할 것같다. 아직 배우는 단계니까 일단 배운 것 부터 머리에 익히자 후 다음주 다짐1) 반드시 1주차에 배운거 다시 복습하기 2) 하루에 2시간씩 미루지 말고 하기
디자인 기타
・
피그마
・
워밍업클럽
・
프로덕트디자이너
・
프로덕트디자인