프론트엔드 엔지니어가 브라우저 기반 완전한 OS 시뮬레이션을 포트폴리오로 구현해 부팅 시퀀스부터 윈도우 관리, 13개 이상의 인터랙티브 앱과 6개의 플레이 가능한 게임 탑재

Context

일반적인 개발자 포트폴리오는 히어로 섹션, 카드, 연락 폼으로 구성되어 있다. 이러한 구조로는 채용담당자가 스크롤을 멈추고 집중하기 어렵다.

Technical Solution

• 상태 관리를 Redux 대신 React Context로 구현: 윈도우 열림/닫힘, 설정, 테마 변경 같은 저빈도 업데이트에 최적화해 번들 크기 약 12KB gzipped 절감
• 윈도우 렌더링을 Canvas 대신 DOM 기반으로 구성: 텍스트 선택, 폼 입력, 스크린 리더 접근성을 기본 웹 표준으로 지원
• Framer Motion을 도입한 애니메이션 오케스트레이션: 부팅 시퀀스, 윈도우 전환, 데스크톱 이펙트에서 AnimatePresence를 통한 DOM 언마운트 애니메이션 구현 (약 45KB gzipped)
• 코드 스플리팅으로 각 앱 컴포넌트를 윈도우 열 때만 로드: 숨겨진 DOM 노드 제거해 초기 로딩 성능 최적화
• 1년 유효 불변 캐시 헤더와 모바일 적응형 파티클 렌더링: Edge 네트워크 배포와 함께 60fps 유지
• localStorage 기반 설정 지속성을 useEffect 훅으로 구현: 서버 렌더링 중 hydration 미스매치 방지
• Windows 11 스타일 스냅 존 기능: 윈도우를 모서리로 드래그할 때 12px 임계값으로 반투명 오버레이와 함께 좌측 절반, 우측 절반, 최대화 상태로 자동 정렬
• SEO 대응을 위한 6가지 구조화된 접근: sr-only 콘텐츠, noscript 폴백, 11개 정적 랜딩 페이지, JSON-LD 스키마 7개, 동적 사이트맵 우선순위 설정
• 접근성 구현: prefers-reduced-motion 지원, role 속성 명시, aria-label 추가, 가시적 포커스 인디케이터, 시맨틱 HTML 태그 사용

Impact

접근성 점수가 40%에서 95%로 상향.

Key Takeaway

OS 메타포는 윈도우 z-인덱스 관리, 포커스 트래핑, 상태 지속성 같은 프로덕션 앱의 실제 문제들을 포트폴리오에서 직접 해결하도록 강제한다. 제약 조건이 있을 때 시스템 설계와 성능 최적화에 대한 깊이 있는 고민이 촉발된다.