왜 평범한 이력서를 가질까? OS를 가질 수 있다면 🚀 BDK-OS

발행: 6시간 전 (2026년 1월 31일 오후 04:06 GMT+9)

8 min read

Source: Dev.to

새해, 새로운 나 포트폴리오 챌린지 제출

This is a submission for the New Year, New You Portfolio Challenge Presented by Google AI.

나에 대하여

저는 2 + 년 이상의 산업 현장 경험을 가진 열정적인 풀스택 개발자이며, 고성능이면서 창의적인 웹 애플리케이션을 구축하는 데 깊은 애정을 가지고 있습니다. 복잡한 문제를 우아하고 인터랙티브한 디지털 경험으로 변환하는 도전이 저의 기술 여정을 이끌고 있습니다.

포트폴리오 소개

이번 포트폴리오 BDK‑OS를 통해 단순한 기술 목록을 넘어선 모습을 보여주고자 했습니다. 전문 프로필을 완전한 브라우저 기반 운영 체제로 재구성함으로써 다음을 입증합니다:

기술적 다재다능성 – 복잡한 전역 상태 관리, 터미널 로직, 게임 엔진 구현.
디자인 감각 – 유리모피즘과 네온‑레트로 UI 같은 고급 미학에 대한 헌신.
사용자 중심 혁신 – “읽기 전용” 이력서를 “인터랙티브” 경험으로 전환하여 방문자가 제 소개를 탐색하고, 코드를 실행하며, 게임까지 즐길 수 있도록 함.

새로운 도전과 최첨단 프로젝트에 기여할 기회를 항상 찾고 있습니다. 함께 멋진 무언가를 만들어 봅시다!

포트폴리오

(포트폴리오 자체가 BDK‑OS 인터랙티브 사이트입니다.)

Source: …

How I Built It

BDK‑OS를 구축하는 과정은 레트로 컴퓨팅 미학과 초현대 웹 성능을 결합하는 연습이었습니다. 제 목표는 정적인 페이지가 아니라 “살아있는” 작업 공간처럼 느껴지는 포트폴리오를 만드는 것이었습니다.

The Tech Stack

Framework – Next.js 16.1 (App Router) – 고성능 서버‑사이드 렌더링 및 정적 생성 지원.
UI/Styling – Tailwind CSS – 유틸리티‑퍼스트이며 고도로 커스터마이징 가능한 디자인 시스템.
Animations – Framer Motion – 부드러운 창 전환, 드래그 메커니즘, 그리고 “Progressbar95” 게임 엔진 구동.
Icons – Lucide React – 일관되고 미니멀한 아이콘 언어 제공.
Deployment – Docker와 멀티‑스테이지 빌드, Next.js standalone 출력으로 최적화된 프로덕션 환경.

Design Decisions

The “OS” Concept – 창 기반 데스크톱 인터페이스(BDK‑OS)를 통해 방문자가 프로젝트, 소개, 터미널 등을 마치 제 디지털 뇌를 탐험하듯 상호작용할 수 있게 함.
Glassmorphism & Neon – 강한 백드롭 블러(backdrop-blur-md), 반투명 블랙(bg-black/80), 네온 블루 포인트가 고급스럽고 프리미엄한 느낌을 연출.
Interactive Terminal – 시뮬레이션 파일 시스템(bio.txt, projects.md), 명령어 히스토리 탐색(화살표 키), 그리고 창 관리자를 통해 게임 같은 앱을 실행할 수 있는 기능 포함.

Development Process

컴포넌트‑우선 아키텍처를 따르면서 모든 열린, 최소화된, 최대화된 창의 상태를 전역적으로 관리하는 커스텀 WindowManagerContext를 구축했습니다. 이를 통해 포커스 트래킹(마지막 클릭한 창을 앞쪽으로 이동)과 원클릭 최대화와 같은 기능을 구현할 수 있었습니다.

Google AI Tools Used

이 프로젝트는 Google Antigravity(Gemini 모델 기반)의 도움을 받아 제작되었습니다. AI는 다음 영역에서 지원했습니다:

Architecture Design – 창 시스템 및 터미널 로직을 위한 전역 상태 관리 설계.
Complex Logic – “Progressbar95” 터미널 게임의 충돌 감지 및 스폰 알고리즘 구현.
Creative Assets – Gemini 이미지 생성 기능을 활용해 커스텀 BDK‑OS 파비콘 제작.
DevOps Optimization – 프로덕션용 Dockerfile 작성 및 Next.js standalone 출력을 설정해 원활한 배포 환경 구성.
SEO & Metadata – OpenGraph 태그와 전문적인 설명을 자동화해 가시성 향상.

내가 가장 자랑스러워하는 것

클래식에 새로운 생명을 불어넣기

The Progressbar95 게임 통합은 제가 가장 흥미롭게 생각하는 기능입니다.

기술적 성과 – React 컴포넌트 내부에 실시간 게임 엔진을 구축하고, Framer Motion을 사용해 고성능 애니메이션, 낙하 세그먼트, “캐처”와 떨어지는 바 사이의 충돌 감지를 구현했습니다.
이스터 에그 감성 – 클래식 OS 디자인에 대한 경의를 표하면서 재미있고 몰입감 있는 사용자 경험을 만들 수 있는 제 능력을 보여줍니다.

맞춤형 윈도우 관리 시스템

표준 레이아웃 라이브러리를 사용하는 대신, 저는 처음부터 맞춤형 윈도우 매니저를 직접 구축했습니다.

깊이와 포커스 – 활성 윈도우를 추적하고 자동으로 앞쪽으로 가져오는 동적 Z‑index 시스템으로, 실제 OS를 모방합니다.
데스크톱 워크플로우 – 드래그‑앤‑드롭 메커니즘, 작업 표시줄로 윈도우 최소화, 전체 화면 최대화 토글 등을 모두 WindowManagerContext가 지원합니다.

커맨드 라인 영혼

터미널은 단순한 정적 텍스트 박스가 아니라 제 데이터와 통합됩니다.

실제 프로젝트 데이터(projects.ts)와 이력서를 기반으로 파일 시스템 읽기를 시뮬레이션합니다.
명령어 히스토리(위/아래 화살표)와 고유 명령어(예: 다른 UI 파트를 실행하는 game)를 통해 개발자 지향 방문자에게 일관된 경험을 제공합니다.