AWS Amplify Studio — Figma 디자인을 바로 리액트 컴포넌트로 만드는 법(번역)

빠르게 제품을 만들어 시장에 나갈 수 있도록 해주는 스타트업을 위한 최고의 서비스

10 min readFeb 2, 2022

이 글은 원작자 (Frank Haubenschild)의 허락하에 아래 원문을 번역한 번역본입니다. (번역을 하며 필요한 부분은 제 임의로 수정, 보충하였습니다. 원문이 나온 시점과 제가 번역을 시작한 기간 사이에 AWS Amplify 콘솔이 많이 바뀌어서 관련 설명 및 사진이 여럿 바뀌었습니다.)

원문: AWS Amplify Studio — Figma Designs To React UI Components

AWS Amplify Studio를 이용하여 최소한의 노력으로 React 기반의 풀스택 어플리케이션을 만들어봅시다.

Photo by Hal Gatewood on Unsplash

Amplify Studio (전: Amplify Admin UI)

Amplify Studio의 UI Library 기능이 최근 AWS re-invent에서 소개되었습니다. (아직은 프리뷰 모드입니다.)

이 UI Library를 통해 피그마 (Figma)디자인을 리액트 컴포넌트 코드로 변환할 수 있습니다.

(피그마는 웹베이스 디자인, 프로토타입 툴입니다.)

앞서 말했듯, Amplify Studio는 피그마 디자인을 리액트 컴포넌트 코드로 변환시켜줍니다. 더 나아가, Amplify Studio를 통해 만든 UI 컴포넌트를 백엔드 데이터와 연동할 수 있는 GUI 서비스를 제공하고 있습니다.

피그마 사용이 익숙하지 않은 사용자를 위해 AWS가 제공하는 Amplify Figma Template 파일이 있습니다. 해당 파일을 이용하여 미리 완성된 UI 컴포넌트 디자인을 Amplify에서 리액트 코드로 변환하여 사용해 볼 수 있습니다.

AWS가 제공한 준비된 Figma 디자인입니다. 해당 디자인을 Amplify에서 코드로 변환해볼 수 있습니다.

AWS Amplify CLI 설치 및 Configure

AWS Amplify를 사용하기 위해서는 우선 AWS 계정이 필요로 합니다.

만일 계정이 없다면 먼저 회원가입을 진행해주시길 바랍니다. 처음 가입하셨을 경우 1년간 공짜로 AWS 서비스를 이용할 수 있습니다. (AWS Free Tier 사용 가능)

Amplify Command Line Interface (CLI)는 AWS 서비스들 (카테고리들) 을 쉽게 사용할 수 있도록 도와줍니다. CLI를 사용하면 만들고자 하는 앱에 아래 리스트된 서비스들을 사용할 수 있습니다. 리스트에 기재된 역할을 사용하기 위해서는 괄호 안의 서비스를 사용하시면 됩니다.

예) Data관리를 위해서 AWS의 DynamoDB를 쓸 수 있습니다.

API (REST- or GraphQl-based) [API Gateway / AppSync]
Data [DynamoDB]
Authentication [Cognito]
Storage [S3]
Functions [Lambda]
Geo [Amazon Location Service]
Hosting [Cloudfront / S3]
Analytics [Kinesis / Pinpoint]
Predictions [Rekognition, Translate, Polly, Transcribe, Comprehend, Textract, SageMaker]
Interactions [Lex]
Notifications [Pinpoint]

Amplify CLI 설치

Amplify CLI를 글로벌 설치합니다. (글로벌 설치란 패키지 안에서만 사용하는 것이 아닌 컴퓨터 안에 설치해서 언제든 사용할 수 있게하는 것입니다.

npm install -g 라이브러리명

위 커맨드를 이용하여 글로벌 설치를 할 수 있습니다.)

아래 커맨드 라인을 이용하여 설치하면 됩니다. (아래 명령어로 설치가 안 된다면 sudo 커맨드를 사용하여 루트권한으로 설치해주시면 됩니다.)

설치를 하시면 CLI 자체적으로 CloudFormation을 이용하여 필요한 AWS 인프라를 생성합니다.

$ npm install -g @aws-amplify/cli
$ amplify -v
7.6.5

Amplify CLI Configure

CLI 설치를 완료하였으므로, 이제 설정을 해주도록 하겠습니다.

아래 명령어를 실행해주시면 됩니다.

