소개
우리가 일반적으로 많이 접하고 사용해본 지하철노선도를 바이브코딩으로 그려보려했지만 실패한 사례를 공유드리려 합니다.
진행 방법
우선은 서울지하철노선의 중심이자 비교적 형태가 간단한 2호선 사진을 첨부해서 gemini에 그려달라고 요청했습니다.
gemini는 결과물을 화면으로 보여주지 않고 작성된 코드를 아래와 같이 보여주는데,
화면으로 옮기니 아래와 같은 결과물이 나왔습니다.
(.....심각한 수준)
이번엔 Claude 에게 같은 자료를 첨부해 요청해보았습니다.
(조금 나은 것 같기도....??)
Cursor도 별반 좋은결과를 주지 못해 이미지에서 svg를 추출하는 프로그램인 Inkscape를 사용해보았다.
아래 이미지를 프로그램을 사용해 추출시도
결과물
색상이나 텍스트가 제대로 반영되지 않고 이상하지만 형태는 그럭저럭 나와서 svg로 다운을 받아보았다.
svg로 추출한 이미지에 각각의 요소(역 표시, 노선 등) 에 상호작용이 있으려면 이미지가 path하나만으로 이뤄지는게 아닌 다양한 요소로 구성이 되어야 하는데 오로지 path 하나만으로 그림이 그려져있다.
해서 이번엔 한번에 그리는게 아닌 2호선 하나만을 그리는 걸 목표로 하고 gemini에 다음과 같이 프롬프트를 작성했다.
결과물
결과와 배운 점
특정사이트를 캡쳐하고 프롬프트요청을 하면 거의 동일하게 생긴 화면을 생성해주는 것을 많이 봤는데 특정지도나 노선도에 대해서는 이러한 것들이 매끄럽게 이뤄지지 않는게 놀라웠다.
현재로서는 전체노선도를 만들려면 위와같이 부분부분들을 생성해서 조합하는 방향으로 가야하지 않나 싶다.