블로그

삼각커피포리

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

오프라인 수료식 참가퇴근하자마자 달려간 판교. 공지사항에 안내해준 길로 가보니 인프런 워밍업 클럽 배너가 환영해줬다. 엘리베이터를 타고 인프런 사무실에 도착했을 때는 다들 파트별로 삼삼오오 모여있었다. 나는 인프런 스태프분의 안내로 프로덕트 디자인 파트 멘티분들과 한 테이블에 앉게 되었다. 네트워킹 시간인프런 측에서 제공해주신 피자와 음료수로 식사를 하면서 다른 분들과 이것저것 이야기하며 자유롭게 네트워킹 할 수 있는 분위기가 좋았다. 식사를 하며 도란도란 이야기를 나누는 네트워킹 시간이었는데 다들 디스코드를 통해 미션을 통해 본 이름이라서 그런지 처음보는데도 친근감이 들었다.프로덕트 디자인 파트 자리에는 오프라인 수료식에 참석하지 못한 볼드님 대신 인프런의 시니어 프로덕트 디자이너인 엠제이님께서 테이블에 함께 해주셨다. 그리고 Q&A 시간이 아님에도 불구하고 이런저런 사소한 질문들까지 모두 답변해주신 엠제이님 정말 감사드립니다. 다른 분들도 정말 날카로운 질문을 많이 해주셨다.덕분에 인프런에 대해 궁금한 점도 풀리고 인프런의 디자인 업무에 대해서도 답변을 들을 수 있었던 소중한 자리였다.멘토 소개 및 우수러너 시상그렇게 네트워킹 시간이 끝나고 각 파트를 담당하신 멘토님 소개가 있었다. 현재 ‘런던’에 계신 볼드님께서는 물리적 거리상 오프라인 수료식에는 구글미트로 참석해주셨다. 워밍업 클럽을 하면서 내내 봤던 볼드님 얼굴이었는데도 이렇게 또 보니 매우 반가웠다. 볼드님의 얼굴이 화면에 나타나자마자 프로덕트 디자인 테이블에서는 반가움의 환호도 터져나왔다. 그 다음은 대망의 우수러너 시상식이 진행되었다. 사실 워밍업 클럽 OT때의 우수러너가 되자고 호기롭게 다짐했던 것과 달리 미션하는 과정이 힘들어서 완주했다는 사실에만 만족하고 있었다. 처음에 다들 미션보드로 미션을 진행할 때 나는 다른 드래프트에서 미션을 진행해서 시작부터 삐끗했었고, 어느 순간부터는 제출 시간을 엄수하지 못했다는 아쉬움이 가득했기 때문이다. 그래서 어떤 분이 우수러너를 받으실 지 너무 궁금해서 핸드폰을 들고 우수러너 발표만을 기다리고 있었는데…. 어?!우수러너 발표 화면에 내 이름이 딱 나타난 순간 전혀 예상하지 못 해서 너무 놀랐다. 얼떨결에 나가서 우수러너 시상도 받고 사진도 찍었다. 쑥쓰러운 마음으로 자리에 돌아가니 다른 멘티분들이 정말 많이 축하해주셨다. 중간에 포기하지 않고 완주 한 것만으로도 스스로 만족하고 있었는데 이렇게 우수러너에 선정이 되다니, 모두 다 좋은 강의를 해주신 볼드님과 워밍업 클럽을 진행해주신 인프런 덕분이라고 생각한다. 질의응답잠깐 쉬는 시간을 가지고 Q&A 시간이 진행되었다. 질의응답은 구글 미트를 통해 온라인과 오프라인 동시에 진행되었으며, 미리 받은 질문 중 일부를 선정하여 진행하였다. 프로덕트 디자인 팀은 인프런의 시니어 디자이너 엠제이님께서 선정된 질문과 온라인으로 올라온 질문에 답변을 해주셨다.기억나는 질문과 답변들을 몇 가지 정리해보았다. (잊지 않고 내가 기억하고 싶어서 정리해봤습니다...)Q1. 개발팀과 핸드오프 할 때 어떤 방식으로 소통하나요?A1. 피그마에서 ready for dev 사용하고 변경사항도 dev mode를 통해서 확인합니다. 피그마에서 오거나이저 이상 플랜에서 베타버전으로 제공하는 code connect라는 기능도 사용하는데 앞으로 프로퍼티 작성이 중요해질 것입니다.Q2. 프로덕트 디자인을 잘하기 위한 방법이나 성장에 가장 도움이 되는 것은 무엇일까요?A2. 가설을 뾰족하게 세울 수 있어야 하며, 내가 세운 가설을 내부 팀원들도 이해하는지가 중요합니다. 내가 세운 가설을 증명하고 타인이 공감해야하며 끊임없이 시도하고 그게 먹힐 때까지 도전해야합니다. 외부에서 UT를 해볼 수 없다면 내부에서라도 UT를 진행해보시면 도움이 됩니다.Q3. AI와 새로운 플랫폼에 대항하는 커리어 설계 방법은 무엇이 있을까요?A3. 오히려 활용할 수 있는 방법이 다양해져서 좋습니다. 시간이 오래 걸리는 일은 이제 AI를 통해서 시간을 단축하고 그 시간에 디자이너는 다른 데 고민할 수 있는 시간이 생겼습니다. AI를 잘 습득하고 더 잘 활용하려면 어떻게 써야할지 본인만의 노하우를 쌓아서 대체 불가능한 인력이 되고 필요한 사람이 되는 것이 중요합니다.Q4. JD에서 말하는 디자인 시스템 구축 경험이 어디까지 일까요?A4. 꼭 문서화까지 해야 디자인 시스템을 구축했다고 말할 수 있는건 아니지만 구축한 레벨이 어느 정도까지인지가 중요합니다. 특히 코드화되어 싱크가 어느정도 되어있는지가 중요하고, 디자인 시스템을 다른 디자이너들과 같이 구축했는지도 중요합니다. 인원이 적은 상태에서 디자인 시스템을 구축하는 건 제한된 시간에 리소스를 낭비하는 게 될 수도 있습니다. 일단 파운데이션 정도로만 시작을 하고 거기에서 더 발전시켜나간다면 유의미하다고 봅니다.Q5. 디자이너로서 노력해야 하는 소프트 스킬 노하우가 있을까요?A5. 피드백에 대해서 수용적으로 받아들이고 긍정적으로 바라보세요. 어떤 의견을 수용 할 지 말지 결국 제 선택이지만 일방적으로 선택하기 보다는 협업하는 사람들을 생각합니다. 그리고 긍정적인 태도를 유지하려고 하며, 냉정하게 이야기 하지 않으려고 합니다.뒷풀이오프라인 수료식의 모든 과정이 끝났음에도 헤어지기 아쉬웠던 프로덕트 디자인 파트 사람들은 뒷풀이를 가자고 결정하였다. 함께하는 인원 중에는 학생분도 계셔서 모두가 갈 수 있는 배스킨라빈스를 가려고 했지만 사람이 너무 많아서 실패. 대신에 바로 옆에 있는 편의점으로 가서 음료수를 마시며 이야기를 더 하기로 했다.아무래도 온라인에서 한 달동안 이름을 지켜봐왔기 때문이었을까 다들 낯가리는 사람 없이 엄청난 수다를 떨었다. 다들 워밍업클럽이 진행되는 동안 미션에 대해 이야기를 하기도 했고, 직장을 다니시는 분들은 현업에 대해서도 다양한 이야기를 해주셔서 재밌고 유쾌한 자리가 되었다. 시간이 늦어져 헤어지는 것이 아쉬워서 다들 SNS이나 명함을 교환하고 언젠가 꼭 만나자는 말을 하며 헤어졌다. 워밍업 클럽 후기5월 한 달 내내 진행된 워밍업 클럽 스터디 1기가 정말로 끝났다. 매일 퇴근하고 컴퓨터 앞에 앉아서 미션하던 게 끝났다는게 시원섭섭하다. 워밍업 클럽 덕분에 볼드님의 강의를 완강 할 수 있었고, 디스코드 채널을 운영해주신 덕분에 미션을 진행하며 궁금했던 많은 질문도 할 수 있었다. 비록, 워밍업 클럽 스터디 1기가 끝났지만 시간이 나는대로 강의를 복습하거나 피그마 파일을 다시 켜서 한번 더 다듬을 부분이 있나 확인해볼 예정이다.기존 강의와 별개로 피그마의 업데이트 된 내용과 여러가지 프로 팁을 알려주시는 온라인 세션을 추가로 진행해주신 볼드님께 감사드리고, 이러한 자리를 만들어주신 인프런 측에도 감사드린다는 말을 끝으로 마무리하겠다. 다들 모두 수고하셨습니다! 👏  

