스케치 워크샵 3/3
콘텐츠를 쉽게 만들자
2. JSON 데이터 활용
이번에는 JSON을 활용한 다이내믹 콘텐츠 만들기입니다.
JSON(JavaScript Object Notation)은 속성-값 쌍으로 이루어진 데이터 오브젝트를 전달하기 위해 사람이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷이라 합니다.
JSON은 보통 이런 구조입니다. 혹은 XML처럼 자기 마음대로 구조를 만들 수 있습니다.
-
1. 준비
우선 스케치에서 JSON을 사용하기 위해선 인비전 크래프트를 통해 사용 가능합니다.
먼저 준비물로는 인비전 크래프트가 되겠습니다.
다운로드: https://www.invisionapp.com/craft
*정상적인 설치를 위해선 스케치가 응용프로그램 폴더 안에 있어야 합니다.
**크래프트 설치는 먼저 크래프트 매니저를 설치하고 컴포넌트를 설치한 후 스케치를 재기동시켜야 합니다.
인비전 크래프트에는 다양한 기능이 존재하는데
세 번째 데이터 메뉴를 보면 위와 같이 사진과 텍스트를 넣을 수 있습니다.
사진과 텍스트는 로컬, 드랍박스, 웹 이 세 가지 방법으로 넣을 수 있는데 여기서 제가 생각했던 아쉬운 점은 사용자가 특정 폴더를 지정해서 의도한 이미지를 넣을 수 있다 치더라도 txt 데이터는 로컬라제이션하기엔 많이 아쉬웠습니다. 특히 영문 이름, 영문 주소 등...
그래서 평소에 한 번도 쳐다보지도 않은 JSON를 사용하는 친구를 보고 반해서도 저도 JSON를 해보기로 했습니다.
2. JSON 데이터 만들기
본 포스트에서는 3가지 방법에 대하 설명 혹은 참조하겠습니다.
1. 개발자한테 쿼리에서 실제 데이터를 추출받아 JSON 데이터로 만든 후 웹에 올려달라고 요청한다.
ㄴ가장 이상적인 방법입니다. https:// 를 통해 올리면 수시로 리얼 데이터 반영도 되고 다른 디자이너와 협업도 수월하게 진행 가능합니다.
예: https://dev.yourcompany.com/design/data/product_data_01.json
2. Sublime text 같은 에디터를 통해 가상의 데이터를 만들 수 도 있습니다.
단점이라 하면 로컬에서 만들기 때문에 다른 디자이너와 공유를 하거나 데이터 수정을 동시에 할 수 없지만 큰 무리 없이 사용 가능합니다.
3. JSON data generator를 사용하면 되는데 구글 파이어베이스 혹은 mockaroo 등 웹에서 누구나 쉽게 더미 JSON 데이터를 만들 수 있게 해줍니다.
구글 파이어베이스:
바이널 김무현 실장님이 쓴 구글 파이어 베이스에서 JSON 데이터 만들기 참조하시면 많은 도움이 됩니다.
특히 구글 파이어베이스에서 JSON 데이터를 만들면 좋은 점은 https:// 에서 데이터를 바로 가져다 쓸 수 있습니다.
예: https://craft-json-test.firebaseio.com/Data-Cloth.json
mockaroo:
리서치하다 알게 된 JSON 데이터 제네레이터인데 꽤나 쓸만합니다.
기본적으로 이런 화면입니다.
mockaroo의 특징은 루비 문법을 통해서 데이터를 커스터마이징 할 수 있는 건데
Type을 클릭하면 다양한 종류의 데이터를 찾아서 만들 수 있습니다.
위 데이터 타입에 없는 데이터를 만들 경우 루비(언어)를 통해 커스터마이징이 가능한데 예제도 많이 있으니 예제 따라서 작업하면 됩니다.
예를 들어 전화번호 포맷을 하려면 보통
1-604-9999-0993 이렇게 미국/캐나다 포맷입니다.
그래서 저는 010-\d{4}-\d{4} 이런 형태로 010 다음에 4개의 랜던 숫자가 뜨게 만들었습니다.
그리하여 위와 같이 간단한 가상의 사용자 데이터를 만들었습니다.
그리고 제어해야 할 몇 가지 항목이 있습니다.
1. 생성할 데이터 개수: 스케치 화면에 뿌려진다면 50개 미만으로 해도 충분하겠죠?
2. 데이터 포맷: 엑셀, xml 등 다양한 종류로 생성 가능합니다.
3. 데이터 다운로드
4. 데이터 미리보기: 클릭하면 팝업창으로 생성된 데이터를 미리 볼 수 있습니다.
5. 링크: 다른 사용자도 사용자가 만든 schema를 볼 수 있습니다.
6. API: 이건 제가 확인한 건 아닌데 아마 프로그래밍으로 데이터를 호출해서 사용할 수 있는듯합니다.
-
*무료 회원가입을 하면 파이어베이스와는 달리 다양한 data schemas를 만들 수 있습니다.
3. 크래프트에서 JSON 데이터 호출하기
크래프트에서 JSON을 사용하는 방법은
웹에 올려져 있는 JSON 파일 주소를 바로 입력하거나 로컬에 있는 .JSON 파일을 드래그해서 사용할 수 있습니다.
파일을 정상적으로 호출하면 아래와 같은 화면이 뜹니다.
그럼 모든 준비가 다 된 것입니다.
4. 스케치에서 JSON 넣기
리스트를 디자인합니다.
저는 제품명, 제품 설명, 제품 이미지, 판매수량, 가격 이렇게 구성했습니다.
그런 다음 크래프트 > 데이터 > JSON을 열고
각 타이틀에 데이터를 클릭하면 텍스트가 JSON 데이터로 바뀌는 것을 알 수 있습니다.
이미지의 경우엔 이미지 경로를 도형을 선택하고 JSON의 이미지 주소를 클릭하면 이미지가 자동으로 들어갑니다.
짝짝짝
그리고 크래프트 4번째 메뉴인 Duplicate를 하면 데이터가 순차적으로 적용된 리스트를 확인할 수 있습니다.
짝짝짝
여기서 중요한 건 만약 실수로 원치 않은 텍스트에 데이터를 넣으면 데이터가 계속 기억한다는 것입니다.
그래서 꼭 실수했으면 JSON 데이터 매핑을 끊기를 바랍니다.
데이터를 지우려면 Product Name 옆에 X를 클릭하면 됩니다.
