블로그 모아보기 - 인프런

[인프런 워밍업 클럽 스터디 2기] 프로덕트 디자인 4주차 발자국

4주차때 배운 것벌써 4주차, 마지막 발자국을 남기게되네요.4주차 때에는 만들어놓은 컴포넌트를 가지고 b2b이러닝 페이지, 모바일 ott 페이지 만들기를 진행했습니다.컴포넌트가 다 만들어져있고, 배리어블을 통해 라이트/다크모드, 브랜드별 컬러 다 지정해놓으니까 하나의 페이지 만들기가 간편했습니다! 배리어블 통해서 변경하면 바로 다크모드로 변경되고.. 물론 초반에는 컬러를 보면서 잘 지정해야겠지만 디자인시스템을 잘 구축해놓으면 간편하게 디자인을 바로 뽑아내 확인해볼 수 있어 시간이 많이 줄 것 같습니다. 좋았던 점배리어블 기능을 잘 사용해서 더 효과적으로 사용할 수 있다는 것을 알아서 (불린 기능, 텍스트 기능)실무에 투입되고나서도 잘 사용할 수 있을 것 같습니다!강의를 구매하고 인프런 워밍업클럽을 통해 미션을 수행하니까 빼먹지않고 꾸준히 듣고, 실습할 수 있던 것 같습니다. 그리고 피드백을 통해 놓쳤던 부분을 알 수 있어서 좋았던 시간이었습니다!

UX/UI･디자인･배리어블･피그마･디자인시스템･UXUI･워밍업클럽

0

(인프런 워밍업 클럽-스터디 2기) 프로덕트 디자인 3주차 발자국

이번 주에도 열심히 컴포넌트를 만들고 다크모드를 비롯한 여러 모드를 만들어 보았다. 다크모드 적용은 컬러 배리어블 등록이 다였지만 생각보다 그럴듯한 화면을 만드는게 힘들었다.다크모드 색상을 조정하는데 얼마나 뭘 어떻게 해야하는지 감이 잘 잡히지 않아 여러번 조정했다.그리고 시각적으로는 대비가 큰데 플러그인을 돌려보면 계속 녹색이 나오지 않아서 당최 어찌 해야할지 모르겠다. 더 연구를 해볼 예정이다. 데스크탑, 타블렛, 모바일 반응형 만드는게 좀 복잡하지만 재밌었는데 각각 화면의 특성을 이해할 수 있었고 불린을 어떤 방식으로 적용해야하는지 배울수 있어서 좋았다. 무엇보다 만들고나니 클릭 몇 번에 휙휙 바뀌는게 재밌고 신기했다 ㅎㅎ한번은 다크모드 만드는데 한 부분만 계속 적용이 안되어서 버그인가 싶었는데 그럴리가.. 역시 휴먼에러이고 내가 배리어블 등록을 primary가 아니라 다른 배리어블로 등록해 놓아서 그렇게 되는 거였다. 이거 가지고 30분을 씨름했는데 역시 더 꼼꼼하게 챙겨야 한다. 체크 또 체크!다중 언어 지원은 아직 피그마에서도 잘 안되는 것 같아 (여러 번역 AI를 써봤지만 영어>한국어는 번역투가 너무 뚜렷해서 어색하게 느껴진다.) 어떻게 업데이트 될지 궁금하다. 그리고 어드민 페이지를 만들면서 내가 그동안 어떻게 컴포넌트를 잘못만들고 있었는지 알게되었다. 예시가 있고 따라하면서도 중간 중간 이해를 못하거나 타이밍을 놓치면 원하는 대로 안나올 때가 있는데 이럴때 뜯어보고 수정하는 건 잊지 않게 된다. 확실히 컴포넌트만 따라 만들다가 페이지를 구성해보니 다르게 느껴졌다. 아직 완벽하게 익히려면 더 만들고 더 고민해 보아야겠지만 겉핥기로만 알고 있던 피그마라는 프로그램을 더 잘 알게 되어서 너무 좋다. 이제 정말 얼마 남지 않았다. 끝까지 완주하고 싶다. 잘한 일 - 어쨌거나 과제 전부 제출반성 - 헤메이다가 과제 하나를 늦게 제출했다.

UX/UI･워밍업･디자인시스템･배리어블･다크모드

0

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

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

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

0

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

3주차때 배운 것네비게이션 컴포넌트(링크, 브레드크럼, 탭, 바텀네비게이션, 페이지네이션, 사이드네비게이션, 캐러셀)모드를 활용해보기 (라이트<->다크, 브랜드 컬러 변경)배웠던 것을 활용해 B2B 이커머스 어드민 페이지 만들기벌써 3주차 발자국을 남긴다!! 지금까지 빼먹거나 엄청 미루거나 하지 않았던 나에게 먼저 칭찬 스티커를 주고..작업하고 디스코드에 올리는 과정을 하니까 뭔가 빼먹지 않으려고 하는 것 같았다. 이번에는 네비게이션 컴포넌트를 만들었고, 배리어블에 모드를 추가해 다크모드에 잘 대응하도록 하는 것을 해보았는데 막상 컬러를 설정하니까 컬러가 너무 밝거나 어디는 안맞거나 하는 경우가 있었다. 그래서 그걸 조절하는게 꼭 필요하고.. 하다보니까 내가 컬러부분이 조금 아쉽다는 생각이 들어서 많은 수련(?)이 필요하는 것을 알게되었던 순간... 모드를 통해서 딸깍 바꾸면 슉 바뀌는 것이 편리했다! 역시 유료버전이 좋구나 (지금은 교육계정이지만)반응형이랑 이미지컴포넌트도 배리어블에 설정해서 변경되는 것을 처음 알아서 신기했고 추후에 피그마가 더~ 편리하게 해줄 수 있지만... 지금도 너무 신기했던 경험... 아쉬웠던 점자꾸... constraints 부분을 까먹는다..! 만들고 확인하는 과정을 꼭꼭 거치도록하자다음에 시도할 점나머지시간에는 강의를 무사히 끝내는 것에 초점을 가지고 진행할 예정이다.. 잘 마무리했으면 좋겠다!!

UX/UI･피그마･배리어블･UXUI･디자인

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주차 🐾

인프런 워밍업 스터디를 시작하며직무 전환을 위해 이직을 준비하며 UX/UI 분야에 대한 관심이 생겼고, 인프런에서 UX/UI 분야 기초 강의들을 수강하고 있던 중 인프런 워밍업 스터디 모집 메일을 보게 되었다. 본격적으로 포트폴리오를 만들고 사이드 프로젝트에 참여하기 전 스터디를 해보고 싶다는 생각을 갖고 있었는데, 아직 모집 중이길래 신청했다! 부디 완강해서 프로덕트 디자이너의 길에 한 걸음 더 가까워질 수 있기를 🔥 1주차 때 배운것디자인 토큰디자인 시스템배리어블스타일 1주차 실습색상 배리어블 등록간격 배리어블 등록타이포 그래피 스타일 플러그인으로 만들어보기 칭찬할 점시작이 반이다! 1주차부터 여유롭게 수강하지는 못했지만 포기만 하지 말자! 아쉬운 점출퇴근 및 퇴근 후 강의 챙겨듣지 못했다쉽게 설명해주시지만 초보인 나는 한 번에 이해하기 어려운 내용들이 있어 적어도 3번은 들어야 할 것 같다 개선할 점밀리지 않고 강의 듣기

UX/UI･UX/UI･워밍업스터디･인프런･프로덕트디자이너･피그마･디자인시스템･배리어블

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