UX/UI피그마UIUXUXUI디자인프로덕트디자인figma

낌밤

UXUI 디자이너를 위한 무료 애니메이션 툴 'phase' 사용기

독일&대만 애니메이션 툴이 한국에 첫 번째로 론칭했다는 소식을 듣고 바로 사용해보았다.직접 사용해보고 느낀점 들을 정리 해보았다. 📌 쉽고 익숙한 인터페이스인터페이스가 figma와 유사하고, 기타 디자인 툴을 사용해본 사람은 바로 느낌이 오는 인터페이스.레이어창이나 디자인 패널의 위치가 너️무 익숙해서 한번에 슉슉 찾아서 실행해 볼 수 있었다.그래서 배우기도 더 쉽겠다고 느꼈다. 📌 무료로 이용가능한 툴 ⭐⭐⭐⭐⭐어도비, 피그마, Open AI 등 디자인을 위해 이미 구독하고 있는게 많아 걱정됐는데, 무료 체험판이 아닌 전 기능을 무료로 이용할 수 있었다. 무료 애니메이션 툴이라고 퀄리티가 낮은 것도 아니었고,여느 애니메이션 툴과 비교해도 퀄리티 높은 결과물을 만들 수 있는게 정말 큰 장점이었다 📌 웹기반 ⭐⭐⭐⭐⭐ (협업 + 용량)웹기반 애니메이션 툴이여서 공동 작업자를 초대해서 한 화면에서 작업할 수 있었다.피그마처럼 히스토리 + 코멘트 기능까지 있어 협업에도 최적화 되었구나~ 하고 느꼈다.플래시부터 에펙까지 다 써온 나로써 웹기반 클라우드로 파일 저장이나 용량 부담없는 것 또한큰 장점으로 다가왔다. 📌 한국 튜토리얼과 안내한국이 첫 릴리즈여서 그런지 한국어 대응이 잘되어있다고 느꼈다.홈페이지에서 확인할 수 있는 공식 튜토리얼은 모두 한국어로 진행되고 있고 한국 공식 sns나 채팅방을 운영해서 바로 물어보고 답변받기 좋았다. 📌 간편한 핸드오프작업물을 개발자에게 핸드오프하기 용이했다. json파일로 추출이 되니 바로 전달하면 되고, mp4나 gif같은 일반 애니메이션 확장자로도 추출가능하니 필요에 맞게 사용하면 된다. phase가 궁금한 분들은 홈페이지에서 확인해봐도 좋을 것 같다. https://zrr.kr/vAgZ홈페이지에 들어가니 이벤트도 진행하고 있었다. 애니메이션 제작 챌린지를 통해 총 558만원 상금도 준다.1등이 270만원! 내꺼다!!! 

애니메이션모션그래픽UXUI

한나

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

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

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

한나

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

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

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

전석희

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

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

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

표수진

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

벌써 스터디 2주차가 끝나다니 시간이 정말 빠른 것 같다. 2주차가 되니 피그마 사용하는 것도 그렇고 강의 듣고 실습하는 것도 적응해가면서 시간이 조금은 덜 걸릴 줄 알았는데 여전히 미션을 진행하는데 꽤 오랜 시간이 걸렸다 ㅠㅠ이번주는 지난주의 입력 컴포넌트에 이어서 계속해서 여러 종류의 컴포넌트를 만들어 가는 과정이였는데 오랜만에 디자인 작업을 하는 것 자체가 너무 재미있었던 것 같다. 특히 예전에 회사를 다니면서 UI디자인 작업을 했을 때, 이런 식으로 컴포넌트에 배리어블을 활용해서 디자인 했으면 얼마나 더 효율적이였을까 하는 생각이 계속해서 들었던 것 같다. [2주차 강의 내용 요약]1) 컴포넌트에 대한 기본 개념 다시 한번 정리컴포넌트 = 붕어빵 틀, 인스턴스 = 붕어빵 재료 (재료에 따라 다양한 붕어빵을 만들 수 있다)컴포넌트 만드는 순서싱글 컴포넌트 만들기 - 인스턴스(복제본)으로 테스트 - 베리언트 프로퍼티 - 테스트Property 먼저 적용 : 불린 프로퍼티, 텍스트 프로퍼티, 인스턴스 스왑 배리언트 프로퍼티는 보통 state별 -> Type(Style)별 -> Size별 2) 여러 컴포넌트 만들기입력 컴포넌트 나머지 만들기Label & Control Group, Text Field, Text Area, Select & Dropdown Menu 디스플레이 컴포넌트 만들기Avata, Accordion, Badge, Tooltips, Divider, Chips, Basic card, Table피드백 컴포넌트 만들기Alert, Toast, Skeleton Loader & Loading Spinner, Progress bar, Modal & Slot이번주에 다양한 컴포넌트 실습을 진행하면서 가장 크게 느낀 것은 이전 단계에 진행했었던 배리어블과 파운데이션이 잘 정리되어야 컴포넌트를 만들때도 문제없이 만들 수 있다는 것을 느꼈고, 새로운 컴포넌트를 제작할 때도 모든 부분을 하나하나 새로 만들기보다 만들어뒀던 기존의 컴포넌트를 또 활용해서 제작하는 것을 보고 이런 부분에서 디자인 시스템이 잘 만들어진다면 디자인 작업하는데 있어서 훨씬 많은 시간을 줄일 수 있고 효율적으로 일할 수 있을 것 같다는 생각이 들었다.특히 슬롯 컴포넌트를 활용해서 모달을 만드는 파트는 기존에 생각해보지 못한 방식으로 컴포넌트를 만들면서 놀라우면서도 실제로 활용하기 좋은 방법이라고 생각했다. 3) 온라인 특강 : chatGPT를 활용한 디자인 시스템 문서화이번주 주말에는 특강으로 디자인시스템 문서화에 대한 부분을 설명해주셨다. 디자인 시스템을 문서화해야 하는 이유부터 디자인 시스템 문서에 들어가야 하는 요소들(그 중에서도 꼭 필요하다고 생각하는 요소), gpt를 활용한 디자인 시스템 구축 방법을 배웠는데 내가 생각했던 부분보다 구체적인 내용으로 정리를 해줘서 아예 디자인 시스템 문서에 대한 개념이 부족할 때 길잡이로 많이 참고할 수 있을 것 같았다. 요즘에는 디자인 프로세스에 다양한 AI기술을 적용하는 방법들이 많던데 해당 부분에 대해서도 많은 공부가 필요해보인다! [이번주에 대한 회고]스스로 칭찬하고 싶은 점이번주에도 밀리지 않고 2주차 강의와 실습을 잘 끝냈다.아직은 강의를 듣고 실습 따라하기에 급하긴 했지만 지난주보다는 컴포넌트 제작 프로세스를 잘 따라가면서 만들었던 것 같다. 강의를 들으면서 최근에는 잘 사용하던 어플 화면을 볼 때도 '이 부분은 컴포넌트를 이렇게 나눠서 제작하지 않았을까?' '이 서비스의 디자인 시스템은 어떻게 작업되어 있지?'하고 화면을 분석하면서 보게 되는 게 예전보다 디자인 시스템에 대한 넓은 시야를 가질 수 있는 계기가 되는 것 같아 조금은 뿌듯했다. 아쉬웠던 점, 보완하고 싶은 점이번주에 알려주신 디자인 시스템 플러그인을 사용해서 기존에 만들었던 컴포넌트들도 문서화 해봐야겠다.실습 미션 중에 수정 보완 사항이 생겼었는데 다음주는 보다 꼼꼼하게 잘 따라서 미션을 진행해봐야겠다.현재 이직준비랑 피그마 스터디를 같이 진행하고 있어서 포트폴리오 준비랑 디자인 시스템 공부에 대한 시간을 효율적으로 잘 계획해서 진행해야 할 것 같다. 

