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

이번 3주차는 유독 어렵게 느껴지던 다크모드 구현에 대한 부분을 직접 미션을 통해 구축해보며 많은 이해를 하게 되어 스스로 느끼기에 배리어블에 대한 이해도가 높아졌다고 느껴진 한 주였습니다. 👩‍💻
먼저는 다양한 네비게이션 컴포넌트를 만드는 과정을 배웠고 텍스트 링크, 브레드크럼프, 네비게이션 탭, 모바일 하단 네비게이션, 페이지네이션 등 실무에서 자주 사용되는 요소들을 직접 구현해보며 각 컴포넌트의 특성과 사용자 경험에 미치는 영향을 깊이 이해할 수 있었습니다.

개인적으로 느끼기에는 다크모드 구현이 3주차의 하이라이트(?) 였던 것 같습니다. 😆 평소에도 다크모드용 색상 변수 설정이 꽤 까다로웠는데, 이번에 웹 접근성 지침(WCAG)의 AA 기준을 고려한 색상 대비 설정 방법을 배우면서 전체적인 프로세스를 명확히 이해할 수 있었습니다. 이 과정에서 배운 내용을 토대로 앞으로 실무에서 다크모드를 구현하는 부분이 자신감이 많이 생길 것 같습니다.

이번 주 학습을 통해 사용자 경험을 고려한 네비게이션 설계의 중요성과 접근성을 고려한 디자인 시스템 구축의 가치를 다시 한번 깨달았습니다. 특히 다크모드 구현 과정에서 배운 체계적인 접근 방식은 실무에서 바로 적용해 볼 수 있을 것 같아 매우 기대됩니다. 이런 경험들이 쌓여 더 나은 디자이너로 성장해나가고 싶습니다.📈

📌배움

• 네비게이션 컴포넌트 만들기

• 배리어블 다크모드 개념 익히기

• 배리어블 모드 활용과 원리 배우고 구현해보기

• 컴포넌트를 조합해 B2B 이커머스 어드민 페이지 만들기->다크모드, 반응형 멀티브랜드 구현하기

📌미션

다크모드 배리어블 구현과 B2B 이커머스 어드민 페이지 구현 경험을 통해 색상 대비와 웹 접근성의 중요성을 체감했고, 실제 프로젝트에 적용할 수 있는 실용적인 지식을 얻었습니다. B2B 이커머스 어드민 페이지를 만들면서는 복잡한 정보를 효율적으로 구조화하는 방법과 사용자 편의성을 고려한 UI 설계의 중요성을 깨달았습니다.

❗이건 꼭 알아두자! ꙳꒰ ੭⑅•͈ ·̮ •͈꒱੭

• 다크모드 구현의 핵심 원칙 : 웹 접근성 기준을 고려한 색상 대비 설정 / 배리어블 활용을 통한 효율적인 테마 전환 방법 /
  가독성과 사용자 경험을 고려한 생산 선택

• 네비게이션 컴포넌트 설계 시 고려사항들

• 컴포넌트 재사용과 조합의 중요성

• B2B 이커머스 어드민 페이지 설계

📌회고

스스로 칭찬하고 싶은 점

• 강의를 반복적으로 시청하며 제대로 이해하고 미션을 진행할 수 있도록 노력했습니다. 특히 다크모드 구현 부분에서 여러 번 복습하여 개념을 확실히 잡을 수 있었습니다.

• 배리어블과 함께 반응형에 대해서도 많이 이해하고 실무에서도 적용해보았습니다.

아쉬웠던 점

• 미션이 당일에 달성하다 놓친 부분이 있어 아쉬움이 있었고 시간관리를 더 효율적으로 관리해야겠다고 느꼈습니다.

• 실무에서 접근성을 많이 고려하지 못했던 것 같아 이번 주차 공부 후 다시 검토를 해나가고 있습니다.

보완하고 싶은 점

• 웹접근성을 고려한 디자인을 실무에서도 제대로 적용을 해보고 싶었고 주요 페이지들을 다시 검토해나가고 있습니다.

• B2B의 특징을 이해하고 기업 니즈나 브랜드에 맞는 인터페이스를 구현해내고 싶습니다. 성공적인 B2B 플랫폼들의 UI/UX 사례를 조사하고 분석하여 다음 주차 미션과제에도 추가적으로 적용해볼 예정입니다.

다음 주 계획

• 남은 미션들을 미리 만들어보고 따로 추가적인 구현을 더 해보려고 합니다.

• 그동안의 미션들을 검토하고 놓친 부분이나 이해가 덜 된 부분을 체크하고 추가적으로 공부를 더 해보려고 합니다.