[10/02] 디자인 시스템, 디자인을 위한 코딩스러운 아이디어

오늘은 실제 서비스하고 있는 화면들을 분석하는 연습을 많이했다!

그래서 글쓸 힘이 없다...

금일 결과물을 이미지 위주로 빠르게 빠르게 복기하려 한다.

 

분석은 큰거에서 작은걸로 내려가기!

 

결국 UI적으로 깔끔함을 주는 핵심요소는 뭐니뭐니 해도 Layout인 것 같다.

그 레이아웃을 전체적으로 설계하고 분석하기엔 Layout Guide 기능이 유용한 것 같다.

 

또한 깔끔한 정보전달을 위해서는 결국 어느 Product든 통일성 있는 Layout을 줘야한다!

그렇기에 모듈 단위, 아이템 단위까지 시스템을 만들어서 하는 것이 좋다

 

그 디자인 시스템을 어떻게 구조화할지 연습하기 위해 아래처럼  섹션->모듈->아이템 단위로 3단 구조화 연습을 진행함!

feat. 쿠팡

 

사실 지금 gif는 실제 진행 페이지의 절반이다

단위로 쪼개고 같은 것 찾는 것은 물론 어려운 일은 아니다만,

양이 많아 시간을 꽤 오래썼다.

 

그다음으로 진행 한것은 넷플릭스 클로닝이다.

넷플릭스 'home' tab

넷플릭스 네비게이션 바에는 3개의 메뉴가 있다.

각 메뉴마다의 페이지들을 왼쪽과 같이 두고, 그 위에 어떤 모듈/아이템들이 통일성 있는지, 어떠한 종류들이 해당 서비스에 존재하는지 분석하였다.

그래서 뽑아낸 indep한 섹션,모듈 단위를 도출해냈다.

섹션들끼리 비교해서, 그안에서 통일된 모듈 찾고, 또 모듈안에서 통일된 아이템 찾고...

그렇게 실제로 어떤 컴포넌트들을 어떤 하이라키로 구조화 할지 분석하였다.

 

이 과정을 하면서 굉장히 익숙하다는 생각이 들었다.

그리고 확신이 들었다.

현재 UI디자인, 그리고 디자인 시스템이라는 것은 디자이너들이 개발자에 닮아가기 위해 생겨난 것일거라고

 

제작은 작은거에서 큰거 순으로

 

애니웨이

그 다음으로는 전체 요소들 중에서, '카드'형식의 것들을 컴포넌트화 시키기를 목표로 클로닝을 시작했다.

 

분석 결과, 넷플릭스 내 카드들에 들어가는 image들은 아래와 같이 5 종류였다

 

그래서 이들을 한 컴포넌트 안에 배리언트로 묶고, size / shape 두 변수로 이들을 구별시켰다

 

그다음으로는 위 영화 image들을 인스턴스로 가져와서, 각 card 요소들을 제작해나갔다.

 

 

그렇게, 총 5종류의 카드를 만들었고, 그중 4종류는 카루셀 형태의 섹션을 이루고 있었기에, 그들까지 제작해주었다.

 

더 나아가, "그냥 카루셀 세트 컴포넌트를 만들면, 나중에 제작할때 편하겠는데?"라는 생각으로

각 카루셀의 인스턴스들을 varient로 하는 컴포넌트까지 완성했다.

 

이렇게 되면, 추후 페이지 단위를 제작할때, 카루셀세트 인스턴스를 막 복붙복붙한다음, 페이지 내에서 바꿔보면서

디자인 해나갈 수 있을것이다.

 

 

https://leerosepark.tistory.com/47

 

번외로 오늘 일과가 끝나기전에, 

팀원들과 이전 과제였던 카카오톡 '톡딜위크 재구성'을 각각 공유하였다.

 

서로 다른 아이디어가 나오니까 얻어가는게 많았고, 되게 흥미롭게 봤다

그리고 다들... 미친것 같다

왜이렇게 잘함? 진짜 감탄하면서 봤다

 

이런식으로 서로의 아이디어/결과물 공유하는거 만족스러운거 같다