인프런 워밍업 프로덕트 디자인 2기 4주차 발자국

네번째이자 마지막 발자국지난 이커머스 b2b 화면에 이어 이때까지 만들었던 컴포넌트를 활용하여 b2c 이러닝 페이지와 모바일 OTT 서비스 페이지를 만들었다. 특히 내가 평소에 부족했다고 느꼈던 부분들, 반응형 구조라던지, 다크모드 활용하기 등을 집고 넘어갈 수 있는 미션이여서 특히나 도움이 많이 되었고, 무엇보다 너무 재밌었다! 확실히 기초를 잘 다듬어 놓으니 레고 블럭처럼 뚝딱뚝딱 조립해 나가는 재미가 있었다.모바일 OTT를 만들면서 플러그인 하나가 말썽을 부렸는데, 볼드님이 원인 파악을 해주셔서 말끔하게 완성시킬 수 있었다!온라인 세션해당 강의에서 프로토타이핑을 배울 줄은 생각도 못했는데, 온라인 세션 공지를 보고 너무너무 반가웠다. 이때까지는 화면을 연결하는 수준으로만 프로토타이핑을 했었고, 베리어블을 활용한 프로토타이핑은 그저 어렵다고만 생각했었다. 그런데 오늘 세션을 통해 메커니즘을 이해하고 나니, (여전히 어렵지만..!) 활용해 볼 수 있는 용기가 생긴 것 같다. 볼드님이 공유해주신 족보를 보며 계속계속 복습해 봐야겠다.스터디를 마무리하며스터디를 시작하기전에 회사 업무와 같이 병행할 수 있을까 걱정이 앞섰는데, 너무너무 잘 한 결정이라고 생각한다. 가끔씩은 빨리 퇴근하고 집에가서 강의듣는 시간이 더 기다려졌을 정도!! 특히, 가장 좋았던 점은 중간중간 진행한 라이브 온라인 세션이었다. 온라인 세션때마다 피그잼에서 만나는 다른 러너분들도 너무 반가웠고, 혼자가 아니라는 느낌을 받아서 의지가 많이 되었던 것 같다.이제부터가 진짜 시작이라 생각하고 강의 시작할 때 다짐했던 '내 것으로' 만들기 위해 계속 복습하고, 실무에 적용해보는 일만 남은 것 같다.한달동안 함께 고생해주신 볼드님께 무한한 감사드립니다!

인프런 워밍업 프로덕트 디자인 2기 3주차 발자국

강의 요약이번 주는 배리어블을 다크모드/멀티 브랜드/반응형 디자인/다중언어 등 모드를 설정해서 적용하는 방법을 배웠고, 이때까지 만들었던 베리어블과 컴포넌트들을 활용하여 페이지에 적용해봤다. 특히, 베리어블을 여기저기 적용해보니 신기함과 놀라움의 연속이었다!저번 주만 해도 베리어블과 이제 많이 친해졌다고 생각했는데, 페이지를 만들면서 다시 사이가 멀어진 것 같은 느낌..... 🥲 너무 늦어지기 전에 다양한 페이지를 만들어보면서 손에 익힐때까지 복습이 필요할 것 같다.다크모드다크모드를 실무에 적용해본적이 한번도 없기 때문에 특히나 집중해서 강의를 들었다. 강의 내용대로 작업하고, 테스트하고, 확인하는 작업이 반복적으로 이루어졌는데, 내가 봤을 때 이뻐보이는(?) 것과 접근성 그 사이 어딘가에서 많이 해맸었던 것 같다.서비스 성향에 따라 추천하는 모드푸드, 이커머스와 같은 컨텐츠가 돋보여야하는 서비스는 라이트 모드를 추천몰입형 미디어 (OTT 서비스)는 다크모드를 추천함결국 브랜드 아이덴티티와 접근성을 고려하고 끊임없는 테스트를 통해 수정이 필요하다.브랜드브랜드 컬러 베리어블을 적용하기 위해 프리미티브에 컬러를 추가가 필요했는데, 1주차 때보다 훨씬 속도가 빨라졌고, 좋은 복습하는 기회가 되었다.브랜드 컬러 모드는 theme 컬렉션에 추가하는데, 'brand'라는 컬러를 semantic에 설정해놨기 때문에, Primitive > theme > semantic 이런식으로 참조가 여러 단계로도 된다는걸 적용해보면서 신기하게 느껴졌었다.반응형 디자인디바이스 크기마다 number로 사이즈만 조절하는 것이 아니라, boolean을 활용해 컴포넌트에 적용할 수 있다는 점이 흥미로웠다.boolean 프로퍼티의 경우 눈 아이콘에서 우측 버튼을 클릭해야 적용 할 수 있는데, 강의 후반부에 이걸 까먹어서 한참을 해맸었다. 😱회고잘한 점이번 주는 회사일이 많이 바빠서 힘들었지만, 포기하지 않고 모든 미션을 마무리했다. 아쉬운 점미션을 하다 막혔을 때 스스로 할 수 있는데까지 해보고 질문 남길 것

