Firebase를 이용한 Sketch Craft Data 생성

Muhyun Kim
Aug 26, 2017 · 7 min read

Sketch 플러그인 중 Craft는 단연 으뜸이다. 그 중에서 Data와 Duplicate 기능은 작업자의 수고를 획기적으로 덜어주는 고마운, 그리고 스마트한 기능이다.

로컬에 있는 데이터를 설계물에 한꺼번에 적용할 수도 있고, 온라인 상에 있는 데이터와 이미지를 가져다 쓸 수도 있는데, 반복되는 항목을 자동으로 알아서 가져다 주는 수준이다.

Craft — Introduction to the Data plugin — InVision Support

또 다른 방법으로 잘 정리된 JSON데이터가 제공될 경우 개인 뿐만 아니라 공동의 작업자가 손쉽게 작업할 수 있다.

구글에서 제공하는 Back-end 서비스 중 하나인 Firebase를 이용해서 Fake JSON Data를 만들고 이를 이용해서 Sketch로 작업하는 과정을 설명한다. (익숙해지면 30분 정도면 20여개 데이터를 가진 JSON 데이터 링크를 만들어 낼 수 있다)

1. firebase 개요 및 로그인

firebase는 인증, 데이터베이스, 이미지 스토리지, 호스팅, 성능 모니터링, AdMob 연동 기능 등 다양하고 필수적인 백엔드기능을 제공하는 구글의 서비스이다. 따라서 구글아이디로 로그인만 하면 firebase를 이용해볼 수 있다. (무료로 상당한 서비스를 이용해볼 수 있다)

아주 특별한 경우가 아니라면 앱을 운영한다면 백엔드서비스를 firebase를 이용해서도 대부분 제공가능하다고 한다.

이 서비스 중에 Database 서비스를 이용한다. 기본적으로 firebase는 기존의 관계형데이터베이스가 아닌 키:밸류 형태의 NoSQL 데이터베이스 기능을 제공한다. 그러다 보니 자연스럽게 JSON형태의 RESTful API 기능을 제공하는데, firebase 주소에 컬렉션명을 붙이고 뒤에 .json 만 붙이면 REST API 주소가 된다.

2. 프로젝트 생성

firebase에 접속 후 우측상단에 “콘솔로이동” 메뉴를 클릭한다. 이후 프로젝트 추가버튼을 클릭해서 프로젝트를 생성한다.

프로젝트이름과 국가를 선택한 후 프로젝트 만들기를 클릭하면 10여초 정도 후 프로젝트가 만들어지며, 해당 프로젝트 화면으로 이동한다.

프로젝트 만들기 화면

3. 데이터 생성

화면 좌측 상단의 ‘Database’ 메뉴를 클릭한다. 4개의 하위 탭 중 ‘데이터’ 탭에서 데이터를 생성한다. 처음에는 키-밸류 개념이 낯설다보니 좀 어려울 수 있는데 아래 그림을 보면서 천천히 따라해보자.

우선 루트노드 옆에 있는 ‘+’ 버튼을 클릭해서 하위에 ‘data-shoes’와 같이 데이터 컬렉션 값을 추가한다. (다른 데이터는 한글로 만들어도 되는데, url에 해당하므로 영문으로 만들자)

생성된 항목 우측에 ‘+’ 버튼을 클릭해서 하위에 목록을 만드는데, 배열형태이다 보니 이름을 ‘0’, ‘1’, ‘2’와 같이 순서대로 적어준다. 각 항목별로 실제 데이터 값을 키(이름)와 밸류(값)로 구분해서 입력한다.

썸네일 이미지는 url을 입력하면 되는데, 브라우저에서 참조할 이미지를 찾아서 마우스우클릭 > ‘리소스 주소 복사’를 해 와서 붙여넣기 하면 된다.

키-밸류 형태의 데이터 생성화면

4. 접속권한 설정

데이터를 만들었다면 접속권한을 설정해야 한다. 데이터 작성화면 중간에 있는 ‘기본 보안규칙을 사용하면 사용자가 인증을 받아야 합니다.’ 안내와 같이 프로젝트를 만들면 기본적으로 인증된 사용자만 데이터를 읽거나 쓸 수 있다.

Sketch 작업 시 인증된 사용자 외에 다른 사용자도 받을 수 있도록 하려면 누구나 데이터를 읽을 수 있도록 수정해야 한다.

Database > 규칙 탭을 눌러 “.read” 의 값을 아래와 같이 “true”로 설정해준다. 이렇게 하면 모든 사람이 읽을 수 있게 된다. 이후에 반드시 ‘게시’ 버튼을 눌러서 적용해 주어야 한다.

접속권한 수정화면

5. 접속확인

브라우저를 이용해서 정상적으로 외부에서 접속가능한지 테스트해보자.

url은 Database > 데이터 탭 화면 상단에 있는 주소에 컬렉션명 (여기서는 ‘data-shoes’) , 그리고 뒤에 ‘.json’ 확장자를 붙여주면 된다.

접속 url 을 확인할 수 있는 Database 화면

아래와 비슷하게 데이터가 표시되면 JSON api는 정상적으로 설정된 것이다.

6. 데이터 이용

Sketch에 Craft 플러그인이 설치된 것을 가정한다.

json 데이터를 맵핑하고 이를 반복해서 그리드로 만들때는 순서가 중요하다. 우선 1) 데이터를 적용할 모듈을 심볼로 만들고 2) UI에 json 데이터를 맵핑시킨 후 3) Duplicate를 설정하고 4) Duplicate영역을 정한다.

  1. 상품모듈을 만든다. 썸네일용 사각형, 상품명용 텍스트, 가격표시용 텍스트로 구성한후 모듈을 심볼로 만든다.
  2. Craft > Data 패널 > JSON탭 url입력란에 위에서 만든 json api url을 입력한다. 엔터키를 누르면 이미지와 같이 데이터가 표시된다. 심볼에서 각 항목을 선택하고 JSON탭의 항목을 탭하면 UI요소와 Data가 맵핑된다.
Craft 플러그인 Data 기능을 이용한 맵핑 (이미지 저작권 때문에 운동화 가림)

3. 데이터 맵핑이 끝났다면 Craft > Duplicate 기능을 이용해서 상품목록을 구성한다.

상품화면에 위에서 만든 상품심볼을 하나 추가한다. 상품심볼을 선택한 후 Craft > Duplicate 패널을 열어 행과 열 수, 간격을 설정한다. (나중에 목록이 만들어진 후 수정할 수 있으니 대충 만들어도 된다)

4. 설정이 되고 나면 아래 그림 레이어리스트의 선택된 항목처럼 ‘Duplicate control’ 레이어가 생성되는데, 매우 중요한 녀석이다. 이 컨트롤을 선택하고 영역을 늘리면 그 영역만큼 상품정보가 자동으로 구성된다.

이때 가장 많이 실수하고 중요한 사항이 있는데, 상품전체 목록 (여기서는 Group2 레이어)을 선택하고 조정하려는데, 그렇게 하면 원하는 결과를 얻을 수 없고 반드시 ‘Duplicate control’을 선택해서 설정해야 한다.

)
Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade