# CSS 전용 지형 생성기 Layoutit Terra

> Clean Markdown view of GeekNews topic #24164. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=24164](https://news.hada.io/topic?id=24164)
- GeekNews Markdown: [https://news.hada.io/topic/24164.md](https://news.hada.io/topic/24164.md)
- Type: GN+
- Author: [neo](https://news.hada.io/@neo)
- Published: 2025-11-06T00:32:58+09:00
- Updated: 2025-11-06T00:32:58+09:00
- Original source: [terra.layoutit.com](https://terra.layoutit.com)
- Points: 3
- Comments: 1

## Topic Body

- **CSS만으로 3D 지형을 생성**할 수 있는 웹 기반 도구로, 별도의 그래픽 엔진 없이 브라우저에서 작동  
- 사용자는 **지형 크기, 육지 비율, 지형 유형, 생물군계(biome)** 등을 조정해 다양한 형태의 지형 생성 가능  
- **카메라 회전, 기울기, 줌, 이동, 애니메이션** 등 시각적 조작 기능을 제공  
- 결과물은 **Heightmap, VOX, TXT, PNG** 형식으로 내보내거나 **Codepen에 임베드** 가능  
- **CSS 기술만으로 시각적 3D 환경을 구현**한 실험적 프로젝트로, 웹 그래픽 표현의 가능성 확장  

---

### 개요
- Layoutit Terra는 **CSS Terrain Generator**로, 브라우저 내에서 CSS만으로 지형을 생성하는 도구  
- 별도의 자바스크립트 3D 엔진이나 외부 라이브러리 없이 **순수 CSS 기반 시각화**를 구현  

### 주요 기능
- **지형 생성 제어**:  
  - world size, landmass coverage, terrain type, biome 등 다양한 매개변수 조정  
  - temperate, arctic, desert 등 **세 가지 생물군계** 미리보기 제공  
- **카메라 설정**:  
  - rotate x(45°), tilt y(60°), zoom(34%), pan x(0px), lift y(0px) 등 세부 조정 가능  
  - 애니메이션 활성화 옵션 제공  

### 내보내기 및 공유
- 생성된 지형은 **Heightmap, VOX, TXT, PNG** 형식으로 내보내기 가능  
- **Copy, Embed, Codepen 열기, 다운로드** 기능을 통해 결과물 공유 및 재활용 지원  

### 인터페이스 구성
- **Regenerate, Restart, Undo, Redo** 등 편집 제어 버튼 제공  
- **Import / Export** 기능으로 프로젝트 불러오기 및 저장 가능  
- **Minimap, Heightmap, Matrix** 보기 모드 지원  

### 시각 요소
- 다양한 **나무 이미지(tree2, tree4, tree5 등)** 를 사용해 지형 내 시각적 요소 구성  
- 각 요소는 CSS 기반으로 배치되어, 브라우저 렌더링만으로 3D 효과 구현  

### 버전 정보
- 현재 버전은 **v0.0.1**로 표시  
- 추가 설명이나 개발 로드맵은 원문에 언급 없음

## Comments



### Comment 45947

- Author: neo
- Created: 2025-11-06T00:32:59+09:00
- Points: 1

###### [Hacker News 의견](https://news.ycombinator.com/item?id=45811093) 
- JS를 끄면 지형 대신 로더만 보임. 정말 **CSS-Only**인지 궁금했음  
  JS가 있어도 대단한 성취이긴 하지만, JS 없이도 동작하길 기대했음  
  예를 들어 [이 프로젝트](https://benjaminaster.com/css-minecraft/)는 진짜로 JS 없이 작동함
  - 렌더 엔진이 순수 CSS로 되어 있는 것 같음. 정적인 맵은 CSS로 표시할 수 있지만, 지형을 수정하는 **도구**는 JS가 필요함
  - 의도는 완성 후 다운로드한 결과물이 JS 없이도 작동한다는 의미 같음  
    무언가를 만든 뒤 **Download Code** 버튼을 누르면, 그 HTML 패키지는 JS 없이도 로컬에서 렌더링됨

- 정말 **Roller Coaster Tycoon** 같은 느낌이 남. 많은 사람들이 자신이 좋아하는 시뮬레이션 게임을 떠올릴 듯함. 멋진 작업임
  - 이런 **등각 투영(isometric)** 기반의 건설 게임이 그리움. RC Tycoon, Zoo Tycoon, Sim City, TTD 등  
    현실감은 덜하지만, 모든 구조물이 완벽히 정렬되고 지도를 깔끔히 채울 수 있어서 작업이 즐거웠음  
    반면 Cities Skylines나 Planet Coaster에서는 도로나 경로를 만드는 게 늘 어색하고 답답했음
  - 나는 오히려 **OpenTTD**가 떠올랐음
  - **Populous**도 많이 생각남. 참고로 [Populous 위키 문서](https://en.wikipedia.org/wiki/Populous_(video_game))를 보면 어떤 게임인지 알 수 있음

- “CSS-only”라기엔 JS가 꽤 많음. 렌더링만 CSS로 하는 것 같음
  - CodePen에서 CSS/HTML만으로도 지형을 열어볼 수 있음. 단, **인터랙션**이나 드래그는 불가능함  
    JS는 단지 지형이나 카메라 각도를 조정하는 **UI** 역할을 하는 듯함. 그래도 놀라운 성취임
  - “CSS-Only Terrain을 생성하는 **Generator**”라고 부르는 게 더 정확할 듯함
  - HTML 태그와 이미지도 많은데, 이건 분명 CSS-only가 아님. 약간 **과장된 제목** 같음
  - JS를 끄면 작동하지 않음. 제목이 오해를 불러일으켜 실망스러움

- 정말 놀라움. **SimCity 2000**을 보는 듯한 느낌임
  - 그런데 SimCity 2000은 보통 **노란빛 갈색 타일**이 많지 않음? 3000 버전이 초록색 땅이었던 걸로 기억함

- **Populous**가 떠오름. 정말 멋짐
  - 고마움! Populous와 **Transport Tycoon**이 큰 영감이 되었음
  - 나도 같은 생각이었음. 특히 지형을 올리고 내리는 도구가 Populous를 떠올리게 했음  
    게임을 모르는 사람을 위해 [Populous 위키 링크](https://en.wikipedia.org/wiki/Populous_(video_game))를 남김

- 여러 **지형 생성기**를 써봤지만, 이게 제일 마음에 듦  
  “CSS only”라는 제약이 있긴 하지만 충분히 매력적임  
  마침 2D에서 3D 게임 개발로 전환 중이라 이런 프로젝트가 큰 도움이 됨

- 지형을 **회전**하거나 **줌인/줌아웃**할 수 있다는 걸 깨달았을 때 정말 멋졌음

- CSS-Only 아트에 관심 있는 사람이라면 **Lynn Fisher**의 작품도 추천함  
  [https://a.singlediv.com/](https://a.singlediv.com/)

- **Roller Coaster Tycoon(RCT)** 을 떠올리게 함. 아주 멋짐

- 인상적이지만, 지형 수정이나 카메라 이동 후 **지연(lag)** 이 느껴짐  
  브라우저가 GPU를 쓰는지 CPU를 쓰는지, 프레임당 밀리초를 확인할 방법이 있는지 궁금함
  - 브라우저 엔진의 **레이아웃/스타일/컴포지션** 문제로 보임  
    Safari에서는 paint에 91%, layout에 6%, style에 2%의 CPU 시간이 걸림. 상태 변경마다 약 100~200ms 정도 소요됨  
    Safari에서는 Web Inspector의 **Timelines 탭**에서 확인할 수 있고, Chrome에도 비슷한 기능이 있음