Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React
Code

React를 이용해 재사용성을 갖춘 디자인 시스템 구축하기

by
Difficulty:IntermediateLength:MediumLanguages:

Korean (한국어) translation by Jin Ah Chon (you can also view the original English article)

React는 웹 개발을 단순화시키는 데 많은 일을 했습니다. React의 컴포넌트 기반 아키텍처는 원칙적으로 코드를 분해하고 재사용하기에 용이합니다. 그렇더라도 프로젝트를 통틀어 어떻게 컴포넌트로 나눌지 개발자들이 잘 알고 있지 않습니다. 저는 이 글에서 그 부분을 잘 판단하게 하는 방법을 보여드리겠습니다.

React는 코드를 세련되고 의미 있게 작성하기가 보다 쉽습니다. 하지만 컴포넌트 재활용에 대한 깔끔한 패턴 없다면 시간이 흐를수록 코드에 통일성이 사라지고 유지보수가 매우 어려워집니다. 동일한 UI 요소인데 10가지 상이한 방식으로 구현된 코드베이스를 제가 본 적이 있습니다! 다른 문제는, 개발자들이 대게 UI와 비즈니스 기능(functionality)를 너무 확장성 없이 연결하는 경향이 있어서 이후에 UI를 힘겹게 변경하게 된다는 것입니다.

오늘은 공통적으로 쓰일 UI 컴포넌트를 작성하는 방법과 애플리케이션 전반적으로 일관된 디자인 언어를 구축하는 방법을 알아보겠습니다.

시작하기

시작하려면 코드가 작성되지 않은 React 프로젝트가 있어야 합니다. create-react-app로 하는 것이 가장 빠르지만, 그렇게 하면 노력을 어느 정도 들여 Sass를 설정해야 합니다. 저는 skeleton 앱을 제작했습니다. 여러분이 GitHub에서 파일을 복사(clone)하셔도 됩니다. 더불어 이 튜토리얼에서 제작하는 최종 프로젝트를 GitHub 저장소에서 찾을 수 있습니다.

소스를 실행하기 위해서 소스와 관련한 dependency를 모두 yarn-install로 설치하고, 그다음에 애플리케이션이 실행되도록 yarn start를 실행하세요.

모든 비주얼 컴포넌트는 그에 해당하는 스타일과 함께 design_system 폴더에 있습니다. 글로벌 스타일이나 변수들은 src/styles 폴더에 넣을 것입니다.

Project folder structure

디자인의 기준을 잡기

