본문 바로가기
카테고리 없음

[UX/UI 디자인] 14. 데이터베이스 - GCP React Deployment

today-i-learned 2026. 5. 6. 09:06

📅 2026.04.30(목) - 14일차

GCP 클라우드 배포

  • GCP(Google Cloud Platform) 클라우드 배포와 Nginx 역방향 프록시 ➔ React 앱을 세상에 공개하는 설계
  • 단순히 내 컴퓨터에서만 보이던 결과물을 전 세계 사용자가 접속 가능한 클라우드 환경으로 이전하는 과정. 구글의 컴퓨팅 자원을 빌려 안정적인 서비스 인프라 구축.
  • 배포는 단순한 파일 전송이 아닌, 사용자가 들어올 '문(Port)'을 열고 '길(DNS)'을 닦는 과정.
  • Nginx가 앞에서 안내데스크 역할을 수행하며 포트로 들어온 손님을 연결.
  • 웹서비스 배포 아키텍쳐 이해하기
  •  

1. 클라우드 환경 구축 (Compute Engine)

구글의 컴퓨터 한 대를 빌려 나만의 가상 서버(VM: Virtual Machine)를 마련하는 과정.

  • Google Cloud Console: (cloud.google.com/)
    • Internal IP와 External IP ➔ GCP(Google Cloud Platform) 인스턴스를 생성할 때 마주하게 되는 두 가지 IP 주소. 클라우드 네트워크의 소통 방식을 정의하는 주소 체계
    • Internal IP: 집 안에서 쓰이는 이름
    • External IP: 세상에 알려진 주소
  • 인스턴스 설정:
    • OS: Ubuntu 22.04 LTS (가장 표준적인 서버 운영체제)
    • 머신: e2-micro (실습용 가성비 모델)
    • 방화벽: HTTP/HTTPS 트래픽 허용 체크 필수.
  • 방화벽 권한 설정: 외부 소통을 위해 특정한 번호의 문(3000, 8080 포트의 문)을 여는 네트워크 보안 설계 설정.

2. 개발 환경 설치 및 소스 클론

서버가 React를 이해하고 실행할 수 있도록 기초 체력을 기르는 단계.

  • Node.js 설치 (NVM 활용): 버전 18 설치를 통해 실행 환경 조성.
  • GitHub 클론: 작업한 소스코드를 서버로 내려받기.
    • sudo apt-get update로 패키지 목록 최신화.
    • git clone을 통해 서버에 프로젝트 데이터 복제.

3. 의존성 설치 및 실행 (NPM & PM2)

레시피(package.json)에 따라 요리 재료(Library)를 준비하고 가동하는 단계.

  • npm install: 수많은 라이브러리를 node_modules 폴더에 다운로드하는 재료 장보기.
  • npm run build: 배포용 압축 파일 생성.
  • PM2 백그라운드 실행: 터미널을 꺼도 24시간 웹사이트가 유지되도록 관리.

4. Nginx: 웹의 안내 데스크

사용자가 접속하는 80번 포트를 내부 서버의 3000번 포트로 연결하는 중재자.

  • 왜 Nginx인가? 사용자는 기본 80번으로 들어오지만, React는 3000번에서 작동 중. Nginx가 역방향 프록시(Reverse Proxy) 역할을 수행하며 손님을 안내함.
  • 포트 포워딩 설정: 80번을 3000번으로 연결. 프록시 패스 라고도 함.
  • 심볼릭 링크: sites-enabled 폴더에 설정 파일의 지름길을 만들어 서버 활성화 완성.

5. 도메인 연결 및 최종 적용

숫자로 된 IP 주소 대신 기억하기 쉬운 이름을 부여하는 과정.

  • DNS 설정 (A 레코드): 가비아 등 도메인 관리 페이지에서 VM의 외부 IP를 등록.
  • 최종 테스트: nginx -t로 오타 확인 후 systemctl restart nginx로 서비스 런칭 완성.

MySQL & Titanic - 실전 데이터 구축 및 SQL 쿼리 실습

  • MySQL Server 구축과 Titanic 데이터 분석 ➔ 로우 데이터를 인사이트로 바꾸는 쿼리
  • 데이터 뒤에 사람 & 스토리가 있다!
  • 클라우드 서버 위에 관계형 데이터베이스(RDBMS)를 직접 설치하고, 타이타닉 승객 데이터를 로드하여 분석하는 실전. 단순한 수치를 넘어 사용자 행동의 패턴을 발견하는 데이터 중심 설계의 기초 완성.
  • 데이터베이스는 서비스의 기억 장치. 수만 명의 정보를 구조화된 테이블에 담고, SQL이라는 언어로 정확하게 질문할 때 비로소 데이터 기반의 의사결정 완성.
  • "질문이 정교해야 답이 명확" SQL 쿼리를 통해 원하는 조건의 데이터를 추출하고 정렬하는 과정이 곧 서비스 기획과 UX 개선의 출발점.

주요 단계

1. VM 환경에 MySQL 설치

