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

📖4주차 학습내용디자인시스템과 배리어블 모드를 활용한 디자인 페이지 만들기1. B2B 어드민 페이지이커머스 회원계정 관리 페이지반응형 환경을 고려하여 Side Navigation과 Content 영역 레이아웃 설계배리어블 모드: Width, Spacing, Navigation Type, Boolean이 자동으로 변경되도록 설정 2. B2C 이러닝 페이지이러닝 홈페이지 디자인콘텐츠 썸네일 프로토타이핑을 고려하여 프레임/오토레이아웃 크기 설정 방법플러그인을 활용하여 데이터를 피그마에 바로 입력하는 방법반응형 환경을 고려하여 콘텐츠 영역 내 카드 썸네일 형태, 크기, 패딩 등 값을 배리어블에 설정 3. OTT 모바일OTT 모바일 홈 화면, 콘텐츠 상세 페이지 디자인(이하 이러닝 페이지와 동일함)☺좋았던 점디자인시스템, 배리어블 모드, 반응형 디자인 모두 활용해야 되서 처음에는 오래 걸렸지만, 반복적으로 만들면서 중복된 요소들이 보이게 되어 익숙해질 수 있었습니다.프로덕트 디자인을 보는 눈이 넓어지고, 디자인할 때 눈에 보이는 것 뿐 아니라 보이지 않는 것도 고려해야 함을 배울 수 있었습니다. 😁잘한 점강의를 따라 디자인하는 것도 힘든 일인데, 새로운 문제를 발견해서 스스로 고민하고 해결하려고 노력해본 것.어드민페이지를 배리어블 모드로 다른 디바이스로 전환할 때 Side Navigation의 Width가 의도와 다르게 변하는 문제가 있었습니다. 이 문제를 해결하는 과정에서 배리어블 모드를 사용할 때 발생하는 이슈에 대해 인지하게 되었고, 이를 대비해서 디자인시스템을 관리하는 것이 중요함을 배울 수 있었습니다. 😅아쉬운 점OTT 페이지에서 반응형과 프로토타이핑을 모두 고려해서 디자인하는 것에 저 스스로 한계를 느꼈습니다. 넷플릭스처럼 콘텐츠 크기 비율을 일정하게 유지하는 반응형을 만들 수 있었지만, 프로토타이핑을 적용하기 어려워서 만족스러운 결과물은 아니었습니다. 추후 계획강의 복습하기: 처음에 배웠던 내용들이 잘 기억나지 않아서 그 부분부터 복습하기 다른 서비스 디자인시스템 찾아보기(특히 볼드님이 알려주신 디자인시스템들)프로토타이핑, 인터렉션 학습하기

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

📖3주차 학습내용1. Feedback 컴포넌트알림, 토스트는 Information, success, warning, error 등 시스템 상태를 고려한 컴포넌트 set를 만들어습니다.Spinner loader, Skeleton는 화면 대기 중에 나타나는 프로토타입을 고려한 컴포넌트 set을 만들었습니다.Modal은 사용 목적에 따라 다양하게 쓰이기 때문에 Slot 컴포넌트를 알게 되었으며, 하나의 모달 컴포넌트를 가지고 여러 형태를 만들 수 있었습니다.2. Navigation 컴포넌트Bottom, Side, Global 네비게이션을 만들 때 포함되는 메뉴 Item 컴포넌트를 Default, Hovered, Pressed, Selected 등 인터렉션된 상태를 고려하여 만들었습니다. 특히 Side는 다양한 디바이스 환경을 고려하여 여러 Type을 만들어야 했으며, Global은 선택했을 때 공개되는 하위 메뉴부터 알림, 프로필 같은 Utility적인 기능까지 고려해야 했죠.3. 배리어블 모드라이트/다크, 멀티 브랜드, 디바이스 별 반응형, 다중 언어 지원 등에서 apply variable mode만 변경하여 적용하는 방법에 대해 배웠습니다. 멀티 브랜드: 브랜드에 따른 컬러 및 타이포는 Primitive를 가지고 Theme 배리어블을 추가로 만들고, Semantic에 Theme 배리어블을 등록하여 컴포넌트나 디자인 요소에 적용시키기반응형디바이스에 따른 컴포넌트 set을 만들고, 각 이름을 가진 String 배리어블을 만들고 인스턴스 배리언트 프로퍼티에 연결시키기.컨텐츠 영역에선 Min Width와 constraints를 L+R을 적용해서 디바이스 크기 별로 바로 대응할 수 있게 설정하기.다중 언어:기존 컴포넌트를 가지고 새로운 컴포넌트 set 및 목적에 따른 배리언트 프로퍼티 만들기 -> String 배리어블 -> 인스턴스의 배리언트 프로퍼티에 배리어블 연결 -> 배리어블 모드 지정국가별 문화 및 언어습관을 고려하여 좌측 정렬, 우측 정렬, 이미지 및 텍스트 컨텐츠 등 변경이 가능함. ☺좋았던 점배리어블 모드 기능을 사용하려면 어떻게 Setting해야 하는지 배울 수 있었습니다.컴포넌트를 구성하는 Part 요소의 인터렉션을 고려하여 만들면서 컴포넌트 체계에 대해 자세히 알 수 있었습니다.😁잘한 점커리큘럼에 맞춰서 미루지 않고 정해진 할당량을 채우려고 노력했어요.특별히 잘한 점이 뭐가 있는지 기억이 안 납니다... 이번 주는 배울 게 많아서 특별히 더 잘하려고 노력하지 못했어요.😅아쉬운 점Responsive 파트에서 강의를 따라 만들었는데 잘 되지 않았습니다. 컴포넌트 내부에 fill, hug, min width 등 고려할 변수가 많은데 익숙하지 않아 자꾸 헷갈리더라구요. 컴포넌트의 구성 요소가 복잡해질수록 따라 만들기 버거웠습니다. 특히 네비게이션 컴포넌트는 내부에 들어갈 컴포넌트가 다양해서 영상을 여러 번 돌려봤어요.

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

