# 스페이스 인베이더 그리기 방법 > Clean Markdown view of GeekNews topic #22625. Use the original source for factual precision when an external source URL is present. ## Metadata - GeekNews HTML: [https://news.hada.io/topic?id=22625](https://news.hada.io/topic?id=22625) - GeekNews Markdown: [https://news.hada.io/topic/22625.md](https://news.hada.io/topic/22625.md) - Type: GN+ - Author: [neo](https://news.hada.io/@neo) - Published: 2025-08-20T18:34:47+09:00 - Updated: 2025-08-20T18:34:47+09:00 - Original source: [muffinman.io](https://muffinman.io/blog/invaders/) - Points: 1 - Comments: 1 ## Topic Body - **Space Invader Generator**를 소개하며, 다양한 **픽셀 아트 인베이더**를 자동으로 생성하는 원리를 설명함 - 간단한 벡터 **다각형 바디 생성**과 대칭, 임의 포인트, 미러링 등 기하학적 규칙을 활용한 구조임 - 팔, 촉수, 뿔 등 **팔다리 요소** 역시 랜덤성과 기하학적 방법으로 확장하며, 쉽고 창의적인 변형 가능성 제공함 - 벡터 형태에서 **픽셀 변환** 및 컬러 적용, 눈 추가 등으로 친숙한 게임 그래픽 완성함 - 전체 제작 과정과 **코드 구현 로직**을 공개하여, 학습자와 개발자가 직접 커스터마이즈나 실습 가능함 --- ### 개요 Space Invader Generator는 **픽셀 아트 스타일의 인베이더**를 누구나 쉽게 무작위로 만들어볼 수 있는 도구임. 이 글에서는 그 동작 원리와, 창의적 랜덤 생성 과정을 애니메이션 및 예시와 함께 설명함. 인베이더의 기하학적 구조, 벡터-픽셀 변환, 컬러 적용 등 디자인과 코딩을 결합한 접근 방식이 특징임. ### 시작 배경 - Rayven이라는 3D 렌더러 툴을 개발하다가 실제 창작 결과물을 만드는 일의 중요성을 깨달음 - 간단하고 재미있는 결과로 Space Invader처럼 **직관적이고 쉽게 인식되는 대상**을 선정함 - Vector 기반 3D 렌더링으로 여러 클래식 인베이더를 그려보고, 무작위 생성기로 확장하면 재미있을 것이라는 생각에서 제작 시작함 - 해당 제작 경험을 Creative Coding Amsterdam의 **코드 챌린지**에도 공유함 ### 코드 챌린지 - Space Invaders 코드 챌린지는 많은 **창작자와 개발자들의 관심**을 이끌었음 - 다양한 구현과 결과물을 모으는 중이며, 개발 관련 커뮤니티에서 활발히 공유되고 있음 ### 스케치에서 픽셀로 - 처음에는 종이에 손으로 **낙서 및 스케치**를 하며 인베이더 구조를 분석함 - Aseprite 툴로 **15x15 픽셀 그리드**에 여러 인베이더 형태를 디지털로 그려봄 - 공통적인 기하학적 패턴(중앙 축 대칭, 단순 다각형 바디 등)을 발견함 - 픽셀아트와 벡터 그래픽의 장점을 결합하여, 대부분 직접 그린 디자인을 자동으로 생성하는 기능 구현에 성공함 - 세부 구현 내용은 [GitHub 저장소](https://github.com/Stanko/invaders)에서 참고 가능함 ### 인베이더 생성 과정 #### 중앙 찾기 - 모든 조작의 기준점인 **중앙 포인트**를 설정함 - 촉수는 하단에 생성되어, 메인 바디는 약간 위로 배치함 - 전체 대칭을 활용하여, 한쪽만 그리고 나중에 좌우 반전하여 완성함 #### 상단과 하단 정의 - 바디 측면을 설계할 때, **상단·하단 포인트**를 랜덤으로 선택 - 대칭 축에 따라 양쪽 형태가 동일하게 유지됨 #### 왼쪽 측면 그리기 - 바디 왼편에 **1~5개 포인트**를 무작위로 배치 - 단순 볼록 다각형에서 자유롭게 변형하여 다양한 결과 생성 - 라인 중첩 현상은 픽셀화 과정에서 자연스럽게 보정됨 #### 오른쪽 반사 - 왼쪽 정점 데이터를 사용해, 자동으로 **우측 반사** 생성 #### 바디 다각형 연결 - 포인트들을 연결해 **벡터 다각형 바디** 완성 - 이 기반 위에 팔다리를 추가하면 인베이더 핵심 형태가 형성됨 ### 팔다리 추가 #### 촉수와 뿔 생성 방식 - 하단 촉수(tentacle), 상단 뿔(horn)을 각각 생성. 동일한 방법에 위치·각도만 다르게 적용함 ##### 촉수 루트 찾기 - 바디 가장 하단의 포인트를 기준으로 **왼쪽 촉수**부터 랜덤 생성 ##### 중심선 스케치 - 랜덤 포인트를 이용해 **폴리라인(중심선)** 을 만듦 - 촉수 길이·모양 다각도로 변형 가능 ##### 두께 적용 (fat line) - 중심선만으론 얇아서, **양옆에 포인트 생성**해 굵은 촉수 모양 구현 - 바디 근처일수록 굵고, 끝으로 갈수록 얇아짐 (테이퍼 효과) - 각이 급한 부분은 선폭을 줄여서 자연스러운 접촉부 표현 - 폭 조절을 위해 **easing 파라미터** 사용 ##### 촉수 완성 - 양쪽 끝점을 연결하여 **두꺼운 촉수** 완성 ##### 다수 촉수 및 뿔 확장 - 같은 방식으로 좌우대칭, 중앙 촉수, 상단 뿔 등 확장 가능 - 중앙 촉수의 경우, 이미 그려진 측면 촉수와 충돌을 피하도록 조기 종료 - 뿔은 공간이 겹치지 않게 각도 범위를 좁히고 좌우로 배치 ### 벡터에서 픽셀로 변환 #### 바디 픽셀화 - **각 픽셀 중앙이 벡터 다각형 내부에 있는지** 여부로 바디 픽셀 지정 - 정확도보단 간단함과 실행 속도를 우선함 #### 팔다리 픽셀화 - 촉수와 뿔은 얇아서 중앙이 내부에 있지 않은 경우가 많음 - **포인트와 인접한 픽셀 중심까지 거리**를 확인하여 픽셀 할당 - mid-line 세분화(line splitting)로 촉수 자연스러움 보완 가능 ### 눈 추가 - 여러 **미리 준비된 눈 세트** 중 랜덤 선택 - 바디 중앙 부근에 위치시키고, 바깥쪽엔 범퍼 픽셀로 padding 적용 - 겹치는 픽셀은 자동으로 비워서 구멍처럼 표현 ### 컬러 적용 #### 컬러 생성 로직 - [OKLCH 컬러 스페이스](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch) 사용 - HSL 대비 일정한 밝기(lightness) 유지, 다양한 생동감 있는 컬러 배색 가능 - 밝기 하나로 고정, 나머지 두 파라미터를 랜덤으로 지정하여 다양한 변형 실현 - 연속성, 시각적 일관성 있는 인베이더 인상 제공 ##### CSS 변형 활용 - CSS 변수로 컬러 조절 가능 - UI 요소 대비, 디버그 모드 등 각 상황에 맞춰 명도·채도 변화 적용 ### 애니메이션 구현 - 원작 게임처럼 **2프레임의 단순 애니메이션**으로 촉수, 뿔, 눈에 움직임 부여 - 팔다리 mid-line을 복제 후 무작위로 shift하여 변형된 프레임 생성 - 눈 역시 한 픽셀 이동시켜 생동감 향상 ### 크기 조정 - **그리드 크기**를 키우면 인베이더가 점점 더 섬세·복잡해짐 - 너무 크면 벡터의추상이 강조되어 본래의 인베이더 느낌이 줄어듦 - 31x31 픽셀까지 제한, 숨겨진 옵션으로 최대 51x51까지 가능 ### 결론 - 무한히 다양한 **컬러풀 인베이더**를 자동 생성하는 제너레이터 완성 - 제작 및 포스트 과정에서 배움, 재미, 창작의 자유로움 실현 - 코드와 원리가 모두 공개되어 **실습, 실험, 커스터마이즈**에 용이함 ### 제작 후기 - 포스트 내 JavaScript 코드로 학습·참고 용이하게 비축함 - **Anime.js 및 여러 외부 의존성** 활용해 애니메이션 설계, TypeScript로 구현 - 별도 디버그 모드 및 step 옵션으로 생성 과정 직접 탐색 가능 ### 보너스 - 로프 그리기 포스트 - SVG와 자바스크립트로 **로프(rope) 모양**을 그리는 이전 인터랙티브 포스트도 참고할 만함 ## Comments ### Comment 42710 - Author: neo - Created: 2025-08-20T18:34:48+09:00 - Points: 1 ###### [Hacker News 의견](https://news.ycombinator.com/item?id=44956915) * 나도 space invader 생성기를 만들어 봄 [실행 버전](https://abetusk.github.io/iao/vadfad_1gen/)이 있고, [소스코드](https://github.com/abetusk/iao/tree/main/vadfad_1gen)도 공개함 Jared Tarbell에게서 영감 얻음 결과물이 생각보다 쉽게 좋아짐을 경험함 핵심은 눈, 양측 대칭, 그리고 작은 사각형 내에 무작위 픽셀이었음 * Jared Tarbell에게 영감을 받았다는 의견, 나 역시 컴퓨터를 처음 만지던 시절에 그의 작품들이 큰 의미였음 [levitated.net](http://levitated.net)와 이후의 [complexification.net](http://complexification.net)도 인터넷 초창기의 보석 같은 사이트였음 아쉽게도 Flash(Levitated)와 Java(Complexification) 지원이 중단되어 예제 대부분이 동작하지 않음 그래도 Complexification쪽은 Processing .pde 소스를 [Processing 에디터](https://hello.processing.org/editor/#editor)에 붙여넣으면 실행 가능함 * UI와 무작위 색상 팔레트 모두 마음에 듬 정말 멋진 결과물임 * 이 글은 모바일에서 읽으면서 느꼈던 최고의 경험 중 하나였음 * 스크롤을 내릴 때마다 캔버스가 따라 올라오던 그 작은 기쁨, 정말 인상적이었음 * 결과물이 정말 좋아서 놀랐음 [muffinman.io/invaders](https://muffinman.io/invaders/)에서 확인 가능함 본문만 보고 기대했던 것 이상임 그리고 오늘 [oklch](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch)에 대해 알게 됨 * 직접 실험해 보니 결과물이 생각보다 잘 나와서 나도 놀랐었음 다듬고 UI를 추가하니 훨씬 괜찮아졌다고 느낌 OKLCH는 정말 큰 업그레이드임 코드로 색상을 다루는 게 어려웠는데, 이게 확실히 많이 편해짐 나 자신은 [HSLuv](https://www.hsluv.org/)도 좋아하지만 아쉽게도 브라우저에서 네이티브 지원을 안 하고 있음 * 재밌음 역설적으로 행성(지구)를 invader를 만들어서 구하는 느낌, 바로 brute force AI 없이도 즐거운 해커식 방식임 이 프로젝트는 충분히 추천할 만함 * 고마움, AI가 이런 프로젝트의 재미를 다 빼앗아가는 느낌임 창작 과정의 마법은 결국 그런 수작업 자체에 있는 것임 * 이미지를 상단에 고정해서 우리가 스크롤할 때 무슨 얘기를 하는지 계속 보여주는 게 정말 멋짐 평소엔 스크롤에 따라 페이지가 화려하게 바뀌는 걸 별로 안 좋아하는 편이지만 이 구성은 예외적임 * 멋짐 전 세계에서 space invader들을 수집하고 있음 [space-invaders.com/flashinvaders](https://www.space-invaders.com/flashinvaders/)도 참고할 만함 * 관련된 것으로 2000년대 웹 레전드 levitated.net에서 만든 [levInvaderFractal (2003)](http://www.levitated.net/daily/levInvaderFractal.html)이 있음 * 정말 즐겁게 읽음 문제 해결 방식과 글 자체, 프레젠테이션까지 모든 것에 정성이 들어간 게 느껴짐 * 좋은 space invader는 위압감 있고 위험해 보여야 한다고 생각함 집게발을 흔들면 점수 추가임 * 아주 흥미로웠음 8비트 감성과 레트로 컴퓨팅에 애정 있는 사람에게 특히 더 재밌는 글임 읽으면서 문득 든 생각인데, 이건 결국 ‘모든 걸 게(크랩)로 진화시키려는 모성 자연의 욕망’이 디지털로 구현된 모습이 아닐까 함 space invader의 대칭성과 다양한 다리, 집게와 같은 구조 때문에, 결국 모든 invader는 게처럼 생김 혹시 우리가 Matrix에서 어떤 일치점을 보고 있는 건 아닐까 하는 상상도 해봄