블로그

aabb

4-29 | 피그마 베리어블과 디자인 토큰/ 디자인 시스템 개념이해하기

● 배리어블 과 스타일 배리어블은 하나의 변수만 저장 가능하며 참조할 수 있다. 따라서 기본 디자인 요소를 적용할 때 주로 사용된다.스타일은 다수의 변수까지도 저장이 가능하며 참조할 순 없다. 따라서 다수의 디자인 요소를 적용할 때 사용된다. ● 배리어블의 역할 배리어블은 디자인 토큰 및 프로토타이핑 기능을 한다. *디자인 토큰이란?디자인 시스템의 기본 구성 요소로서, 전자(Electrons)에 해당한다. /디자인 토큰이 필요한 이유많은 디자이너와 함께 작업할 때 일관성을 유지 할 수 있음다양한 플랫폼 환경(IOS, ANDROID등)에 공통된 디자인을 적용할 수 있음라이트 모드, 다크 모드 등 명확하게 색상을 구분해야 할 때 용이함 많은 하위 브랜드들이 존재할 때 디자인 에셋을 관리하기 용이함*디자인 시스템이란?재사용 가능한 컴포넌트와 패턴 등을 말하며,1) 디자인 원칙/철학 2) 스타일 가이드 3) 컴포넌트 라이브러리 4) 패턴라이브러리 5) 문서화 6) 시스템 관리 운영 으로 구성된다. *Atomic Design이란?디자인 시스템 방법론으로, 전자(Electorns) → 원자(Atom) → 분자(Molecules) → 유기체(Organisms) → 템플릿(Templates) → 페이지(pages)로 UI 시스템을 구성한다는 개념 이다. /전자(Electrons) ex. 색상, 타이포그래피, 테두리 , 그림자효과원자(Atom) ex. 라벨, 텍스트 필드, 버튼

UX/UI볼드UX워밍업클럽

한나

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