Ubuntu 서버의 엔진을 업데이트하고 데이터베이스 관리 시스템(MariaDB/MySQL)을 설치하는 단계.

  • 설치 명령어:
    • sudo apt update: 패키지 목록 최신화.
    • sudo apt install mariadb-server -y: 데이터베이스 서버 설치.
    • sudo mysql_secure_installation: 보안 설정(비밀번호 설정 등) 진행   
    • 상태 확인: sudo systemctl status mysql 명령어를 통해 서버가 정상적으로 작동하는지 체크하여 DB 구동 환경 완성.

2. DB 및 테이블 스키마 생성

CSV 구조에 맞춰 데이터를 담을 '데이터 상자(Table)'의 뼈대를 설계하는 과정.

  • 데이터베이스 생성: CREATE DATABASE IF NOT EXISTS titanic_db;
  • 테이블 스키마 설계 (passengers):
    • PassengerId: 승객 고유 번호 (PRIMARY KEY)
    • Survived: 생존 여부 (0 또는 1)
    • Pclass: 티켓 등급 (1, 2, 3등석)
    • Name, Sex, Age, SibSp, Parch, Ticket, Fare, Cabin, Embarked 등 각 데이터 타입에 맞는 필드 설정.
  • 정교한 데이터 정의를 통해 안정적인 저장 구조 완성.

3. CSV 업로드 보안 해제 및 파일 이동

MySQL 보안 정책에 따라 승인된 특정 폴더에서만 파일을 읽을 수 있도록 설정하는 단계.

  • 보안 경로 확인: SHOW VARIABLES LIKE "secure_file_priv"; 명령어로 허용된 경로 확인.
  • 파일 이동: 확인된 경로(예: /var/lib/mysql-files/)로 타이타닉 CSV 파일을 이동시켜 데이터 로드 준비 완성.

4. 데이터 로드 (Import)

명령어 한 줄로 CSV 파일에 담긴 수많은 행을 DB 테이블로 쏟아붓는 최적화 과정.

  • 데이터 정제: @age 변수와 NULLIF를 사용하여 비어있는 연령 데이터를 처리하는 데이터 무결성 확보 완성.

5. SQL 실습 미션

구축된 데이터를 바탕으로 원하는 정보를 추출하는 실전 쿼리 연습. (SQL Query는 AI 활용 가능)
데이터 필터링과 정렬을 통해 필요한 인사이트 도출 완성.

 -

 

AI와 도구가 발전하는 시대에 프로덕트 디자이너가 갖춰야 할 차별화된 역량

  • 기술을 이해하되, 본질은 사용자 경험의 단순화에 있음. 아무리 복잡한 비즈니스 로직도 사용자 앞에서는 직관적이고 단순한 경험으로 치환될 때 가장 강력한 디자인 솔루션 완성. 서비스가 고도화될수록 단순화(Simplify) 시키는 것이 모든 문제 해결의 핵심임을 인지하여 인터페이스의 명확성 완성. 디자이너의 가장 큰 숙제는 사용자가 느끼는 인지 부하를 줄이는 것. 덜어내고 깎아내어 사용자 경험의 순도 완성.
  • 기술은 도구일 뿐, 본질은 문제 해결. 시스템의 제약(CORS 등)을 이해하고 정적인 결과물을 넘어 살아있는 MVP를 설계할 때 비로소 실전형 디자이너의 가치 완성. CORS나 SSH 같은 개념을 아는 디자이너는 개발자와의 소통 비용을 획기적으로 줄이며, 실현 가능한 디자인을 제시하는 전문가적 신뢰 완성. (SSH (Secure Shell): 네트워크 상의 다른 컴퓨터에 로그인하거나 명령을 실행하기 위한 보안 프로토콜. 원격 서버(GCP 등)에 안전하게 접속하여 데이터를 관리하기 위한 보안 통신 인프라 이해 완성.)
  • 단순 기능 설계를 넘어 브랜딩, 심화된 UX, 감성적 터치를 통해 AI가 대체할 수 없는 인간 중심의 가치 창출.
  • 과거: 와이어프레임(구조) 중심.
    현재: 프로토타입(정적인 흐름) ➜ MVP(다이나믹한 상태)로 발전. 실제 데이터가 흐르고 동작하는 최소 기능 제품을 설계하는 능력 필수.

 

[실습 복기] 타이타닉 실습 중 데이터 대시보드 구축 과정에서 발생한 이슈의 원인.

  • Artifact의 한계: 보안 등의 이유로 외부 API 호출이 제한되는 등 독립된 환경의 제약으로 인한 MySQL 연동 실패.
  • CORS(Cross-Origin Resource Sharing):
    • 브라우저에서 실행되는 웹 애플리케이션이 다른 도메인의 자원에 접근할 때 발생하는 보안 정책.
    • 서버에서 허용하는 CORS Header가 설정되어 있지 않으면 데이터 통신이 차단됨을 이해하여 웹 통신 규약의 기초 완성.

Design.md & 디자인 시스템: 효율적인 협업과 일관성을 위해 문서화된 디자인 가이드를 참고하고 구축하는 습관 형성.

티스토리툴바