블로그 모아보기 - 인프런

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

1주차 강의 학습 내용 요약강의를 듣기 전에는 Local styles만 사용하고 Local variables는 어렵게 느껴졌는데, 강의를 듣고 실습을 해보며 이해도를 높일 수 있는 시간이었다.학습 내용 중 특히 도움이 되었던 부분은 아래와 같다.베리어블의 계층 구조 디자인 토큰 이름 짓기색상, 간격, 그림자효과 베리어블 등록하기 초반 이론 단계에서는 이해를 하며 강의를 따라가면서도 내가 정말로 이해를 하고 있는게 맞는걸까?라는 의문이 들었지만, 이후 색상 베리어블 구조와 이름을 짜보는 과정을 통해 실습 과정이 참 중요하구나를 깨달았다. 디자인 토큰이 궁금해서 medium이나 구글링을 통해 내용을 찾아볼 때는 이해가 잘 안 됐었는데 Local Variables에 Primitive, Theme, Semantic 컬렉션을 등록하면서 흐름을 이해할 수 있었던! 회고일주일 동안 스스로 칭찬하고 싶은 점실습을 하며 이해가 안 가는 부분, 궁금한 점을 강의 노트에 적고 우선 스스로 답을 찾아보려고 한 점 아쉬웠던 점1주차 강의를 모두 듣지 못한 점아직 미션을 올리지 못했다보완하고 싶은 점커리큘럼대로 수업을 수강하고 미션은 수행하는대로 바로 스레드에 링크 공유하기!수업을 들으며 궁금한 점이 생겼을 때 우선 스스로 생각해보고 해결되지 않을 때 디스코드 채널에 질문해보기!(노션으로 강의 내용을 메모하다 인프런 강의 노트로 옮겼는데 장단점이 있는 듯 하다. 인프런 강의 노트를 사용하면 메모했던 순간으로 영상이 재생되는 게 편한데 이외에 동영상 재생에 오류가 있다던가... 텍스트를 드래그하고 싶어도 클릭으로 인식해 동영상이 다른 타임라인으로 넘어간다거나 하는 부분이 있어서 어떻게 해야 강의 내용을 편하게 기록할 수 있을지 고민 중...) 1주차 미션 미션 해결 과정색상, 간격, 타이포그래피, 그림자 효과를 베리어블 등록하는 과정은 강의 내용을 따라갔다.하지만 아이콘 등록의 경우 Union Selection을 일일이 선택해야 하는 게 사소하지만 생산성이 떨어지는 부분이라고 생각해 Union Selection의 단축키를 생성해봤다. 확실히 작업 속도가 단축되어서 만족!혹시 제 게시물을 보신 분 중 Union Selection 단축키를 등록하고 싶은 분이 계시다면... Mac의 경우 [시스템 설정] - [키보드] - [키보드 단축키]에 들어가면 단축키를 생성할 수 있습니다.응용 프로그램에서 Figma 선택메뉴 제목에 Union Selection 입력 (대소문자 구분 중요. 위의 사진대로 Union selection이라고 입력X)키보드 단축키 입력 (저는 Union의 앞글자를 따서 cmd+shift+U로 등록했어요. 다른 단축키와 충돌이 나면 안 되니, Figma에서 사용되지 않는 단축키를 입력해야 합니다.) 회고1주차 온라인 세션에서 아이콘이 깨지지 않도록 불린하는 방법을 배울 수 있었다. 이전에 아이콘이 깨질 때 어떻게 해야할 지 감이 안 왔었는데 정말 유익한 내용이었다.확실히 지원하는 플러그인이 많은 프로그램이 작업할 때 많은 도움이 되는 것 같다. 피그마에서 지원하지 않는 기능도 있을법한데...?싶어서 플러그인에 검색해보면 있는... 전세계 피그마인들... 감사합니다.. 그리고 강의를 통해서도 좋은 플러그인 정보를 많이 얻을 수 있었다! 강사님께도 감사합니다.. 🍀

UX/UI･Figma･인프런워밍업클럽

3

1

[인프런 워밍업 클럽 스터디 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와 다른점이 많아서 이해하기 어려운 부분들도 있었는데, 이번에 다시 정리하면서 들으니 너무 좋았고, 좀더 체계적으로 추가 업데이트 된 내용을 배울 수 있어서 좋았다.😅 아쉬웠던 점스터디 첫 주였는데 계획했던 것처럼 매일 강의를 듣지는 못했고, 정해진 시간에 아직 루틴화 되지 못한 점, 강의 따라가기에 바빠서 스타일가이드 문서화 정리까지는 제대로 못했던 점이 아쉽다.😍 앞으로 바라는 점다음 주부터는 정해진 시간에 조금씩이라도 매일 공부하고, 문서화 하는 부분도 염두해두면서 작업해보자 💪

UX/UI･인프런_워밍업_클럽･디자인시스템･Figma･UX/UI

1

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

1주 차 강의먼저, 피그마 베리어블과 디자인 토큰/디자인 시스템 개념에 관한 강의를 들었다. 피그마를 자주 사용하고 있었으나 "로컬 스타일"만 사용하고 있었다. 베리어블은 사용하기 꽤 어렵다고 생각하고 있었다. 하지만 색상, 간격, 타이포그래피, 아이콘 등 강의를 들으면서 순서대로 따라 하다 보니 앞으로 어떻게 써야 하는가에 대해 알게 되었다. 특히, 회사에서 업무를 하면서 "타이포그래피"를 직접 만들고 정하는 게 어려웠는데, 플러그인을 통해서 쉽게 할 수 있다는 것을 알고 바로 적용해 봐야겠다는 생각이 들었다. 미션이번 주 미션은 스타일 가이드 문서 제작을 위해 다양한 베리어블을 만들고 등록하는 것이 미션이었다. 처음에 미션만 보고 '이걸 직접? 전부 다 할 수 있다고?'라는 의심으로 시작했는데, 차근차근 설명해 주시고 플러그인을 통해 작업을 하다 보니 쉽고 빠르게 할 수 있었다. 가장 좋았던 것은 하나씩 등록하는 과정을 결과적으로 "문서화"작업을 한 것이었다. 매번 디자인 시스템이라는 것을 만들고 싶어도 어떻게 해야하는지 모르고, 어렵게만 느껴졌는데, 이렇게 하다보면 만들어 볼 수 있겠다는 용기가 생겼다. 회고잘했던 점 강의 듣고 나중에 작업하는 게 아니라, 직접 따라 하면서 만들어 본 것 다양한 플러그인을 써보고 정리한 것아쉬웠던 점 이번에는 시간이 부족해 강의를 몰아서 들었지만, 다음에는 공부할 시간을 확보해서 들어야겠다.보완하고 싶은 점 공부하고 있는 것과 실제 실무에서 사용하는 것을 연결해서 생각하고, 작업해야겠다.

UX/UI･Figma･인프런워밍업클럽

1

0

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

🐾 네번째 발자국복습하며 듣는 강의인데도 시간 부족으로 완주를 하지 못할 것 같아서 매우 아쉽다. 강의가 업데이트 되면서 내용이 더 추가되었고 변경된 피그마 UI3는 이제 어느정도 적응되는 것 같다. 완주는 못 했지만 남은 유예기간까지 최선을 다해서 강의를 수료하려고 노력할 예정이다. 📚 배운 점스피너를 만들 때 Start는 -90을 입력해야 12시 방향부터 시작할 수 있다.스피너에 적용하는 인터랙션을 복사 붙여넣기로 쉽게 적용할 수 있다.슬롯 그룹을 만들 때 피그마는 레이어 이름에 예민하니 레이어 이름에 유의해야 한다.슬롯 그룹에서 Reverse란 같은 버튼이어도 데스크탑 뷰, 모바일 뷰 일 떄의 위치가 다를 때 해당한다.Design with AIAI는 디자이너에게 필수다. 나를 위해 AI를 배워둘 필요가 있다.앞으로 회사에 AI를 쓰는 것을 어떻게 설득시켜야 할 지 과제가 남아있다.정말 AI의 활용방안은 무궁무진하고 나만의 전문성을 위해 AI를 잘 다루는 디자이너가 되자.😊 좋았던 점특강을 통해 요즘 관심있던 디자이너와 AI에 대해서 알 수 있었다.강의를 복습하면서 예전에 작업했던 것과 비교해봤는데 업데이트 된 강의가 더 내용이 풍성해져서 좋다. 😭 아쉬웠던 점개인적인 일정으로 시간을 많이 낼 수 없어서 진도를 많이 나가지 못 했다.완주하지 못할 것 같다는 불안감, 그러나 유예기간이 생겼으니 남은 기간까지 최선을 다하자!

UX/UI･피그마･Figma･UIUX

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기 - 프로덕트 디자인 (Figma)] 4주차 발자국

