Λ-2D: 프로그래밍 언어로서의 드로잉 탐구

 (media.mit.edu)
1P by GN⁺ | ★ favorite | 댓글 1개
  • λ-2D는 그림 자체를 코드로 삼는 언어 실험으로, 텍스트 언어가 다루기 어려운 시각적 표현과 프로그램의 미적 형태를 함께 겨냥함
  • 언어의 뼈대는 람다 계산법이며, 정해진 실행 순서보다 평가에 가까운 구조가 그림을 바라보는 방식과 닮았다는 점에서 출발함
  • 손으로 그리기 쉬우면서도 기계가 해석할 수 있도록 격자 기반 기호와 와이어를 사용해 데이터 흐름을 표현함
  • 순수 람다 계산만으로는 사용성이 낮아 숫자, 수학 연산자, 프레임, 슬라이더 같은 문법적 설탕과 상호작용 요소가 추가됨
  • 현재 구현은 λ-2D 프로그램을 JavaScript 단일 표현식으로 변환해 실행하며, 아직 회로도처럼 보이는 한계와 학습·스캔 난제가 남아 있음

그림으로 코딩하는 언어 실험

  • λ-2D는 “그림을 통해 코딩할 수 있는가”라는 질문에서 출발한 비언어적 프로그래밍 언어 실험임
  • 텍스트가 아닌 방식의 언어는 이미 여러 갈래가 있음
  • 설계 목표는 세 가지로 압축됨
    • 프로그램이 그려진다는 사실을 활용해 텍스트 기반 언어로는 실현하기 어려운 기능을 넣음
    • 명령 수가 너무 적어 단순한 프로그램도 어렵거나, 너무 많아 미니멀하지 않고 컴퓨터 비전 처리가 어려워지는 상황을 피함
    • 프로그램 자체가 시각적으로 매력적이라 액자에 넣어 걸고 싶을 정도의 드로잉이 되도록 함

람다 계산법과 격자 기반 표현

  • λ-2D는 명령형·저수준 방식 대신 람다 계산법을 언어의 기반으로 삼음
  • 람다 계산법은 “실행”보다 “평가”에 가깝고, 그림을 볼 때 시선이 특정 순서 없이 점·선·형태·구성을 따라가는 방식과 맞닿아 있음
  • 초기 구조는 격자 기반 시스템임
    • 사용자는 여러 격자를 가로지르는 연속선을 그릴 수 있음
    • 각 격자는 최종적으로 유한한 기호 집합 중 하나로 해석됨
    • 사람에게는 그리기 쉽고, 컴퓨터에게는 파싱하기 쉬운 절충안임

함수 기호와 와이어의 데이터 흐름

  • 람다 계산법의 기본 명령은 두 가지뿐임
    • 함수 적용
    • 함수 정의
  • λ-2D는 함수 적용을 컵 모양 기호로, 함수 정의를 그리스 문자 λ로 표현함
  • 기본 람다 계산법처럼 함수는 항상 하나의 인자를 받고 하나의 출력을 생성함
  • 여러 인자를 다루려면 여러 함수를 연결하는 커링(currying) 방식을 사용함
  • 기호 사이의 와이어는 데이터가 흐르는 통로 역할을 함
  • 이 단계의 언어는 기술적으로 튜링 완전하지만 실제 사용은 매우 번거로워, 숫자와 수학 연산자 같은 추가 기호가 들어감
    • 이 추가 기호들은 문법적 설탕임
    • 원하면 Church numeral 같은 순수 람다 계산 구조만 사용할 수도 있음

프레임, 드로잉 데이터, 슬라이더

  • λ-2D는 Scratch에서 스프라이트를 같은 편집기에서 그려 바로 사용하는 경험을 더 자연스럽게 확장하려 함
  • 프레임은 캔버스의 특정 영역을 와이어로 둘러싸고 왼쪽 위에 표시 기호를 두는 방식임
    • 영역 안의 낙서는 데이터로 사용할 수 있음
    • 수학 함수의 모양을 직접 스케치해 애니메이션 등에 활용 가능함
    • 방정식을 직접 찾는 별도 단계 없이 형태를 데이터로 다룸
  • 런타임에 드래그할 수 있는 슬라이더도 도입됨
    • 프로그램을 매개변수 방식으로 제어하는 용도임
    • 향후 다른 GUI 요소도 고려됨

편집기와 5×5 기호

  • 초기 아이디어는 점이 찍힌 노트에 손으로 그린 예제 프로그램에서 출발함
  • 종이 위 프로그램을 스캔하는 컴퓨터 비전 부분이 준비되지 않아, 먼저 디지털로 프로그램을 그릴 수 있는 간단한 편집기를 만들었음
  • 각 기호는 5×5 픽셀로 만들어져 격자 캔버스에 찍기 쉬움
  • 사용자는 연필 도구처럼 자유 손그림도 그릴 수 있음
  • 임시 수단으로 시작한 편집기는 점차 여러 기능을 갖춘 편집기에 가까워짐