4주간의 프로덕트 디자이너 스터디를 마무리하며, 매주 새로운 도전과 배움의 기회를 마주했던 값진 시간이었습니다. 🥳여러 서비스 디자인을 직접 만들어보면서 실제 프로젝트에 적용할 수 있는 실용적인 팁들을 알 수 있었고, 페이지들을 구현하는 과정에서 컴포넌트를 활용해 효율적으로 서비스를 관리하는 방법에 대해서도 이해할 수 있었습니다. 아직 부족한 점이 많지만 이번 경험을 토대로 계속해서 성장해나가고 싶습니다.특히 마지막 주차까지 완주하면서, 처음에는 낯설게만 느껴졌던 개념들이 조금씩 제 것이 되어가는 과정을 경험할 수 있었습니다.💪📌배움배리어블 다크모드와 멀티 브랜드 모드 등록 후 활용법 B2C 이러닝 페이지 / 모바일 OTT 서비스 프로세스각 페이지 다크모드 버전 / 반응형 모드 제작 프로세스 타이포그래피 베리어블 등록하는 법배리어블을 활용한 프로토타입 만들기 📌미션다양한 서비스 화면들을 직접 구현해보면서 컴포넌트의 실질적인 활용법을 익힐 수 있었습니다. 특히 각 서비스의 핵심 기능에 맞는 UI 설계와 베리어블을 활용해 다크모드와 브랜드모드 전환, 반응형 모드를 구축해보면서 디자인 시스템의 확장성과 일관성을 유지하는 방법을 배울 수 있었습니다. 아직은 베리어블 활용이 완벽하지 않아 더 많은 연습이 필요하지만, 이번 미션을 통해 실무에서 활용할 수 있는 귀중한 경험들을 쌓을 수 있었습니다.❗이건 꼭 알아두자! ꙳꒰ ੭⑅•͈ ·̮ •͈꒱੭컴포넌트를 활용한 효율적인 서비스 구축 및 관리다크모드 및 브랜드모드 적용 및 활용법반응형 모드 적용하는 방법타이포그래피 배리어블 등록하기베리어블을 활용한 프로토타이핑 방법📌회고스스로 칭찬하고 싶은 점미션을 미리 완료하고 특강 전에 실무에서 적용할 부분들을 직접 적용해보았습니다.완전히 이해가 안된 부분은 반복해서 다시 시청하고 회사 디자인시스템 구축 시 놓친 부분들을 다시 수정 적용해보았습니다.사이드프로젝트에도 배리어블을 적극 활용해보기 위해 계속 연습해보았습니다.아쉬웠던 점특강 때 내용을 통해 배리어블을 활용한 프로토타이핑은 한 번에 이해가 되지 않아 미션4부터 어려움이 있어 아쉬움이 있었습니다.강의를 완강하고 디자이너가 왜 꼼꼼해야하는지 체감이 되었고 실무에서 그만큼 놓친 부분이 많았던 것 같아 아쉬움이 남았습니다.보완하고 싶은 점프로토타이핑은 평소에도 재밌어하던 주제였는데 배리어블을 활용한 프로토타이핑은 많이 어려움이 있었다보니 반복 학습을 통해 완전히 내것으로 만들어가고 있습니다. 강의와 미션을 하면서 깨달은 점 중 하나는 반복을 하면 결국 이해가 되고 내 것이 될 수 있구나 였기 때문에 다시 반복해보는 중이고 꼭 실무에 적용하려고 합니다🔥저번 특강 때도 알려주신 여러 디자인시스템을 분석해봐야할 필요성도 많이 느꼈습니다.앞으로의 계획완주를 해서 다음주 계획의 주제를 앞으로의 계획으로 변경 후 작성해보았습니다. 이번 강의들을 통해 배운 디자인 시스템을 기반으로 실무에서 활용할 수 있는 체계적인 컴포넌트 설계와 배리어블 구축 및 문서화 작업을 이어나가려 합니다. 특히 Figma의 다양한 기능들을 더 깊이 학습하여 효율적인 디자인 워크플로우를 구축하고자 합니다. 또한 프로덕트 디자이너로서 개발자와의 원활한 협업과 더 나은 사용자 경험 구현을 위해 HTML, CSS, JavaScript 등 프론트엔드 기술에 대한 학습을 시작하려 합니다. 이를 통해 기술적 제약사항을 이해하고 실현 가능한 디자인을 제안할 수 있는 디자이너로 성장하고 싶습니다.볼드님의 강의를 통해 디자인 시스템의 중요성과 실무에서 활용할 수 있는 다양한 인사이트를 얻을 수 있었습니다. 특히 베리어블 활용법과 같은 실질적인 스킬을 꼼꼼하게 알려주신 덕분에, 한 단계 성장할 수 있는 값진 시간이었습니다.🐾 진심으로 감사드립니다.😊

UX/UIUXUI피그마프로덕트디자인볼드UX

표수진

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

