학습 내용

• 베리어블의 정의와 용도

• 베리어블의 구성과 이름짓기 방법

• 베리어블을 등록하고 효율적인 활용을 위해 노출 범위를 설정하는 법

• 저장한 컬러 및 단위, 폰트 스타일을 바탕으로 디자인 파운데이션을 문서화 하는법

• 입력 컴포넌트 만들기

미션

공개 목표 : 베리어블 등록하고 파운데이션 문서화하기

1주차 개인 목표

• 목표 1 : 가장 간단한 방식의 베리어블 등록방식 실험해보기

• 목표 2 : 플러그인보다 보기 편한 방식으로 문서화 시도하기

워밍업 클럽 전에 여러번 볼드님이 운영하시는 스터디에 참여했었고, 앞쪽 내용은 여러번 들었다.
그동안 강의는 열심히 따라했다고 생각했지만 개발까지 베리어블을 적용해볼 수가 없어 효용성을 체감하기 어려웠다.
이제 그냥 강의를 따라하는 것 보다는 나름대로 여러가지 추가적인 공부를 하면서 의의를 찾아봐야겠다고 생각했다.

1. 개인 목표 1 실습 과정

   새로운 프로덕트를 만든다고 생각하고, 가장 간단한 베리어블 시스템을 만들어보자

   1. 회사마다 베리어블 구조가 다 달랐는데, 다 나름대로 좋은 부분이 있었다. 다만 일부 회사의 경우 너무 체계적인게 오히려 작은 회사에서 그대로 적용하기엔 문제가 있어보였다. 논리적이긴 한데, 막상 눈에는 잘 안들어오는 느낌?

       

   2. 베리어블 정의가 복잡하면 직관적으로 파악하기 어려워 활용도가 떨어진다고 생각해서 구분을 최소화했다.

       

      1. 텍스트 아이콘 컬러값이 대체로 비슷해 머터리얼 가이드에서는 둘을 따로 구분하지 않아서 베낌 > Text로 정의

      2. 마찬가지로 토글, 버튼등 인터렉션 컴포넌트도 대체로 비슷해서 구분 안하기로 했다. > Interaction으로 정의

      3. 상태 컬러(Hover,Pressed등)는 컴포넌트에 한번 지정하고 나면 실제 UI작업에서는 거의 쓰이지 않기 때문에 잘 안보이는게 좋겠다는 생각이 들어서 목록 최하단에 뜰 수 있도록 분리했다.

          

    

2. 개인 목표 2 실습 과정

   플러그인으로 뽑았을 때 나오는 컬러차트 말고, 좀더 명료한 방식으로 문서화 해보자

   1. 예전에 디자인 스타일 가이드를 나름대로 만들어서 전달했는데, 프론트분들이 냅다 개별 화면 마크업 하는데 주력하고 잘 봐주지 않아서 시무룩했던 경험이 있다. 시간도 없거니와 눈에 잘 안들어왔던 모양이다.

   2. 기껏 시스템을 만들었으면 잘 읽히게 문서화를 하는것도 중요하다고 생각해서 다른 회사 파운데이션 가이드를 참조해서 만들어봤다.

      1. 참조 : 11번가 및 라인 디자인 시스템 가이드

      2. 대체로 양식이 비슷한데, 라인이 특히 컬러 사용에 대한 정의가 깔끔해서 참고가 되었다.

      3. 실무에서는 정의한 가이드와 다르게 컬러를 추가하거나 이미 다르게 사용된 경우가 많을것이라 생각된다. 이런 엣지케이스에 어떻게 대응할지, 문서를 어떻게 업데이트하고 유지할지도 구성원간의 합의가 필요할 것 같았다.