이전거 일단 업데이트

Author: navskh

_posts/Portfolio/2023-12-26-디자인 시스템에 관하여.md

@@ -7,45 +7,64 @@ author: Young
 comments: True
 ---
 
-## INTRO
+# INTRO
 쓰겠다고 예고하고는 글 작성이 늦네요
 천천히 가더라도 꾸준히 가보겠습니다.
 
 # Apply Design System
 
-## Introduction
+https://www.youtube.com/watch?v=LmLchZ4tCXc&ab_channel=FEConfKorea
+(6분 50초 부터)
 
-만든거 
+위 토스의 FE Conference 내용을 보면서, 
 
-https://github.com/JinhakApply-ToyProjects/ADS.git
+디자인 시스템의 도입은 아래와 같은 장점을 가질 수 있다 정리하였습니다.
 
-개발 : Next.js (v14) 
+1. 디자인 시스템을 통해, 디자인의 일관성을 유지할 수 있다.
+2. 디자인 시스템을 통해, 개발자와 디자이너의 커뮤니케이션 비용을 줄일 수 있다.
+3. 디자인 시스템을 통해, 디자인의 재사용성을 높일 수 있다.
 
-https://www.youtube.com/watch?v=LmLchZ4tCXc&ab_channel=FEConfKorea
+위를 통해,
+저희 회사에서도 디자인 시스템을 만들어야 한다는 필요를 제시하였고, 이를 ADS(Apply Design System)이라고 통칭하기로 하였습니다.
+
+
+## Introduction
+
+개발자는 말보다 만든것으로 보여줘야한다는 생각이 있기 때문에 아래 github에서 프로젝트를 보실 수 있습니다.
+https://github.com/navskh/apply-design-system
+개발은 Next.js (v14) 로 하였으며, 디자인은 기존 저희 회사의 '반응형 원서'에서 사용되는 css를 sample로 가져왔습니다.
+
+현재까지는, 아직 구체화 시키지는 못하였으나 
 
-6분 50초 부터. 
 
 ## 디자인 시스템의 구성요소
 
-### 1. 비주얼 언어
+만들면서 공부한 내용을 정리해봅니다.
+
+### 1. 토큰
 
-여러 토큰이라 부름
+디자인 구성요소로서의 가장 작은 단위를 토큰이라 부르는 것을 보게 되었습니다. 
 
 - 컬러토큰
  https://testdesign.jinhakapply.com/AdmissionApplyV4/_guide_font.html
 - 타이포그래피 토큰
 - 여백 토큰
 - 트랜지션 토큰
 
-등등..
+등등이 있으며
+대부분의 디자인 시스템의 경우
+Foundation 이라고 하는 영역에 지정하는 것을 보게 되었습니다.
+
+이 경우, Sample 엘리먼트가 따로 있는 것이 아니라 어떤 디자인의 철학, 근간 등을 정리해둔 문서의 느낌이 강한 것을 볼 수 있었습니다.
 
 ### 2. 컴포넌트
 
 토큰들의 조합으로 생김새 등을 지정
 
 - button 하나 안에도, color, fill, weak, normal, pressed 등
 
-몇가지 옵션으로 제약함
+몇가지 옵션으로 제약함을 지정하였고
+이를 묶어서 컴포넌트라 부르는 것을 보았습니다.
 
 ### 3. 패턴 (Rule 에 가까우므로 가이드문서에 저장) ⇒ 기획자 사용
 
@@ -55,39 +74,35 @@ primary fill : CTA .로
 
 danger fill : 부정적 개념
 
-추가적으로 ADS에 정의하려 하는 것들.. 
+추가적으로 동작하는 것 등을 지정함을 알게 되었습니다.
 
-### ** 필드
+### 그 외 1) 필드
 
-생성툴에서 이야기하는 필드의 개념 
+저희 회사는 내부적으로 사용하고 있는 생성툴이 있는데
 
-컴포넌트의 조합
+이 생성툴에서 이야기하는 필드의 개념은 컴포넌트의 조합입니다.
 
-적정선에서의 제한을 두어 만들어야 할 것으로 예상됨.
+그래서, 어떤 라벨과 input 의 조합을 필드라고 부르는 것을 보았습니다.
 
-### *** 템플릿
+적정선에서의 제한을 두어 만들어야 할 것으로 예상되어집니다.
 
- 필드의 조합
+### 그 외 2) 템플릿
 
-여러 가지 필드들이 모여있는 경우 
+또한 추가적으로 앞으로의 프로젝트의 성격을 생각해볼 때 템플릿이라는 요소가 추가되어야 함을 알게 되었습니다.
 
-## 디자인 핸드오프
+템플릿은 곧 필드의 조합 자주쓰는 필드의 조합을 묶어서 템플릿으로 사용할 수 있도록 지정할 예정입니다.
 
-결론적으로는,  Figma ⇒  vscode  로의 변환이 가능해져야 한다.
+## 디자인 핸드오프
 
-그러려면 디자인의 구조화가 필요하다. (json)
+최종 목표는,  Figma ⇒  vscode  로의 변환이 가능해져야 함을 생각하게 되었습니다.
 
-## 앞으로 필요한 것들
+그러려면 디자인의 구조화가 필요하고. (json)
 
-### 1. 디자인 시스템 구성요소 하나씩 정의
+또한 Figma API의 사용등을 통해 디자인 산출물을 html로 변환해주는 모듈을 만들어보려 합니다.
 
-1. 토큰의 종류를 정하자.
-2. 컴포넌트의 종류 (버튼, 인풋)
-3. 필드의 종류
-4. 템플릿 
+다음 포스트로 작성해보겠습니다.
 
-[https://www.youtube.com/watch?v=IN0a_3c1vJs&ab_channel=디자이너DK](https://www.youtube.com/watch?v=IN0a_3c1vJs&ab_channel=%EB%94%94%EC%9E%90%EC%9D%B4%EB%84%88DK)
 
-### 2. 각 구성요소에 맞는 디자인 시안이 정해져야 한다.
+### 다음을 기약하며 
 
-### 3. ADS 페이지에 반영
+지금까지의 글을 읽어주셔서 감사합니다.