드디어 오늘 저녁에 있을 온라인 특강을 제외하고 어찌보면 길고 어찌보면 짧은 워밍업 클럽 프로그램이 마무리되었다! 확실히 온라인 강의만 결제해서 혼자 공부할 때보다는 스터디 프로그램이 함께 진행되다보니 열심히 듣고자 하는 의지도 더 활활 타올랐던 것 같고, 매일 기한에 맞춰서 미션을 진행해야 되기 때문에 미루지 않고(사실 못하고..) 들었던 것 같다 ㅎㅎ퇴사를 하고나서 세웠던 계획 중에 하나인 피그마 공부와 디자인 시스템 공부를 한번에 해결할 수 있어서 뿌듯하면서도 알찬 시간이였고, 이제부터는 지금까지 배운 내용을 계속해서 반복하고 작업해보면서 내 것으로 만드는 시간을 가져봐야 할 것 같다. 이렇게 좋은 강의를 만들어주신 볼드님께도 다시 한번 감사하다는 말씀을 드리고 싶다! [4주차 강의 요약]4주차에도 지난주에 이어서 지금까지 열심히 만들어놨던 파운데이션과 컴포넌트를 이리저리 조합해서 새로운 페이지로 만들어보는 시간을 가졌다. 강의 초반에 볼드님께서 이 부분을 수강생분들이 제일 좋아하셨다는 말을 하셨었는데 실제로 나도 이 부분 강의가 제일 재미있고 흥미로웠다. 잘 다져놓은 기반으로 튼튼한 건물을 짓는 기분이랄까.. B2C E-Learning 페이지 제작모바일 OTT 서비스 페이지 제작 확실히 배리어블 모드를 잘 만들어놓으니까 디바이스별 반응형 디자인, 다크모드 전환을 이렇게 쉽게 할 수 있는 것에 다시 한번 박수를 보낸다..👍 그리고 실제 데이터를 'Google Sheet Sync' 플러그인으로 바로 적용할 수 있는 것도 앞으로 디자인할 때 편하게 사용할 수 있는 기능인 것 같다.   [이번주 회고]스스로 칭찬하고 싶은 점프로그램이 끝날 때까지 강의랑 미션을 기한에 맞춰서 다 완수했다!기존에 XD로 작업했던 작업물을 다시 피그마로 제작해보면서 배웠던 내용을 적용하고 있다퇴사를 하고 '나는 어떤 디자이너가 되고 싶은가'라는 의문과 함께 내가 부족한 부분 중 어떤 점을 먼저 채워야 할지 고민만 하다가 시간이 흘렀는데 프로그램을 열심히 참여하면서 다시 한번 디자인에 대한 열정을 가질 수 있었고 더 많이 공부하고 싶다는 생각이 들었다. 아쉬웠던 점, 보완하고 싶은 점조금 더 피그마, 디자인 시스템에 익숙해져서 작업 시간을 줄이고 싶고 앞으로 실무에서 활용할 수 있는 효과적인 디자인 방법을 고안해보고 싶다.내 디자인을 보다 효과적으로 전달하기 위해 프로토타이핑 관련 공부도 더 해보고싶다.

UX/UIUX/UI프로덕트디자인디자인시스템피그마figma토큰디자인볼드UX

한나

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

