실제 데이터를 사용한 프로토타이핑 – 프레이머 튜토리얼

Framer는 가장 강력한 앱 프로토타이핑 도구 중 하나입니다. iOS에서 Android에 이르기까지 모든 모바일 장치용으로 디자인하는 데 사용할 수 있습니다. 프로그래밍에 대해 어느 정도 알고 있다면 상대적으로 쉬운 프로그래밍 언어인 CoffeeScript를 기반으로 하기 때문에 그 기능은 사실상 무제한입니다. 디자이너는 상상력과 코딩 기술에 의해서만 제한됩니다.

이 글을 따라가기 위해서는 최소한 Framer에 대한 기본적인 지식이 있어야 합니다. 디자인 모드와 코드 편집기를 사용하겠습니다. 지식을 보완하려면 이전 Framer 기사를 읽을 수 있습니다. 멋진 대화형 프로토타입을 만드는 방법, 프로토타입을 개선하는 7가지 간단한 마이크로인터랙션

실제 데이터와 함께 프레이머를 사용해야 하는 이유

설계 또는 프로토타이핑의 일반적인 문제는 실제 데이터가 없다는 것입니다. 기존 제품에 대한 새로운 기능을 설계할 때 가상의 콘텐츠를 사용하는 대신 논리적이고 관련성 있는 실제 콘텐츠를 표시할 수 있습니다. 예를 들어 사용자 사진과 같은 모든 종류의 데이터가 될 수 있습니다. 이렇게 하면 가짜 콘텐츠를 만드는 데 시간을 낭비하지 않고 잘못된 데이터를 사용하여 발생하는 실수를 피할 수 있습니다. 사용 가능한 모든 데이터를 볼 수 있으며 여전히 필요한 콘텐츠를 설정할 수 있습니다. 결과적으로 이해 관계자 및 개발 팀과의 커뮤니케이션이 보다 효율적입니다. 다양한 사용 사례 시나리오를 중심으로 디자인하는 것도 가능합니다.

새로운 기능을 디자인할 때 모든 사용자 프로필이 완전하지 않다는 점, 상점의 모든 범주에 동일한 수량의 제품이 있는 것은 아니며 모든 제품에 동일한 데이터가 표시되지 않는다는 점을 잊는 경우가 있습니다. 실제 데이터를 사용한 프로토타이핑은 LEGO 블록으로 무언가를 만드는 것과 비교할 수 있습니다. 가상의 느슨한 모양으로 작업하는 대신 상자에 있는 기존 구성 요소를 사용하여 실제를 만들 수 있습니다.

실제 데이터로 프로토타입을 만들자!

Framer의 진정한 재미는 데이터베이스에서 실시간으로 업데이트되는 실제 데이터를 사용할 때 시작됩니다. 사진이 포함된 사용자 프로필, 주소, 주가, 환율, 일기예보, 거래 정보 등 모든 종류의 데이터를 적용할 수 있습니다. 앱에서 일반적으로 사용하는 모든 데이터입니다. 실시간 프로토타이핑을 실제 데이터와 결합할 때 정말 강력한 제품 디자인이 시작됩니다. 그리고 더 이상 악명 높은 라틴 스타일의 "lorem ipsum" 자리 표시자 텍스트 조각을 사용할 필요가 없습니다.

실제 데이터를 사용하는 API: 무엇입니까? 어떻게 사용합니까?

API(응용 프로그래밍 인터페이스)는 응용 프로그램과 통신하는 데 사용하는 인터페이스입니다. 앱을 레스토랑이라고 상상해보세요. 음식은 데이터이고 웨이터는 API입니다. 당신은 웨이터에게 음식을 요청합니다. 그것이 당신이 해야 할 전부입니다. 대기 직원(API)과 주방(데이터베이스)이 나머지를 처리합니다.

주어진 데이터베이스에 있는 실제 데이터에 대한 액세스에 관한 것입니다.

모든 앱에는 데이터를 캡처하고 표시할 수 있는 API가 있습니다. 일부 API는 공개적으로 사용 가능하고 일부는 내부 제품에서만 사용됩니다.

