PD study _ 디자인 시스템

정의

UI 키트 / 스타일 가이드 / 디자인 시스템의 용어를 혼용하지 않도록 주의

- UI 키트

- 스타일 가이드

- 디자인 시스템 

디자인을 하기 위한 가이드라인이 되는 문서

고도화를 했을 시에는 Type(타입) / Varient(스타일링) / Situation(상황, 케이스)이 나오며,

여러번의 디자인 경험을 통해 케이스 분류를 용이하게 잘 하는 것이 실력으로 직결 

 

 

디자인 시스템은 개발 프로세스를 편리하게 하기 때문에 프로세스를 이해하는 것이 도움이 된다.

기본적으로는 크게 두 가지 요소로 나뉜다 

 

-- foundation

component를 만들기 위한 기본적인 element (타이포, 컬러, 라운드값, … )

참고: 라인 디자인 시스템 / Salesforce

foundation의 항목: 컬러 / 아이콘 / 그래픽 / 타이포 / 레이아웃

 

-- component

재활용 할 수 있는 요소 덩어리. 저장해놨다가 그대로 쓴다.

foundation을 조합해서 만든 것들.

 

 

로고

로고에 따른 명도에 따라 어떻게 쓰여지는가를 정의해야 한다.

component 작업 시 필요한 기준점이 된다.

 

타이포

글씨 크기에 따라서 행간 값이 어떻게 달라지는지를 정한다.

figma에서는 (%) 값을 쓰는 게 편하다! (예전엔 안됐다…)

 

-- 글자 길이 제한

PC 기준으로 넓이가 800 정도가 되면 고개가 돌아간다. 대부분 콘텐츠 넓이를 800 이하로 지정한다.

 

-- 행바꿈 기준

넓이 or 단어. 넓이를 기준으로 행바꿈을 할 때, 단어가 중간에서 끊긴다. 따라서 단어를 기준으로 행바꿈을 해야 하다. (끝이 삐뚤 빼뚤 해도 어글리 한건 아니다.)

 

컬러

CMYK : 오프라인 컬러 RGB : 온라인 컬러

 

간격

간격 값 자체를 컴포넌트로 지정하거나, 간격 토큰을 만들어서 조합해서 쓴다.

 

 

아이콘

-- 시스템 아이콘

안보이는 쪽에 적용되는 아이콘들 (관리자 쪽 / 시스템으로 동작되는 아이콘) 시스템 아이콘을 뭘 쓰는지가 회사의 자산 중 하나다.

 

-- 브랜드 아이콘

브랜드의 이미지를 나타낼 수 있는 아이콘으로, 프론트에 노출된 아이콘들

 

-- 아이콘 영역

터치 포인트 지정값 (52 48 등) / 그래픽 영역 정의

 

 

이미지

어떤 비율을 쓸 것이다 — 디자인 시스템 (3:4, 4:3, 1:1)

썸네일의 오브젝트 크기 (썸네일 배치) — 잘되어 있는 예시: 29CM

 

 

컴포넌트

 

버튼

상태값에 따른 컬러 변화

높이값으로 터치 영역 지정 

우선순위) PC와 모바일을 동시에 고려할 수 있는 구조(높이값 지정) --> 상태값에 따른 컬러값 

 

인풋(INPUT)

버튼을 기반으로 ...

 

서치(search)/스피너/콤보박스

인풋에 아이콘을 붙여서 기반으로 ...

+) 서치, 스피너, 콤보박스가 자세히 무엇인지는 다음에. 

 

카드

이미지비율 / 간격 / 텍스트 크기를 고려한 콘텐츠 덩어리 하나