정적 목업도 괜찮지만, 그렇지 않을 때가 있습니다. 특히 실시간 인사이트가 중요한 핀테크에서는 단순한 이미지로는 충분하지 않습니다. 진정으로 몰입감 있고 현실적인 사용자 경험을 만들려면 동적이고 살아 있는 데이터가 필요합니다. 완성된 제품처럼 프로토타입의 지출 차트와 금융 데이터가 실시간으로 업데이트되는 모습을 상상해 보세요.
이 튜토리얼에서는 ProtoPie 프로토타입에 Google Sheets를 통합하는 방법을 단계별로 안내합니다. 이 가이드는 스프레드시트에서 데이터를 직접 가져와 강력한 데이터 기반 프로토타입을 만드는 방법을 보여줍니다.
1부: Google Sheets 데이터 가져오기
첫 번째 단계는 Google Sheets의 데이터를 ProtoPie로 가져오는 것입니다. ProtoPie Connect와 내장 API 플러그인을 사용해 이를 구현합니다.
1단계: ProtoPie Connect에서 API 요청 설정하기
ProtoPie Connect API 플러그인에서 다음 세부 정보로 새 요청을 만들어야 합니다:
메서드: GET
URL: URL은 스프레드시트 ID, 가져오려는 데이터 범위, 고유한 Google API 키의 조합입니다.
헤더: 없음
본문: 없음
2단계: 스프레드시트 ID 찾기
스프레드시트 ID는 Google Sheet의 고유 식별자입니다.
Google Sheet URL에서 직접 확인할 수 있습니다. /d/와 /edit 사이에 위치한 긴 문자열입니다.
3단계: 데이터 범위 정의하기
다음으로 ProtoPie에 어떤 데이터를 가져올지 알려야 합니다. 범위는 가져올 셀을 지정합니다.
이는 열 묶음(예: A:C)일 수도 있고 전체 시트일 수도 있습니다.
Sheet1!A1:D1 같은 형식이나 시트 이름만 지정하여 모든 데이터를 가져올 수 있습니다.
4단계: Google Sheets API 키 생성하기
이 키는 ProtoPie가 시트 데이터에 접근할 수 있도록 승인합니다.
Google Cloud Console로 이동합니다.
상단 메뉴에서 새 프로젝트를 만듭니다.
검색창에서 "Google Sheets API"를 찾아 프로젝트에 대해 활성화합니다.
왼쪽의 자격 증명 탭으로 이동합니다.
자격 증명 만들기를 클릭하고 API 키를 선택합니다.
키가 생성됩니다. 이를 복사하여 ProtoPie Connect의 URL에 추가합니다.
5단계: 테스트 및 문제 해결
URL을 만든 후 ProtoPie Connect에서 요청을 테스트하세요. 오류가 발생하면 가장 흔한 문제는 Google Sheet의 공유 권한입니다.
중요한 팁: Google Sheet의 공유 설정을 "제한됨"에서 "링크가 있는 모든 사용자"로 변경했는지 확인하세요. 제한된 시트는 OAuth 인증이 필요하며, 이는 데이터를 제한된 상태로 유지하면서도 프로토타입에서 사용하고 싶을 때 활용할 수 있습니다. 다만 이 유형의 인증은 이 튜토리얼에서 다루지 않습니다.
2부: ProtoPie에서 데이터 파싱하기
API 요청이 성공하면 ProtoPie는 시트에서 가져온 긴 원시 데이터 문자열을 받게 됩니다. 이제 이 데이터를 파싱(분해)하여 프로토타입에서 사용할 수 있도록 해야 합니다.
Google Sheets의 데이터는 스프레드시트의 행을 나타내는 "values"로 구성됩니다. 첫 번째 행에는 일반적으로 열 제목(예: "이름", "날짜", "금액")이 들어 있고, 그 다음 행들에는 실제 데이터가 들어 있습니다.
1단계: parseJson으로 기본 데이터 파싱하기
parseJson() 수식은 특정 정보를 접근하는 핵심입니다. 메타데이터를 가져오는 기본 예제를 살펴보겠습니다:
수식: parseJson(metaData "values."+ (ID+1)+".0")
**metaData: **이것은 API 호출의 원시 데이터를 저장하도록 할당한 변수입니다.
"values.": 이 수식은 데이터의 "values" 섹션 안을 찾도록 알려줍니다.
(ID+1): 이 부분은 원하는 행을 선택합니다. 첫 번째 행(행 0)은 보통 제목이므로, 그 뒤에 오는 실제 데이터 행에 접근하기 위해 +1을 사용합니다. 따라서 첫 번째 데이터 행(시트의 두 번째 행)에서 데이터를 가져오려면 두 번째 집합을 확인하면 됩니다.
**".0": **이 부분은 행 안의 특정 항목을 선택합니다. 각 행의 데이터 항목은 0부터 시작하는 인덱스로 매겨집니다. 따라서 .0은 첫 번째 항목, .1은 두 번째 항목을 가져오며, 이런 식으로 이어집니다.
2단계: 동적 차트 데이터의 고급 예제
때로는 Google Sheets의 데이터 구조가 직접 파싱하기에 이상적이지 않을 수 있습니다. 예를 들어 연도별로 월별 지출이 나열되어 있다면 특정 월의 지출을 찾기 위해 우회 방법이 필요합니다.
수식: parseJson(googleSheet,"values."+((year*12)+ monthID +1)+".2")
이 수식은 복잡해 보일 수 있지만, 필요한 정확한 데이터를 찾기 위해 단순히 수학을 사용하는 것입니다.
원하는 연도와 monthID에 대한 변수를 사용합니다.
(year*12): 이 부분이 핵심 역할을 합니다. 데이터에 연도마다 12개월이 있다면, 이 계산은 12개씩 묶인 행을 건너뛰어 올바른 연도에 도달하게 합니다.
+ monthID: 올바른 연도를 찾은 뒤, 여기에 월 번호를 더해 올바른 행을 찾습니다.
+1: 이것도 제목 행을 고려한 것입니다.
".2": 이 행의 세 번째 데이터 항목(예: 지출 금액)을 가져옵니다.
여기까지입니다!
이제 끝입니다! Google Sheets를 ProtoPie에 연결하면 정적 디자인을 넘어 실제 제품처럼 역동적이고 반응성이 뛰어난 프로토타입을 만들 수 있습니다. 이제 라이브 데이터를 불러와 차트, 목록, 기타 구성 요소를 구동하여 더 풍부하고 설득력 있는 사용자 테스트를 만들 수 있습니다.
이제 여러분 차례입니다. 자신의 Google API 키를 생성하고 시트 권한을 올바르게 설정하는 것을 잊지 마세요. 즐거운 프로토타이핑 되세요!
