스코클 본캠프 4주차 수요일 TIL

서론

이번 개인숙제를 진행하고 피드백을 받을 때까지 남은 시간은 D-Day이다. 하지만 피드백이 언제 나올 지 몰라서 나는 클로닝을 짧게나마 진행하기로 하였다. 짧고 굵게 클로닝을 하기 위해서는 목표가 필요했다. 

클로닝 목표

1. 컴포넌트 효율적으로 제작하기

2. 컬러, 폰트 시스템에 있는 것 외에는 사용하지 않기

또한 클로닝 대상도 매우 중요했다. 이번에 트위치가 사라지면서 새로 네이버가 VIP 방식으로 급하게 내놓은 어플이 있다. 베타1까지 테스트가 진행이 된 상황이고 조만간 베타 2까지 테스트할 예정이다. 이 서비스는 계속  업데이트를 한다는 점에서 디자이너로서 배울 수 있는 점이 많을 것이라고 생각을 하였고 동시에 정적인 이미지의 네이버가 요즘 트렌드인 스트리밍 서비스를 어떻게 디자인을 해낼 지 궁금하기도 하였다. 

그 서비스의 이름은 바로 치지직이다.

캡쳐/클론

이때 클로닝을 진행할 때 처음 앱을 실행시키자마자 기분이 좋아졌다. 내가 원하는 컴포넌트 연습을 할 대상이 많아 보였기 때문이다. 그래서 눈에 보이는 카드 컴포넌트들을 중심으로 클로닝을 시작했다.

1. 카드 쓰임새 파악하기

눈에 보이는 큰 컴포넌트를 간단하게 나열해보았다.

1. 현재 스트리밍 되고 있는 영상(최상단 콘텐츠)

2. 스트리밍 목록(가장 많이 보이는 콘텐츠)

3. 스트리머 공지

4. 채널 탐색 카드

🛑여기서 1번과 2번은 비슷한 형태여서 제작된 컴포넌트를 살짝만 바꿔 쉽게 만들 수 있을 것이라 생각하였다.(그리고 실제로 그렇게 제작하게 되었다.)

본격적으로 제작하기에 앞서 디자인 시스템을 구축했다. 

2. 시스템 구축하기

치지직의 컬러시스템 모방

 

치지직의 폰트시스템 모방

🛑폰트시스템을 제작할 때 12px까지 제작하였지만 문제가 있었다.

칩 안의 텍스트 크기: 8px

바로 칩의 텍스트 크기가 8px이라는 것이다. 모바일에서 아무리 작아도 12px 밑으로는 거의 안 쓰는 것으로 알고 있었는데 예외가 발생했다. 이 부분은 내일 튜터님께 추가적으로 질문을 드려야겠다.

그리고 컴포넌트를 따라 만들 때, 컴포넌트를 배치할 때 네이버가 4배수 디자인을 하려고 노력한 것이 보였다.

예를 들면 이렇게 맣이다.

그렇게 제작된 4개의 컴포넌트는 홈화면에 거의 90%를 차지하기에 만들고 배치하기만 하면 끝이다. 

그렇게 홈화면이 만들어졌다.

내일은 컴포넌트를 변형하여 새로운 컴포넌트를 만들어볼 것이다. 이상 끝