$ amplify configure

위의 명령어를 실행하면 AWS 계정 로그인을 진행하게 됩니다. 로그인 후에 Amplify CLI를 위한 IAM 계정 생성을 진행하게 됩니다.

IAM을 생성하는 이유는 앞서 언급했듯이 Amplify가 기타 AWS 서비스들을 이용하기 위해 권한을 필요로 하기 때문입니다. (예: 데이터 저장을 위해 DynamoDB를 사용할 경우, Amplify가 DynamoDB를 사용할 수 있도록 권한을 설정해줘야 합니다.)

IAM 계정은 programmatic access(프로그래밍 방식 액세스)타입으로 체크합니다.

AdministratorAccess 권한을 가진 IAM 유저를 만들면 Amplify CLI가 S3, AppSync, Lambda, cognito 등과 같이 Amplify에서 사용해야 하는 기타 AWS서비스를 사용할 수 있게 됩니다.

IAM 유저에게 필요한 권한을 부여해줍니다. (지금의 경우 앞서 언급한 ‘AdministratorAccess’)

만일 웹사이트에서 IAM 유저가 성공적으로 생성되었다면,

다시 CLI로 돌아와서 웹 상에서 보여지는 액세스 키 ID와 비밀 액세스 키를 복사해서 입력해줍니다.

CLI에서 요구하는 대로 값을 웹에서 복사 후 붙여넣기 해줍니다.

Enter the access key of the newly created user:
? accessKeyId:     # YOUR_ACCESS_KEY_ID
? secretAccessKey: # YOUR_SECRET_ACCESS_KEYThis would update/create the AWS Profile in your local machine
? Profile Name: # (default)Successfully set up the new user.

이 단계에서 저희는 IAM 유저를 만들고 IAM 유저에게 필요한 권한을 부여하여였습니다. 그리고 Amplify CLI가 이 IAM 유저를 사용할 수 있도록 설정하였습니다. 이제 다음 스텝부터는 리액트 설치 및 설정을 진행하겠습니다.

Create React App 및 Initialize Amplify

Amplify React 프로젝트를 실행하는 가장 빠른 방법은 (아마도) npx와 Create React App를 이용하는 것입니다. 이를 위해서는 Node.js 14, npm 5.6 이상의 버전이 필요로 합니다.

Amplify packages를 포함하여 새로운 프로젝트를 생성하기 위해 아래 커맨드들을 입력해줍니다.

$ npx create-react-app amplify-app-react
$ cd amplify-react-app
$ npm install aws-amplify @aws-amplify/ui-react
$ npm start

아까 커맨드를 통해 생성한 앱이 잘 실행되고 있다면 아래 화면을 볼 수 있을 것입니다.

리액트 보일러플레이트 앱은 3000번 포트를 디폴트로 이용하여 실행됩니다.

다음으로, 리액트 앱에 Amplify를 추가해보겠습니다. 그렇게 하기 위해서는 리액트 앱의 루트 디렉토리로 이동한 뒤에 아래 명령어를 입력합니다.

$ amplify init

위 명령어를 입력한 뒤에 나오는 간단한 질문들을 대답하며 계속 설정을 진행해주시면 됩니다. 대부분 디폴트 값으로 두어도 됩니다.

? Enter a name for the project amplifyappreactThe following configuration will be applied:Project information
| Name: amplifyappreact
| Environment: dev
| Default editor: Visual Studio Code
| App type: javascript
| Javascript framework: react
| Source Directory Path: src
| Distribution Directory Path: build
| Build Command: npm.cmd run-script build
| Start Command: npm.cmd run-script start? Initialize the project with the above configuration? YesUsing default provider  awscloudformation     
? Select the authentication method you want to use: AWS profile? Please choose the profile you want to use 
>  default 
....√ Initialized provider successfully.
Initialized your environment successfully.Your project has been successfully initialized and connected to the cloud!

AWS 콘솔을 통해 Amplify Studio backend 사용을 미리 세팅했다면, 아래 명령어를 통해 쉽게 Amplify Studio로 이동할 수 있습니다.

(Amplify는 풀스택 앱 관리 서비스입니다. 리액트 앱을 통해 프론트 앱을 만들었으니, 백엔드를 설정할 차례입니다.)

$ amplify console
? Which site do you want to open? ... 
> Amplify Studio
  AWS console

Data Model 생성

