NecroOS 구축: 공포 테마의 Windows 95 시뮬레이터와 Kiro AI

발행: 3일 전 (2025년 12월 3일 오후 12:25 GMT+9)

11 min read

원문: Dev.to

Source: Dev.to

기능

react95 컴포넌트 라이브러리를 사용한 정통 레트로 UI
여러 애플리케이션: 메모장, 지뢰찾기, 포트폴리오 매니저, 터미널, 그리고… 어두운 서프라이즈들
공포 레벨 시스템을 통한 점진적 호러 메커니즘
시각 효과: CRT 모니터 시뮬레이션, 글리치 효과, 화면 왜곡
오디오 분위기: 상호작용에 따라 강해지는 환경음 및 효과
손상된 클리피: 모두가 사랑하는 어시스턴트, 하지만 뭔가 매우 잘못됨

기술 스택

React 19
TypeScript (strict mode)
Zustand 를 이용한 상태 관리
Vite 로 초고속 개발

Kiro 로 프로젝트 정의하기

Kiro와의 첫 상호작용이 전체 프로젝트의 분위기를 잡아주었습니다. 바로 코딩에 뛰어들기보다 Kiro의 spec 시스템을 사용해 요구사항과 설계를 공식화했습니다. 이것이 게임 체인저가 되었습니다.

명세 문서

명세서에는 다음이 포함되었습니다:

각 기능에 대한 수용 기준
유지해야 할 정확성 속성
관리 가능한 단위로 나눈 구현 작업

Kiro는 이 명세들을 반복적으로 다듬으며 내가 놓친 엣지 케이스를 잡아냈습니다. 예를 들어, 윈도우 관리 시스템을 설계할 때 Kiro가 제안한 속성은 다음과 같습니다:

“윈도우는 절대 작업 표시줄과 겹치면 안 된다”
“최소화된 윈도우는 이전 위치로 복원되어야 한다”

이러한 세부 사항이 없었다면 나중에 버그가 발생했을 것입니다.

Fast‑Check 로 속성 기반 테스트

Kiro의 가장 인상적인 능력 중 하나는 fast‑check 을 활용한 속성 기반 테스트에 대한 이해였습니다. 수십 개의 개별 테스트 케이스를 작성하는 대신, Kiro는 항상 성립해야 하는 속성을 정의하도록 도와주었습니다.

import * as fc from 'fast-check';

fc.assert(
  fc.property(
    fc.array(windowArbitrary, { minLength: 1, maxLength: 10 }),
    (windows) => {
      // Property: focused window should always have highest z-index
      const focusedWindow = windows.find(w => w.isFocused);
      if (focusedWindow) {
        expect(focusedWindow.zIndex).toBeGreaterThanOrEqual(
          Math.max(...windows.map(w => w.zIndex))
        );
      }
    }
  ),
  { numRuns: 100 }
);

Kiro는 거의 모든 컴포넌트에 대해 유사한 속성 테스트를 생성했으며, 전통적인 단위 테스트로는 놓치기 쉬운 엣지 케이스를 잡아냈습니다. 글리치 시스템, 오디오 관리, 그리고 공포 레벨 오케스트레이션 모두 이 접근법의 혜택을 받았습니다.

Steering 문서

초기에 Kiro의 steering system—프로젝트 전체에 대한 컨텍스트와 규칙을 제공하는 마크다운 파일—을 발견했습니다. 나는 세 개의 steering 문서를 만들었습니다:

tech.md: 기술 스택, 공통 명령어, TypeScript 설정 정의
structure.md: 디렉터리 구조, 네이밍 규칙, import 패턴 정리
product.md: 핵심 컨셉 및 주요 기능 설명

이 문서들이 있으면 Kiro는 반복적인 프롬프트 없이도 내 프로젝트 규칙에 맞는 코드를 지속적으로 생성했습니다.

Kiro와 함께하는 개발 리듬

자연어로 기능 정의
Kiro가 적절한 TypeScript 타입, 오류 처리, 테스트를 포함한 구현을 생성
Kiro의 진단 도구로 검토 및 정제
다음 기능으로 이동

Haunting Orchestrator

공포 오케스트레이터—점진적인 호러 효과를 관리하는 복합 서비스—에 대해 Kiro가 생성한 내용:

올바른 TypeScript 인터페이스를 갖춘 핵심 서비스 클래스
모든 메서드를 커버하는 단위 테스트
상태 전이를 위한 속성 기반 테스트
에러 바운더리 통합
성능 최적화

모두 몇 번의 반복만에 완성됐으며, 수작업으로는 몇 시간이 걸렸을 부분이었습니다.

Glitch System

글리치 시스템은 다음을 수행해야 했습니다:

공포 레벨에 따라 윈도우에 시각적 왜곡 적용
오디오 효과와 연동
성능 제약 처리
브라우저 전반에 걸친 부드러운 애니메이션 제공

Kiro가 만든 컴포넌트는 다음과 같습니다:

import React, { useMemo } from 'react';
import { useStore } from '@/store';

export const GlitchableWindow: React.FC = ({
  children,
  windowId,
  intensity = 0,
}) => {
  const glitchLevel = useStore(state => state.glitchLevel);
  const effectiveIntensity = Math.min(intensity + glitchLevel * 0.1, 1);

  // Proper memoization for performance
  const glitchStyle = useMemo(() => ({
    filter: `hue-rotate(${effectiveIntensity * 180}deg) 
             contrast(${1 + effectiveIntensity * 0.5})`,
    animation: effectiveIntensity > 0.5
      ? `glitch ${2 - effectiveIntensity}s infinite`
      : 'none',
  }), [effectiveIntensity]);

  return (
    <div style={glitchStyle}>
      {children}
    </div>
  );
};

속성 테스트를 통해 강도 값이 항상 범위 내에 머물고, 여러 개의 글리치 윈도우가 동시에 동작해도 성능이 매끄럽게 유지되는 것을 검증했습니다.

Audio Bug Fix

특정 브라우저에서 오디오가 재생되지 않을 때, 나는 Kiro의 컨텍스트 시스템을 이용해 오류를 공유했습니다. Kiro는 즉시:

자동 재생 정책 제한으로 인한 문제를 식별
사용자 상호작용 감지를 포함한 견고한 오디오 서비스 생성
폴백 메커니즘 추가
포괄적인 오류 처리와 테스트 작성

이 수정은 빠른 해킹이 아니라 프로덕션 수준이었습니다.

2주간 결과

15개 이상의 React 컴포넌트, 각각에 단위 및 속성 기반 테스트 포함
95% 이상 테스트 커버리지
strict mode 에서 Zero TypeScript 오류
우아한 다운그레이드를 위한 포괄적인 오류 처리
부드러운 60 fps 애니메이션을 위한 성능 최적화
적절한 폴백을 갖춘 크로스‑브라우저 호환성

코드베이스는 유지보수가 쉽고, 문서화가 잘 되어 있으며, 전체에 걸쳐 일관된 패턴을 따릅니다. 이것은 단순한 해커톤 프로젝트가 아니라 프로덕션 품질의 코드입니다.

배운 점

구조화된 개발: spec 시스템이 복잡한 프로젝트를 정리해 줍니다
속성 기반 테스트: 전통적인 테스트가 놓치는 엣지 케이스를 포착
일관성: Steering 규칙이 프로젝트 전반에 걸친 코드 통일성을 보장
컨텍스트 인식: Kiro는 개별 파일이 아니라 전체 프로젝트를 이해합니다
베스트 프랙티스: 생성된 코드는 최신 패턴과 컨벤션을 따릅니다
창의적 방향: Kiro는 구현을 담당하고, 당신은 비전을 정의합니다

실용적인 팁

Spec부터 시작 – 요구사항 및 설계 문서에 시간을 투자
Steering 규칙을 초기에 만들기 – Kiro에게 선호도를 미리 알려 주세요
속성 기반 테스트 수용 – Kiro가 포괄적인 테스트 스위트를 생성하도록 하세요
컨텍스트를 적극 활용 – 오류, 파일 구조, 관련 코드를 공유
대화식으로 반복 – Kiro는 피드백을 통해 학습합니다

결론

Kiro와 함께 NecroOS를 구축하면서 개발 프로세스가 완전히 바뀌었습니다. 나는 복잡하고 잘 테스트된 애플리케이션을 혼자서 몇 주 안에 만들 수 있었고, 코드 품질을 희생하지 않았습니다. AI 지원과 인간 창의성의 결합은 강력합니다—Kiro가 지루한 구현 세부 사항을 담당하고, 나는 경험과 아키텍처에 집중합니다.

AI‑지원 개발에 회의적이라면 이해합니다. 나도 그랬으니까요. 하지만 Kiro는 개발자를 대체하려는 것이 아니라 우리가 만들 수 있는 범위를 확대합니다. 야심찬 프로젝트를 혼자 진행하는 개발자에게 이 확대는 “언젠가”와 “오늘 배포” 사이의 차이를 만들어 줍니다.

도전하고 싶다면 NecroOS를 사용해 보세요:
Live Demo
GitHub Repository