바이브코딩 첫 웹앱, Gridmark는 왜 로고 대신 로고 만드는 도구를 만들었을까요?

핵심 요약 (TL;DR)

로고가 필요하다고 꼭 AI에게 완성 이미지를 요청할 필요는 없습니다. Gridmark 제작자는 Claude로 도구를 만들었지만, 로고 자체를 AI가 만들게 하고 싶지는 않았다고 설명합니다.[1] 도형을 직접 조절하는 작은 편집기가 그 답이었습니다. 첫 웹앱도 결과를 대신 내놓는 서비스보다, 사용자가 자기 취향을 찾아가는 도구에서 시작할 수 있습니다.

제작자는 어떤 불편을 도구로 바꿨나요?

한국 시간 10월 17일 저녁 올라온 제작자 소개에서 Gridmark는 브라우저 안에서 동작하는 SVG 편집기로 설명됩니다. 도형을 그리드에 놓고 조정해 로고를 만든 뒤 PNG와 SVG로 내려받는 방식입니다.[1] 이는 소개글 게시 시점이지, 그날 처음 개발을 끝냈다는 뜻은 아닙니다.

공식 홈페이지도 도형의 크기·회전·색상 조절과 무작위 변형, 마음에 드는 설정의 고정, 기기 내 프리셋 저장을 안내합니다.[2] AI가 원하는 결과를 한 번에 알아맞히도록 기다리는 대신, 사람이 바꿀 수 있는 손잡이를 남긴 셈입니다. 다만 이번 확인은 공개 원문과 홈페이지 설명의 대조이며, 내보내기 기능을 직접 시험한 후기는 아닙니다.

첫 실습에는 무엇만 남기면 좋을까요?

Gridmark의 기능을 전부 따라 만들 필요는 없습니다. 예를 들어 모임의 작은 표식을 만드는 앱이라면 도형 하나, 색상 선택, 미리보기부터 시작해 보세요. 처음부터 브랜드 관리나 결제를 넣기보다, 사용자가 값을 바꿨을 때 결과를 이해할 수 있는지가 먼저입니다.

다음은 실제 개발에 쓰인 문장이 아니라 연습용 프롬프트입니다.

“도형의 크기와 색상을 바꾸면 미리보기가 달라지는 웹앱을 만들어 주세요. 기본값으로 되돌리는 버튼과 SVG 다운로드만 넣어 주세요. 회원가입과 결제는 제외하고, 입력 범위와 확인할 동작을 설명해 주세요.”

완료 기준도 함께 적어 두세요. 색상을 바꾼 뒤 원래 값으로 돌아갈 수 있는지, 가장 작은 크기에서도 도형이 사라지지 않는지, 내려받은 파일이 화면과 같은지를 확인하는 식입니다. 이 목록은 Gridmark의 테스트 결과가 아니라 여러분의 실습을 위한 제안입니다.

미리보기가 예쁘면 배포해도 될까요?

편집기에서는 화면과 파일이 서로 다른 결과물입니다. 미리보기가 마음에 들어도 다운로드한 파일이 비어 있거나, 다른 프로그램에서 열었을 때 모양이 달라지면 목적을 이루지 못합니다. 오류를 고쳐 달라고 할 때는 선택한 값, 보였던 화면, 저장한 파일을 구분해 전달해 보세요.

배포한 뒤에는 개발 중 쓰던 화면만 확인하지 말고 실제 공개 주소에서 같은 과정을 반복하세요. 지인에게 설명 없이 색상을 바꾸고 파일을 저장해 달라고 부탁하면, 버튼의 이름이나 위치에서 막히는 지점을 찾을 수 있습니다. 첫 MVP의 검증은 기능 개수보다 이런 한 번의 완주에 가깝습니다.

FAQ: 코딩을 몰라도 같은 도구를 만들 수 있나요?

제작자는 Claude를 사용했다고 밝혔지만, 개발 경험이나 전체 작업 기록은 공개 소개만으로 확인되지 않습니다.[1] 누구나 같은 결과를 같은 시간에 낸다는 약속으로 읽기보다, 범위를 작게 정한 사례로 참고하시면 좋겠습니다.

FAQ: Gridmark의 모든 다운로드가 무료인가요?

제작자는 PNG·SVG 다운로드와 별도로 전체 브랜드 키트 다운로드에 유료 기능을 넣었다고 설명합니다.[1] 기본 출력과 묶음 상품을 구분해야 합니다. 이번 글에서는 구매 과정이나 현재 결제 조건을 검증하지 않았습니다.

출처
[1] https://news.ycombinator.com/item?id=50129683
[2] https://gridmark.dev/
관찰: 2026-10-18 KST