블로그

박민지

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

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

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

전석희

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

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

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

채널톡 아이콘