Gem Deck — 글래스모피즘 디자인의 팀 프레젠테이션 뷰어

Posted 2026-03-27 (금)

By MJ Youn

5 min read

올해들어 Gemini를 Pro로 결재해서 사용하면서, 이런 저런 기능을 활용해보고 있다. 그 기능중 하나로 발표 자료를 만들어 주는 기능이 있는데, Google slide로 만들어줄 수도 있지만 아직 완벽하지 않아서 html 기반으로 만드는게 활용성이 있는 듯해서 html 파일로 발표 자료를 만들고 있다.

이제 그 파일을 발표, 회의 때 어떻게 보여주면 좋을까 생각을 하다가 사이트를 하나 구축하는게 좋겠단 생각이 들었다.

그래서 HTML 프레젠테이션 파일을 업로드하고 팀원들이 바로 볼 수 있는 뷰어를 만들었다. 거기에 요즘 트렌드인 글래스모피즘(Glassmorphism) 디자인을 입혔다.

🔗 서비스 URL: https://gem-deck.pages.dev
📦 GitHub: MJ-Youn/gem-deck

주요 기능

🎨 Premium UI — Glassmorphism 테마

UI가 이 프로젝트의 정체성이다. Deep Indigo & Violet 그라데이션 위에 유리 잔상 효과(Glassmorphism)가 적용된 다크 모드 인터페이스다. 단순한 파일 관리 앱이지만 열 때마다 시각적 만족감이 있다.

📂 스마트 파일 관리

드래그 앤 드롭 파일 업로드 — HTML 프레젠테이션과 관련 이미지 파일을 한 번에 올릴 수 있다
리스트 뷰 / 그리드 뷰 전환 — 파일이 많아져도 원하는 방식으로 탐색 가능
검색 기능 — 파일명으로 빠르게 찾기
파일 이름 변경 — 인라인 수정 방식, .html 확장자는 자동으로 유지

✏️ 인브라우저 HTML 편집기

대시보드에서 업로드된 HTML 파일을 직접 수정할 수 있는 Monaco 에디터가 내장돼 있다. 별도 편집 도구 없이 브라우저에서 바로 수정하고 저장할 수 있다.

🔒 보안

Google OAuth 2.0 로그인 — 구글 계정 연동
Cloudflare Turnstile — 파일 업로드, 삭제 등 중요 액션에 봇 차단 검증 적용
파일 경로 암호화 — R2에 저장되는 파일 경로를 암호화하여 직접 접근 방지

🔗 링크 공유

파일 링크를 바로 복사할 수 있다. 리스트/그리드 뷰 어디서든 복사 버튼 하나로 공유 가능하다.

기술 스택

분류	기술
Frontend	React 19, TypeScript, Vite
Styling	Tailwind CSS v4, PostCSS, Lucide Icons
HTML 편집기	Monaco Editor
Backend	Cloudflare Pages Functions (Workers)
Storage	Cloudflare R2
인증	Google OAuth 2.0, Cloudflare Turnstile

Cloudflare R2를 파일 스토리지로 사용하기 때문에 파일 서버를 별도로 운영할 필요가 없다. Pages Functions에서 R2를 직접 바인딩해서 읽고 쓴다.

프로젝트 구조

gem-deck/
├── functions/        # Cloudflare Pages Functions (Backend API)
├── src/
│   ├── components/   # 재사용 가능한 UI 컴포넌트
│   ├── pages/        # 라우트 페이지 (Login, Dashboard, Viewer)
│   ├── App.tsx       # 메인 앱 라우터
│   └── index.css     # 전역 스타일 (Tailwind v4)
├── package.json
└── wrangler.toml     # Cloudflare 설정 파일

로컬에서 실행하기

  
# 1. 클론
git clone https://github.com/MJ-Youn/gem-deck.git
cd gem-deck

# 2. 의존성 설치
npm install

# 3. 환경 변수 설정
# .env
VITE_TURNSTILE_SITE_KEY=your_site_key_here

# .dev.vars
TURNSTILE_SECRET_KEY=your_secret_key_here
ENCRYPTION_SECRET=your_encryption_secret
ADMIN_EMAIL=your_admin_email
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret
GOOGLE_CALLBACK_URL=http://localhost:8789/auth/callback

# 4. 개발 서버 실행 (Pages Functions 포함)
npm run dev

개발 서버는 http://localhost:8789에서 실행된다.

Cloudflare 배포 설정

배포 전에 Dashboard에서 두 가지를 설정해야 한다.

1. R2 Bucket Binding Settings > Functions > R2 Bucket Bindings에서 Variable name GEM_DECK으로 버킷을 연결한다.

2. Environment Variables Settings > Environment Variables에서 아래 변수들을 등록한다.

변수	설명
`ENCRYPTION_SECRET`	파일 경로 암호화 키
`ADMIN_EMAIL`	관리자 권한 이메일
`GOOGLE_CLIENT_ID`	Google OAuth Client ID
`GOOGLE_CLIENT_SECRET`	Google OAuth Client Secret
`GOOGLE_CALLBACK_URL`	OAuth 콜백 URL
`TURNSTILE_SECRET_KEY`	Cloudflare Turnstile Secret

설정 후 npm run deploy로 배포하면 끝이다.

릴리즈 이력

📋 전체 릴리즈 이력은 GitHub에서 확인할 수 있다.
👉 MJ-Youn/gem-deck Releases

HTML 프레젠테이션 파일을 팀 내에서 공유하고 관리해야 하는 상황이 있다면 한번 사용해봐도 좋다.

Project, Web

This post is licensed under CC BY 4.0 by the author.