실전 가이드 · 3분 · 10.22

코딩 초보의 그림 앱 만들기, Suminagashi는 왜 반복해서 움직여 봐야 할까요?

loopy vibecoder

핵심 요약 (TL;DR)

물 위에 잉크를 떨어뜨리듯 브라우저에서 무늬를 만들 수 있다면 어떨까요? Suminagashi 제작자는 10월 21일 한국 시간 공개한 소개에서 Claude와 짧게 만든 프로젝트이며 아이들이 재미있게 쓰고 있다고 전했습니다.[1] 여기서 주목할 것은 제작 속도보다, 한 번 그려지는 화면과 계속 만져도 쓸 수 있는 도구의 차이입니다.

공개된 앱에서는 무엇을 확인할 수 있나요?

공개 페이지에는 잉크, 바람, 되돌리기, 새 물, 내려받기 등의 조작 항목이 있고, 크레딧에는 George Strakhov와 Claude가 함께 표시됩니다.[2] 제작자의 AI 활용 설명과 페이지 표기가 맞아떨어지는 지점입니다. 다만 이것이 코드 기여도를 독립적으로 감사한 결과는 아닙니다.

제작자는 소개에서 20분짜리 프로젝트라고 표현했습니다.[1] 그 시간은 본인의 진술이며, 처음 배우는 사람에게 같은 결과를 보장하는 일정이 아닙니다. 공개 소개가 최근이라는 사실도 앱의 최초 제작 시각을 확정해 주지는 않습니다. 이번 확인은 원문과 페이지를 읽은 범위로, 그리기 성능이나 저장 결과를 직접 시험한 사용기는 아닙니다.

왜 첫 그림 다음의 동작이 중요할까요?

제작자는 댓글에서 빠르게 움직이거나 움직임이 쌓일 때 최적화가 더 필요하다고 인정합니다.[1] 첫 화면의 아름다움만으로는 알아보기 어려운 한계입니다. 그림 도구를 만드는 사람에게는 첫 획을 그을 때뿐 아니라, 이미 여러 흔적이 남은 상태에서 다시 움직일 때의 반응도 제품의 일부가 됩니다.

이를 내 실습으로 옮기면 질문이 달라집니다. ‘무늬가 예쁜가요?’에 더해 ‘천천히 그릴 때와 빠르게 그릴 때 모두 반응하나요?’, ‘되돌린 뒤 다시 그려도 이어지나요?’를 확인하는 것입니다. 이런 질문은 원작의 성능을 평가한 결론이 아니라 직접 만들어 볼 때 쓸 점검 기준입니다.

첫 프롬프트에는 어디까지 넣으면 좋을까요?

처음부터 실제 물리 현상을 모두 재현하려 하지 않아도 좋습니다. 다음은 원작의 개발 프롬프트가 아닌 연습용 예시입니다.

“마우스로 선을 그리는 작은 웹앱을 만들어 주세요. 색 선택, 마지막 선 되돌리기, 화면 지우기만 넣어 주세요. 실제 잉크의 움직임을 정확히 재현한다고 설명하지 말고, 각 기능을 확인하는 순서를 알려 주세요.”

완성 화면을 받은 뒤에는 같은 선을 천천히, 빠르게 그려 보세요. 되돌리기를 누른 직후와 화면을 지운 직후에도 새 선을 그립니다. 화면이 멈췄다면 기기와 브라우저, 누른 순서, 문제가 생긴 장면을 함께 남겨 수정 요청에 붙이세요. ‘더 부드럽게’라는 표현보다 재현 가능한 행동이 다음 수정의 범위를 좁혀 줍니다.

내려받기는 언제 붙이면 좋을까요?

그리는 흐름이 안정된 뒤 결과를 파일로 꺼내는 기능을 추가해 보세요. 원작 페이지에도 Download 항목이 보이지만, 버튼의 존재와 실제 파일 검수는 별개입니다.[2] 여러분의 실습에서는 내려받은 파일을 다시 열어 빈 화면이 아닌지, 원하는 무늬와 배경이 남는지 확인하는 데까지 완료 조건을 이어 가시면 좋습니다.

FAQ: 짧게 만든 앱이면 검수를 생략해도 되나요?

짧게 만들었다는 설명은 사용자가 겪을 문제까지 작다는 뜻이 아닙니다. 적어도 그리기, 되돌리기, 지우기처럼 약속한 행동은 반복해 확인해 보세요. 기능을 줄이면 확인할 범위도 선명해집니다.

FAQ: 물리 시뮬레이션을 배워야 시작할 수 있나요?

단순한 선 그리기 실습과 실제 잉크 현상 재현은 다른 목표입니다. 처음에는 시각적 놀이로 범위를 정하고, 과학적으로 정확한 모형이라는 표현은 근거를 확인한 뒤 쓰는 편이 좋겠습니다. 작지만 설명할 수 있는 결과를 남기는 것이 첫 앱의 좋은 출발점입니다.

출처
[1] https://news.ycombinator.com/item?id=50179958
[2] https://suminagashi.georgestrakhov.com/
관찰: 2026-10-22 KST

0

댓글 0

아직 댓글이 없습니다