블로그 모아보기 - 인프런

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

두번째 발자국시간이 너무나도 부족했던 2주차였다. 퇴근 후에 남는 시간을 모두 강의와 미션에 할애했는데도 불구하고 시간이 많이 소요되는 2주차였다. 아직 미션을 완주하지 못 했지만 이번주를 되돌아보는 발자국을 작성해야겠다. Day8 피그마 컴포넌트 기초 배우고 입력 컴포넌트 만들어보기 드디어 모든 컴포넌트의 기초인 버튼 컴포넌트를 만들어 볼 수 있게 된 시간이라서 무척 기대했다. 왜냐면 내가 실무에서 만든 버튼 스타일과 볼드님의 버튼 만드는 순서나 과정이 어떻게 다른지 궁금했기 때문이다. 버튼 컴포넌트에서 내가 만든 것과 볼드님의 스타일 중 다른 것은 바로 아이콘과 레이블의 배치였다. 나는 label onlly, icon+label, label+icon 이런식으로 버튼 타입을 구성했었는데, 볼드님은 LeadingIcon+Label+TrailingIcon으로 구성했다는 점이 달랐다. 이 점이 훨씬 더 경제적이고 아이콘을 불린 프로퍼티로 관리할 수 있어서 편리한 방법이라는 생각이 들었다.그리고 포커스 버튼 상태를 포커스 링 컴포넌트를 만들어서 앱솔루트 포지션으로 만드는 점도 인상깊었다. 나는 이전까지 버튼의 포커스 상태는 직접 스트로크를 outline 상태로 줘서 만들었는데 포커스링을 이용하여 만드는 포커스 상태는 더 눈에 잘 띄고 배리언트 관리가 용이하다고 느껴졌다.그리고 체크박스와 라디오버튼은 단독으로 쓰이기도 하지만 레이블과 함께 결합해서 미리 컴포넌트를 구성해두는 방법을 배우게 되었다. 토글 스위치에는 버튼에 아이콘을 넣을 생각조차 못 했는데 강의를 통해서 ON/OFF 상태에 아이콘을 넣어서 좀 더 명확하게 표현 할 수 있다는 것을 배웠다. 그리고 보너스 미션으로 설문조사 폼을 만들어봤는데, 만들고 나니 컴포넌트를 어떻게 활용해야 겠다는게 감이 잡히게 되었다. Day9 입력 컴포넌트 나머지 만들고 마지막 점검하기 IconPlaceholder라는 지식을 배우게 되었다. 그동안 입력 필드에 들어가는 텍스트만 플레이스홀더라고 생각했었지 아이콘은 플레이스 홀더라는 생각을 못했는데 이번 강의를 들으면서 새롭게 알게되었다. 입력필드도 생각보다 다양한 상태가 있어야 한다는 것을 알게 되었다. 그동안 상태는 버튼만 많다고 생각했는데 입력필드도 총 7가지의 상태(디폴트, 호버, 프레스, 셀렉트, 입력, 에러, 디스에이블)를 만들었더니 내가 실무에서 빼먹은 상태가 무엇인지 알게 되었다.텍스트필드 다음에 만든 텍스트 에리어에서는 현재 카운트와 토탈 카운트를 따로따로 구성한다는 것을 알았다. 그동안은 모두 현재 카운트와 토탈카운트를 하나의 텍스트 입력으로 퉁 쳤는데 이렇게 나눠서 구성하고 레이어 이름을 지으니 개발자와 소통하기 더 편할 것 같다는 생각이 들었다.셀렉트 그룹은 가장 배우고 싶었던 컴포넌트인데 배우고 나니까 바로 실무에 적용해야 겠다는 생각이 들었다. 왜냐하면 현재 실무에서 내가 만든 셀렉트는 어디가 잘 못 된 지 모르겠는데 오토레이아웃으로 하면 틀어지고 프레임으로 해야만 선택한 상태를 볼 수 있는 상태다. 그런데 볼드님의 방식으로 셀렉트를 만들고 인스턴스를 테스트해보니 아이콘도 붙일 수 있고, 체크박스도 붙일 수 있고, 라디오버튼도 붙을 수 있고 심지어는 포커스 상태도 만들 수 있는 아주 이상적인 셀렉트 박스를 만들 수 있었다.그리고 보너스 미션으로 회원가입 폼을 간단하게 만들어봤는데 이 날 배운 모든 컴포넌트를 이리저리 조합하니까 회원가입 폼을 쉽게 만들 수 있어서 매우 편했다. 잘 만든 컴포넌트를 UI를 빠르게 디자인 할 수 있는 아주 좋은 기초 공사라는 생각이 들었다.보너스미션으로 제작한 회원가입 폼 여담나는 1주차 미션을 미션보드에서 진행하지 못 했기 때문에 이전에 만든 스타일 가이드를 모두 퍼블리시해서 2주차 과제부터는 미션보드에서 작업 할 수 있었다. 1주차부터 미션보드를 활용한 사람들과는 조금 다르게 이번주 미션을 했지만 그래도 덕분에 퍼블리시 기능을 이용해 볼 수 있는 좋은 기회가 되었다고 생각한다.아직 미션7과 8을 모두 끝내지 못 했지만 한 주의 마무리를 하기 위하여 미션하며 느꼈던 점을 위주로 발자국을 작성했다. 돌아오는 주에 좀 더 시간을 투자하여 미션을 진행해야겠다.

UX/UI･피그마･figma･인프런워밍업클럽･컴포넌트･디자인

1

0

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