공개적으로 사용 가능한 API는 새로운 애플리케이션을 구축하는 데 널리 사용됩니다. 예를 들어 날씨 애플리케이션을 구축하려면 일부 날씨 데이터가 필요합니다. 공개 API를 공유하는 수많은 일기 예보 웹사이트의 도움으로 매우 쉽습니다. 또한 다양한 API를 결합하여 완전히 새로운 제품을 만들 수 있습니다.

실제 데이터는 어디에서 얻을 수 있습니까? 오픈 API 목록

다양한 데이터를 제공하는 공개적으로 사용 가능한 API가 많이 있습니다. 다음은 Framer에서 실제 데이터로 프로토타이핑하는 데 유용한 5가지 후보 목록입니다. 이러한 각 API는 프레임워크에서 쉽게 처리할 수 있는 JSON 형식의 데이터도 반환합니다.

무작위 사용자 – 확실히 초보자를 위한 최고의 API입니다. 아바타에서 이메일 주소에 이르기까지 완전한 무작위 사용자 프로필을 생성합니다.

OpenWeatherMap – 이것은 사용하기 매우 쉬운 API입니다. 그것은 당신이 어떤 위치에서 현재 날씨와 예보를 확인할 수 있습니다. 이 API를 사용하여 온도, 습도 또는 풍속과 같은 데이터를 표시할 수 있습니다.

Pokeapi – 교육 목적으로 만들어진 최고의 API 중 하나입니다. 포켓몬에 대한 정보를 찾고 계신가요? 여기에서 찾을 수 있습니다. 이것은 Pokemon 메인 게임 시리즈에 대한 모든 것을 자세히 설명하는 광범위한 데이터베이스에 연결된 완전한 RESTful API입니다.

Instagram – 사용 권한이 필요한 목록의 첫 번째 API입니다. 그러나 서비스는 매우 간단합니다. 모든 Instagram 사진과 사용자에 액세스하여 새 앱에 표시할 수 있습니다.

Mapbox – 지도 및 길찾기에서 지오코딩 및 위성 이미지에 이르기까지 애플리케이션과 쉽게 통합할 수 있는 수많은 놀라운 서비스를 제공합니다. Foursquare, Evernote, Instacart, Pinterest, GitHub 및 Etsy는 모두 공통점이 있습니다. 그들의 지도는 Mapbox에 의해 구동된다는 것입니다.

이 API는 JSON 파일을 반환하지 않지만 모든 Mapbox 기능에 대한 액세스를 제공한다는 점에서 이전 API와 다릅니다. Mapbox는 Framer에서 API를 사용하는 방법에 대한 훌륭한 튜토리얼도 제작했습니다.

실제 데이터를 사용하는 Framer의 임의 사용자 API 자습서

Framer에서 API를 사용하는 방법을 이해하려면 Random User API부터 시작하겠습니다. 사용자 목록인 단일 앱 화면이 필요합니다.

1단계: 디자인 모드

다음은 이름, 성 및 아바타가 포함된 사용자 목록입니다. 그게 다야. 이 프로세스의 가장 중요한 부분은 모든 요소의 이름을 적절하게 지정하고 그룹화하는 것입니다. 아바타와 이름은 상자 레이어에 그룹화되고 모든 상자는 목록 안에 그룹화됩니다.

디자인 모드에서 마지막으로 해야 할 일은 목록 레이어를 대화형 레이어로 표시하는 것입니다. 그렇게 하려면 대상 아이콘을 클릭하기만 하면 됩니다.

2단계: JSON 이해

먼저 JSON이 무엇인지, Framer 외부로 가져오는 방법을 이해해야 합니다. Random User API 문서에서 API의 데이터 요청을 찾습니다. https://randomuser.me/api/?results=20과 같습니다. 보시다시피 브라우저에서 JSON 파일을 여는 일반 링크입니다.

그대로, 그것은 전혀 명확하지 않습니다. 올바른 형식의 JSON 파일을 보려면 JSONview라는 Chrome 플러그인을 사용하세요. 플러그인을 사용하면 파일이 다음과 같이 표시됩니다.

훨씬 낫다. 이제 읽기 쉬워야 합니다. 파일에는 API에 요청한 후 받은 사용자 데이터가 포함된 결과 배열이 포함되어 있습니다. 그래서 JSON 파일은 무엇입니까? 기술적인 세부 사항으로 들어가지 않고 데이터베이스의 특정 데이터를 포함하는 JavaScript 구문을 기반으로 하는 텍스트 파일입니다. JSON은 Framer에서 데이터를 표시하는 데 사용할 수 있습니다.