padding을 아주 조금  잘못 잡거나 여러 회색 그림자 사이에 구별을 하지 않아서 여러분의 동료 디자이너에게 나에게 혼나볼래라는 표정을 마지막으로 본 적이 언제인가요? ( #eee#efefef는 다릅니다. 제가 듣기에 말이죠. 조만간 그 이유를 알아보려고 해요.)

UI 라이브러리를 만드는 목적 중에 하나는 디자인과 개발 팀 간의 관계를 향상시키는 것입니다. 프론트엔드 개발자들은 API를 이용해서 디자이너와 현재 한동안 협업을 해오고 있으며 API 내용을 구축을 능숙하게 합니다. 그렇지만 어떤 이유에서 인지 디자인 팀과 협업하는 동안 그대로 흘러가지 않습니다. 생각해 보면, 거기에는 UI 요소를 언급하는 한정된 내용만 들어 있는 데 말이죠. Heading 컴포넌트를 디자인한다고 예를 들면, 크기는 h1h6 안에 있을 것이고, bold나 이탤릭, 혹은 밑줄일 것입니다. 코드로 작성하기에 뻔하겠죠.

그리드 시스템

디자인 프로젝트를 시작하기 전, 첫 번째 단계는 어떻게 그리드 구조 잡을지를 이해하는 것입니다. 다수의 앱에서는 임의로 작업되지요. 그렇게 되면 간격 체계가 마구잡이가 되어 버리고, 개발자들이 어느 간격을 기준으로 적용할지 판단이 서지 않습니다. 그러니 하나의 구조를 고르세요! 이에 대해 처음 읽었을 때, 4px - 8px 그리드 구조에 빠져들었습니다. 그 구조를 고수하니 많은 스타일 이슈를 단순화하는 데 도움이 되더군요.

기본적인 그리드 구조를 코드로 설정하는 것부터 시작을 해봅시다. 레이아웃을 만드는 app 컴포넌트로 시작하겠습니다.

다음에는 다수의 스타일과 wrapper 컴포넌트를 정의합니다.

마지막으로  SCSS에서 CSS 스타일을 정의하겠습니다.

여기에 언팩(unpack)하려는 게 많이 있습니다. 아래쪽부터 시작해 보지요. variables.scss에는 color와 같은 글로벌 스타일을 정의하고 그리그를 설정하는 파일입니다. 4px-8px 그리드를 사용할 것이므로 기본을 4px로 잡겠습니다. 부모 컴포넌트는 Page이고, 이는 페이지의 흐름을 제어합니다. 그다음으로 가장 하위 요소는 Box입니다. 이것은 페이지에서 콘텐츠가 어떻게 렌더링될지를 결정합니다. 문맥상에서 자체적으로 렌더링하는 방식을 알고 있는 div일 뿐이지요.

이제 필요한 것은 다수의 div와 함께 붙어 있을 Container 컴포넌트입니다. flex-box를 선택했으므로 Flex 컴포넌트라고 창조적으로 이름짓겠습니다.

타입 시스템(type system) 정의하기

타입 시스템(type system)은 모든 애플리케이션에서 중요한 컴포넌트입니다. 보통은 글로벌 스타일을 통해 기본을 정의하고 필요할 때 덮어쓰기(override) 합니다. 이 시스템은 자주 디자인에서 일관성이 깨지곤 합니다. 디자인 라이브러리를 추가해서 이 문제가 어떻게 쉽게 해결될 수 있는지 봅시다.

먼저, 스타일 상수(constants)와 wrapper class를 몇 개 정의하겠습니다.

다음에는 text 요소에 쓰일 CSS 스타일을 정의하겠습니다.

이는 간단한 Text 컴포넌트로 text가 들어가는 여러 종류의 UI 상태를 표현합니다. text가 길어 잘릴 때 툴팁으로 보이거나 이메일, 시간 등의 특수한 경우와 관련한 내용을 보여주는 것과 같은 마이크로 인터랙션을 제어하려고 좀 더 확장시킬 수 있습니다.

원자(atoms)에서 분자(molecules) 형태로

지금까지는 웹 애플리케이션에 있을 만한 가장 기본적인 요소들만 제작해 보았습니다. 그 요소들 자체만으로는 아무 소용이 없지요. 간단한 모달창(modal window)을 만들면서 이 예제를 발전시켜 봅시다.

모달창과 관련한 컴포넌트 class를 정의하겠습니다.

다음에는 모달창에 관한 CSS 스타일을 정의하면 됩니다.

익숙하지 않은 분을 위해 덧붙이자면, createPortalrender 메서드와 매우 비슷합니다. 다른 점은, 부모 컴포넌트의 DOM 계층 밖에 있는 node에까지 자식 컴포넌트를 렌더링하는 것입니다. React 16에 도입되었습니다.

Modal 컴포넌트 사용하기

컴포넌트가 정의되었으므로 비즈니스 문맥에서 이를 어떻게 활용할 수 있는지 알아봅시다.

이 모달창은 어디서든지 사용 가능하며 호출자(caller)에서 상태를 유지하게 됩니다. 간단하죠. 그렇지 않나요? 그런데 여기에 버그(bug)가 있습니다. 닫기 버튼이 작동하지 않거든요. 이는 모든 컴포넌트를 폐쇄 체계(closed system)로 제작했기 때문입니다. 필요한 props만을 소비하고 나머지를 무시합니다. 여기의 문맥에서는 text 컴포넌트가 onClick 이벤트 핸들러를 무시합니다. 다행히 간단하게 고칠 수 있습니다.

ES6에서 나머지 매개 변수(parameters)를 배열로 용이하게 변경할 수 있습니다. 그저 변수로 적용하고 컴포넌트로 전달하면 됩니다.

찾기 편한 컴포넌트 만들기

팀의 규모가 커질수록 팀원들이 이용가능한 컴포넌트들을 일치시키는 게 어려워집니다. 여러분의 컴포넌트를 금새 찾게 해주는 정말 좋은 방법은 스토리북(Storybooks)입니다. 기본적인 스토리북 컴포넌트를 만들어 보죠.

아래 명령어를 실행시켜 시작합니다.

이는 스토리북의 필수 환경설정을 만들어 줍니다. 여기서부터 남아 있는 설정(setup) 작업은 쉽습니다. Type의 여러가지 상태를 보여주는 간단한 스토리(story)를 추가해 봅시다.

API의 표면(surface)은 단순합니다. storiesOf는 새로운 스토리, 그러니까 여러분의 컴포넌트를 정의합니다. 다음에는 이 컴포넌트의 여러 가지 상태를 전시하도록 add를 이용해 새로운 장(chapter)를 생성하면 됩니다.

A simple Type storybook

물론 매우 기초적인 내용이지만, 스토리북에는 여러분의 다큐먼트(docs)에 기능을 더해주는 여러 가지 애드온(add-ons)이 있습니다. emoji도 제공하고 있다고 제가 얘기했던가요? 😲�

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.