(인프런 워밍업 클럽-스터디 2기) 프로덕트 디자인 마지막 발자국

드디어 마지막 주차!! 강의를 들은 뒤 발자국을 제출하려고 토요일까지 기다렸다. 마지막 주차는 그동안 만든 배리어블과 컴포넌트를 이용해서 진짜 화면을 만드는 주차였다.포트폴리오 작업을 할때는 대부분 배리어블이나 디자인 시스템 구성을 하지 않아 하나씩 조합해서 시간이 더 오래걸렸는데 확실히 미리 써야할 컴포넌트를 전부 구성해 만드니 훨씬 작업속도가 빨라졌다.그리고 구성하면서 예시와 문구가 달라지는 부분이 있었는데 화면에 비해 폰트가 커서 몇몇 용어는 짧게 줄여서 사용해야 했다.아직 모바일 화면에 들어가는 폰트 크기에 대한 감을 더 익혀야 겠다는 생각이 들었다. 아니면 모바일 용 배리어블을 만들던가..특히 데이터를 넣을 때 이전에는 하나씩 전부 복붙하거나 직접 썼는데 플러그인을 이용해서 구글시트에 정리해 둔 데이터를 그대로 불러오는 방식을 적용하니 훨씬 쉬웠다. 그리고 플러그인은 해봤자 더미 데이터 만드는 정도로만 있겠지 싶었는데 드라마나 영화 데이터를 그대로 불러올 수 있는 플러그인이 있다는 걸 알고 무작정 복붙하기 전에 플러그인을 찾아보아야 겠다는 생각도 들었다.그리고 오늘!! 기다렸던 프로토타입 강의는 이전에 개발자를 잠깐 꿈꿔보며 이전에 들었던 파이썬 강의가 떠올랐다 그 때 해봤자 난수 만들기, 숫자 증감 정도만 배웠었고 도저히 적성에 맞지 않아 아 개발은 나의 길이 아니구나 하고 끝났었는데 피그마 프로토타입을 하면서 적용하게 될 수 있을 줄은 몰랐다. 프로토타이핑 자체에는 익숙하지 않아서 과제는 제 시간에 끝내지 못했지만...프로토타입은 간단하게 스크롤정도만 활용했었는데 다른 분들이 좋은 화면들을 질문해 준 덕에 생각하지 못했던 프로토타입을 직접 만들어볼 수 있었고 어떤 매커니즘으로 만들어지고 활용할 수 있는지 알게 된 유익한 시간이었다. 그리고 확실히 직관적으로 보여주면 같이 협엽하는 개발자들이 훨씬 디자인을 잘 이해할 수 있으리란 생각이 들었다. 그러면 내가 원하는 디자인도 번거로움 없이 더 빨리 얻을 수 있겠지! 한달여간 어려운 부분도 있었지만 새로운 개념과 기능을 익히며 너무 즐거웠다. 과제 따라가는게 힘들긴 했지만..개인적인 점수를 주자면 100점중 87점 정도는 되지 않을까? 게으름 때문에 미룬 순간들이 있었다는 걸 내 자신이 제일 알기 때문에 90점을 넘게 줄 수는 없었다. ㅎ...강의 내용도 정말 좋았고 유익했다. 같이 달린 워밍업 클러버 여러분, 그리고 볼드UX 강사님 모두 수고하셨고 남은 한해 건강하게 잘 보내셨음 좋겠습니다.뜻하는 바 이루시길!!

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

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

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