3단계: JSON 파일을 Framer로 가져오기

이제 한 줄의 코드로 JSON 파일을 Framer로 가져올 수 있습니다.

 data = JSON.parse Utils.domLoadDataSync "https://randomuser.me/api/?results=20"

JSON 파일을 포함할 데이터 라는 개체를 만듭니다. 인쇄 기능을 사용하여 JSON 파일을 제대로 가져왔는지 확인합니다.

 print data 

4단계: JSON 파일에서 특정 데이터 액세스

이제 JSON 파일 구조로 돌아갑니다.

이 JSON 파일에서 results 는 더 많은 개체를 포함하는 배열입니다. 각 개체는 다른 사용자입니다. 먼저 이러한 개체 중 하나를 대상으로 지정해야 합니다. 무슨 일이 일어나고 있는지 더 잘 이해하려면 인쇄 기능을 사용하십시오.

 print data.results[1]

프레이머 콘솔:

 {gender:"male", name:{title:"mr", first:"benjamin", last:"petersen"}, location:{street:"2529 oddenvej", city:"sandved", state:"midtjylland", postcode:48654}, email:"[email protected]", login:{username:"organicsnake771", password:"bauhaus", salt:"PohszyFx", md5:"b19140299c05e5e623c12fb94a7e19e6", sha1:"78d95ec718ef118d9c0762b3834fc7d492111ab2", sha256:"0a702949d5e066d70cde2b9997996575e4c3df61ff3751294033c6fc6cd37e54"}, dob:"1974-12-17 04:58:03", registered:"2009-04-08 16:50:59", phone:"76302979", cell:"41168605", id:{name:"CPR", value:"605218-6411"}, picture:{large:"https://randomuser.me/api/portraits/men/65.jpg", medium:"https://randomuser.me/api/portraits/med/men/65.jpg", thumbnail:"https://randomuser.me/api/portraits/thumb/men/65.jpg"}, nat:"DK"}

괄호 안의 그림은 배열에 있는 객체의 번호를 나타냅니다. data.results[1] 을 사용하면 JSON 파일의 모든 첫 번째 사용자 데이터에 대한 액세스가 수신됩니다.

그런 다음 이름이나 성 같은 항목이 표시될 수 있습니다.

 print data.results[1].name.first

Framer는 "benjamin" 으로 응답합니다. 엣 짜잔! API에서 데이터에 액세스할 수 있습니다!

5단계: JSON에서 데이터 표시

마침내! 남은 것은 데이터를 표시하는 것뿐입니다. 이제 디자인 모드의 모든 레이어를 대상으로 하는 간단한 루프를 만들어야 합니다. 이 이전 기사에서 루프를 사용하여 레이어를 대상으로 지정하는 방법에 대해 자세히 알아보세요.

JSON 데이터에서 배열의 첫 번째 개체를 대상으로 x = 0 을 사용하고 있습니다. 그런 다음 목록 의 각 자식 요소에 대해 JSON 데이터의 데이터를 할당합니다. 루프의 끝에 +1을 추가하여 배열의 다음 개체에서 데이터를 사용합니다.

 x = 0 for i in list.children i.children[2].text = data.results[x].name.first i.children[1].text = data.results[x].name.last i.children[0].image = data.results[x].picture.large x++

그게 다야! 이제 디자인 모드로 돌아가서 디자인을 가지고 놀 수 있습니다. 그러면 실제 데이터가 프로토타입에 표시됩니다!

위의 Framer 파일은 https://framer.cloud/djmvG에서 다운로드할 수 있습니다.

Instagram API – Framer의 실시간 데이터

Instagram은 실시간 데이터로 여행을 시작하는 흥미로운 출발점입니다. 지침은 비교적 따르기 쉽고 API는 흥미로운 데이터를 제공합니다. 완전한 액세스 권한이 부여됩니다. 기사의 이 부분에서 Instagram API는 내 Instagram 프로필 데이터(이름, 최신 사진, 좋아요 수)를 표시하는 간단한 프로토타입을 만드는 데 사용됩니다.