인프런 워밍업 프로덕트 디자인 2기 2주차 발자국

강의 요약1주차 마지막 날에 foundation을 점검하는 시간으로 섹션이 마무리가 되었고, 본격적으로 컴포넌트를 만들기 전 개념들을 설명해주셨다.강의에서 진행할 컴포넌트 만드는 순서 (1~4번 ♾)기본 싱글 컴포넌트 만들기베리언트 프로퍼티를 제외한 모든 프로퍼티 등록하기boolean, instance swap, text인스턴스 복사 후 테스트베리언트 프로퍼티 만들기state > status > style > size의 순서로 보통 추가함테스트 Naming Convention우선 네이밍 컨벤션 팁을 알려주셨고, 강의에서는 주로 camelCase로 적용하였다. 다른 규칙은 어떤게 있는지 좀 더 찾아봤는데, 제일 많이 알려진 건 아래 4가지 케이스였다.Snake case: 단어를 밑줄(_)로 구분하고 모두 소문자로 작성 (e.g., this_is_snake_case)Kebab case: 단어를 하이픈(-)으로 구분하고 모두 소문자로 작성 (e.g., this-is-kebab-case)Camel case: 첫 단어는 소문자, 이후 단어의 첫 글자는 대문자로 작성 (e.g., thisIsCamelCase)Pascal case: 모든 단어의 첫 글자를 대문자로 작성 (e.g., ThisIsPascalCase)너무도 당연한 얘기지만, 레이어명을 바로바로 바꾸시는 볼드님 보고 정말 많이 반성했다. (평소 레이어명 Frame258232으로 방치 중인 나.. 🥲)컴포넌트 만들기이번 주는 입력, 디스플레이, 피드백 3 가지 컴포넌트를 만들었다. 특히 컴포넌트를 만들면서 베리어블을 적용한 건 처음이라 굉장히 흥미로웠다. 아직 회사 실무에 베리어블을 적용하기 전인데, 작업할 때 자연스럽게 베리어블을 찾는 내 모습을 보며, 구조에 대해 이해가 점점 더 되고 있는걸 느꼈다.디자인 시스템을 만든 경험이 있기 때문에 이미 잘 알고 있다고 생각했는데, 이번 주는 같은 컴포넌트를 만들면서도 얼마나 더 효율적으로 관리할 수 있는지에 대해 많은 것을 배웠다. (역시 배움에는 끝는 없다.) 특히 슬롯 컴포넌트를 활용해서 모달만드는 방법이 정말 재밌었고, 이와 같이 효율적인 관리와 확장성을 고려한 방법들이 더욱 인상 깊었다. 앞으로 실무에서도 적극 활용할 수 있을 것 같다.유용한 플러그인Contrast - 색상 대비를 확인하고 접근성 기준을 충족하는지 검사해주는 플러그인. 해외에서는 접근성 기준을 굉장히 중요하게 생각한다고 하셨다.컴포넌트를 만들던 중 Placeholder 색상이 좀 진해보여서 색상을 한 단계 낮췄는데, 바로 접근성 기준 fail을 받았다. 🥲 어렵네 어려워특강 및 온라인 세션어제는 (12일) 온라인 세션이 진행되었고, ChatGPT를 활용해 디자인 시스템을 구축하는 방법에 대해 배웠다. 처음에는 문서 다듬기 정도로만 활용할 수 있다고 생각했는데, 디자인 워크플로우에 AI를 활용하는 방식이 굉장히 인상적이었다.프롬프트 프레임워크C - Context (맥락)I - information (정보)G - goal (목적)O - output (결과물) 회고잘한점 미션 #3 우수자로 선정 되었다. ✌아쉬운점또 강의를 들으며 노트를 바로바로 쓰지 못하였다... 특히 이번주는 휴일도 적고, 회사 프로젝트 때문에 시간이 부족해 미션을 완수하는데만 너무 급급했던 것 같다.다음주 계획오늘 온라인 세션에서 배운 플러그인으로 문서 정리해보기강의 들으면서 만든 컴포넌트로 다양한 예시 만들어볼 것