이번 3주차는 유독 어렵게 느껴지던 다크모드 구현에 대한 부분을 직접 미션을 통해 구축해보며 많은 이해를 하게 되어 스스로 느끼기에 배리어블에 대한 이해도가 높아졌다고 느껴진 한 주였습니다. 👩‍💻먼저는 다양한 네비게이션 컴포넌트를 만드는 과정을 배웠고 텍스트 링크, 브레드크럼프, 네비게이션 탭, 모바일 하단 네비게이션, 페이지네이션 등 실무에서 자주 사용되는 요소들을 직접 구현해보며 각 컴포넌트의 특성과 사용자 경험에 미치는 영향을 깊이 이해할 수 있었습니다.개인적으로 느끼기에는 다크모드 구현이 3주차의 하이라이트(?) 였던 것 같습니다. 😆 평소에도 다크모드용 색상 변수 설정이 꽤 까다로웠는데, 이번에 웹 접근성 지침(WCAG)의 AA 기준을 고려한 색상 대비 설정 방법을 배우면서 전체적인 프로세스를 명확히 이해할 수 있었습니다. 이 과정에서 배운 내용을 토대로 앞으로 실무에서 다크모드를 구현하는 부분이 자신감이 많이 생길 것 같습니다.이번 주 학습을 통해 사용자 경험을 고려한 네비게이션 설계의 중요성과 접근성을 고려한 디자인 시스템 구축의 가치를 다시 한번 깨달았습니다. 특히 다크모드 구현 과정에서 배운 체계적인 접근 방식은 실무에서 바로 적용해 볼 수 있을 것 같아 매우 기대됩니다. 이런 경험들이 쌓여 더 나은 디자이너로 성장해나가고 싶습니다.📈📌배움네비게이션 컴포넌트 만들기배리어블 다크모드 개념 익히기배리어블 모드 활용과 원리 배우고 구현해보기컴포넌트를 조합해 B2B 이커머스 어드민 페이지 만들기->다크모드, 반응형 멀티브랜드 구현하기📌미션다크모드 배리어블 구현과 B2B 이커머스 어드민 페이지 구현 경험을 통해 색상 대비와 웹 접근성의 중요성을 체감했고, 실제 프로젝트에 적용할 수 있는 실용적인 지식을 얻었습니다. B2B 이커머스 어드민 페이지를 만들면서는 복잡한 정보를 효율적으로 구조화하는 방법과 사용자 편의성을 고려한 UI 설계의 중요성을 깨달았습니다. ❗이건 꼭 알아두자! ꙳꒰ ੭⑅•͈ ·̮ •͈꒱੭다크모드 구현의 핵심 원칙 : 웹 접근성 기준을 고려한 색상 대비 설정 / 배리어블 활용을 통한 효율적인 테마 전환 방법 / 가독성과 사용자 경험을 고려한 생산 선택네비게이션 컴포넌트 설계 시 고려사항들컴포넌트 재사용과 조합의 중요성B2B 이커머스 어드민 페이지 설계📌회고스스로 칭찬하고 싶은 점강의를 반복적으로 시청하며 제대로 이해하고 미션을 진행할 수 있도록 노력했습니다. 특히 다크모드 구현 부분에서 여러 번 복습하여 개념을 확실히 잡을 수 있었습니다.배리어블과 함께 반응형에 대해서도 많이 이해하고 실무에서도 적용해보았습니다. 아쉬웠던 점미션이 당일에 달성하다 놓친 부분이 있어 아쉬움이 있었고 시간관리를 더 효율적으로 관리해야겠다고 느꼈습니다.실무에서 접근성을 많이 고려하지 못했던 것 같아 이번 주차 공부 후 다시 검토를 해나가고 있습니다.보완하고 싶은 점웹접근성을 고려한 디자인을 실무에서도 제대로 적용을 해보고 싶었고 주요 페이지들을 다시 검토해나가고 있습니다.B2B의 특징을 이해하고 기업 니즈나 브랜드에 맞는 인터페이스를 구현해내고 싶습니다. 성공적인 B2B 플랫폼들의 UI/UX 사례를 조사하고 분석하여 다음 주차 미션과제에도 추가적으로 적용해볼 예정입니다.다음 주 계획남은 미션들을 미리 만들어보고 따로 추가적인 구현을 더 해보려고 합니다.그동안의 미션들을 검토하고 놓친 부분이나 이해가 덜 된 부분을 체크하고 추가적으로 공부를 더 해보려고 합니다.

UX/UIUXUI피그마프로덕트디자인볼드UX

한나

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