2주차에는 계속해 컴포넌트를 만들었다.피그마를 제대로 처음 배우게 된 건 이번이 처음이었고 그 전까지는 주먹구구식으로 여러 회사의 디자인 시스템 피그마 파일을 뜯어보면서 공부했는데 이미 완성된 파일을 뜯어보면서 하기에는 내 지식으로 잘 안보이는 부분도 많았고 효율적으로 만드는 방식이 무엇인지 알기 힘들었다.하지만 이번에는 강의를 따라하며 컴포넌트에 베리어블을 적용하면서 만들어 보니 내가 그동안 만들었던 컴포넌트에서 어떤 부분이 비효율적이었는지 알수 있었다.특히 베리어블을 적용하지 않고 매우 원시적으로(!) 만들곤 했는데 계속해 강의와 함께 베리어블 적용을 반복하니 기존에 만들었던 컴포넌트를 보아도 내가 어떤 부분을 어떻게 적용할 수 있는지 머릿속에 그려지는 부분이 제일 좋았다. 그리고 한 번 적용 하면 작업속도도 빨라져 매우 효율적이라 생각했다.포트폴리오에서는 컴포넌트를 어떻게 만들었는지 까지는 보지 않지만 나중에 실무에서 하게되면 매우 도움이 되리라는 생각이 들었다. 사이드 프로젝트를 진행할 때 제일 고생했던 컴포넌트가 아코디언과 툴팁이었는데 이번 기회에 제대로 만들어보면서 어떻게 적용할 수 있는지, 그리고 다른 팀원들에게 문서화 하며 어떻게 펼쳐 보여줄 수 있는지 알게되었다.또 테이블을 구성할때 하나하나 말하자면 노가다식으로 적용해 만들곤했는데 이번에 배우면서 이렇게 간단하고 쉬운 방법이 있다는 걸 알게되었고 매우 유용했다. 그리고 여러 브랜드의 디자인 시스템 파일을 보면서 디바이더를 어떻게 만들어야 할지 잘 몰랐는데 이 기회에 배우게 되어서 도움이 되었다. 그리고 토요일에 진행 된 챗GPT를 통한 디자인 시스템 문서화는 도움 되는 플러그인을 알게 된것 만으로도 좋았다.이전에도 여러 목적으로 챗GPT를 사용했기에 이런 방식으로 데이터를 얻는 건 그렇게 낯선 방식은 아니었지만 프롬포트를 어떻게 구성해야 하는지에 관한 정보가 매우 유용했다. 그 전까지는 하나하나 학습가면서 사용했는데 한꺼번에 물어보면 된다는 걸 이제야 배웠다 ^^;;;솔직히 주변에서 이런 인터넷 강의를 굳이 왜 듣냐, 독학하면 되지 않냐는 말을 많이 들어 결제하면서도 반신반의 했는데 (그냥 손해볼거는 없다고 생각을 했다.) 듣기를 정말 잘했다고 강의듣는 내내 생각했다. 그리고 워밍업 클럽 덕분에 제대로 익히고 있다.빨리 실무에 적용할 날이 오면 좋겠다. 잘한점 - 시간 맞춰서 제출.잘못한점 - 정리를 못했다.반성 - 미루지 말고 강의를 끝낸 뒤 다른 걸 하자.

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

