# Skapa - IKEA 매뉴얼 처럼 보이는 앱 만들기

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

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=19951](https://news.hada.io/topic?id=19951)
- GeekNews Markdown: [https://news.hada.io/topic/19951.md](https://news.hada.io/topic/19951.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2025-03-25T11:31:23+09:00
- Updated: 2025-03-25T11:31:23+09:00
- Original source: [nmattia.com](https://nmattia.com/posts/2025-03-24-skapa-intro/)
- Points: 14
- Comments: 0

## Summary

Skapa는 IKEA Skadis 페그보드에 맞는 커스텀 상자 모델을 생성하고 3D 프린터로 출력할 수 있는 웹앱으로, 클라이언트 사이드에서 완전히 실행되며 GitHub에 코드가 공개되어 있습니다. 이 앱은 IKEA 설명서 느낌을 주기 위해 블랙 앤 화이트 컬러와 굵은 글자체를 사용하며, 정사투영 방식을 채택하고 있습니다. 모델 생성에는 manifold 라이브러리를, 렌더링에는 Three.js를 사용하여 웹에서 3D 모델을 효과적으로 렌더링합니다.

## Topic Body

- **Skapa**는 IKEA Skadis 페그보드에 맞는 커스텀 상자 모델을 생성해서 다운로드후 3D 프린터로 출력하는 용도의 웹앱  
- 완전 클라이언트 사이드에서 실행되며 GitHub에 코드 공개  
- 앱 자체가 **IKEA 설명서 느낌이 나도록 디자인**   
  - 블랙 앤 화이트 컬러, 굵은 글자체 사용  
  - (고소를 피하기 위해) IKEA의 "Sans" 글꼴 대신 "Kanit" 글꼴 사용  
- IKEA는 원근법(Perspective)을 사용하지만 **정사투영(orthographic projection)** 방식을 사용하며, 버튼 및 기능을 최소화함   
- 모델을 드래그하면 수직 회전하며, 클릭 시 모델이 180도 회전  
- **모델 생성**은 [manifold](https://github.com/elalish/manifold) 라이브러리 사용  
  - C++로 작성된 라이브러리를 Wasm으로 변환해 브라우저에서 실행  
  - 클라이언트 사이드에서 100% 실행 가능  
- **렌더링**은 Three.js 사용하여 → 웹에서 3D 모델 렌더링  
  - 기본 Three.js의 outline 효과가 부족하여 커스텀 셰이더 사용  
- [Skapa - GitHub Repo](https://github.com/nmattia/skapa)  
- [Parametric IKEA Skadis Boxes on Printables](https://www.printables.com/model/1133217-parametric-ikea-skadis-boxes-skadis-pegboard)

## Comments



_No public comments on this page._