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

4주차 - 학습 내용 정리1. B2B 이커머스 어드민 페이지 디자인2. B2C 이러닝 페이지3. 모바일 OTT 서비스 페이지 4주차 - 회고 및 느낀 점 😆좋았던 점사실 작년에 시작한 강의를 초반에 보다가 미루고 있었는데, 완강을 할 수 있었던 점이 진짜 최고로 좋았다. (완벽히 다 따라간 강의는 이 강의가 처음이다. 워밍업클럽 덕분이다.)작년에 이 강의를 시작할 때 UI3가 워낙 많이 변경된 부분이 많아서 어려운 부분이 있었는데, 이렇게 강의 업데이트를 해주신 것이 너무 좋았다. 처음에 UI3가 상당히 불편하다고 느꼈는데, 이번 강의 들으면서 베리어블을 이해하면서 왜 피그마에서 이렇게까지 많이 변경하면서 UI업데이트를 강행했는지 이해할 수 있었던 부분도 좋았다.그동안 실습해 본 모든 것을 토대로, 어드민 페이지, 이러닝 페이지, 모바일 페이지에 반응형과 모드를 적용해가면서 실제 사이트 연습하면서 마무리한 것도 좋았다.😅아쉬웠던 점한달동안 매일 조금씩이라도 강의를 들으면서 실습하는 습관이 들었었는데, 이번주에 먼 여행으로 참여하지 못해서 가기 전과 다녀와서 몰아치기로 마무리 했던 것이 아쉽다. 그래도 완강과 미션에 부담이 많았는데, 무사히 끝낼 수 있어서 다행이었다.😍 앞으로 바라는 점이전에 만들었던 디자인 시스템을 이번에 배운 내용을 적용해서 다시 적용해보는 작업을 진행할 수 있으면 좋겠다.피그마에서 처음 다크모드와 함께 베리어블 기능을 선보였을 때 그때 느꼈던 감정이 생각난다. 상당히 놀랍고 신기했지만 저걸 언제 배워서 실무에 쓸 수 있을까? 그런 마음도 있었던 것 같다. 상당히 바쁘게 진행되는 프로젝트에 무언가 새로운 것을 적용하기가 쉽지 않았기 때문이다. 디자이너로서 뭔가 더 개발을 이해해야할 것만 같은 부담감을 느꼈던 것도 같고, 아무튼 시간이 나면 배워보자 하면서 미뤄왔다가 이제서야 이해하게 된 것이 뭔가 좀 후회스러운 마음이 들기도 한다. 이번 일을 계기로 많은 생각을 해보게 된다. 모든 강의를 다시 UI3로 업데이트를 하신 볼드님을 보면서, 디자인 시스템도 마찬가지라는 생각이 든다. 기존 것을 다시 세우는 일은 분명 엄청난 시간과 노력, 그리고 리스크가 있다. 하지만 앞으로 미래를 바라본다면 분명 가치있는 투자가 된다. 다음번 서비스를 구축할 때는 이점을 기억하며서 디자인을 하려고 한다.

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

📖 3주차 - 학습 내용 정리1. 피드백 컴포넌트 Alert, Toast, Progress bar, Spinner loader, Skeleton loader, Slot, ModalProgress bar의 길이가 적용되기 위해 Constraints → Scale을 적용Spinner loader를 위해 Ark 조정 및 프로토타입을 통해 적용해보는 것이 좋았다. 2. 네비게이션 컴포넌트 Link, Tabs, Breadcrumbs, Navigation, Pagination, Carousel 3. 베리어블 모드모드가 필요한 때는 언제인가?라이트모드, 다크모드멀티브랜드 지원디바이스별 대응다중언어 지원시다크 모드는 왜 필요할까?- 빛이 덜 발산해서 배터리가 덜 듦, 저시력자의 경우 다크 모드를 선호, 몰입형 미디어 경우.다크모드는 단순히 색상을 반전시키는 것이 아니다. 반전 후 접근성을 반드시 체크해야한다. 기타 베리어블 모드 활용 - 브랜드 모드, 반응형, 멀티 언어 전환하기.반응형 모드를 만들 때, 반드시 오토레이아웃을 만들어야 Min-width, Max-width 설정 가능. 💡 3주차 - 회고 및 느낀 점 😆 좋았던 점나에게 베리어블도 생소한 편이였는데 모드 전환은 진짜 신세계였다. 4가지 모드별로 직접 변환하고 실습할 수 있었던 점이 진짜 도움이 많이 되었다고 생각한다. 지난주까지는 그저 따라가기 바빴는데, 이번 주차 부터는 조금 더 왜 이런것이 필요한지, 어떤 경우에 쓰면 좋은지 이해하면서 진행할 수 있게 된 점이 좋았다. 체계적으로 강의가 진행되면서, 처음에는 익숙하지 않았던 부분들도 3주차되면서는 자연스럽게 적응 되는 그런 학습 진도가 너무 좋았던 것 같다. 😅 아쉬웠던 점분명 순서대로 모든 강의 내용대로 따라갔다고 생각했는데, 모드 전환이나 여러가지를 통해서, 보다보면 빠진 부분들을 발견하게 되었다. 그런 부분들을 다시 돌아가서 추가하고, 변경하고 그런부분들에 생각보다 시간 소요가 많이 있었다. 가끔 모드를 전환시 어떤 부분들은 가끔 변경되지 않는 부분들을 발견한다. 😍 앞으로 바라는 점다음주는 가족 여행 계획이 있어서 얼마나 미션을 할 수 있을지 모르겠는데 끝까지 최선을 다하자.

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