진행 기간: 4주차(20250323-20250330)진행 강의:[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기 학습 내용네비게이션 컴포넌트, 모드 활용(다크모드, 통합 브랜드 구현, 반응형 디자인, 다중언어)컴포넌트 부분에서는 마지막인 네비게이션 관련 부분을 학습하였습니다.링크, 탭, 바텀 네비게이션, 사이드 네비게이션, 글로벌 네비게이션, 페이지네이션, 케러셀네비게이션 컴포넌트는 어떻게 보면 제일 많이 쓰이는 중요한 요소일 수 있는데, 개발자 입장에서는 제일 구현을 안하는 요소이기도 한 것 같습니다. 전부 라이브러리로 가져다 쓰는 부분이 많아서, 원리만 생각하고 많이 사용했던 것 같습니다. 이번에 네비게이션 컴포넌트를 배우면서 개발 원리를 배우지는 않았지만 "실제로 구현을 할 수 있겠다"는 생각과 라이브러리에만 의존하는 것이 아니라 "차별화 된 디자인적 요소"를 반영 할 수 있다는 생각이 들었습니다.모드 활용 부분을 진행하면서 실제로 개발을 해보지 않고도 많은 시나리오를 미리 계획할 수 있고, 테스트 해 볼 수 생각이 들었습니다.브랜드 통합 부분에서는 기본 UX 요소를 배리어블과 모드를 통해서 쉽게 전환이 가능했습니다.모드를 활용하면 개발 전에 여러 디바이스 들을 대응하기가 매우 용이하였습니다.언어의 경우에도 아직은 많이 부족하지만, 어느 정도는 시나리오를 테스트 할 수 있었습니다.B2B 어드민, B2C 이러닝, 모바일 OTT 앱이 부분은 앞에서 왜 열심히 컴포넌트를 만들고 모드를 활용하는 법을 배웠는지에 대해서 알 수 있는 실습 위주의 파트였습니다. 또한, 실제 피그마를 사용하는 시나리오와 제일 유사한 환경이기도 하였습니다.이 파트는 워밍업 클럽을 하지 않더라도 꼭 진행을 스스로 해봐야 한다는 생각이 드는 파트였습니다.컴포넌트, 파운데이션 등을 미리 정확히 준비해 놓고 화면을 구성하는 것과 아닌 것이 엄청나게 많이 차이났기 때문입니다.강의를 듣기 전에 앱 디자인을 했을 때, 딱 이 강의의 반대로 했기 때문에 UX 구현시에 많은 시간을 소모했었습니다.강의 수강 이후로는 앱을 빠르게 디자인 하고, 다른 부분에 시간을 더 투자할 수 있을 것 같습니다.개인적으로 이 파트는 뒤로 갈수록 개인적으로 난이도가 쉬워졌습니다.여러 페이지를 만들면서 중복된 요소들이 등장하고 만드는 법이나 스스로의 노하우가 늘어난다는 생각이 들었습니다. 4주차 및 강의와 활동을 마치며중간 점검 미팅에서 선생님은 디자이너로서 개발을 해보면 내 프로덕트에서 더 디자인이 나아질 부분이 있다는 것을 발견하신다고 하셨는데, 저는 반대로 UX구현을 좀 더 체계적으로 진행하면서 개발자로서는 부족하지 않지만, 사용자로서는 부족했을 요소들, 실제로는 그렇게 개발하면 안되는 요소들을 많이 찾아 볼 수 있게 되었습니다.모든지 쉽게 할 수 있는 AI 시대에 스스로의 생각으로는 개발자, 기획, 디자인의 끝은 만류귀종으로 "개인의 경쟁력" 하나로 귀결된다는 생각이 들었습니다.미팅에서 말씀하셨던 것처럼 개개인의 주요 전공과 더불어, 노하우와 제품을 보는 눈과 같은 "개인의 경쟁력"을 지속적으로 발전시켜야 한다는 생각이 들었습니다.또한 앱이나 웹 등을 개발하거나 디자인을 하더라도, 나만의 요소(디자인 시스템, 기술적인 구현, 참신한 아이디어 등)에 AI를 적극적으로 도입하여서 스스로의 작은 기획과 테스트를 여러 번 진행 하고 실제 출시 시에는 완성도가 높고 성장성이 높은 프로덕트를 낼 수 있겠다는 생각이 들었고 실제로 그렇게 해보려고 합니다.워밍업 클럽을 하기 전에는 사실 이 많은 부분을 다 할 수 있을까 생각이 많이 들었지만 2가지 요소 덕분에 완강 및 미션을 모두 진행할 수 있었습니다. 강의에서 처음 피그마를 하는 사람도 들을 수 있을 정도로 자세하고 친절하게, 또 실제 구현시에 노하우를 숨김 없이 알려주십니다.워밍업 특성상 타임 리밋이 있다는 점이 집중도를 매우 높일 수 있는 부분이 있습니다.강의를 듣기 전과 들은 후가 스스로에게 있어 많은 차이가 있다고 생각이 듭니다. 특히 전체적인 프로덕트를 보는 눈이 넓어졌고, 개발자지만 막상 앱을 구현하라고 하면 막막한데, 이제는 구현이 가능하다고 자신있게 말할 수 있을 것 같습니다. 특히 개발자의 경우에는 지엽적으로 개발하는 경우가 많고, 전체적인 맥락을 모르고 개발하는 경우가 많은데, 이 강의를 듣고 실습을 실제로 진행한다면 전체 프로세스를 보는 눈이 생길 것이라고 생각하며 꼭 강의를 들어 보시고 실습도 해보시기를 추천 합니다!

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

0

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

학습 내용저번 주에 처리하지 못한 입력 및 디스플레이 컴포넌트 관련 내용을 학습하였습니다. 이번 주와 관련하여 피드백 컴포넌트 관련 내용을 학습하였습니다.이번 주 발자국을 작성하고 난 후 네비게이션 컴포넌트와 모드 관련 내용을 학습할 예정입니다.미션 및 실습특히, 이번 주 컴포넌트 실습에 있어서 '티끌 모아 태산'이라는 말이 많이 생각이 났습니다. 여러 컴포넌트를 불러와 인스턴스로 또 하나의 컴포넌트를 조합하는 일이 매우 많았기 때문에, 하나의 컴포넌트가 잘 완성이 되어 있지 않으면 연쇄적으로 영향을 주는 경우가 많았습니다.프로토타입을 피그마에서 사용시 스피너, 스켈레톤을 움직이게 만드는데 활용한 경우는 없었고, 터치로 인한 스크린 전환 같은 UI/UX 흐름에만 활용을 했었는데 관련하여 많은 배움을 얻을 수 있었습니다.사실 개발시에도 라이브러리를 import 하는 식으로 구현하는 경우가 많아서 이번 구현이 처음이었습니다.회고이번 주는 아직 전체 진도를 따라가진 못했지만, 정말 많은 것들을 배울 수 있었던 주였습니다.오늘 밤과 내일 사이에 남은 진도를 따라 잡아 다음 주부터는 여유롭게 지금까지 했었던 것들을 차근차근 확인하며 마무리 할 수 있는 시간을 가지도록 노력할 것입니다.

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

0

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

🐾 세번째 발자국어떻게든 3주차 일정에 맞춰서 진도를 나가보려 했지만 일정상 불가능했다. 이전 강의를 들었던거고 업데이트 된 강의를 복습하는거라서 빨리 할 수 있을 줄 알았는데 그렇지 못 했다. 그래도 미션5인 디스플레이 컴포넌트 만들어보기를 완료한 뒤 세번째 발자국을 작성해보려고 한다. 📚 배운 점피그마 AI 기능으로 더미 텍스트를 넣을 수 있다.피그마 Rename AI로 레이어의 이름을 자동으로 변경할 수 있다.(영문) 디스플레이 컴포넌트 미션벨 아이콘에 뱃지를 띄울때는 Mask를 씌워서 여백을 줄 수 있다.Face Dummy 플러그인을 사용하여 한국인 얼굴을 생성형 AI로 만든 것을 사용할 수 있다.툴팁의 뾰족한 부분의 이름은 브라켓이다.구분선을 만들 때는 반드시 Auto-Layout setting에서 Included Strokes를 해줘야 한다.상태 칩을 만들 때 시각적 균형을 맞추기 위해 아이콘이 있는 왼쪽과 텍스트가 있는 오른쪽의 간격을 다르게 한다. 😊 좋았던 점강의가 업데이트 되면서 피그마 AI 기능도 함께 사용하면서 미션을 할 수 있었다.이전 강의에서 사용하지 않았던 새로운 플러그인을 써볼 수 있어서 좋았다.컴포넌트를 만드는 섹션 왼쪽에 프로퍼티 값이 적혀있어서 도움이 되었다. 😭 아쉬웠던 점분명 한 번 들었던 강의임에도 불구하고 복습하는데에 시간이 많이 소요되었다.3주차 진도를 이번주에 모두 진행하는 것이 목표였는데 물리적인 시간 부족으로 미션5까지만 진행해서 아쉬웠다.과연 워밍업 클럽 기간 동안 내가 강의를 모두 완강할 수 있을지 확신이 없어서 불안하다.

UX/UI･피그마･Figma

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기 - 프로덕트 디자인 (Figma)] 2주차 발자국