피그마 공부를 시작하고 UX/UI 디자인 쪽으로 새 진로를 잡으면서 디자인 시스템에 관해 알게되었다.하지만 배리어블을 어떻게 활용해야 하는지 이해하기 힘들었고, 막연히 이미 나온 서비스에만 적용 할 수 있다고 생각해서취준생인 내가 취직할 때 까지 접할 일이 없다고 생각했으나 최근 사이드프로젝트를 하면서 생각이 달라졌다.시스템이 없으니 프론트엔드 개발자분과 소통이 힘들었기 때문이다. 그래서 배리어블 공부를 하겠다고 마음만 먹었 던 와중에 인프런에서 워밍업 클럽을 한다는 광고를 접해 신청하게 되었다.(취준생(백수!)이라 일정한 수입이 없어서 유료강의는 꿈도 못꾸고 있었는데 국민취업지원제도에서 지원금을 주어서 그걸 쓸수 있게 되었다. 취준생 분들은 한번 신청해보세요. 고용24(정부기관)에서 신청가능.) 강의는 강사님은 인스타에서 팔로우하고 있었던 bold님 이었고 이분을 통해 토큰이라는 개념을 처음알게 되었었는데 그런점에서 혼자 반갑기도 했다. 하지만...1주차 부터 난항을 거쳤다. 개인 스케쥴이 바빴고 이래저래 계속 일이 생겼다.게다가 강사님이 공유해주신 노션의 스케쥴이 가이드라고 생각했는데 그 스케쥴에 맞춰서 미션 제출을 해야한다는 걸날짜가 다 지나고 디스코드에 들어갔다가 알게되었다. 그때 미션 1이 전부 끝난 상태이긴 했는데 이후 스케쥴을 보아하니 미션 2도 늦어질 것 같아서 그냥 주말에 한꺼번에 제출하기로 결정. 그것도 모자라서 강의 통해서 강사님이 공유해준 미션 카드가 있는 피그마 파일이 아니라 새 파일로 시작했다.이미 배리어블을 꽤 등록해 둔 상태라 (알아챘을 때는 이미 80% 정도 완성한 상태였다ㅠㅠ) 썸네일 등을 복사 붙여넣기하고머리가 나쁘면 몸이 고생한다더니 딱 그꼴이었다. 강의는 핵심 전달과 적절한 예시로 이해하기 쉬웠다. 이전에 알던 개념에서 확장해 여러 예시를 보여주는 점이 제일 좋았다.막연하게 배리어블이 무엇인가 생각할때와는 달리 실무에서 어떻게 적용할수 있는지, 그리고 왜 이걸 요구하는지 알수 있었다.그리고 강의 PPT디자인도 깔끔해서 보기 좋았다. 폰트와 레이아웃이 지나치게 자유분방하면 괴로운게 디자이너들 아니겠습니까. 하지만 내 생각보다 시간이 오래걸렸다. 강의 보면서 따라하느라 시간이 지체되었고 잘 이해 안가면 돌려보고 잠깐 멍때리느라 집중력을 잃어 놓치는 부분 다시보고 하니 10분 짜리를 20분 동안 보게 되었다. 그리고 배리어블을 등록하는 게 끝이 아니라 등록한 배리어블을 협업자와 공유하기 위해 문서형태로 펼쳐놓아야 하니 이부분이 제일 오래걸렸다. 사이드 프로젝트하면서 부족한 점을 제일 많이 느꼈던 부분이라 어떻게 만들어야 하는지 생각을 많이 하게 되었다. 도움이 정말 정말 많이 되었던 부분은 역시나 최근에 업데이트 해주신 아이콘 강의!!이전 경력때 일러스트레이터를 많이 사용했고, 이후 UXUI 포트폴리오를 만들면서 아이콘 제작을 하는데 피그마에서는 아이콘을 깨면 이상하게 깨지는 경우가 많았다(이건 언제 개선이 되려나??). 그럴때마다 일러스트레이터에서 다시 그리거나 처음부터 일러스트레이터에서 작업해서 가져오면서 스케일이나 굵기 때문에 고생한적이 있었는데 이 문제를 해결하는 방법 (앤트맨 방법!)을 알게된 점이 정말 정말 도움이 많이 되었다. 생명의 은인이십니다. 배리어블은 막상 하니 어렵지 않았다. 이해도 쉬웠다. 사용하는 법 자체보다는 팀과 협업해 수치를 지정하고 그걸 지켜가는 과정이 더 중요할거라는 생각이 들었다. 배리어블 생성은 웹페이지 주소를 구성하는 방식과 비슷했고 특정 유닛을 불러와 사용하는 방식이 특히 그렇게 느껴졌다. 아직 컴포넌트 만들기 까지는 강의를 듣지 않았지만 (내일 들을 예정 오늘 6시간 작업했으니 봐주세요) 미션을 끝마친 기념으로 블로그를 적어본다. 잘한점 - 첫 주차에 할당된 미션 완료잘못한점 - 날짜를 맞추지 못했다.반성 - 예상보다 작업이 오래걸리니 좀 더 여유를 가지고 시간을 맞춰 꾸준히 학습해야겠다.