듀얼 모드 포트폴리오 (GUI + Terminal)

발행: 1주 전 (2026년 1월 31일 오전 04:01 GMT+9)

3 분 소요

Source: Dev.to

Introduction

이 글은 Google AI가 주관하는 새해, 새로운 당신 포트폴리오 챌린지에 제출한 작품입니다.

안녕하세요, 저는 Rishon입니다! 저는 현재 풀스택 엔지니어(MERN)이며 저수준 시스템 엔지니어링을 더 배우고 있습니다. 매일 Arch Linux와 Sway WM을 사용하기 때문에 제 포트폴리오가 Arch 설정의 미학을 반영하면서도 비기술적인 방문자에게도 접근 가능하도록 만들고 싶었습니다. 목표는 정적인 스크롤 페이지가 아니라, 홈 디렉터리처럼 기능적이고 깔끔하며 빠른 사이트를 구축하는 것이었습니다.

Live Demo

https://portfolio-1027678755768.us-central1.run.app

Tech Stack

Frontend: React, TypeScript, Tailwind CSS
Backend: Node.js (Express)
AI: Google Gemini 2.0 Flash
Infrastructure: Docker, Google Cloud Run

Features

Custom Window Manager

React 기반 “Window Manager” 시스템을 구현하여 GUI와 Terminal 모드 간 전환을 처리합니다.

State Management

앱은 명령어 히스토리와 창 상태를 모드 전환 시에도 유지하여 실제 데스크톱 환경을 흉내냅니다.

AI Integration

Node.js 백엔드가 Gemini API에 대한 요청을 안전하게 프록시합니다. AI는 geminicli라는 시스템 데몬 역할을 하며, 제 이력서, 기술 스택, 향후 계획(예: 고성능 체스 엔진 구축) 등을 알고 있는 맞춤 시스템 프롬프트를 사용합니다.

Global Shortcuts

전역 키보드 리스너를 구현해 Ctrl + Space를 눌러 언제든 AI 어시스턴트를 토글할 수 있습니다.

Terminal Emulator

ls, man, clear, whoami와 같은 일반 명령어는 물론, 제가 자주 사용하는 btop 및 geminicli와 같은 커스텀 CLI 도구를 지원합니다.

AI Assistant

터미널 인터페이스 내에서 상황에 맞는 도움말과 코드 생성을 제공합니다.

Dual‑Mode Experience

그래픽 UI와 터미널 인터페이스를 원활하게 전환하여 하나의 포트폴리오 사이트에서 시각적 상호작용과 명령줄 상호작용을 모두 제공합니다.