브라우저 안에 통째로 부활한 Windows XP — 게임보이와 아이팟까지 돌아가는 포트폴리오

포트폴리오가 운영체제라고요?

개발자 포트폴리오라고 하면 보통 깔끔한 한 페이지에 경력과 프로젝트를 정리한 사이트를 떠올리죠. 그런데 이번에 소개할 mitchivin.com은 접속하는 순간 브라우저 안에 Windows XP 바탕화면이 그대로 펼쳐져요. 그 익숙한 초록 언덕 배경화면, 시작 버튼, 창을 띄우고 끌어다 옮기는 동작까지요. 게다가 그 안에서 실제로 게임보이 게임이 돌아가고, 아이팟으로 음악도 재생돼요. 단순한 추억 팔이가 아니라 프런트엔드 기술을 제대로 보여주는 쇼케이스인 셈이죠.

이런 사이트가 왜 인상적이냐면요, '나 이런 거 만들 줄 알아요'라고 말로 설명하는 대신, 사이트 자체가 곧 실력 증명이 되기 때문이에요. 면접관이 클릭 몇 번 해보면 이 사람이 복잡한 UI 상태를 다룰 줄 안다는 걸 바로 느끼거든요.

브라우저 안에 운영체제를 흉내 내려면

화면에 보이는 XP는 사실 진짜 운영체제가 아니라 전부 웹 기술(HTML·CSS·자바스크립트)로 그려낸 흉내예요. 가장 까다로운 부분은 창 관리예요. 여러 창을 동시에 띄우고, 마우스로 끌어 옮기고, 클릭한 창을 맨 앞으로 올리고(z-index 조정이라고 해요), 최소화·최대화·닫기를 처리해야 하죠. 이게 뭐냐면, 운영체제가 평소 알아서 해주던 '어떤 창이 위에 있고 지금 어떤 창이 활성 상태인지'를 개발자가 자바스크립트로 직접 관리한다는 뜻이에요.

창 하나하나의 열림·위치·크기·순서 같은 정보를 상태(state)로 들고 있다가, 그 상태가 바뀔 때마다 화면을 다시 그리는 구조로 보통 만들어요. 리액트(React) 같은 도구를 쓰면 '상태가 바뀌면 화면도 따라 바뀐다'를 비교적 깔끔하게 구현할 수 있고요. 바탕화면 아이콘, 시작 메뉴, 작업표시줄도 전부 각자의 상태를 가진 작은 부품(컴포넌트)으로 쪼개서 조립하는 식이에요.

게임보이와 아이팟은 어떻게 돌아갈까

가장 신기한 게임보이부터 볼게요. 브라우저에서 게임이 돌아간다는 건 에뮬레이터가 들어 있다는 뜻이에요. 에뮬레이터가 뭐냐면, 옛날 게임보이라는 기계의 부품(CPU, 화면, 사운드)이 하는 일을 소프트웨어로 똑같이 흉내 내는 프로그램이에요. 이런 흉내 내기는 계산량이 많아서 자바스크립트만으로는 버거울 때가 있는데, 그래서 요즘은 WebAssembly(웹어셈블리, 줄여서 WASM)를 자주 써요. C나 러스트로 짠 빠른 코드를 브라우저에서 거의 네이티브 속도로 돌릴 수 있게 해주는 기술이거든요.

아이팟은 그 상징적인 클릭 휠을 손가락으로 돌리는 느낌과 메뉴 이동, 음악 재생 목록을 웹으로 재현한 거예요. 빙글 돌리는 휠 입력을 받아 선택 항목을 위아래로 옮기고, 실제 오디오를 재생하는 식이죠. 디테일을 얼마나 살렸느냐가 완성도를 가르는 부분이에요.

업계에는 이런 흐름이 있어요

사실 '웹으로 만든 가짜 운영체제'는 하나의 장르예요. 윈도우 데스크톱을 통째로 구현한 daedalOS(dustinbrett.com)나, 90년대 윈도우를 패러디한 windows93.net, 맥OS 느낌의 포트폴리오들도 있죠. 이런 프로젝트들의 공통점은 '익숙한 인터페이스라는 향수'와 '그걸 웹으로 재현하는 기술력'을 동시에 파는 거예요. mitchivin.com은 거기에 게임보이·아이팟이라는 동작하는 미니 앱을 얹어 한 발 더 나아간 사례고요.

한국 개발자에게

취업·이직 시장에서 포트폴리오가 점점 비슷비슷해지는 요즘, 이런 접근은 강한 인상을 남겨요. 물론 모두가 운영체제를 통째로 만들 필요는 없어요. 다만 여기서 배울 점은 '내 강점을 보여줄 매개를 콘텐츠가 아니라 경험으로 설계한다'는 발상이에요. 그리고 기술적으로도 드래그·창 관리·상태 동기화·WASM 연동처럼 실무에서 통하는 근육이 골고루 단련되는 프로젝트라, 재미로 시작해도 남는 게 많고요.

한 줄로 정리하면, 이건 '포트폴리오는 읽는 게 아니라 가지고 노는 것'이라는 선언이에요. 여러분이라면 자신을 가장 잘 보여줄 인터랙티브 포트폴리오, 어떤 콘셉트로 만들어보고 싶으세요?