UX/UIUXUI프로덕트디자인피그마figma이직준비

jungin9166

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

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

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

한나

✏️[인프런 워밍업 클럽 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기] 프로덕트 디자인 2주차 발자국

2주차때 배운 것입력 컴포넌트 (버튼, 컨트롤, 라벨, 텍스트필드, 텍스트박스, 셀렉트)디스플레이 컴포넌트 (아바타, 아코디언, 뱃지, 툴팁, 구분선, 인터랙티브 칩, 상태칩, 카드, 테이블)피드백 컴포넌트 (토스트, 로딩 스피너, 스켈레톤 로더, 슬롯컴포넌트를 활용해 모달 제작)Slot 컴포넌트를 활용해서 모달을 만드는 것을 알게된 점이 좋았다.예전에 회사 다닐 때에는 필요한 모달 다 만들어놨는데.. 저렇게 컴포넌트를 만들어서 활용할 수 있다는 것을 알게되어서 좋았던 것 같다.그리고 오늘 들었던 온라인세션에서도 좋은 인사이트를 얻을 수 있었다.AI 활용을 부끄럽게도 잘 안했었는데 (지피티로.. 자소서나 그런거만 물어봤었다) 지피티를 통해 디자인 문서 초안을 세울 수 있다는게 좋은 것 같았다. 그리고 다른 사람들의 의견을 조금이나마 알 수 있는 시간이 있어서 좋았고... 몰랐던 디자인시스템을 알게되었던 점도 되게 좋았다. 역시 다른 이들의 생각을 들어야 인사이트를 얻을 수 있구나하는 시간이어서 너무 좋았다 아쉬웠던 점또 시간 계산을 잘못했었다는 점..?ㅋㅋㅋㅋㅋ 아침에.. 일찍 일어나는게 쉽지 않다. 또한 아침에 바로 강의를 듣는 것도 쉽지 않았다.이래저래 지원서 계속 넣는 것을 도전하기 위해 다른 곳에 신경 쓰다보니 강의 듣고 미션 수행하는데에 시간 분배를 못했던 것 같다. 얼마 안남았으니 다음주에는 꼭 일찍 일어나서 아침에 강의와 미션을 수행하는 것으로...! 다음에 시도할 점온라인 세션에서 들었던 플러그인 사용해서 문서 정리하기!개인 드래프트에 다시 만들어보면서 복습해보기 3주차도 열심히 미션 밀리지 않게 매일매일 강의 들어야겠다.+인프런 워밍업 클럽으로 하니까 뭔가 매일 공부하게되고... 열심히 사는 것 같은 기분이 들어서 좋은 것 같다 ㅋㅋㅋㅋ