진행 기간: 2주차(20250310-20250316)진행 강의:[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기강의 및 미션이번 주는 입력과 디스플레이 컴포넌트를 만들어보는 주였습니다.강의 내용 및 미션도 저번 주와는 다르게 구현을 많이 하면서 기본 컴포넌트들을 만들어나가는 부분이 많았습니다.특히 컴포넌트의 속성의 조합에 따른 다양한 파생 베리언트들을 만들어 보는 것이 중요했습니다.미션을 수행하기 위해서는 숙련도 부족으로 정확한 확인을 위해 결국 강의 하나하나를 다시 천천히 들어야 하기에, 특히 시간이 필요하였습니다.회고이번 주는 수술과 좋지 않은 몸 상태로 인해 실제로는 2일(하루 4시간 기준) 이상을 낼 수 없었기에 목표하고자 하는 미션의 절반 이하로만 진행이 가능하였습니다.확인 결과 3주차의 경우에는 컴포넌트의 고도화 및 마무리 과정으로, 거의 하루 1개 미션을 진행해야 하는 상황이므로 다음 주 1일 차에 못한 강의와 미션을 마저 처리하고, 남은 4일에 하루 2개 정도로 처리하고, 만약에 부족한 경우 주말에 처리하는 식으로 진행할 예정입니다.또한 미션과 강의를 전부 하지는 못했지만, 좀 더 Figma 인터페이스에 익숙해져서 빠르게 구현을 할 수 있도록 하여 각 구현의 시간을 줄여야 겠다는 생각이 드는 주였습니다.

UX/UI･디자인시스템･Figma･UX/UI･인프런_워밍업_클럽

0

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

🐾 두번째 발자국개인적인 일정으로 평일에 시간이 많이 나지 않았고, 업데이트 된 입력 컴포넌트 강의 분량이 늘어나면서 시간이 많이 소요한 주차였다. 그래도 매일 조금씩 들었는데 이번주 분량을 모두 듣지 못 한 것 같아서 개인적으로 매우 아쉬운 주차였다. 📚 배운 점FrameAll 플러그인으로 모든 프레임을 쉽게 선택할 수 있다.아이콘은 오픈소스 아이콘을 사용하여 시간을 단축할 수 있다. 아이콘 미션아이콘이 이상한 경우 가장 추천하는 정리 방법은 Union → Flatten Selection아이콘을 10배 크기로 키워서 픽셀이 어긋난 부분을 화살표를 이용하여 위치를 조절하여 수정해두고 다시 10배 축소 시켜서 정리하면 깔끔하다.입력 컴포넌트 미션Q를 누르면 multi-edit이 가능해서 컴포넌트 편집 시 유용하다.버튼 스택 파트가 추가 되었는데 그 전에 버튼을 각각 만들어서 썼던 경험이 떠올라서 왜 이런 생각을 못했지 싶었다.한 번 컴포넌트를 만들어두면 다음 컴포넌트에서 반복적으로 사용되는 것들이 많다.😊 좋았던 점입력 컴포넌트 미션에서 각 컴포넌트 별로 설명과 만들어야 하는 Type, Style, State 같은 프로퍼티 값이 섹션에 쓰여 있어서 동영상을 보며 놓쳤던 것을 쓰여진 것을 보면서 확인 할 수 있었다.복습임에도 불구하고 내용이 업데이트 되어 새로 강의를 듣는 것과 같았다.전에는 라이브로 진행했던 앤트맨 작전이 강의에 업데이트 되어 복습할 수 있어서 좋았다. 😭 아쉬웠던 점매일매일 조금씩 강의를 듣고 multi-edit을 사용하며 과제를 했는데도 입력 컴포넌트 미션에 시간이 많이 소요되었다. (그래도 보너스 미션까지 완료했다!)이번주에는 미션4와 미션5를 해야하는데 시간이 부족하여 미션4만 수행할 수 있었다.

UX/UI･피그마･Figma･피그마배리어블

0

[인프런 워밍업 클럽 스터디 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만들 때, 조금 어려웠던 부분이 있었다. 앞으로 이런 부족함을 좀더 확실히 익힐 때까지 노력해야겠구나 그런 생각이 들었다. 😍 앞으로 바라는 점미션을 정해진 시간에 따라가기가 꽤 많은 양이라는 생각이 들었다. 밀리지 않도록 최선을 다해 따라가자.포기하거나 미루지 말고 완주를 위해 꾸준히 노력하자.

UX/UI･인프런_워밍업_클럽･디자인시스템･Figma･UX/UI

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주차(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

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

진행 기간: 1주차(20250303-20250309)진행 강의:[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기 강의이번 주차에는 섹션 3개 분량의 내용을 다뤘습니다.특히 디자인 시스템에 있어서 가장 중요할지도 모르는 스타일 파운데이션을 만드는 부분을 다뤘습니다.크게 개념 소개 및 구조 부분 섹션, 이론 및 실습 두 섹션(색상 및 타이포그래피, 간격, 그림자, 그리드)으로 나누어 학습하였습니다.섹션 1에서는 스타일 파운데이션을 만들기 위해서 디자인 시스템, 디자인 토큰의 개념과 figma에서 도입된 베리어블(variables)에 대해서 알아보았습니다.섹션 2에서는 여러 디자인 시스템에서의 예시를 바탕으로 나만의 색상 베리어블의 이름과 구조을 만들고, 타이포그래피 베리어블과 스타일을 만드는 것과 베리어블 인터페이스와 플러그인을 통해 실제로 정의하고 적용하는 법에 대해 알아보았습니다.섹션 3에서는 간격 베리어블을 정의하는 다양한 방식과 적용 방법, 다양한 효과 및 특히 그림자 효과의 이론적인 적용과 베리어블과 스타일을 활용한 실제 적용 방법, 그리드 시스템의 적용 방법에 대해서 알아보았습니다. 미션진행해야 할 미션은 총 3가지 였습니다.색상 베리어블 인증샷 & 링크 제출타이포그래피 베리어블 & 링크 제출기타 스타일 인증샷 & 링크 제출 이전까지는 디자이너가 아닌 개발자로서 Material Design System 같이 이미 잘 정의되어 있는 디자인 시스템의 요소를 사용하는 것에만 집중하였기 때문에, 강의의 개념과 적용 방법이 익숙하지 않았습니다. 진땀을 흘리면서 여러 번 강의를 반복해 들으며 미션을 진행하였습니다. 회고이전에는 스스로에게 있어 Figma가 아주 단순한 프로토타입 디자인 용도로 활용되었다면, 이제는 App, Web 플랫폼의 디자인의 밑바탕을 직접 그리는 용도로 쓰임이 진화하였다는 느낌이 들었습니다. 또 베리어블을 통해 프로그램처럼 체계적으로 나의 색상, 타이포그래피, 간격 등을 관리하고 적용할 수 있는 실마리를 발견하였던 한 주였습니다.

UX/UI･디자인시스템･Figma･UX_UI･인프런_워밍업_클럽･베리어블･스타일･스타일_파운데이션･볼드UX

0

[인프런 워밍업 클럽 스터디 2기] 프로덕트 디자인 완주 후기

지난 주 금요일 수료식으로 약 한 달 간의 인프런 워밍업 스터디가 막을 내렸습니다.우여곡절 끝에 그래도 끝까지 완주했다는 생각에 뿌듯하면서도 한편으로는 그렇게 치열하게 아등바등하며 달려온 하나의 목표가 마침내 끝을 맞이했다는 생각에 아쉬운 마음도 들었습니다.지금의 이런 벅찬 감정을 나중에도 되돌아볼 수 있도록 그리고 다음 스터디의 참석을 고민하시는 분들께 조금이나마 도움이 되었으면 하는 마음으로 이번 '인프런 워밍업 클럽 스터디 2기'를 되돌아보고자 합니다. 🙋‍♀️ 스터디에 참여하기까지 저는 현재 스타트업 기업에서 근무하고 있는 9년차 웹디자이너 겸 UI/UX 디자이너입니다. 웹 에이전시에서 4년 가량 근무하다가 현 직장에 웹디자이너로 이직했으나 점점 UI/UX 업무의 비중이 늘어나기 시작하더니 현재는 UI/UX 업무의 비중이 웹디자인 업무보다 훨씬 더 많아지게 되었습니다.웹디자인을 할 때에는 이전에도 그랬지만 지금도 여전히 포토샵이나 일러스트레이터와 같은 그래픽 툴이 불편하다는 생각을 해본 적이 거의 없었습니다. 그러나 UI/UX 업무의 비중이 늘어나면서부터 점점 포토샵에서 UI/UX 디자인 작업을 진행하는 일이 잦아졌고 작업량이 늘어나면 늘어날수록 체감하게 되는 불편함은 점점 더 커져갔습니다. 컴포넌트의 갯수가 늘어나면서 배치해야하는 레이어나 오브젝트의 갯수가 매우 많이 늘어났고 그 과정에서 형태가 동일함에도 레이어 하나, 오브젝트 하나 배치할 때마다 동일하고 반복적인 값을 매번 측정하고 배치해줘야 하는 불편함이 매우 컸습니다. 거기다 수정하다가 실수로 레이어가 움직인 파일을 미처 눈치 채지 못하고 복사해서 여러 페이지를 만들고 나중에서야 실수를 알아차리면 지금까지 작업한 페이지들을 전부 열어 하나하나 레이어를 수정해줘야 했습니다. 이런 불편함은 점점 가중되어 작업의 속도를 더디게 만들었고 이제는 작업 환경의 개선이 필요하겠다는 생각이 들어 스터디에 참여하게 되었습니다. 🤔 초보자가 생각하는 스터디의 난이도 스터디 이전에는 피그마를 배워보거나 경험해본 적이 없었고 이번 인프런 워밍업 클럽 스터디에 참여하면서 처음으로 피그마를 설치하고 배우게 되었습니다. 몇 년 전 피그마와 스케치, XD가 새로 출시되어 서로 경쟁하던 시절에 '포토샵을 다룰 줄 알면 이 세 가지 툴은 금방 익힐 수 있다'는 주변에 먼저 익힌 직장 동료들의 조언을 기억하고 야심차게 참여하였으나...출시 초창기의 피그마는 한 두시간이면 쉽게 익힐 수 있는 툴이었을지도 모르겠지만 몇 년 간 업데이트가 쌓이고 특히 배리어블의 등장 이후로는 제가 경험해본 바로는 단 몇 시간으로 금방 배울 수 있는 툴은 아니었습니다.그리고 본 스터디의 목적은 이렇게 저처럼 스터디에서 난생 처음 피그마를 다루는 사람에게 맞춰져 있지 않기 때문에 스터디에서 수강 하는 강의의 내용이 기능의 정의나 툴의 역할 하나하나를 설명하는데에 초점이 맞춰져 있지 않습니다. 따라서 처음 피그마를 경험하시는 분들에게는 스터디와 강의가 다소 어려울 수 있을 것 같습니다. 특히 올해 GUI3로 대규모 업데이트가 진행되면서 인터페이스의 변화가 매우 크게 발생하여 궁금한 점을 검색하더라도 이전 버전의 인터페이스로 설명해주는 정보가 많아 더더욱 프로그램에 적응하기 어려울 수 있습니다. 실제로 저 역시 상술한 이유로 1주차~2주차의 2주간 매우 많이 헤맸고 2주간 공휴일이 며칠 씩 있었음에도 공휴일과 주말 모두를 반납해서 겨우겨우 강의를 다 듣고 과제를 마무리할 수 있었습니다. 그래서 피그마를 한 번도 실행해본 적이 없는 분이라면 스터디에 참여하기 전에 피그마를 설치해보고 기본적인 툴의 기능이나 인터페이스와 메뉴를 꼭 익히고 스터디를 참여하시길 추천드립니다.제 생각에 피그마를 익히는데에 도움이 되는 관련 지식으로는 포토샵과 퍼블리싱에 대한 이해가 아닐까 싶습니다. 포토샵이나 일러스트레이터를 다룰 줄 아는 분이라면 툴 내의 기능이나 단축키가 유사한 점이 많아 툴에 대한 적응을 보다 수월하게 할 수 있을 것 같습니다. 또한 피그마에서 구조를 설계하는 방식이 퍼블리싱을 할 때 그리드를 설계하고 다양한 css 값으로 각 엘리멘트를 조절하는 방식과 유사하여 퍼블리싱에 대한 지식이 있으신 분들에게는 피그마 내에서 구조를 설계하고 레이아웃을 구현하는데에 보다 쉽게 적응하실 수 있지 않을까 싶습니다. ✨4주간 진행된 스터디에 대한 후기 ⭐⭐⭐⭐⭐비록 이번 스터디를 통해 피그마를 처음으로 접해보았지만 그럼에도 감히 후기를 남긴다면 '피그마로 구현할 수 있는 A부터 Z까지 모든 것을 다 경험해볼 수 있는 강의이자 스터디였다.'라고 남기고 싶습니다. 스타일과 배리어블의 개념 이해와 배리어블 등록, 다양한 기본 컴포넌트 제작, 제작한 컴포넌트와 베리어블을 활용한 레이아웃 구현과 서비스 페이지 제작까지. 강의와 스터디의 커리큘럼을 따라가다 보면 피그마를 통한 UI/UX 디자인의 가장 작은 단위부터 가장 큰 결과물까지 모든 과정을 경험해 볼 수 있었습니다. 개념 설명과 구현 방법은 강의에서 매우 자세하게 다뤄주시기 때문에 피그마가 아직 서툴고 익숙하지 않은 분들도 강의를 따라가다 보면 어렵지 않게 이해하고 구현할 수 있습니다. 또한 배리어블의 개념과 등록 역시 아주 상세하게 알려주시기 때문에 아직 배리어블을 접하지 않으셨거나 혹은 배리어블에 적응하지 못하신 분들에게도 본 강의와 스터디가 큰 도움이 될거라고 생각합니다.강의와 스터디의 커리큘럼 구성이 상술한 바와 같이 개념-컴포넌트-레이아웃-서비스 페이지 구현으로 이루어져 있고 이는 작은 단위에서부터 큰 결과물까지 점점 그 단위가 커지는 양상을 띄고 있어 수강생 입장에서는 점점 지식이 쌓이고 성장하는 것을 체감할 수 있었고 아울러 종래에는 서비스 페이지 구현을 통해 스스로의 성장을 시각적으로 확인할 수 있어서 매우 뜻깊었습니다.그리고 해당 스터디는 특강의 내용이 다른 데에서 쉽게 찾아보기 어려운, 정말 유용한 정보로 가득하여 특강만으로도 스터디에 참여할 이유가 충분하다는 생각이 들 정도였습니다. 실무에 당장 적용할 수 있는 정보 뿐만 아니라 디자이너로써의 역량을 향상 시킬 수 있는 기술을 배울 수 있는 특강이라 정말 의미 있는 시간이었습니다. 특히 프로토타입 특강의 경우 쉽게 찾아보기 어려운 수준의 구현까지 특강에서 배워볼 수 있어 보다 더 연습하여 체득하고 싶은 의지도 불태울 수 있는 시간이었습니다. 4주간의 스터디 시간이 이렇게 막을 내리게 되었는데 스터디는 끝이 났지만 이제 또 다른 시작점이라고 생각합니다. 아직은 부족한 점이 많기에 스스로 더 찾아보고 공부하면서 피그마를 다루는 능력도 키우고 포트폴리오도 피그마로 제작해볼 계획입니다. 무엇보다 이번 스터디로 가장 크게 배운 건 '안주하지 않고 새로운 것에 도전할 수 있는 힘'이었습니다. 지금까지 배운 지식들을 토대로 현재에 안주하지 않고 보다 멋진 디자이너, 보다 유능하게 다른 팀과 커뮤니케이션 할 수 있는 디자이너가 되기 위해 노력해야겠습니다. 4주 동안 스터디를 진행하시면서 많은 가르침을 주시느라 고생 많이 하신 볼드 선생님께 감사의 말씀을 올리며 마치겠습니다. 읽어주셔서 대단히 감사합니다😁

UX/UI･UI/UX･Figma･프로덕트디자인･디자인시스템･인프런･인프런워밍업클럽･스터디2기

0

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

열심히 따라가다 보니 어느 새 스터디 마지막 주가 다가왔다. 이번 주에는 B2C 이러닝 페이지와 모바일 OTT 서비스 페이지를 구현해보는 과제를 수행하였고 토요일 특강 시간에는 프로토타입을 활용하여 다양한 인터렉션을 구현하는 방법을 배우는 시간을 가졌다. 금주에 배운 강의 내용은 다음과 같다. B2C 이러닝 페이지 제작지금까지 제작한 다양한 컴포넌트를 활용하여 이러닝 페이지 제작모드를 활용하여 브랜드 및 다크모드 적용배리어블을 활용하여 반응형 버전 제작엑셀 시트 연동 플러그인을 활용하여 데이터 연결지금까지 강의를 통해 제작한 다양한 요소를 조합하여 페이지를 제작하였다. 제작된 컴포넌트를 조합하면 쉽고 빠르게 페이지 디자인을 구현할 수 있고 여기에 설정해둔 모드를 적용하기만 하면 단숨에 지정된 색상 톤에 맞는 색상으로 변경이 가능하다. 모드를 통해 일일히 디자인 요소 하나하나를 수정할 필요 없이 클릭 몇 번만으로 자동으로 다른 스타일의 디자인을 구현할 수 있는 매우 높은 생산성을 경험할 수 있었다. 다만 페이지를 제작하다보면 자동으로 지정되는 #000이나 #FFF 값들을 확인하지 않고 다크 모드로 넘어가서 일부 컴포넌트를 일일히 수정하기도 했는데 이런 시행착오를 교훈 삼아 앞으로 실무에서 적용하거나 혼자 토이 프로젝트를 진행할 때에는 다크 모드로 변환하기 전에 확인하는 과정을 거쳐야겠다. 모바일 OTT 서비스 페이지 제작지금까지 제작한 다양한 컴포넌트를 활용하여 모바일 OTT 메인페이지와 컨텐츠 페이지 제작엑셀 시트 연동 플러그인을 활용하여 데이터 연결Movies & TV Shows 플러그인을 활용하여 이미지 데이터를 제작하고 컴포넌트로 활용모바일 OTT 서비스는 주로 다크모드만 제작되기 때문에 해당 페이지를 제작할 때에는 브랜드 모드만 활용하였다. 또한 모바일이 메인 디바이스인 만큼 반응형도 모바일과 태블릿만 제작하는 시간을 가졌다. 실제로 페이지를 구현하면서 컴포넌트 구조를 유연하지 않게 제작하여 수정을 거치거나 혹은 컴포넌트 자체를 새로 만드는 경우도 있었는데 이러한 시행착오를 겪으면서 페이지에 배치할 때 보다 유연하게 작동할 수 있는 컴포넌트 구조에 대해 고민할 수 있었다. 온라인 특강 : 배리어블 프로토타이핑 강의이 특강은 진짜 거짓말이 아니라 '이걸 내가 무료로 청강 해도 되는건가?' 라는 생각이 진지하게 들 정도로 너무나도 유용하고 어디서도 찾아보거나 듣기 어려운 강의였다. 선생님께서 사전에 구현해보고 싶은 프로토타이핑 인터렉션을 모집하셨고 그 중 3가지 예제를 구현해보는 시간을 가졌다. 다양한 인터렉션을 실제로 구현하는 방법을 배울 수 있는 점에서 굉장히 유익하고 도움이 많이 되는 시간이었다. 3가지 예제 중 앞의 1번째와 2번째는 기존 강의를 토대로 추가적인 프로토타이핑을 적용하는 과정이었다면 마지막 3번째 예제는 if와 else를 활용하여 보다 복합적이고 다양한 경우를 반영한 인터렉션을 구현하는 방법을 배울 수 있었다. 실무에서 다른 팀 뿐만 아니라 고객과 커뮤니케이션 할 때에도 보다 구체적인 구현 방향을 시각적으로 보여줄 수 있다는 점에서 많이 연습해서 내 능력으로 체득하고 싶은 욕심이 생기는 그런 기능이었다. 4주간의 스터디를 돌아보며그간 피그마를 배워야지 생각하면서도 차일피일 미뤄왔던 건 물론 개인적인 여러 일이 있었기 때문이기도 하지만 가장 큰 건 이미 경력자로써 현실에 안주했기 때문이 아니었나 하는 생각이 든다. 이제 피그마가 현업에서 표준화 되고 있는 지금에서야 배움을 시작하였지만 그럼에도 안주하지 않기 위해 노력했고 처음 다루는 툴에 버벅거리기 일쑤였지만 포기하지 않고 끝까지 완주했다는 점에서 정말 뿌듯하고 기쁜 순간이다. 그리고 금주부터는 근무 중인 회사에서도 내부 회의를 거쳐 피그마를 우선 적용해보기로 하여 업무에서도 피그마를 활용할 수 있게 되면서 디자이너로써 하나의 스킬을 익히고 활용해볼 수 있는 계기가 된 것 같아 매우 좋았다. 또한 선생님의 강의를 보면서 따뜻한 경력 속에 파묻혀 안주해왔던 나 자신을 많이 돌아보게 되었다. 선생님도 실무에서 많이 바쁘실텐데 과제 하나하나 꼼꼼하게 확인해주시고 거의 매주 특강까지 준비해주시는 열정을 보면서 나 역시 업무에서든 인생에서든 쉽게 안주하지 않고 발전하는 길을 찾아나가는 힘을 가진 사람이 되어야겠다는 생각을 많이 하게 되었다. 스터디는 이제 마무되지만 공부와 실습은 이제부터 본격적으로 시작이라고 생각한다. 아직 익숙해질 기능이 많이 남아 있고 모르는 기능도 많이 있어 어려웠던 부분은 강의도 다시 듣고 복습해보면서 더욱 발전해나가야겠다. 그리고 실무에서 피그마를 활용함과 동시에 퇴근 후 남는 시간이나 주말에는 토이 프로젝트도 진행해보면서 많은 경험을 해보고 거기서 실력을 늘려갈 수 있도록 노력해야겠다.

UX/UI･UX/UI･Figma･프로덕트디자인･디자인시스템･워밍업스터디

0

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

이번 주에는 네비게이션 제작과 다크모드 및 브랜드, 반응형 베리어블 모드의 개념을 이해하고 해당 데이터를 베리어블로 등록을 진행하였다. 또한 3주간 배운 내용을 토대로 쇼핑몰 관리자 페이지와 로그인 페이지를 제작하였다. 금주에 배운 강의 내용은 다음과 같다. 네비게이션 컴포넌트 제작링크, 브레드크럼 제작네비게이션 탭과 모바일 하단 네비게이션 제작페이지 네이션 제작헤더 제작사이드 네비게이션 제작이미지캐러셀 제작홈페이지에서 필수적으로 배치되는 다양한 네비게이션을 제작하고 이 네비게이션을 반응형에 맞추어 수정을 진행하였다. 네비게이션의 경우 디바이스 레이아웃에 영향을 많이 끼치는 컴포넌트이기 때문에 반응형에 대한 이해와 레이아웃 구조를 본격적으로 많이 고민하게 되었다. 처음에 반응형을 크게 고려하지 않고 제작했다가 다음 수업에서 가장 많이 수정 작업을 진행한 컴포넌트였다. 실무에서 활용할 때에는 네비게이션 제작할 때에부터 본격적으로 반응형 사이즈와 배치를 고려하여 네비게이션 레이아웃을 제작하여야겠다. 베리어블 개념 이해 및 실습다크모드 베리어블 개념 이해 및 활용브랜드 베리어블 개념 이해 및 실습반응형 베리어블 개념 이해 및 실습다중언어 지원 화면 구성1주차에 배웠던 베리어블에서 보다 심화하여 저장된 색상 베리어블을 다크모드와 브랜드로 구분하여 다양한 조합을 구성하는 방법을 배울 수 있는 시간이었다. 또한 반응형 베리어블을 구성함으로써 각각의 디바이스 별로 반응형 제작 시 필요한 다양한 수치를 변수화하여 디바이스에 맞는 데이터를 활용할 수 있는 방법을 배우고 실습하였다. 금주 수업 중 가장 많이 놀란 수업으로 베리어블을 구분하여 저장함으로써 클릭 몇 번으로 작업물의 다양한 테마를 변경하고 라이트/다크 모드로 변경할 수 있는 점이 정말 흥미로웠다. 다시금 피그마의 압도적인 생산성에 놀라고 실무에서 어떻게 활용하면 좋을 지 고민해보는 시간이 되었다. 조만간 타이포 베리어블도 업데이트 된다는 소식을 수업에서 들었는데 해당 업데이트로 얼마나 더 효율적일지 매우 기대가 된다. B2B 이커머스 어드민 페이지 만들기이커머스 어드민 페이지 제작다크모드 제작로그인 페이지 제작해당 수업부터는 지금까지 제작한 다양한 베리어블과 컴포넌트를 토대로 실제 페이지를 구성하고 제작하였다. 그간 제작한 베리어블이나 컴포넌트가 재료가 되어 필요한 지점에 유연하게 활용할 수 있어 매우 흥미로운 시간이었다. 또한 피그마를 활용하면 현재 내가 작업하는 환경에서 소모되는 시간보다 훨씬 적은 시간으로 다양한 페이지를 구성하고 쉽고 빠르게 수정할 수 있었다. 금주에는 공휴일이 아예 없어서 다소 걱정했는데...안타깝게도 다른 일정까지 바빠지는 바람에 시간이 매우 촉박하였다. 거기다 이제 젊은 나이가 아니다보니 욕심에 비해 체력도 잘 안따라줘서 진행이 쉽지 않음을 다시금 느끼게 되는 한주였다. 3주차를 돌아보며 개선할 점과 보완할 점을 회고하고자 한다. 3주차 잘한 점그래도 어떻게든 과제를 이번 주 내에는 완료하였다.금주부터는 본격적으로 반응형 작업이 많아져 여러 차례 꼼꼼하게 테스트를 진행하기 위해 노력하였다.배운 내용을 활용하여 다른 스타일의 관리자 페이지 제작을 진행해보았다.금주에는 평일 오전에 이틀은 강의를 수강할 수 있었다.3주차 개선할 점새삼 나이가 느껴지는 한주였는데 3주차에 접어들며 시간도 촉박해지고 회사 업무도 많아지면서 체력적인 한계가 많이 느껴졌다. 공부하려면 체력부터 미리 길러둬야겠다는 생각을 했다...이번 주도 과제를 정해진 요일에 제출하지 못했다. 이제 마지막 한 주가 남았는데 최선을 다해보아야겠다...!

UX/UI･UX/UX･Figma･프로덕트디자인･디자인시스템･워밍업스터디

0

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

[3주차 강의 내용 요약]이번주는 마지막 컴포넌트인 네비게이션 컴포넌트를 만들고, 배리어블 모드를 활용하여 기존에 만들었던 컴포넌트에 다크모드를 적용하는 방법과 멀티 브랜드 구현 방법, 반응형 디자인 적용 방법, 다국어 지원 방법에 대해 배워보았다. 또한, 만들어진 컴포넌트와 배리어블 모드를 활용하여 B2B 이커머스 어드민 페이지까지 제작해보는 시간을 가졌다. 1) 네비게이션 컴포넌트(Navigation Component) 만들기텍스트링크(Link), 브레드크럼프(Breadcrumbs), 네비게이션 탭(Tabs), 모바일 하단 네비게이션(Bottom Navigation), 페이지네이션(Pagenation), 사이드 네비게이션(Side Navigation), 헤더(Header), 캐러셀(Carousel) 2) 배리어블 모드 활용 방법[1] 다크모드 전환, 원리 배우기다크모드 : 빛을 덜 발산해서 배터리 절약, 저시력자의 경우 다크모드 선호몰입형 미디어 보기를 지원하는 UI의 경우, 영구적 다크모드 사용(회사에서 다루는 콘텐츠, 상품에 따라 선택!)단순히 라이트 모드 색상 체계를 반전하는 것 XX -> 브랜드 아이덴티티와 접근성을 항상 고려해야 함!!'계획 - 실행 - 테스트 및 무한 수정'의 방식으로 고쳐가는 것이 중요 [2] 브랜드 구조와 모드를 활용한 멀티 브랜드 구현다양한 브랜드 구조가 있고, 유형별로 다른 브랜드 전략을 사용통합 브랜드 형식의 멀티 브랜드 구현을 위한 배리어블 모드 제작동일한 파운데이션으로 브랜드 색상(Theme 색상)만 다르게 제작해보기 [3] 디바이스별 반응형 디자인 구현데스크탑, 태블릿, 모바일 화면에 따라 배리어블 모드 제작Break point, padding, margin 등 다양한 요소 적용 가능헤더나 사이드 네비게이션 등 디바이스에 따라 컴포넌트 타입도 다양하게 변경할 수 있음 ! [4] 다중언어 지원 화면 구현(영어, 한국어, 아랍어 등등)시장 개척 및 점유율 확대, 사용자 적용성 등 글로벌 시장이 목표라면 중요한 부분글로벌라이제이션(웹 접근성 등), 로컬라이제이션(지역, 문화에 따른 다양성) 적용언어별 읽는 방향, 쓰는 방향 변경 가능 우선 배리어블 모드를 활용해서 다크모드, 반응형 디자인 등 웹/앱 디자인에서 중요한 부분을 생각보다 쉽게 해결할 수 있다는 게 놀라웠다. 기존에는 이런 부분을 다 따로 따로 적용할 생각을 했었던 나의 무지함에 지금이라도 이렇게 배워가서 다행이라는 생각도 들었다..😅 그리고 분명 잘 만들었다고 생각했던 컴포넌트들이 모드가 먹히지 않는 부분들이 있어서 로컬 컴포넌트를 찾아가보니 내가 색상을 잘못 설정하는 등등의 실수가 있어서 역시 디자인 시스템을 만들 때는 테스트와 무한 수정의 과정이 꼭! 필요한 부분이구나를 다시 깨닫는 순간이였다..ㅎㅎ 파운데이션부터 시작해서 이제는 내가 만든 컴포넌트로 실제 페이지까지 디자인해보니 신기하면서도 재밌었지만 벌써 강의가 거의 끝나감에 아쉬운 마음이 들기도 했다. 요즘 볼드님의 강의를 들으면서 디자인 시스템에 대한 필요성과 효율성에 대해 크게 느끼고 있어서 계속 공부하고 싶어서 우선은 내가 기존에 작업했던 디자인 작업물을 토대로 디자인 시스템을 제작해보면서 익숙해져봐야겠다! [이번주 회고]스스로 칭찬하고 싶은 점이번주도 계획에 맞게 강의를 듣고 미션을 수행하였다.기존에 디자인했던 작업물들을 피그마로 수정해보면서 강의에서 배웠던 내용도 함께 적용해보고 있다.auto layout에 대해서 기존엔 헷갈리는 부분이 많았는데 작업을 하면서 많이 익숙해진 것 같다! 아쉬웠던 점, 보완하고 싶은 점이제는 강의를 듣고 미션을 따라해보는 것에서 그치지 않고 내 작업물로 디자인 시스템을 구축해보면서 계속해서 경험을 쌓아야겠다고 생각했다.다크모드에 색상 적용하는 부분에서 생각보다 많은 시간을 보냈던 것 같다. 특히 다크모드 반영시에 접근성의 중요하다는 것을 뼈져리게 느꼈다 ㅠㅠ

UX/UI･UX/UI･프로덕트디자인･디자인시스템･피그마･Figma

0

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

이번 주부터는 본격적으로 피그마를 활용하여 다양한 컴포넌트를 제작하였다. '컴포넌트' 의 정의가 '재사용이 가능한 독립된 모듈' 이라는 점에서 컨텐츠 내에서 실제 사용 시 확장성과 범용성을 고려해야 했으며 컴포넌트끼리 활용할 때에도 결합 또는 조합이 가능한 구성에 대해서 배울 수 있는 시간이었다. 금주에 배운 강의 내용은 다음과 같다. 입력 컴포넌트버튼, 체크박스라디오버튼, 스위치버튼라벨과 컨트롤 그룹텍스트 필드와 텍스트 상자셀렉트입력 폼과 같이 데이터 입력이 필요한 페이지 또는 컨텐츠에서 매우 자주 활용되는 입력 컴포넌트를 제작하였다. 입력 컴포넌트는 이후 디스플레이나 피드백에도 자주 활용되기 때문에 디자인 일관성을 고려하여 범용적인 디자인으로 설계할 필요성이 있었다. 또한 컴포넌트 제작 시 테스트의 중요성을 깨닫게 된 시간으로 텍스트 내용을 길게 쓰거나 컨텐츠의 가로, 세로 영역값을 넓히거나 줄이는 등의 테스트를 진행해보면 틀어지거나 깨지는 등의 문제 상황을 자주 확인할 수 있었다. 다른 컴포넌트와 결합하여 사용하는 빈도가 많은 컴포넌트인 만큼 테스트를 꼼꼼하게 진행하여야 추후 다른 컴포넌트 제작 진행 시 시행착오를 줄일 수 있겠다. 디스플레이 컴포넌트아바타, 아코디언, 뱃지, 툴팁, 구분선칩카드, 테이블테이블이나 카드 게시판 내에서 시각적인 정보를 전달하는 컴포넌트를 제작하였다. 디스플레이 컴포넌트에서 제작한 컴포넌트를 조합하여 카드나 테이블과 같은 테이블을 쉽고 빠르게 제작 또는 수정할 수 있어서 다시 한 번 피그마 기능의 우수함을 느끼게 된 시간이기도 했다. 디스플레이 컴포넌트를 조합하면서 부터 본격적으로 다양한 컴포넌트를 조합할 필요성이 커졌는데, 이는 컴포넌트 조합 시 상위 프레임 또는 그룹의 오토 레이아웃에 대한 이해를 요구하였다. 오토 레이아웃 설정 시 선택할 수 있는 옵션은 다음의 세 가지가 있다. fixed가로 또는 세로에, 혹은 가로와 세로 모두에 고정적인 값을 부여. 부모 영역의 값을 확장하더라도 자식 영역의 값이 fixed라면 값이 변하지 않음.hug해당 요소가 보유한 컨텐츠 값에 해당하는 가로 또는 세로 값을 인식하여 값을 부여.hug로 설정된 경우 텍스트 내용을 처음 설정보다 더 길게 쓰더라도 유연하게 내용에 맞게 가로 값이 변화함. fill부모 영역의 값을 인식하여 해당 크기에 맞게 자식 영역의 값을 맞추어 늘리거나 줄임.자식 개체가 여러 개인 경우 부모 영역의 값을 기준으로 1/n 만큼의 값을 각각 가져감. 피드백 컴포넌트알림(경고) 메시지토스트스켈레톤 로더와 로딩 스피너프로그레스 바슬롯 컴포넌트와 모달사용자에게 알림, 로딩 등과 같은 다양한 상호작용을 하는 컴포넌트를 제작하였다. 사용자가 예상지 못한 상호작용이 발생할 수 있는 컴포넌트인 만큼 해당 컴포넌트를 제작할 때에는 사용자의 편의성과 경험을 고려해야 할 필요성이 높아졌다. 또한 컴포넌트 내에 스켈레톤 또는 스피너 애니메이션을 제작함으로써 개발자와 해당 컴포넌트에 대해 공통된 이미지와 기능을 구체화하고 공유할 수 있게 됨과 동시에 예기치 못한 상황에 대기를 해야하는 유쾌하지 않은 상황에 사용자의 불쾌감을 낮추고 보다 긍정적인 경험을 제공하는 방법을 배우는 시간이 되었다. 온라인 특강 : 챗GPT를 활용한 디자인 가이드 제작다양한 기업에서 활용하는 디자인 가이드를 확인해보고 여러 디자인 가이드 중 공통된 내용을 분석하며 이를 기반으로 챗GPT를 활용하여 쉽고 빠르게 디자인 가이드를 제작하였다. 디자인 가이드의 내용이 방대한 만큼 일일히 하나하나 작성하기에는 작업량이 방대한데 챗GPT를 활용하여 제작하게 되면 직접 제작하는 방식보다 훨씬 수월하고 효율적으로 디자인 가이드를 제작할 수 있었다. 금주에는 수요일에 공휴일이 있었음에도 불구하고 강의를 듣고 과제를 수행하는 데에 예상보다 시간이 훨씬 많이 소요되어 과제를 제 시간에 한 번도 제출하지 못하였다...🙄 쉽지 않았지만 본격적으로 컴포넌트를 제작하고 조합하면서 제작할 수 있는 범위가 확장되었던 2주차를 돌아보며 개선할 점과 보완할 점을 회고하고자 한다. 2주차 잘한 점예상한 시간보다 훨씬 많은 시간이 소요되어 심리적으로 초조해졌지만 처음 배우는 초심자에게는 빠르게 가는 것보다 (어차피 빠르게 갈 수도 없지만) 느리더라도 꼼꼼하게 배우는 게 맞다고 판단하여 강의를 수강하면서 중간중간 강의를 멈추면서 선생님께서 작업하신 내용을 따라하고 강의를 다 듣고 난 이후에도 시간을 할애하여 배운 내용을 다시 복습해보았다.테스트의 중요성을 인지한 이후부터 텍스트를 길게 써보거나 컨텐츠 영역 값을 줄이고 키우고 하는 등 테스트를 여러 번 진행해보았다. 테스트를 진행하다 보니 문제 상황에 자주 부딪혔고 이를 해결하는 과정에서 오토 레이아웃에 대해 이전보다 많이 이해할 수 있게 되었다. 제시간에는 한 번도 제출하지 못했지만...그래도 이번 주에 어떻게든 미션을 다 완수하였다.2주차 개선할 점미라클모닝...을 하루도 못했다. 돌아오는 주에는 일찍 자고 일찍 일어나서 오전에 강의를 꼭 수강해야겠다.과제를 제시간에 한 번도 제출하지 못했다. (진짜 이렇게 될 줄은 상상도 못했다...) 여러 가지 이유가 있었겠지만 이제 피그마에 많이 익숙해졌으니 3주차에는 시간 계획을 더 철저하게 하여 과제를 미리 진행할 수 있도록 해야겠다.

UX/UI･UI/UX･Figma･프로덕트디자인･디자인시스템･워밍업스터디

0

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

인프런 워밍업클럽 2기 1주차나는 이 강의를 사놓고 디자인시스템에 대해 정복하리라 마음을 먹었지만,계속되는 건강 문제로 미루게 되어 속상하던 찰나에 워밍업클럽 2기 모집을 알고 다시 신청하게 되었다. 1주차때 배운 것피그마 베리어블과 디자인 토큰 개념미션 #1) 색상 베리어블, 간격, 타이포그래피, 아이콘 등록미션 #2) 그림자 효과, 반응형 기준점, 기타 베리어블 등록아쉬웠던 점강의를 너무 몰아서 본 것사실 나는 이론 부분은 기본적인 내용이고 이미 한번 확인한 내용이라 가볍게 생각했다.하지만 생각보다 꼼꼼하게 작업을 해야 되서 시간 지체가 있었다.단계적인 학습을 못한 것내가 주마다 해야 할 미션들이 있지만 매일 완수한다고 하면 주 3~4회 정도 되는 것 같다.나의 상황에 맞게 조금 더 작은 단위로 나누어서 미션을 꼼꼼히 수행해도 될 것 같다.그림자 효과 부분의 이해가 미흡한 점나는 그림자에 대한 강의 진행에 따라 그림자 베리어블을 제작했는데 완벽히 이해하고 완성한 것은 아니었다.물론 그림자 수치를 입력해 베리어블을 만드는 것은 수월했으나 그림자의 이론 부분을 더 숙지해야 한다.다음에 시도할 점과제를 할 수 있는 시간대 확보요즘 해야 할 일, 공부해야 하는 것들이 한꺼번에 겹친 시점이라 건강 유의 + 스케줄 정리가 필요하다.작은 단위로 나누어 미션 수행공유해주신 커리큘럼 스케줄을 보면서 개인적으로 원하는 대로 커스텀을 한 상태이다.보통 주 3~4회동안 미션 수행하는 것을 더 잘게 나누어서 몰아서 작업하는 것을 지양하고 싶다.

UX/UI･디자인시스템･UXUI･프로덕트디자인･Figma

0

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

현업에서 기획자나 퍼블리셔, 개발자, 영업자와 협업하다 보면 원활한 커뮤니케이션을 위해 디자인 작업 계획을 구체화하여 논의할 일이 종종 발생한다.고객사에서 구체적인 방향 제시를 원하는 경우나 일관된 디자인을 구현하기 위해 퍼블리셔나 개발자에게 세부적인 디자인 정보를 전달하기 위한 경우 등 다양한 이유에서 시각적인 디자인 정보를 구체적인 데이터 값으로 정리해야 하는 순간이 얼마든지 발생할 수 있다.지금까지는 피그마를 활용할 수 없었기 때문에 (사실 피그마에 이런 기능이 있는지 조차 알지 못했다.) 이러한 데이터 값을 엑셀이나 문서로 자료화하거나 포토샵으로 이미지로 정리하여 다른 팀과 협업을 하곤 했다.그러나 실제 프로젝트가 진행되는 과정 중에 디자인 요소의 값이 변경되는 경우는 매우 자주 발생하는데 그 때마다 문서나 이미지 자료를 수정하는 건 상당히 번거로운 일이다. 더욱이 수정이 필요할 때마다 수정한 자료를 다른 팀에 공유하고 확인을 요청하고 각 팀에서 그 때마다 자료를 확인해야 하는 건 더더욱 번거로운 일이다. 그래서 결국은 자료를 만들어 놓고도 수정과 배포는 미뤄두고 퍼블리셔나 개발자에게 디자인 수정 사항을 별도로 세세하게 적어서 보내는 방식으로 협업을 진행할 수밖에 없었다.프로젝트를 진행할 때마다 이와 같은 일이 반복되면서 보다 편한 방법을 찾기 위해 노력하고 자료도 더 보기 편하게 정리하는 등 고민과 노력을 기울여왔지만 이는 처음 자료를 만들 때에는 보다 나아진 방향으로 발전했으나 수정이 필요한 단계에서 발생하는 비효율성을 줄여줄 수는 없었다.그런데 피그마는 상술한 모든 번거로움과 비효율적인 작업들을 단번에 개선해줄 수 있는 '배리어블' 이라는 강력한 기능을 가지고 있었다는 것을 이번 주 강의를 통해 처음으로 알게 되었다. 이번 주에 강의를 통해 배우게 된 배리어블의 특장점은 다음과 같다. 피그마 배리어블 디자인 시스템의 특징UI/UX 디자인 작업에 필요한 다양한 디자인 요소를 데이터화 하고 각 요소 별로 구체적인 값을 저장할 수 있다.요소별로 저장한 값만 검색되도록 모아서 볼 수 있고 쉽고 빠르게 값을 수정할 수 있다.수치로 환산이 가능한 값이라면 얼마든지 배리어블로 등록이 가능하다. (간격, 마진 등)구분하여 정리한 디자인 값을 피그마에서 직접 확인할 수도 있고 PDF 자료로 변환하여 배포할 수도 있다.다양한 플러그인을 활용할 수 있어 쉽고 빠르게 디자인 시스템을 제작할 수 있다. 피그마 배리어블 디자인 시스템이 협업에 미치는 영향시각적으로 존재하는 디자인 요소를 수치화하여 팀 간 협업에 활용함으로써 표준이 되는 가이드라인 제공이 가능하다. 프로젝트 진행 중 빈번하게 발생하는 디자인 요소 수정 사항을 빠르고 유연하게 대응할 수 있다.디자인 요소를 계층별로 정리하여 디자이너 뿐만 아니라 협업의 대상이 되는 다른 팀에서도 쉽게 계층 구조를 이해할 수 있다.각 요소별로 기능을 부여하여 퍼블리셔나 개발자가 디자인의 의도 및 의미를 이해하기 수월하다. 최근 UI/UX 구인구직 게시글을 보면 피그마는 더 이상 우대사항이 아닌 필수사항이 되었다. 수업 시작한 지 한 주 밖에 지나지 않았음에도 피그마에서 제공하는 막강한 기능을 보면 왜 피그마가 필수인지 알 수 있었다. 필요성에 대해 절감한 지금, 이제 남은 건 강의를 열심히 수강하고 강의 내용을 반복하면서 숙달하는 일이 제일 중요하겠다. 이를 위해 지난 한 주를 돌아보며 배운 내용을 확인하고 개선점과 보완할 점을 회고하고자 한다. 1주차 강의 내용디자인 토큰과 디자인 시스템, 배리어블의 기본 개념색상, 간격, 타이포, 아이콘 등 배리어블 구성 및 등록컴포넌트 제작 세팅 및 버튼 컴포넌트 제작1주차 미션색상, 간격, 타이포, 배리어블 등록아이콘 배리어블 등록 및 그림자, 그리드 시스템, 반응형 기준점 설정1주차 잘한 점피그마를 난생 처음 다뤄보면서 엄청나게 헤맸지만 포기하지 않고 어떻게든 미션을 다 완수하였다.강의를 들으면서 중간중간 끊으면서 선생님이 강의에서 작업하신 내용을 따라하고 미션은 강의 수강 후 별도로 시간을 내어 다시 제작해보면서 처음보다는 툴에 많이 익숙해졌다.미라클모닝...을 그래도 반은 실천했다. 4일 정도는 오전에 평소보다 한 시간 일찍 일어나서 강의를 먼저 들었다.1주차 개선할 점스터디에 참여하면서 공부를 습관으로 만들고 싶었는데 한 주의 절반만 실행한 점이 아쉬웠다. 한 주간 실행하려고 노력해보니 일과 공부를 병행하는 게 쉽지 않았고 이를 위해서는 시간 관리가 상당히 중요했다. 2주차부터는 보다 효율적인 방향으로 시간을 관리하여 오전에 공부하는 시간을 늘려보아야겠다.강의를 수강하면서 배운 점을 별도로 정리해두면 반복적으로 복습할 때도 유용하고 블로그를 작성할 때도 도움이 많이 되겠다는 생각이 들었다.피그마를 처음 다루기도 하고 최근 피그마에 대규모 업데이트가 진행되면서 UI 가 매우 크게 변화하는 바람에 강의 내용을 따라가는데 시간이 훨씬 많이 소요되었고 과제 제출 시간이 늦어졌다. (선생님께서 공지사항에 강의 수강은 이전 버전으로 수강하기를 권장하셨으나 공지사항을 미처 확인하지 못했다. 다음에는 공지사항을 미리 잘 확인해야겠다.) 그래도 시간은 많이 들었지만 다행히 처음에 비하면 툴에 많이 익숙해졌으니 2주차에는 과제를 당일에 제출할 수 있도록 노력해야겠다.

UX/UI･UI/UX･Figma･프로덕트디자인･디자인시스템･워밍업스터디

0

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

시작4주 동안 잘 해보자.피그마의 기능/장점을 이애하지 못하고 '빠르게 제작/수정 여럿이서 공동작업이 용이한 툴' 정도로 사용하고 있었다. 그러다 이 강의를 신청하고 동료와 스터디를 하려고 하던 참에 인프런 워밍업 스터디 클럽이 진행된다고 해서 신청했다.무료버전만 사용하다 보니 variable을 안써봤는데 교육용으로 계정을 준다고 한다.네이밍 짓기 너무 어려운데 알려준다고 한다.4주 열심히 따라가다 보면 완강도 할 수 있을 거 같았다.이런 이유로 나는 워밍업 클럽을 신청하게 됐다.수업 노트 Libraries Color 만들기tailwind color palettes 를 이용해서 색을 만들어줍니다.color style guide를 이용해서 등록된 라이브러리 색을 가이드화 시켜줍니다.만들어진 스타일 가이드에서 필요한 색만 남기고 삭제 해주고 사용하세요. 컨버스에 있는 컬러팔레트와 스타일가이드는 지워주세요.플러그인 -> color style guide 를 실행시켜줍니다. variable collection 만드는 순서primitive Collection를 만들어서 hex 코드를 넣어주세요.semantic Collection 을 만들어서 libraries 에서 색상을 찾아서 연결 시켜주세요.primitiveblue, green, yellow, red, gray ...색의 원시값(Hex)을 저장해 놓은 디자인 언어의 기본 값blue 100/500, red 100 등 이렇게 등록 themebrand, success, danger, info, warning, neutral ...상황에 맞게 등록 함 semantictext, icon, bg, border의미에 맞게. Color Scoping: 색의 범위를 지정해 줌.bg : frame 선택icon: shape 선택text: text 선택border: stroke 선택 배리어블을 다 등록한 후에는 local에 있는 스타일은 지워주세요.Icons단색 아이콘은 vector->union 으로 합쳐주세요. 그러면 Fill로 색상을 바꾸기 좋아요. PluginAutometic Style Guides: Generate Swatches from Variables 배리어블에 만들어진 내용들을 스타일 가이드 형식으로 만들어줘요.Foundation color generator: ddTailwind Color Palettes: 색을 만들어준다. (필요 없는 색은 지워준다.)Color Style Guide : 등록된 라이브러리 색을 가이드화 시켜주자.typography style guide: 글자 스타일을 등록했다면 스타일 가이드를 만들자.Batch styler: 스타일 등록할 때 글자 지정을 잘 못했다면 일일이 바꾸지 말고 플러그인을 쓰자. GridFrame 에서 Auto Layout 적용 후 반응형 Min-width / Max-width 지정할 수 있어요.회고Variable 등록하기는 자면서 들었나봐요.미션1은 자면서 들었나 싶을 정도로 엉뚱하게 제출. 튜터 볼드님의 코멘트를 보고 수업 노트 적어가며 강의를 다시 들었다. 다른 학습자분들이 올려주신것도 보면서 미션을 수행하니 이해가 잘 됐다.토요일 저녁 8시 특강때 궁금했던 점 알려주시고 새로운 내용도 알게 되어 정말 좋았다. 네이밍 할 때 늘 고민되던 것들을 다른 사람들은 어떻게 사용하는지 어디서 찾아볼 수 있는지 팁도 알게되어 알찬 시간이였다.막 사용하던 피그마는 그만이미 피그마를 '막'사용하고 있어서 강의 내용이 쉬울거라 생각했었는데, 정말로 막 사용하고 있었다. ㅠ-ㅠ기초부터 차근차근 배워가고 있다. 프로젝트 진행 시 시스템 가이드를 만들어 '이거 수정 해주세요' 했을 때 파일들 다 열어서 수정하지 않고, 한번에 '수정-적용-배포' 할 수 있는 모습을 그리며, 남은 3주도 잘 따라가보자.

UX/UI･워밍업클럽･디자인시스템･피그마･Figma

0

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

세번째 발자국이번주의 목표는 2주차 때 못 한 미션을 모두 클리어하고 이번주 미션도 모두 완료하는 것인데 시간 부족으로 모두 완수하지 못했다. 그래서 아쉬움이 많이 남은 한 주였다 Day10 디스플레이 컴포넌트 만들어보기 아바타, 아코디언, 뱃지, 툴팁, 구분선을 만들었다. 아바타 그룹을 만들면서 어드밴스드 오토 레이아웃 세팅 기능을 이용 하여 만들 수 있다는 것을 배우게 되었다. 특히 툴팁 만드는 파트가 무척 유용했다. 나는 툴팁의 삐져나온 부분 이름이 브레이크라는 것도 이번 강의를 통해서 알았으며, 브레이크의 위치가 12개나 된다는 것도 처음 알았다. 전에 내가 만든 툴팁은 브레이크를 각 방향별로 4가지만 만들어둿기 때문이었다. 디바이더 부분은 보더 배리어블이 적용된 내용이 반영된 업데이트 된 강의의 내용이 좋았다. 이 부분이 더 훨씬 만들기 편하고 간편했다. Day11 디스플레이 컴포넌트 나머지 만들고 마지막 점검하기 칩, 기본 카드, 테이블을 만들고 플러그인 Contrast으로 접근성 체크를 했다. 칩도 일반 칩과 스태터스 칩을 구분하여 만들었다. 카드를 만든 경우는 아이콘 플레이스 홀더를 만든 것처럼 이미지 플레이스 홀더를 만들고 기존에 만든 컴포넌트를 이리저리 조합하여 카드를 만드는 과정이 꽤 간편하게 느껴졌다. 테이블은 나와 만드는 방식이 전혀 달라서 많이 배웠다. 나는 기존의 테이블을 만들때 row 단위로 만들었는데 볼드님의 강의는 컬럼 단위로 셀을 그룹지어서 만들었다. 이렇게 만드는 것이 더 간편하다는 생각을 못 했었다. 이 부분은 바로 실무에 적용해서 현재 만든 테이블을 모두 교체하고 싶다는 생각이 드는 강의였다. Day12 피드백 컴포넌트 전체 만들어보고 점검하기 얼럿, 토스트, 로더, 프로그레스, 모달을 만들었다. 로더는 스켈레톤 파트를 만들어서 프로토타입을 적용시켜서 만들 수 있다는 점이 매우 흥미로웠다. 그리고 모달 만드는 게 가장 재미있었다. 기존에 만든 컴포넌트를 모두 조립시켜서 만들고 슬롯이라는 개념을 추가되어 컴포넌트를 교체해서 만드는 점이 꽤 편리하게 느껴졌다.

UX/UI･피그마･Figma･UIUX･UXUI

0