1단계: 액세스 토큰 받기

Instagram API를 사용하려면 액세스 토큰이 필요합니다. 두 가지 방법으로 얻을 수 있습니다.

1. 가장 일반적인 방법은 Instagram for Developers 웹 사이트로 이동하여 지침을 따르는 것입니다. 이 프로세스는 비기술자에게는 복잡할 수 있습니다.
2. 다행히도 쉽고 안전한 방법이 있습니다. Pixel Union은 훨씬 더 쉬운 원클릭 프로세스를 개발했습니다. 웹사이트로 이동하여 Get Access Token 버튼을 클릭합니다.

2단계: 도메인 간 요청 활성화

액세스 토큰을 받은 후 약간의 트릭이 필요합니다. Instagram은 localhost(Framer)의 API 요청을 허용하지 않으므로 서버 측 쿼리를 사용해야 합니다. 그 중 하나가 JSONProxy입니다. 웹 사이트로 이동하여 Instagram API의 요청을 붙여넣고 GO를 누르십시오.

완료되면 Instagram API 링크를 사용하는 대신 JSONProxy 링크를 사용할 수 있습니다.

3단계: Framer에서 간단한 앱 디자인

이 디자인에는 세 가지 중요한 요소가 있습니다. 이름 자리 표시자, 최신 사진을 표시할 직사각형, 이미지 아래의 좋아요 수입니다. 이 모든 것은 코드 편집기에서 재사용할 수 있는 대화형 레이어로 표시됩니다.

4단계: Instagram의 데이터를 사용하는 4줄의 코드 작성

여기서의 흐름은 Random User API와 동일합니다. Instagram에서 모든 사용자 데이터에 액세스할 수 있습니다.

 yourAccessToken = "YOUR-ACCESS-TOKEN" instagramJSON = JSON.parse Utils.domLoadDataSync "https://json-proxy.herokuapp.com/?callback=&url=https%3A%2F%2Fapi.instagram.com%2Fv1%2Fusers%2Fself%2Fmedia%2Frecent%2F%3Faccess_token%3D#{yourAccessToken}" likesCount.text = instagramJSON.data[1].likes.count name_1.text = instagramJSON.data[1].user.full_name photo.image = instagramJSON.data[1].images.standard_resolution.url

그게 다야! 5줄의 코드로 Instagram에서 제공하는 라이브 및 실제 데이터를 사용하여 프로토타입을 만들 수 있습니다. 여기에서 작동하는 프로토타입을 다운로드하십시오: https://framer.cloud/iYAXl. (이 프로토타입을 실행하려면 고유한 액세스 키를 추가해야 합니다.)

요약 - 찬반 양론

데이터베이스에서 API를 통해 얻은 실제 데이터를 사용하여 프로토타입을 생성함으로써 새로운 창의적 가능성과 제품 디자인을 확인할 수 있는 기능이 빛을 발합니다. 제품과 100% 일치하는 프로토타입을 구축하고 실제 사용자에게 새로운 기능을 테스트할 수 있습니다. . 시스템의 모든 데이터를 미리 볼 수 있어 디자인에 반드시 포함되어야 하는 요소를 놓치기 어렵고, 실제 데이터에 접근할 수 있어 가짜 데이터 사용으로 인한 디자인 실수를 미연에 방지할 수 있습니다.

즉, Framer에서 충실도가 높은 프로토타이핑은 상당히 비쌉니다. 원하는 효과를 얻으려면 많은 조정이 필요하므로 시간과 비용이 많이 듭니다. Random User API 예제에서 볼 수 있듯이 API와 통신하는 것은 어렵지 않지만 훌륭한 프로토타입을 만들기 위해서는 여전히 많은 시간이 필요합니다.

그럼에도 불구하고 완전한 측정이 주어지면 확실히 고려할 가치가 있습니다. 실제 데이터로 행복한 프로토타이핑!

• • •

Toptal Design 블로그에 대한 추가 정보:

• UI 디자인 모범 사례 및 일반적인 실수
• 빈 상태 – UX에서 가장 간과되는 측면
• 단순함이 핵심 - 최소한의 웹 디자인 탐색
• 모바일 인터페이스에 대한 경험적 원리
• 가독성을 위한 디자인 – 웹 타이포그래피 가이드