순수 함수형 언어에서의 출력 문제

  • λ-2D는 순수 함수형이고 상태가 없기 때문에 일반적인 print 문을 구현하기 어려움
  • 출력은 상태 변경이며, 특정 순서로 출력되기를 기대하려면 표현식 평가 순서도 가정해야 함
  • 해결 방식은 “출력”을 함수형으로 다시 정의하는 것임
    • 빈 캔버스를 함수에 넘김
    • 텍스트나 원하는 낙서처럼 보이도록 픽셀이 바뀐 새 캔버스를 돌려받음
  • 문자열과 문자 대신 캔버스와 픽셀을 중심에 둔 언어로 설계됨

JavaScript 변환과 실행 시각화

  • 기본 파서는 λ-2D 프로그램 전체를 동등한 JavaScript 표현식으로 변환함
  • 결과 JavaScript는 괄호가 매우 많은 단일 거대 표현식이며, 비효율적이지만 동작함
  • 현재 파서는 JavaScript를 출력하고 브라우저의 JavaScript 엔진이 실행을 맡기 때문에 실제 실행 과정을 시각화하기는 어려움
  • 대신 파싱 과정은 쉽게 시각화할 수 있으며, 트리 워크 인터프리터가 프로그램을 실행할 때 지나가는 경로와 비슷하게 보일 수 있음
  • 파싱 애니메이션에 기호별 소리를 붙이면 프로그램 실행을 노래처럼 “들을” 수 있음
    • 결과는 8비트 시대의 이상한 컴퓨터 게임 같은 소리에 가까움
    • 온라인 데모의 Menu > Program > Animated Run에서 확인할 수 있음

남은 한계와 다음 단계

  • λ-2D는 원래 펜과 종이로 프로그램을 그리고 증강현실로 상호작용 피드백을 받는 더 큰 연구의 일부로 시작함
  • 프로젝트가 점점 흥미로워지면서 독립 프로젝트가 됨
  • 초기 목표를 완전히 충족하지는 못함
    • 프로그램이 드로잉이라기보다 회로도처럼 보이는 경향이 있음
    • 일반 사람이 배우기 쉬울지 확신하기 어려움
    • 컴퓨터 비전 시스템이 오류 없이 스캔하기도 쉽지 않을 수 있음
  • λ-2D를 더 다듬은 뒤, 드로잉을 계산으로 다루는 시스템에 통합할 수 있는 다른 프로그래밍 언어들도 설계할 계획임
  • λ-2D 베타 버전은 온라인에서 사용해볼 수 있으며, 파서와 편집기 소스 코드는 곧 GitHub에 공개될 예정임

함께 보면 좋은 글 β

