Chrome OS 영감을 받은 포트폴리오: 아름다움과 기능성의 만남

발행: 2일 전 (2026년 1월 18일 오후 12:26 GMT+9)

7 min read

Source: Dev.to

안녕하세요! 저는 Depa Panjie이며, 7년 이상 동안 전문적으로 시스템을 부수고(그 후 고치는) 일해온 소프트웨어 품질 보증 엔지니어입니다.

Live Demo:
아래에 삽입된 미리보기는 화면 크기가 제한되어 있습니다. 드래그 가능한 창, 여러 앱, 모든 인터랙티브 기능을 포함한 전체 데스크톱 환경을 보려면 링크를 새 탭에서 열어 주세요. 포트폴리오는 가로 768 px 이상 화면에 최적화되어 있습니다.

당신이 경험하게 될 것

이것은 일반적인 포트폴리오가 아닙니다. 브라우저만으로 완전히 작동하는 Chrome OS‑스타일 데스크톱입니다:

🪟 실제 OS처럼 창을 끌어다 놓고, 최소화·최대화하기
📁 Files App – 눈부신 글라스모픽 디자인으로 내 소개를 탐색하기
🌐 Browser App – 탭이 있는 Chrome‑스타일 브라우저로 내 프로젝트 둘러보기
💻 Terminal App – 인터랙티브 CLI에서 내 기술 스택 확인하기
📄 Docs App – Google Docs‑스타일 인터페이스로 이력서 보기
✉️ Mail App – Gmail‑영감을 받은 인터페이스로 나에게 연락하기
🌓 Dark Mode – Material You 색상으로 부드러운 테마 전환
🎯 Interactive Tour – 게임 튜토리얼 같은 가이드 온보딩
📱 Smart Mobile Detection – 모바일 사용자를 위한 아름다운 차단 화면

팁: 여러 앱을 열고, 끌어다 놓으며, 다크 모드를 전환해 보세요. 이상하게도 만족감이 넘칩니다.

기술 스택

프론트엔드 매직

├── React 18 + TypeScript
├── Vite (lightning‑fast builds)
├── Pure CSS (no frameworks)
└── Lucide React (beautiful icons)

AI 슈퍼파워

├── Antigravity (AI pair programmer)
└── Gemini 3 Pro (the brain)

배포

├── Docker (multi‑stage builds)
├── Nginx (serving with style)
├── Google Cloud Run (serverless)
└── Cloud Build (auto‑deploy from GitHub)

개발 단계

1단계 – 기초

목표: 윈도우 관리 시스템 구축.
결과: z‑index 관리, 드래그 핸들러, 상태 지속성을 갖춘 React Context 기반 아키텍처.

2단계 – 앱들

다섯 개의 완전한 애플리케이션을 만들었습니다:

Files – 글래스모픽 카드
Browser – 탭 관리
Terminal – 명령 기록
Docs – 구글 스타일 툴바
Mail – 폼 검증

각 앱은 Gemini가 최적의 패턴과 모범 사례를 제안하며 제작되었습니다.

3단계 – 다듬기

문제: 다크 모드 텍스트가 읽기 어려웠습니다.
해결책: 적절한 대비 비율을 갖춘 파란색 톤의 글래스모픽 디자인을 채택하여 Files 앱의 “Who am I?” 카드가 만들어졌습니다.

4단계 – 투어 시스템

Driver.js를 이벤트 기반 패널 관리와 통합하여 패널이 자동으로 닫히는 완전한 투어 루프를 구현했습니다.

5단계 – 모바일 전략

모바일 감지를 구현하여 정중한 차단 화면을 표시하고, 큰 기기에서는 데스크톱 OS 경험을 유지합니다.

6단계 – 클라우드 배포

Dockerfile, Nginx 설정, CI/CD가 포함된 Cloud Run 설정을 제공했습니다.
워크플로우: GitHub Push → Cloud Build → Container Registry → Cloud Run → Live!

Antigravity & Gemini와 함께 작업하기

절대 피곤해하지 않음 – 즉시 모범 사례를 제시합니다.
버그를 잡음 – 발생하기 전에.
개념을 설명함 – 명확하고 간결하게.
반복함 – 생각의 속도대로.

실제 예시

제가 “Files 앱에 더 나은 다크‑모드 색상이 필요하다”고 말했을 때, Gemini는 단순히 색상만 바꾼 것이 아니라 전체 디자인 시스템을 제안했습니다:

글래스모픽 배경
적절한 대비 비율
백드롭 블러 효과
일관된 간격
접근 가능한 색상 조합

그것이 AI가 구동하는 디자인 사고입니다.

기능 하이라이트

동시에 5개의 앱 열기
창을 드래그하고, 최소화하고, 복원하고, 최대화하기
세션 중에 다크 모드 전환
가이드 투어 온보딩
Mail 앱을 통한 연락

/* Glassmorphic card style */
background: rgba(138, 180, 248, 0.08);
border: 2px solid rgba(138, 180, 248, 0.2);
backdrop-filter: blur(10px);

다크 모드에서 UI가 Chrome OS 꿈처럼 빛납니다!

추가 동작:

첫 방문 시 자동 시작
지능형 패널 닫기
전체 루프: 로그인 → 데스크톱 → 로그아웃
모바일 기기에서는 건너뜁니다
빠른 설정에서 재시작 가능
드래그 앤 드롭 위치 지정, z‑index 스태킹, 포커스 관리
최소화/최대화 애니메이션, 상태 지속성

제로 다운타임, 자동 스케일링, 기본 HTTPS — 모두 AI 지원으로 구성되었습니다.

요약

이 프로젝트는 AI가 개발자를 대체하는 것이 아니라 supercharging하고 있음을 보여줍니다. Gemini가 저를 도와준 부분은:

코드를 더 깔끔하게 작성하기
더 나은 설계 결정을 내리기
엣지 케이스를 조기에 포착하기
성능 최적화하기
전문적으로 배포하기

Chrome OS‑에서 영감을 받은 포트폴리오를 즐겨 탐색하세요!