🔥 Review

---

이번 과제에서 여러분은 신생 스타트업에 취직한 프론트엔드 개발자가 됩니다.
회사에서는 아직 디자인 시스템을 도입하지 않아 프로젝트마다 일관성 없는 디자인이 사용되고 있습니다.
따라서 디자인 팀은 여러분과 함께 디자인 시스템을 구축하려고 합니다.

디자인 팀에서는 이미 Figma를 사용하여 디자인 시스템을 구현했습니다.
이제 여러분은 디자인 팀에게 전달받은 디자인 시스템을 토대로 재사용 가능한 컴포넌트 라이브러리를 만들어야 합니다. 그리고 Storybook을 활용해 UI 컴포넌트를 문서화해야 합니다. 이 과정을 통해 디자인을 코드로 구현하는 경험과 디자인 시스템을 구현하는 능력을 쌓을 수 있습니다.

Figma 튜토리얼을 먼저 진행한 뒤 과제를 시작해야 합니다.

Figma 튜토리얼

이번 과제에서는 가상의 Todolist 애플리케이션에 사용되는 공통 컴포넌트를 만들고 이를 Storybook을 통해 문서화합니다.

Figma 살펴보기

과제에서 제공되는 Figma 프로젝트는 아토믹 디자인 원칙에 맞춰 섹션 및 페이지가 분리되어 있습니다.

각 페이지를 살펴봅시다.

Foundation

원자 단위 컴포넌트를 만들기 전 베이스가 되는 요소들에 대한 가이드가 작성되어 있습니다. 프로젝트에 포함된 모든 컴포넌트들은 Foundation에서 정의한 여백(Spacing), 컬러, 서체를 사용하여 디자인되었습니다. Figma Tokens에도 해당 값이 담겨 있기 때문에 프론트엔드 개발 시에 이를 활용해 일관성 있는 디자인을 유지할 수 있습니다.

Components

Foundation에 정의된 요소를 활용해 만든 컴포넌트들이 모여있는 페이지입니다.
각 상태에 따른 컴포넌트의 스타일이 Component Set으로 정의되어 있습니다.

Page

컴포넌트를 조합해 만든 템플릿 요소와 페이지 요소가 모여있는 페이지입니다.
페이지 레이아웃과 실제 구현 시 모습을 미리 예상할 수 있습니다.

디자인 토큰

디자인 토큰은 디자인 시스템에서 재사용 가능한 스타일 값을 말하며, 색상, 글꼴, 간격 등과 같은 디자인 요소들을 포함합니다. 디자인 토큰을 사용하면 디자인 시스템을 구축하고 유지보수하는 데 큰 도움을 줄 수 있습니다.

예를 들어, 여러 페이지에서 사용되는 버튼의 스타일을 일관성 있게 관리하고 싶다고 가정해 봅시다. 디자인 토큰을 사용하면, 이 버튼의 색상, 크기, 간격 등의 스타일 값을 토큰으로 저장하고 중앙에서 관리할 수 있습니다. 이렇게 관리된 토큰을 여러 페이지에서 적용하면, 스타일 값을 일관성 있게 유지할 수 있습니다. 따라서, 토큰을 통해 디자인 시스템의 일관성을 유지하면서 효율적으로 디자인 작업을 할 수 있습니다.

또한, 토큰을 JSON 형식으로 추출하여 개발자가 쉽게 프로젝트에 적용할 수 있기 때문에 개발자와 디자이너 간의 협업을 원활하게 할 수 있습니다. 토큰을 JSON 형식으로 추출하여 개발자가 쉽게 프로젝트에 적용할 수 있기 때문에 개발자는 토큰을 보면서 디자인 요소들을 일일이 찾을 필요 없이, 토큰을 적용하여 일관성 있는 디자인을 구현할 수 있습니다.

Figma Tokens 추출하기

Figma Tokens은 디자인 시스템에서 재사용할 수 있는 스타일 값을 관리하고 쉽게 적용할 수 있도록 도와주는 Figma 플러그인입니다. 색상, 글꼴, 간격 등 디자인 요소들을 포함한 디자인 토큰을 JSON 형식으로 추출해 개발자가 쉽게 프로젝트에 적용할 수 있습니다.

1. 과제 Figma에 접속한 후, 상단에 프로젝트 이름 옆 화살표를 누르고 Duplicate to your drafts를 선택해 사본을 저장합니다.

2. 복제한 프로젝트에 접속해 ctrl + P 혹은 command + P를 누른 뒤 plugin을 검색합니다. 하단에 있는 Find more plugins...를 선택합니다.

3. Plugins에서 figma token을 검색한 뒤, Tokens Studio for Figma의 Run을 누릅니다.

4. 실행된 Figma Tokens 창에서 프로젝트에 적용된 다양한 토큰 종류를 확인할 수 있습니다.

5. 특정 컴포넌트를 선택하면 해당 컴포넌트에 지정된 디자인 토큰을 확인할 수 있습니다.

6. Figma Token은 JSON 형태로 추출이 가능합니다. 플러그인 왼쪽 하단의 Tools 을 누르고 Export to file/folder을 클릭한 뒤, 토큰을 tokens.json으로 추출합니다.

프로젝트에 토큰 적용하기