GN⁺   [-]
Hacker News 의견들

  • 이런 게 마음에 든다면 자동화 프로젝트 엔지니어 일도 재미있거나 최소한 익숙하게 느껴질 수 있음
    기능 블록 다이어그램(FBD)은 꽤 비슷해서, 기능 블록들이 선으로 연결되고 연산 순서는 블록 순서로 정의됨. 블록 자체는 엔진의 내장 함수 같을 수도 있고, 합성 블록일 수도 있음. 다이어그램은 제어 주기마다 한 번 실행되며, 보통 점프 블록이 없으면 입력 변경 여부와 무관하게 각 블록이 제어 주기마다 정확히 한 번 실행됨
    양조장부터 석유화학 플랜트까지의 제어 로직이 이런 식으로 구현됨. FBD 기반 제어 시스템의 UI 쪽에서 일해서 이런 것들을 매일 접함

    • PLC 같은 것, 혹은 비슷한 걸 말하는 건가?

  • BitGrid[1]와 비슷하지만 같지는 않음. FPGA를 극단적으로 단순화한 형태로, 비트들이 격자 위를 병렬로 행진하는 모습을 상상함
    이 아이디어는 엄청난 실용성, 즉 대중을 위한 페타플롭스가 될 수도 있고 아닐 수도 있는데, 결국 ASIC에서 DFF 하나가 얼마나 에너지를 먹느냐에 달려 있음. 오래도록 찾고 있는 숫자는 정적 전력과 비트 하나를 로드하는 에너지임
    프로그래밍 모델도 문제임. 아무도 격자 위에 논리를 직접 배치하고 싶어 하지 않고, 다들 최대한 빨리 추상화하려 함. 그 부분을 해낼 만큼 집중력이 충분하지 않음
    이걸 탐색하다가 Von Neumann 셀룰러 오토마톤[2]과 Nobili 셀룰러 오토마타[3]를 발견했는데, 수십 년 동안 비슷한 아이디어에 관심이 있었는데도 처음 봄. 컴퓨터과학의 이 영역은 발견 가능성이 너무 낮아서 답답함
    둘 다 같은 터무니없는 기반을 공유함. FSA 집합이 무한 크기의 셀 공간을 정의하고, 모든 FSA는 상태 전이 함수 또는 규칙 집합이 동일함. 바로 그 “단순화” 하나 때문에 코드 골프 영역으로 밀려나는 느낌임
    [1] https://github.com/mikewarot/Bitgrid
    [2] https://en.wikipedia.org/wiki/Von_Neumann_cellular_automaton
    [3] https://en.wikipedia.org/wiki/Nobili_cellular_automata
    혹시 BitGrid 아이디어를 이어서 해보고 싶은 사람이 있다면 고맙겠음

  • “기술적으로 이 시점에서 언어는 튜링 완전하지만, 사용하기 극도로 고통스러워서 내 설계 규칙 #2를 위반한다”는 부분에서, 내 Lambda Diagrams[1]는 1단계에서 멈췄음
    그 페이지 하단에는 내가 아는 다른 그래픽 람다 계산 표기들이 모두 링크되어 있고, 방금 이것도 추가함
    [1] https://tromp.github.io/cl/diagrams.html

    • 이 사이트에 흥미로울 만한 것으로, Y 조합자를 Lambda Diagram으로 그린 것: https://tromp.github.io/img/cl/Y.logo.gif
    • 그런데 Firefox 내장 번역 기능이 그 페이지를 그리스어에서 번역할지 물어봄
      이제 브라우저가 “나한텐 전부 그리스어야!”라고 말하게 만든 언어라고 주장할 수 있으니 꽤 멋진 성과라고 봄
    • 읽는 것도 극도로 힘듦. 픽셀 폰트와 선화는 고풍스럽지만, 글자를 읽거나 선 모양을 구분하려고 눈을 찌푸려야 한다면 인체공학적이지 않음
      고해상도 디스플레이가 등장한 90년대에 그런 것들은 이미 뒤로 남겨뒀음
    • 내 눈에는 수메르 설형문자처럼 보여서 멋짐
    • Alligator Eggs를 빠뜨린 것 같음
      https://worrydream.com/AlligatorEggs/

  • 이런 것들은 LabVIEW에서도 해봤고, 어디까지 나아가기가 어렵다는 걸 알 수 있음. 소리/음악 생성 프로그램에서도 해왔고, Max [max]가 그 원조 격임
    뭔가를 만들 수는 있지만 금방 지저분해짐. 보기 좋냐고 하면 아니라고 봄
    [max] https://en.wikipedia.org/wiki/Max_(software)

    • Max/MSP와 Pure Data의 시각적 선/노드 패러다임은 꽤 타당하다고 봄. 전자음악 하드웨어의 “한 박스를 다른 박스에 꽂기” 인터페이스 위에 세워져 있고, 전자회로 배치를 반영할 수도 있기 때문임
      복잡한 신호 흐름은 정적인 텍스트 블록보다 시각적 배치, 특히 실시간 수치가 애니메이션으로 표시되는 다이어그램에서 훨씬 따라가기 쉬움
      최근 Max/MSP에는 mc도 있어서 여러 동일 신호에 대해 별도 선/노드를 만들 필요 없는 다중 채널 연결을 제공하고, ~gen과 JavaScript로 텍스트 기반 프로그래밍 노드도 가능함
    • 이 목록에는 Simulink도 들어가야 하지 않을까?
      이런 “블록 프로그래밍 언어”는 블랙박스화로 추상화하고, 박스 안의 박스를 만드는 방식이라 유망해 보임. 구현이 나쁜 건지, 사용을 못 하는 건지, 아니면 패러다임 자체가 안 되는 건지 궁금함
      고려할 점은 이런 것들이 보통 프로그래밍과 추상화를 모르는 사람들이 쓴다는 점임. 프로그래밍을 잘하는 사람이면 지저분하게 만들지 않을 수도 있지만, 그러면 그냥 코드를 쓰면 되니 애매함
      LabVIEW는 끔찍하다는 데 동의함. 이 문제만이 아니라 업데이트가 다 깨뜨리고, 라이선스도 그렇고, 그냥 골칫거리임
    • 사고방식이 다를 뿐, 깔끔하고 읽기 좋은 LabVIEW 코드도 작성할 수 있음
      전문 LabVIEW 개발자들의 작은 커뮤니티가 있었고, 대체로 매우 읽기 좋고 좋은 코드를 썼음. 대부분에게 익숙한 방식과는 다르지만 좋았음
      다만 몇 년 전에 그 세계를 떠났음. 뭘 할 수 있든 LabVIEW는 결국 죽을 거라는 조짐이 분명했기 때문임

  • 약 10년 전 페트리 넷을 처음 들은 뒤로 그래픽 형식 명세에 관심이 있었음
    무서운 수학 표기와 언어 대신 그래픽 표현이 있으면 엔지니어들이 형식 기법을 더 잘 활용할 것 같다고 늘 느꼈음. 안타깝게도 다른 엔지니어들에게 페트리 넷을 보여줄 때마다 거의 즉시 흥미를 잃었음
    University of York에서 박사과정을 포기하기 전에는 RoboChart와 RoboSim[1]이라는 걸 다뤘는데, 실제로는 더 접근하기 쉬울 수도 있다고 봄. 다만 로보틱스 의미론에 꽤 묶여 있음. 개인 프로젝트로는 RoboSim을 네트워크와 서버 세계에 좀 더 유용하게 맞추고 확장하려고 해왔음
    [1] https://robostar.cs.york.ac.uk/robotool/

  • 이거 정말 마음에 듦. 특히 JavaScript로 구현됐다는 점이 더 좋음
    순수주의자들은 침대나 무덤에서 뒤집히겠지만, 적어도 시각화와 오디오 후속 단계가 분명 쉬워졌을 것임. 비주얼은 끝내주고, 다음 단계는 기존 프로그램의 상위 구조를 어떻게든 이 형식으로 번역하는 것처럼 보임. Dijkstra 알고리즘이나 인공신경망 역전파 알고리즘을 벽에 걸어두는 데 돈을 낼 괴짜들이 꽤 있을 듯함
    재미있었던 부분은, 언어가 너무 순수 함수형이고 완전히 상태가 없어서 print 문을 구현할 수 없다는 내용임. 출력은 상태를 바꾸는 일이고, 특정 순서로 출력되길 기대하는 것은 표현식들이 어떤 순서로 평가된다고 가정하는 일이기 때문임
    이건 그냥 “명령형이 아니다”라는 말 아닌가? 그래도 상태를 어떻게 인코딩할지는 궁금함. 변수, 예를 들어 아이콘+색을 도입하고 개별 문장을 한 축 또는 양축에 따라 정렬할 수 있을지도 모름

  • “비언어적 프로그래밍 언어 영역은 탐구되지 않은 것이 아니다”
    두 번째 문장부터 공격적인 삼중 부정으로 시작함

    • 그리고 Scratch도 있지 않나?

  • 1987년의 Wireworld가 떠오름. 당연히 Wikipedia 문서도 있음 [1]
    Wireworld로 구현한 8비트 카운터를 본 적이 있는데 꽤 대단했음. 다만 이건 좀 더 간결해 보임
    [1]: https://en.wikipedia.org/wiki/Wireworld

    • Zachtronics가 KOHCTPYKTOP에서 다룬 방식이 어쩐지 훨씬 더 마음에 듦
      다만 지금은 플레이하기 어렵다. 웹페이지[1]와 Steam 버전이 Flash에 의존했고, 서드파티 Flash 재구현을 만져야 하기 때문임
      그래도 반도체 동작 구현은 Wireworld보다 훨씬 낫다고 봄
      [1] https://www.zachtronics.com/kohctpyktop-engineer-of-the-peop...

  • 온라인 데모 직접 링크: https://l-2d.glitch.me/

    • 핵심을 너무 깊이 묻어뒀네

  • 내가 찾은 다른 매우 시각적인 프로그래밍 환경/언어들임. 선으로 노드를 연결하는 다른 시각적 프로그래밍과는 다름
    다르게 분류할 수는 있겠지만 뭐라고 부를지는 모르겠음
    Piet https://www.dangermouse.net/esoteric/piet.html
    Turnstyle https://jaspervdj.be/turnstyle/ https://github.com/jaspervdj/turnstyle
    Markovjunior https://github.com/mxgmn/MarkovJunior
    Cellpond https://cellpond.cool/ https://github.com/TodePond/CellPond https://www.youtube.com/watch?v=xvlsJ3FqNYU
    Imagegram https://zaratustra.itch.io/imagegram
    Color Code http://colorcode.bananabanana.me/ https://www.youtube.com/watch?v=5M5hy9xsqKc Color Code 2 http://colorcode2.bananabanana.me/ https://www.youtube.com/watch?v=tTvvX4sjZWw Splaty Code http://splatycode.bananabanana.me/ https://www.youtube.com/watch?v=gd_e85lAKOs (Muril Polese 제작 https://github.com/murilopolese/ http://gallery.bananabanana.me/)
    Alchemy Online https://maxbittker.github.io/alchemy-online/ https://github.com/MaxBittker/alchemy-online

답변달기