가계부 대시보드 만들기

01 만든 대시보드를 만들기 위해 아래 링크에서 가계부 실습을 위한 스프레드시트를 복사하겠습니다. [파일 -> 사본 만들기]를 누르고 어디에 저장할 것인지 폴더를 선택한 후 [사본 만들기]를 눌러 준비합니다.

 

가계부 실습 데이터

https://docs.google.com/spreadsheets/d/1EdfzPKkZiy5JIRpf9p16qgxFpEH2_ZAfUlmBG4jfKZM/edit?gid=0#gid=0

가계부 실습용

 

파일을 열어보면 날짜, 항목, 분류, 수입, 지출, 잔액 등의 정보가 잘 정리되었습니다. 이 파일은 데이터베이스 삼아서 대시보드 형태로 만들어 현황을 파악할 수 있다면 자산 관리에 정말 유용하겠죠.

 

02 데이터를 중심으로 개발 계획부터 물어보며 시작하겠습니다. 커서로 빈 폴더를 열고, 복사한 스프레드시트 파일의 링크를 알려주며 다음과 같이 질문합니다.

스프레드시트 @https://docs.google.com/spreadsheets/d/1NvywgT031oK882aa5o_BqnL9CONhUph0XCObjXNHVM4/edit?gid=0#gid=0에 있는 가계부 데이터를 읽어서 대시보드 형태로 보여주는 앱을 만든다고 할 때 가장 쉽고 빠르게 개발할 수 있는 방법은 뭐야?

 

결과를 보면 커서가 스트림릿이라는 파이썬 라이브러리와 구글 스프레드시트 API를 사용해야 한다고 알려줍니다. 여러분에게는 다른 방식을 추천했을 수도 있습니다. 만약 커서가 다른 라이브러리나 방식으로 안내했다면, 이후 진행하는 실습의 편의를 위해 프롬프트에 '스트림릿으로 만들어줘'라고 덧붙여주세요. 그러면 스트림핏을 기반으로 똑같이 실습을 진행할 수 있습니다.

 

03 구글 클라우드에 접속하여 화면 위쪽의 [+ 프로젝트 만들기]를 누릅니다. 프로젝트 이름을 적절히 정한 다음 [만들기]를 눌러 프로젝트를 만듭니다.

구글 클라우드 홈페이지: https://console.cloud.google.com/

Google 클라우드 플랫폼

 

04 이렇게 만든 프로젝트 내에서 구글 스프레드시트에 대한 API 권한을 추가하고, 스프레드 시트에 접근할 때 필요한 서비스 계정을 만들면 됩니다. 서비스 계정이란 구글 스프레드시트에 접근할 수 있는 봇 계정이라고 생각하면 됩니다. 프로젝트를 생성한 뒤 다음 화면이 보입니다. 여기서 왼쪽 위애 있는 [메뉴] 버튼을 누르고 [API 및 서비스]를 선택합니다.

 

05 이제 API를 추가해보겠습니다. [+ API 및 서비스 사용 설정]을 누르고 spreadsheet를 검색하면 API 항목이 나타납니다. 목록에 나오는 [Google Sheets API]를 선택한 다음 [사용]을 누르면 해당 프로젝트에 스프레드시트에 대한 접근 권한이 생깁니다.

 

06 그럼 다음 다시 [사용자 인증 정보]로 돌아옵니다. 위쪽에 [동의 화면 구성] 버튼이 나타나면 버튼을 눌러 이동하세요. 이 과정을 처음 진행한다면 'Google 인증 플랫폼이 아직 구성되지 않음'이라는 화면이 나타납니다. [시작하기]를 누른 다음 화면에 나오는 항목에 값을 적절히 입력하고 [만들기]를 누르세요.

 

07 다시 [사용자 인증 정보]로 돌아와서 '서비스 계정' 항목의 [서비스 계정 관리]를 눌러 서비스 계정을 추가합니다. 이제 이 서비스 계정을 추가합니다. 이제 이 서비스 계정을 통해 여러분의 가계부 데이터에 접근할 수 있도록 권한을 주면 됩니다.

 

08 [+ 서비스 계정 만들기]를 눌러 봇 계정을 추가합니다. 서비스 계정 이름, ID를 적절히 입력하고 [만들고 계속하기]를 누릅니다. 이때 권한에서 역할을 반드시 [소유자]로 설정해야 합니다. 나머지는 기본값으로 두고 [완료]를 누릅니다.

