솔직히 말해서, 처음 이 프로젝트를 봤을 때 제 첫 반응은 “도대체 왜?”였습니다. 그리고 코드를 조금 더 들여다본 뒤에는 “와, 이건 진짜 미친 짓(칭찬)이다”라는 말밖에 나오지 않더군요.

우리는 흔히 “CSS는 프로그래밍 언어가 아니다”라는 농담을 주고받곤 합니다. 하지만 오늘 소개할 x86CSS 는 그 농담을 정면으로 반박하다 못해, 아예 CSS만으로 16비트 x86 CPU를 구현해버린 프로젝트입니다. 자바스크립트(JS) 없이 말이죠.

오늘은 이 ‘기술적 예술 작품’이 어떻게 작동하는지, 그리고 이것이 현대 웹 기술에 시사하는 바가 무엇인지 Principal Engineer의 관점에서 깊게 파헤쳐 보겠습니다.

1. 이게 정말 CSS만으로 가능한가?

결론부터 말하자면 가능합니다. 하지만 우리가 흔히 생각하는 color: red 수준의 CSS가 아닙니다. 이 프로젝트는 최신 CSS 스펙인 @function, if() 문, 그리고 Container Style Queries 를 극한까지 활용합니다.

기본적인 작동 원리는 다음과 같습니다:

• 컴파일 파이프라인: C 언어로 작성된 코드를 GCC를 통해 8086 기계어로 컴파일합니다.
• 변환: Python 스크립트가 이 기계어 바이너리를 CSS 규칙으로 변환합니다.
• 실행: 브라우저의 렌더링 엔진이 CSS 선택자(Selector) 연산을 수행하며 CPU 로직을 에뮬레이션합니다.

작성자 Lyra Rebane는 이를 위해 base_template.html 위에 Python으로 생성된 CSS 괴물(Monolith)을 얹는 방식을 택했습니다. 즉, 여러분이 보는 화면은 단순한 스타일링 결과물이 아니라, CSS 선택자 엔진이 논리 게이트(Logic Gate) 역할을 수행하여 계산된 결과값 입니다.

2. 기술적 심층 분석: 어떻게 작동하는가?

상태 관리 (State Management)

CPU라면 레지스터(AX, BX 등)와 메모리 상태를 저장해야 합니다. HTML/CSS에서 상태를 저장할 수 있는 가장 원시적이면서도 확실한 방법은 무엇일까요? 바로 Checkbox 와 Radio Button 입니다.

Hacker News의 한 유저가 지적했듯이, 이 프로젝트는 CSS의 형제 선택자(Sibling Combinator, ~ 또는 +)와 :checked 의사 클래스(Pseudo-class)를 활용하여 거대한 논리 회로를 구성합니다. 특정 체크박스가 켜지면(State 1), 그에 연관된 CSS 규칙이 발동되어 다음 상태를 결정하는 식입니다.

클럭 사이클 (The Clock)

CPU는 클럭이 필요합니다. JS가 있다면 setInterval을 쓰겠지만, CSS-only라는 제약 조건이 있습니다. 여기서 두 가지 접근법이 있습니다:

• Hover 방식: 사용자가 마우스를 움직이거나 호버링할 때마다 상태를 갱신합니다. 안정적이지만 “사용자 입력 없이 돌아가는 컴퓨터”라는 정의에는 조금 어긋납니다.
• Animation 방식 (채택됨): CSS 애니메이션과 스타일 컨테이너 쿼리를 결합하여 무한 루프를 만듭니다. 이 데모는 이 방식을 사용하여 사용자의 개입 없이도 프로그램이 돕니다.

작성자는 안정성을 위해 JS로 클럭을 보조하는 옵션을 두었지만, 원칙적으로는 JS 없이도 돌아갑니다. 이는 CSS가 튜링 완전(Turing Complete) 함을 증명하는 가장 극단적인 예시입니다.

3. 브라우저 호환성과 “새로운 IE” 논란

이 데모를 실행해보면 “최신 크로미움(Chromium) 기반 브라우저가 필요합니다”라는 메시지를 볼 수 있습니다. 파이어폭스나 사파리에서는 돌아가지 않습니다.

이유는 간단합니다. 이 프로젝트가 의존하는 CSS의 Inline if(), @function, Container Queries 등의 기능이 아직 모든 브라우저에 표준화되지 않았기 때문입니다. Hacker News의 댓글 중 인상 깊었던 반응이 있습니다:

“인터넷이 다시 Internet Explorer 시절로 회귀하는 것 같아 안타깝다.”

기술적으로 매우 흥미로운 데모지만, 특정 브라우저 엔진(Blink)에 종속된 기능들을 남용(?)하고 있다는 점에서 웹 표준 관점에서는 씁쓸한 뒷맛을 남기기도 합니다. 하지만 이건 상용 제품이 아니라 해커의 장난감이니 용서가 됩니다.

4. 보안 관점: 웃고 넘길 일이 아니다

“CSS로 CPU를 만들었다”는 건 단순히 신기한 일이 아닙니다. 보안 엔지니어 입장에서는 등골이 서늘한 이야기일 수 있습니다. 만약 CSS가 이 정도의 복잡한 연산과 상태 제어를 할 수 있다면, CSS만으로도 부채널 공격(Side-channel attack) 이나 데이터 유출이 가능해질 수 있다는 뜻이기 때문입니다.

실제로 댓글에는 “Zero-day CSS: CVE-2026-xxxx” 같은 농담이 오가고 있습니다. 렌더링 엔진의 연산 부하를 의도적으로 높여 사용자의 방문 기록을 알아내거나, 특정 연산 시간을 측정해 데이터를 추론하는 기법들이 이론적으로 더 정교해질 수 있습니다.

5. 총평: 엔지니어링의 낭만

실용성이 있냐고요? 전혀 없습니다. 웹 어셈블리(Wasm)가 있는 시대에 CSS로 x86을 돌리는 건, 삽으로 밥을 먹는 것과 같습니다. 하지만 엔지니어링의 본질은 “가능한가?”라는 질문에 답하는 과정에 있다고 생각합니다.

이 프로젝트는 CSS 엔진이 얼마나 강력해졌는지, 그리고 우리가 매일 사용하는 브라우저가 얼마나 복잡한 괴물인지 다시 한번 상기시켜 줍니다. 주니어 개발자가 “CSS는 너무 어려워요”라고 할 때, 이 프로젝트를 보여주세요. “그래, 누군가는 이걸로 컴퓨터도 만든단다.” 라고 말이죠.

한 줄 요약: 광기 서린 천재성이 돋보이는 프로젝트. 하지만 프로덕션 코드에 이런 CSS를 짰다가는 바로 PR 거절(Reject)입니다.