인프런 워밍업 프로덕트 디자인 1주차 발자국

강의 요약 1. 디자인 토큰, 디자인 시스템, 베리어블 1-1) 디자인 토큰디자인 토큰은 UI 요소의 기본 구성 요소로, 작고 반복 가능한 디자인 결정을 의미하며 Brad Frost's Atomic Design 개념 중 '전자(Electrons)'에 속함Brad Frost's Atomic Design'Electrons' > Atom > Molecules > Organisms > Templates > PagesElectrons - 색상, 타이포그래피, 테두리, 그림자 효과를 포함위 디자인이 결정되면 json 포맷으로 내보내어 여러 플랫폼에 적용할 수 있다.→ json 포맷으로 '어떻게' 내보내지고 개발자들이 플랫폼에 '어떻게' 적용하는지 이해가 부족해서 개발팀에게 도움을 요청해야겠다. 1-2) 디자인 시스템디자인 시스템은 일관성과 확장성을 가진 컴포넌트, 패턴, 가이드의 모음디자인 시스템의 장점: 디자인 일관성, 브랜드 강화, 개발 효율성, 시간 단축, 팀 간 협업 강화, 빠른 온보딩, 유지보수 용이, 높은 품질의 경험디자인 시스템의 구성 요소디자인 원칙/철학스타일 가이드컴포넌트 라이브러리패턴 라이브러리문서화시스템 관리 운영 디자인 시스템을 성공하기 위해서비즈니스, 디자인, 개발의 이해와 꾸준한 커뮤니케이션이 필요 꾸준히 발전해나가는 하나의 프로덕트의 개념 1-3) 베리어블 이름과 구조베리어블 구조: 이름(Name), 값(Value), 유형(Type)베리어블 계층 (피라미드 구조)Raw Value: 본래의 값 #D6840BGlobal/primitive/core/base/foundation/root: 사용 맥락에 상관없이 디자인 언어의 기본 값 Orange-MediumAlias/semantic/applied/purpose: 특정 사용 맥락과 의도를 전달할 때 쓰이는 값 Band-primaryComponent/overwrites/scoped: 컴포넌트와 관련된 모든 디자인 속성을 가진 값 Button-primary-background-color베리어블 이름Namespace(System) + Object(Component) + Base(Category/Property) + Modifier(Variant/State/Scale)Namespace다른 디자인 시스템과 구분하기 위해 주로 모든 베리어블/토큰 앞에 접두어로 시작한다. Ojbect디자인 시스템 내에서 특정 컴포넌트의 스타일 및 레이아웃을 적용하고 싶을 때 사용된다.Button, card, input 등BaseCateogry - UI 기본 구성 요소를 공통된 유형으로 그룹화color, font, sizing, spacing 등Property - 각 카테고리 내에서 특성에 따라 세분화한 것color-background, color-border, font-style, font-sizing, radius 등Modifier하나의 디자인 요소를 여러 상황, 상태에 따라 변형할 수 있도록 한다.Variant - Hierarchy(primary, secondary, tertiary), Feedback(success, error, information, warning)State - Interactive StatesScale - 숫자 (1,2,3,4...), 티셔츠 사이즈(xs, sm, md...) 등 이름 지을 때 실무팁개발자와 디자이너 사이에 공통된 이름 짓기 → 회사 프로젝트가 이미 진행이 많이 됬기 때문에, 실무에 적용하기 전에 개발팀에서 사용하고 있는 용어를 먼저 파악해야할 것 같다. 중복, 혼동되는 단어 통일하기스케일 척도 통일하기미리 80% 정도 계획할 것 (엑셀/피그잼 활용)레퍼런스, 레퍼런스, 레퍼런스! 2. 베리어블과 파운데이션 세팅하기강사님이 공유해주신 베리어블 구글 시트는 구조를 이해하는데 정말정말 많은 도움이 되었고, 실무에서도 잘 활용할 수 있을 것 같다.2-1) 컬러색상 베리어블(collection) 구조Primitive - raw valueTheme - 브랜드 모드를 적용하기 위한 목적 → 실습을 하다 질문하고 받은 답변인데, 브랜드가 한 개일 경우 필수는 아니며 강의 내용과 같이 feedback 베리언츠는 바로 semantic에 추가해도 됨Semantic - property, role, variant, state, scale등의 내용이 포함됨 (라이트/다크 모드 적용하기 위한 목적) → 모드는 시멘틱에서만 추가할 수 있고, 다크 모드의 raw value를 다르게 가고싶은경우 primitive에 따로 추가해야됨. 이건 강의 후반 '모드'에서 다룰 예정.특정 베리어블을 퍼블리싱하고 싶지 않을 때컬렉션/그룹 앞에 _ 를 붙이거나,개별 베리어블은 설정에서 'hide from publishing'을 선택Color Syntax웹, aos, ios 플랫폼별로 대응하는 코드 이름을 만들어줄 수 있는데, 왜 필요하고 어떤식으로 다르게 표기되는지 이해하기 위해서 개발팀의 도움이 필요할 것 같다. 2-2) 간격1.5배수 랜더링 이슈로 8Pt 그리드를 사용하고, 더 섬세한 단위로 정렬하고 싶을 때 4pt를 사용한다.간격의 사용 (Spacing in UI)0~8pt 작은 UI 구성 요소12~24pt 카드 UI padding, 간격> 32pt 큰 규모의 UI, 레이아웃간격 베리어블 계층Base grid point - 4ptPrimitive - UnitSemantic - padding, gap, border radius, width/height, border width 컬러와 마찬가지로 number scoping을 설정할 수 있음 2-3) 아이콘Feather icon은 실무에서 자주 사용하는데 이렇게 손이 많이 가는 놈(?)인지 몰랐다. 생각해보면 컬러가 이상하게 설정될 때마다 문제점을 생각할 조차 하지 않았는데, 이를 고치고 컴포넌트화해서 앞으로 시간이 정말 많이 단축될 것 같다.해결방법구조가 똑같게 하기union, flatten selection을 사용해 모두 stroke를 면으로 만들기이름 똑같이 하기Union을 했을 때 아이콘이 깨지는 경우, scale을 키우고 anchor point랑 bezier를 움직여가며 수동으로 수정 (=앤트맨 전략) 2-4) Elevation실무에서 shadow를 스타일화하지 않고 필요할 때마다 따로 만들어서 일관성이 떨어졌는데, 강의에서 배운대로 높낮이에 따라 컴포넌트를 지정하고 description을 잘 활용해서 관리해야겠다고 느꼈다.강의를 보면서 수치를 따라 입력하는데 집중하느라 강의 내용이 잘 기억이 나지 않아, 복습이 특히 필요할 것 같다. 섹션 3 - 다양한 효과 그리고 높낮이를 나타내는 그림자효과 파트 1, 2📝 단축키베리어블 복사: cmd+shift+enter여러 베리어블 속성 변경: 베리어블 선택 후, shift+오른쪽 마우스 버튼베리어블 바로 적용: shift+왼쪽 마우스 버튼회고잘한 점1주차 미션 모두 완수한 나 칭찬해 🙂미션 후 나만의 디자인으로 베리어블을 만들어보았다.다음주 강의와 미션 미리 시작했다.아쉬운 점데드라인에 집중하다보니 기계처럼 미션을 수행한 것 같다.미션 2가 끝날때까지 강의 노트를 미리 작성하지 않아 한번에 많은 양을 복습 하려다보니 블로그를 쓰는데 시간이 너무 소요되었다.베리어블 등록하고 scoping 설정하는걸 자꾸 잊어버렸는데, 이건 무조건 외워야겠다.다음주 계획강의들으면서 노트 꾸준히 작성하기 이번 주 만큼 휴일이 많이 없어서 스케줄 관리에 특히 더 신경쓸 것