UX/UI디자인시스템워밍업클럽피그마UXUI컴포넌트

표수진

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

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

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

예은

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

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

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

전석희

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

인프런 워밍업클럽 2기 1주차피그마 배리어블 기능을 알아가고, 디자인시스템을 효과적으로 제작하기위해 강의를 신청했다.혼자하면 분명 미루게될 것 같아서 워밍업클럽으로 4주동안 다 듣는 것을 목표로 했다. 1주차때 배운 것배리어블 등록 (색상, 간격, 타이포그래피, 아이콘, 그림자)입력 컴포넌트 제작 (버튼, 체크박스, 라디오버튼, 스위치버튼)배리어블을 등록할 때 primitive와 semantic으로 나눠서 지정하는 것을 배웠다.이것을 강의 그대로 따라하는 것은 쉬웠지만, 내가 만들 프로젝트?에 대입해서 어떻게 구성할 것인지는...디자이너 혼자일 때는 어렵지 않겠지만 추후 개발자와 일을 하게 되었을 때에는 꼭 많은 소통이 필요하겠다고 느껴졌다.예전에 작업할 때 state랑 status를 혼동해서 작업했던 것 같다.. 이번 기회에 안헷갈리고 개념을 잘 정리하는 시간이었던 것 같다! 아쉬웠던 점강의를 따라하기만 한 점내가 하고 싶은 프로젝트의 디자인시스템을 만드는데 도움이 되고자 강의를 신청했는데, 일단 강의를 듣다보니 그대로 따라하고만 있었다. 물론 따라하는 것이 나쁜 것은 아니지만... 그 이후 복습했던 시간이 없었던 것 같다.시간 배분을 잘 못했다.강의 초반에는 오전에 강의를 듣고~ 실습하고 그럴려고했는데 사람 마음이.. 아침에 일어나서 공부를 하려니 조금 못했던 것 같다.. 막 점심에도 듣고 저녁에도 듣고... 취준생이라 시간 많으니 오전시간에 다시 듣도록 노력해야겠다.문서 정리를 못한점배리어블 만들기만하고 문서로 정리를 잘 못했다.. 다음에 시도할 점복습을 하자 + 문서 정리를 하자내 개인 프로젝트에 따로 제작을 해보면서 이걸 개발자와 소통하려면 어떻게 배리어블을 구성할 것인지... 문서를 어떻게 할 것인지 생각해보는 시간이 있으면 좋을 것 같다.오전에 수업을 다 몰아듣자!시간을 정해서 듣는게 더 효율이 좋을 것 같다. 2주차도 잘 듣고, 미션도 밀리지 않고싶다! 다들 화이팅..