다음 스텝을 진행하기 위해서, Amplify Studio로 이동하여 데이터 모델을 생성해야합니다.

Amplify Studio의 백엔드 부분입니다.

데이터모델은 앱의 데이터 구조입니다. 이번에 저희가 같이 만들고 있는 프로젝트가 중고 거래를 하는 사이트를 만드는 프로젝트라고 생각해봅시다. 그렇다면 팔고자하는 제품에 대한 간단한 데이터 모델이 필요로 합니다.

해당 데이터 구조는 제품명, 설명, 이미지, 그리고 가격으로 이루어져있을 것입니다. 이 외에도 원한다면 데이터 구조는 원하는 만큼 많은 내용을 가질 수 있습니다.

추가적으로, 해당 데이터 모델에 접근할 수 있는 유저를 설정해줘야 합니다. Amplify를 통해 세부적인 데이터 권한 설정을 진행할 수 있습니다. API키를 가진 유저에게만 CRUD 액션을 진행하도록 할 수도 있습니다. Amplify는 AWS Cognito를 이용하여 데이터접근, 회원가입, 로그인, 비밀번호관리, O-auth 등의 유저관리를 진행합니다.

먼저, 팔고자 하는 아이템의 데이터 모델을 만들고 해당 데이터 모델에 접근할 수 있는 유저를 지정해봅시다. 모델을 콘솔에서 작성하고 나서, 화면 오른쪽 상단의 ‘Save and Deploy’ 버튼을 눌러 배포를 완료하면 Amplify가 필요한 클라우드 인프라를 알아서 설정해줄 것입니다.

먼저 데이터 구조를 만들고 (왼쪽) 해당 데이터에 접근할 수 있는 유저 설정을 해줍니다. (오른쪽)

버튼을 누르고 나오는 화면에서 ‘ React’ 를 선택합니다.

그리고 ‘Deploy app to AWS’ 버튼을 누릅니다.

그러면 배포가 진행됩니다.

배포가 완료되면 이런 화면으로 이동합니다.

‘Studio 시작’ 버튼을 누릅니다.

생성한지 얼마 안 되면 이렇게 에러가 발생할 수도 있습니다.

약 10분 후에 들어가면 문제없이 스튜디오에 들어가집니다.

데이터 처리를 위해서 Amplify 는 Amazon DynamoDB를 이용합니다. 유저 관련 처리를 위해서는 Amazon Cognito를 사용합니다. 데이터에 접근하기 위해서는 REST API (Amazon API Gateway) 혹은 GraphQl-based API (AWS AppSync)를 사용할 수 있습니다. 이번 경우에는, Amplfy를 통해 변환된 리액트 코드가 데이터에 접근할 수 있도록 설정해주겠습니다.

더미 데이터 추가하기

이제 데이터모델이 준비가 되었으므로, 데이터를 추가해보도록 하겠습니다. 컨텐트 섹션에 들어가 아래 사진처럼 테이블에 임의의 데이터를 추가해봅시다.

Figma 디자인을 Amplify UI Library에 Import하기

저희는 제공된 Amplify Figma 템플릿을 Amplify UI Library에 임포트하여 사용하도록 하겠습니다. 이를 위해선 피그마 계정이 필요로 합니다. (물론 템플릿이 아닌 원하는 피그마 디자인을 사용해도 됩니다.)

Amplify Figma template URL: https://www.figma.com/community/file/1047600760128127424

(피그마 탬플릿을 이용하시기 위해서는 해당 피그마 url로 이동하여 ‘Duplicate’버튼을 눌러 템플릿을 복사하여 사용하면 됩니다.)

UI Library 메뉴를 선택하고 ‘Get Started’버튼을 클릭합니다.

다음에 뜨는 말풍선에서 피그마 URL을 입력합니다.

이미 피그마 계정으로 로그인했다면, 아래 사진과 같은 화면이 뜰 것입니다.

아래 url의 디자인들을 Amplify에서 코드화하기 위해 아래 화면의 url을 복사합니다.

인풋창에 피그마 파일 링크 url을 입력하고 ‘Continue’ 버튼을 클릭합니다.

마지막으로 피그마 디자인 import를 허용해줘야 하는데

Accept버튼을 눌러 컴포넌트 당 임포트를 진행하거나, 상단의 Accept all을 눌러 모든 컴포넌트를 한 번에 임포트를 할 수 있습니다.

UI 컴포넌트와 데이터 연결하기

