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

드디어 스터디의 마지막 주다!! 이번주에는 배리어블을 다크모드, 브랜드, 반응형 디자인, 다중언어 등 모드를 설정해서 적용하는 법을 배우고 페이지에 적용해봤다. 📖 강의 요약8. 모드 설정해서 배리어블 제대로 활용하기모드는 컬렉션 내 배리어블 값의 목록을 나타낸다. 컬렉션 내 다양한 모드가 있는 경우 맥락에 따라 맞춰서 사용할 수 있다.피그마가 제안하는 "맥락을 전환하는 경우"라이트모드/다크모드다중언어 지원디바이스별 대응멀티브랜드 지원다크모드다크모드 제작시 고려사항서비스 특성에 따라 다르게 적용 → 컨텐츠가 돋보여야 하는가? 미디어에 집중해야 하는가?구글 M3, 애플 HIG 참고하면 좋다 → 해당 환경에서 다크모드를 많이 사용한다라이트모드의 색상 체계를 반전시키면 될까? → 아니다!브랜드 아이덴티티, 접근성을 고려하고끊임없는 테스트를 통해 수정하기계획하기라이트모드의 색상 체계를 반전한 뒤접근성, 타 색상과의 조화 고려하고인터랙션: 단계에 따라 밝아지게 할지, 어두워지게 할지 등등 생각적용하기시맨틱에 적용실제로 색상을 계획할 때 참고하면 좋을 것 같은 문서를 덧붙인다.Dark Mode: How Users Think About It and Issues to Avoid Dark Mode (Apple HIG) 브랜드브랜드 구조 유형House of BrandsEndorsed BrandsSub BrandsBranded House적용하기theme에 추가 반응형 디자인최대값과 최소값 적용 → 오토레이아웃이 적용돼야 함기준 width, height값 정해서 모드에 적용 / 불린 프로퍼티 등 다양하게 적용 가능!Page, Header, Content 등 프레임마다 적용 가능잘 정리해서 사용하면 정말 무궁무진하게 확장할 수 있을 것 같다! 다중언어왜 다중언어를 지원하는 것이 중요할까?시장 개척 및 점유율 확대사용자가 접근하기 쉬움넷플릭스, 스포티파이글로벌라이제이션/로컬라이제이션LTR/RTL이미지에도 적용되면 좋음. 라인 좋은 사례현재 피그마 배리어블을 사용한 다중언어는 한계가 있다. 9. 페이지를 만들기 전에 알아야 할 사항컴포넌트 문서 정리하기*10, 11, 12 챕터는 미션에서 서술한다.플러그인Google Sheets Sync 중간점검 : 특강 및 LIVE QnA : 디자인 시스템 문서화 (feat. chatGPT 이용)디자인 시스템 문서화를 하는 이유하나의 제품을 만들기 위해 일관성, 효율성 제공함성공지표: 디자인 시스템을 얼마나 채택하였는가?잘 만든 디자인 시스템 문서: 참고하기 좋고 제대로 사용가능해야 한다라인, 지마켓, GOV.UK디자인 시스템에 나오는 공통된 주제와 내용Spec, States, Usage, Usage: Decide components, Anatomy, Behaviour, Best Practice, Props, Content guidelines, Accessibility, Responsive Design, Research and testing잘 만든 디자인 시스템을 선정해보는 시간이 있었다. “잘 만든 디자인 시스템의 기준이 뭘까” “나는 지금까지 어떤 지표들을 기준으로 디자인 시스템을 참고해왔나?” 라는 의문이 들어서 답하기 힘들었다. 지금 생각해보면 디자이너 입장(내 입장)에서 참고하기 좋았던 디자인 시스템 두 가지를 말했다. 디자인 시스템은 디자이너 외의 직군도 참고하는 문서라는 점! 을 잊지 말아야 한다. 어떻게 디자인 시스템 문서를 효과적으로 만들까?ChatGPT빠르게 효과적으로 작업 → *정확성 문제 있음다른 관점에서 보기 → *신뢰성 문제 있음프롬프트 프레임워크Context 맥락Information 정보Goal 목적Output 결과물이 모든 내용이 필요한가? 검토 필요볼드님께서 제작해주신 템플릿을 ChatGPT 3.5에 적용하여 디자인 시스템 문서를 작성해봤다. 덧붙여 타 수강생분들의 결과물을 보고 피드백해보는 시간도 가졌다. 결과물이 나쁘지는 않지만 확실히 인간 디자이너가 보고 검토할 필요가 있어보였다. 너무 재밌었고 의미있었던 시간! (+피드백을 꼼꼼하게 해주셔서 감동받았다. 감사합니다 !!) 디자인 시스템 문서화 도구와 플러그인Plugin: Propstar, EightShapes Specs, Stark 🎯 미션이번 미션은 전반적으로 정말 재밌었다. 이 강의의 꽃이 아닌가 싶다 ㅎㅎB2B shop admin, B2C learn cource, Mobile OTT 세 서비스의 페이지를 디자인했다.여태껏 만든 컴포넌트들을 조합하고, 서비스 성격이나 레이아웃에 맞지 않거나 혹은 실수가 있었던 컴포넌트를 다시 디자인했다. 개인적으로 이 후자의 과정이 좋았던게, 처음부터 완벽한 컴포넌트는 당연히! 만들 수 없다. 그럴 때 컴포넌트를 수정하여 디자인하는 방법을 알려주시는데, 별거 아닌 것처럼 보일 수 있지만 사실은 배우기 힘든 실무에서 활용하기 좋은 꿀팁들이라 생각한다.레이아웃이나 주로 사용되는 컴포넌트는 서비스 성격에 따라 달라진다. B2B 제품을 많이 디자인하는 입장에서 다른 서비스들도 더 디자인할 수 있는 기회가 생겨 좋았다. 또 데스크탑 화면을 먼저 디자인하고 → 모바일 확장을 고려하는 것과 반대의 경우 디자인 과정이 꽤 달라지는데, 그 과정도 미션중 거치게 되어 좋았다.제일 재밌게 했던 미션.🌼 회고잘 한 점무사히 스터디를 완주했다!아쉬운 점/보완할 점없다! 이번주는 시간관리를 아주아주 잘했다~ 👋 스터디 완주 소감강의를 수강하거나 미션을 진행할 때는 참 길게 느껴졌고 이외의 시간은 너무도 빠르게 만들어줬던 마법같던 한 달이 지나갔습니다. 강의 페이지에 적혀있는 강의 시간은 13시간 29분인데 어째서인지 공부를 하고 미션을 진행하고 하다보면 일주일에 최소 6시간 이상은 투자해야 했습니다. (저만 그런건 아니겠죠)그럼에도 완주할 수 있었던 이유는 다른 러너분들이 열심히 달리시는 모습을 보며 자극을 느끼고, 매주 들었던 라이브 특강에서 학습의 기쁨을 느꼈고, 무엇보다 강의 자체가 잘 짜여졌기 때문이라고 생각합니다. 스터디 진행해주신 인프런 관계자분들, 정말 열정적으로 가르쳐주신 볼드님, 그리고 같이 달려주신 러너님들 전부 감사합니다! ☺이제부터는 지금까지 공부했던 것들을 복습하고, 실무와 사이드프로젝트에서 잘 적용할 수 있도록 응용해보겠습니다. 💨(+첫 라이브특강때 다짐했던 책 샀습니다. ㅎㅎ)

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