📖 2주차 - 학습 내용 정리1. 아이콘Union + Flatten Selection앤트맨 전략으로 확대후 수정 그 이후 사이즈 조정해서 아이콘을 컴포넌트화Icon placeholder를 미리 만들어 놓고, 사이즈나 다른 아이콘으로 변경한다.2. 인풋 컴포넌트버튼 (button, icon button, button stack)체크박스(check), 라디오(radio), 스위치(switch) 텍스트 라벨(label), 컨트롤 그룹 (control group), 텍스트필드(text field), 텍스트 영역(text area)셀렉트/드롭다운(select/drop down)Multi-Edit 기능의 신세계를 배웠다. Q로 같은 구조를 한거번에 선택하거나 shift를 통해 선택.3. 디스플레이 컴포넌트아바타(avatar), 아코디언(accordion), 구분선(divider)뱃지(badge), 칩(chips), 툴팁(tooltips)카드(basic cards), 테이블(table) 💡 2주차 - 회고 및 느낀 점 😆 좋았던 점컴포넌트를 하나하나 만들어가면서 확실하게 컴포넌트 베리어블 개념을 익힐 수 있었던 것.이런 것까지 만든다고? 라는 생각이들 정도로 자주 쓰이는 부분을 컴포넌트화하면서 정리해 볼 수 있었던 것.피그마에 잘 몰랐던 부분, 기본 개념들 반복하며 훈련하기, 그리고 유용한 단축키등을 다시 한번 정리할 수 있었던 것.😅 아쉬웠던 점이전에 Hug / Fill Container 부분을 아직 확실히 이해하지 못했던 부분들이 있었구나 깨닫는다. Basic cards만들 때, 조금 어려웠던 부분이 있었다. 앞으로 이런 부족함을 좀더 확실히 익힐 때까지 노력해야겠구나 그런 생각이 들었다. 😍 앞으로 바라는 점미션을 정해진 시간에 따라가기가 꽤 많은 양이라는 생각이 들었다. 밀리지 않도록 최선을 다해 따라가자.포기하거나 미루지 말고 완주를 위해 꾸준히 노력하자.

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

📖 1주차 - 학습 내용 정리1. 피그마 배리어블과 디자인 토큰 개념 정리피그마 배리어블과 디자인 토큰의 개념 다시 한번 정리하기 Semantic이 중요하게 필요한 이유 Mode로 구분 가능하고, 로컬 베리어블 관리가 필요하기 때문2. 배리어블과 파운데이션 세팅하기색상, 타이포그래피, 간격, 선, 그림자, 그리드 등 베리어블 직접 등록해보기다양한 효과(Effect) 알아보기, Drop Shadow외에도 다른 효과들도 사용해보기높낮이(Elevation)는 UI 요소 간의 계층 구조를 시각적으로 명확하게 나타내고, 베리어블로 정리하면 유용그리드 종류 Fixed Grid(centered), Fluid Grid(stretch), Hybrid Grid 살펴보기.디바이스별 반응형 디자인 기준점(viewport) 정리해보고, Min width와 Max width를 지정해주기.3. 유용한 피그마 플러그인들 적용해보기 💡 1주차 - 회고 및 느낀 점 😆 좋았던 점강의를 듣고 직접 실습하면서 배리어블 개념, 용어, 피그마 플러그인등을 정리할 수 있었던 점이 좋았다.UI3에 맞춰서 업데이트 된 강의를 들을 수 있는게 너무 좋았다. 이전에 강의 들을 당시 예전 UI와 다른점이 많아서 이해하기 어려운 부분들도 있었는데, 이번에 다시 정리하면서 들으니 너무 좋았고, 좀더 체계적으로 추가 업데이트 된 내용을 배울 수 있어서 좋았다.😅 아쉬웠던 점스터디 첫 주였는데 계획했던 것처럼 매일 강의를 듣지는 못했고, 정해진 시간에 아직 루틴화 되지 못한 점, 강의 따라가기에 바빠서 스타일가이드 문서화 정리까지는 제대로 못했던 점이 아쉽다.😍 앞으로 바라는 점다음 주부터는 정해진 시간에 조금씩이라도 매일 공부하고, 문서화 하는 부분도 염두해두면서 작업해보자 💪