디자인 임포트가 모두 완료되었다면 UI LIbrary에 새롭게 추가된 컴포넌트들을 확인할 수 있습니다. 이제 해당 컴포넌트들과 데이터를 연결하면 됩니다.

데이터 연결을 원하는 컴포넌트를 선택 후에 화면 상단의 ‘Configure’ 버튼을 클릭합니다.

CardB라는 컴포넌트를 예시로 연결해보도록 하겠습니다. 해당 컴포넌트를 선택한 후에 ‘Configure’ 버튼을 클릭합니다.

그리고 화면 왼편의 Elements tree에서 원하는 요소를 클릭하여 원하는 데이터 모델과 연결할 수 있습니다.

화면 오른편에서 Component property를 추가해줘야 합니다.

여기서는 image라는 이름의 Component property를 만들고, 타입은 앞서 생성한 Item 데이터 모델을 선택하겠습니다. child property에는 각각 엘레먼트에 해당하는 프로퍼티를 설정해주겠습니다.

(예: 이미지는 src 프로퍼티, 밸류는 image.image)

더미데이터에 넣은 실제 데이터가 나오지 않아도 괜찮습니다. (아마 AWS상의 버그인 것 같습니다.)

그 다음, 콜렉션을 만들어보겠습니다.

화면 상단의 ‘Create Collection’ 버튼을 누릅니다.

‘Create’ 버튼을 누릅니다.

그리고 다른 메뉴로 나갔다가 다시 UI Library로 들어와보면 생성한 컬렉션이 나옵니다.

생성한 컬렉션을 선택하고 화면 우측 상단의 ‘Configure’ 버튼을 누릅니다.

컴포넌트 컬렉션이므로 이곳에서 컴포넌트들을 담는 레이아웃을 구성할 수 있습니다.

여기서는 Grid 레이아웃을 사용해보겠습니다.

콜렉션을 만들면 아까 더미 데이터에 입력한 값들이 반영되어 나오는 것을 볼 수 있습니다. (데이터가 완벽히 반영이 안 될 수도 있습니다. 아직 AWS 상의 버그가 있는 것 같습니다,)

이제 리액트 앱에 코드로 해당 UI들을 사용할 준비가 완료되었습니다.

Amplify UI Component 리액트앱에서 사용하기

앞으로 몇 단계만 더 진행하면 위에서 만든 컴포넌트들을 리액트 앱에서 사용할 수 있습니다.

React App에 Amplify 사용코드를 추가하기 (index.js 수정)

import Amplify from 'aws-amplify';
import "@aws-amplify/ui-react/styles.css";
import {AmplifyProvider} from "@aws-amplify/ui-react";
import awsconfig from './aws-exports';Amplify.configure(awsconfig);

위의 코드들을 index.js 상단에 붙여넣어줍니다.

2. <App /> 를 <AmplifyProvider></AmplifyProvider> 로 감싸기

아래 볼드처리된 코드를 유의하여 코드를 수정해주시면 됩니다.

ReactDOM.render(
   <React.StrictMode>
       <AmplifyProvider>
           <App />
       </AmplifyProvider>
   </React.StrictMode>,
   document.getElementById('root')
);

3. Amplify CLI를 통해 Backend (Amplify admin)에서 만든컴포넌트들 pull 받기

amplify pull — appId <YOUR-AMPLIFY-APP-ID> — envName dev

Pull이 성공적으로 완료되었다면, /src/ui-components 폴더 아래 컴포넌트들이 생성된 것을 확인할 수 있습니다.

이제 성생된 컴포넌트들을 원하는 곳에 import하여 사용할 수 있습니다.

4. 생성된 코드 React 에서 사용하기

다른 리액트 컴포넌트와 마찬가지로 간단히 임포트하기만 하면 Amplify 스튜디오에서 생성한 컴포넌트를 사용할 수 있습니다.

여기에서는 스튜디오에서 생성한 CardBCollection 컴포넌트를 임포트하여 사용해보겠습니다.

import './App.css';
import { CardBCollection } from './ui-components';function App() {
  return (
     <div class="my-app" className="App">
         <CardBCollection />
     </div>
  );
}export default App;

5. 결과물을 브라우저에서 확인하기

짜잔! 브라우저에서 원하는 대로 컴포넌트를 잘 보여주고 있습니다.

Amplify 비용