UX/UI디자인시스템디자인UXUI피그마프로덕트디자인워밍업클럽

삼각커피포리

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

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

UX/UI피그마FigmaUIUXUXUI

cynh K

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

피그마 베리어블을 활용한 디자인시스템 구축 2주차 회고2주차 회고 시작입니다! 연휴가 있어서 진짜 눈깜짝할 사이에 지나간 2주차여서 사실 너무 놀랐어요...ㅎ그래도 회고 남기러 돌아왔습니다 !.2주차 다짐과 느낀점오전시간 활용퇴근후의 시간활용을 더 주를 이뤘던 것 같아요 ㅠ오전 시간을 활용하려고 했는데 그것을 못지킨게 이번주 가장 큰 리스크였던 것 같습니다 ㅠㅠㅠ그래서 다시 한 번 도전해보려고 합니다.돌아오는 월요일부터는 꼭..꼬옥..!  단순히 강의수강이 목적이 아닌 내것을 만들기사실 초반 흐름을 따라가려다보니 자연스레 볼드멘토님이 하시는 것을 하나하나 따라만 할 뿐,되돌아보니 챕터별 스스로가 온전하게 이해되는 공부가 진행된 흐름은 아니었다는 걸 느꼈어요!하지만 2주차가 되고 Local Variables 자연스레 누르고 진행하는 저를 보며, 구조에 대한 이해가 점점더 확실히 된다고 느꼈습니다. 제것으로 만들어가는 흐름이 처음으로 느꼈던 한 주이기때문에 이번주도 만끽하면 내것으로 만들어보고싶어요! 3주차 시작에 있어 다짐재수강하고싶었던 파트는 재수강완료, 추가로 더 듣고싶은 그림자,보더 다시 듣고 채우기 (추가시간 틈틈히!)오래걸려도 이해할 때 까지 듣고 듣고 또 듣기!발자국 먼저 남기고, 동기부여 다시 팍팍 받고!늦었지만 빠르게 이번주 진도를 빼보려고 합니다.볼드멘토님도 멘티님들도 스터디 하는 모든 분들 다음주도 화이팅이에요!

UX/UIUXUI인프런워밍업클럽

채널톡 아이콘