[3주차 강의 내용 요약]

이번주는 마지막 컴포넌트인 네비게이션 컴포넌트를 만들고, 배리어블 모드를 활용하여 기존에 만들었던 컴포넌트에 다크모드를 적용하는 방법과 멀티 브랜드 구현 방법, 반응형 디자인 적용 방법, 다국어 지원 방법에 대해 배워보았다.
또한, 만들어진 컴포넌트와 배리어블 모드를 활용하여 B2B 이커머스 어드민 페이지까지 제작해보는 시간을 가졌다.

1) 네비게이션 컴포넌트(Navigation Component) 만들기

텍스트링크(Link), 브레드크럼프(Breadcrumbs), 네비게이션 탭(Tabs), 모바일 하단 네비게이션(Bottom Navigation), 페이지네이션(Pagenation), 사이드 네비게이션(Side Navigation), 헤더(Header), 캐러셀(Carousel)

2) 배리어블 모드 활용 방법

[1] 다크모드 전환, 원리 배우기

• 다크모드 : 빛을 덜 발산해서 배터리 절약, 저시력자의 경우 다크모드 선호

• 몰입형 미디어 보기를 지원하는 UI의 경우, 영구적 다크모드 사용(

  회사에서 다루는 콘텐츠, 상품에 따라 선택!)

• 단순히 라이트 모드 색상 체계를 반전하는 것 XX -> 브랜드 아이덴티티와 접근성을 항상 고려해야 함!!

• '계획 - 실행 - 테스트 및 무한 수정'의 방식으로 고쳐가는 것이 중요

   

   

   

[2] 브랜드 구조와 모드를 활용한 멀티 브랜드 구현

• 다양한 브랜드 구조가 있고, 유형별로 다른 브랜드 전략을 사용

• 통합 브랜드 형식의 멀티 브랜드 구현을 위한 배리어블 모드 제작

• 동일한 파운데이션으로 브랜드 색상(Theme 색상)만 다르게 제작해보기

   

   

[3] 디바이스별 반응형 디자인 구현

• 데스크탑, 태블릿, 모바일 화면에 따라 배리어블 모드 제작

• Break point, padding, margin 등 다양한 요소 적용 가능

• 헤더나 사이드 네비게이션 등 디바이스에 따라 컴포넌트 타입도 다양하게 변경할 수 있음 !

   

   

[4] 다중언어 지원 화면 구현(영어, 한국어, 아랍어 등등)

• 시장 개척 및 점유율 확대, 사용자 적용성 등 글로벌 시장이 목표라면 중요한 부분

• 글로벌라이제이션(웹 접근성 등), 로컬라이제이션(지역, 문화에 따른 다양성) 적용

• 언어별 읽는 방향, 쓰는 방향 변경 가능

   

우선 배리어블 모드를 활용해서 다크모드, 반응형 디자인 등 웹/앱 디자인에서 중요한 부분을 생각보다 쉽게 해결할 수 있다는 게 놀라웠다. 기존에는 이런 부분을 다 따로 따로 적용할 생각을 했었던 나의 무지함에 지금이라도 이렇게 배워가서 다행이라는 생각도 들었다..😅 그리고 분명 잘 만들었다고 생각했던 컴포넌트들이 모드가 먹히지 않는 부분들이 있어서 로컬 컴포넌트를 찾아가보니 내가 색상을 잘못 설정하는 등등의 실수가 있어서 역시 디자인 시스템을 만들 때는 테스트와 무한 수정의 과정이 꼭! 필요한 부분이구나를 다시 깨닫는 순간이였다..ㅎㅎ

파운데이션부터 시작해서 이제는 내가 만든 컴포넌트로 실제 페이지까지 디자인해보니 신기하면서도 재밌었지만 벌써 강의가 거의 끝나감에 아쉬운 마음이 들기도 했다. 요즘 볼드님의 강의를 들으면서 디자인 시스템에 대한 필요성과 효율성에 대해 크게 느끼고 있어서 계속 공부하고 싶어서 우선은 내가 기존에 작업했던 디자인 작업물을 토대로 디자인 시스템을 제작해보면서 익숙해져봐야겠다!

[이번주 회고]

스스로 칭찬하고 싶은 점

• 이번주도 계획에 맞게 강의를 듣고 미션을 수행하였다.

• 기존에 디자인했던 작업물들을 피그마로 수정해보면서 강의에서 배웠던 내용도 함께 적용해보고 있다.

• auto layout에 대해서 기존엔 헷갈리는 부분이 많았는데 작업을 하면서 많이 익숙해진 것 같다!

아쉬웠던 점, 보완하고 싶은 점

• 이제는 강의를 듣고 미션을 따라해보는 것에서 그치지 않고 내 작업물로 디자인 시스템을 구축해보면서 계속해서 경험을 쌓아야겠다고 생각했다.

• 다크모드에 색상 적용하는 부분에서 생각보다 많은 시간을 보냈던 것 같다. 특히 다크모드 반영시에 접근성의 중요하다는 것을 뼈져리게 느꼈다 ㅠㅠ