이번 주는 디자인 시스템의 핵심인 UI 컴포넌트들을 직접 만들어보는 한 주였습니다. 다양한 입력, 디스플레이, 피드백 컴포넌트들을 구현하면서 각 요소의 중요성과 사용자 경험에 미치는 영향을 체감할 수 있었습니다. 특히 작은 디테일 하나하나가 전체 인터페이스의 일관성과 사용성에 큰 영향을 준다는 점을 깨달았습니다.회사 서비스에 테이블 컴포넌트가 사용되는 부분이 있어 직접 구현해보며 기존에 놓쳤던 중요한 포인트들을 재점검하는 유익한시간이 되기도 했습니다. 이 과정을 통해 실무 적용에 대한 더 깊은 이해를 할 수 있게 된 것 같습니다. :D이번 주는 프롬프트를 활용한 디자인 문서화에 대한 특별 강의가 있었습니다.🤖 Chat GPT를 이용한 프롬프트 엔지니어링과 문서화 방법, 그리고 유용한 플러그인들에 대해 알려주셨는데, 실무에서 바로 적용해볼 수 있다는 점에서 큰 기대가 되었습니다. 직접 프롬프트 작성을 연습해보면서 다른 분들의 결과물도 검토해보며 보완점을 찾아볼 수 있었고 AI 도구의 효과적인 활용법을 깊이 이해할 수 있었습니다😊 📌배움입력 컴포넌트: 버튼, 체크박스, 라디오 버튼, 스위치, 텍스트 필드 등디스플레이 컴포넌트: 아바타, 아코디언, 뱃지, 툴팁, 칩스, 테이블 등피드백 컴포넌트: 알림/경고 메시지, 토스트, 스켈레톤 로더, 프로그레스 바 등Chat GPT의 효과적인 프롬프트 작성법: 명확하고 구체적인 지시를 통해 원하는 결과 얻기AI를 활용한 문서화 프로세스: 컴포넌트 설명, 사용 가이드라인 등을 빠르게 작성디자인 관련 유용한 플러그인📌미션이번 주 미션으로 다양한 UI 컴포넌트들을 직접 구현해보았습니다. 아바타, 아코디언, 툴팁, 칩스, 베이직 카드, 테이블 등 여러 디스플레이 컴포넌트를 만들면서 각 요소의 세부적인 디자인과 기능에 대해 깊이 고민할 수 있었습니다. 각 요소의 특성, 상태 관리의 중요성을 깊이 이해해보는 시간이 되었습니다.그리고 특강을 통해 배운 내용을 통해 AI도구를 효과적으로 활용해 생산성을 향상시키고, 작업효율을 높여나가는 프로세스를 스스로 더 연습해야되겠다는 생각이 들었습니다.❗이건 꼭 알아두자! ꙳꒰ ੭⑅•͈ ·̮ •͈꒱੭각 컴포넌트들의 특성상태 관리의 중요성 (기본, 호버, 활성화, 비활성화 등) 컴포넌트 간 일관성 유지를 위한 디자인 토큰 활용챗 GPT 프롬프트 방법과 이를 활용한 문서화 방법📌회고스스로 칭찬하고 싶은 점들었던 강의 내용을 복습하며 디자인 시스템에 대한 이해도를 높이려 노력했습니다.다양한 UI 컴포넌트를 구현하며 세밀하게 검토했습니다. 아쉬웠던 점매일 꾸준히 학습하려 했으나, 야근으로 인해 일부 날짜에는 미션을 당일에 수행하지 못했습니다.문서화 작업에 대한 추가적인 연습이 부족했던 것 같습니다. 보완하고 싶은 점문서화 스킬 향상을 위해 추가 학습 및 연습을 진행하려고 합니다.프롬프트를 활용해 문서화를 더욱 효육적으로 진행해보고 싶습니다. 1주차 미션 때 문서화 진행을 추가적으로 보완해서 진행해보고자 합니다.다음 주 계획주말에 강의를 미리 숙지하고 매일 퇴근 후 2시간 확보 후 미션에 집중하기문서화 작업 시 개발자들과 이야기를 나누고 업무에 다시금 체계적으로 적용해보기한 주 배운 내용을 실무에 적용하며 현 디자인시스템의 보완점을 찾아보기 실제 프로젝트에 미션으로 구현해 본 컴포넌트들을 적용해보기

UX/UIUXUI피그마프로덕트디자인볼드UX

한나

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

