[멋쟁이사자처럼부트캠프_그로스마케팅] Day21 루커 스튜디오 실습, chart.js 웹 서비스

 

 

 

 

 

1 Looker Studio 개요

Looker Studio(구 Google Data Studio)는 Google에서 제공하는 데이터 시각화 및 보고서 제작 도구로, 데이터를 이해하기 쉽게 대시보드 형태로 시각화할 수 있도록 지원합니다.

Looker Studio는 비즈니스 인텔리전스(BI) 도구로 활용되며, Google의 다양한 서비스 및 타사 데이터 소스와 연동이 가능해 데이터를 효과적으로 분석하고 공유할 수 있습니다.

1. 다양한 데이터 소스 연결
   • Google Analytics, Google Ads, BigQuery, Google Sheets 등 Google 제품과 원활히 통합됩니다.
   • MySQL, PostgreSQL 같은 데이터베이스, CSV 파일, 또는 타사 API를 통해 외부 데이터를 연결할 수 있습니다.
2. 사용자 친화적 인터페이스
   • 코딩 지식 없이도 쉽게 대시보드와 보고서를 생성할 수 있는 드래그 앤 드롭 방식의 UI를 제공합니다.
   • 원하는 데이터 필드를 추가하거나 필터링, 정렬을 간단히 설정할 수 있습니다.
3. 실시간 데이터 업데이트
   • 연결된 데이터 소스에서 실시간으로 데이터를 가져와 보고서를 동적으로 업데이트합니다.

→ 오늘 csv로 시작해서 MySQL 데이터를 연결시켜 데이터가 실시간으로 반영되는 루커 스튜디오 대시보드를 목표로 한다!

 

---

2 Looker Studio 접속 및 데이터 소스 연결

먼저, 구글 스프레드 시트와 csv파일 연동하여 시각화 실습을 했다.

 

growth_marketing_metrics.csv

① 날짜별 방문자 수 추이 (시계열 차트)

② 회원 가입 수와 전환 수 비교 (막대 차트)

③ 매출 추이 분석 (영역 차트)

④ 고객 획득 비용 대비 고객 유지율 (산점도 차트)

⑤ 주요 성과 지표 (스코어카드)

 

---

3 Looker studio MariaDB 연동

DB와 연동하여 데이터가 실시간으로 반영되는 시각화 대시보드를 가능하게 한다.

우선 looker 연결용 VM부터 새로 만들었다. 전에 노트 필기 해놓은 거보면서 열심히 따라갔다.

https://vol2.tistory.com/7

[멋쟁이사자처럼부트캠프_그로스마케팅] Day 9 GCP VM 인스턴스 설정 및 MariaDB + Pandas 연동 방법

 

 

1 GCP VM에서 MariaDB 설정

1.1 VM 인스턴스 생성

1. GCP 콘솔에서 VM 인스턴스 생성
2. 리전: 서울 선택
3. 운영체제 변경: 기본 Debian → Ubuntu 선택
4. 네트워킹 → 방화벽 설정:
   • HTTP 트래픽 허용
   • HTTPS 트래픽 허용
5. 생성 후 SSH 터미널 접속

(SSH 키 생성 (by putty) 과 등록은 되어있어야함)

---

2 MariaDB

2.1 MariaDB 설치

sudo apt update && sudo apt upgrade  # mariadb 설치및 업데이트 과정
sudo apt-get install mariadb-server 

 

2.2 MariaDB 설정 및 계정 생성

#계정생성을 위해 MariaDB root 계정 접속(그냥 엔터치고 접속)
sudo mysql -u root -p  

#'backend' database 생성
CREATE DATABASE backend DEFAULT CHARACTER SET UTF8;  
SHOW DATABASES;
USE backend;

#계정생성 및 권한 부여
GRANT ALL PRIVILEGES ON backend.* TO 'looker_user'@'localhost' IDENTIFIED BY '1234';
FLUSH PRIVILEGES;
EXIT;

 

2.3 작업 디렉토리 생성 및 권한 부여

cd /var
sudo mkdir gm-lab3
sudo chmod -R 777 gm-lab3

 

2.4 데이터 확인 및 추가 (MariaDB에서 확인)

mysql -u looker_user -p
USE backend;

테이블 생성 명령

CREATE TABLE student_scores (
    student_id INT AUTO_INCREMENT PRIMARY KEY,  -- 학생 고유 ID
    student_name VARCHAR(100) NOT NULL,         -- 학생 이름
    class_name VARCHAR(50) NOT NULL,            -- 반 이름
    subject_name VARCHAR(50) NOT NULL,          -- 과목 이름
    score INT NOT NULL,                         -- 점수
    exam_date DATE                              -- 시험 날짜
);