주중에 스케줄이 많이 잡혀서 따라잡기 쉽지 않았다. 때문에 다크모드 배리어블은 오늘 밤에 공부할 예정이라, 피드백과 네비게이션 컴포넌트, 그리고 특강에 대해서만 작성한다. 덧붙여 오늘부터는 강의요약을 좀 더 열심히 작성해봤다! 다른 분들의 발자국을 보고 약간 반성해서…ㅎㅎ 그럼 시작한다. 📖 강의 요약6. 피드백(Feedback) 컴포넌트 만들기피드백 컴포넌트는 사용자에게 행동의 결과를 전달하는 방법을 제공하는 컴포넌트를 말한다. (출처: https://www.geeksforgeeks.org/react-mui-feedback-components/) 강의에서는 Alert, Toast, Skeleton Loader, Loading Spinner, Progress Bar, Modal을 다룬다. AlertAlert는 화면 상단에 눈에 띄는 메시지를 표시하는 컴포넌트다. 새로운 기능을 홍보하거나 피드백 메시지를 제공하는 데 사용된다. ‘Alert’라는 이름으로 42%, ‘Banner’라는 이름으로 31% 사용되어 강의에서는 Alert라 부른다. (출처: UI Guideline/Alert)AnatomyAlertcontentleadingIcontextContainertitledescriptionProperties🔷 Status: brand, neutral, info, warning, success, error🔷 Style: outline, filled, transparent👁 Icon🔹 → Icon (info, warning, success, error 제외)🔠 Title👁 Description🔠 → Description👁 Close ToastToast는 일반적으로 페이지 오른쪽 상단에 떠 있는 상자로 표시되는 컴포넌트다. 토스트는 콘텐츠를 위한 제한된 공간을 제공하므로 콘텐츠가 짧고 간결해야 하며, 사용자 행동에 대한 응답으로 즉각적인 피드백을 제공하거나 앱이 수행했거나 할 프로세스를 사용자에게 알려야 한다. ‘Toast’으로 48%, ‘Notification’으로 22% 사용되므로 강의에서는 Toast를 사용한다. (출처: UI Guideline/Toast)AnatomytextContainertitledescriptionactionItemsiconbuttonbuttonProperties🔷 Type: textonly, text&action, text&longeraction🔷 Status: neutral, info, error, warning, success, inverse🔠 Title👁 Description🔠 → Description👁 Action👁 Close Skeleton LoaderSkeleton은 콘텐츠가 로딩 과정에 있다는 것을 시각적으로 전달하기 위해 UI의 low fidelity 표현을 제공한다. 이름은 ‘Skeleton’으로 38%, ‘Skeleton Loader’으로 31% 사용된다. (출처: UI Guideline/Skeleton)왜 Skeleton Loader로 쓰셨는지가 또 궁금해서 찾아봤다. ChatGPT 3.5가 말하길, 스켈레톤 로더는 스켈레톤과 유사하지만 애니메이션이 추가된 경우가 많아 로딩 중임을 사용자에게 더 명확하게 알려준다고 한다. 따라서 스켈레톤은 단순히 레이아웃의 자리 표시자임을 강조하고 스켈레톤 로더는 로딩 상태를 더 강조한다고 볼 수 있다. 실제로 ‘스켈레톤’ 용어를 사용하는 Polaris는 정적이고, ‘스켈레톤 로더’ 용어를 사용하는 Thumbprint는 동적이었다. 그리고 강의에서도 애니메이션을 제작한다 😎!Anatomy : 도형을 사용할 뿐이라 구조라고 할 것이 없었다. 다만 Linear 사용 값에 신경쓸 필요가 있어보인다!Properties🔷 Type: circle, rect, text🔷 Progress: 0, 33, 66 Loading Spinner스피너는 처리되고 있는 상태를 나타나는 애니메이션이 있는 원의 윤곽이다. (출처: UI Guideline/Spinner)spinnerLoaderProperties🔷 Size: sm-16px, md-24px, lg-32px, xl-48px🔷 Type: primary, secondaryspinnerAnimationProperties🔷 Progress: 0, 25, 50, 75 Progress Bar프로그레스 바는 진행중인 사용자의 과정에 대한 피드백을 제공하기 위한 선형 지표다. (출처: UI Guideline/Progress)AnatomyBarbarprogressbarIndicatorstartingPointendPointProperties🔷 Progress: 0, 25, 50, 75, 100 Modal & SlotModal은 Slot 컴포넌트를 만든 뒤 제작했다. 여기서 Slot 컴포넌트는 잘 몰라서 찾아봤다.Figma에서 컴포넌트를 구축할 때 일부 컴포넌트는 많은 유연성이 필요하다. 이러한 유연성과 자유를 슬롯을 통해 부여할 수 있다. 사용 방법은 다음과 같다. 컴포넌트 내부에 슬롯 컴포넌트를 배치하고, 이후 디자이너는 필요할 때마다 슬롯을 다른 컴포넌트로 교체한다. (2차 출처: [UI자료] Figma 슬롯 구성 요소: 사용 이유 및 사용 방법, 1차 출처: Figma Slot Components: why and how to use them)SlotAnatomytitleicontitle(option) descriptionProperties🔷 Size: default, small SlotGroupAnatomySlot1Slot2Slot3…Slot6Properties🔷 Direction: horizontal, vertical🔷 Size: default, small🔷 Reverse: true, false🔹 Nested Instances ModalAnatomycontenttopContenticon/placeholdertextContainertitledescriptionslotGroupslotGroupcloseIconProperties👁 Leading Icon🔹 → Leading Icon🔠 Title👁 Description🔠 → Description🔹 Nested InstancesModals : 용도에 따라 Modal의 슬롯, 아이콘 등을 조정하여 만들어둔 컴포넌트셋Modals 제작시 참고 → 18 Modals & Popups 7. 네비게이션(Navigation) 컴포넌트 만들어보기내비게이션은 작업을 완료하기 위해 앱의 화면 사이를 이동하는 행위이다. 전용 내비게이션 구성 요소, 콘텐츠에 내비게이션 동작 포함, 플랫폼 어포던스 등 여러 수단을 통해 활성화된다. (출처: M2) Link, Breadcrumbs, Tabs, Bottom Navigation, Pagination, Side Navigation, Header, Carousel을 포함한다.Link링크는 탐색 요소로 사용된다. (출처: UI Guideline/Link)AnatomyiconLabeliconProperties🔷 Type🔷 Style🔷 State🔠 Label👁 Leading Icon🔹 → Leading Icon👁 Trailing Icon🔹 → Trailing Icon Breadcrumbs브레드크럼프는 사용자가 레벨 간의 계층 구조를 이해하고 다시 탐색하는 데 도움이 되는 보조 탐색 패턴이다. (출처: UI Guideline/Breadcrumbs)AnatomyLink-1iconLabeliconLink-2Link-3Link-4current pageProperties🔷 Max Level👁 Level4👁 Level3👁 Level2👁 Level1🔠 Current Page Tabs탭은 사용자가 동일한 컨텍스트 내에서 쉽게 탐색할 수 있도록 돕는 컴포넌트다. (출처: UI Guideline/Tabs)TabsAnatomypart-1part-2part-3…part-8Properties🔷 Items: 8, 7, 6, 5, 4, 3, 2, 1🔹 Nested InstancesTabPartAnatomyIconLabelProperties🔷 Selected: false, true🔷 State: default, hover, press, focus, disabled👁 Leading Icon🔹 → Leading Icon🔠 Label Bottom Navigation바텀 네비게이션은 화면 하단에 3~5개의 목적지를 표시하고, 각 목적지는 아이콘과 선택적 텍스트 라벨로 표시된다. (출처: M2)navbarAnatomynavbarItem-1navbarItem-2…navbarItem-5Properties🔷 Type: icons&label, icononly🔷 Items: 5, 4, 3🔹 Nested InstancesnavbarItemAnatomyIconIconbadgeLabelProperties🔷 Type: icononly, icon&label🔷 Selected: false, true🔷 State: default, hover, focus, press🔹 Icon : 네비게이션에 필요한 아이콘만 선택🔠 Label👁 Badge🔹 Nested Instances Pagination페이지네이션은 다음 또는 이전 페이지로 이동하기 위한 제어와 함께 콘텐츠나 데이터를 여러 페이지로 분할하는 데 사용된다. (출처: UI Guideline/pagination)paginationAnatomyprevpart/paginationControlpart/paginationControlpagepart/paginationPage…nextpart/paginationControlpart/paginationControlProperties🔹 Nested Instancespart/paginationPageProperties🔷 State: default, hover, selected, morepart/paginationControlProperties🔷 State: default, hover, active, disabled🔹 Icon Side Navigation사이드 네비게이션은 사용자가 제품이나 섹션의 콘텐츠 등 페이지 내 탐색을 도와주는 측면 패널이다. (출처: UI Guideline/sidebar)Side NavigationAnatomyTopsidenavMenuGroupsidenavMenuGroupBottomsidenavMenuGroupProperties🔷 Type: full, icononly, icon&labelpart/menuItemAnatomyicontextContainerTitleDescriptionbadgeProperties🔷 Type: full, icononly, icon&label🔷 Selected: false, true🔷 State: default, hover, press, focus🔷 Disabled: false, true🔠 Title:👁 Leading Icon🔹 → Leading Icon👁 Description🔹 → Description👁 Badge🔹 Nested Instancespart/headingAnatomyheadingTextheadingdividerProperties🔠 headingText👁 DividersidenavMenuGroupAnatomypart/headingmenuItem-1menuItem-2menuItem-3…menuItem-8Properties🔷 Type: full, icononly, icon&label👁 Heading🔹 Nested Instances Header헤더는 모든 페이지 상단에 나타나는 요소로 일반적으로 사이트 이름과 기본 탐색을 포함한다. (출처: the component gallery)HeaderAnatomyleadingItemlogonavigationnavItem …functionnavItem …Properties🔹 Nested InstancesnavItem/headerMenuGroupAnatomypart/headerMenuItem …Properties🔹 Nested Instances headerMenuItemAnatomyicontextContainertitledescriptionProperties🔷 Selected: false, true🔷 State: default, hover, press, focus🔷 Disabled: false, true🔠 Title👁 Leading Icon🔹 → Leading Icon👁 Description🔹 → Description👁 Badge👁 HorizontalExpandnavItemAnatomycontainerlabeliconlabeliconProperties🔷 State: default, hover, focus, selected🔷 Type: navigation, setting, user, search, more, help, alert🔷 Sub Menu: false, true👁 Label🔠 → Label👁 Nav Icon🔹 → Nav Icon👁 Badge🔹 Nested Instances Carousel캐러셀은 관련 콘텐츠 항목 세트를 연속으로 표시하기 위한 컴포넌트다. (출처: UI Guideline/carousel)carouselAnatomyparts/imagePlaceholdercarouselArrowcarouselArrowcontainersubtitlecontentscarousel Main Titlecarousel ContentcarouselIndicatorProperties🔹 Nested InstancescarouselArrowProperties🔷 Direction: left, right🔷 State: default, hover, selected, disabled🔷 Size: md, lgcarouselIndicatorAnatomycarouselDot1carouselDot2Properties🔷 Items: 5, 4, 3, 2🔹 Nested InstancescarouselDotProperties🔷 State: default, hover, selected 플러그인Find/Focus : 특정 텍스트가 있는 레이어만 선택할 수 있다.중간점검 : 특강 및 LIVE QnA : 타이포그래피이번 특강은 타이포그래피 배리어블 관련 내용이었다.primitive, sematic 두 가지 모두 사용해야 한다.primitive: font family, font size, font style, font weight, line height, letter spacingsemantic: heading, bodytypeface, font, font family 등 용어의 정의를 정확히 알고 사용할 것(헷갈릴 수 있다)시스템별로 폰트를 지정할 수도 있으나 헤비해질 수 있으므로 고민/논의가 필요하다다른 배리어블과 마찬가지로 스프레드시트에 작성, 정리 후 작업에 들어가야 한다배리어블 적용시 고려사항이 많으므로 잘 정리해야 할 것 같다. 🎯 미션미션 9: 피드백 컴포넌트 전체 만들어보고 점검하기미션 10: 네비게이션 컴포넌트 만들어보기미션 11: 네비게이션 컴포넌트 나머지 만들고 마지막 점검하기미션 12는 시간관계상 진행하지 못했다.슬롯 컴포넌트를 알게 된게 이번주 작업 중 제일 재밌었던 부분이다. 이 컴포넌트를 다른 컴포넌트에서는 어떻게 활용하는지 더 알아보고 싶다.캐러셀 컴포넌트는 바탕 이미지에 따라 제작법이 많이 달라질 것 같아서 이 부분도 더 알고싶다. 네비게이션 컴포넌트를 만드는게 가장 힘들었다. 만드는 과정이 힘들진 않았는데 고려해야 할 요소가 많아서 조금 질렸다.🌼 회고잘 한 점어떻게든 미션을 따라가려고 노력했다!아쉬운 점시간관리를 잘 못해서 공부한 내용을 잘 정리하지 못했다. 그래도 발자국을 작성하면서 정리된 부분들이 많다.보완할 점필기를 열심히 하기..다음주 계획미션 잘 따라가기

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

2주차는 확실히 쉽지 않았다. 휴일이 많다고 여유롭게 생각했었는데 휴일이 많다는 말은 약속이 생긴다는 말이다. 때문에 오히려 시간에 쫓겼다. 저번주의 보완할 점 중 "강의 메모 이외에 느낀 점 그때 그때 작성하기"가 있었는데, 강의 메모도 제대로 못했던 것 같아 많이 아쉽다. 그래도 어떻게든 스케줄에 맞춰 이번주 공부를 마무리해서 그 과정을 작성한다. 📖 강의 요약Day 7 중간점검 : 특강 및 LIVE QnA5월 4일에는 중간 점검 특강이 있었다. 네이밍 컨벤션, 아이콘, 멀티 에딧과 관련된 내용이었다. Naming Convention먼저 네이밍 컨벤션시 팁을 알려주셨다. 항상 신경쓰려고 하는데 놓치는 부분이다. 네이밍 컨벤션은 코드에서 사용되는 명명 규칙이다. snake_case, camelCase, PascalCase, kebab-case 등이 있다. 개발자의 이름 짓는 법, 네이밍 컨벤션 이라는 글에 자세히 설명되어 있다. 그중 camelCase 를 일반적으로 선호한다고 하셨는데, 이유가 궁금해서 더 조사해봤다.❓ camelCase가 디자인 시스템에서 일관된 네이밍 컨벤션을 적용할 때 유용한 방법인 이유가독성: camelCase는 여러 단어를 하나의 식별자로 결합할 때 각 단어의 시작 부분을 대문자로 표시하여 가독성을 높인다.일관성: camelCase를 사용하면 모든 변수, 함수, 클래스 등에 동일한 네이밍 규칙을 적용할 수 있다.자동완성 및 검색: 대부분의 통합 개발 환경(IDE)은 camelCase를 사용하여 자동 완성 및 검색 기능을 제공한다. 따라서 camelCase를 사용하면 개발자가 코드를 더 쉽게 작성하고 탐색할 수 있다.통합성: camelCase는 다양한 프로그래밍 언어 및 기술 스택에서 일반적으로 사용되는 네이밍 컨벤션이다. 이는 프로젝트를 다른 팀원과 공유하거나 외부 라이브러리 및 프레임워크와 통합할 때 유용하다.(ChatGPT 3.5 의 답변을 인용함) Icons그 다음으로는 아이콘을 선이 아니라 면으로 작업해야 하는 이유, 그리고 면 작업시 팁들을 들었다. 이게 특강 중 핵심 내용이었는데, 정말 꿀팁이었다. 특강자료는 수강생들만 받을 수 있었던 것 같아 해당 내용은 생략한다. Multi Edit강의 녹화될 당시 없었던 기능이라 추가 설명해주셨다. 알고있던 기능이지만 알고있다고 생각하는 것들이 원래 가장 무섭기 때문에... 공식 문서를 한 번 살펴보고 체크해봐야 할 것 같다.❗공식 플레이그라운드는 이쪽이다. → Multi-edit playground 3. 컴포넌트 만들기 위한 준비본 강의로 돌아가, 섹션 3에서는 컴포넌트를 만들기 전 컴포넌트에 대한 기본 설명과 준비 방법을 배웠다. 컴포넌트의 용어에는 컴포넌트 세트, 베리언트, 프로퍼티, 값이 있다. 컴포넌트 세트(Component Set)는 컴포넌트 안에 여러 컴포넌트를 가지고 있는 것을 말한다. 베리언트(Variant)는 컴포넌트 세트 안에 있는 하위 컴포넌트 각각을 뜻한다. 프로퍼티(Property)는 카테고리처럼 컴포넌트 내부의 요소들을 구분한다. 값(Value)은 프로퍼티 안의 내용물이다. ㅤ그 중 프로퍼티는 불린 프로퍼티, 텍스트 프로퍼티, 인스턴스 스왑, 베리언츠 프로퍼티가 있다. 불린 프로퍼티(Boolean Property)는 true, false 값으로 on, off를 조정한다. 텍스트 프로퍼티(Text Property)는 텍스트의 값을 수정한다. 인스턴스 스왑 프로퍼티(Instance Swap Property)는 다른 인스턴스로 교체할 수 있는 프로퍼티다. 마지막으로 베리언츠 프로퍼티는 (Variant Property) 다양한 상태, 스타일을 적용할 수 있는 프로퍼티다. 컴포넌트를 만드는 순서는 다음과 같다.기본 싱글 컴포넌트 만들기 : 배리언트 프로퍼티를 제외한 모든 프로퍼티 등록인스턴스 복사 후 테스트 : 리사이징, 프로퍼티 등배리언츠 프로퍼티 만들기 : 상태, 형태 등 베리언츠 프로퍼티 등록하기테스트 : 베리언츠 이름, 순서 체크내부 인스턴스의 프로퍼티를 가져오기 입력, 디스플레이 컴포넌트를 만든 뒤 이걸 보니 감회가 다른데, 모든 단계가 정말 중요하다. 4. 입력(Input) 컴포넌트 만들기이제부터는 본격적으로 컴포넌트 만들기 공장에 들어간다. 컴포넌트 만들기는 입력, 디스플레이, 피드백, 네비게이션의 4가지 섹션으로 구분되어있다. 역할/목적에 따라서 분류하신듯 하다. 해당 섹션들끼리 만드는 방식, 필요한 요소들이 비슷해서 따라 만들기 쉬웠다. HTML의 input은 MDN에서 다음과 같이 정의한다(편의상 HTML의 정의를 가져왔으며 디자인 시스템에서의 의미는 다를 수 있다). 사용자로부터 데이터를 수신하기 위해 대화형 제어를 생성하는 데 사용되며, 버튼, 체크박스, 날짜, 이메일 등 포함된다.강의에서 제작하는 인풋 컴포넌트는 버튼, 체크박스, 라디오 버튼, 스위치 버튼, 텍스트 필드, 텍스트 상자, 셀렉트다. 그중 제작할 때 궁금한 사항이 있었거나 덧붙일 말이 있는 컴포넌트만 따로 글을 쓴다. 버튼버튼은 많이 보고 제작해서 잘 알고 있다고 생각했는데 아니었다. 더 공부해야겠다.❓ 버튼을 제작하던 중 destructive의 역할이 궁금해져 찾아봤다. Apple Developer에 따르면, destructive button은 사용자 데이터를 삭제하거나 되돌릴 수 없는 작업을 수행하는 버튼이다. destructive button은 모양을 통해 사용자가 버튼을 탭할지 클릭할지 신중하게 고려해야 함을 나타낸다. 예를 들어 SwiftUI는 빨간색 배경을 사용하여 수정자와 함께 추가하는 destructive button을 제공한다. 버튼은 경우의 수가 많아 더 세부적으로 분류하는 것을 추천한다고 하셨다. 아래는 Polaris Components 의 버튼 컴포넌트다. 컨트롤 그룹(체크박스, 라디오버튼, 스위치)컨트롤 그룹도 버튼과 마찬가지로 안다고 생각하고 쉽게 만들지 말고 더 주의를 기울여서 제작해야 한다.❓ 컨트롤 그룹(Control Group)이라는 단어는 어디서 온건지 궁금해져서 찾아봤다.M2는 Selection controls라고 Checkboxes, Radio buttons, Switches 를 묶어서 말하고 용도는 다음과 같이 정의한다. "선택 컨트롤을 통해 사용자는 선택사항 선택, 설정 켜기 또는 끄기 등의 선택사항을 포함하는 작업을 완료할 수 있습니다. 선택 컨트롤은 사용자에게 의사 결정을 요청하거나 설정 또는 대화 상자와 같은 기본 설정을 선언하는 화면에서 찾을 수 있습니다."jQuery 에서는 form controls를 Controlgroup라 말한다.chatGPT3.5가 말하기로는, 비슷한 목적을 가지고 사용되는 요소들이라서 같이 묶이는 것이라 한다. 5. 디스플레이(Display) 컴포넌트 만들기디스플레이 컴포넌트는 데이터를 표시하는 컴포넌트를 말한다. 강의에서는 아바타, 아코디언, 뱃지, 툴팁, 구분선, 칩, 카드, 테이블을 다룬다. 그 중에서 툴팁, 구분선, 테이블만 따로 이야기한다. 툴팁툴팁의 포지셔닝이 재밌어서 더 찾아봤다. 아틀라시안에서는 다음과 같이 사용한다. 구분선구분선을 만드는 방법은 두 가지가 있다. frame, stroke. 각자 장단점 있으나 강의에서는 strokes 로 제작한다. 여기서 Auto Layout -> Storkes -> Excluded를 Included 로 변경하면 strokes 제작시의 단점이 많이 줄어든다! 테이블회사 특성상 테이블 만드는 일이 많은편인데 기본적인 가이드를 잘 제시해줘서 큰 도움이 되었다. 이 부분은 미션에서 후술한다.❗ Carbon Design System v11 의 테이블을 찾아봤는데, 헤더의 소팅을 세부적으로 분류하여 참고하기 좋았다. 또 강의에서는 column을 제작하는 방식으로 테이블을 구성했는데, 카본에서는 row로 제작하여 header + toolbar + row + pagination으로 조합하고 있었다. 이런 사례들을 더 찾아보는 것도 공부에 큰 도움이 될 것 같다! 🌟 컴포넌트 제작시 Tip강의에서 그때그때 이야기해주신 방법들인데 정리해두면 나중에 참고하기 좋을 것 같아 모아봤다.instance swap property 설정하기:이름짓기: 타 property와 겹칠 경우 → 를 앞에 추가하기이 부분은 디자이너마다 방법이 다를 듯하다. 이 방법은 이해하기 쉽고 간편해서 좋았다. 다른 디자인시스템에서 이런 부분까지 찾아본 적은 없었는데, 앞으로 눈여겨볼 것 같다. 👀어떤 값을 먼저 보여줄지 결정하기: Preferred values → 상황에 따라 다르게 설정여러가지 아이콘을 보여줄 경우 → 모든 아이콘 체크특정 아이콘만 보여줄 경우 → 해당 아이콘만 체크 ex. 바텀 네비게이션우선순위가 있는 경우 → 순서에 주의해서 체크 focus-ring 제작하기컴포넌트 제작하여 필요할 때마다 붙여넣고 Absolute positioning 하기❓ focus-ring 이란? 포커스 표시기(focus indicator, '포커스 링focus ring'으로 표시되는 경우가 많음)는 페이지에서 현재 포커스가 설정된 요소를 식별한다. 마우스를 사용할 수 없는 사용자의 경우 이 표시기가 마우스 포인터의 독립형 역할을 하므로 매우 중요하다. (출처: web.dev/스타일 포커스) 접근 가능한 WCAG 규격 초점 표시기 설계 가이드 : 포커스링을 찾아보다가 알게 된 아티클인데 잘 정리되어있는 것 같아 첨부한다! 다음에 이 글을 다시 볼 때 다시 읽을 수 있도록~ 여태껏 stroke로 작업해왔는데..🫠....... 내가 이해하고있는 포커스의 개념과 달랐어서 거기서부터 놀랐다. 아직 배울 것이 많다! Absolute positioning 크기 상위 레이어와 같이 조정되도록 설정하기: constraints → Left and right, Top and bottom내부 인스턴스 가져오기 : properties → nested instancesicon placeholder 제작하기 : 임의의 '아이콘 플레이스홀더'를 넣어서 플렉서블하게 사용할 수 있도록 함. 크기를 자유롭게 조정할 수 있음.profile에 이미지 넣기 : Unsplash → portrait → style 지정 🎯 미션미션 5~8 의 결과물은 다음과 같다. 최대한 문서화하려 노력했다.미션 5 피그마 컴포넌트 기초 배우고 입력 컴포넌트 만들어보기미션 6 입력 컴포넌트 나머지 만들고 마지막 점검하기미션 7 디스플레이 컴포넌트 만들어보기미션 8 디스플레이 컴포넌트 나머지 만들고 마지막 점검하기1주차와 마찬가지로 항상 볼드님이 제작하시는 디자인 시스템을 최대한 따라서 만드려고 노력했다. 강의를 제작하시는 입장에서 최대한 표준적인 디자인 시스템을 만드셨을테고, 나는 그걸 배우는 입장이기 때문이다. 기초가 튼튼해야 나중에 회사에서도, 사이드 프로젝트에서도 응용할 수 있다! 예외가 하나 있었는데, 테이블이다. SI, 솔루션 기업에서 일해왔고 일하고있어서 테이블을 제작하는 일이 꽤 많다. 그래서인지 나도 모르게 관성적으로 디자인해왔는지 테이블 강의를 들으면서 굉장히 놀랐다. 효율적이고, 배리에이션을 만들기도 간편했다. 덕분에 신나서 몇 개 더 만들었다. 다만 소팅 헤더나 아이콘 버튼 등은 프로퍼티 활용 방법을 더 고민해봐야할 것 같다. 🌼 회고잘 한 점미션 따라가기에 급급했지만 그와중에도 나름대로 문서화를 했다.아쉬운 점월~수에 바빠서 미션 일정을 제대로 따라가지 못했다.보완할 점평소 플러그인 추천 글을 더 살펴봐야 겠다.컴포넌트를 공부할 때 실전에 필요한 것들만 급급하게 공부하는 단계를 넘어서야 한다. 시트에 적으면서 다른 디자인시스템들과 비교하는 등 그 이상의 공부가 필요하다. 또 컴포넌트 문서화 방법도 공부할 필요가 있다.다음주 계획미션 잘 따라가기강의 메모 잘 하기 flexible한 작업물을 만들려면.. inflexible하게 작업해야하나보다.😇 지금은 볼드님의 방법을 그대로 따라하는 중이지만, 실전에서는 네이밍 규칙 정하고, 문서화하고, 스타일이나 배리언트 점검도 스스로 해야 하니 "제대로" 디자인 시스템을 구축할 때 드는 공수가 정말 어마어마할거다. 처음 수강 신청할 때까지만해도 베리어블을 써서 컴포넌트 만드는 것! 만 생각했는데, 컴포넌트 만들 때 주의사항, 잘 만들기 위한 고려사항들까지 생각하게 됐다. 점점 발전하는 내가 보여서 기분이 좋다. 다음주에 배울 내용들이 기대된다.

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

직장과 사이드 프로젝트를 병행하던 중 디자인 시스템에 대한 심화적인 공부의 필요성을 느꼈다. 사수 없는 디자이너라 스스로 배우고 성장해야만 했는데, 해외 아티클, 유튜브 등을 열심히 찾아봤지만 "어디서부터 어디까지 실무에서 적용시켜야 할지 모르겠다"는 문제 때문에 어려움을 겪었다. 그러던중 인프런 워밍업 클럽 - 스터디 1기의 존재를 알게됐고, 좋은 기회로 보여 신청했다. 📖 강의 요약0. OT첫 프로그램은 OT였다. 줌으로 화상회의를 진행하는 동시에 피그잼에서 강사님과 의사소통했다. 덕분에 집중이 잘됐다. 스터디는 다같이 으쌰으쌰하는 분위기가 중요한데, 참여자 모두가 쉽게 사용할 수 있고 귀여운 의사소통이 가능한 툴이라 그랬던 것 같다.평일 저녁에 짬을 내서 참여할 가치가 있었다. 기존에 존재하는 강의를 바탕으로 스터디로 진행하다 보니 안내사항이 많았는데, OT에서 설명을 잘해주셔서 따라가면서 잘 이해할 수 있었다. 특히 피그잼에서 "내가 왜 이 스터디에 참여했는지" "무엇을 얻고 싶은지" 등을 스스로 생각하고 써나가는 시간이 있었는데 이 시간이 정말 좋았다. 다른 사람들이 어떤 각오로 참여하게 됐는지를 보면서 동감하고 신기해하기도 하면서 "다같이 30일동안 열심히 공부할 사람들이 여기 있구나!"라는걸 새삼 느끼며 설레는 마음으로 스터디를 시작했다. 1. 디자인 시스템과 디자인 토큰강의는 베리어블이 먼저지만, 정리 과정에서 순서를 수정했습니다초반 강의에서는 디자인 시스템과 디자인 토큰 등 강의에서 다루는 개념들을 먼저 정리하는 시간을 가졌다. 아는 내용과 모르는 내용이 섞여있었는데, 전자는 내가 이미 아는 개념들을 강사님 입장에서 설명해주시는 것을 들으면서 "아, 저렇게 설명할 수도 있는 부분이구나!"고 생각하며 복습했고, 모르는 부분은 아는 부분보다 열심히 메모하고, 따로 표시해두었다. 1) 디자인 시스템디자인 시스템은 일관성과 확장성을 가진 재사용 가능한 컴포넌트와 패턴, 가이드를 말한다.디자인 시스템의 구성 요소는 다음과 같다.디자인 원칙/철학 Design Principle스타일 가이드 Style Guide컴포넌트 라이브러리 Component Library패턴 라이브러리 Pattern Library문서화 Documentation시스템 관리 운영 System Governance이 중에서 내가 주로 사용했던 것은 스타일 가이드, 컴포넌트 라이브러리뿐이었어서 다른 부분들을 어떻게 실무에 적용할 수 있을지 고민했다. 디자인 시스템의 장점은 다음과 같다.디자인 일관성 유지브랜드 강화효율적인 개발시간 단축팀 간 협업 강화빠른 온보딩유지 보수 용이높은 품질의 경험 디자인시스템을 시작할 때는 다음 사항들을 주의해야 한다.비즈니스, 디자인, 개발의 이해에서부터 시작디자이너 혼자서 만드는 게 아니라 회사의 여러 구성원이 함께 만드는 것작은 단계에서부터 성공해나가야 함디자인시스템은 보통 '효율'을 위해 만드는 시스템이지만 제대로 만들려면 시간과 비용이 많이 든다. 따라서 초반에 어디까지 만들지 제대로 설정하는 게 중요하다. 그리고 사이드프로젝트를 할 때도 느꼈지만 만들다보면 또 수정할 일이 생기고, 여기서 막히고 저기서 충돌하기 때문에.. 작은 성취들을 소중히 여기는 태도가 꼭 필요하다. 2) 디자인 토큰디자인 토큰은 모든 UI 요소의 기본 구성 요소로 작고 반복할 수 있는 디자인 결정이다. 브래드 프로스트의 아토믹 디자인 개념에서는 '전자'단계에 속한다.전자 -> 원자 -> 분자 -> 유기체 -> 템플릿 -> 페이지 토큰과 관련된 브래드 프로스트의 새로운 아티클도 첨부한다. 다음에 시간될 때 차근차근 읽어보면 개념 이해에 더 도움이 될 듯 하다. 그렇다면 디자인 토큰은 왜 필요할까? 바로 확장이 쉽고 관리가 유연하다는 이유 때문이다.❓ 여기서 "json으로 내보내기 가능해서 여러가지 플랫폼으로 이동 가능하다"고 강사님이 말하셨는데 이유가 궁금해서 찾아봤다.json은 JavaScript Object Notation의 약어로, 데이터를 표현하는 데 사용되는 형식이다. 현재 데이터 교환의 범용 표준이며 프론트엔드와 서비스 측 개발, 시스템, 미들웨어, 데이터베이스를 포함해 프로그래밍의 모든 영역에 사용된다. (출처: 거의 모든 SW 개발의 필수⋯JSON 데이터 포맷의 이해 - ITWorld Korea)디자인 토큰 형식 모듈/4.파일 형식에 따르면 json이 채택된 이유는 다음과 같다.1. 많은 프로그래밍 언어의 표준 라이브러리에서 광범위하게 지원된다. 이것은 개발자의 진입 장벽을 낮출 것으로 예상된다. 2. 현재 인기있으며 광범위하게 사용되는 언어다. 많은 사람들이 익숙하기 때문에 학습 곡선을 낮출 것으로 예상된다.3. 이진법이 아닌 텍스트 기반이어서 기본 텍스트 편집기 이외 특수 소프트웨어 없이 디자인 토큰 파일을 편집할 수 있다. 3) 베리어블의 이름과 구조혼자 공부할 때 가장 어려웠던 부분인데 설명을 너무 잘해주셔서 열심히 들었다. 모든 스터디가 끝난 뒤 가장 먼저 복습하게 될 챕터가 아닐까 싶다. 베리어블의 구조는 다음과 같다.이름(Name), 값(Value), 유형(Type)설명(Description)그룹 베리어블의 계층은 다음과 같다. 기업마다 정의하는 용어가 다를 수 있지만 신경쓰지 말고, 계층마다 기업들이 어떤 목적을 가지고 역할을 분류했는지에 초점을 맞춰야 한다.Raw value: 본래의 값 #D6840BGlobal/primitive/core/base/foundation/root: 사용 맥락에 상관없이 디자인 언어의 기본 값 Orange-mediumAlias/semantic/applied/purpose: 특정 사용 맥락과 의도를 전달할 때 쓰이는 값 Brand-primaryComponent/overwrites/scoped: 컴포넌트와 관련된 모든 디자인 속성을 가진 값 Button-primary-background-color❓ raw value와 primitive는 뜻이 똑같은데 왜 다른 분류 용어로 사용하는지 궁금했다. 베리어블 이름의 구조는 Namespace + Object + Base + Modifier로 이루어져있다.Namespace>System은 다른 디자인 시스템과 구분하기 위한 접두어로, 주로 모든 베리어블/토큰 앞에 위치한다.Object>Component는 디자인 시스템 내에서 특정 컴포넌트의 스타일 및 레이아웃을 적용하고 싶을 때 사용된다.Base는 Category와 Property로 구성되는데, Category는 UI 기본 구성 요소를 공통된 유형으로 그룹화하며 Property는 각 카테고리 내에서 특성에 따라 세분화된 것들이다.Modifier는 하나의 디자인 요소를 여러 상황, 상태에 따라 변형할 수 있도록 한다. Variant와 State로 구성되는데, Variant는 시각적 위계질서와 기능을 표현한다. State는 인터랙션 상태와 크기를 표현한다. ❓ 토큰 앞에 $(달러) 기호를 붙이는 것도 json 기반이라 그런건지 궁금했다. 찾아본 결과는 다음과 같았다.디자인 토큰 형식 모듈에 따르면, 토큰 이름과의 충돌을 방지하기 위해 토큰 속성은 달러 기호($)로 접두사를 붙인다. 이 접두사를 사용하면 예약어 목록이 필요 없고 사양을 미래에 대비하는 데 도움이 된다.덧붙여 다른 변수명에서 잘 사용하지 않는 기호를 사용하여 다른 변수와의 충돌을 줄이기 위해 $를 사용한다는 내용은 이 블로그에 잘 설명되어 있다. 베리어블 구조, 이름을 지을 때 몇 가지 실무 팁도 알려주셨다.개발자와 디자이너 둘 사이의 공통된 이름 짓기미리 80% 정도는 계획을 하도록 한다 (엑셀 시트, 피그잼 추천)2~3개 정도의 레퍼런스에서부터 시작하기사이드프로젝트에서 파운데이션을 제작하던 중 어떻게 보면 벼락치기 개념으로 들은 강의였어서 조금만 더 빨리 들었다면 같이 엑셀로 계획하고 할 수 있었을텐데! 라고 후회했다 😇... 정말.. 정말 중요한 팁을 주셨다. 디자인시스템 관련한 레퍼런스는 사실 너무♾ 많고, 그중에서도 개발하려는 서비스의 특성/규모 등에 맞춰서 조절해야 하니 욕심부리지 말고 적당한 선에서 참고하며 시작해야 한다 ... 2. 스타일 파운데이션 설정색상 Color사이드프로젝트를 할 때 가장 많이 헤맸던 부분인데, 여러가지 레퍼런스를 참고해서 정리해주신 파일을 기반으로 만들어야 할 베리어블을 정리한 뒤 제작하니 시간도 절약하고 이후 개발자가 이해하기도 좋을 것 같았다. 고려사항은 다음과 같다.Color Scopingsematicbg: FrameIcon: Shapetext: Textborder: Stroke특정 베리어블을 publishing하고 싶지 않다면 베리어블 콜렉션/그룹 앞에 _ 작성개별 베리어블 edit color variable -> Hide from publishing 설정이런게 진짜 꿀팁이지 싶었던 부분. 이외에도 강사님이 제공해주시는 피그마 파일을 통해 컴포넌트 정리할 때의 팁을 알아볼 수 있는데, 공부에 많은 도움이 된다. 간격 Spacing, 둥근 모서리 Border Radius기본 단위(Base unit)은 1.5배수 랜더링 이슈로 주로 8pt 그리드를 사용하며, 일반적으로 더 작은 단위로 레이아웃을 정렬하고 싶은 경우 4pt 그리드를 사용한다. 간격 크기(Spacing Scale)도 마찬가지.간격의 사용(Spacing in UI)은 작은 UI 구성 요소 / 카드 UI 패딩, 간격 / 큰 규모의 UI, 레이아웃 등 간격이 사용되는 케이스에 따라 적용하는 간격의 범위를 말한다.❗ 아틀라시안 디자인 시스템에서는 small, medium, large로 나누어서 적용하고 있었다. (아래 사진)간격 베리어블은 다음과 같이 구성할 수 있다.ComponentSemantic : Padding Gap Border Radius Width/Height Border WidthPrimitive : UnitBase Grid Point : 4❗ 시맨틱을 적용한 사례가 궁금해서 찾아봤다. Polaris는 --p-space-card-padding, --p-space-table-cell-padding 같은 식으로 몇몇 컴포넌트의 Padding과 Width, Height까지 정의한다. 둥근 모서리 베리어블은 다음과 같이 구성할 수 있다.Primitive: UnitSemantic: Border Radius 타이포그래피 Typography타이포그래피는 강의 녹화 당시에 베리어블이 없었어서 스타일로 제작하셨으며(추후 추가 예정이시며, 나는 특강으로 들을 수 있다!), 스타일을 쉽게 제작할 수 있는 플러그인을 많이 알려주셔서 도움이 됐다. 아이콘 IconFeather Icons을 불러와서 등록하는 법을 배웠다. 기존에 있는 아이콘을 불러오는 과정에서 생길 수 있는 문제를 유용한 단축키를 소개하면서 해결해주셨다.fn shift enter : 바깥에 있는 프레임 선택 -> 크기 조절enter : child frame 선택ctrl shift g : frame 해제5월 4일에 진행한 특강에서 심화 수업을 들었는데, 이 부분은 정리가 더 필요해서 다음주 발자국으로 넘긴다. 높이 Elevation❗ Material Design 3에 의하면 높이는 z축에 있는 두 표면 사이의 거리다.높이와 그림자는 UI 요소간의 계층구조를 시각적으로 명확하게 하고, 요소들간의 상대적인 거리와 깊이를 나타내 현실감있는 경험을 제공하며, 상호작용을 시각적 피드백으로 표현해 사용자 경험을 향상시킨다. 높낮이의 표현방법은 3가지가 있다. (이미지 출처: Material Design 3)다른 톤으로 표현하기같은 톤인 경우 그림자 효과 주기스크림*을 사이로 구분하기*스크림: 모달 뒷배경에 주로 사용되는 그것을 말한다. Material Design 2에서는 다음과 같이 설명한다. 스크림은 표면의 콘텐츠를 덜 눈에 띄게 만들기 위해 머티리얼 표면에 적용할 수 있는 임시 처리이다. 이는 스크림을 받는 표면에서 벗어나 화면의 다른 부분으로 사용자의 주의를 유도하는 데 도움이 된다. 그리드 Grid, 기준점 Breakpoints그리드 시스템은 시각적 질서, 일관된 레이아웃, 유연함과 확장성, 디자인 효율성을 제공해준다. 반응형 그리드의 기본 용어는 다음과 같다.칼럼(Columns): 섹션거터(Gutters): 칼럼 간의 간격마진(Margins): 그리드 양상단의 여백 Fixed, Fluid, Hybrid 그리드 정의는 다음과 같다.고정형, 유동적 그리드 : 크기 확대됐을 때 고정/유동하이브리드: 다양한 그리드가 한 스크린 안에 있음 그리드는 개념적으로는 이해가 된 상태였는데 피그마에서 오토레이아웃을 적용할 때 헷갈리는 부분들이 있었다. 그런 점들을 잘 짚고 넘어갈 수 있었다. 테두리 간격 Border Width, 투명도 Opacity배리어블을 만든 후 넘버 스코핑에 신경쓰면 되는 부분들이다. 🎯 미션미션 1, 2, 3이번주의 미션은 다음과 같았다.미션1. 컬러 베리어블을 로컬베리어블에 등록하고 다른 디자이너, 개발자 누구나 볼 수 있도록 문서화한다.미션2. 타이포 그래피 스타일, 간격 베리어블을 등록하고 Feather icon을 등록한 후 면으로 모두 바꾼다.미션3. 그림자 효과, 반응형 기준점, 기타 베리어블 등록하기미션4. 스타일 파운데이션 최종적으로 다듬어서 일관되게 문서화해보기그중 미션 1, 2, 3은 시간이 조금 걸리긴 했지만 강의를 따라가면 충분히 해결할 수 있는 과제들이었다. 미션 4미션4는 현재 사이드프로젝트나 회사 업무에 적용한다고 생각했을 때, 어떻게 해야 개발자들이 잘 이해할 수 있을까? 불필요한 커뮤니케이션을 줄일 수 있도록 문서화하고 싶다! 는 생각을 가지고 작업했다. 작업과정은 다음과 같다.참고할 디자인 시스템 정하기: 볼드님의 파운데이션, Wanted Design Library, Polaris Styles 를 참고했다.베리어블 -> 문서화 플러그인 찾기 잘 만들어진 플러그인들이 많았지만 1. 컴포넌트 형식이고 2. 컴포넌트 내부 요소들이 잘 구성되어 있고 3. 오류가 없거나 적은 것을 찾기가 힘들었다.플러그인을 찾은 것들은 컴포넌트를 정리해서 묶었다.플러그인을 찾지 못한 것들은 타 디자인시스템들을 참조해서 새로 제작하거나, 기존에 강의를 따라가면서 제작했던 문서를 가지고와서 정리했다.이후 문서를 통일하고 정리했다. 이 과정에서 볼드님의 파운데이션이 큰 도움이 됐다. 🌼 회고잘 한 점: 직장과 사이드 프로젝트를 병행하면서 1주차를 무사히 끝냈다!아쉬운 점: 미션에 집중하다보니 발자국 작성에 시간을 많이 쓰지 못한 점이 아쉽다.보완할 점실전에서 어떻게 활용할 수 있을지 생각하며 강의 듣기매일매일 강의 들은 뒤 강의 메모 이외 간단한 느낀점 꾸준히 작성하여 이후 발자국 모으기 쉽게 만들기다음주 계획: 이번주만큼만 하기! 💨