6. 과제 리포지토리를 fork한 뒤, git clone 명령어로 이를 clone합니다. 과제 제출이 Pull Request로 진행되기 때문에 zip이 아닌 개인 리포지토리로 fork하여 clone해야 합니다.

7. tokens.json 파일을 src/tokens 폴더에 저장합니다.

8. 보통 디자인 토큰은 디자인 팀과 개발 팀이 공유해서 사용하기 때문에 개발자가 실제 사용할 수 있는 값으로 바꾸는 과정이 필요합니다. 따라서 tokens.json에 담긴 참조 값을 실제 값으로 변환하기 위해 npm run token 명령어를 실행합니다. 해당 명령어는 token-transformer 라이브러리를 실행해 토큰을 변환합니다. 해당 명령어를 실행하면 src/tokens 폴더에 실제 값이 담긴 global.json이 생성됩니다. 안내한 방법 외에도 디자인 토큰을 CSS 변수로 변환해 사용하기도 합니다.
   
   

// tokens.json의 Spacing
"Spacing": {
	   "base": {
        "value": "4",
        "type": "spacing"
      },
      "8": {
        "value": "{Spacing.base} + {Spacing.base}",
        "type": "spacing"
      },
      "12": {
        "value": "{Spacing.8} + {Spacing.base}",
        "type": "spacing"
      },
      "16": {
        "value": "{Spacing.12} + {Spacing.base}",
        "type": "spacing"
      }, ...
  },

// global.json의 Spacing
"Spacing": {
    "base": {
      "value": 4,
      "type": "spacing"
    },
    "8": {
      "value": 8,
      "type": "spacing"
    },
    "12": {
      "value": 12,
      "type": "spacing"
    },
    "16": {
      "value": 16,
      "type": "spacing"
    }, ...
  },

🔥 Bare minimum Requirement

---

File Structure

.
├── README.md
├── package-lock.json
├── package.json
├── public
│   └── favicon.ico
└── src
    ├── components   # 모든 컴포넌트가 들어가는 폴더
    │   ├── basic   # 기초 단위 컴포넌트가 들어가는 폴더
    │   │   ├── atoms   # 원자 단위 컴포넌트가 들어가는 폴더
    │   │   └── buttons   # 버튼 컴포넌트가 들어가는 폴더
    ├── tokens   # 디자인 토큰 관련 폴더 
    │   └── tokens.json   # Figma Token에서 추출한 디자인 토큰
    └── utils   # 유틸리티 관련 폴더
        └── mapStyle.js   # 토큰 객체의 값을 CSS 스타일로 매핑해 주는 함수

시작하기

1. Figma 튜토리얼 문서를 참고해 Figma 토큰을 추출하여 프로젝트의 src/tokens 폴더에 저장합니다. 그리고 npm run token 명령어를 실행해 저장된 토큰을 실제로 사용할 수 있는 값으로 변환합니다. 이 명령어를 통해, 토큰은 global.json 파일로 변환되며, 이 파일에는 실제로 사용할 수 있는 값들이 담겨 있습니다.

2. npm run storybook을 실행해 작성된 Storybook을 확인합니다. 원자 단위의 요소는 이미 구현되어 있습니다. 작성된 원자 단위 컴포넌트를 기반으로 다양한 컴포넌트를 구현할 수 있습니다.

3. atoms 폴더에 담긴 Input.js 파일을 확인하여 global.json에 담긴 토큰 값이 어떻게 사용되고 있는지 살펴보세요.

4. Button

   • global.json의 값을 사용해 만든 스타일 컴포넌트가 담겨 있습니다.
   • 토큰에 담긴 값을 사용해 보조(Secondary) 스타일과 hover 및 active에 따른 스타일을 지정하세요.
   • icon props의 유무에 따라 Icon 컴포넌트가 버튼에 포함되도록 구현하세요.
   • Storybook의 Args 문서를 참고해 Button.stories.js에서 primary 상태에 따라 컴포넌트가 변경되도록 스토리를 작성하세요.

5. IconButton.stories.js

   • Button 컴포넌트를 불러와 Storybook에서 아이콘과 라벨을 자유롭게 변경할 수 있도록 작성합니다.

6. ChevronButton

   • 라벨(label)의 유무에 따라 컴포넌트의 형태가 변경되도록 컴포넌트를 구현하세요.
   • isExpanded 상태에 따라 Chevron 아이콘이 변경되도록 컴포넌트를 구현하세요.
   • 아이콘만 보이는 상태(OnlyIcon)와 라벨이 함께 보이는 상태(WithLabel)를 구분하여 스토리를 작성합니다.

7. Divider

   • 스타일 컴포넌트에 하드 코딩된 CSS 속성을 Figma를 참고해 토큰의 값으로 대체하세요.
   • Storybook에서 title을 자유롭게 변경할 수 있도록 스토리를 작성합니다.

8. ItemBox

   • DividerContainer의 스타일을 확장하여 Figma와 동일한 디자인의 ItemBox 컴포넌트를 구현합니다.
   • hover 또는 active 상태에 따라 스타일이 변경되도록 작성합니다.
   • Storybook에서 text을 자유롭게 변경할 수 있도록 스토리를 작성합니다.

Component Library

---