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

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

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

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

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

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

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

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