# Dwitter - 자바스크립트 140자 데모 모음 > Clean Markdown view of GeekNews topic #25721. Use the original source for factual precision when an external source URL is present. ## Metadata - GeekNews HTML: [https://news.hada.io/topic?id=25721](https://news.hada.io/topic?id=25721) - GeekNews Markdown: [https://news.hada.io/topic/25721.md](https://news.hada.io/topic/25721.md) - Type: GN+ - Author: [neo](https://news.hada.io/@neo) - Published: 2026-01-11T07:33:02+09:00 - Updated: 2026-01-11T07:33:02+09:00 - Original source: [beta.dwitter.net](https://beta.dwitter.net) - Points: 8 - Comments: 2 ## Summary 140자 이내의 **JavaScript 코드**로 그래픽 애니메이션을 구현하는 **Dwitter**는 코드 골프와 시각 예술이 만나는 실험적 플랫폼입니다. 각 ‘dweet’은 브라우저에서 즉시 실행되며, 사용자는 이를 리믹스하거나 해시태그로 탐색하며 창의적 변주를 이어갑니다. 짧은 코드 안에 최대한의 시각 효과를 담아내는 과정이 개발자들에게 압축과 표현의 미학을 다시 생각하게 합니다. ## Topic Body - **Dwitter**는 140자 이내의 **JavaScript 코드로 시각적 데모를 작성하고 공유**할 수 있는 플랫폼 - 각 게시물은 ‘**dweet**’이라 불리며, 코드와 함께 **즉시 실행되는 그래픽 애니메이션**을 표시 - 사용자들은 **댓글, 리믹스, 해시태그**를 통해 상호작용하며, 코드의 변형과 재창작이 활발히 이루어짐 - **hot, new, top(주/월/년/전체)** 등 다양한 정렬 기준으로 인기 콘텐츠를 탐색 - 짧은 코드로 복잡한 시각 효과를 구현하는 **창의적 프로그래밍 실험의 장** --- ### Dwitter.net 개요 - Dwitter.net은 **140자 제한의 JavaScript 코드**로 시각적 데모를 제작하는 웹 플랫폼 - 각 데모는 ‘dweet’이라 불리며, 브라우저에서 즉시 실행되는 **애니메이션 그래픽**을 생성 - 사용자는 로그인 후 새 dweet을 작성하거나 기존 작품을 **리믹스(remix)** 가능 - 사이트는 **hot, new, top(주/월/년/전체)** 등 다양한 정렬 기준으로 인기 콘텐츠를 탐색할 수 있음 - 각 dweet에는 **공유, 전체화면, 신고, 댓글** 기능이 포함되어 있음 ### 대표 dweet 사례 - **“Bubble universe colour expansion”** 은 다채로운 색상과 명확한 시각 효과로 평가받음 - 댓글에서 “A whole universe!”와 같은 반응이 달림 - **“Ants! 🐜”** 는 짧은 코드로 개미 무리를 표현한 작품으로, “god level dweetage!” 등의 찬사를 받음 - **“Trees, shadows, hills.”** 는 나무와 그림자, 언덕을 묘사한 애니메이션으로, “Amazing stuff!”라는 반응을 얻음 - **“Flight Over Destroyed City ✈️”** 는 파괴된 도시 위를 나는 비행 장면을 구현 - 댓글에서 “i love the smell of sulfur and uranium in the morning” 등 유머러스한 반응이 이어짐 - **“Solar Orbit ☀️🌘”** 는 행성 궤도를 140바이트 내에 구현해 “How did you fit a whole planetary system in 140 BYTES OF JAVASCRIPT!?!?”라는 놀라움을 유발 ### 커뮤니티 활동과 리믹스 문화 - 각 dweet는 **다른 사용자의 코드 기반으로 리믹스**될 수 있으며, 원본 링크가 명시됨 - 댓글에는 **기술적 피드백, 감상, 유머**가 혼합되어 활발한 커뮤니티 분위기를 형성 - 해시태그 기능을 통해 **#space, #galaxy, #lighting, #scene** 등 주제별 탐색이 가능 ### 기술적 특징 - 대부분의 코드가 **eval(unescape(escape`...`))** 형태로 압축되어 있으며, **140자 제한 내에서 최대한의 시각 효과**를 구현 - 코드 내에서는 **캔버스 API**를 활용한 도형, 색상, 움직임 표현이 중심 - 각 dweet는 코드 길이(예: “// 136/140”)가 명시되어 있어, **최적화와 압축 기술**이 중요한 요소로 작용 ### 창의적 프로그래밍 실험의 장 - Dwitter는 **코드 골프(code golf)** 와 **시각 예술**을 결합한 형태로, 개발자 간 **창의력 경쟁**을 촉진 - 단순한 코드로 복잡한 시각적 결과를 만들어내는 과정이 **프로그래밍 미학**으로 평가됨 - 플랫폼은 **예술적 표현과 기술적 압축의 경계**를 탐구하는 실험 공간으로 기능 ## Comments ### Comment 52040 - Author: roxie - Created: 2026-02-27T21:26:44+09:00 - Points: 1 정말 경이롭네요 ### Comment 49009 - Author: neo - Created: 2026-01-11T07:33:02+09:00 - Points: 1 ###### [Hacker News 의견들](https://news.ycombinator.com/item?id=46557489) - HN에서 이걸 보게 되어 반가움 :D 서버를 잠깐 재부팅하게 되어 미안함. 지난번 같은 일이 있었을 때 배운 교훈 덕분에 **DigitalOcean droplet** 크기를 조정했음 - 멋지긴 하지만, 문자 수로 제한을 두면 **멀티바이트 유니코드 문자**를 이용해 ASCII 문자를 압축하는 메타게임이 생김 예를 들어 `eval(unescape(escape\`<<97 wide characters>>\`.replace(/u../g,'')))` 같은 형태로 97개의 유니코드 문자를 194개의 ASCII로 복원하는 식임 차라리 Ford Prefect와 Mr Prosser의 대화처럼 “194자를 140자에 넣었다고 치고 그냥 보여주자”는 식의 합의가 있었으면 함 데모파티의 4096바이트 제한처럼, 실제로는 **Crinkler**로 12~20KB를 압축해 맞추는 것과 비슷한 논리임 - [beta.dwitter.net/top](https://beta.dwitter.net/top) 베타 프론트엔드에는 “compressed” 토글이 있어서 원하는 방식으로 볼 수 있음 - 단순히 **UTF-8 바이트 기준**으로 제한을 두는 것도 방법임 (예: 140바이트) - 140바이트는 160개의 ASCII 문자 정도에 해당함. 제어 문자를 제외하면 170자까지 가능함 - 이 댓글이 HN에서 본 중 가장 많은 답글을 받은 것 같음 :-) - HHG(Hitchhiker’s Guide) 레퍼런스를 알아챈 사람으로서 반가움 - Dwitter가 이번 겨울로 **10주년**을 맞이함 예전 인터뷰를 찾아봤는데 흥미로움: [Medium 인터뷰](https://medium.com/windows-developer/dwitter-dares-you-to-code-something-cool-in-140-characters-34fee652b71d) 진짜 마법은 **커뮤니티**에 있음: [Discord 커뮤니티](https://discord.gg/emHe6cP) - Dwitter에서 140자 안에 만든 **제너레이티브 스케치 모음**을 정리했음 - [Fractals](https://www.dwitter.net/h/fractal) - [Chaos](https://www.dwitter.net/h/chaos) - [Attractors](https://www.dwitter.net/h/attractor) - [Spiral Art](https://www.dwitter.net/h/spiral) - [Fireworks](https://www.dwitter.net/h/fireworks) - [Procedural Scenes](https://www.dwitter.net/h/scene) - [Wavelets](https://www.dwitter.net/h/wavelet) - [Top Dweets](https://www.dwitter.net/top/all) - 당신은 분명 dwitter.net의 **스타 중 한 명**임. 매일 밤 doomscroll 대신 dweetscroll을 하는데, 당신의 창의성이 큰 영감을 줌 - 예전에 Dwitter의 **Authotokey 에디션**에서 작은 대회에 참가해 기어 애니메이션으로 우승했음 [애니메이션 GIF](https://i.imgur.com/20f2gb8.gif) 자세한 내용은 [Autohotkey 포럼 글](https://www.autohotkey.com/boards/viewtopic.php?style=1&f=6&t=42047) 참고 - Dwitter 같은 사이트를 보면 인간의 **창의성에 대한 신뢰**가 새로워짐 제약이 있으면 오히려 다양성이 폭발함. 시각적 착시, 짧은 문장, 예상치 못한 방향으로의 실험 등 제약은 집중을 유도하고, 실패의 비용을 낮춰 실험을 장려함 대부분의 플랫폼은 기능을 추가해 창의성을 확장하려 하지만, 오히려 복잡하게 만듦 **제약이 즐거움을 만든다**는 규칙을 자주 떠올림 언제 제약이 더 나은 결과를 만들었는지, 또 언제 제약이 허구처럼 느껴지는지 궁금함 - 트위터 초창기 시절 **140바이트 코드 골프**에 깊이 빠졌던 적이 있음 그 경험이 내 **코드 사고방식**을 완전히 바꿨음 작은 커뮤니티에서 바이트 절약 기법을 공유하며 Mandelbrot 렌더링부터 Sudoku 솔버까지 만들어봄 10년 후 내 회사 코드베이스에서 예전에 만든 **UUID 구현체**를 발견했을 때 정말 놀라웠음 관련 링크: [YouTube 영상](https://youtu.be/JsAetmgJRss?si=AxIFySX7ktzu5GL5&t=193), [Byte-saving techniques](https://github.com/jed/140bytes/wiki/Byte-saving-techniques), [UUID gist](https://gist.github.com/jed/982883) - 오늘 처음 알게 된 사실: ```js js_func`string` ``` 이게 유효한 JS 문법임. `js_func`가 **tagged template literal**로 호출됨 이제 `console.log\`weeee\`` 같은 걸 써볼 예정임 - 몇몇 라이브러리는 이 문법으로 **JSX 유사 문법**을 빌드 과정 없이 지원함 예: [htm](https://github.com/developit/htm), [lit.dev](https://lit.dev/docs/components/rendering/) - 나도 최근 이 기능을 **코드 내 이미지 생성기**에서 사용했음 작은 SVG 데이터를 인라인 코드로 저장해 13KB짜리 샘플러를 만들었음 [예시 링크](https://gisthost.github.io/?8d537c4a3b2331e7c6c45d31f1900330) - 이 문법이 **SQL과 GraphQL 템플릿**에서 쓰이는 이유를 이제야 이해함 예: ```js sql`SELECT * FROM users WHERE id = ${userId}` gql`query GetUser { user(id: ${userId}) { name email } }` ``` - Dwitter를 좋아하지만 `eval` 사용은 막았으면 함 대신 더 많은 **단축키**를 추가했으면 좋겠음. 예를 들어 `s`는 `Math.sign`을 의미하지만, 더 확장할 수 있었음 - 이런 플랫폼은 먼저 존재해야 규칙을 ‘깨는’ 방법이 생김 나중에 바꾸면 **고정된 목표**가 사라져 매력이 줄어듦 [beta.dwitter.net](https://beta.dwitter.net/)은 인코딩 접근성을 개선하면서도 고정 목표를 유지함 Math.sin이나 CSS 색상 인코더 같은 예외는 실용적 이유로 추가된 것임 Dwitter 2에서는 더 많은 **사전 정의 문자**를 포함해 사용자가 직접 확장할 수 있게 하자는 논의도 있었음 결국 중요한 건 **창의성**임. 규칙을 비틀더라도 그 자체가 창의적인 행위임 - 점수 계산 방식을 **UTF-8 바이트 단위**로 바꾸면 `eval` 문제를 근본적으로 해결할 수 있음 문자열 리터럴로 데이터 압축은 가능하겠지만, 전체 코드 압축은 줄어들 것임 - dwitter.net을 오래 사용해왔는데, `eval` 허용에 만족함. 규칙은 규칙(혹은 규칙 없음)임 - 관련된 예시로, - [Show HN: A Stargate in 140 chars of JavaScript](https://news.ycombinator.com/item?id=25088683) (2020년 11월) - [Dwitter – A social network for short JavaScript demos](https://news.ycombinator.com/item?id=13700698) (2017년 2월)