드로잉.가든(Drawing.garden)

 (drawing.garden)
1P by GN⁺ | ★ favorite | 댓글 1개
  • Drawing.garden은 “gardening, but with emojis and less time”이라는 문구로 소개되는 작은 웹 프로젝트임
  • 화면에는 세로로 배치된 “click for sound!” 문구가 있어 클릭 후 소리 재생이 가능한 형태로 보임
  • 본문 대부분은 반복된 〰 문자로 채워져 시각적 패턴 자체가 주요 요소가 됨
  • 제공된 텍스트만으로는 기능 목록, 사용법, 기술 스택, 저장소, 라이선스 같은 세부 정보가 확인되지 않음
  • 확인 가능한 범위는 이모지 정원 콘셉트와 클릭 기반 소리 안내에 한정됨

페이지에서 바로 보이는 요소

  • drawing.garden은 “gardening, but with emojis and less time”이라는 설명을 가진 작은 프로젝트임
  • 본문에는 “click for sound!”가 한 글자씩 세로로 표시됨
  • 이어서 〰 문자가 많이 반복되며 화면의 주요 텍스트 패턴을 이룸

제공된 텍스트로는 알 수 없는 것

  • 구체적인 기능 설명은 포함되어 있지 않음
  • 사용 방법은 “click for sound!” 외에 추가로 제시되지 않음
  • 기술 스택, 구현 방식, 소스 코드, 라이선스, 지원 브라우저 정보는 확인되지 않음

함께 보면 좋은 글 β

GN⁺   [-]
Hacker News 의견들

  • 이건 정말 즐겁다. 여기서 흥미롭게 본 건, 대부분에게는 나처럼 차분해지는 경험인데 일부에게는 이게 왜 존재하는지, 무엇을 위한 건지 이해하지 못해서 불안을 유발하는 것 같다는 점임

    • 일반적인 예술과 비슷함. 생산성과 바로 연결되지 않는 퍼포먼스 같은 건 어떤 사람들에게 큰 도발처럼 느껴짐
      모든 것이 비용/편익 축에서 의미를 가져야 하는 건 아니고, 사람도 자연도 그보다 훨씬 복잡함
    • 불안은 아니고, HN에 올라와서 높은 추천을 받았으니 내가 뭔가 놓쳤나 궁금했을 뿐임. 먼저 웹사이트를 보고 나중에 댓글을 읽으면 이렇게 됨
    • 그런 반응은 이상함. 아름다운 공원을 보고 “끔찍해! 쓸모가 없잖아!”라고 하는 사람들과 비슷함
      풍경화를 다 태우고, 거기서 멈추지 말고 풍경 자체도 다 태우자는 식임. 목적이 아름다움, 즐거움, 사색, 작은 재미일 수도 있는데, 자신이 신경 쓰는 특정 목적에 맞지 않으면 전부 무의미하다고 보는 너무 좁은 사고방식임
    • 나는 두 번째 부류에 가까움. 불안이라기보다는 약한 거부감에 가까움
      멋지긴 한데 유용하게 할 수 있는 게 없고, 도메인 이름처럼 의미 있는 그림을 그릴 수도 없음
    • 기술적으로는 비디오 게임임. 다른 게임들은 왜 존재하겠음?

  • 내부를 보니 p5.js 스케치임. 입문 프로그래밍 수업에서 쓰는 라이브러리이기도 함
    p5.js는 창의적 코딩을 위한 JavaScript 라이브러리로, 예술가·디자이너·교육자·초보자 등 누구나 코딩에 접근하기 쉽게 만드는 데 초점을 둠. 무료 오픈소스이고, 소프트웨어와 학습 도구는 모두에게 접근 가능해야 한다는 철학을 가짐
    https://p5js.org

  • 전부 채우는 데 시간이 좀 걸렸지만 특별한 일은 일어나지 않았음. 더 발전시킨다면 벌이 꽃으로 날아가고, 거미가 거미줄을 치고, 토끼가 당근을 쫓고, 해바라기가 해를 향해 도는 식이면 좋겠음
    꽃이 바람에 흔들리는 셰이더나, 마우스 포인터가 랜덤하게 물뿌리개로 바뀌는 효과도 가능해 보임. 선인장을 누르면 “아야” 소리가 나는 것도 재미있겠음

    • 마우스 버튼을 길게 눌러 지우기가 되면 좋겠음

  • 출처는 http://benmoren.com/임

    • https://github.com/bmoren/drawing-garden
    • 저 링크를 보는 사람들을 위해 덧붙이면, 이 사람은 기술·자연·감각을 결합하는 예술가처럼 보임. 사이트에 눌러볼 만한 흥미로운 작업이 아주 많음

  • 한 칸은 항상 비워두는 건 어떨까 싶음
    멋진 프로젝트지만, 다 채우면 뭔가 일어날 거라고 기대했음

  • 모든 칸을 채우면 멋진 효과가 있음

  • 정말 멋짐. favicon도 현재 이모지로 바뀌는 걸 봤는데, 작은 디테일이 좋음

    • 맞음. HTML에서 이모지가 들어간 SVG를 favicon으로 쓰고 있는데, 이런 방식은 처음 봤음
      아주 깔끔하고 나도 써볼 수 있을 것 같음
    • 내 사이트에서도 그렇게 함. 내가 알기로는 플랫폼별 동적 이모지를 favicon으로 쓰는 거의 유일한 방법임

  • 인접한 타일이 특정 생물이 나올 확률에 영향을 주는지 궁금했음. 처음엔 생물이 없었고, 이후 개미·쥐·비둘기·거미·고슴도치가 나오다가 처음으로 호박벌과 토끼가 나왔음
    클로버가 모인 구역은 네잎클로버를 늘리는 것처럼 보였음. 코드를 보니 아닌 것 같지만, 그래도 사자가 나온 건 꽤 놀라웠음

  • 편안한 경험이긴 했지만, 왼쪽/오른쪽 클릭으로 이모지와 생물을 제어하는 사소한 코드를 쓰고 싶은 욕구가 생겼음
    클릭 횟수를 세고, 우클릭으로 감소시키고, random(i)를 덮어써서 생물과 이모지 선택을 클릭 수 기반으로 바꾸는 방식임

  • 오디오는 상호작용하는 영역에 따라 달라지지 않는 것 같음
    이미지는 순환하지만, 반복되는 이미지 한 바퀴 안에서 다시 가져올 수 없는 무작위 이미지도 줌. 거미, 개미, 고슴도치, 무당벌레, 파란 나비를 봤지만 두 번 넘게 나오지는 않았음
    의도된 패턴을 찾다가 같은 이미지 영역을 만드는 식으로 패턴을 직접 만들기 시작했음. 새 이미지가 나오면 작은 기쁨이 있었고, 너무 빨리 눌러서 지나쳐버리면 아쉬웠음
    더 이상 놀랄 게 없다고 느끼고 지루해질 때까지 만져봤는데, 그 정도면 괜찮다고 봄. 사자와 뱀이 있다는 글을 읽었지만 다시 할 만큼은 아니고, 내가 발견하지 못한 패턴이 더 있을 수 있다는 건 흥미로움

답변달기