블로그 모아보기 - 인프런

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

4주 차 학습 내용B2B 이커머스 어드민 페이지 디자인B2C 이러닝 페이지 모바일 OTT 서비스 페이지4주 차 학습 회고이번에 도메인별로 페이지를 만들어보면서 모드가 어떻게 동작하는지 명확하게 이해할 수 있었습니다. 덕분에 이제는 제가 원하는 대로 헤더, 내부 콘텐츠, 패딩, 갭 등 반응형 구성 요소들을 더 자유롭게 제어할 수 있을 것 같아요. 특히, 반응형 작업을 하면서 어떤 요소는 감추고 어떤 건 보이게 하는 제어까지도 모드로 관리할 수 있다는 게 정말 신기하고 재미있었습니다.스터디 이전에 완강을 했었지만 앞부분만 따라 만들어보고 뒷부분은 듣기만 했었는데, 이번 스터디를 통해 직접 끝까지 만들어보니 훨씬 이해가 잘 됐어요. 좋은 강의 만들어주셔서 감사합니다! 기본이 되는 디자인 시스템을 잘 학습했고, 이제 다음 단계로 나아갈 준비가 된 것 같습니다. 🙌🙌🙌

UX/UI･UX/UI･디자인･배리어블･피그마･디자인시스템･UXUI･워밍업클럽･인프런워밍업클럽스터디･볼드UX･figma

1

0

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

2주차 학습1) 아이콘 컴포넌트 만들기 본격적으로 컴포넌트를 만들기 전, 아이콘 컴포넌트를 만드는 방법에 대해 배웠습니다. 강의를 듣기 전에는 flattern을 해도 원하는대로 안깨져서 의문이었는데 꼭 유니온을 해준 후 flattern을 해야하는 것을 알게 되었습니다. 깨기 전에 아이콘을 확대 및 축소하고나서 선을 정리하는 과정이 재밌었습니다2) 입력 컴포넌트 & 디스플레이 컴포넌트 만들기 1주차 이론 부분을 배울 때 state 종류들이 많이 헷갈렸었는데 실제 여러가지 상태의 컴포넌트를 만들어보니 훨씬 익히기 쉬웠습니다. 많은 컴포넌트들을 배우면서 어려운 부분들도 있었지만 기초적인 부분이니 반드시 복습을 해야할 것 같습니다. 색상 배리어블을 등록할 때 warning error 등 status 색상이 과연 어떻게 쓰일까? 생각했었는데 컴포넌트를 만들면서 어떤 상황에 쓰이는지 알게된 점도 좋았습니다. 회고좋았던 점&잘한 점: 미션을 하기 전에 강의에서 본 그대로 한 번 따라 하고나서 다시 한번 미션에서 만들어보는 방식으로 진행하니까 머릿속에 훨씬 잘 들어왔다. 아쉬운 점 : 초반에는 생각을 하면서 만들어보다가 뒤에 체력이 떨어져 따라할려고만 했던 것 같아 다시 복습을 할 필요가 있었다.

인프런･프로덕트디자이너･피그마･디자인시스템･배리어블

0

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

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

UX/UI･인프런워밍업클럽･Figma･배리어블･디자인시스템･볼드UX

0

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

3주 차 학습 내용네비게이션 컴포넌트링크, 브레드크럼네비게이션 탭모바일 하단 네비게이션사이드 네비게이션글로벌 네비게이션페이지네이션이미지 캐러셀베리어블 모드다크모드브랜드 모드반응형 모드다중언어 모드3주 차 학습 회고스스로 칭찬하고 싶은 점포기하지 않고 기한 내에 미션 제출!아쉬웠던 점 / 보완하고 싶은 점 / 다음 주에는 어떻게 학습할지모드는 실무에서 아직 사용하고 있지 않아 재학습하는데 시간이 좀 더 걸렸던 것 같다. 더 여러번 반복해서 봐야할 것 같다!!! 🔥

UX/UI･디자인･배리어블･피그마･디자인시스템･UXUI･워밍업클럽･인프런워밍업클럽스터디･figma･볼드UX･피그마배리어블을활용한디자인시스템구축

0

