📖4주차 학습내용

디자인시스템과 배리어블 모드를 활용한 디자인 페이지 만들기

1. B2B 어드민 페이지

• 이커머스 회원계정 관리 페이지

• 반응형 환경을 고려하여 Side Navigation과 Content 영역 레이아웃 설계

• 배리어블 모드: Width, Spacing, Navigation Type, Boolean이 자동으로 변경되도록 설정

   

2. B2C 이러닝 페이지

• 이러닝 홈페이지 디자인

• 콘텐츠 썸네일 프로토타이핑을 고려하여 프레임/오토레이아웃 크기 설정 방법

• 플러그인을 활용하여 데이터를 피그마에 바로 입력하는 방법

• 반응형 환경을 고려하여 콘텐츠 영역 내 카드 썸네일 형태, 크기, 패딩 등 값을 배리어블에 설정

   

3. OTT 모바일

• OTT 모바일 홈 화면, 콘텐츠 상세 페이지 디자인

  
  (이하 이러닝 페이지와 동일함)

☺좋았던 점

• 디자인시스템, 배리어블 모드, 반응형 디자인 모두 활용해야 되서 처음에는 오래 걸렸지만, 반복적으로 만들면서 중복된 요소들이 보이게 되어 익숙해질 수 있었습니다.

• 프로덕트 디자인을 보는 눈이 넓어지고, 디자인할 때 눈에 보이는 것 뿐 아니라 보이지 않는 것도 고려해야 함을 배울 수 있었습니다.

😁잘한 점

강의를 따라 디자인하는 것도 힘든 일인데, 새로운 문제를 발견해서 스스로 고민하고 해결하려고 노력해본 것.

어드민페이지를 배리어블 모드로 다른 디바이스로 전환할 때 Side Navigation의 Width가 의도와 다르게 변하는 문제가 있었습니다. 이 문제를 해결하는 과정에서 배리어블 모드를 사용할 때 발생하는 이슈에 대해 인지하게 되었고, 이를 대비해서 디자인시스템을 관리하는 것이 중요함을 배울 수 있었습니다.

😅아쉬운 점

• OTT 페이지에서 반응형과 프로토타이핑을 모두 고려해서 디자인하는 것에 저 스스로 한계를 느꼈습니다. 넷플릭스처럼 콘텐츠 크기 비율을 일정하게 유지하는 반응형을 만들 수 있었지만, 프로토타이핑을 적용하기 어려워서 만족스러운 결과물은 아니었습니다.

추후 계획

• 강의 복습하기: 처음에 배웠던 내용들이 잘 기억나지 않아서 그 부분부터 복습하기

   

• 다른 서비스 디자인시스템 찾아보기(특히 볼드님이 알려주신 디자인시스템들)

• 프로토타이핑, 인터렉션 학습하기