Dwitter - 자바스크립트 140자 데모 모음
(beta.dwitter.net)- 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) 와 시각 예술을 결합한 형태로, 개발자 간 창의력 경쟁을 촉진
- 단순한 코드로 복잡한 시각적 결과를 만들어내는 과정이 프로그래밍 미학으로 평가됨
- 플랫폼은 예술적 표현과 기술적 압축의 경계를 탐구하는 실험 공간으로 기능
Hacker News 의견들
- 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 베타 프론트엔드에는 “compressed” 토글이 있어서 원하는 방식으로 볼 수 있음
- 단순히 UTF-8 바이트 기준으로 제한을 두는 것도 방법임 (예: 140바이트)
- 140바이트는 160개의 ASCII 문자 정도에 해당함. 제어 문자를 제외하면 170자까지 가능함
- 이 댓글이 HN에서 본 중 가장 많은 답글을 받은 것 같음 :-)
- HHG(Hitchhiker’s Guide) 레퍼런스를 알아챈 사람으로서 반가움
- Dwitter가 이번 겨울로 10주년을 맞이함
예전 인터뷰를 찾아봤는데 흥미로움: Medium 인터뷰
진짜 마법은 커뮤니티에 있음: Discord 커뮤니티 - Dwitter에서 140자 안에 만든 제너레이티브 스케치 모음을 정리했음
- Fractals
- Chaos
- Attractors
- Spiral Art
- Fireworks
- Procedural Scenes
- Wavelets
- Top Dweets
- 당신은 분명 dwitter.net의 스타 중 한 명임. 매일 밤 doomscroll 대신 dweetscroll을 하는데, 당신의 창의성이 큰 영감을 줌
- 예전에 Dwitter의 Authotokey 에디션에서 작은 대회에 참가해 기어 애니메이션으로 우승했음
애니메이션 GIF
자세한 내용은 Autohotkey 포럼 글 참고 - Dwitter 같은 사이트를 보면 인간의 창의성에 대한 신뢰가 새로워짐
제약이 있으면 오히려 다양성이 폭발함. 시각적 착시, 짧은 문장, 예상치 못한 방향으로의 실험 등
제약은 집중을 유도하고, 실패의 비용을 낮춰 실험을 장려함
대부분의 플랫폼은 기능을 추가해 창의성을 확장하려 하지만, 오히려 복잡하게 만듦
제약이 즐거움을 만든다는 규칙을 자주 떠올림
언제 제약이 더 나은 결과를 만들었는지, 또 언제 제약이 허구처럼 느껴지는지 궁금함 - 트위터 초창기 시절 140바이트 코드 골프에 깊이 빠졌던 적이 있음
그 경험이 내 코드 사고방식을 완전히 바꿨음
작은 커뮤니티에서 바이트 절약 기법을 공유하며 Mandelbrot 렌더링부터 Sudoku 솔버까지 만들어봄
10년 후 내 회사 코드베이스에서 예전에 만든 UUID 구현체를 발견했을 때 정말 놀라웠음
관련 링크: YouTube 영상, Byte-saving techniques, UUID gist - 오늘 처음 알게 된 사실:
이게 유효한 JS 문법임.js_func`string`js_func가 tagged template literal로 호출됨
이제console.log\weeee`` 같은 걸 써볼 예정임 - Dwitter를 좋아하지만
eval사용은 막았으면 함
대신 더 많은 단축키를 추가했으면 좋겠음. 예를 들어s는Math.sign을 의미하지만, 더 확장할 수 있었음- 이런 플랫폼은 먼저 존재해야 규칙을 ‘깨는’ 방법이 생김
나중에 바꾸면 고정된 목표가 사라져 매력이 줄어듦
beta.dwitter.net은 인코딩 접근성을 개선하면서도 고정 목표를 유지함
Math.sin이나 CSS 색상 인코더 같은 예외는 실용적 이유로 추가된 것임
Dwitter 2에서는 더 많은 사전 정의 문자를 포함해 사용자가 직접 확장할 수 있게 하자는 논의도 있었음
결국 중요한 건 창의성임. 규칙을 비틀더라도 그 자체가 창의적인 행위임 - 점수 계산 방식을 UTF-8 바이트 단위로 바꾸면
eval문제를 근본적으로 해결할 수 있음
문자열 리터럴로 데이터 압축은 가능하겠지만, 전체 코드 압축은 줄어들 것임 - dwitter.net을 오래 사용해왔는데,
eval허용에 만족함. 규칙은 규칙(혹은 규칙 없음)임
- 이런 플랫폼은 먼저 존재해야 규칙을 ‘깨는’ 방법이 생김
- 관련된 예시로,