[인프런 워밍업 클럽 스터디 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 등 고려할 변수가 많은데 익숙하지 않아 자꾸 헷갈리더라구요. 컴포넌트의 구성 요소가 복잡해질수록 따라 만들기 버거웠습니다. 특히 네비게이션 컴포넌트는 내부에 들어갈 컴포넌트가 다양해서 영상을 여러 번 돌려봤어요.

UX/UI･인프런워밍업클럽･디자인시스템･배리어블･Figma･볼드UX

0

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

2주 차 학습 내용색상 베리어블 타이포그래피 배리어블기타스타일2주 차 학습 회고스스로 칭찬하고 싶은 점회사 업무에 완강하려니 너무나 힘들었습니다. 그래도 해내고 있다니 뿌듯합니다.아쉬웠던 점 / 보완하고 싶은 점 / 다음 주에는 어떻게 학습할지남들보다 진도가 늦춰지긴 했으나 나만의 진도가 있으니 꾸준히 하자2주 차 미션 해결 과정어떤 관점에서 접근했는지 / 문제를 해결하는 과정은 무엇이었는지 /왜 그런 식으로 해결했는지 / 미션 해결에 대한 회고디자이너가 아니지만 그래도 진도를 나가고 있고 강의를 다시금 복습하고 있다.

UX/UI･디자인･배리어블･피그마･디자인시스템･UIUX･위밍업클럽･인프런워밍업클럽스터디･figma･볼드UX･피그마배리어블을활요한디자인시스템구축

0

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

2주 차 학습 내용컴포넌트 만들기 준비라이브러리 세팅컴포넌트 기본 레시피아이콘 등록 및 팁입력 컴포넌트버튼, 아이콘 버튼, 버튼 스택컨트롤체크박스라디오스위치라벨과 컨트롤 그룹텍스트 필드, 텍스트 상자셀렉트/드롭다운디스플레이 컴포넌트아바타아코디언뱃지툴팁디바이더칩, 상태 칩카드테이블2주 차 학습 회고스스로 칭찬하고 싶은 점주말 이전에 퇴근하고 꾸준히 시간을 내서 미션을 완료했다.아쉬웠던 점 / 보완하고 싶은 점 / 다음 주에는 어떻게 학습할지아쉬웠거나 보완하고 싶은 점은 없고, 다음 주에도 똑같이 열심히!!! 할 것이다. 🚀2주 차 미션 해결 과정어떤 관점에서 접근했는지 / 문제를 해결하는 과정은 무엇이었는지 / 왜 그런 식으로 해결했는지 / 미션 해결에 대한 회고이전과 마찬가지로 강의 내용 자체에서 실습을 같이 해주셔서 어려움 없었다. 이미 실무에 쓰고 있지만, 더 반복 학습해서 완전히 이해하고 쓰는 그 날까지... 💪🏻

UX/UI･디자인･배리어블･피그마･디자인시스템･UIUX･워밍업클럽･인프런워밍업클럽스터디･figma･볼드UX･피그마배리어블을활용한디자인시스템구축

0

[인프런 워밍업 클럽 스터디 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)

UX/UI･인프런워밍업클럽･디자인시스템･배리어블･Figma･볼드UX

0

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

1주 차 학습 내용피그마 배리어블과 디자인 토큰디자인 토큰과 배리어블이 무엇인지스타일과는 어떤 차이점이 있고 어떤 상황에서 무엇을 사용해야 하는지배리어블 구조 파악하기 (네이밍)배리어블과 스타일 파운데이션색상 배리어블타이포 배리어블간격 배리어블그림자 배리어블1주 차 학습 회고스스로 칭찬하고 싶은 점계획을 짜고 시간 내 미션을 완수했다.아쉬웠던 점 / 보완하고 싶은 점 / 다음 주에는 어떻게 학습할지시간이 부족해 플러그인으로만 문서를 만들었는데 문서 자체도 컴포넌트화시켜서 개발자분들이 실질적으로 참고할 수 있을 만한 문서를 만들고 싶다. 1주 차 미션 해결 과정어떤 관점에서 접근했는지 / 문제를 해결하는 과정은 무엇이었는지 / 왜 그런 식으로 해결했는지 / 미션 해결에 대한 회고강의 내용 자체에서 실습을 하나하나 같이 해주셔서 큰 어려움 없이 미션을 잘 수행했다. 이해하고 체화시키는 건 또 다른 영역이지만 반복해서 학습하고 꼭 내 거로 만들어 세세한 부분까지 실무에 적용하고 싶다. 수강 평볼드님께서 강의에 대해 애정을 많이 갖고 계신 게 느껴졌습니다. 업데이트도 자주 해주시고, 어떻게 하면 수강생들이 잘 따라올 수 있을지 고민한 흔적이 보여서 더 열심히 하고 싶은 강의입니다! 같은 직종 지인에게 꼭 추천하고 싶은 강의예요.

UX/UI･디자인･배리어블･피그마･디자인시스템･UXUI･워밍업클럽･인프런워밍업클럽스터디･figma･볼드UX･피그마배리어블을활용한디자인시스템구축

0

[인프런 워밍업 클럽 스터디 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모드에 맞춘 스타일을 새로 생성해야 했다. 😅아쉬운 점계획대로 강의 수강과 미션을 다 끝내고 싶었는데 스타일가이드 문서화를 정리하다가 어려움을 겪으면서 오래걸린 것강의를 보며 따라 만드는건 괜찮지만, 다른 방법이나 디자인에 맞춰서 작업하는데에는 어려움을 느끼는 것

UX/UI･인프런_워밍업_클럽･디자인시스템･배리어블･Figma･볼드UX

0

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

4주차때 배운 것벌써 4주차, 마지막 발자국을 남기게되네요.4주차 때에는 만들어놓은 컴포넌트를 가지고 b2b이러닝 페이지, 모바일 ott 페이지 만들기를 진행했습니다.컴포넌트가 다 만들어져있고, 배리어블을 통해 라이트/다크모드, 브랜드별 컬러 다 지정해놓으니까 하나의 페이지 만들기가 간편했습니다! 배리어블 통해서 변경하면 바로 다크모드로 변경되고.. 물론 초반에는 컬러를 보면서 잘 지정해야겠지만 디자인시스템을 잘 구축해놓으면 간편하게 디자인을 바로 뽑아내 확인해볼 수 있어 시간이 많이 줄 것 같습니다. 좋았던 점배리어블 기능을 잘 사용해서 더 효과적으로 사용할 수 있다는 것을 알아서 (불린 기능, 텍스트 기능)실무에 투입되고나서도 잘 사용할 수 있을 것 같습니다!강의를 구매하고 인프런 워밍업클럽을 통해 미션을 수행하니까 빼먹지않고 꾸준히 듣고, 실습할 수 있던 것 같습니다. 그리고 피드백을 통해 놓쳤던 부분을 알 수 있어서 좋았던 시간이었습니다!

UX/UI･디자인･배리어블･피그마･디자인시스템･UXUI･워밍업클럽

0

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

이번 주에도 열심히 컴포넌트를 만들고 다크모드를 비롯한 여러 모드를 만들어 보았다. 다크모드 적용은 컬러 배리어블 등록이 다였지만 생각보다 그럴듯한 화면을 만드는게 힘들었다.다크모드 색상을 조정하는데 얼마나 뭘 어떻게 해야하는지 감이 잘 잡히지 않아 여러번 조정했다.그리고 시각적으로는 대비가 큰데 플러그인을 돌려보면 계속 녹색이 나오지 않아서 당최 어찌 해야할지 모르겠다. 더 연구를 해볼 예정이다. 데스크탑, 타블렛, 모바일 반응형 만드는게 좀 복잡하지만 재밌었는데 각각 화면의 특성을 이해할 수 있었고 불린을 어떤 방식으로 적용해야하는지 배울수 있어서 좋았다. 무엇보다 만들고나니 클릭 몇 번에 휙휙 바뀌는게 재밌고 신기했다 ㅎㅎ한번은 다크모드 만드는데 한 부분만 계속 적용이 안되어서 버그인가 싶었는데 그럴리가.. 역시 휴먼에러이고 내가 배리어블 등록을 primary가 아니라 다른 배리어블로 등록해 놓아서 그렇게 되는 거였다. 이거 가지고 30분을 씨름했는데 역시 더 꼼꼼하게 챙겨야 한다. 체크 또 체크!다중 언어 지원은 아직 피그마에서도 잘 안되는 것 같아 (여러 번역 AI를 써봤지만 영어>한국어는 번역투가 너무 뚜렷해서 어색하게 느껴진다.) 어떻게 업데이트 될지 궁금하다. 그리고 어드민 페이지를 만들면서 내가 그동안 어떻게 컴포넌트를 잘못만들고 있었는지 알게되었다. 예시가 있고 따라하면서도 중간 중간 이해를 못하거나 타이밍을 놓치면 원하는 대로 안나올 때가 있는데 이럴때 뜯어보고 수정하는 건 잊지 않게 된다. 확실히 컴포넌트만 따라 만들다가 페이지를 구성해보니 다르게 느껴졌다. 아직 완벽하게 익히려면 더 만들고 더 고민해 보아야겠지만 겉핥기로만 알고 있던 피그마라는 프로그램을 더 잘 알게 되어서 너무 좋다. 이제 정말 얼마 남지 않았다. 끝까지 완주하고 싶다. 잘한 일 - 어쨌거나 과제 전부 제출반성 - 헤메이다가 과제 하나를 늦게 제출했다.

UX/UI･워밍업･디자인시스템･배리어블･다크모드

0

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

3주차때 배운 것네비게이션 컴포넌트(링크, 브레드크럼, 탭, 바텀네비게이션, 페이지네이션, 사이드네비게이션, 캐러셀)모드를 활용해보기 (라이트<->다크, 브랜드 컬러 변경)배웠던 것을 활용해 B2B 이커머스 어드민 페이지 만들기벌써 3주차 발자국을 남긴다!! 지금까지 빼먹거나 엄청 미루거나 하지 않았던 나에게 먼저 칭찬 스티커를 주고..작업하고 디스코드에 올리는 과정을 하니까 뭔가 빼먹지 않으려고 하는 것 같았다. 이번에는 네비게이션 컴포넌트를 만들었고, 배리어블에 모드를 추가해 다크모드에 잘 대응하도록 하는 것을 해보았는데 막상 컬러를 설정하니까 컬러가 너무 밝거나 어디는 안맞거나 하는 경우가 있었다. 그래서 그걸 조절하는게 꼭 필요하고.. 하다보니까 내가 컬러부분이 조금 아쉽다는 생각이 들어서 많은 수련(?)이 필요하는 것을 알게되었던 순간... 모드를 통해서 딸깍 바꾸면 슉 바뀌는 것이 편리했다! 역시 유료버전이 좋구나 (지금은 교육계정이지만)반응형이랑 이미지컴포넌트도 배리어블에 설정해서 변경되는 것을 처음 알아서 신기했고 추후에 피그마가 더~ 편리하게 해줄 수 있지만... 지금도 너무 신기했던 경험... 아쉬웠던 점자꾸... constraints 부분을 까먹는다..! 만들고 확인하는 과정을 꼭꼭 거치도록하자다음에 시도할 점나머지시간에는 강의를 무사히 끝내는 것에 초점을 가지고 진행할 예정이다.. 잘 마무리했으면 좋겠다!!

UX/UI･피그마･배리어블･UXUI･디자인

0

[인프런 워밍업 클럽 2기] 프로덕트 디자인 1주차 🐾

인프런 워밍업 스터디를 시작하며직무 전환을 위해 이직을 준비하며 UX/UI 분야에 대한 관심이 생겼고, 인프런에서 UX/UI 분야 기초 강의들을 수강하고 있던 중 인프런 워밍업 스터디 모집 메일을 보게 되었다. 본격적으로 포트폴리오를 만들고 사이드 프로젝트에 참여하기 전 스터디를 해보고 싶다는 생각을 갖고 있었는데, 아직 모집 중이길래 신청했다! 부디 완강해서 프로덕트 디자이너의 길에 한 걸음 더 가까워질 수 있기를 🔥 1주차 때 배운것디자인 토큰디자인 시스템배리어블스타일 1주차 실습색상 배리어블 등록간격 배리어블 등록타이포 그래피 스타일 플러그인으로 만들어보기 칭찬할 점시작이 반이다! 1주차부터 여유롭게 수강하지는 못했지만 포기만 하지 말자! 아쉬운 점출퇴근 및 퇴근 후 강의 챙겨듣지 못했다쉽게 설명해주시지만 초보인 나는 한 번에 이해하기 어려운 내용들이 있어 적어도 3번은 들어야 할 것 같다 개선할 점밀리지 않고 강의 듣기

UX/UI･UX/UI･워밍업스터디･인프런･프로덕트디자이너･피그마･디자인시스템･배리어블

0