샘플 데이터 삽입

INSERT INTO student_scores (student_name, class_name, subject_name, score, exam_date)
VALUES
('김철수', '1학년 A반', '수학', 85, '2025-01-01'),
('이영희', '1학년 A반', '영어', 90, '2025-01-02'),
('박민수', '1학년 B반', '국어', 78, '2025-01-03'),
('최지훈', '2학년 A반', '과학', 88, '2025-01-04'),
('정수현', '2학년 B반', '사회', 92, '2025-01-05'),
('김철수', '1학년 A반', '영어', 75, '2025-01-06'),
('이영희', '1학년 A반', '수학', 82, '2025-01-07'),
('박민수', '1학년 B반', '사회', 80, '2025-01-08'),
('최지훈', '2학년 A반', '국어', 89, '2025-01-09'),
('정수현', '2학년 B반', '과학', 95, '2025-01-10');

데이터 확인 명령

SELECT * FROM student_scores;

---

MariaDB 설치 및 테이블 생성 이후,

3 MariaDB의 원격 접속 설정

1. MariaDB 설정 파일 수정
   • sudo nano /etc/mysql/mariadb.conf.d/50-server.cnf 파일을 열어 아래 내용을 확인/수정합니다:
   • bind-address = 0.0.0.0
   • 기본값은 127.0.0.1으로 되어 있어 외부에서 접속할 수 없습니다. 이를 0.0.0.0으로 변경합니다.
2. DNS 확인 비활성화 설정
   • MariaDB 설정 파일(/etc/mysql/mariadb.conf.d/50-server.cnf)을 수정합니다.

	sudo nano /etc/mysql/mariadb.conf.d/50-server.cnf

• 파일에 아래 내용을 추가합니다(또는 주석 해제)

[mysqld]
skip-name-resolve

ctrl o 로 저장 후 enter, ctrl x로 설정파일에서 나가기

 

3.MariaDB 사용자 원격 접속 권한 부여

GRANT ALL PRIVILEGES ON backend.* TO 'looker_user'@'%' IDENTIFIED BY '1234';
FLUSH PRIVILEGES;

 

4. MariaDB 재시작

sudo systemctl restart mariadb

 

5. 루커스튜디오에서 SSH 터미널의 외부IP, 설정파일에 있던 포트(안 써도 동작함), 데이터베이스, 사용자 이름, 비밀번호 입력 후 MariaDB 내의 테이블 조회하면 사용 가능!

---

 

샘플 데이터로 생성한 루커스튜디오 시각화

---

4 MariaDB 연동 루커 스튜디오 시각화 실습

• 마케팅 캠페인별 예산, 시행 날짜, 주요품목 데이터 시각화.

• 트래픽 소스별 클릭, 노출 수, 전환율 데이터 시각화.

• 유저 행동 데이터 분석.

위치 데이터가 있길래 지도 그래프를 사용해보았다.

• 물류회사 근태 데이터 시각화.

지각, 결근을 하이라이트 색을 사용해서 잘 보이게 해보았다.

---

5 Python flask와 chart.js로 웹 대시보드 발행

Financial Analysis Dashboard

Python flask와 chart.js를 이용해 프론트앤드에 데이터를 전달하고 그래프를 그리는 금융 대시보드에 대한 Web 서비스를 만들어 보았다.

터미널에서 디렉토리 만드는거 항상 귀찮았는데, 폴더채로 전송해도 문제없이 작동했다.

디렉토리에 권한 주는 과정을 빼먹었는데… 데이터 조작할 일이 없어서 가능한 것 같다.

• 원본 데이터 & 템플릿

 

• SK 하이닉스 2023년 수익성, 재무 건전성 분석.

 

• 학생 점수 분석 대시보드

 

• ctrl / 하면 한번에 주석처리 가능
• 나중에 뉴스룸 내용으로 다시 만들어봐야겠다
• https://news.samsung.com/kr/%EC%82%BC%EC%84%B1%EC%A0%84%EC%9E%90-2024%EB%85%84-4%EB%B6%84%EA%B8%B0-%EC%8B%A4%EC%A0%81-%EB%B0%9C%ED%91%9C

삼성전자, 2024년 4분기 실적 발표

 

 

---

회고

• 태블로 퍼블릭을 사용해서 그런지 루커 스튜디오가 더 재밌는 거 같다.
• 유저가 만든 시각화도 편하게 쓸 수 있고, 대쉬보드 배치가 자유로운게 특히 편했다.
• html…css… 티스토리에서도 쓰고 노션에서도 쓰는 거라 따로 간단히 독학해보고 싶다. 빅분기 시험 끝나면 해보는 걸로…
• 오늘 못 올렸던 블로그 글 다 올리고 자야지… 제발..