서비스 계정이 추가된 것을 확인했다면, 이제 이 계정의 이메일을 복사합니다. 이 이메일은 봇이 스프레드시트에 접근할 수 있도록 권한을 부여할 때 사용됩니다.

 

09 이제 다시 가계부로 사용할 구글 스프레드시트로 돌아갑니다. 오른쪽 위의 [공유]를 누르면 작은 창이 뜹니다. 여기서 네모 칸에 서비스 계정 이메일 값을 붙여 넣으세요. 권한은 반드시 [편집자]로 설정하며, [전송]를 누릅니다. 그래야 이 계정을 통해 스프레드시트의 데이터를 읽고 쓸 수 있습니다. 이렇게 설정해두면 직접 만든 프로그램에서 이 스프레드시트를 데이터베이스처럼 자유롭게 사용할 수 있습니다.

 

10 마지막으로 방금 만든 서비스 계정의 이메일을 눌러서 [키] 항목으로 이동한 다음 [키 추가 -> 새 키 만들기]를 누릅니다. 그러면 생성한 서비스 계정을 파일 형태로 인증할 수 있는 인증 파일을 다운로드할 수 있습니다. 이 파일이 있어야 추가한 서비스 계정을 이용해서 스프레드 시트 내용에 접근할 수 있는 것입니다. 키는 JSON 형식으로 옵션을 선택한 다음 [만들기]를 누릅니다.

 

11 그러면 json 파일이 생성되며 다운로드됩니다. 이 파일은 지금 한 번만 다운로드할 수 있습니다. 파일 자체가 서비스 게정을 대신하는 역할을 함으로 보안에도 유의해야 합니다. 다운로드가 완료되면, 파일 이름 뒤에 있는 무작위 값을 지우고 커서 프로젝트 폴더에 잘 보관합니다.

 

12 커서에게 인증 파일이 현재 폴더에 있다고 알려주기만 하면 됩니다. 일단 스프레드시트에 있는 값을 읽을 수 있는지 확인합니다.

스프레드시트 @https://docs.google.com/spreadsheets/d/1Nvy**dit?gid=0#gid=0에 접근할 수 있는 인증 파일이 폴더에 있어. 이것을 이용해서 해당 파일에 있는 값을 읽을 수 있는 프로그램을 만들어줘.

 

그러면 커서가 다음과 같이 간단한 코드를 작성해줍니다. 코드를 실행하면 스프레드시트의 데이터가 잘 보일 것입니다.

 

13 이제 이 코드를 기반으로 대시보드를 만들면 됩니다. 커서에게 스트림릿을 사용하여 실행하라고 하면 그에 맞게 코드를 완성해줄 겁니다.

이제 읽은 데이터를 바탕으로 대시보드를 만들어줘. 스트림릿을 사용하면 돼.

 

14 커서가 시키는 대로 코드를 실행하니, 대시보드가 펼쳐집니다.

 

15 그러나 살펴보니, 월별 지출도 보이지 않고 대시보드 화면이 좁아서 답답한 느낌이 드는 등 조금 아쉬운 점이 있습니다. 필요한 점은 추가하고 개선할 점을 찾아 좀 더 고쳐보죠. 커서에게 이렇게 부탁해보겠습니다.

대시보드 화면이 너무 좁아, 그리고 월별 지출도 보이지 않고, 좀 더 제대로 개선할 수 없어? 계계부가 일목요연하게 잘 보이도록 하는 것이 중요해.

 

코드를 수정한 뒤 다시 실행해보면 이전보다 훨씬 보기 좋은 가계부 대시보드가 나타납니다. 열도, 월, 분류, 결제 수단 등 따로 설정할 수 있네요.

 

16 이제 마지막으로 하나만 더 추가합니다. 스프레드시트에 새로운 값이 추가되었을 때, 화면을 껐다 켜지 않아도 바로 반영될 수 있다면 좋겠죠? [갱신] 버튼을 추가하여 이 버튼을 누르면 최신 데이터를 불러와 화면을 업데이트하도록 커서에게 요청합니다.

스프레드시트에 새 값이 추가되면 대시보드에 [갱신] 버튼을 눌러서 반영할 수 있게 해줘.

 

스프레드시트에 새로운 값을 추가하고 대시보드에서 [갱신]을 누르니 연도도 추가되며 데이터를 불러와 화면을 업데이트해줍니다.