4주차 회고워밍업 클럽을 시작한지 벌써 한달이 지났다..그동안 강의와 특강으로 피그마에 대해서 많이 배웠고 유용하게 쓸 수 있게 돼서 알찬 시간이었다.처음 배리어블 등록할 때 낯설고 어려워서 많이 버벅거렸는데 이제는 꽤 능숙하게 배리어블을 등록할 수 있다ㅎㅎ등록만 해놓으면 모드나 브랜드에 따라서 색이 바뀌는게 정말 신기했고 아직도 신기하다👍배운 점네비게이션 컴포넌트 : 링크, 브레드크럼프, 네비게이션 탭, 모바일 하단 네비게이션, 페이지네이션아바타 컴포넌트아코디언 컴포넌트 로컬 베리어블에 다크모드 색상 입력하기로컬 베리어블에 멀티 브랜드 모드를 등록하기각 브랜드마다 브랜드 고유 색을 나타내기 B2B 이커머스 어드민 페이지 만들기 아쉬웠던 점복습할 시간이 부족했다 앞으로는남은 과제도 다 완성하기강의 처음부터 다시 들으면서 복습하기

UX/UI･워밍업클럽･컴포넌트･다크모드･어드민페이지

0

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

3주차 회고이번주는 아주 거하게 밀려버렸다!!! 그래서 어차피 밀린거.....라는 생각으로 천천히 강의를 듣고 복습하면서 미션을 했다확실히 컴포넌트가 배리어블보다는 많이 해봤던 것들이라 익숙하고 재밌었다ㅎㅎ벌써 3주차라 강의가 곧 끝나가는데 시간이 너무 빠른 듯ㅠㅠ배운 점피드백 컴포넌트 : 토스트, 로딩 스피너&스켈레톤 로더(+애니메이션), 슬롯, 모달네비게이션 컴포넌트 : 링크, 브레드크럼프, 네비게이션 탭, 하단 네비게이션, 페이지네이션, 아바타, 아코디언, 뱃지, 구분선 아쉬웠던 점많이 밀려버린 미션들... 다음 주에는밀린 진도 빨리 나가기포기하지 말고 미션 끝까지 완주하기!

UX/UI･워밍업클럽･컴포넌트･베리언츠

0

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

2주차 회고이번주는 피그마에서 가장 많이 쓰이는 컴포넌트를 만들었다.이번에는 밀리지않게 시간 분배를 잘 해야지 했는데 역시나.. 시간이 오래 걸린다배리어블은 몰라도 베리언트는 해봤으니까 잘 할 수 있을줄 알았는데...! 여태 내가 했던건 제대로된 베리언트가 아니었다ㅠㅠ배운 점입력 컴포넌트 :버튼, 컨트롤, 체크박스, 라디오, 스위치, 라벨, 컨트롤 그룹,텍스트 필드,텍스트 박스,셀렉트 디스플레이 컴포넌트 :아바타, 아코디언, 뱃지, 툴팁, 구분선, 인터랙티브 칩, 상태칩, 기본 카드, 테이블 아쉬웠던 점지금까지 베리언트를 잘 사용했다고 생각했는데 야매로 하고 있었다는 점허겁지겁 미션하느라 복습을 못한 점 다음 주에는시간 분배 더 생각해서 밀리지 않게 하기보너스 미션 수행하기

UX/UI･컴포넌트･워밍업클럽

0

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

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

UX/UI･피그마･워밍업클럽･컴포넌트･디자인시스템

0

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

2주차때 배운 것입력 컴포넌트 (버튼, 컨트롤, 라벨, 텍스트필드, 텍스트박스, 셀렉트)디스플레이 컴포넌트 (아바타, 아코디언, 뱃지, 툴팁, 구분선, 인터랙티브 칩, 상태칩, 카드, 테이블)피드백 컴포넌트 (토스트, 로딩 스피너, 스켈레톤 로더, 슬롯컴포넌트를 활용해 모달 제작)Slot 컴포넌트를 활용해서 모달을 만드는 것을 알게된 점이 좋았다.예전에 회사 다닐 때에는 필요한 모달 다 만들어놨는데.. 저렇게 컴포넌트를 만들어서 활용할 수 있다는 것을 알게되어서 좋았던 것 같다.그리고 오늘 들었던 온라인세션에서도 좋은 인사이트를 얻을 수 있었다.AI 활용을 부끄럽게도 잘 안했었는데 (지피티로.. 자소서나 그런거만 물어봤었다) 지피티를 통해 디자인 문서 초안을 세울 수 있다는게 좋은 것 같았다. 그리고 다른 사람들의 의견을 조금이나마 알 수 있는 시간이 있어서 좋았고... 몰랐던 디자인시스템을 알게되었던 점도 되게 좋았다. 역시 다른 이들의 생각을 들어야 인사이트를 얻을 수 있구나하는 시간이어서 너무 좋았다 아쉬웠던 점또 시간 계산을 잘못했었다는 점..?ㅋㅋㅋㅋㅋ 아침에.. 일찍 일어나는게 쉽지 않다. 또한 아침에 바로 강의를 듣는 것도 쉽지 않았다.이래저래 지원서 계속 넣는 것을 도전하기 위해 다른 곳에 신경 쓰다보니 강의 듣고 미션 수행하는데에 시간 분배를 못했던 것 같다. 얼마 안남았으니 다음주에는 꼭 일찍 일어나서 아침에 강의와 미션을 수행하는 것으로...! 다음에 시도할 점온라인 세션에서 들었던 플러그인 사용해서 문서 정리하기!개인 드래프트에 다시 만들어보면서 복습해보기 3주차도 열심히 미션 밀리지 않게 매일매일 강의 들어야겠다.+인프런 워밍업 클럽으로 하니까 뭔가 매일 공부하게되고... 열심히 사는 것 같은 기분이 들어서 좋은 것 같다 ㅋㅋㅋㅋ

UX/UI･디자인시스템･워밍업클럽･피그마･UXUI･컴포넌트

0