여러분들의 성공적인 유니콘 스타트업을 위해 Amplify를 쓰고 싶다면 가격 걱정은 전혀 할 필요가 없을 것 같습니다. ;-)

Amplify 자체 비용은 없으며, Amplify가 앱관리를 위해 사용하는 다른 AWS 리소스의 (예: S3, Lambda, DynamoDB, API Gateway 등) 비용만 내면 됩니다! 또한 Amplify는 서버리스 서비스이기 때문에 서버를 관리하는 수고 및 비용 또한 들지 않습니다.

앞서 언급한 AWS 리소스 사용 비용 외에 Amplify는 앱 빌드 및 호스팅 비용을 책정합니다. 앱 사용과 관련한 비용을 미리 계산해보고 싶다면 AWS Pricing Calculator를 사용해보시길 바랍니다.

결론

Amplify는 백엔드 인프라에 대한 걱정 없이 빠르게 풀스택앱을 만들기에 적합한 서비스입니다. Amplify가 유저를 위해 만들어주는 모든 백엔드 인프라는 서버리스 기반입니다. 따라서 Amplify 유저들은 서버 업데이트, 보안 패치 등을 걱정할 필요가 없습니다. 또한 새로이 소개된 피그마 디자인을 리액트 코드로 변환해주는 기능은 프론트엔드 개발자의 삶의 질을 더욱 향상시켜 줄 것입니다.

Figma community와 무료 UI 위젯들을 사용하면 확장가능성이 높은 인프라를 가진 멋진 리액트앱을 빠르게 만들 수 있을 것입니다.

번역 소감 및 원문에서 수정한 부분

글의 시작에서 언급했듯, 이 글은 원작자의 허락을 받고 번역한 번역본입니다. 원문은 아래 링크에서 확인하실 수 있습니다.

원문: AWS Amplify Studio — Figma Designs To React UI Components

이 글을 번역하며 처음으로 Amplify를 사용해보았습니다.

작년에 흥행했던 클럽하우스를 통해 우리는 이제 직접 좋은 코드를 짜는 것보다 이미 있는 리소스를 잘 활용하여 좋은 서비스를 만드는 것이 더 현명한 비즈니스 방안이라는 교훈을 얻었습니다.

(관련하여 미국의 유명한 세일즈 전문가이자 베스트셀러 작가이기도 한 그랜드 카든의 저서 <10배의 규칙>에 나온 문구가 생각나 여기에 첨부하겠습니다.

처음부터 제대로 하라는 말은 적절하지 않다.
속도야 말로 성공의 새로운 요소이다. 브레이크를 없애고 가속을 밟아서 다른 누구보다 빨리 아이디어을 밀어붙여라.
다른 사람들이 궁리하는 동안 성취하라. 완벽을 기하는 일은 완벽주의자들에게 맡기면 된다. 나는 성과를 내는 사람이다.

)

Amplify는 빠르게 변화하는 시대에 맞춰 빠르게 서비스를 출시할 수 있도록 도와주는 low code 서비스라는 생각이 들었습니다.

원글에서도 언급되었듯, 유니콘 스타트업을 만들어보고 싶은 사업가라면, 빠르게 앱을 출시하여 고객의 반응을 볼 수 있는 방안으로 사용하기 정말 적합한 서비스라고 생각합니다. (앱이 성공한 후에도 Amplify가 사용하는 AWS 리소스들 덕에 큰 노력 및 비용 없이 scale up 할 수 있기에 정말 훌륭한 서비스입니다.)

다만 나온지 얼마 되지 않았고 아직 프리뷰 모드이기 때문에 계속 콘솔이 많이 바뀌고 있고, 버그 발생 시 커뮤니티가 아직 활성화 되어있지 않기 때문에 구글링해도 큰 도움을 얻지 못할 수도 있습니다.

저는 현재 Amplify를 pull 했음에도 ui component 폴더가 생성되고 있지 않은 문제를 겪고 있습니다. 해당 문제를 해결하면 어떻게 문제를 해결했는지도 같이 공유해드리겠습니다.

수정한 부분

원글 작성 기준 (2022.01) 보다 한 달 밖에 지나지 않았음에도 콘솔이 여럿 바뀌어서 중간 중간 데모 사진을 제가 변경했습니다.

또한 부가 설명이 필요한 부분 (예를 들어 글로벌 설치가 무엇인지, 왜 IAM 유저를 생성해야하는지 등)의 내용을 추가하였습니다.