📖2주차 학습내용1. 컴포넌트 구조 및 만드는 방법컴포넌트 배리언츠, 프로퍼티 / 프로퍼티 기능 / Nested instance 사용 방법2. Icon 컴포넌트아이콘 플러그인 사용 / 컴포넌트 등록 전 레이어 정리[앤트맨 전략] / 아이콘 플레이스홀더3. Input / Display 컴포넌트Type, State 등 배리언츠, 프로퍼티(불린, 스왑, 텍스트, Nested)를 활용한 컴포넌트 만들기단일 컴포넌트(버튼, 라디오 버튼, 라벨 등)으로 복합 컴포넌트(버튼 스택, 컨트롤 그룹 등) 만들 ☺좋았던 점강의 중간에 사소한 꿀팁들을 알게 되면서 잘 몰랐던 기능들을 배울 수 있었다.(ignore auto layout으로 스크롤바나 드랍다운 넣는 것, 오토레이아웃 내 Stroke 여백 적용 설정 방법, Tooltips에 Shadow가 이상할 때 해결방법 등)컴포넌트를 만들 때 사용 목적과 사용했을 때를 고려하여 여러가지 Type과 Style을 만드는 것의 중요성을 배웠습니다.라이브 세션에서 배리어블로 프로토타이핑 다루는거 완전 대박이었다. 한 가지를 클릭할 때 다양한 요소가 전환되는게 신기하였다. 잘 활용하면 프레임끼리 다이렉트로 연결하여 프로토타이핑할 때 경로가 복잡해지고 알아보기 어려운 문제를 해결할 수 있지 않을까 싶었다. 😁잘한 점컴포넌트를 만드는 과정에서 디테일적인 요소는 나중에 다시 보기 위해 메모로 남긴 것미션4에서 Input 컴포넌트를 가지고 간단한 설문조사나 회원가입을 페이지를 만들어보았고, 같은 컴포넌트라고 해도 적용하는 프로덕트에 맞춰서 보완이 필요함을 느낄 수 있었다.- 설문조사) 텍스트필드 Label 내용이 길어지면 프레임 밖으로 나오게 되서 오토레이아웃 W를 Fill 로 변경😅아쉬운 점날씨가 따뜻해지면서 식곤증이 심해져서 졸음이 쏟아지는 것😂 카페인으로 버티고 있는데 커피 가격이 오르고 있어 부담이 커진다(ಥ_ಥ)중간에 모르는 개념이 나오면 이해될 때까지 계속 봐야 다음으로 넘어갈 수 있다고 안심하는 나...특정 구간에 오래 있으니까 피로가 쌓여서 다음 내용에서 집중력이 떨어지곤 했다.정말 사소할 수 있는건데, 강의 순서와 스터디 커리큘럼이 서로 상이한 것. 아직 컴포넌트 파트를 못들으신 분들은 꼭 참고하시길 바라며 메모남겨요.(강의에 Input 컴포넌트 파트 -> Feedback 파트인데, 스터디 커리큘럼은 Input -> Display)

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

진행 기간: 1주차(20250303 ~ 20250309) 📖1주차 학습내용디자인 토큰, 배리어블, 디자인 시스템에 대한 구조, 이름, 특징Color, Typography, Spacing/Size, Effect에 대한 구성, 네이밍, Scope 설정 방법Primitive/Semantic 배리어블, 스타일 직접 등록해보기Typography와 Shadow를 스타일에 연결하는 이유는 프로퍼티가 다양한 복합 배리어블이어서Spacing/Size 배리어블의 디자인 토큰은 티셔츠 or 숫자 Fixed Grid(Center), Fluid Grid(Stretch)에 대한 차이점은 화면 크기에 따라 그리드 크기를 고정할지 비례하게 만들지 ☺좋았던 점플러그인 활용하여 오래걸리는 단순 작업들을 효율적으로 처리하는 방법을 배울 수 있었다. 배리어블을 등록하고 디자인시스템을 만드는 과정을 여러 step으로 나누어 가르쳐주셔서 실습하는데 큰 어려움을 느끼지 않았다. 😁잘한 점원래 계획했던 시간에 강의를 들으려고 노력한 것. 강의듣는 것으로 하루르 시작하면서 그 동안 엉망이었던 아침 루틴을 조금이나마 개선할 수 있었다. 미션에서 배리어블 항목들을 최대한 보기 편하게 문서화하는데 노력한 것.Color 배리어블 미션에선 Print 플러그인 사용 후, 오토레이아웃 요소를 하나하나 뜯어 고쳐야만 했다.Typography 배리어블 미션에서 강의에서 알려준 플러그인으로 문서화하기엔 적합하지 않아 새로운 플러그인을 찾으려 했고, 이미 등록된 스타일은 pc모드로 되어 있어 mobile모드에 맞춘 스타일을 새로 생성해야 했다. 😅아쉬운 점계획대로 강의 수강과 미션을 다 끝내고 싶었는데 스타일가이드 문서화를 정리하다가 어려움을 겪으면서 오래걸린 것강의를 보며 따라 만드는건 괜찮지만, 다른 방법이나 디자인에 맞춰서 작업하는데에는 어려움을 느끼는 것