# Show GN: web-component로 만든 interactive ASCII 3D 도넛

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

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=18705](https://news.hada.io/topic?id=18705)
- GeekNews Markdown: [https://news.hada.io/topic/18705.md](https://news.hada.io/topic/18705.md)
- Type: show
- Author: [jiiwon79](https://news.hada.io/@jiiwon79)
- Published: 2025-01-13T09:50:59+09:00
- Updated: 2025-01-13T09:50:59+09:00
- Original source: [interactive-artwork.vercel.app](https://interactive-artwork.vercel.app/solid-text)
- Points: 9
- Comments: 1

## Summary

외부 라이브러리를 사용하지 않고 vanilla typescript로 구현한 interactive한 ASCII 3D 도넛 프로젝트는 web-component를 활용하여 SPA로 개발되었습니다. 이 프로젝트는 4년 전 유튜브 영상을 보고 초기 버전을 제작한 경험을 바탕으로 새롭게 구현되었으며, 마우스 드래그 기능과 성능 최적화를 통해 자연스러운 인터랙션을 제공합니다. 프로젝트의 소스코드는 GitHub에서 확인할 수 있습니다.

## Topic Body

외부 라이브러리를 사용하지 않고, vanilla typescript로 구현한 interactive한 ASCII 3D 도넛입니다.  
  
### 사이트  
- **웹사이트**: [https://interactive-artwork.vercel.app/solid-text](https://interactive-artwork.vercel.app/solid-text)  
- **소스코드**: [https://github.com/jiwon79/interactive-artwork](https://github.com/jiwon79/interactive-artwork)  
  
### 배경  
- 4년 전, 유튜브([https://youtu.be/sW9npZVpiMI](https://youtu.be/sW9npZVpiMI))를 보고 재미있어 보여서 친구와 함께 초기버전([https://3d-to-text.netlify.app/](https://3d-to-text.netlify.app/)) 제작  
- 시간이 지나고 web-component를 기반으로 한 웹을 만들어 보고 싶어졌고, 이 아이디어가 떠올라 새롭게 구현  
- vanilla typescript로 web-component를 활용한 자체 라이브러리로 SPA 구현  
- 마우스 드래그 기능 추가, 성능 최적화를 통해 자연스러운 느낌을 받도록 개발  
  
프로젝트가 재미있다면 github star 한 번씩 부탁드립니다ㅎㅎ

## Comments



### Comment 33384

- Author: hhkkkk
- Created: 2025-01-13T22:56:31+09:00
- Points: 1

재밌네요 ㅎㅎ