회사 서비스를 구축하는 과정에서 일관된 디자인의 필요성을 절실히 느꼈습니다. 특히 개발자들과의 원활한 소통을 위해 디자인 시스템이 꼭 필요하다는 것을 깨닫던 중에 볼드UX튜터님의 강의를 수강하게 되었습니다.클럽 참여 전에는 시간 제약으로 인해 초반 내용과 필요한 부분만 선택적으로 들었던 터라 아쉬움이 있었습니다. 그러던 중에 인프런 워밍업 클럽 모집 소식을 듣고 참여하게 되었습니다.💪아직 1주차이지만 클럽에 참여하면서 처음부터 강의를 다시 듣고 기초를 다시 다지는 시간이 되었습니다. 그리고 놓친 부분을 다시금 보완하고 현재 회사에서 적용 중인 디자인 시스템도 보완해나가는 과정이 되어가는 것 같습니다. 미션을 통해 체계적으로 학습할 수 있어 스스로 한단계씩 발전되어간다고 느껴져 평소보다 하루일과가 바빠졌지만 과정 하나하나가 소중한 것 같습니다😊📌배움스타일 가이드 작성 : 색상, 타이포그래피, 간격, 아이콘, 그리드, 그림자 적용=> 문서화로 내보내기UI요소 제작 : 버튼, 라디오 버튼, 체크박스 등 기본 컴포넌트 디자인📌미션스타일 가이드 요소별 적용 및 문서화기본 UI컴포넌트 디자인 및 제작 배리어블을 하나씩 적용하고 문서화 작업을 해보면서 실무에서 놓친 포인트들을 짚어보게 되었고 디자인의 일관성이 얼마나 중요한지 실제적으로 느낄 수 있었던 것 같습니다.단순히 색상이나 폰트를 정리하는 작업으로 스스로 생각했던 것 같아요. 하나의 프로젝트의 프로세스 중에 디자인 시스템을 구축한다는 건 정체성을 만드는 과정이라고 생각이 들기도 했습니다.미션과제를 하면서 UI적으로 이쁘니까라는 단순한 생각이 아니라 실제 프로젝트를 구축한다고 생각하고 가독성, 브랜드톤도 고려하며 구축해나가다보니 디테일이 얼마나 중요한지 이해하게 된 시간이었습니다.사용자와 개발자, 비즈니스 목표를 모두 고려해야 하는 종합적인 작업이라는 생각도 들고 그만큼 워밍업 클럽 기간에 실무에도 다시 보완해서 적용하고 디자이너로서 더 예민하고 세밀하게 프로세스를 구축해나가야겠다는 생각도 들었습니다.❗이건 꼭 알아두자! ꙳꒰ ੭⑅•͈ ·̮ •͈꒱੭디자인 시스템의 실무 적용 방법일관된 디자인 구축을 위한 스타일 가이드 작성 프로세스UI 컴포넌트 설계 시 고려해야 할 사항들📌회고스스로 칭찬하고 싶은 점회사 이슈로 업무가 많아지다보니 미션 수행을 바로 진행하지 못해 어려움이 있었지만 조금씩이라도 진도에 맞춰 미션을 달성해나가려고 노력했습니다! :D들었던 강의도 다시 처음부터 학습하며 디자인 시스템의 이해도를 높이려고 노력했습니다. 아쉬웠던 점매일 꾸준히 하기로 OT 때 스스로 약속을 했지만 매일 이행을 하지 못해 아쉬움이 있었습니다.문서화 작업에 대한 추가적인 연습이 많이 필요함을 느꼈고 스스로가 미션달성에 좀 더 치중된 것 같아 아쉬움이 있었습니다. 문서화는 다시 연습을 해보려고 합니다!보완하고 싶은 점매일 정해진 시간에 미션과 강의를 수행하는 루틴 만들기 [OT 때 스스로의 약속을 지켜나가기 위한 계획을 다시금 세우려고 해요!]문서화 스킬 향상을 위한 추가 학습 및 연습다음주 계획주말에 강의를 미리 숙지하고 매일 퇴근 후 2시간 확보 후 미션에 집중하기문서화 작업 시 개발자분들과 이야기를 나누고 업무에 다시금 체계적으로 적용해보기한 주 배운 내용을 실무에 적용하며 현 디자인시스템의 보완점을 찾아보기  

UX/UIUXUI피그마프로덕트디자인볼드UX

예은

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

볼드UX 튜터님의 <피그마 배리어블을 활용한 디자인 시스템 구축하기>를 수강한 지 2주...ㅠㅠ이번 과제물 중 하나는 늦게 제출하고 말았다.커리큘럼에 맞춰 착실히 완주하고 싶었는데... 그래도 학습하는 것이 더욱 중요하다고 생각하고 열심히 마무리했다.아쉬움을 뒤로 하고, 포기하지 않고 나아가겠다고 다짐했다. 배움입력 컴포넌트: 버튼, 체크박스, 라디오, 스퉤치, 라벨, 컨트롤 그룹, 텍스트 필드, 텍스트 상자, 셀렉트와 드롭다운디스플레이 컴포넌트: 아바타, 아코디언, 뱃지, 툴팁, 디바이더, 팁, 카드, 테이블피드백 컴포넌트: 알림/경고 메시지, 토스트, 스켈레톤 로더와 로딩 스피너, 프로그레스 바, 슬롯 컴포넌트, 모달 미션입력 컴포넌트 제작컴포넌트를 조합해 설문조사 페이지, 회원가입 페이지 제작디스플레이 컴포넌트 제작테이블 디자인피드백 컴포넌트 제작모달 디자인(너무너무 힘들었다...!!) 이건 꼭 알아두자포기하지만 않으면 된다!! 회고스스로 칭찬하고 싶은 점기본 미션뿐 아니라 보너스 미션까지 모두 해냈다. 아쉬웠던 점진도를 따라가지 못하고 일정이 밀렸다.보완하고 싶은 점진도를 따라가기에 충분할 만큼의 학습 시간을 확보해야겠다.다음주에는개인 프로젝트에 적용하며 복습할 것이다.

UX/UIUXUI피그마프로덕트디자인볼드UX

표수진

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

회사를 다니면서도 기본적인 내용만 대충 알고 '퇴근하면 피그마 공부해야지..' 했었는데 퇴사하고나서야 시간이 생겨 이렇게 피그마 공부를 제대로 시작하게 됐다. 혼자 공부하다보면 다른 일때문에 강의를 듣는 게 우선순위에서 밀리는 경우가 종종 있었는데 인프런 워밍업 클럽과 함께 정해진 시간표에 따라 미션을 수행하다보니 강제적인 요소가 있어서 아직 1주차지만 더 열심히 강의를 들으려고 했던 것 같다.그리고 재직중에도 스타일 가이드는 여러번 작성해봤던 적이 있었지만 실제로 디자인 시스템까지 구축해본 경험은 없어서 실무에서는 디자인 시스템을 어떻게 개발하고 어떻게 활용하는지 제대로 알고 싶어서 볼드님의 강의를 듣게 되었는데 기초적인 개념부터 꼼꼼하게 알려주셔서 이번 기회에 피그마 배리어블에 대해 깊게 이해하고 역량을 키워 프로덕트 디자이너로서 원하는 회사로 이직까지 할 수 있었으면 좋겠다. 1주차 강의 내용 요약디자인 토큰과 배리어블, 디자인 시스템에 대한 기본적인 개념 및 구조 알아보기배리어블은 디자인 토큰을 만들기 위한 요소이고, 디자인 토큰은 디자인 시스템의 기본 구성 요소일관성 있는 경험을 제공하기 위해 제작,관리하기도 훨씬 용이한 특징이 있음 디자인시스템 : 재사용 가능한 컴포넌트, 패턴, 가이드디자인시스템은 '큰 목표를 가지되, 작은 성공을 이뤄나가면서 공감대를 형성하며 만들어가야한다'색상, 간격, 타이포그래피, 아이콘, 그림자 효과 등 배리어블 및 스타일로 등록하기배리어블은 오직 하나의 변수만 저장(참조 가능), 스타일은 하나 또는 다수의 변수 저장배리어블은 Raw value - Primitive - Theme - Semantic - Component로 계층을 가지고 있음입력(Input) 컴포넌트 만들기 : 버튼, 체크박스, 라디오버튼, 스위치 버튼컴포넌트와 인스턴스, 프로퍼티에 대한 기본 개념 공부 스스로 칭찬하고 싶은 점스터디 진행 일정에 맞춰서 한주동안 온라인 강의를 열심히 듣고 미션을 수행했다.피그마 공부에 대해 하루 루틴을 만들 수 있었던 좋은 기회가 된 것 같다.모르는 개념을 이해하기 위해 여러번 강의를 들어보면서 조금은 감을 잡으려고 노력했던 것 같다.아쉬웠던 점, 보완하고 싶은 점(다음주 목표)조금 더 일찍 공부를 제대로 시작했으면 어땠을까 하는 아쉬움이 크게 남았지만 1달동안 열심히 해서 꼭 피그마 배리어블을 마스터 할 수 있었으면 좋겠다.이번주는 휴일이 중간에 있었어서 매일 매일 같은 시간대에 공부를 하지는 못했다. 다음주부터는 오전 시간을 활용해서 강의를 듣도록 노력해야겠다.피그마를 제대로 배우는 게 처음이다보니 아직 어려운 부분이 많아서 강의 내용에 따라가기 급급했는데 다음주부터는 왜 이렇게 만드는지에 대해 조금 더 고민해보는 시간을 가져봐야겠다. 

UX/UIUXUI피그마피그마배리어블프로덕트디자인figma볼드UX

예은

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

볼드UX 튜터님의 <피그마 배리어블을 활용한 디자인 시스템 구축하기>를 수강하며 인프런 워밍업 클럽에 참여하게 되었다.프로젝트들을 진행하며 디자인 시스템을 구축하는 능력이 필요하다는 것을 느끼고 있었다.... 특히 원활한 소통을 위해서 꼭 공부하고 싶다고 생각했다.그리고 사실, 전부터 눈독 들이던 강의였기에 더욱 열의가 넘쳤다!매일매일 학습하는 커리큘럼이라 진도를 잘 따라갈 수 있을지 살짝은 걱정됐지만... 하고 싶은 일이니 열심히 할 수밖에 없다!일단 시작하고 될때까지 하면 된다. 레츠고 배움디자인 토큰과 디자인 시스템에 대한 이해배리어블과 스타일 학습다양한 배리어블 등록 미션컬러, 타이포그래피, 간격, 효과 등 배리어블 등록그리드와 반응형 기준점, 아이콘 등록작업한 스타일 가이드 문서화 (수줍은 탓에 과제물은 모자이크처리해 올립니다...) 이건 꼭 알아두자배리어블 vs 스타일저장 가능한 변수값의 개수: 하나 / 하나 이상참조 여부: 참조 가능 / 참조 불가능모드 여부: 모드 활용 가능 / 직접적인 활용 불가능배리어블 => 다양한 모드에서 달라지는, 재사용 가능한 색상을 등록하는 경우스타일 => 여러 디자인 요소 결합해 사용하는 경우 회고스스로 칭찬하고 싶은 점개인적으로 학습 분량이 벅차게 느껴졌지만 포기하지 않고 어떻게든 해냈다.다른 분들의 작업물을 둘러보며 스스로의 개선점을 찾아보았다. 아쉬웠던 점아직까지 학습이 습관화되지 않은 것 같다. 개선 필요보완하고 싶은 점계획을 세워 여유롭게 학습할 수 있는 환경을 조성하고 싶다.다음주에는나만의 규칙을 만들어 일정한 시간에 학습할 것이다.단순히 멘토님을 따라 학습하는 것에서 더 나아가, 스스로 고민해보고 디자인 시스템을 구축할 것이다. 

UX/UIUXUI피그마프로덕트디자인볼드UX

채널톡 아이콘